.dest-section,
.why-section,
.reasons-section{

    width:100%;
    overflow:hidden;

}



/* ===========================
REASONS SECTION
=========================== */


.reasons-section{

    background:#fffae2;

    padding:80px clamp(20px,4vw,80px);

    overflow:hidden;

}



.reasons-header{

    margin-bottom:40px;

}



.reasons-header span{

    color:#ffd000;

    font-size:12px;

    letter-spacing:3px;

    font-weight:bold;

}



.reasons-header h2{

    font-family:"Cormorant Garamond";

    font-size:55px;

    color:#102332;

    margin-top:10px;

}



/* GRID */


.reasons-cards{

    display:grid;

    grid-template-columns:repeat(5,minmax(0,1fr));

    gap:18px;

    width:100%;

}



/* CARD */


.reason-card{

    height:230px;

    position:relative;

    overflow:hidden;

    border-radius:18px;

    min-width:0;

}



.reason-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s ease;

}



.reason-card:hover img{

    transform:scale(1.08);

}



/* OVERLAY */


.reason-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    transparent,
    rgba(0,0,0,.75)
    );

}



/* TEXT */


.reason-text{

    position:absolute;

    bottom:20px;

    left:20px;

    right:15px;

    color:white;

}



.reason-text h2{

    font-family:"Montserrat";

    font-size:22px;

    line-height:1.05;

    font-weight:900;

}



.reason-text p{

    margin-top:10px;

    font-size:14px;

}



/* SPECIAL CARDS */


.reason-wide,
.reason-food{

    grid-column:span 2;

}



/* MACBOOK / SMALL DESKTOP */


@media(max-width:1400px){


    .reasons-cards{

        grid-template-columns:repeat(4,minmax(0,1fr));

    }


}



/* TABLET */


@media(max-width:900px){


.reasons-cards{

display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px;

}


.reason-wide,
.reason-food{

grid-column:span 2;

}

}

/* MOBILE */


