@media(max-width:1024px) {
    .nav-links {
        position: fixed;
        left: 16px;
        right: 16px;
        top: 88px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        background: #08202b;
        padding: 22px;
        border-radius: 22px
    }

    .nav-links.open {
        display: flex
    }

    .menu-btn {
        display: grid
    }

    .nav-actions .btn {
        display: none
    }

    .split,
    .booking-layout {
        grid-template-columns: 1fr
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr)
    }

    .timeline {
        grid-template-columns: repeat(3, 1fr)
    }

    .timeline:before {
        display: none
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .floating-note {
        right: 18px
    }

    .booking-summary {
        position: static
    }
}

@media(max-width:720px) {
    .section {
        padding: 78px 0
    }

    .container {
        width: min(calc(100% - 26px), var(--max))
    }

    .grid-2,
    .grid-3,
    .grid-4,
    .stats {
        grid-template-columns: 1fr
    }

    .hero-content {
        padding-top: 145px
    }

    .hero-meta {
        gap: 22px
    }

    .timeline {
        grid-template-columns: 1fr;
        text-align: left
    }

    .step {
        display: grid;
        grid-template-columns: 52px 1fr;
        gap: 14px;
        text-align: left
    }

    .step-num {
        margin: 0
    }

    .split-media {
        min-height: 430px
    }

    .floating-note {
        position: absolute;
        width: calc(100% - 36px);
        left: 18px;
        right: 18px;
        bottom: 18px
    }

    .footer-grid {
        grid-template-columns: 1fr
    }

    .footer-bottom {
        flex-direction: column
    }

    .brand img {
        width: 150px
    }

    .nav-inner {
        padding: 10px
    }

    .hide-mobile {
        display: none
    }
}

/* =========================
   Mobile Navbar Fix
========================= */

@media (max-width:768px){

    .nav{
        top:14px;
    }

    .nav-inner{
        width:calc(100% - 28px);
        min-height:86px;
        padding:10px 12px;
        border-radius:28px;
        gap:10px;
    }

    .brand{
        gap:11px;
        max-width:calc(100% - 64px);
    }

    .brand-logo{
        width:52px;
        height:52px;
        flex-basis:52px;
    }

    .brand-title{
        font-size:23px;
        letter-spacing:.5px;
    }

    .brand-subtitle{
        font-size:9px;
        letter-spacing:3.5px;
        margin-top:7px;
    }

    .nav-actions{
        margin-left:auto;
        flex-shrink:0;
    }

    .menu-btn{
        display:grid;
        width:48px;
        height:48px;
        font-size:24px;
        flex-shrink:0;
    }

    .nav-actions .btn{
        display:none;
    }
}

@media (max-width:420px){

    .nav-inner{
        width:calc(100% - 22px);
        min-height:78px;
        padding:9px 10px;
        border-radius:25px;
    }

    .brand{
        gap:9px;
        max-width:calc(100% - 56px);
    }

    .brand-logo{
        width:46px;
        height:46px;
        flex-basis:46px;
    }

    .brand-title{
        font-size:20px;
    }

    .brand-subtitle{
        font-size:8px;
        letter-spacing:2.8px;
        margin-top:6px;
    }

    .menu-btn{
        width:44px;
        height:44px;
        font-size:21px;
    }
}


/* =========================
   Footer Mobile Fix
========================= */

@media (max-width:768px){

    .footer{
        padding:58px 0 24px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:42px;
    }

    .footer-brand-block{
        max-width:100%;
    }

    .footer-brand{
        gap:14px;
        margin-bottom:22px;
    }

    .footer-logo{
        width:64px;
        height:64px;
        flex-basis:64px;
    }

    .footer-brand-title{
        font-size:25px;
    }

    .footer-brand-subtitle{
        font-size:9px;
        letter-spacing:3.6px;
        margin-top:7px;
    }

    .footer-description{
        max-width:100%;
        font-size:15px;
        line-height:1.75;
    }

    .footer-grid h4{
        margin-bottom:16px;
    }

    .footer-grid > div:not(.footer-brand-block){
        padding-top:0;
    }

    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
        margin-top:38px;
        gap:7px;
        font-size:13px;
    }
}

@media (max-width:420px){

    .footer-logo{
        width:58px;
        height:58px;
        flex-basis:58px;
    }

    .footer-brand-title{
        font-size:22px;
    }

    .footer-brand-subtitle{
        font-size:8px;
        letter-spacing:3px;
    }
}

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

@media (max-width:900px){

  .itinerary-toggle{
    grid-template-columns:66px 1fr 42px;
    gap:16px;
    padding:18px;
  }

  .itinerary-day-number{
    width:62px;
    height:62px;
    border-radius:17px;
  }

  .itinerary-content{
    grid-template-columns:1fr;
    gap:24px;
    padding-left:18px;
    padding-right:18px;
  }

  .itinerary-day.active .itinerary-content{
    max-height:1200px;
    padding:0 18px 20px;
  }

  .itinerary-image{
    min-height:280px;
  }

  .itinerary-image img{
    min-height:280px;
  }
}

@media (max-width:600px){

  .itinerary-section{
    margin-top:50px;
  }

  .itinerary-list{
    gap:14px;
  }

  .itinerary-day{
    border-radius:20px;
  }

  .itinerary-toggle{
    grid-template-columns:54px minmax(0,1fr) 36px;
    gap:12px;
    padding:14px;
  }

  .itinerary-day-number{
    width:52px;
    height:52px;
    border-radius:15px;
  }

  .itinerary-day-number strong{
    font-size:1.2rem;
  }

  .itinerary-title span{
    font-size:.6rem;
    letter-spacing:.1em;
  }

  .itinerary-title h4{
    font-size:.98rem;
    line-height:1.35;
  }

  .itinerary-icon{
    width:34px;
    height:34px;
    font-size:.82rem;
  }

  .itinerary-day.active .itinerary-content{
    max-height:1400px;
    padding:0 14px 16px;
  }

  .itinerary-image,
  .itinerary-image img{
    min-height:220px;
  }

  .itinerary-location{
    left:12px;
    bottom:12px;
    padding:7px 10px;
    font-size:.7rem;
  }

  .itinerary-details{
    padding:0;
  }

  .itinerary-details > p{
    font-size:.92rem;
  }

  .itinerary-highlights{
    grid-template-columns:1fr;
    gap:9px;
  }

  .itinerary-highlights li{
    padding:11px 12px;
    font-size:.82rem;
  }
}