/* ============================================
   BLUE BUBBLE ANDAMAN — stylesheet
   ============================================ */

:root {
    --bb-cyan: #25bfe8;
    --bb-blue: #16739f;
    --bb-deep: #0b3a52;
    --bb-ink: #0d2b3a;
    --bb-muted: #557383;
    --bb-light: #f4fafd;
    --bb-white: #ffffff;
    --bb-radius: 14px;
    --bb-shadow: 0 18px 40px rgba(11, 58, 82, .12);
    --bb-shadow-sm: 0 8px 22px rgba(11, 58, 82, .10);
    --bb-transition: .35s cubic-bezier(.4, 0, .2, 1);
    --bb-container: 1350px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
    font-family: 'Inter', 'IBM Plex Sans', sans-serif;
    color: var(--bb-ink);
    background: var(--bb-white);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .btn {
    font-family: 'Montserrat', sans-serif;
}

a { text-decoration: none; transition: var(--bb-transition); }

.container { max-width: var(--bb-container); }

/* ---------- section helpers ---------- */
.section-pad { padding: 90px 0; }

.section-head { max-width: 700px; margin: 0 auto 55px; }

.section-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bb-blue);
    margin-bottom: 12px;
}

.section-title {
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: 500;
    color: var(--bb-ink);
    margin-bottom: 14px;
}

.section-sub {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: 1.03rem;
    color: var(--bb-muted);
    margin: 0;
}
/* ---------- top contact bar ---------- */
.topbar {
    background: var(--bb-deep);
    color: rgba(255, 255, 255, .82);
    font-size: .82rem;
    padding: 9px 0;
}

.topbar-list { list-style: none; display: flex; gap: 26px; padding: 0; margin: 0; }
.topbar-list li { display: flex; align-items: center; gap: 8px; }
.topbar-list i { color: var(--bb-cyan); }

.topbar-social { list-style: none; display: flex; gap: 10px; justify-content: flex-end; padding: 0; margin: 0; }

.topbar-social a {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    color: #fff;
    font-size: .8rem;
}

.topbar-social a:hover { background: var(--bb-cyan); transform: translateY(-2px); }

/* ---------- sticky navbar ---------- */
.main-nav {
    position: fixed;
    top: 50px; left: 0; right: 0;
    z-index: 1030;
    background: transparent;
    padding: 10px 0;
    transition: var(--bb-transition);
}

.navbar-brand { display: flex; align-items: center; padding: 5px; background: #fff; border-radius: 10px; }

/* logo is 500x215, so height drives width; 46px keeps the bar compact */
.brand-logo { height: 60px; width: auto; transition: var(--bb-transition); }
.main-nav.scrolled .brand-logo { height: 60px; }

.main-nav .nav-link {
    font-family: 'Montserrat', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .92);
    padding: 8px 12px !important;
    position: relative;
    white-space: nowrap;
}

.main-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 12px; right: 12px; bottom: 2px;
    height: 2px;
    background: var(--bb-cyan);
    transform: scaleX(0);
    transition: var(--bb-transition);
}

.main-nav .nav-link:hover::after,
.main-nav .nav-link.active::after { transform: scaleX(1); }

.main-nav .nav-link.active { color: var(--bb-cyan); }

.btn-nav {
    background: linear-gradient(135deg, var(--bb-cyan), var(--bb-blue));
    color: #fff;
    font-weight: 600;
    font-size: .84rem;
    padding: 12px 26px;
    border-radius: 50px;
    border: none;
    white-space: nowrap;
}

.btn-nav:hover { color: #fff; box-shadow: 0 8px 20px rgba(37, 191, 232, .45); transform: translateY(-2px); }

/* mobile toggler */
.navbar-toggler { border: none; padding: 8px 6px; }
.navbar-toggler:focus { box-shadow: none; }

.toggler-bar {
    display: block;
    width: 26px; height: 2px;
    margin: 5px 0;
    background: #fff;
    border-radius: 2px;
    transition: var(--bb-transition);
}

.navbar-toggler.active .toggler-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggler.active .toggler-bar:nth-child(2) { opacity: 0; }
.navbar-toggler.active .toggler-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* solid state, applied by script.js on scroll */
.main-nav.scrolled {
    top: 0;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
    padding: 5px 0;
    box-shadow: 0 8px 30px rgba(11, 58, 82, .16);
}

.main-nav.scrolled .nav-link { color: var(--bb-ink); }
.main-nav.scrolled .nav-link.active { color: var(--bb-blue); }
.main-nav.scrolled .toggler-bar { background: var(--bb-ink); }


/* ============================================
   HERO
   ============================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 130px 0 60px;
    overflow: hidden;
}

/* center the hero copy block */
.hero-copy {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.hero-bg {
    position: absolute;
    inset: 0;
    /* diver sits right-of-centre, so keep the focal point there and
       bias the darker overlay toward the left where the copy sits */
    background: url('../image/hero.webp') 62% center/cover no-repeat;
    transform: scale(1.08);
    animation: heroZoom 18s ease-in-out infinite alternate;
}

@keyframes heroZoom {
    from { transform: scale(1.08); }
    to { transform: scale(1.2); }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 35%) 42%, rgb(0 0 0 / 0%) 72%, rgb(0 0 0 / 22%) 100%), linear-gradient(180deg, rgb(0 0 0 / 47%) 0%, rgb(0 0 0 / 30%) 45%, rgb(0 0 0 / 0%) 100%);
}

.hero-inner { position: relative; z-index: 2; width: 100%; justify-items: center;}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(37, 191, 232, .18);
    border: 1px solid rgba(37, 191, 232, .5);
    padding: 8px 20px;
    border-radius: 50px;
    backdrop-filter: blur(6px);
    margin: 0 auto 20px;
}

.hero-title {
    font-size: clamp(2.1rem, 5.4vw, 4rem);
    font-weight: 600;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 18px;
    text-shadow: 0 3px 26px rgba(0, 0, 0, .35);
}