@media(max-width:600px){


    .reasons-section{

        padding:60px 20px;

    }



    .reasons-header h2{

        font-size:42px;

    }



    .reasons-cards{

        grid-template-columns:1fr;

    }


    .reason-card{

        height:250px;

    }


}

        @import url("https://db.onlinewebfonts.com/c/31ed0189fe1ff1e740a652e0f75b77dc?family=Snell+Roundhand+Script");
        /* ===========================
RESET
=========================== */

        html,
        body {

            width: 100%;
            max-width: 100%;
            overflow-x: hidden;

        }


        *,
        *::before,
        *::after {

            box-sizing: border-box;

        }


        img {

            max-width: 100%;
            height: auto;

        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;

            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
        }


        body {
            overflow-x: hidden;
            overflow-y: auto;
            font-family: "Montserrat", sans-serif;
        }

        /* =========================================
           HEADER
        ========================================= */

        header {
            position: absolute;

            top: 0;
            left: 0;

            width: 100%;

            height: 120px;

            display: flex;
            align-items: center;

            padding: 20px 3.8vw;

            z-index: 10;
        }


        /* LOGO */

        .logo {
            width: 65px;
            height: 65px;

            border-radius: 50%;

            display: flex;
            justify-content: center;
            align-items: center;

            font-size: 30px;
            font-weight: 700;

            margin-right: 35px;
        }

        .logo img {
            width: 80px;
            height: auto;
            display: block;
        }


        /* =========================================
           HAMBURGER
        ========================================= */

        .menu-button {
            width: 68px;
            height: 60px;

            display: flex;
            flex-direction: column;
            justify-content: center;

            gap: 10px;

            cursor: pointer;
        }

        .menu-button span {
            display: block;

            width: 66px;
            height: 4px;

            background: white;

            border-radius: 5px;
        }


        /* =========================================
           CART
        ========================================= */

        .cart {
            margin-left: 35px;

            width: 65px;
            height: 60px;

            position: relative;

            font-size: 48px;

            line-height: 1;

            color: white;
        }

        .cart::before {
            content: "🛒";

            filter: grayscale(1) brightness(0) invert(1);
        }


        /* =========================================
           NAVIGATION
        ========================================= */

        nav {
            margin-left: auto;

            display: flex;
            align-items: center;

            gap: 4vw;
        }

        nav a {
            position: relative;

            color: white;

            text-decoration: none;

            font-size: clamp(14px, 1.35vw, 25px);

            font-weight: 400;

            letter-spacing: 0.3px;

            white-space: nowrap;
        }

        nav a.active {
            color: #ffd000;
        }

        nav a.active::after {
            content: "";

            position: absolute;

            left: 50%;
            transform: translateX(-50%);

            bottom: -25px;

            width: 180px;
            max-width: 100%;

            height: 4px;

            background: #ffd000;
        }


        /* =========================================
           LOGIN BUTTON
        ========================================= */

        .login {
            margin-left: 2vw;

            min-width: 200px;
            height: 78px;

            border-radius: 50px;

            background: #ffc800;

            color: #063ca6;

            display: flex;
            justify-content: center;
            align-items: center;

            font-size: 26px;
            font-weight: 800;

            text-decoration: none;

            transition: 0.25s ease;
        }

        .login:hover {
            transform: translateY(-3px);

            background: #ffd52f;
        }

        /* ===========================
HERO
=========================== */

        .hero {

            height: 100vh;
            width: 100%;

            background-size: cover;
            background-position: center;

            transition: 0.8s ease;

            color: white;

            position: relative;
        }

        /* LOGO */





        /* ===========================
NAVBAR
=========================== */

        .navbar {

            height: 125px;

            width: 100%;

            border-bottom:
                1px solid rgba(255, 255, 255, .2);

            display: flex;

            align-items: center;

        }


        /* MENU */

        .menu {

            position: absolute;

            left: 35px;
            top: 40px;

        }


        .menu span {

            display: block;

            width: 65px;
            height: 3px;

            background: white;

            margin-bottom: 18px;

        }



        /* LOGO */




        /* NAV LINKS */

        .nav {

            margin: auto;

            display: flex;

            gap: 45px;

        }



        .nav a {

            color: white;

            text-decoration: none;

            font-size: 23px;

            padding-bottom: 35px;

        }



        .nav .active {

            color: #ffd000;

            border-bottom: 4px solid #ffd000;

        }



        /* LOGIN */

        .login {

            position: absolute;

            right: 35px;

            top: 18px;

            background: #ffd000;

            color: #063ca6;

            padding: 26px 60px;

            border-radius: 60px;

            font-size: 25px;

            font-weight: 700;

        }



        /* ===========================
LEFT LINE
=========================== */

        .hero-line {

            position: absolute;

            left: 95px;

            top: 155px;

            height: 330px;

            width: 8px;

            background: #ffd000;

        }



        /* ===========================
MAIN TEXT
=========================== */


        .content {

            position: absolute;

            left: 150px;

            top: 190px;

        }


        .script {

            font-family: "";

            color: white;

            font-size: 35px;

            font-style: italic;

            margin-bottom: 20px;

        }



        h1 {

            font-family: "Cormorant Garamond";

    font-size:clamp(70px, 8vw, 150px);

            letter-spacing: 10px;

            line-height: .9;

            color: #ffd000;

            margin-bottom: 20px;


        }



        .travel {

            color: white;

    font-size:clamp(35px, 4vw, 75px);

            letter-spacing: 25px;

            margin-left: 200px;

        }


        /* ===========================
CONTACT SECTION
=========================== */


        .contact-section {

            background:
                linear-gradient(rgba(5, 20, 30, .85),
                    rgba(5, 20, 30, .85)),
                url(images/contact-bg.jpg);


            background-size: cover;
            background-position: center;


            padding: 100px 6%;

            color: white;

        }



        .contact-container {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 80px;

            max-width: 1300px;

            margin: auto;

        }




        .contact-info span {

            color: #ffd000;

            letter-spacing: 3px;

            font-size: 13px;

            font-weight: bold;

        }



        .contact-info h2 {

            font-family: "Cormorant Garamond";

            font-size: 70px;

            margin: 10px 0;

        }



        .contact-info>p {

            color: #ddd;

            line-height: 1.8;

            max-width: 450px;

        }




        .contact-details {

            margin-top: 45px;

        }



        .contact-item {

            display: flex;

            align-items: center;

            gap: 25px;

            margin-bottom: 30px;

        }



        .contact-item i {

            width: 55px;

            height: 55px;

            border-radius: 50%;

            background: #ffd000;

            color: #102332;

            display: flex;

            justify-content: center;

            align-items: center;

            font-size: 22px;

        }



        .contact-item h3 {

            margin-bottom: 5px;

        }



        .contact-item p {

            color: #ccc;

        }






        /* FORM */


        .contact-form {

            background: white;

            padding: 45px;

            border-radius: 25px;

            color: #102332;

        }



        .contact-form h3 {

            font-size: 30px;

            margin-bottom: 30px;

        }




        .form-row {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 20px;

        }



        .contact-form input,
        .contact-form textarea {


            width: 100%;

            border: none;

            background: #f3f3f3;

            padding: 18px;

            margin-bottom: 20px;

            border-radius: 10px;

            font-family: "Montserrat";

        }



        .contact-form textarea {

            height: 150px;

            resize: none;

        }




        .contact-form button {


            background: #ffd000;

            color: #102332;

            border: none;

            padding: 18px 35px;

            border-radius: 40px;

            font-weight: bold;

            cursor: pointer;

            transition: .3s;

        }



        .contact-form button:hover {

            background: #102332;

            color: white;

        }





        @media(max-width:900px) {


            .contact-container {

                grid-template-columns: 1fr;

            }


            .form-row {

                grid-template-columns: 1fr;

            }


        }

        /* ===========================
BUTTON
=========================== */


        .button {

            position: absolute;

            left: 150px;

            top: 700px;


            background: #ffd000;

            color: #063ca6;


            padding: 15px 40px;

            border-radius: 60px;


            font-size: 25px;

            font-weight: 700;

        }



        /* ===========================
SOCIALS
=========================== */


        .socials {

            position: absolute;

            left: 70px;

            bottom: 130px;

            display: grid;

            gap: 25px;

        }


        .socials a {

            color: #ffd000;

            font-size: 40px;

        }



        /* ===========================
LOCATION
=========================== */


        .location {

            position: absolute;

            right: 0;

            bottom: 70px;


            width: 530px;

            height: 140px;


            background: rgba(0, 0, 0, .55);


            display: flex;

            align-items: center;


            padding: 30px;


            gap: 25px;

        }


        .location i {

            color: #ffd000;

            font-size: 60px;

        }



        .location h2 {

            font-size: 26px;

        }



        .location p {

            font-size: 22px;

        }



        /* ===========================
CONTROLS
=========================== */


        .controls {

            position: absolute;

            left: 180px;

            bottom: 45px;


            display: flex;

            gap: 70px;

        }



        .arrow {

            width: 60px;

            height: 60px;


            border: 2px solid #ffd000;

            border-radius: 50%;


            display: flex;

            justify-content: center;

            align-items: center;


            color: #ffd000;


            font-size: 30px;


            cursor: pointer;

        }



        .arrow:hover {

            background: #ffd000;

            color: #063ca6;

        }



        /* ===========================
SLIDE NUMBER
=========================== */


        .number {

            position: absolute;

            left: 440px;

            bottom: 75px;


            font-size: 25px;

        }



        /* ===========================
BARS
=========================== */


        .bars {

            position: absolute;

            left: 435px;

            bottom: 45px;

            display: flex;

            gap: 15px;

        }


        .bar {

            width: 100px;

            height: 10px;

            background: white;

        }


        .bar.active {

            background: #ffd000;

        }

        /* animations */

        .hero {
            transition:
                background-image .8s ease,
                filter .8s ease;
        }


        .hero.change {
            filter: blur(8px);
        }

        /* DESTINATIONS */

        .dest-section {
    padding:80px clamp(20px,4vw,80px);
            background: #fffae2;
        }


        .dest-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 35px;
        }


        .dest-header span {
            color: #ffd000;
            font-size: 12px;
            letter-spacing: 3px;
            font-weight: bold;
        }


        .dest-header h2 {
            font-size: 40px;
            margin: 8px 0;
            color: #102332;
        }


        .dest-script {
            font-family: "Snell Roundhand Script", cursive;
            font-size: 32px;
            color: #00008b;
            text-align: right;
        }




        .dest-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }



        .dest-card {
            height: 210px;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
        }



        .dest-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .5s;
        }


        .dest-card:hover img {
            transform: scale(1.08);
        }



        .dest-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(transparent,
                    rgba(0, 0, 0, .8));

            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 20px;
            color: white;
        }


        .dest-overlay h3 {
            font-size: 14px;
            letter-spacing: 3px;
        }


        .dest-overlay p {
            font-size: 12px;
        }


        .dest-overlay button {
            position: absolute;
            right: 15px;
            bottom: 15px;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            border: none;
            background: rgba(255, 208, 0, 0.5);
        }







        /* WHY SECTION */


        .why-section {

            background:
                linear-gradient(rgba(4, 24, 32, .75),
                    rgba(4, 24, 32, .75)),
                url(images/mayon.jpg);

            background-size: cover;
            background-position: center;

            color: white;
            padding: 70px 6%;

        }



        .why-title span {

            color: #e2bd29;
            font-size: 12px;
            letter-spacing: 3px;

        }


        .why-title h2 {

            font-size: 40px;
            margin: 10px 0;

        }


        .why-title p {

            color: #ddd;

        }


