@charset "UTF-8";
body {
    padding-top: 1px;
}

.logo-container {
    z-index: 2;
    left: 10%;
    position: fixed;
}

.logo-container img {
    width: 200px;
}

.top-van {
    height: 773px;
    background: url('../assets/img/VW-van.png') no-repeat center center / contain;
}

.top-van .content {
    position: relative;
    top: 45%; display: flex;
    width: 52%; flex-direction: column;
    margin-left: 16%; gap: 20px;
}

.top-van .content h3 { color: #fff; font-size: 24px; font-weight: 700; letter-spacing: 1px; }
.top-van .content p { color: #fff; font-size: 20px; font-weight: 400; margin-top: 5px;}

/**/

.semi-advert-orange-and-van {
    top: -170px;
    height: 355px;
    position: relative;
}
.orange-rectangle {
    width: 85%;
    height: 355px;
    position: relative;
    margin-left: 90px;
    background: url('../assets/img/rectangle_bg.png') no-repeat center center / contain;
}
.orange-rectangle .content {
    top: 20%;
    width: 40%;
    margin-left: 10%;
    position: relative;
}
.orange-rectangle .content h3 { font-size: 52px; color: #ffffff; }

.trend-line-container {
    top: -80%;
    display: flex;
    position: relative;
    justify-content: space-between;
}
.site-quote {
    width: 600px;
    display: flex;
    padding-left: 150px;
    flex-direction: column;
    justify-content: flex-end;
}

.site-quote h4 { font-size: 20px; color: #484A58; font-weight: 400; }

.vw-trendline {
    width: 550px;
    height: 355px;
    position: relative;
    background: url('../assets/img/volkswagen-caravelle-trendline.png') no-repeat center center / contain;
}


/**/

.curved-section {
    width: 100%;
    height: 590px;
    overflow: auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    position: relative;
    background-color: #4a9fb0;
    clip-path: polygon(
            0 0,
            100% 0,
            100% 75%,
            50% 100%,
            0 75%
    );
}
.curved-section .content {
    gap: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.curved-section .underline { background-color: #fff; height: 3px; width: 120%; margin: 20px -10% 0 -10%; }
.curved-section .content p.first {
    font-size: 24px; font-weight: 400; width: 70%;
}
.curved-section .content p.second {
    font-size: 24px; font-weight: 900;
}

.get-started-btn {
    margin-top: 3%;
}

.get-started-btn:hover {
    color: #fff;
    background-color: #ff8f1f;
    border-radius: 15px;
}

.gas-what-btn {
    background-color: #fff;
    border: none;
    font-size: 18px;
    border-radius: 15px;
    color: #000;
    min-width: 230px;
}

.vehicle-bus {
    top: -180px;
    position: relative;
    margin-bottom: -210px;
}

.flip-horizontal {
    width: 400px;
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    /* Optional: filter for very old IE versions */
    filter: FlipH;
    -ms-filter: "FlipH";
}

.why-choose {
    width: 80%;
    margin: 0 auto;
}
.why-choose h4 {color: #F68616; font-size: 31px; font-weight: 700; margin-bottom: 20px;}
.why-choose p {color: #343434; font-size: 17px; font-weight: 400; margin-bottom: 20px;}

/**/

.tilted-card-first {
    color: #fff;
    height: 305px;
    position: relative;
    background: #ff8f1f; /* orange */
    border-radius: 10px;

    /* slight tilt on bottom edge */
    clip-path: polygon(
            0 0,
            100% 0%,
            100% 100%,
            0% 62%
    );

    z-index: 1;
}

.tilted-card-center {
    color: #fff;
    height: 350px;
    position: relative;
    background: #ff8f1f;
    border-radius: 10px;
}

.tilted-card {
    color: #fff;
    height: 305px;
    position: relative;
    background: #ff8f1f;
    border-radius: 10px;

    /* slight tilt on bottom edge */
    clip-path: polygon(
            0 0,
            100% 0%,
            100% 62%,
            0% 100%
    );

    z-index: 1;
}

.tilted-card-center h3, .tilted-card h3,
.tilted-card-first h3 { margin-bottom: 20px; }


.tilted-card-first p,.tilted-card-center p,
.tilted-card p { font-size: 14px; }


/**/

.footer-curve {
    width: 100%;
    height: 250px;
    overflow: auto;
    position: relative;
    padding-bottom: 2%;
    background-color: rgb(85 84 84 / 16%);
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 50% 25%, 0% 0%);
}

.footer-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.left-footer ul li { border-radius: 30%; border: 1.5px solid #ff8f1f; margin: 0 10px; }
.left-footer h3,
.footer-last h3 { font-size: 15px; font-weight: 700; color: #8C87A6; }

.footer-last ul li.list-group-item a,
.footer-last ul li.list-group-item { background-color: transparent; color: #0A071B; text-decoration: none; }


/*
 *
 *   MEDIA QUERIES
 */

/*
 * When the screen width is 600 pixels or smaller
 */
@media (max-width: 480px) {
    .logo-container { z-index: 2; }
    .logo-container img { width: 150px; }
    .top-van {
        width: 95%;
        height: 350px;
        position: relative;
        border-radius: 17px;
        margin-top: 50px;
        background-image: linear-gradient(to bottom right,#358C9D, #F68616);
        box-shadow: 0 05px 20px rgba(0, 0, 0, 0.5);
    }
    .top-van .content { top: 28%; margin-left: 0; width: 100%; z-index: 3;}
    .top-van .content h3 { font-size: 15px; }
    .top-van .content p { font-size: 13px; color: #1a1d20; }

    .semi-advert-orange-and-van { display: none; }


    /**/
    .vehicle-bus {top: 0; margin-bottom: 0;}

    /**/
    .curved-section { clip-path: none; margin-top: 20px; height: auto; border-radius: 20px; }
    .curved-section .content p.first { width: auto; font-size: 20px; }
    .curved-section .content p.second { font-size: 22px; }

    /**/
    .tilted-card-first, .tilted-card-center, .tilted-card { height: auto; }
    .tilted-card-first,.tilted-card { clip-path: none; margin: 1rem 0; }

    /**/

    .why-choose { width: 100%; }

    /**/
    .footer-curve { clip-path: none; height: auto; padding: 20px 0; }
    .footer-content { justify-content: center; }
    .footer-content .row { gap: 20px; }
}


/*
 *
 * When the screen width is 600 pixels or larger
 *
 */
@media (min-width: 1024px) and (max-width: 1152px) {
    .semi-advert-orange-and-van { top: -370px; margin-bottom: -300px; }
    .orange-rectangle .content { top: 23%; width: 60%; margin-left: 6%; }
}

/*
 * screens between 600px and 1024px wide.
 */

@media (min-width: 600px) and (max-width: 1024px) {
    .logo-container { left: 10%; }
    .top-van { position: relative; top: -100px; }
    .top-van .content { top: 40%; width: 70%; margin-left: 10%; }
    .top-van .content h3 { font-size: 22px }
    .top-van .content p { font-size: 18px; }

    /**/
    .semi-advert-orange-and-van { top: -390px;  margin-bottom: -300px; }
    .site-quote { width: 100%; }
    .semi-advert-orange-and-van .orange-rectangle { margin-left: 50px;}
    .vw-trendline { top: -73%;height: 300px;}
    .semi-advert-orange-and-van .orange-rectangle .content {width: 29%; top: 25%;}
    .orange-rectangle .content h3 { font-size: 29px; }

    /**/

    .vehicle-bus { margin-bottom: -150px; }
}

@media (min-width: 1025px) and (max-width: 1152px) {
    .logo-container { left: 15%; }
    .top-van { position: relative; top: -100px; }
    .top-van .content { top: 40%; width: 70%; margin-left: 10%; }
    .top-van .content h3 { font-size: 22px }
    .top-van .content p { font-size: 18px; }
}