.hero-title span {
    display: block;
    background: linear-gradient(100deg, #b3efff, #d1f4ff);
    -webkit-background-clip: text;
    font-weight: 800;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-sub {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(.98rem, 1.6vw, 1.16rem);
    color: rgba(255, 255, 255, .88);
    max-width: 640px;
    margin: 0 auto 28px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- hero pill buttons (match the package short-view CTA) ---------- */
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 9px 26px 9px 9px;
    border-radius: 50px;
    border: 2px solid transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: .93rem;
    font-weight: 600;
    white-space: nowrap;
    transition: var(--bb-transition);
}

.hero-pill-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bb-cyan), var(--bb-blue));
    color: #fff;
    font-size: .95rem;
    transition: transform var(--bb-transition);
}

/* solid pill: white body, gradient arrow circle */
.hero-pill-solid {
    background: var(--bb-white);
    color: var(--bb-ink);
    box-shadow: 0 14px 34px rgba(6, 32, 45, .22);
}

.hero-pill-solid:hover {
    color: var(--bb-blue);
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(6, 32, 45, .30);
}

/* outline pill for the secondary action */
.hero-pill-outline {
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
}

.hero-pill-outline:hover {
    background: #fff;
    border-color: #fff;
    color: var(--bb-blue);
    transform: translateY(-4px);
}

/* the outline variant keeps a translucent disc until hover */
.hero-pill-icon-ghost {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
}

.hero-pill-outline:hover .hero-pill-icon-ghost {
    background: linear-gradient(135deg, var(--bb-cyan), var(--bb-blue));
    border-color: transparent;
}

.hero-pill:hover .hero-pill-icon { transform: translateX(4px); }
.hero-pill-outline:hover .hero-pill-icon { transform: none; }

/* hero highlight cards */
.hero-highlights { margin-top: 10px; }

.highlight {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(12px);
    border-radius: var(--bb-radius);
    padding: 18px;
    transition: var(--bb-transition);
}

.highlight:hover {
    background: rgba(255, 255, 255, .95);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .28);
}

.highlight i {
    font-size: 1.35rem;
    color: var(--bb-cyan);
    flex-shrink: 0;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    transition: var(--bb-transition);
}

.highlight:hover i {
    color: var(--bb-blue);
    background: rgba(37, 191, 232, .16);
}

.highlight > div { min-width: 0; }

.highlight h2 {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.2;
    transition: var(--bb-transition);
}

.highlight p {
    font-size: .85rem;
    color: rgba(255, 255, 255, .72);
    margin: 0;
    line-height: 1.3;
    transition: var(--bb-transition);
}

.highlight:hover h2 { color: var(--bb-ink); }
.highlight:hover p { color: var(--bb-muted); }


/* ============================================
   ENQUIRY PANEL (sits inside the hero)
   ============================================ */
.enquiry-bar {
    position: relative;
    z-index: 3;
    margin-top: 30px;
    background: #ffffffbf;
    border-radius: 50px;
    padding: 16px;
}

.enquiry-bar > .container { padding: 0; max-width: 100%; }

.enquiry-intro { display: flex; align-items: center; gap: 12px; }

.enquiry-intro i {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bb-cyan), var(--bb-blue));
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.enquiry-intro strong {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: .95rem;
    color: #fff;
    line-height: 1.2;
}

.enquiry-intro small { font-size: .76rem; color: rgba(255, 255, 255, .75); }

.enquiry-bar .form-control,
.enquiry-bar .form-select {
    width: 100%;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .92);
    font-size: .88rem;
    padding: 14px 14px;
    color: var(--bb-ink);
}

.enquiry-bar .form-control::placeholder { color: #9db4c0; }

/* keep the native date picker icon visible on the translucent field */
.enquiry-bar input[type="date"] { min-height: 42px; }

.enquiry-bar input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .55;
}

.enquiry-bar input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: 1; }

.enquiry-bar .form-control:focus,
.enquiry-bar .form-select:focus {
    background: #fff;
    border-color: var(--bb-cyan);
    box-shadow: 0 0 0 3px rgba(37, 191, 232, .25);
}

.enquiry-bar .invalid-feedback { color: #d94a4a; }

.btn-submit {
    width: 100%;
    background: linear-gradient(135deg, var(--bb-cyan), var(--bb-blue));
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: .88rem;
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
}

.btn-submit:hover { color: #fff; transform: translateY(-2px); }
.btn-submit i { margin-left: 6px; }
/* ============================================
   FEATURES / STATISTICS
   ============================================ */
.features {   
    position: relative; 
}
.pkg-view-media, .pkg-view-frame{
    height: 100%;
}
.stats-row > [class*="col-"] { display: flex; }

.stat-card {
    height: 100%;
    width: 100%;
    background: #fff;
    border-radius: var(--bb-radius);
    padding: 34px 18px;
    text-align: center;
    box-shadow: var(--bb-shadow-sm);
    border: 1px solid rgba(28, 134, 199, .07);
    transition: var(--bb-transition);
}

.stat-card:hover { transform: translateY(-8px); box-shadow: var(--bb-shadow); border-color: var(--bb-cyan); }

.stat-card i {
    font-size: 1.9rem;
    background: linear-gradient(135deg, var(--bb-cyan), var(--bb-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.stat-number {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: var(--bb-ink);
    line-height: 1.1;
    display: inline;
}

.stat-suffix { font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--bb-blue); }

.stat-card h3 {
    font-size: 22px;
    font-weight: 500;
    color: #000;
    margin: 8px 0 0;
}
.stat-card p {
    font-size: 16px;
    font-weight: 400;
    color: #6e6e6e;
    margin: 8px 0 0;
}

/* ============================================
   WHY CHOOSE US
   ============================================ */
.why-us {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
}

.why-us-bg {
    position: absolute;
    inset: 0;
    background: url('../image/why-section.webp') center/cover no-repeat;
    background-attachment: fixed;
}

/* the overlay must sit above the photo, but below the content */
.why-us::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgb(0 0 0 / 55%), rgb(0 0 0 / 0%));
}

.why-us .container { position: relative; z-index: 2; }
.why-us .section-title { color: #fff; }
.why-us .section-sub { color: rgba(255, 255, 255, .78); }

.why-card {
    height: 100%;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(10px);
    border-radius: var(--bb-radius);
    padding: 30px 24px;
    transition: var(--bb-transition);
}

.why-card:hover {
    background: rgba(255, 255, 255, .95);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
}

.why-card i {
    font-size: 1.5rem;
    color: var(--bb-cyan);
    margin-bottom: 14px;
    display: block;
    transition: var(--bb-transition);
}

.why-card:hover i { color: var(--bb-blue); }

.why-card h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.35;
    transition: var(--bb-transition);
}

.why-card p {
    font-size: .87rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
    margin: 0;
    transition: var(--bb-transition);
}

.why-card:hover h3 { color: var(--bb-ink); }
.why-card:hover p { color: var(--bb-muted); }
/* ============================================
   PACKAGES
   ============================================ */
.packages { background: #fff; }

.package-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--bb-radius);
    overflow: hidden;
    box-shadow: var(--bb-shadow);
    border: 1px solid rgba(28, 134, 199, .08);
    transition: var(--bb-transition);
}

.package-card:hover { transform: translateY(-10px); box-shadow: 0 26px 55px rgba(11, 58, 82, .2); }

.package-card.featured { border: 2px solid var(--bb-cyan); }

.package-img { position: relative; height: 220px; overflow: hidden; }
.package-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--bb-transition); }
.package-card:hover .package-img img { transform: scale(1.09); }