.why-items {

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:40px;
    width:100%;

}

.why-box{

    flex:1;

    min-width:0;

}



        .icon {

            font-size: 30px;
            color: #e5bd27;

        }


        .why-box h3 {

            font-size: 14px;
            letter-spacing: 1px;

        }


        .why-box b {

            color: #e5bd27;
            margin-right: 20px;
            font-size: 20px;

        }


        .why-box p {

            color: #ddd;
            line-height: 1.6;

        }







        /* EXPLORE BANNER */


        .explore-banner {

            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            align-items: center;

            background: #faf5dc;
            overflow: hidden;

        }



        .explore-text {

            background: #f5d331;
            padding: 60px;

            border-radius: 0 60px 60px 0;

        }


        .explore-text h2 {

            font-size: 35px;
            color: #152b35;

        }


        .explore-text span {

            font-family: cursive;
            font-size: 45px;

        }



        .explore-middle {

            padding: 40px;

        }



        .explore-middle a {

            display: inline-block;
            background: #102b3a;
            color: white;
            padding: 14px 25px;
            border-radius: 30px;
            text-decoration: none;
            font-size: 12px;

        }



        .explore-image img {

            width: 100%;
            height: 260px;
            object-fit: cover;

        }





        /* RESPONSIVE */

        @media(max-width:900px) {

            .dest-cards {
                grid-template-columns: repeat(2, 1fr);
            }


            .why-items {
                grid-template-columns: 1fr;
            }


            .explore-banner {
                grid-template-columns: 1fr;
            }

        }

        /* ===========================
REVIEWS SECTION
=========================== */


        .reviews-section {

            background: #f8f5e9;

            padding: 100px 6%;

        }



        .reviews-header {

            text-align: center;

            max-width: 700px;

            margin: auto;

        }



        .reviews-header span {

            color: #c7a300;

            letter-spacing: 3px;

            font-size: 13px;

            font-weight: bold;

        }



        .reviews-header h2 {

            font-family: "Cormorant Garamond";

            font-size: 65px;

            color: #102332;

            margin: 15px 0;

        }



        .reviews-header p {

            color: #555;

        }





        .reviews-container {

            display: grid;

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

            gap: 30px;

            margin-top: 60px;

        }






        .review-card {


            background: white;

            padding: 35px;

            border-radius: 25px;

            box-shadow:
                0 15px 40px rgba(0, 0, 0, .08);


            transition: .3s;

        }



        .review-card:hover {

            transform: translateY(-10px);

        }





        .review-top {

            display: flex;

            align-items: center;

            gap: 20px;

        }




        .profile {

            width: 65px;

            height: 65px;

            background: #ffd000;

            color: #102332;

            border-radius: 50%;

            display: flex;

            justify-content: center;

            align-items: center;

            font-size: 25px;

            font-weight: bold;

        }




        .review-top h3 {

            color: #102332;

            margin-bottom: 5px;

        }



        .review-top p {

            color: #777;

            font-size: 14px;

        }




        .stars {

            color: #ffd000;

            font-size: 25px;

            margin: 25px 0;

        }



        .review-text {

            color: #555;

            line-height: 1.8;

            font-style: italic;

        }




        @media(max-width:900px) {


            .reviews-container {

                grid-template-columns: 1fr;

            }


            .reviews-header h2 {

                font-size: 45px;

            }


        }

        /* ==========================================
   COMPLETE RESPONSIVE SYSTEM
   MANAWARI WEBSITE
========================================== */


        /* TABLET */

        @media (max-width:1100px) {


            /* HEADER */

            header {

                padding: 20px 40px;

            }


            .nav {

                gap: 25px;

            }


            .nav a {

                font-size: 16px;

            }




            /* HERO */

.content{

    left:8vw;
    top:20vh;

}


            h1 {

                font-size: 110px;

            }


            .travel {

                font-size: 55px;

                letter-spacing: 15px;

            }



            /* DESTINATIONS */

            .dest-cards {

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

            }


            /* WHY */

            .why-items {

                gap: 20px;

            }


        }



        /* MOBILE */

        @media(max-width:768px) {


            /* GLOBAL */

            body {

                overflow-x: hidden;

            }



            section {

                width: 100%;

            }



            /* HEADER */


            header {

                height: 80px;

                padding: 15px 20px;

            }



            .logo {

                width: 55px;

                height: 55px;

            }


            .nav {

                display: none;

            }


            .login {

                padding: 12px 20px;

                font-size: 12px;

            }



            /* HERO */


            .hero {

                height: 100vh;

                min-height: 700px;

            }



            .hero::after {

                background:

                    linear-gradient(90deg,
                        rgba(0, 0, 0, .75),
                        rgba(0, 0, 0, .25));

            }



            .content {

                left: 25px;

                right: 25px;

                top: 190px;

            }



            .script {

                font-size: 25px;

            }



            h1 {

                font-size: 65px;

                line-height: .9;

                letter-spacing: 3px;

            }



            .travel {

                font-size: 30px;

                letter-spacing: 5px;

                margin-left: 0;

            }



            .hero-line {

                left: 15px;

                height: 200px;

            }



            /* HERO BUTTON */


            .button {

                left: 25px;

                bottom: 150px;

                padding: 14px 25px;

                font-size: 14px;

            }




            /* LOCATION */


            .location {

                width: 100%;

                height: auto;

                padding: 20px;

                bottom: 0;

            }


            .location h2 {

                font-size: 20px;

            }


            .location p {

                font-size: 14px;

            }



            /* CONTROLS */


            .controls {

                bottom: 110px;

                left: auto;

                right: 25px;

            }


            .arrow {

                width: 45px;

                height: 45px;

            }




            /* DESTINATION SECTION */


            .dest-section {

                padding: 60px 20px;

            }



            .dest-header {

                display: block;

            }



            .dest-header h2 {

                font-size: 38px;

            }


            .dest-script {

                text-align: left;

                font-size: 22px;

            }



            .dest-cards {

                grid-template-columns: 1fr;

            }



            .dest-card {

                height: 260px;

            }



            /* WHY */


            .why-section {

                padding: 60px 25px;

            }


            .why-title h2 {

                font-size: 40px;

            }



            .why-items {

                display: block;

            }


            .why-box {

                padding: 25px 0;

                border-left: none;

            }



            /* EXPLORE */


            .explore-banner {

                display: flex;

                flex-direction: column;

            }



            .explore-text {

                width: 100%;

                padding: 40px 25px;

                border-radius: 0 40px 40px 0;

            }


            .explore-text h2 {

                font-size: 32px;

            }



            .explore-text span {

                font-size: 42px;

            }



            .explore-middle {

                padding: 35px 25px;

            }



            .explore-image img {

                height: 220px;

            }




            /* REVIEWS */


            .reviews-section {

                padding: 60px 20px;

            }


            .reviews-header h2 {

                font-size: 42px;

            }



            .reviews-container {

                grid-template-columns: 1fr;

            }




            /* CONTACT */


            .contact-section {

                padding: 60px 20px;

            }



            .contact-container {

                display: block;

            }



            .contact-info h2 {

                font-size: 45px;

            }



            .contact-form {

                margin-top: 40px;

                padding: 25px;

            }



            .form-row {

                grid-template-columns: 1fr;

            }



        }



        /* SMALL PHONES */

        @media(max-width:400px) {


            h1 {

                font-size: 52px;

            }



            .travel {

                font-size: 25px;

            }



            .script {

                font-size: 22px;

            }


            .login {

                display: none;

            }


            .location h2 {

                font-size: 18px;

            }


        }

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


        /* iPad Portrait */
        @media (min-width:768px) and (max-width:900px) {


            header {

                padding: 20px 35px;

            }


            .nav {

                gap: 18px;

            }


            .nav a {

                font-size: 15px;

            }



            .content {

                left: 60px;

                top: 200px;

            }



            h1 {

                font-size: 95px;

            }



            .travel {

                font-size: 45px;

                letter-spacing: 12px;

            }



            .script {

                font-size: 30px;

            }



            .button {

                left: 60px;

            }




            .location {

                width: 100%;

            }


            .location h2 {

                font-size: 22px;

            }




            /* DESTINATIONS */


            .dest-cards {

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

            }



            .dest-card {

                height: 240px;

            }



            /* WHY */


            .why-items {

                grid-template-columns: 1fr;

            }


            .why-box {

                border-left: none;

                border-bottom: 1px solid rgba(255, 255, 255, .3);

            }



        }





        /* ==========================================
   IPAD LANDSCAPE / SMALL LAPTOP
========================================== */


        @media (min-width:901px) and (max-width:1180px) {


            header {

                padding: 25px 50px;

            }



            .nav {

                gap: 25px;

            }



            .nav a {

                font-size: 18px;

            }



            .content {

                left: 90px;

            }



            h1 {

                font-size: 120px;

            }



            .travel {

                font-size: 55px;

            }



            .dest-cards {

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

            }



            .dest-card {

                height: 190px;

            }



            .why-items {

                gap: 15px;

            }



            .why-box {

                padding: 20px;

            }



            .explore-banner {

                grid-template-columns: 1fr 1fr;

            }



            .explore-image {

                display: none;

            }


        }

        





        /* ==========================================
   MACBOOK / LAPTOP
========================================== */


        /* MacBook Air / Pro 13 inch */
        @media (min-width:1181px) and (max-width:1440px) {



            header {

                padding-left: 60px;

                padding-right: 60px;

            }



            .nav {

                gap: 35px;

            }



            .nav a {

                font-size: 20px;

            }




            .content {

                left: 110px;

                top: 190px;

            }



            h1 {

                font-size: 125px;

            }



            .travel {

                font-size: 65px;

                letter-spacing: 18px;

            }



            .location {

                width: 420px;

            }




            .dest-card {

                height: 220px;

            }



            .why-box h3 {

                font-size: 14px;

            }




        }



        /* Large MacBook / Desktop */

        @media(min-width:1441px) {


            .content {

                left: 150px;

            }



            h1 {

                font-size: 150px;

            }



        }

        @media(min-width:1600px){

    .dest-cards{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }


    .reasons-cards{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

}
        /* =====================================
   MOBILE HERO FIX
===================================== */

        @media(max-width:600px) {


            /* HEADER */

            header {

                height: 75px;
                padding: 10px 15px;

                display: flex;
                justify-content: space-between;
                align-items: center;

            }


            .logo {

                width: 55px;
                height: 55px;

            }


            /* Hide desktop navigation */

            .nav {

                display: none;

            }



            /* HERO */

            .hero {
                width: 100%;
                max-width: 100%;
                overflow: hidden;
            }


            .content {

                left: 25px;
                right: 20px;
                top: 170px;

            }



            .script {

                font-size: 22px;

                line-height: 1.2;

                max-width: 260px;

            }



            h1 {

                font-size: 55px;

                letter-spacing: 3px;

                margin-top: 25px;

            }



            .travel {

                font-size: 28px;

                letter-spacing: 7px;

                margin-left: 0;

            }



            /* Yellow line */

            .hero-line {

                left: 5px;

                top: 150px;

                height: 190px;

            }



            /* SOCIAL ICONS */

            .socials {

                position: absolute;

                left: 55px;

                bottom: 220px;

                display: flex;

                flex-direction: column;

                gap: 25px;

            }


            .socials a {

                font-size: 30px;

            }




            /* START BUTTON */

            .button {

                left: 15px;

                bottom: 120px;

                padding: 12px 35px;

                font-size: 13px;

            }



            /* ARROWS */


            .controls {

                right: 20px;

                bottom: 120px;

                left: auto;

                display: flex;

                gap: 20px;

            }


            .arrow {

                width: 45px;

                height: 45px;

            }



            /* LOCATION */

            .location {

                height: 90px;

                width: 100%;

                bottom: 0;

                padding: 15px;

            }


            .location h2 {

                font-size: 18px;

            }


            .location p {

                font-size: 13px;

            }



            .location i {

                font-size: 35px;

            }


        }

        @media(max-width:600px) {


            /* Stop sections exceeding screen */

            .hero,
            header,
            section,
            footer {

                width: 100%;
                max-width: 100%;
                overflow: hidden;

            }



            /* Fix hero */

            .hero {

                position: relative;

                overflow: hidden;

            }



            /* Fix background */

            .hero::before,
            .hero::after {

                width: 100%;

            }



            /* Fix content */

            .content {

                width: auto;

                max-width: 90%;

            }



            /* Fix navigation */

            .nav {

                display: none;

            }


            /* Fix location */

            .location {

                left: 0;

                right: 0;

                width: 100%;

            }



            /* Fix buttons */

            .button {

                max-width: 90%;

            }



            /* Fix slider images */

            .hero img,
            .slide img {

                width: 100%;

                max-width: 100%;

                object-fit: cover;

            }

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


            header {

                width: 100%;

                display: flex;

                align-items: center;

                justify-content: space-between;

                padding: 20px 7%;

                position: absolute;

                top: 0;

                z-index: 1000;

            }



            .logo {

                width: 70px;

                height: 70px;

                object-fit: contain;

            }



            .nav {

                display: flex;

                gap: 40px;

            }



            .nav a {

                color: white;

                text-decoration: none;

                font-size: 16px;

                letter-spacing: 1px;

                cursor: pointer;

                position: relative;

            }



            .nav a.active::after {

                content: "";

                position: absolute;

                width: 45px;

                height: 4px;

                background: #ffd000;

                bottom: -15px;

                left: 0;

            }



            .login {

                background: #ffd000;

                border: none;

                border-radius: 30px;

                padding: 15px 35px;

                font-weight: bold;

            }



            .menu-btn {

                display: none;

                background: none;

                border: none;

                color: white;

                font-size: 35px;

            }



            .mobile-menu {

                display: none;

            }




            /* MOBILE */

            @media(max-width:768px) {


                header {

                    padding: 15px 20px;

                }



                .logo {

                    width: 55px;

                    height: 55px;

                }



                .nav,
                .login {

                    display: none;

                }



                .menu-btn {

                    display: block;

                }



                .mobile-menu {


                    position: absolute;

                    top: 75px;

                    left: 0;

                    width: 100%;

                    background: rgba(5, 20, 30, .95);

                    display: none;

                    flex-direction: column;

                    padding: 25px;

                    gap: 25px;

                    z-index: 999;


                }



                .mobile-menu a {

                    color: white;

                    text-decoration: none;

                    font-size: 18px;

                }



                .mobile-menu.show {

                    display: flex;

                }



            }

        }

        .mobile-menu {

            display: none !important;

        }


        @media(max-width:768px) {


            .mobile-menu {

                display: none !important;

                position: absolute;

                top: 75px;

                left: 0;

                width: 100%;

                background: rgba(5, 20, 30, .95);

                flex-direction: column;

                padding: 25px;

                gap: 25px;

                z-index: 9999;

            }



            .mobile-menu.show {

                display: flex !important;

            }


        }

        @media(max-width:768px) {

            .button {
                display: none;
            }

        }

        @media(max-width:768px) {

            .socials {
                display: none;
            }

        }

        @media (min-width:1200px) and (max-width:1400px){

    .button{
        display:none;
    }

}

@media (min-width:1200px) and (max-width:1500px){

    .content{

        left:80px;
        top:160px;

    }


    h1{

        font-size:110px;

    }


    .travel{

        font-size:55px;

        letter-spacing:12px;

    }


    .nav{

        gap:25px;

    }


    .nav a{

        font-size:16px;

    }


}

.dest-section,
.contact-section,
.why-section{

    width:100%;
    max-width:1600px;
    margin:auto;

}

/* LARGE DISPLAY FIX */

.dest-section,
.contact-section,
.why-section{

    width:100%;
    max-width:none;
    margin:0;

}

.dest-section,
.why-section,
.reasons-section{

    width:100%;
    overflow:hidden;

}




@media(min-width:1600px){

.dest-cards{

display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:20px;

}


.dest-card{

    width:auto;

    min-width:0;

}

.dest-card{

    height:260px;

}

}

.dest-header,
.dest-cards,
.why-content,
.contact-container,
.reasons-header,
.reasons-cards{

    width:100%;
    max-width:none;
    margin:0;

}

/* GLOBAL DESKTOP CONTAINER FIX */

.dest-section,
.why-section,
.reasons-section,
.contact-section{

    width:100%;
    overflow:hidden;

}


.dest-header,
.dest-cards,
.why-title,
.why-items,
.reasons-header,
.reasons-cards,
.contact-container{

    width:min(90%,1600px);
    margin:auto;

}

@media (min-width:1200px) and (max-width:1600px){

    .dest-section,
    .why-section,
    .reasons-section,
    .contact-section{

        padding-left:40px;
        padding-right:40px;

    }


    .dest-header,
    .dest-cards,
    .why-title,
    .why-items,
    .reasons-header,
    .reasons-cards,
    .contact-container{

        width:100%;
        max-width:100%;

    }


}

.dest-section > *,
.why-section > *,
.reasons-section > *{

    max-width:none !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;

}

html,body{

    width:100%;
    max-width:100%;
    overflow-x:hidden;

}


section,
div{

    max-width:100%;

}


img{

    max-width:100%;
}

@media(min-width:1400px) and (max-width:1700px){

    .dest-section,
    .why-section,
    .reasons-section{

        padding-left:40px;
        padding-right:40px;

    }


    .dest-cards{

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

    }


    .why-items{

        gap:25px;

    }

}