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

@media (max-width:1200px){

.container{
    width:94%;
}

#navbar ul{
    gap:18px;
}

.hero h1{
    font-size:52px;
}

.hero h2{
    font-size:26px;
}

.section-title h2{
    font-size:36px;
}

.carousel-slide{
    min-width:320px;
}

.ev-wrapper,
.bus-booking-wrapper{
    grid-template-columns:1fr;
    gap:40px;
}

}

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

@media (max-width:992px){

.hero{
    min-height:90vh;
}

.hero-logo{
    width:130px;
}

.hero h1{
    font-size:44px;
}

.hero h2{
    font-size:24px;
}

.hero p{
    font-size:18px;
}

.hero-buttons{
    flex-wrap:wrap;
}

.section-title h2{
    font-size:32px;
}

.timeline-arrow{
    display:none;
}

.journey-timeline{
    gap:15px;
}

.timeline-item{
    width:140px;
}

.attractions-grid,
.review-grid,
.contact-grid,
.gallery-grid,
.facility-grid,
.why-grid{
    grid-template-columns:repeat(2,1fr);
}

}

/* ==========================================
   RESPONSIVE
   MOBILE (768px)
========================================== */

@media (max-width:768px){

/* ---------- Header ---------- */

#header{
    top:42px;
}

#header .container{
    height:75px;
}

.logo img{
    height:55px;
}

.header-actions{
    gap:8px;
}

.weather-pill{
    display:none;
}

.header-icon{
    width:38px;
    height:38px;
    font-size:16px;
}

/* ---------- Mobile Menu ---------- */

.menu-btn{
    display:block;
    z-index:100001;
}

#navbar{
    position:fixed;
    top:117px;
    right:-100%;
    width:280px;
    height:calc(100vh - 117px);
    background:#111;
    transition:.35s ease;
    overflow-y:auto;
    z-index:99999;
}

#navbar.active{
    right:0;
}

#navbar ul{
    flex-direction:column;
    align-items:flex-start;
    padding:25px;
    gap:0;
}

#navbar ul li{
    width:100%;
}

#navbar ul li a{
    display:block;
    width:100%;
    padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:#fff;
}

/* ---------- Hero ---------- */

.hero{
    min-height:100vh;
}

.hero-content{
    padding-top:120px;
}

.hero-logo{
    width:110px;
}

.hero h1{
    font-size:34px;
}

.hero h2{
    font-size:20px;
}

.hero p{
    font-size:16px;
}

.hero-buttons{
    flex-direction:column;
    gap:15px;
}

.hero-buttons .btn{
    width:100%;
}

/* ---------- Sections ---------- */

section{
    padding:70px 0;
}

.section-title{
    margin-bottom:40px;
}

.section-title h2{
    font-size:28px;
}

.section-title p{
    font-size:15px;
}

/* ---------- Cards ---------- */

.why-grid,
.facility-grid,
.attractions-grid,
.review-grid,
.contact-grid,
.gallery-grid{
    grid-template-columns:1fr;
}

/* ---------- EV & Bus ---------- */

.ev-wrapper,
.bus-booking-wrapper{
    grid-template-columns:1fr;
}

.ev-image,
.bus-image{
    order:-1;
}

/* ---------- Carousel ---------- */

.carousel-slide{
    min-width:100%;
}

.carousel-btn{
    display:none;
}

/* ---------- Restaurant Menu ---------- */

.menu-header h2{
    font-size:22px;
}

.menu-tabs{
    padding:12px;
    gap:10px;
}

.tab-btn{
    font-size:14px;
    padding:10px 16px;
}

.menu-body{
    padding:18px;
}

.menu-title{
    font-size:24px;
}

.dish{
    font-size:15px;
}

}

/* ==========================================
   RESPONSIVE
   SMALL PHONES (480px)
========================================== */

@media (max-width:480px){

.container{
    width:94%;
}

/* ---------- Header ---------- */

#header .container{
    height:70px;
}

.logo img{
    height:48px;
}

.menu-btn{
    font-size:26px;
}

.header-icon{
    width:35px;
    height:35px;
    font-size:15px;
}

/* ---------- Hero ---------- */

.hero{
    min-height:100vh;
}

.hero-content{
    padding-top:110px;
}

.hero-logo{
    width:90px;
    margin-bottom:20px;
}

.hero h1{
    font-size:28px;
    line-height:1.2;
}

.hero h2{
    font-size:18px;
}

.hero p{
    font-size:15px;
    margin-bottom:30px;
}

.btn{
    width:100%;
    font-size:15px;
    padding:14px;
}

/* ---------- Section ---------- */

section{
    padding:60px 0;
}

.section-title span{
    font-size:12px;
}

.section-title h2{
    font-size:24px;
}

.section-title p{
    font-size:14px;
}

/* ---------- Popup ---------- */

.offer-box{
    padding:25px;
}

.offer-box h2{
    font-size:24px;
}

.offer-box li{
    font-size:15px;
}

.close-popup{
    width:38px;
    height:38px;
    font-size:24px;
}

/* ---------- Restaurant Menu ---------- */

.menu-header{
    padding:16px;
}

.menu-header h2{
    font-size:20px;
}

.close-menu{
    width:38px;
    height:38px;
    font-size:22px;
}

.menu-search{
    padding:15px;
}

.menu-search input{
    font-size:15px;
}

.menu-tabs{
    gap:8px;
    padding:10px;
}

.tab-btn{
    padding:9px 14px;
    font-size:13px;
}

.menu-title{
    font-size:22px;
}

.dish{
    font-size:14px;
}

.dish span:last-child{
    font-weight:700;
}

/* ---------- Gallery ---------- */

.gallery-grid{
    gap:12px;
}

.gallery-grid img{
    height:180px;
}

/* ---------- Journey ---------- */

.timeline-item{
    width:120px;
    padding:18px;
}

.timeline-item i{
    font-size:28px;
}

/* ---------- Footer ---------- */

.footer-logo{
    width:90px;
}

.footer-social a{
    width:40px;
    height:40px;
}

/* ---------- Back To Top ---------- */

#topBtn{
    width:48px;
    height:48px;
    right:15px;
    bottom:15px;
    font-size:18px;
}

}

/* ==========================================
   LANDSCAPE PHONES
========================================== */

@media (max-height:500px){

.hero{
    min-height:700px;
}

.menu-overlay{
    padding-bottom:40px;
}

}