.package-badge {
    position: absolute;
    left: 14px;
    top: 14px;
    background: var(--bb-cyan);
    color: var(--bb-deep);
    font-family: 'Montserrat', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
}

.package-body { padding: 15px; display: flex; flex-direction: column; flex: 1; }

.package-body h3 { font-size: 1.25rem; font-weight: 700; color: var(--bb-ink); margin-bottom: 12px; }

.package-days { font-size: .84rem; color: var(--bb-blue); font-weight: 500; margin: 0 0 8px; }
.package-days i { margin-right: 6px; }

.package-dest {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.package-dest li {
    background: rgba(37, 191, 232, .1);
    color: var(--bb-blue);
    font-size: .72rem;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 6px;
}

.package-list { list-style: none; padding: 0; margin: 0 0 20px; }
.package-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--bb-muted); margin-bottom: 8px; line-height: 1.6; }
.package-list i { color: var(--bb-cyan); margin-top: 4px; }

.package-price { margin-top: auto; padding-top: 16px; border-top: 1px dashed #dbe9f0; margin-bottom: 16px; }

.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.price-row + .price-row { margin-top: 4px; }

.price-from { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--bb-muted); }

.price-old {
    font-size: .85rem;
    color: var(--bb-muted);
    text-decoration: line-through;
}

.price-amount { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--bb-ink); }
.price-unit { font-size: .8rem; color: var(--bb-muted); }

.price-save {
    background: rgba(37, 211, 102, .12);
    color: #0e7a3d;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 50px;
}

.package-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.package-actions .btn { flex: 1 1 auto; }

.btn-outline-package {
    background: transparent;
    border: 2px solid #dbe9f0;
    color: var(--bb-ink);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: .88rem;
    padding: 15px 30px;
    border-radius: 50px;
}

.btn-outline-package:hover { background: var(--bb-ink); color: #fff; border-color: var(--bb-ink); }

.pkg-icon {
    width: 42px; height: 42px;
    flex: 0 0 42px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(37, 191, 232, .12);
    color: var(--bb-blue);
    font-size: .95rem;
    transition: var(--bb-transition);
}

.pkg-icon:hover { background: var(--bb-blue); color: #fff; transform: translateY(-2px); }

.pkg-icon-wa { background: rgba(37, 211, 102, .14); color: #1da851; }
.pkg-icon-wa:hover { background: #25d366; color: #fff; }

.btn-package {
    background: transparent;
    border: 2px solid var(--bb-cyan);
    color: var(--bb-blue);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: .88rem;
    padding: 15px 30px;
    border-radius: 50px;
}

.btn-package:hover { background: var(--bb-cyan); color: #fff; }
.package-card.featured .btn-package { background: linear-gradient(135deg, var(--bb-cyan), var(--bb-blue)); color: #fff; border-color: transparent; }

/* ============================================
   HANDPICK ADVENTURE PACKAGES
   ============================================ */
.handpick {
    background:
        radial-gradient(46% 40% at 12% 18%, rgba(37, 191, 232, .10) 0%, rgba(37, 191, 232, 0) 70%),
        radial-gradient(40% 36% at 88% 82%, rgba(28, 134, 199, .08) 0%, rgba(28, 134, 199, 0) 72%),
        var(--bb-light);
    overflow: hidden;
}

/* ---- horizontal card: photo left, copy right ---- */
.pkg-card {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: #fff;
    border: 1px solid rgba(28, 134, 199, .12);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(11, 58, 82, .08);
    transition: transform var(--bb-transition), box-shadow var(--bb-transition), border-color var(--bb-transition);
}

.pkg-card:hover {
    transform: translateY(-6px);
    border-color: rgba(37, 191, 232, .45);
    box-shadow: 0 24px 48px rgba(11, 58, 82, .16);
}

.pkg-card-media {
    position: relative;
    flex: 0 0 40%;
    min-height: 250px;
    overflow: hidden;
    background: var(--bb-deep);
}

.pkg-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}

.pkg-card:hover .pkg-card-media img { transform: scale(1.07); }

.pkg-card-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    padding: 6px 13px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .92);
    color: var(--bb-blue);
    font-family: 'Montserrat', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(6, 32, 45, .18);
}

.pkg-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 24px 26px;
    min-width: 0;
}

.pkg-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bb-ink);
    margin: 0 0 12px;
    transition: color var(--bb-transition);
}

.pkg-card:hover .pkg-card-title { color: var(--bb-blue); }

.pkg-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}

.pkg-card-meta li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    color: var(--bb-muted);
}

