/*======================================================
RESPONSIVE STYLESHEET
Project: Ashabi-Edu Amusement Park & Resort
Version: 2.0
======================================================*/


/*======================================================
LARGE LAPTOPS
1200px
======================================================*/

@media (max-width:1200px){

    /*======================================================
    GLOBAL
    ======================================================*/

    .container{

        width:min(92%,1200px);
    
    }

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

    .navbar{

        height:100px;
    
    }

    .logo img{

        height:90px;

    }

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

    .hero-content{

        max-width:800px;

        margin:0 auto;

        padding-top:70px;

    }

    .hero h1{

        font-size:4rem;

    }

    .hero p{

        max-width:600px;

    }

    .cta-content h2{

        font-size:60px;

    }

}

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

@media (max-width:992px){

    /*======================================================
    GLOBAL
    ======================================================*/

    .container{

        width:min(94%,960px);

    }

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

    .navbar{

        height:90px;

    }

    .logo img{

        height:80px;

    }

    .nav-links{

        gap:24px;

    }

    .book-btn{

        padding:14px 28px;

    }

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

    .hero{

        background-position:center;

    }

    .hero-content{

        max-width:700px;

        margin:0 auto;

        padding-top:80px;

    }

    .hero h1{

        font-size:3.4rem;

    }

    .hero p{

        max-width:560px;

        font-size:1.05rem;

    }

    /*======================================================
    HOME
    ======================================================*/

    /* Why Visit Us */

    .why-grid{

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

        gap:30px;

    }

    /* Visit Planner */

    .planner-form{

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

    }

    /* Highlights */

    .highlights-grid{

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

    }

    /* Experience */

    .experience-grid{

        grid-template-columns:1fr;

    }

    .experience-card.large{

        grid-row:auto;

        min-height:500px;

    }

    .experience-card{

        min-height:350px;

    }

    .experience-more{

        min-height:240px;

    }

    /* Statistics */

    .stats-grid{

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

    }

    /* Resort */

    .resort-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .resort-images{

        min-height:520px;

    }

    /*======================================================
    EXPLORE
    ======================================================*/

    /* Intro */

    .explore-intro-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    /* Experience Grid */

    .experiences-grid{

        grid-template-columns:1fr 1fr;

    }

    .experience-feature{

        grid-column:1 / -1;

        grid-row:auto;

        min-height:500px;

    }

    .experience-card{

        min-height:320px;

    }

    /*======================================================
    STAY
    ======================================================*/

    .stay-intro-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .suite-grid{

        grid-template-columns:1fr;

    }

    .room-image{

    height:500px;

    }

    .amenities-grid{

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

    }

    .booking-grid{

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

    }

    /*======================================================
    EVENTS
    ======================================================*/

    .events-grid{

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

    }

    .event-feature{

        grid-column:1 / -1;

    }

    /*======================================================
    GALLERY
    ======================================================*/

    .gallery-categories{

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

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-large{

        grid-row:auto;

    }

    .gallery-wide{

        grid-column:auto;

        height:280px;

        margin-top:0;

    }

    .gallery-item{

        height:320px;

    }

    /*======================================================
    PLAN YOUR VISIT
    ======================================================*/

    .quick-info-grid{

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

    }

    .pricing-grid{

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

    }

    .experience-pricing{

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

    }

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

    .contact-grid{

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

    }

    .contact-layout{

        grid-template-columns:1fr;

    }

    .contact-map{

        min-height:500px;

    }

    /*======================================================
    FOOTER
    ======================================================*/

    .footer-grid{

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

        gap:50px;

    }

    .footer-bottom-content{

        flex-direction:column;

        text-align:center;

    }

}


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

@media(max-width:768px){

    /*======================================================
    GLOBAL
    ======================================================*/

    .container{

        width:92%;

    }

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

    .navbar{

        height:82px;

    }

    .logo img{

        height:68px;

    }

    .nav-links,
    .book-btn{

        display:none;

    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        width:48px;

        height:48px;

        background:none;

        border:none;

        cursor:pointer;

        z-index:10001;

    }

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

    .page-hero{

        min-height:500px;

    }

    .page-hero-content{

        max-width:100%;

        text-align:center;

        padding:0 20px;

    }

    .page-hero h1{

        font-size:clamp(2.4rem, 9vw, 3.4rem);

    }

    .page-hero p{

        font-size:1rem;

    }

    .breadcrumb{

        justify-content:center;

        flex-wrap:wrap;

    }

    /*======================================================
    MOBILE MENU
    ======================================================*/

    .mobile-menu{

        position:fixed;

        inset:0;

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:flex-start;

        padding:35px 28px;

        background:rgba(8,15,35,.98);

        backdrop-filter:blur(12px);

        transform:translateX(100%);

        transition:transform .4s ease;

        z-index:9999;

    }

    .mobile-menu.active{

        transform:translateX(0);

    }

    .mobile-menu-top{

        width:100%;

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        margin-bottom:28px;

    }

    .mobile-menu-top img{

        width:72px;

        height:auto;

        margin-bottom:15px;

    }

    .mobile-menu-top p{

        font-size:14px;

        color:#b8bcc6;

        letter-spacing:2px;

        text-align:center;

    }

    .mobile-menu nav{

        width:100%;

        padding:0;

        display:flex;

        flex-direction:column;

        flex:1;

        justify-content:center;

        align-items:center;

        gap:18px;

    }

    .mobile-menu nav a{

        color:#fff;

        font-size:22px;

        font-weight:600;

        transition:.3s;

    }

    .mobile-menu nav a:hover{

        color:var(--gold);

    }

    .mobile-book-btn{

        margin-top:auto;

        width:100%;

        max-width:320px;

        height:58px;

        display:flex;

        justify-content:center;

        align-items:center;

    }

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

    .hero{

        min-height:100svh;

        background-position:center;

    }

    .hero-content{

        max-width:100%;

        text-align:center;

        padding-top:40px;

    }

    .hero-tag{

        font-size:11px;

        letter-spacing:4px;

    }

    .hero h1{

        font-size:clamp(2.2rem,8vw,3rem);

        line-height:1.15;

    }

    .hero p{

        max-width:100%;

        font-size:1rem;

        line-height:1.8;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:18px;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        max-width:320px;

    }

    .hero-trust{

        flex-wrap:wrap;

        justify-content:center;

        gap:12px;

    }

    /*======================================================
    HOME
    ======================================================*/

    /* Why Visit Us */

    .why-grid{

        grid-template-columns:1fr;

    }

    /* Visit Planner */

    .visit-planner{

        margin-top:40px;

    }

    .planner-card{

        padding:35px 25px;

    }

    .planner-header h2{

        font-size:38px;

    }

    .planner-form{

        grid-template-columns:1fr;

    }

    /* Highlights */

    .highlights-grid{

        grid-template-columns:1fr;

    }

    /* Experience */

    .experience-grid{

        grid-template-columns:1fr;

    }

    .experience-card.large{

        min-height:420px;

    }

    .experience-card{

        min-height:300px;

    }

    /* Statistics */

    .stats-grid{

        grid-template-columns:1fr;

    }

    /* Resort */

    .resort-grid{

        grid-template-columns:1fr;

    }

    .resort-images{

        min-height:420px;

    }

    .resort-images img{

        width:82%;

    }

    /* Gallery */

    .gallery-item{

        height:260px;

    }

    /* Testimonials */

    .testimonial-grid{

        grid-template-columns:1fr;

    }

    /* CTA */

    .cta-content h2{

        font-size:42px;

    }

    /*======================================================
    EXPLORE
    ======================================================*/

    /* Intro */

    .explore-intro-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    /* Experiences */

    .experiences-grid{

        grid-template-columns:1fr;

    }

    .experience-feature{

        grid-column:auto;

        min-height:420px;

    }

    .experience-card{

        min-height:280px;

    }

    /* Lifestyle */

    .lifestyle-grid{

        grid-template-columns:1fr;

    }

    /*======================================================
    STAY
    ======================================================*/

    /* Introduction */

    .stay-intro-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    /* Suites */

    .suite-grid{

        grid-template-columns:1fr;

    }

    .room-image{

    height:380px;

    }

    /* Amenities */

    .amenities-grid{

        grid-template-columns:1fr;

    }

    /* Booking */

    .booking-grid{

        grid-template-columns:1fr;

    }

    /*======================================================
    EVENTS
    ======================================================*/

    .events-grid{

        grid-template-columns:1fr;

    }

    .event-feature{

        grid-column:auto;

    }

    .event-card{

        min-height:300px;

    }

    /*======================================================
    GALLERY
    ======================================================*/

    .gallery-categories{

        grid-template-columns:1fr;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-large{

        height:420px;

    }

    .gallery-wide{

        height:260px;

    }

    .gallery-item{

        height:280px;

    }

    /*======================================================
    PLAN YOUR VISIT
    ======================================================*/

    .quick-info-grid{

        grid-template-columns:1fr;

    }

    .pricing-grid{

        grid-template-columns:1fr;

    }

    .experience-pricing{

        grid-template-columns:1fr;

    }

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

    .contact-grid{

        grid-template-columns:1fr;

    }

    .contact-layout{

        grid-template-columns:1fr;

    }

    .contact-map{

        min-height:400px;

    }

    /*======================================================
    FOOTER
    ======================================================*/

    .footer-grid{

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-contact li{

        justify-content:center;

    }

    .footer-bottom-content{

        flex-direction:column;

        text-align:center;

    }

}

/*======================================================
SMALL MOBILE
576px
======================================================*/

@media (max-width:576px){


/* GLOBAL */

.container{

    width:94%;

}


.section-padding{

    padding:60px 0;

}



/* HEADER */

.navbar{

    height:76px;

}


.logo img{

    height:60px;

}



/* HERO */

.hero{

    min-height:90svh;

}


.hero h1{

    font-size:2rem;
    line-height:1.2;

}


.hero p{

    font-size:.95rem;
    line-height:1.7;

}


.hero-buttons{

    gap:14px;

}

.btn-primary,
.btn-secondary{

    max-width:280px;
    padding:14px 20px;

}

/* MOBILE MENU */

.mobile-menu{

    padding:25px 20px;

}


.mobile-menu nav a{

    font-size:20px;

}



/* HOME */

.planner-card{

    padding:25px 18px;

}


.planner-header h2{

    font-size:30px;

}


.stats-grid{

    gap:20px;

}


.experience-card.large{

    min-height:350px;

}

.experience-card{

    min-height:260px;

}

/* SECTION TITLES */

.section-intro h2{

    font-size:32px;

}

.section-intro p{

    font-size:.95rem;

}

/* RESORT */

.resort-images{

    min-height:350px;

}


.resort-images img{

    width:90%;

}

/* STAY */

.room-image{

    height:320px;

}

.room-content h3{

    font-size:28px;

}

/* GALLERY */

.gallery-large{

    height:320px;

}


.gallery-wide{

    height:220px;

}

.gallery-item{

    height:220px;

}

/* EVENTS */

.event-card{

    min-height:260px;

}

/* PLAN YOUR VISIT */

.pricing-card{

    padding:25px 18px;

}

.planner-header h2{

    font-size:30px;

}

/* CONTACT */

.contact-map{

    min-height:300px;

}

/* FOOTER */

.footer-grid{

    gap:30px;

}

.footer-bottom{

    font-size:.85rem;

}

/* CTA */

.cta-content h2{

    font-size:36px;

}

}