/*==================================
            RESPONSIVE
==================================*/


/*==================================
        GLOBAL RESPONSIVE FIX
==================================*/

@media (max-width: 1200px) {

    html,
    body {

        max-width: 100%;

    }

}


/*==================================
        1200px
==================================*/

@media (max-width: 1200px) {

    .hero-content {

        padding-left: 60px;
    }


    .story-section {

        gap: 60px;
    }


    .footer-container {

        grid-template-columns:
            repeat(2, 1fr);
    }

}


/*==================================
        1100px
==================================*/

@media (max-width: 1100px) {

    .nav-menu,
    .quote-btn {

        display: none !important;
    }


    .menu-toggle {

        display: flex !important;
    }


    .mobile-menu {

        display: block;
    }

}


/*==================================
        992px
==================================*/

@media (max-width: 992px) {

    .hero h1 {

        font-size: 4rem;
    }


    .stats {

        grid-template-columns:
            repeat(3, 1fr);

        gap: 18px;
    }


    .grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .why-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .story-section {

        grid-template-columns: 1fr;
    }


    .story-background {

        display: none;
    }


    .story-highlights {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .vehicles-grid {

        grid-template-columns: 1fr;
    }


    .reviews-grid {

        grid-template-columns: 1fr;
    }


    .footer-container {

        grid-template-columns:
            repeat(2, 1fr);
    }

}


/*==================================
        768px
==================================*/

@media (max-width: 768px) {


    /*--------------------------------
            FULL WIDTH
    --------------------------------*/

    html {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow-x: hidden !important;
    }


    body {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow-x: hidden !important;
    }


    /*--------------------------------
          ALL MAIN SECTIONS
    --------------------------------*/

    .hero,
    .stats,
    .section,
    .parallax-banner,
    .why-us,
    .story-section,
    .vehicles-section,
    .reviews-section,
    footer {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

    }


    /*--------------------------------
                HEADER
    --------------------------------*/

    .header {

        width: 100% !important;

        left: 0;

        display: flex;

        justify-content: center;

    }


    .header-container {

        position: relative;

    }


    /*--------------------------------
              HERO
    --------------------------------*/

    .hero {

        height: auto;

        min-height: 100vh;

        padding:
            150px 25px 80px;

    }


    .hero-content {

        width: 100%;

        max-width: 700px;

        padding: 0;

        margin: 0 auto;

        text-align: center;
    }


    .hero h1 {

        font-size: 3rem;

        line-height: 1.08;
    }


    .hero p {

        font-size: 16px;

        line-height: 1.7;
    }


    .buttons {

        display: flex;

        justify-content: center;

        flex-wrap: wrap;

        gap: 12px;
    }


    /*--------------------------------
                STATS
    --------------------------------*/

    .stats {

        padding:
            70px 20px;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 12px;
    }


    /*--------------------------------
            DESTINATIONS
    --------------------------------*/

    .section {

        padding:
            70px 25px;

    }


    .grid {

        grid-template-columns: 1fr;
    }


    /*--------------------------------
               WHY US
    --------------------------------*/

    .why-grid {

        grid-template-columns: 1fr;
    }


    /*--------------------------------
               STORY
    --------------------------------*/

    .story-section {

        padding:
            80px 25px;

    }


    .story-highlights {

        grid-template-columns:
            repeat(2, 1fr);

    }


    /*--------------------------------
               VEHICLES
    --------------------------------*/

    .vehicles-section {

        padding:
            85px 25px;

    }


    .vehicles-grid {

        grid-template-columns: 1fr;

    }


    /*--------------------------------
             TESTIMONIALS
    --------------------------------*/

    .reviews-section {

        padding:
            85px 25px;

    }


    .reviews-grid {

        grid-template-columns: 1fr;

    }


    /*--------------------------------
                 MODAL
    --------------------------------*/

    .quote-modal {

        padding: 20px;

    }


    .quote-box {

        width: 100%;

        max-width: 95vw;

        max-height: 90vh;

        overflow-y: auto;

        padding: 30px;

    }


    .quote-box form {

        grid-template-columns: 1fr;

    }


    .input-box.full-width {

        grid-column: auto;

    }


    .quote-box button[type="submit"] {

        grid-column: auto;

    }


    /*--------------------------------
                FOOTER
    --------------------------------*/

    .footer-container {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .footer-social {

        justify-content: center;

    }


    .footer-contact {

        align-items: center;

    }

}


/*==================================
        600px
==================================*/

@media (max-width: 600px) {

    .stats {

        grid-template-columns: 1fr;

        width: 100%;

        max-width: 430px;

        margin-left: auto;

        margin-right: auto;

        padding-left: 18px;

        padding-right: 18px;

    }


    .stats .card {

        width: 100%;
    }


    .story-highlights {

        grid-template-columns: 1fr;
    }


    .hero h1 {

        font-size: 2.7rem;
    }

}


/*==================================
        480px
==================================*/

@media (max-width: 480px) {


    /*--------------------------------
                GLOBAL
    --------------------------------*/

    .hero,
    .stats,
    .section,
    .parallax-banner,
    .why-us,
    .story-section,
    .vehicles-section,
    .reviews-section,
    footer {

        width: 100% !important;

        max-width: none !important;

    }


    /*--------------------------------
                HERO
    --------------------------------*/

    .hero {

        min-height: 100vh;

        padding:
            135px 18px 70px;
    }


    .hero h1 {

        font-size: 2.4rem;

        line-height: 1.12;

    }


    .hero p {

        font-size: .95rem;

    }


    .buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .buttons a {

        width: 100%;

        text-align: center;

    }


    /*--------------------------------
              DESTINATIONS
    --------------------------------*/

    .section {

        padding:
            65px 18px;

    }


    .section h2,
    .story-content h2,
    .reviews-header h2,
    .vehicles-section .section-header h2 {

        font-size: 2.2rem;

    }


    /*--------------------------------
                 STORY
    --------------------------------*/

    .story-section {

        padding:
            65px 18px;

    }


    /*--------------------------------
               VEHICLES
    --------------------------------*/

    .vehicles-section {

        padding:
            70px 18px;

    }


    /*--------------------------------
            TESTIMONIALS
    --------------------------------*/

    .reviews-section {

        padding:
            70px 18px;

    }


    /*--------------------------------
                 MODAL
    --------------------------------*/

    .quote-box {

        padding: 25px 20px;

        border-radius: 22px;

    }


    .quote-box h2 {

        font-size: 2.2rem;

    }


    /*--------------------------------
                 TOAST
    --------------------------------*/

    .toast {

        width: 90%;

        min-width: 0;

        right: 5%;

    }

}


/*==================================
        360px
==================================*/

@media (max-width: 360px) {

    .hero {

        padding-left: 16px;

        padding-right: 16px;

    }


    .hero h1 {

        font-size: 2.15rem;

    }


    .hero p {

        font-size: .9rem;

    }


    .section {

        padding-left: 16px;

        padding-right: 16px;

    }


    .story-section {

        padding-left: 16px;

        padding-right: 16px;

    }

}