.pkg-card-meta i { color: var(--bb-cyan); font-size: .82rem; }
.pkg-card-meta .pkg-star { color: #ffa51f; }

.pkg-card-sep { color: rgba(28, 134, 199, .35); }

.pkg-card-foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(28, 134, 199, .14);
}

.pkg-card-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
}

.pkg-card-from {
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bb-muted);
}

.pkg-card-amount {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.42rem;
    font-weight: 800;
    color: var(--bb-blue);
    line-height: 1;
}

.pkg-card-amount i { font-size: .95rem; margin-right: 1px; }

.pkg-card-old { font-size: .84rem; color: var(--bb-muted); text-decoration: line-through; }
.pkg-card-old i { font-size: .74rem; }

/* tags now sit above the title */
.pkg-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.pkg-card-tags li {
    padding: 6px 14px;
    border-radius: 8px;
    background: rgba(37, 191, 232, .10);
    border: 1px solid rgba(37, 191, 232, .24);
    color: var(--bb-blue);
    font-size: .74rem;
    font-weight: 600;
    transition: var(--bb-transition);
}

.pkg-card:hover .pkg-card-tags li {
    background: rgba(37, 191, 232, .18);
    border-color: rgba(37, 191, 232, .45);
}

/* ---- per-card enquiry button ---- */
.pkg-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 22px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--bb-cyan), var(--bb-blue));
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: .87rem;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(28, 134, 199, .28);
    transition: var(--bb-transition);
}

.pkg-card-btn i { font-size: .82rem; transition: transform var(--bb-transition); }

.pkg-card-btn:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(28, 134, 199, .36);
}

.pkg-card-btn:hover i { transform: translateX(4px); }

.pkg-card-btn:focus-visible {
    outline: 3px solid var(--bb-ink);
    outline-offset: 3px;
}

/* ============================================
   PACKAGE SHORT VIEW
   ============================================ */
.pkg-view {
    background:
        radial-gradient(48% 44% at 82% 26%, rgba(37, 191, 232, .09) 0%, rgba(37, 191, 232, 0) 72%),
        linear-gradient(180deg, #ffffff 0%, var(--bb-light) 100%);
    overflow: hidden;
}

/* ---- eyebrow with leading dot ---- */
.pkg-view-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: .95rem;
    font-weight: 500;
    color: var(--bb-blue);
    margin: 0 0 16px;
}

.pkg-view-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--bb-cyan);
    box-shadow: 0 0 0 5px rgba(37, 191, 232, .18);
}

/* ---- package name ---- */
.pkg-view-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.75rem, 3.6vw, 2.9rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.02em;
    color: var(--bb-ink);
    margin: 0 0 38px;
}

/* ---- day-by-day timeline ---- */
.pkg-days {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* the continuous rail behind the dots */
.pkg-days::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 14px;
    bottom: 18px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(37, 191, 232, .55), rgba(28, 134, 199, .18));
    border-radius: 2px;
}

.pkg-day {
    position: relative;
    padding: 0 0 26px 32px;
}

/* dot sitting on the rail */
.pkg-day::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bb-cyan), var(--bb-blue));
    box-shadow: 0 0 0 4px rgba(37, 191, 232, .16);
    transition: transform var(--bb-transition), box-shadow var(--bb-transition);
}

.pkg-day:last-child { padding-bottom: 0; }

.pkg-day-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 6px;
}

.pkg-day-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--bb-blue);
}

.pkg-day-sep {
    color: rgba(28, 134, 199, .45);
    font-size: 1rem;
}

.pkg-day-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--bb-ink);
    transition: color var(--bb-transition);
}

.pkg-day-text {
    font-size: .93rem;
    line-height: 1.75;
    color: var(--bb-muted);
    margin: 0;
}

.pkg-day:hover .pkg-day-title { color: var(--bb-blue); }

.pkg-day:hover::before {
    transform: scale(1.22);
    box-shadow: 0 0 0 7px rgba(37, 191, 232, .18);
}

/* ---- right : photo panel ---- */
.pkg-view-media {
    position: relative;
    padding-bottom: 34px;
}

.pkg-view-frame {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background: var(--bb-deep);
    box-shadow: 0 26px 60px rgba(11, 58, 82, .18);
}

/* readability scrim, bottom-weighted */
.pkg-view-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 32, 45, .72) 0%, rgba(6, 32, 45, .18) 42%, rgba(6, 32, 45, .10) 100%);
    pointer-events: none;
}

.pkg-view-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.4, 0, .2, 1);
}

.pkg-view-frame:hover img { transform: scale(1.06); }

/* oversized day count bleeding off the bottom edge, as in the reference */
.pkg-view-count {
    position: absolute;
    left: 26px;
    bottom: -46px;
    z-index: 2;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(7rem, 13vw, 11rem);
    font-weight: 800;
    line-height: .8;
    letter-spacing: -.05em;
    color: #fff;
    text-shadow: 0 12px 34px rgba(6, 32, 45, .32);
    pointer-events: none;
}

/* trip-length chip */
.pkg-view-meta {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 3;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .34);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: right;
}

.pkg-view-meta-label {
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    margin: 0 0 3px;
}

.pkg-view-meta-value {
    font-family: 'Montserrat', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

/* ---- "view all" link, sitting on the frame's lower edge ---- */
.pkg-view-all {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 9px 26px 9px 9px;
    border-radius: 50px;
    background: var(--bb-white);
    color: var(--bb-ink);
    font-family: 'Montserrat', sans-serif;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 14px 34px rgba(11, 58, 82, .18);
    transition: var(--bb-transition);
}

.pkg-view-arrow {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bb-cyan), var(--bb-blue));
    color: #fff;
    font-size: .95rem;
    transition: transform var(--bb-transition);
}

.pkg-view-all:hover {
    color: var(--bb-blue);
    transform: translateX(-50%) translateY(-4px);
    box-shadow: 0 20px 44px rgba(11, 58, 82, .24);
}

.pkg-view-all:hover .pkg-view-arrow { transform: translateX(4px); }

