/* ============================================================
   RESPONSIVE.CSS — three screen bands
   ------------------------------------------------------------
   Loaded AFTER style.css, so these rules override the desktop
   base styles by source order.

     MOBILE    300px - 765px    1 column, stacked
     TABLET    766px - 1080px   2 columns
     DESKTOP  1080px - 2000px   3-4 columns, full layout

   Upper bounds use .98px so neighbouring bands never overlap
   on the same pixel.
   ============================================================ */

/* ============================================================
   1. MOBILE — 300px to 765px
   ============================================================ */
@media (min-width: 300px) and (max-width: 765.98px) {

    /* never allow sideways scroll */
    html,
    body { max-width: 100%; overflow-x: hidden; }

    .container {
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* ---------- section rhythm ---------- */
    .section-pad { padding: 52px 0; }
    .why-us { padding: 52px 0; }
    .act-gallery { padding: 52px 0; }
    .reviews-section { padding: 56px 0 62px; }
    .faq-section { padding: 56px 0 62px; }
    .enquiry-section { padding: 56px 0 62px; }
    .cta-section { padding: 58px 0; }

    .section-head { margin-bottom: 34px; }
    .section-title { font-size: 1.5rem; }
    .section-sub { font-size: .96rem; }
    .section-eyebrow { font-size: 13px; }

    /* ---------- topbar + navbar ---------- */
    .topbar { display: none !important; }
    .main-nav { padding: 8px 0; top: 0px;}
    .main-nav .nav-link { font-size: .92rem; }
    .navbar-brand .brand-logo,
    .brand-logo { height: 36px; }
    .main-nav.scrolled .brand-logo { height: 34px; }

    /* ---------- hero ---------- */
    .hero {
        min-height: auto;
        padding: 118px 0 50px;
        align-items: center;
    }

    .hero-title { font-size: 1.85rem; line-height: 1.18; }
    .hero-sub { font-size: .95rem; }
    .hero-eyebrow { font-size: 12px; }

    /* pill buttons stack and fill the width */
    .hero-actions {
        flex-direction: row;
        align-items: center;
        gap: 11px;
    }
    .hero-pill-icon{
        width: 25px;
        height: 25px;
        flex: auto;
    }
    .hero-pill { width: auto; justify-content: center; font-size: 12px; padding: 7px 15px 7px 7px }

    /* hero highlights stack as centred cards */
    .hero-highlights { margin-top: 30px; }
    .highlight {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 18px 14px;
    }
    .highlight > div { width: 100%; }

    /* ---------- stats ---------- */
    .features { margin-top: 0; padding-top: 20px; }
    .stat-card { padding: 20px 14px; }
    .stat-number { font-size: 26px; }
    .stat-card h3{
        font-size: 16px;
    }
    .stat-card p {
    font-size: 14px;}
    .btn-package, .btn-outline-package{
        padding: 10px 15px;
        font-size: 12px;
    }
    /* ---------- enquiry bar in hero ---------- */
    .enquiry-bar { margin-top: 20px; padding: 14px; border-radius: 20px; }
    .enquiry-bar .form-control,
    .enquiry-bar .form-select { min-height: 44px; }

    /* ---------- destinations ---------- */
    .dest-card,
    .dest-card-lg,
    .dest-card-tall { min-height: 250px; }
    .dest-card-body { padding: 20px 18px; }
    .dest-card-lg .dest-title { font-size: 1.3rem; }
    .dest-price { top: 16px; right: 12px; padding: 10px 7px; font-size: .74rem; }

/* ---------- package short view ---------- */
    .pkg-view-eyebrow { font-size: .82rem; }
    .pkg-view-title { margin-bottom: 22px; }
    .pkg-view-all {
        position: static;
        transform: none;
        margin: 20px auto 0;
        display: flex;
        width: fit-content;
    }
    .pkg-view-all:hover { transform: translateY(-4px); }
    .pkg-view-media { padding-bottom: 0; }
    .pkg-view-frame { border-radius: 18px; }
    .pkg-view-count { font-size: clamp(5rem, 15vw, 7rem); bottom: -26px; }
    .pkg-view-meta { right: 14px; bottom: 14px; padding: 9px 14px; }
    .pkg-view-meta-value { font-size: .84rem; }
    .pkg-view-arrow { width: 38px; height: 38px; flex: 0 0 38px; }

    .pkg-day { padding: 0 0 20px 24px; }
    .pkg-day-num { font-size: .92rem; }
    .pkg-day-title { font-size: .94rem; }
    .pkg-day-text { font-size: .87rem; line-height: 1.7; }
    .pkg-day::before { width: 12px; height: 12px; top: 8px; }
    .pkg-days::before { left: 5px; }

    /* ---------- activities collage ---------- */
    /* switches from the absolute collage to a single-column grid */
    .act-stage {
        aspect-ratio: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        max-width: 100%;
    }

    .act-head {
        position: static;
        transform: none;
        width: auto;
        max-width: 560px;
        margin: 0 0 10px;
        grid-column: 1 / -1;
        text-align: center;
    }

    .act-title { font-size: 1.5rem; }

    .act-tile-1, .act-tile-2, .act-tile-3, .act-tile-4,
    .act-tile-5, .act-tile-6, .act-tile-7 {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        aspect-ratio: 1 / 1;
        animation: none;
    }

    .act-tile { border-radius: 16px; }

    /* captions always visible where there is no hover */
    .act-tile-cap {
        opacity: 1;
        transform: none;
        padding: 24px 10px 11px;
        font-size: .68rem;
    }

    /* ---------- handpick cards ---------- */
    .pkg-card { flex-direction: column; border-radius: 16px; }
    .pkg-card-media {
        flex: 0 0 auto;
        width: 100%;
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
    .pkg-card-body { padding: 18px 18px 20px; }
    .pkg-card-title { font-size: 1.08rem; }
    .pkg-card-meta li { font-size: .8rem; }
    .pkg-card-amount { font-size: 1.26rem; }
    .pkg-card-btn { padding: 12px 18px; font-size: .82rem; }

    /* ---------- reviews slider ---------- */
    .reviews-head { margin-bottom: 30px; }
    .rev-slider { --rev-per: 1; --rev-gap: 16px; }
    .rev-nav { display: none; }
    .rev-viewport { padding: 4px 2px 8px; }
    .rev-card { padding: 24px 20px 22px; }

    /* ---------- trust strip ---------- */
    .trust-head { margin-bottom: 26px; }
    .trust-title { font-size: 1.15rem; }
    .trust-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        padding: 10px 8px;
        margin-bottom: 44px;
    }
    .trust-item { min-height: 70px; padding: 12px 10px; }
    .trust-item img { max-height: 60px; }
    .trust-item + .trust-item { border-left: none; }
    .trust-item:nth-child(n + 2) { border-top: 1px solid rgba(11, 58, 82, .10); }

    /* ---------- FAQ ---------- */
    .faq-head { margin-bottom: 32px; }
    .faq-grid { grid-template-columns: 1fr; gap: 0; }
    .faq-col { gap: 12px; }
    .faq-col + .faq-col { margin-top: 12px; }
    .faq-q { padding: 17px 18px; font-size: .95rem; }
    .faq-a { padding: 0 18px 18px; font-size: .92rem; }
    .faq-help { margin-top: 34px; }

    /* ---------- enquiry section ---------- */
    .enquiry-split { grid-template-columns: 1fr; }
    .enq-row { grid-template-columns: 1fr; }
    .enquiry-media { min-height: 300px; }
    .enquiry-media-text { padding: 28px 22px; }
    .enquiry-form-wrap { padding: 30px 22px 28px; }
    .enquiry-form-title { font-size: 1.4rem; }

    /* 16px prevents iOS auto-zoom when a field is focused */
    .enquiry-form .form-control,
    .enquiry-form .form-select { font-size: 16px; padding: 11px 12px; }

    /* ---------- CTA ---------- */
    .cta-title { font-size: 1.45rem; }
    .cta-text { font-size: .96rem; margin-bottom: 26px; }
    .cta-actions { flex-direction: row;     flex-wrap: nowrap; gap: 10px; margin-bottom: 30px; }
    .cta-actions .hero-pill { width: 100%; justify-content: center; }
    .cta-points { flex-direction: column; align-items: flex-start; gap: 10px; }

    /* ---------- footer ---------- */
    .site-footer { padding-top: 52px; }
    .footer-top { padding-bottom: 32px; }
    .footer-title { font-size: .88rem; margin-bottom: 14px; }
    .footer-links li { margin-bottom: 8px; }
    .footer-contact li { margin-bottom: 12px; }
    .footer-phones { gap: 2px; }

    /* ---------- floating buttons ---------- */
    .float-actions {
        flex-direction: row;
        left: 12px;
        right: 12px;
        bottom: 84px;
        justify-content: flex-end;
        gap: 9px;
    }
    .fab-btn { width: 44px; height: 44px; font-size: 1rem; }
}


/* ============================================================
   2. TABLET — 766px to 1080px
   ============================================================ */
@media (min-width: 766px) and (max-width: 1079.98px) {

    .container {
        max-width: 960px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* ---------- section rhythm ---------- */
    .section-pad { padding: 68px 0; }
    .why-us { padding: 68px 0; }
    .act-gallery { padding: 60px 0; }
    .reviews-section { padding: 72px 0 78px; }
    .faq-section { padding: 72px 0 78px; }
    .enquiry-section { padding: 74px 0; }
    .cta-section { padding: 76px 0; }

    .section-head { margin-bottom: 44px; }
    .section-title { font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
    .section-sub { font-size: 1rem; }

    /* ---------- navbar ----------
       Between 766px and 992px Bootstrap still collapses the menu to the
       hamburger, so the horizontal nav only appears from 992px. Tighten
       the links and button here so they fit once it does expand. */
    .main-nav { padding: 9px 0; }
    .brand-logo { height: 42px; }
    .main-nav.scrolled .brand-logo { height: 38px; }
    .main-nav .nav-link { font-size: .84rem; padding: 7px 10px !important; }
    .main-nav .nav-link::after { left: 10px; right: 10px; }
    .btn-nav { font-size: .8rem; padding: 10px 20px; }

    /* ---------- hero ---------- */
    .hero { min-height: auto; padding: 140px 0 60px; align-items: center; }
    .hero-title { font-size: clamp(1.9rem, 4.2vw, 2.6rem); }
    .hero-highlights { margin-top: 38px; }

    /* highlights stack icon above text, centred */
    .highlight {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 20px 16px;
    }
    .highlight > div { width: 100%; }

    /* ---------- features ---------- */
    .features { margin-top: 0; }

    /* ---------- destinations ---------- */
    .dest-card { min-height: 300px; }
    .dest-card-lg,
    .dest-card-tall { min-height: 380px; }
    .dest-card-body { padding: 22px 20px; }
    .dest-card-lg .dest-title { font-size: 1.45rem; }

/* ---------- package short view ---------- */
    .pkg-view-title { margin-bottom: 28px; }
    .pkg-view-all {
        position: static;
        transform: none;
        margin: 22px auto 0;
        display: flex;
        width: fit-content;
    }
    .pkg-view-all:hover { transform: translateY(-4px); }
    .pkg-view-media { padding-bottom: 0; }
    .pkg-view-count { font-size: clamp(6rem, 16vw, 8.5rem); bottom: -30px; }

    /* ---------- activities collage ---------- */
    /* two tiles per row, centred heading above the grid */
    .act-stage {
        aspect-ratio: auto;
        max-width: 760px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .act-head {
        position: static;
        transform: none;
        width: auto;
        max-width: 600px;
        margin: 0 0 10px;
        grid-column: 1 / -1;
        text-align: center;
    }

    .act-title { font-size: clamp(1.5rem, 3.4vw, 2rem); }

    .act-tile-1, .act-tile-2, .act-tile-3, .act-tile-4,
    .act-tile-5, .act-tile-6, .act-tile-7 {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        aspect-ratio: 1 / 1;
        animation: none;
    }

    .act-tile-cap {
        opacity: 1;
        transform: none;
        padding: 24px 10px 11px;
        font-size: .66rem;
    }

    /* ---------- handpick cards stay horizontal ---------- */
    .pkg-card-body { padding: 20px 20px 22px; }
    .pkg-card-title { font-size: 1.14rem; }
    .pkg-card-media { flex: 0 0 38%; min-height: 230px; }

    /* ---------- reviews slider: two cards ---------- */
    .rev-slider { --rev-per: 2; --rev-gap: 22px; }
    .rev-nav { display: none; }
    .rev-card { padding: 24px 22px 22px; }
    .rev-avatar { width: 42px; height: 42px; flex: 0 0 42px; }

    /* ---------- trust strip: 2 x 2 ---------- */
    .trust-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
        padding: 14px 6px;
        margin-bottom: 50px;
    }
    .trust-item { min-height: 78px; padding: 8px 12px; }
    .trust-item img { max-height: 68px; }
    .trust-item + .trust-item { border-left: none; }
    .trust-item:nth-child(even) { border-left: 1px solid rgba(11, 58, 82, .10); }
    .trust-item:nth-child(n + 3) { border-top: 1px solid rgba(11, 58, 82, .10); }

    /* ---------- FAQ stacks on tablet ---------- */
    .faq-grid { grid-template-columns: 1fr; gap: 0; }
    .faq-col { gap: 14px; }
    .faq-col + .faq-col { margin-top: 14px; }

    /* ---------- enquiry stacks photo above form ---------- */
/* ============================================================
   3. DESKTOP — 1080px to 2000px
   ============================================================ */
@media (min-width: 1080px) and (max-width: 2000.98px) {

    /* the container grows across the band */
    .container {
        max-width: 1350px;
        padding-left: 24px;
        padding-right: 24px;
    }

    /* ---------- section rhythm ---------- */
    .section-pad { padding: 90px 0; }
    .why-us { padding: 90px 0; }
    .act-gallery { padding: 70px 0; }
    .reviews-section { padding: 80px 0 90px; }
    .faq-section { padding: 80px 0 86px; }
    .enquiry-section { padding: 88px 0; }
    .cta-section { padding: 96px 0; }

    .section-head { margin-bottom: 52px; }
    .section-title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }

    /* ---------- navbar ---------- */
    .main-nav { padding: 10px 0; }
    .brand-logo { height: 46px; }
    .main-nav.scrolled .brand-logo { height: 40px; }
    .main-nav .nav-link { font-size: .88rem; padding: 8px 12px !important; }
    .main-nav .nav-link::after { left: 12px; right: 12px; }
    .btn-nav { font-size: .84rem; padding: 12px 26px; }

    /* ---------- hero ---------- */
    .hero { min-height: 100vh; padding: 130px 0 60px; }
    .hero-title { font-size: clamp(2.1rem, 5.4vw, 4rem); }
    .hero-highlights { margin-top: 10px; }
    .highlight { flex-direction: row; text-align: left; padding: 22px 18px; }

    /* ---------- features overlap the hero ---------- */
    .features { margin-top: -110px; }

    /* ---------- activities: full absolute collage ---------- */
    .act-stage {
        max-width: 1180px;
        aspect-ratio: 1400 / 1055;
    }

    .act-head {
        position: absolute;
        left: 50%;
        top: 43%;
        transform: translate(-50%, -50%);
        width: 35%;
        max-width: 420px;
    }

    .act-tile-1 { left: 5.1%;  top: 13.5%; width: 16.9%; }
    .act-tile-2 { left: 39.8%; top: 6.7%;  width: 14.7%; }
    .act-tile-3 { left: 74.6%; top: 16.9%; width: 18.7%; }
    .act-tile-4 { left: 84.7%; top: 46.1%; width: 13.3%; }
    .act-tile-5 { left: 3.4%;  top: 48.4%; width: 13.6%; }
    .act-tile-6 { left: 25.4%; top: 65.2%; width: 21.1%; }
    .act-tile-7 { left: 64.4%; top: 69.7%; width: 17.1%; }

    /* captions reveal on hover on pointer devices */
    .act-tile-cap {
        opacity: 0;
        transform: translateY(8px);
        padding: 26px 14px 12px;
        font-size: .68rem;
    }

    /* ---------- handpick cards ---------- */
    .pkg-card { flex-direction: row; }
    .pkg-card-media { flex: 0 0 40%; min-height: 250px; }
    .pkg-card-body { padding: 24px 26px; }
    .pkg-card-title { font-size: 1.28rem; }

    /* ---------- reviews slider: three cards ---------- */
    .rev-slider { --rev-per: 3; --rev-gap: 28px; }
    .rev-nav { display: block; }
    .rev-card { padding: 30px 28px 26px; }
    .rev-avatar { width: 46px; height: 46px; flex: 0 0 46px; }

    /* ---------- trust strip: four logos across ---------- */
    .trust-strip {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        padding: 22px 10px;
        margin-bottom: 62px;
    }
    .trust-item { min-height: 92px; padding: 8px 18px; }
    .trust-item img { max-height: 86px; }
    .trust-item + .trust-item { border-left: 1px solid rgba(11, 58, 82, .10); border-top: none; }
    .trust-item:nth-child(even) { border-left: 1px solid rgba(11, 58, 82, .10); }
    .trust-item:nth-child(n + 3) { border-top: none; }

    /* ---------- FAQ: two columns of six ---------- */
    .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 28px; }
    .faq-col { gap: 14px; }
    .faq-col + .faq-col { margin-top: 0; }

    /* ---------- enquiry: true 50 / 50 ---------- */
    .enquiry-split { grid-template-columns: 1fr 1fr; }
    .enq-row { grid-template-columns: 1fr 1fr; }
    .enquiry-media { min-height: 560px; }
    .enquiry-media-text { padding: 46px 42px; }
    .enquiry-form-wrap { padding: 46px 42px 40px; }
    .enquiry-form .form-control,
    .enquiry-form .form-select { font-size: .93rem; padding: 12px 14px; }
    .enquiry-form-title { font-size: 1.6rem; }

    /* ---------- CTA ---------- */
    .cta-title { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
    .cta-actions { flex-direction: row; gap: 16px; }
    .cta-actions .hero-pill { width: auto; }
    .cta-points { flex-direction: row; justify-content: center; gap: 12px 30px; }

    /* ---------- footer ---------- */
    .site-footer { padding-top: 70px; }
    .footer-top { padding-bottom: 45px; }

    /* ---------- floating buttons ---------- */
    .float-actions { right: 18px; bottom: 92px; }
    .fab-btn { width: 48px; height: 48px; font-size: 1.1rem; }
}

/* ---------- very wide: 1600px to 2000px, hold the layout steady ---------- */
@media (min-width: 1600px) and (max-width: 2000.98px) {
    .container { max-width: 1350px; }
    .act-stage { max-width: 1180px; }
    .rev-slider { --rev-gap: 30px; }
    .trust-strip { padding: 26px 16px; }
    .trust-item { min-height: 96px; }
    .trust-item img { max-height: 90px; }
    .faq-grid { gap: 36px 32px; }
    .enquiry-form-wrap,
    .enquiry-media-text { padding: 52px 48px; }
}

/* ============================================================
   LANDSCAPE PHONES — short viewports
   The hero is min-height based, which overflows on a short
   landscape screen and pushes the sticky nav over the copy.
   ============================================================ */
@media (max-height: 520px) and (min-width: 300px) and (max-width: 765.98px) {
    .hero { min-height: auto; padding: 100px 0 36px; }
    .hero-title { font-size: 1.5rem; }
    .hero-pill { padding: 7px 16px 7px 7px; }
    .hero-pill-icon { width: 34px; height: 34px; flex: 0 0 34px; }
    .hero-highlights { margin-top: 22px; }
    .float-actions { bottom: 70px; }
    .fab-btn { width: 38px; height: 38px; font-size: .95rem; }
}
    .enquiry-split { grid-template-columns: 1fr; }
    .enq-row { grid-template-columns: 1fr 1fr; }
    .enquiry-media { min-height: 340px; }
    .enquiry-media-text { padding: 34px 28px; }
    .enquiry-form-wrap { padding: 34px 28px 32px; }

    /* ---------- footer ---------- */
    .site-footer { padding-top: 62px; }
    .footer-top { padding-bottom: 38px; }

    /* ---------- floating buttons ---------- */
    .float-actions { right: 14px; bottom: 92px; }
    .fab-btn { width: 44px; height: 44px; font-size: 1.05rem; }
}