/* ============================================
   DESTINATION GALLERY
   ============================================ */
.dest-gallery { background: var(--bb-light); }

.dest-card {
    position: relative;
    display: block;
    height: 100%;
    min-height: 320px;
    overflow: hidden;
    border-radius: 10px;
    isolation: isolate;
}

.dest-card-lg { min-height: 480px; }
.dest-card-tall { min-height: 480px; }

.dest-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.4, 0, .2, 1), transform-origin center;
    z-index: -2;
}

/* readability scrim over the photo */
.dest-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 32, 45, .88) 0%, rgba(6, 32, 45, .55) 32%, rgba(6, 32, 45, .12) 62%, rgba(6, 32, 45, .18) 100%);
    transition: opacity var(--bb-transition);
    z-index: -1;
}

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

/* ---- rotated price tag (top-right) ---- */
.dest-price {
    position: absolute;
    top: 26px;
    right: 16px;
    z-index: 2;
    display: inline-block;
    background: var(--bb-cyan);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 14px 8px;
    border-radius: 4px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    box-shadow: 0 8px 18px rgba(6, 32, 45, .28);
}

/* ---- caption block (bottom-left) ---- */
.dest-card-body {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    padding: 26px 24px;
}

.dest-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

/* 4.5 stars drawn with a clipped gradient fill */
.dest-stars {
    position: relative;
    display: inline-block;
    font-size: .82rem;
    line-height: 1;
    letter-spacing: 2px;
    background-image: linear-gradient(90deg, #ffa51f 0 90%, rgba(255, 255, 255, .38) 90% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dest-reviews {
    font-size: .78rem;
    color: rgba(255, 255, 255, .9);
}

.dest-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 10px rgba(6, 32, 45, .5);
}

.dest-card-lg .dest-title { font-size: 1.75rem; }

.dest-rule {
    display: block;
    width: 74px;
    height: 2px;
    margin-top: 14px;
    background: rgba(255, 255, 255, .55);
    transition: width var(--bb-transition), background var(--bb-transition);
}

.dest-card:hover .dest-rule { width: 120px; background: var(--bb-cyan); }

/* The stats strip overlaps the hero by -110px on desktop, which only works
   because the hero is full height. On mobile the hero is auto height, so the
   negative margin would drag the stat cards up into the hero copy. */

/* ============================================
   ACTIVITY GALLERY
   ============================================ */
.act-gallery {
    position: relative;
    overflow: hidden;
    padding: 70px 0;
    background:
        radial-gradient(46% 42% at 50% 46%, rgba(37, 191, 232, .10) 0%, rgba(37, 191, 232, 0) 70%),
        radial-gradient(38% 34% at 14% 22%, rgba(28, 134, 199, .09) 0%, rgba(28, 134, 199, 0) 72%),
        radial-gradient(36% 32% at 88% 76%, rgba(37, 191, 232, .08) 0%, rgba(37, 191, 232, 0) 72%),
        var(--bb-white);
}

/* the collage canvas: fixed ratio so every tile keeps its proportion */
.act-stage {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    aspect-ratio: 1400 / 1055;
}

/* ---- centred copy, layered above the tiles ---- */
.act-head {
    position: absolute;
    left: 50%;
    top: 43%;
    transform: translate(-50%, -50%);
    width: 35%;
    max-width: 420px;
    text-align: center;
    z-index: 5;
}

.act-head .section-eyebrow {
    font-size: .82rem;
    letter-spacing: .22em;
    color: var(--bb-blue);
    margin-bottom: 10px;
}

/* heading follows the theme: Montserrat like every other .section-title,
   scaled down slightly because the collage copy sits in a narrow column */
.act-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: 600;
    line-height: 1.28;
    color: var(--bb-ink);
    margin-bottom: 14px;
}

.act-head .section-sub { font-size: .92rem; line-height: 1.7; }

/* ---- floating photo tiles ---- */
.act-tile {
    position: absolute;
    display: block;
    overflow: hidden;
    border-radius: 20px;
    isolation: isolate;
    box-shadow: 0 20px 44px rgba(11, 58, 82, .16);
    transition: box-shadow var(--bb-transition);
}

/* cyan highlight ring revealed on hover (sits above the photo, below the caption) */
.act-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 3px var(--bb-cyan);
    opacity: 0;
    transition: opacity var(--bb-transition);
}

.act-tile:hover {
    box-shadow: 0 26px 56px rgba(11, 58, 82, .24);
}

.act-tile:hover::after { opacity: 1; }

.act-tile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}

.act-tile:hover .act-tile-img { transform: scale(1.07); }

/* ---- caption revealed on hover ---- */
.act-tile-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 26px 14px 12px;
    background: linear-gradient(to top, rgba(6, 32, 45, .82) 0%, rgba(6, 32, 45, 0) 100%);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--bb-transition), transform var(--bb-transition);
}

.act-tile:hover .act-tile-cap,
.act-tile:focus-visible .act-tile-cap {
    opacity: 1;
    transform: translateY(0);
}

.act-tile:focus-visible {
    outline: 3px solid var(--bb-cyan);
    outline-offset: 4px;
}

/* ---- collage placement (desktop) ---- */
/* tiles are spread wider across the stage and each is ~50px larger than before */
.act-tile-1 { left: 5.1%;  top: 13.5%; width: 16.9%; aspect-ratio: .930; animation: actFloat 7s   ease-in-out infinite; }
.act-tile-2 { left: 39.8%; top: 6.7%;  width: 14.7%; aspect-ratio: .930; animation: actFloat 8.5s ease-in-out .6s infinite; }
.act-tile-3 { left: 74.6%; top: 16.9%; width: 18.7%; aspect-ratio: .927; animation: actFloat 9s   ease-in-out .2s infinite; }
.act-tile-4 { left: 84.7%; top: 46.1%; width: 13.3%; aspect-ratio: .928; animation: actFloat 7.8s ease-in-out 1s  infinite; }
.act-tile-5 { left: 3.4%;  top: 48.4%; width: 13.6%; aspect-ratio: .884; animation: actFloat 8.2s ease-in-out .4s infinite; }
.act-tile-6 { left: 25.4%; top: 65.2%; width: 21.1%; aspect-ratio: .897; animation: actFloat 9.4s ease-in-out .8s infinite; }
.act-tile-7 { left: 64.4%; top: 69.7%; width: 17.1%; aspect-ratio: .900; animation: actFloat 7.4s ease-in-out 1.4s infinite; }

@keyframes actFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

/* honour reduced-motion: keep the collage, drop the drift */
@media (prefers-reduced-motion: reduce) {
    .act-tile { animation: none !important; }
    .act-tile-img,
    .act-tile-cap { transition: none; }
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
    position: relative;
    padding: 96px 0;
    overflow: hidden;
    isolation: isolate;
}

.cta-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 56%) 30%), url(../image/bgbner.webp);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.cta-inner { max-width: 780px; margin: 0 auto; }

.cta-section .hero-eyebrow { color: var(--bb-cyan); }

.cta-title {
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
}

.cta-text {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: 1.06rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, .86);
    margin: 0 auto 34px;
    max-width: 620px;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 38px;
}

.cta-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 30px;
}

.cta-points li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: .92rem;
    color: rgba(255, 255, 255, .84);
}

.cta-points i { color: var(--bb-cyan); }



/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: var(--bb-deep);
    color: rgba(255, 255, 255, .75);
    padding: 70px 0 0;
    font-size: .9rem;
}

.footer-top { padding-bottom: 45px; }

.footer-brand { margin-bottom: 16px; }
.footer-brand .brand-logo {    height: 80px;
    background: #fff;
    padding: 5px;
    border-radius: 10px; }

.footer-about { font-size: .9rem; line-height: 1.75; margin-bottom: 18px; }
.footer-social { justify-content: flex-start; }
.footer-social a { background: rgba(255, 255, 255, .1); }

.footer-title {
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: rgba(255, 255, 255, .7); }
.footer-links a:hover { color: var(--bb-cyan); padding-left: 5px; }

.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: 12px; margin-bottom: 14px; line-height: 1.6; }

/* the phone row holds two numbers, so stack them vertically inside a
   wrapper instead of letting the flex row stretch them side by side */
.footer-phones {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-contact i { color: var(--bb-cyan); margin-top: 5px; }
.footer-contact a { color: rgba(255, 255, 255, .7); }
.footer-contact a:hover { color: var(--bb-cyan); }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 20px 0;
    font-size: .84rem;
}

/* ============================================
   FLOATING ACTIONS + TOAST
   ============================================ */
.float-actions {
    position: fixed;
    right: 18px;
    bottom: 92px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fab-btn {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
    transition: var(--bb-transition);
}

.fab-btn:hover { transform: translateY(-4px); color: #fff; }
.fab-whatsapp { background: #25d366; }
.fab-call { background: var(--bb-blue); }
.fab-top { background: var(--bb-deep); opacity: 0; pointer-events: none; }

.fab-top.show { opacity: 1; pointer-events: auto; }

.toast-wrap {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 150%);
    z-index: 1055;
    transition: var(--bb-transition);
}

.toast-wrap.show { transform: translate(-50%, 0); }

.toast-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-left: 4px solid var(--bb-cyan);
    border-radius: 10px;
    padding: 14px 20px;
    box-shadow: var(--bb-shadow);
}

.toast-card i { font-size: 1.4rem; color: #25c48a; }
.toast-card strong { display: block; font-family: 'Montserrat', sans-serif; font-size: .92rem; color: var(--bb-ink); }
.toast-card small { font-size: .82rem; color: var(--bb-muted); }

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


/* ============================================================
   REVIEWS SECTION
   ============================================================ */
.reviews-section {
    position: relative;
    background: var(--bb-light);
    padding: 80px 0 90px;
    overflow: hidden;
}

.reviews-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 191, 232, .16), transparent 68%);
    pointer-events: none;
}

/* ---------- trust strip ---------- */
.trust-head { max-width: 760px; margin: 0 auto 34px; }

.trust-title {
    font-size: clamp(1.35rem, 2.6vw, 1.95rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--bb-deep);
    margin: 0;
}

.trust-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    background: #fff;
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow-sm);
    padding: 22px 10px;
    margin-bottom: 62px;
}

.trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    min-height: 92px;
}

.trust-item + .trust-item { border-left: 1px solid rgba(11, 58, 82, .10); }

.trust-item img {
    max-width: 100%;
    max-height: 86px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: saturate(1.02);
    transition: transform var(--bb-transition), filter var(--bb-transition);
}

.trust-item img:hover { transform: scale(1.05); filter: saturate(1.12); }

/* ---------- slider ---------- */
.reviews-head { margin-bottom: 42px; }

.rev-slider { position: relative; --rev-gap: 28px; --rev-per: 3; }

.rev-viewport { overflow: hidden; padding: 6px 4px 10px; }

.rev-track {
    display: flex;
    align-items: stretch;
    gap: var(--rev-gap);
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.rev-slide {
    flex: 0 0 calc((100% - (var(--rev-per) - 1) * var(--rev-gap)) / var(--rev-per));
    max-width: calc((100% - (var(--rev-per) - 1) * var(--rev-gap)) / var(--rev-per));
    display: flex;
}

.rev-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid rgba(11, 58, 82, .07);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow-sm);
    padding: 30px 28px 26px;
    transition: transform var(--bb-transition), box-shadow var(--bb-transition), border-color var(--bb-transition);
}

.rev-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--bb-shadow);
    border-color: rgba(37, 191, 232, .40);
}

.rev-stars { color: #f5a623; font-size: .92rem; letter-spacing: 2px; margin-bottom: 14px; }

.rev-title {
    font-size: 1.14rem;
    font-weight: 600;
    color: var(--bb-ink);
    margin-bottom: 12px;
}

.rev-text {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: .97rem;
    line-height: 1.72;
    color: var(--bb-muted);
    margin: 0 0 22px;
    flex: 1 1 auto;
}

.rev-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(11, 58, 82, .09);
}

.rev-avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    object-fit: cover;
}

.rev-who { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }

.rev-name { font-weight: 600; font-size: .93rem; color: var(--bb-ink); }

.rev-place {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: .8rem;
    color: var(--bb-muted);
}

.rev-src {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    font-weight: 500;
    color: var(--bb-blue);
    background: rgba(37, 191, 232, .10);
    border-radius: 50px;
    padding: 6px 12px;
    white-space: nowrap;
}

/* ---------- controls ---------- */
.rev-nav {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(11, 58, 82, .12);
    background: #fff;
    color: var(--bb-deep);
    font-size: .95rem;
    box-shadow: var(--bb-shadow-sm);
    transition: background var(--bb-transition), color var(--bb-transition), border-color var(--bb-transition);
    z-index: 3;
}

.rev-nav:hover {
    background: linear-gradient(135deg, var(--bb-cyan), var(--bb-blue));
    color: #fff;
    border-color: transparent;
}

.rev-prev { left: -14px; }
.rev-next { right: -14px; }

.rev-nav:disabled {
    opacity: .38;
    cursor: default;
    background: #fff;
    color: var(--bb-deep);
    border-color: rgba(11, 58, 82, .12);
}

.rev-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 26px;
}

.rev-dot {
    /* 24x24 hit area so the dots meet the WCAG target-size requirement;
       the visible dot is drawn by ::after at the original 9px size, and the
       negative margins keep a 24px pitch so targets never overlap. */
    position: relative;
    width: 24px;
    height: 24px;
    margin: 0 -4.5px;
    padding: 0;
    border: none;
    background: transparent;
}

.rev-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(11, 58, 82, .20);
    transition: background var(--bb-transition), width var(--bb-transition);
}

.rev-dot.active::after { background: var(--bb-cyan); width: 26px; border-radius: 50px; }
.rev-dot:focus-visible { outline: 2px solid var(--bb-blue); outline-offset: 2px; }



/* 575-767px. The 576-768 tier further down sets --rev-per: 2 for
   large phones, so this must not also claim 768px. */


@media (prefers-reduced-motion: reduce) {
    .rev-track { transition: none; }
    .rev-card:hover, .trust-item img:hover { transform: none; }
}

/* ============================================================
   FAQ SECTION
   ============================================================ */
.faq-section {
    background: #fff;
    padding: 80px 0 86px;
}

.faq-head { margin-bottom: 48px; }

/* two equal columns of six items each */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 28px;
    align-items: start;
}

.faq-col { display: flex; flex-direction: column; gap: 14px; }

.faq-item {
    background: #fff;
    border: 1px solid rgba(11, 58, 82, .12);
    border-radius: var(--bb-radius);
    overflow: hidden;
    transition: border-color var(--bb-transition), box-shadow var(--bb-transition), background var(--bb-transition);
}

.faq-item:hover { border-color: rgba(37, 191, 232, .55); box-shadow: var(--bb-shadow-sm); }

.faq-item[open] {
    background: var(--bb-light);
    border-color: rgba(37, 191, 232, .55);
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 19px 22px;
    cursor: pointer;
    list-style: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bb-ink);
    transition: color var(--bb-transition);
}

.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }

.faq-q:hover { color: var(--bb-blue); }

.faq-q:focus-visible {
    outline: 2px solid var(--bb-blue);
    outline-offset: -3px;
    border-radius: var(--bb-radius);
}

.faq-icon {
    flex: 0 0 auto;
    font-size: .82rem;
    color: var(--bb-blue);
    transition: transform var(--bb-transition);
}

.faq-item[open] .faq-icon { transform: rotate(45deg); }

.faq-a {
    padding: 0 22px 21px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: .96rem;
    line-height: 1.75;
    color: var(--bb-muted);
}

.faq-a p { margin: 0; }

.faq-help {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 46px;
    text-align: center;
}

.faq-help-text {
    font-size: 1.06rem;
    font-weight: 500;
    color: var(--bb-ink);
    margin: 0;
}



/* ============================================================
   ENQUIRY SECTION — 50 / 50 image + form
   ============================================================ */
.enquiry-section { background: var(--bb-light); padding: 88px 0; }

.enquiry-split {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* 50 / 50 */
    gap: 0;
    background: #fff;
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    overflow: hidden;
}

/* ---------- left: image ---------- */
.enquiry-media {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.enquiry-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.enquiry-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 58, 82, .12) 0%, rgba(11, 58, 82, .55) 52%, rgba(11, 58, 82, .88) 100%);
}

.enquiry-media-text {
    position: relative;
    z-index: 2;
    padding: 46px 42px;
    color: #fff;
}

.enquiry-media-text .hero-eyebrow { color: var(--bb-cyan); }

.enquiry-media-text h2 {
    font-size: clamp(1.55rem, 2.6vw, 2.1rem);
    font-weight: 600;
    color: #fff;
    margin-bottom: 14px;
}

.enquiry-media-text p {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .88);
    margin-bottom: 22px;
}

.enquiry-points { list-style: none; margin: 0; padding: 0; }

.enquiry-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: .95rem;
    color: rgba(255, 255, 255, .94);
    margin-bottom: 11px;
}

.enquiry-points i { color: var(--bb-cyan); margin-top: 4px; }

/* ---------- right: form ---------- */
.enquiry-form-wrap { padding: 46px 42px 40px; }

.enquiry-form-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--bb-ink);
    margin-bottom: 6px;
}

.enquiry-form-sub {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: .92rem;
    color: var(--bb-muted);
    margin: 0 0 26px;
}

.enq-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}

.enq-field { margin-bottom: 18px; }

.enq-field label {
    display: block;
    font-size: .84rem;
    font-weight: 600;
    color: var(--bb-ink);
    margin-bottom: 7px;
}

.enq-field label span { color: #d94a4a; }

.enquiry-form .form-control,
.enquiry-form .form-select {
    min-height: 46px;
    border-radius: 10px;
    border: 1px solid rgba(11, 58, 82, .18);
    font-family: 'Inter', sans-serif;
    font-size: .93rem;
    padding: 12px 14px;
    color: var(--bb-ink);
}

.enquiry-form textarea.form-control { min-height: 108px; resize: vertical; }

.enquiry-form .form-control::placeholder { color: #9db4c0; }

.enquiry-form .form-control:focus,
.enquiry-form .form-select:focus {
    border-color: var(--bb-cyan);
    box-shadow: 0 0 0 3px rgba(37, 191, 232, .18);
}

.enquiry-form .invalid-feedback { color: #d94a4a; }

.enq-submit { width: 100%; margin-top: 4px; }

.enq-note {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: .82rem;
    color: var(--bb-muted);
    text-align: center;
    margin: 14px 0 0;
}



/* ============================================================
   PERF: section-wise lazy rendering (mobile 64 -> 80+)
   content-visibility skips offscreen style/layout/paint until
   the section nears the viewport. contain-intrinsic-size holds
   a placeholder height so there is no layout shift. Zero visual
   change: nothing here alters colours, fonts or layout.
   ============================================================ */
.lazy-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}

/* below-fold CSS background photos are NOT fetched until the
   section is about to enter the viewport (JS adds .bg-on).
   .no-js keeps them visible when JavaScript is disabled. */
.why-us-bg,
.cta-bg { background-image: none !important; }
.why-us-bg.bg-on {
    background: url('../image/why-section.webp') center/cover no-repeat;
}
.cta-bg.bg-on {
    background-image: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 56%) 30%), url(../image/bgbner.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* mobile: fixed-attachment backgrounds repaint on every scroll
   frame and stall the main thread — scroll attachment looks
   identical on small screens and removes the jank */
@media (max-width: 765.98px) {
    .why-us-bg.bg-on,
    .cta-bg.bg-on { background-attachment: scroll; }
    /* hero zoom runs a compositor animation for 18s on load;
       pausing it on phones removes startup main-thread cost */
    .hero-bg { animation: none; }
}


/* ============================================================
   RESPONSIVE HARDENING
   Tablet band, short/landscape screens, very small phones,
   touch targets and global overflow safety.
   ============================================================ */

/* ---- activities: collapse the collage earlier on small laptops ----
   The absolute collage needs room. Below 1200px the stage is too small
   for the enlarged tiles, so the heading and tiles start colliding.
   Switch to the flow grid sooner, at 1199px instead of 991px. */

/* ---- tablet: 768px - 991px ----
   Below 992px sections are one or two columns wide, so tighten the
   section rhythm here. */
/* Small-device band is 300px - 768px inclusive. Tablet therefore starts
   at 769px so the two bands never overlap at exactly 768px. */

/* ---- short viewports (landscape phones) ----
   The hero is min-height:100vh with 130px of top padding, which
   overflows on a short landscape screen and pushes the nav over content. */

/* ---- very small phones (up to 380px) ----
   Guards against long words and cramped stacked rows. */

/* ---- touch targets: 44px minimum on coarse pointers ----
   The review dots and FAQ summaries are visually small but need a
   larger hit area on touch devices. */
@media (pointer: coarse) {
    /* slightly larger visible dot on touch devices; the 24px hit area stays */
    .rev-dot::after {
        width: 11px;
        height: 11px;
    }

    .faq-q { min-height: 52px; }

    .act-tile-cap { padding-top: 30px; }
}

/* ---- hover-capable devices only: reveal captions on hover ----
   The caption is always visible under 992px, so the hover-only
   reveal must not hide it where there is no hover. */
@media (hover: none) {
    .act-tile-cap {
        opacity: 1;
        transform: none;
    }
}

/* ---- global overflow safety ----
   Long unbroken strings (emails, URLs) in the footer and trust
   strip can force a horizontal scrollbar on narrow screens. */
.footer-contact span,
.footer-contact a,
.footer-about,
.enq-note,
.rev-text,
.faq-a p {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Prevent any section from creating sideways scroll */
.act-gallery,
.handpick,
.reviews-section,
.enquiry-section,
.cta-section,
.site-footer {
    max-width: 100%;
}

/* The date input is wide by default in some mobile browsers */
.enquiry-form input[type="date"] { min-width: 0; width: 100%; }
.enquiry-bar input[type="date"] { min-width: 0; }

/* ============================================================
   SMALL-DEVICE BAND: 320px - 768px
   Everything below is the mobile/small-device range.
   Tier boundaries, smallest to largest:
     320-359px  narrow phones      (single column)
     360-380px  very small phones
     381-575px  phones             (single column)
     576-767px  large phones       (two columns)
     768px      top of the band    (two columns)
   769px+ is the tablet band and is handled separately.
   ============================================================ */


/* ---- narrow phones: 320px - 359px ----
   Bottom of the 320px-768px small-device band. Bootstrap's 12px container
   gutters plus two-column grids leave too little room here, so everything
   drops to a single column. */

/* ---- large phones: 576px - 768px ----
   Top of the small-device band. The 575.98px block stops just below,
   so this covers 576-768 and sits before the tablet band starts at 769. */

/* ============================================================
   RESPONSIVE SCREEN BANDS
   ------------------------------------------------------------
   The site is tuned against four bands:

     MOBILE   300px  - 768px    1 column, stacked
     TABLET   768px  - 1080px   2 columns
     DESKTOP  1080px - 1350px   3 columns
     WIDE     1350px - 1800px   4 columns, full container

   These blocks come last in the file so they win over the
   legacy single-breakpoint rules above by source order.
   Bootstrap still switches its own grid at 992px, which
   falls inside the tablet band, so column classes stay as
   authored and only section-level layout is retuned here.
   ============================================================ */






/* Print: collapse the decorative sections so the page stays legible */
@media print {
    .act-gallery,
    .reviews-section,
    .cta-section,
    .float-actions,
    .topbar,
    .main-nav { display: none !important; }

    .site-footer { background: #fff; color: #000; }
    body { overflow-x: visible; }
}