/* =========================================================
   BTSM - COMPLETE STYLE.CSS
========================================================= */

:root {
    --nav: #f1eadc;
    --nav-dark: #e6dcc8;

    --navy: #082f49;
    --navy-dark: #052538;

    --teal-dark: #073e52;
    --teal: #0f766e;
    --teal-light: #28a39a;

    --gold: #d9a644;
    --gold-light: #efca77;

    --green: #147b4a;
    --green-hover: #198957;

    --white: #ffffff;
    --cream: #f7f4ed;
    --soft: #f4f7f7;

    --ink: #122b39;
    --muted: #697982;
    --line: #e1e8ea;

    --whatsapp: #25d366;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;

    overflow-x: hidden;

    background: #ffffff;

    color: var(--ink);

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    line-height: 1.6;
}

body.no-scroll {
    overflow: hidden;
}

img {
    display: block;

    max-width: 100%;
}

a {
    color: inherit;

    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.container {
    width: min(
        1180px,
        calc(100% - 36px)
    );

    margin: 0 auto;
}


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

.site-header {
    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        linear-gradient(
            180deg,
            #f7f2e8 0%,
            #eee5d5 100%
        );

    border-bottom:
        3px solid var(--gold);

    box-shadow:
        0 8px 24px rgba(8,47,73,.14);
}

.nav {
    min-height: 96px;

    display: flex;
    align-items: center;

    gap: 25px;
}


/* =========================================================
   BRAND
========================================================= */

.brand {
    min-width: 220px;

    display: flex;
    align-items: center;

    gap: 6px;
}

.brand-logo {
    width: 66px;
    height: 62px;

    flex: 0 0 66px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo img {
    width: 70px;
    height: 70px;

    max-width: none;

    object-fit: contain;

    display: block;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 2px;
    line-height: 1;
    color: var(--navy);
    white-space: nowrap;
}

.brand-copy strong {
    display: block;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.brand-copy strong span {
    color: var(--navy);
}

.brand-copy strong em {
    color: var(--gold);
    font-style: normal;
}

.brand-copy small {
    display: block;
    margin-left: 1px;

    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: none;
    color: var(--navy);
}

/* =========================================================
   NAVIGATION
========================================================= */

.nav nav {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 22px;
}

.nav nav .nav-link {
    position: relative;

    padding: 38px 0 34px;

    color: var(--navy);

    font-size: 15px;
    font-weight: 700;

    line-height: 1;

    white-space: nowrap;
}

.nav nav .nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 23px;

    height: 3px;

    border-radius: 50px;

    background: var(--gold-light);

    transform: scaleX(0);

    transition: transform .2s ease;
}

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


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

.actions {
    display: flex;
    align-items: center;

    gap: 11px;
}


/* =========================================================
   LANGUAGE
========================================================= */

.language-picker {
    position: relative;
}

.language-button {
    min-width: 142px;
    min-height: 48px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 0 12px;

    border:
        1px solid rgba(8,47,73,.18);

    border-radius: 13px;

    background:
        rgba(255,255,255,.58);

    color: var(--navy);

    font-size: 13px;
    font-weight: 700;
}

.language-button:hover,
.language-picker.open .language-button {
    background:
        #ffffff;

    border-color:
        rgba(217,166,68,.75);
}

.language-chevron {
    margin-left: auto;

    color: var(--gold-light);
}

.language-menu {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    z-index: 100;

    width: 180px;

    padding: 7px;

    border:
        1px solid var(--line);

    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 18px 48px rgba(7,40,58,.22);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    transition: .2s ease;
}

.language-picker.open .language-menu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.language-option {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: var(--ink);

    text-align: left;

    font-size: 12px;
    font-weight: 700;
}

.language-option:hover {
    background: #eef3f4;
}

.language-native {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   FLAGS
========================================================= */

.language-flag {
    width: 24px;
    height: 16px;

    display: inline-block;

    flex: 0 0 24px;

    border-radius: 2px;

    background-size: 100% 100%;
    background-repeat: no-repeat;

    box-shadow:
        0 0 0 1px rgba(0,0,0,.14);
}

.flag-gb {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 36'%3E%3Cpath fill='%23012169' d='M0 0h60v36H0z'/%3E%3Cpath stroke='%23fff' stroke-width='7' d='m0 0 60 36M60 0 0 36'/%3E%3Cpath stroke='%23C8102E' stroke-width='3.5' d='m0 0 60 36M60 0 0 36'/%3E%3Cpath stroke='%23fff' stroke-width='12' d='M30 0v36M0 18h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='7' d='M30 0v36M0 18h60'/%3E%3C/svg%3E");
}

.flag-fr {
    background:
        linear-gradient(
            90deg,
            #0055a4 0 33.333%,
            #ffffff 33.333% 66.666%,
            #ef4135 66.666%
        );
}

.flag-es {
    background:
        linear-gradient(
            #aa151b 0 25%,
            #f1bf00 25% 75%,
            #aa151b 75%
        );
}

.flag-de {
    background:
        linear-gradient(
            #000000 0 33.333%,
            #dd0000 33.333% 66.666%,
            #ffce00 66.666%
        );
}

.flag-it {
    background:
        linear-gradient(
            90deg,
            #009246 0 33.333%,
            #ffffff 33.333% 66.666%,
            #ce2b37 66.666%
        );
}


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

#menuToggle,
.mobile-nav {
    display: none;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 13px 20px;

    border: 0;
    border-radius: 11px;

    font-size: 12px;
    font-weight: 800;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.green {
    background: var(--green);

    color: #ffffff;
}

.green:hover {
    background: var(--green-hover);
}

.header-book {
    min-height: 38px;

    padding:
        8px 14px;

    font-size: 11px;
}

.primary {
    background: var(--navy);

    color: #ffffff;
}

.light {
    background: #ffffff;

    color: var(--navy);
}

.outline {
    border:
        1px solid rgba(255,255,255,.45);

    background: transparent;

    color: #ffffff;
}


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

.hero {
    position: relative;

    min-height: 720px;

    overflow: hidden;

    background: var(--teal-dark);

    color: #ffffff;
}

.hero-bg {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4,36,52,.98) 0%,
            rgba(5,49,66,.92) 47%,
            rgba(5,58,74,.63) 100%
        ),
        url("./images/mauritius-scenic-viewpoint.jpeg");

    background-size: cover;
    background-position: center;
}

.hero-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        .92fr 1.08fr;

    gap: 42px;

    align-items: start;

    padding:
        55px 0;
}

.hero-copy {
    padding-top: 55px;

    display: flex;
    flex-direction: column;
}

.hero-showcase {
    display: grid;

    grid-template-columns: 150px 1fr;

    min-height: 174px;

    margin-top: 24px;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.16);

    border-radius: 18px;

    background:
        rgba(3,28,40,.55);

    box-shadow:
        0 18px 45px rgba(0,0,0,.18);

    backdrop-filter: blur(6px);
}

.hero-showcase-image {
    min-height: 235px;

    overflow: hidden;
}

.hero-showcase-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.hero-showcase-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 20px 22px;
}

.hero-showcase-content > span {
    margin-bottom: 6px;

    color: var(--gold-light);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .14em;
}

.hero-showcase-content strong {
    max-width: 300px;

    color: #ffffff;

    font:
        700 22px/1.12
        "Playfair Display",
        Georgia,
        serif;
}

.hero-showcase-content p {
    max-width: 330px;

    margin: 8px 0 0;

    color: rgba(255,255,255,.70);

    font-size: 10px;
    line-height: 1.55;
}

.eyebrow {
    display: inline-block;

    padding:
        8px 13px;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius: 30px;

    background:
        rgba(255,255,255,.08);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .12em;
}

.hero h1 {
    margin:
        23px 0 18px;

    max-width: 650px;

    font:
        700 clamp(48px,5vw,69px)/1.03
        "Playfair Display",
        Georgia,
        serif;
}

.hero h1 em,
h2 em,
h3 em {
    color: var(--gold);

    font-style: normal;
}

.hero-copy > p {
    max-width: 590px;

    color:
        rgba(255,255,255,.82);

    font-size: 15px;
}

.hero-tourist-note {
    max-width: 590px;

    margin-top: 18px;

    padding:
        13px 15px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 11px;

    background:
        rgba(255,255,255,.07);

    color:
        rgba(255,255,255,.85);

    font-size: 11px;
}

.hero-buttons {
    display: flex;

    gap: 11px;

    margin:
        22px 0 18px;
}

.trust {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.trust span {
    padding:
        7px 10px;

    border-radius: 7px;

    background:
        rgba(255,255,255,.07);

    color:
        rgba(255,255,255,.74);

    font-size: 10px;
}


/* =========================================================
   BOOKING
========================================================= */

.booking {
    padding: 25px;

    border-radius: 22px;

    background: #ffffff;

    color: var(--ink);

    box-shadow:
        0 26px 70px rgba(0,0,0,.32);
}

.book-head {
    position: relative;

    margin-bottom: 17px;
}

.book-head > span {
    color: var(--teal);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .13em;
}

.book-head > b {
    position: absolute;

    top: 0;
    right: 0;

    padding:
        6px 9px;

    border-radius: 30px;

    background: #e9f6f3;

    color: var(--teal);

    font-size: 9px;
}

.book-head h2 {
    margin:
        5px 0;

    color: var(--navy);

    font:
        700 29px
        "Playfair Display",
        Georgia,
        serif;
}

.book-head p {
    margin: 0;

    color: var(--muted);

    font-size: 10px;
}

.form-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}

.form-grid label,
.baby-seat-select {
    color: #536169;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
}

.form-grid label.full {
    grid-column:
        1 / -1;
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.baby-seat-select select {
    display: block;

    width: 100%;

    margin-top: 4px;

    padding:
        11px;

    border:
        1px solid var(--line);

    border-radius: 9px;

    background: #fbfcfc;

    color: var(--ink);

    font-size: 11px;

    outline: none;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.baby-seat-select select:focus {
    border-color: #5ba49c;

    box-shadow:
        0 0 0 3px rgba(15,118,110,.08);
}

.form-grid textarea {
    resize: vertical;
}

.iti {
    width: 100%;

    margin-top: 4px;
}

.iti input {
    width: 100%;
}


/* =========================================================
   LOCATION FORM
========================================================= */

.form-section-title {
    grid-column:
        1 / -1;

    display: flex;
    align-items: center;

    gap: 10px;

    padding-top: 14px;

    border-top:
        1px solid var(--line);
}

.location-icon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--teal);

    color: #ffffff;

    font-size: 10px;
    font-weight: 900;
}

.destination-icon {
    background: var(--gold);

    color: var(--navy);
}

.form-section-title strong {
    display: block;

    color: var(--navy);

    font-size: 12px;
}

.form-section-title small {
    display: block;

    color: var(--muted);

    font-size: 9px;
}

.conditional-field {
    display: none;
}

.conditional-field.show {
    display: block;
}


/* =========================================================
   BABY SEAT
========================================================= */

.baby-seat-box {
    margin-top: 14px;

    padding: 14px;

    border:
        1px solid var(--line);

    border-radius: 13px;

    background: var(--soft);
}

.baby-seat-heading {
    display: flex;

    gap: 10px;

    margin-bottom: 10px;
}

.baby-seat-heading > span {
    font-size: 20px;
}

.baby-seat-heading strong {
    display: block;

    color: var(--navy);

    font-size: 12px;
}

.baby-seat-heading small {
    display: block;

    color: var(--muted);

    font-size: 9px;
}

.full-btn {
    width: 100%;

    min-height: 46px;

    margin-top: 14px;
}

.note {
    margin:
        8px 0 0;

    color: #88949a;

    font-size: 9px;

    text-align: center;
}


/* =========================================================
   STATS
========================================================= */

.stats {
    background: var(--cream);
}

.stats .container {
    display: grid;

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

.stats .container > div {
    padding:
        18px;

    border-right:
        1px solid #e1ded5;

    text-align: center;
}

.stats .container > div:last-child {
    border-right: 0;
}

.stats b {
    display: block;

    color: var(--navy);

    font:
        700 25px
        "Playfair Display",
        Georgia,
        serif;
}

.stats span {
    color: var(--muted);

    font-size: 10px;
}


/* =========================================================
   GENERAL SECTION
========================================================= */

.section {
    padding:
        58px 0;
}

.head {
    display: flex;

    justify-content: space-between;
    align-items: end;

    gap: 40px;

    margin-bottom: 28px;
}

.head i,
.center i,
.why-grid > div > i,
.excursion-heading i,
.cta i {
    color: var(--teal);

    font-size: 10px;
    font-style: normal;
    font-weight: 900;

    letter-spacing: .15em;
}

.section h2,
.head h2,
.center h2,
.why-grid h2 {
    margin:
        7px 0;

    color: var(--navy);

    font:
        700 clamp(35px,4vw,49px)/1.08
        "Playfair Display",
        Georgia,
        serif;
}

.head > p {
    max-width: 450px;

    color: var(--muted);

    font-size: 13px;
}

.center {
    max-width: 760px;

    margin:
        0 auto 30px;

    text-align: center;
}

.center p {
    max-width: 650px;

    margin:
        8px auto 0;

    color: var(--muted);

    font-size: 13px;
}


/* =========================================================
   SERVICES
========================================================= */

.service-grid {
    display: grid;

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

    gap: 16px;
}

.service-grid article {
    padding: 23px;

    border:
        1px solid var(--line);

    border-radius: 18px;

    background: #ffffff;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.service-grid article:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 17px 38px rgba(8,47,73,.08);
}

.service-grid article > span {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: #edf6f4;

    font-size: 19px;
}

.service-grid h3 {
    margin:
        14px 0 5px;

    color: var(--navy);

    font-size: 16px;
}

.service-grid p {
    min-height: 52px;

    color: var(--muted);

    font-size: 11px;
}

.service-grid a {
    color: var(--teal);

    font-size: 10px;
    font-weight: 900;
}


/* =========================================================
   VEHICLES
========================================================= */

.vehicle-section {
    background: var(--soft);
}

.vehicle-grid {
    display: grid;

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

    gap: 16px;
}

.vehicle-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 410px;

    padding: 23px;

    border:
        1px solid var(--line);

    border-radius: 19px;

    background: #ffffff;

    text-align: center;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.vehicle-card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 18px 40px rgba(8,47,73,.09);
}

.vehicle-card.featured {
    border:
        2px solid var(--teal);
}

.popular-tag {
    position: absolute;

    top: -11px;
    left: 50%;

    transform:
        translateX(-50%);

    padding:
        5px 11px;

    border-radius: 30px;

    background: var(--teal);

    color: #ffffff;

    font-size: 8px;
    font-weight: 900;
}

.vehicle-icon {
    display: block;

    margin-bottom: 4px;

    font-size: 42px;
}

.vehicle-card h3 {
    margin:
        4px 0 8px;

    color: var(--navy);

    font-size: 18px;
}

.vehicle-card > p {
    min-height: 51px;

    color: var(--muted);

    font-size: 10.5px;
}

.vehicle-detail {
    padding:
        13px 10px;

    border-radius: 12px;

    background: #f4f8f8;
}

.vehicle-detail strong {
    display: block;

    color: var(--navy);

    font:
        700 30px/1
        "Playfair Display",
        Georgia,
        serif;
}

.vehicle-detail span {
    display: block;

    margin-top: 5px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
}

.vehicle-luggage {
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 10px;

    padding:
        9px;

    border:
        1px solid var(--line);

    border-radius: 10px;

    color: #56666e;

    font-size: 10px;
}

.choose-vehicle {
    margin-top: 10px;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--teal);

    font-size: 10px;
    font-weight: 900;
}


/* =========================================================
   EXCURSION
========================================================= */

.excursion-section {
    padding:
        50px 0 43px;

    overflow: hidden;

    background: #073e52;

    color: #ffffff;
}

.excursion-heading {
    max-width: 850px;

    margin:
        0 auto 30px;

    text-align: center;
}

.excursion-heading i {
    color: #31aaa1;
}

.excursion-heading h2 {
    margin:
        6px 0 9px;

    color: #ffffff;

    font:
        700 clamp(36px,4vw,51px)/1.06
        "Playfair Display",
        Georgia,
        serif;
}

.excursion-heading h2 em {
    color: var(--gold);

    font-style: normal;
}

.excursion-heading p {
    max-width: 680px;

    margin: auto;

    color:
        rgba(255,255,255,.7);

    font-size: 12px;
}


/* =========================================================
   EXCURSION SLIDER
========================================================= */

.excursion-slider {
    position: relative;

    min-height: 430px;
}

.excursion-slide {
    display: none;

    grid-template-columns:
        minmax(0,.92fr)
        minmax(0,1.08fr);

    gap: 48px;

    align-items: center;
}

.excursion-slide.active {
    display: grid;

    animation:
        slideFade .5s ease;
}

@keyframes slideFade {

    from {
        opacity: 0;

        transform:
            translateX(12px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


/* =========================================================
   EXCURSION PHOTO
========================================================= */

.excursion-photo {
    position: relative;

    height: 420px;

    overflow: hidden;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #0b5268,
            #06293a
        );

    box-shadow:
        0 15px 40px rgba(0,0,0,.2);
}

.excursion-gallery {
    position: absolute;

    inset: 0;
}

.excursion-gallery-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 0;

    transform: scale(1.015);

    transition:
        opacity .8s ease,
        transform 4s ease;

    color: transparent;
}

.excursion-gallery-image.active {
    opacity: 1;

    transform: scale(1.045);
}

.excursion-gallery-image.is-leaving {
    opacity: 0;

    transform: scale(1.02);
}


@keyframes imageZoom {

    from {
        transform:
            scale(1);
    }

    to {
        transform:
            scale(1.045);
    }

}

.excursion-photo-overlay {
    position: absolute;

    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(3,27,39,.91),
            rgba(3,27,39,.12) 55%,
            transparent
        );
}

.excursion-photo-caption {
    position: absolute;

    z-index: 3;

    left: 26px;
    right: 26px;
    bottom: 23px;
}

.excursion-photo-caption small {
    display: block;

    color: var(--gold-light);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .14em;
}

.excursion-photo-caption strong {
    display: block;

    margin-top: 3px;

    color: #ffffff;

    font:
        700 28px
        "Playfair Display",
        Georgia,
        serif;
}


/* =========================================================
   EXCURSION CONTENT
========================================================= */

.excursion-content {
    padding-right: 50px;
}

.excursion-kicker {
    color: #35aaa1;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .16em;
}

.excursion-content h3 {
    margin:
        6px 0 10px;

    color: #ffffff;

    font:
        700 clamp(34px,3.5vw,47px)/1.05
        "Playfair Display",
        Georgia,
        serif;
}

.excursion-content h3 em {
    display: block;

    color: var(--gold);
}

.excursion-content > p {
    color:
        rgba(255,255,255,.7);

    font-size: 11.5px;
}

.excursion-list {
    margin:
        12px 0 17px;

    padding: 0;

    list-style: none;
}

.excursion-list li {
    display: grid;

    grid-template-columns:
        29px 1fr;

    gap: 10px;

    padding:
        7px 0;

    border-bottom:
        1px solid rgba(255,255,255,.1);
}

.excursion-list li > b {
    color: var(--gold-light);

    font-size: 8px;
}

.excursion-list li span strong {
    display: block;

    color: #ffffff;

    font-size: 11px;
}

.excursion-list li span small {
    display: block;

    color:
        rgba(255,255,255,.48);

    font-size: 9px;
}


/* =========================================================
   EXCURSION CONTROLS
========================================================= */

.excursion-arrow {
    position: absolute;

    z-index: 20;

    top: 50%;

    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    transform:
        translateY(-50%);

    padding: 0;

    border:
        1px solid rgba(255,255,255,.28);

    border-radius: 50%;

    background:
        rgba(4,39,54,.84);

    color: #ffffff;

    font-size: 28px;

    transition: .2s;
}

.excursion-arrow:hover {
    background: #ffffff;

    color: var(--teal-dark);
}

.excursion-prev {
    left: -23px;
}

.excursion-next {
    right: -23px;
}

.excursion-dots {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 8px;

    margin-top: 20px;
}

.excursion-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;
    border-radius: 20px;

    background:
        rgba(255,255,255,.36);

    transition: .2s;
}

.excursion-dot.active {
    width: 30px;

    background: var(--gold);
}

.excursion-note {
    margin:
        12px 0 0;

    color:
        rgba(255,255,255,.48);

    font-size: 9px;

    text-align: center;
}


/* =========================================================
   EXPERIENCES
========================================================= */

.experience-section {
    background: #ffffff;
}

.experience-grid {
    display: grid;

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

    gap: 18px;
}

.experience-grid article {
    overflow: hidden;

    border:
        1px solid var(--line);

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 8px 27px rgba(8,47,73,.05);
}

.gallery-item {
    width: 100%;
    height: 280px;

    padding: 0;

    overflow: hidden;

    border: 0;

    background: #eaf0f1;
}

.gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .4s ease;
}

.gallery-item:hover img {
    transform:
        scale(1.05);
}

.experience-grid article > div {
    padding:
        18px;
}

.experience-grid small {
    color: var(--teal);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .1em;
}

.experience-grid h3 {
    margin:
        5px 0;

    color: var(--navy);

    font:
        700 21px
        "Playfair Display",
        Georgia,
        serif;
}

.experience-grid p {
    color: var(--muted);

    font-size: 10.5px;
}

.experience-action {
    margin-top: 23px;

    text-align: center;
}


/* =========================================================
   WHY US
========================================================= */

.why-section {
    background: var(--soft);
}

.why-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 55px;

    align-items: center;
}

.why-grid > div > p {
    color: var(--muted);

    font-size: 13px;
}

.benefits {
    margin-top: 20px;
}

.benefits > div {
    display: grid;

    grid-template-columns:
        27px 1fr;

    gap: 8px;

    margin-bottom: 13px;
}

.benefits > div > span {
    color: var(--teal);

    font-weight: 900;
}

.benefits p {
    margin: 0;
}

.benefits strong {
    display: block;

    color: var(--navy);

    font-size: 12px;
}

.benefits small {
    display: block;

    color: var(--muted);

    font-size: 10px;
}

.why-slider {
    position: relative;

    height: 470px;

    overflow: hidden;

    border-radius: 23px;

    background: #dce7e8;
}

.why-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition:
        opacity .8s ease,
        transform 5s ease;
}

.why-slide.active {
    opacity: 1;

    transform:
        scale(1.05);
}

.why-overlay {
    position: absolute;

    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(3,29,43,.83),
            transparent 58%
        );
}

.why-caption {
    position: absolute;

    z-index: 4;

    left: 28px;
    bottom: 27px;

    color: #ffffff;
}

.why-caption small {
    display: block;

    color: var(--gold-light);

    font-size: 9px;
    font-weight: 900;
}

.why-caption strong {
    display: block;

    font:
        700 28px/1.18
        "Playfair Display",
        Georgia,
        serif;
}

.why-dots {
    position: absolute;

    z-index: 5;

    right: 23px;
    bottom: 27px;

    display: flex;

    gap: 7px;
}

.why-slider-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border:
        1px solid rgba(255,255,255,.8);

    border-radius: 20px;

    background:
        rgba(255,255,255,.35);
}

.why-slider-dot.active {
    width: 25px;

    background: #ffffff;
}


/* =========================================================
   FAQ
========================================================= */

.faq-section {
    background: #ffffff;
}

.narrow {
    max-width: 900px;
}

details {
    padding:
        16px 0;

    border-top:
        1px solid var(--line);
}

details:last-child {
    border-bottom:
        1px solid var(--line);
}

summary {
    display: flex;
    justify-content: space-between;

    list-style: none;

    color: var(--navy);

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}

summary::-webkit-details-marker {
    display: none;
}

summary::after {
    content: "+";

    color: var(--teal);

    font-size: 19px;
}

details[open] summary::after {
    content: "−";
}

details p {
    margin:
        9px 0 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================================================
   CTA
========================================================= */

.cta {
    padding:
        53px 0;

    background: var(--teal);

    color: #ffffff;
}

.cta .container {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 30px;
}

.cta i {
    color: #b4ded9;
}

.cta h2 {
    margin:
        5px 0;

    font:
        700 42px
        "Playfair Display",
        Georgia,
        serif;
}

.cta p {
    margin: 0;

    color:
        rgba(255,255,255,.72);

    font-size: 12px;
}

.cta-actions {
    display: flex;

    gap: 9px;
}


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

footer {
    padding:
        48px 0 18px;

    background: #061f31;

    color: #ffffff;
}

.footer-grid {
    display: grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap: 35px;
}

.footer-brand {
    min-width: 0;

    display: inline-flex;
}

.footer-grid p {
    max-width: 320px;

    color:
        rgba(255,255,255,.55);

    font-size: 10px;
}

.footer-grid h4 {
    margin:
        0 0 12px;

    color: #8fc9c3;

    font-size: 10px;

    letter-spacing: .12em;
}

.footer-grid > div > a:not(.brand) {
    display: block;

    margin:
        7px 0;

    color:
        rgba(255,255,255,.66);

    font-size: 10px;
}

.copyright {
    margin-top: 28px;

    padding-top: 16px;

    border-top:
        1px solid rgba(255,255,255,.08);

    color:
        rgba(255,255,255,.38);

    font-size: 9px;
}


/* =========================================================
   LIGHTBOX
========================================================= */

.lightbox {
    position: fixed;

    z-index: 2000;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    background:
        rgba(2,20,31,.93);

    opacity: 0;
    visibility: hidden;

    transition: .25s;
}

.lightbox.open {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    max-width: 950px;

    width: 100%;

    text-align: center;
}

.lightbox-content img {
    max-height: 80vh;

    margin: auto;

    border-radius: 18px;
}

.lightbox-content p {
    color:
        rgba(255,255,255,.74);

    font-size: 12px;
}

.lightbox-close {
    position: absolute;

    top: 18px;
    right: 22px;

    width: 45px;
    height: 45px;

    border:
        1px solid rgba(255,255,255,.22);

    border-radius: 50%;

    background:
        rgba(255,255,255,.08);

    color: #ffffff;

    font-size: 28px;
}


/* =========================================================
   SUCCESS
========================================================= */

.success-modal {
    position: fixed;

    z-index: 2500;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(3,24,37,.74);

    opacity: 0;
    visibility: hidden;

    transition: .25s;
}

.success-modal.open {
    opacity: 1;
    visibility: visible;
}

.success-card {
    position: relative;

    width: min(490px,100%);

    padding:
        38px 34px 30px;

    border-radius: 24px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 35px 100px rgba(0,0,0,.3);
}

.success-close {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 34px;
    height: 34px;

    border: 0;
    border-radius: 50%;

    background: #eff3f4;

    color: #68767c;

    font-size: 20px;
}

.success-icon {
    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    margin:
        0 auto 16px;

    border-radius: 50%;

    background: var(--whatsapp);

    color: #ffffff;

    font-size: 25px;
    font-weight: 900;
}

.success-kicker {
    color: var(--teal);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .15em;
}

.success-card h3 {
    margin:
        5px 0;

    color: var(--navy);

    font:
        700 29px
        "Playfair Display",
        Georgia,
        serif;
}

.success-card > p {
    color: var(--muted);

    font-size: 11px;
}

.success-booking-id {
    margin:
        18px 0;

    padding: 13px;

    border:
        1px dashed #cbd8db;

    border-radius: 12px;

    background: #f8fafb;
}

.success-booking-id span {
    display: block;

    color: #849096;

    font-size: 8px;
}

.success-booking-id strong {
    color: var(--navy);

    font-size: 14px;
}

.success-actions {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 9px;
}

.whatsapp-button {
    background: var(--whatsapp);

    color: #ffffff;
}

.success-secondary {
    border:
        1px solid var(--line);

    background: #ffffff;

    color: var(--navy);
}


/* =========================================================
   TOAST
========================================================= */

#toast {
    position: fixed;

    z-index: 3000;

    left: 50%;
    bottom: 25px;

    transform:
        translate(-50%,20px);

    max-width:
        calc(100% - 30px);

    padding:
        13px 18px;

    border-radius: 10px;

    background: var(--navy);

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    opacity: 0;
    visibility: hidden;

    transition: .25s;
}

#toast.show {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%,0);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .brand {
        min-width: 220px;
    }

    .nav nav {
        gap: 14px;
    }

    .nav nav .nav-link {
        font-size: 13px;
    }

}


@media (max-width: 900px) {

    .container {
        width:
            min(
                calc(100% - 28px),
                700px
            );
    }

    .nav {
        min-height: 78px;
    }

    .brand {
        min-width: 0;
    }

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

    .brand-logo img {
        width: 64px;
        height: 64px;
    }

    .brand-copy strong {
        font-size: 19px;
    }

    .brand-copy small {
        font-size: 10px;
    }

    .nav nav,
    .header-book {
        display: none;
    }

    #menuToggle {
        width: 44px;
        height: 44px;

        display: grid;
        place-items: center;

        border:
            1px solid rgba(8,47,73,.18);

        border-radius: 11px;

        background:
            rgba(255,255,255,.72);

        color: var(--navy);

        font-size: 22px;
    }

    .mobile-nav {
        padding:
            10px 0 18px;

        flex-direction: column;

        gap: 3px;
    }

    .mobile-nav.open {
        display: flex;

        border-top:
            1px solid rgba(8,47,73,.12);
    }

    .mobile-nav a {
        padding:
            9px 0;

        color: var(--navy);

        font-size: 14px;
        font-weight: 700;
    }

    .hero {
        min-height: 0;
    }

    .hero-grid {
        grid-template-columns:
            1fr;

        gap: 35px;

        padding:
            40px 0;
    }

    .hero-copy {
        padding-top: 0;

        text-align: center;
    }

    .hero-showcase {
        grid-template-columns: 120px 1fr;

        margin-top: 20px;

        text-align: left;
    }

    .hero-showcase-image {
        min-height: 190px;
    }

    .hero-showcase-content {
        padding: 17px;
    }

    .hero-showcase-content strong {
        font-size: 19px;
    }

    .hero-copy > p,
    .hero-tourist-note {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons,
    .trust {
        justify-content: center;
    }

    .service-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .vehicle-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .excursion-slider {
        min-height: 0;
    }

    .excursion-slide {
        grid-template-columns:
            1fr;

        gap: 26px;
    }

    .excursion-photo {
        height: 380px;
    }

    .excursion-content {
        padding:
            0 17px;
    }

    .excursion-content h3 em {
        display: inline;
    }

    .excursion-prev {
        left: 10px;
    }

    .excursion-next {
        right: 10px;
    }

    .experience-grid {
        grid-template-columns:
            1fr;
    }

    .gallery-item {
        height: 360px;
    }

    .why-grid {
        grid-template-columns:
            1fr;

        gap: 35px;
    }

    .cta .container {
        display: block;

        text-align: center;
    }

    .cta-actions {
        justify-content: center;

        margin-top: 18px;
    }

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

    .footer-grid > div:first-child {
        grid-column:
            1 / -1;
    }

}


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

@media (max-width: 560px) {

    .container {
        width:
            calc(100% - 24px);
    }

    .brand {
        gap: 8px;
    }

    .brand-copy strong {
        font-size: 12px;
    }

    .brand-copy small {
        max-width: 145px;
        font-size: 7px;
        letter-spacing: .045em;
    }

    .actions {
        gap: 6px;
    }

    .language-button {
        min-width: 48px;
        width: 48px;

        justify-content: center;

        padding: 0;
    }

    #languageLabel,
    .language-chevron {
        display: none;
    }

    .language-menu {
        right: -45px;
    }

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

    .hero-buttons {
        flex-direction: column;
    }

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

    .trust {
        flex-direction: column;
    }

    .form-grid {
        grid-template-columns:
            1fr;
    }

    .form-grid label.full,
    .form-section-title {
        grid-column: auto;
    }

    .stats .container {
        grid-template-columns:
            1fr 1fr;
    }

    .head {
        display: block;
    }

    .service-grid,
    .vehicle-grid {
        grid-template-columns:
            1fr;
    }

    .excursion-section {
        padding:
            38px 0 35px;
    }

    .excursion-heading h2 {
        font-size: 35px;
    }

    .excursion-photo {
        height: 300px;

        border-radius: 18px;
    }

    .excursion-photo-caption {
        left: 19px;
        bottom: 18px;
    }

    .excursion-photo-caption strong {
        font-size: 23px;
    }

    .excursion-content {
        padding: 0;
    }

    .excursion-content h3 {
        font-size: 32px;
    }

    .excursion-arrow {
        width: 39px;
        height: 39px;

        font-size: 24px;
    }

    .gallery-item {
        height: 280px;
    }

    .why-slider {
        height: 360px;
    }

    .cta h2 {
        font-size: 34px;

        line-height: 1.15;
    }

    .cta-actions {
        flex-direction: column;
    }

    .cta-actions .btn {
        width: 100%;
    }

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

    .footer-grid > div:first-child {
        grid-column: auto;
    }

    .success-actions {
        grid-template-columns:
            1fr;
    }

}
/* =========================================================
   MOBILE-FIRST POLISH / PHONE OPTIMIZATION
   Keeps the desktop design intact while making the booking
   experience much shorter, cleaner and easier to use on phones.
========================================================= */

@media (max-width: 560px) {
    body {
        overflow-x: hidden;
    }

    .container {
        width: calc(100% - 20px);
    }

    .nav {
        min-height: 68px;
    }

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

    .brand-logo img {
        width: 48px;
        height: 48px;
    }

    .brand-copy strong {
        font-size: 10px;
    }

    .brand-copy small {
        max-width: 100px;
        font-size: 6.5px;
        letter-spacing: .035em;
    }

    .language-button,
    #menuToggle {
        width: 42px;
        min-width: 42px;
        height: 42px;
    }

    /* Hero: reduce vertical stacking so the booking form appears much sooner. */
    .hero-grid {
        gap: 20px;
        padding: 26px 0 24px;
    }

    .hero-copy {
        padding-top: 0;
    }

    .eyebrow {
        padding: 7px 10px;
        font-size: 8px;
        letter-spacing: .09em;
    }

    .hero h1 {
        margin: 16px 0 12px;
        font-size: clamp(36px, 10vw, 42px);
        line-height: 1.02;
    }

    .hero-copy > p {
        max-width: 365px;
        font-size: 12px;
        line-height: 1.55;
    }

    .hero-tourist-note {
        max-width: 365px;
        margin-top: 12px;
        padding: 9px 11px;
        border-radius: 9px;
        font-size: 9px;
        line-height: 1.45;
    }

    .hero-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 14px 0 10px;
    }

    .hero-buttons .btn {
        width: 100%;
        min-height: 44px;
        padding: 10px 8px;
        font-size: 10px;
    }

    .trust {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }

    .trust span {
        min-height: 34px;
        display: grid;
        place-items: center;
        padding: 6px 4px;
        border-radius: 6px;
        font-size: 7.5px;
        line-height: 1.2;
        text-align: center;
    }

    /* Compact island showcase instead of a tall card. */
    .hero-showcase {
        grid-template-columns: 82px 1fr;
        min-height: 96px;
        margin-top: 12px;
        border-radius: 12px;
    }

    .hero-showcase-image {
        min-height: 96px;
    }

    .hero-showcase-content {
        padding: 10px 11px;
    }

    .hero-showcase-content > span {
        margin-bottom: 3px;
        font-size: 7px;
    }

    .hero-showcase-content strong {
        font-size: 15px;
        line-height: 1.12;
    }

    .hero-showcase-content p {
        margin-top: 4px;
        font-size: 8px;
        line-height: 1.35;
    }

    /* Booking card: tighter but still comfortable touch targets. */
    .booking {
        padding: 15px;
        border-radius: 17px;
        box-shadow: 0 18px 45px rgba(0,0,0,.24);
    }

    .book-head {
        margin-bottom: 11px;
        padding-right: 0;
    }

    .book-head > span {
        font-size: 8px;
    }

    .book-head > b {
        padding: 5px 7px;
        font-size: 7px;
    }

    .book-head h2 {
        margin: 4px 0 3px;
        font-size: 25px;
    }

    .book-head p {
        max-width: 290px;
        font-size: 9px;
        line-height: 1.35;
    }

    /* Keep useful pairs side-by-side on phones to cut form length almost in half. */
    .form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .form-grid label,
    .baby-seat-select {
        font-size: 8px;
    }

    .form-grid label.full,
    .form-section-title {
        grid-column: 1 / -1;
    }

    .form-grid input,
    .form-grid select,
    .form-grid textarea,
    .baby-seat-select select {
        margin-top: 3px;
        min-height: 42px;
        padding: 9px 10px;
        border-radius: 8px;
        font-size: 10px;
    }

    .form-grid textarea {
        min-height: 74px;
    }

    .form-section-title {
        gap: 8px;
        padding-top: 9px;
    }

    .location-icon {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
        font-size: 9px;
    }

    .form-section-title strong {
        font-size: 11px;
    }

    .form-section-title small {
        font-size: 8px;
    }

    .baby-seat-box {
        margin-top: 9px;
        padding: 10px;
        border-radius: 12px;
    }

    .baby-seat-heading {
        gap: 7px;
        margin-bottom: 7px;
    }

    .baby-seat-heading > span {
        font-size: 19px;
    }

    .baby-seat-heading strong {
        font-size: 11px;
    }

    .baby-seat-heading small {
        font-size: 8px;
    }

    .baby-seat-select select {
        min-height: 40px;
    }

    .full-btn {
        min-height: 46px;
        margin-top: 9px;
        font-size: 11px;
    }

    .note {
        margin-top: 7px;
        font-size: 8px;
        line-height: 1.4;
    }
}

/* Very small phones: keep the layout comfortable without horizontal overflow. */
@media (max-width: 380px) {
    .container {
        width: calc(100% - 16px);
    }

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

    .hero-buttons {
        grid-template-columns: 1fr;
    }

    .trust {
        grid-template-columns: 1fr;
    }

    .trust span {
        min-height: 30px;
    }

    .hero-showcase {
        grid-template-columns: 72px 1fr;
    }

    .hero-showcase-image {
        min-height: 92px;
    }

    .hero-showcase-content strong {
        font-size: 14px;
    }

    .form-grid {
        gap: 7px;
    }
}

/* =========================================================
   FINAL PHONE HEADER + LANGUAGE POLISH
========================================================= */
@media (max-width: 560px) {
    .nav {
        width: calc(100% - 20px);
        min-height: 66px;
        gap: 8px;
    }

    .brand {
        min-width: 0;
        flex: 0 1 auto;
    }

    .actions {
        margin-left: auto;
        flex: 0 0 auto;
        gap: 8px;
    }

    .language-picker {
        order: 1;
    }

    #menuToggle {
        order: 2;
    }

    .language-menu {
        right: 0;
        width: 176px;
    }
}

@media (max-width: 380px) {
    .brand-logo { width: 40px; height: 38px; flex-basis: 40px; }
    .brand-logo img { width: 44px; height: 44px; }
    .brand-copy strong { font-size: 9px; }
    .brand-copy small { font-size: 6px; letter-spacing: .025em; }
    .actions { gap: 6px; }
}


/* =========================================================
   INTERNATIONAL PHONE COUNTRY SEARCH
   Keep the country selector/search visually aligned with the
   booking form. These rules override the generic form-input
   styles that would otherwise affect the plugin's search box.
========================================================= */

.iti {
    position: relative;
    width: 100%;
    margin-top: 4px;
}

.iti__dropdown-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.iti__search-input {
    display: block;
    box-sizing: border-box !important;
    width: calc(100% - 16px) !important;
    min-height: 38px !important;
    margin: 8px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--ink) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    outline: none !important;
    box-shadow: none !important;
}

.iti__search-input:focus {
    border-color: #5ba49c !important;
    box-shadow: 0 0 0 3px rgba(15,118,110,.08) !important;
}

.iti__country-list {
    box-sizing: border-box;
}

.iti__country {
    box-sizing: border-box;
}


/* =========================================================
   PHONE COUNTRY DROPDOWN — FINAL ALIGNMENT FIX
   Keep the international country picker wide enough for the
   search field and country names. This only affects the
   intl-tel-input dropdown; the approved page layout is unchanged.
========================================================= */
.iti__dropdown-content {
    width: 360px !important;
    min-width: 320px !important;
    max-width: min(360px, calc(100vw - 24px)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 99999 !important;
}

.iti__search-input {
    display: block !important;
    width: calc(100% - 20px) !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 8px 10px !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
    border: 1px solid #d8e0e4 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #163047 !important;
    font: inherit !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    outline: none !important;
}

.iti__search-input:focus {
    border-color: #5ba49c !important;
    box-shadow: 0 0 0 3px rgba(15,118,110,.08) !important;
}

.iti__country-list {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 280px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.iti__country {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 9px 12px !important;
}

.iti__country-name,
.iti__dial-code {
    white-space: nowrap !important;
}

@media (max-width: 480px) {
    .iti__dropdown-content {
        width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
    }
}


/* =========================================================
   DESKTOP COMPACT UI — MATCH APPROVED VERCEL SCALE
   The live approved design is the same layout, but its desktop
   content is intentionally more compact. This only reduces the
   desktop scale; colors, sections, functionality and structure
   remain unchanged. Mobile/tablet styles are untouched.
========================================================= */
@media (min-width: 1101px) {
    /* Header is intentionally full-width on desktop so the
       logo/brand stays left, navigation stays central, and
       language + Book Now stay on the far right. */
    .nav {
        width: calc(100% - 48px);
        max-width: none;
        min-height: 84px;
        gap: 28px;
    }

    .brand {
        min-width: 285px;
        flex: 0 0 285px;
        gap: 7px;
    }

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

    .brand-logo img {
        width: 62px;
        height: 62px;
    }

    .brand-copy strong {
        font-size: 17px;
        line-height: 1.02;
    }

    .brand-copy small {
        font-size: 11px;
        letter-spacing: .055em;
        line-height: 1.05;
    }

    .nav nav {
        flex: 1 1 auto;
        gap: 25px;
        justify-content: center;
    }

    .nav nav .nav-link {
        padding: 32px 0 28px;
        font-size: 13px;
    }

    .nav nav .nav-link::after {
        bottom: 18px;
        height: 2px;
    }

    .language-button {
        min-height: 42px;
    }

    .header-book {
        min-height: 36px;
        padding: 7px 12px;
        font-size: 10px;
        border-radius: 9px;
    }

    .hero {
        min-height: 0;
    }

    .hero-grid {
        gap: 34px;
        padding: 44px 0;
    }

    .hero-copy {
        padding-top: 44px;
    }

    .eyebrow {
        padding: 7px 11px;
        font-size: 9px;
    }

    .hero h1 {
        margin: 19px 0 15px;
        font-size: clamp(40px, 4vw, 55px);
    }

    .hero-copy > p {
        font-size: 12px;
    }

    .hero-tourist-note {
        margin-top: 15px;
        padding: 10px 12px;
        font-size: 9px;
    }

    .hero-buttons {
        gap: 9px;
        margin: 18px 0 15px;
    }

    .trust {
        gap: 6px;
    }

    .trust span {
        padding: 6px 8px;
        font-size: 8px;
    }

    .hero-showcase {
        grid-template-columns: 120px 1fr;
        min-height: 140px;
        margin-top: 19px;
        border-radius: 15px;
    }

    .hero-showcase-image {
        min-height: 188px;
    }

    .hero-showcase-content {
        padding: 16px 18px;
    }

    .hero-showcase-content > span {
        font-size: 8px;
    }

    .hero-showcase-content strong {
        font-size: 18px;
    }

    .hero-showcase-content p {
        font-size: 8px;
    }

    .booking {
        padding: 20px;
        border-radius: 18px;
        box-shadow: 0 21px 56px rgba(0,0,0,.30);
    }

    .book-head {
        margin-bottom: 14px;
    }

    .book-head > span,
    .book-head > b {
        font-size: 8px;
    }

    .book-head > b {
        padding: 5px 8px;
    }

    .book-head h2 {
        margin: 4px 0;
        font-size: 23px;
    }

    .book-head p {
        font-size: 8px;
    }

    .form-grid {
        gap: 9px;
    }

    .form-grid label,
    .baby-seat-select {
        font-size: 8px;
    }

    .form-grid input,
    .form-grid select,
    .form-grid textarea,
    .baby-seat-select select {
        margin-top: 3px;
        padding: 9px;
        border-radius: 8px;
        font-size: 9px;
    }

    .form-section-title {
        gap: 8px;
        padding-top: 11px;
    }

    .location-icon {
        width: 26px;
        height: 26px;
    }
}


/* =========================================================
   BRAND TITLE EMPHASIS
   Requested: keep the existing logo, but make the
   "Best Taxi Service in Mauritius" brand text more prominent.
========================================================= */

@media (min-width: 1101px) {
    .brand-copy strong {
        font-size: 22px;
        line-height: 1.02;
        letter-spacing: -.02em;
    }

    .brand-copy small {
        font-size: 13px;
        line-height: 1.05;
        letter-spacing: .045em;
    }
}


/* =========================================================
   REFINED BRANDING — BEST TAXI SERVICE IN MAURITIUS
   Makes the primary business name more prominent while keeping
   the existing header structure, logo and navigation unchanged.
========================================================= */
.brand-copy {
    gap: 5px;
    line-height: 1;
}

.brand-copy strong {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: .98;
    color: var(--navy);
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

.brand-copy strong span {
    color: var(--navy);
}

.brand-copy strong em {
    color: var(--gold);
    font-style: normal;
}

.brand-copy strong b {
    color: var(--navy);
    font-weight: 900;
}

.brand-copy small {
    margin-left: 1px;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8a6a2c;
    line-height: 1;
    position: relative;
}

.brand-copy small::after {
    content: "";
    display: block;
    width: 54px;
    height: 2px;
    margin-top: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold), rgba(183,142,50,0));
}

@media (min-width: 1101px) {
    .brand {
        min-width: 325px;
        flex-basis: 325px;
        gap: 10px;
    }

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

    .brand-logo img {
        width: 66px;
        height: 66px;
    }

    .brand-copy strong {
        font-size: 26px;
    }

    .brand-copy small {
        font-size: 13px;
        letter-spacing: .17em;
    }
}

@media (max-width: 1100px) and (min-width: 561px) {
    .brand-copy strong {
        font-size: 22px;
    }

    .brand-copy small {
        font-size: 11px;
    }
}

@media (max-width: 560px) {
    .brand {
        gap: 7px;
    }

    .brand-copy strong {
        font-size: 14px;
        letter-spacing: -.025em;
        line-height: 1;
    }

    .brand-copy small {
        font-size: 7.5px;
        letter-spacing: .095em;
        line-height: 1;
    }

    .brand-copy small::after {
        width: 32px;
        height: 1.5px;
        margin-top: 3px;
    }
}

@media (max-width: 380px) {
    .brand-copy strong {
        font-size: 12px;
    }

    .brand-copy small {
        font-size: 6.5px;
    }
}

/* =========================================================
   DESKTOP WIDE LAYOUT FIX
   Prevents the deployed desktop version from looking overly
   narrow/centered. The original structure is preserved; this
   only restores a fuller desktop scale and wider content area.
========================================================= */
@media (min-width: 1101px) {
    .container {
        width: min(1400px, calc(100% - 64px));
    }

    /* Keep the header stretched across the viewport while giving
       the actual page content more horizontal breathing room. */
    .hero-grid {
        grid-template-columns: minmax(0, 0.98fr) minmax(620px, 1.02fr);
        gap: 54px;
        padding: 58px 0 70px;
    }

    .hero-copy {
        padding-top: 48px;
    }

    .eyebrow {
        padding: 9px 14px;
        font-size: 10px;
    }

    .hero h1 {
        margin: 23px 0 20px;
        max-width: 700px;
        font-size: clamp(54px, 4.25vw, 72px);
        line-height: 1.02;
    }

    .hero-copy > p {
        max-width: 650px;
        font-size: 15px;
        line-height: 1.65;
    }

    .hero-tourist-note {
        max-width: 650px;
        margin-top: 19px;
        padding: 13px 16px;
        font-size: 11px;
    }

    .hero-buttons {
        gap: 12px;
        margin: 23px 0 18px;
    }

    .trust {
        gap: 8px;
    }

    .trust span {
        padding: 7px 10px;
        font-size: 10px;
    }

    .hero-showcase {
        grid-template-columns: 155px 1fr;
        min-height: 170px;
        margin-top: 23px;
        border-radius: 18px;
    }

    .hero-showcase-image {
        min-height: 225px;
    }

    .hero-showcase-content {
        padding: 20px 23px;
    }

    .hero-showcase-content > span {
        font-size: 9px;
    }

    .hero-showcase-content strong {
        max-width: 390px;
        font-size: 22px;
    }

    .hero-showcase-content p {
        max-width: 420px;
        font-size: 10px;
    }

    .booking {
        padding: 27px;
        border-radius: 22px;
        box-shadow: 0 28px 72px rgba(0,0,0,.32);
    }

    .book-head {
        margin-bottom: 19px;
    }

    .book-head > span,
    .book-head > b {
        font-size: 9px;
    }

    .book-head > b {
        padding: 6px 10px;
    }

    .book-head h2 {
        margin: 5px 0;
        font-size: 30px;
    }

    .book-head p {
        font-size: 10px;
    }

    .form-grid {
        gap: 12px;
    }

    .form-grid label,
    .baby-seat-select {
        font-size: 9px;
    }

    .form-grid input,
    .form-grid select,
    .form-grid textarea,
    .baby-seat-select select {
        margin-top: 4px;
        padding: 11px;
        border-radius: 9px;
        font-size: 11px;
    }

    .form-section-title {
        gap: 9px;
        padding-top: 13px;
    }

    .location-icon {
        width: 28px;
        height: 28px;
    }

    /* Larger desktop section typography/content widths below the hero. */
    .section {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .section h2 {
        font-size: clamp(38px, 3.2vw, 54px);
    }
}


/* =========================================================
   FINAL BALANCED RESPONSIVE POLISH
   Desktop: wider than the original compact version, but with
   intentional side margins so the layout does not look stretched.
   Phone: leaves the existing mobile design untouched.
========================================================= */
@media (min-width: 1101px) {
    .container {
        width: min(1320px, calc(100% - 72px));
        margin-left: auto;
        margin-right: auto;
    }

    .site-header .nav {
        width: min(1320px, calc(100% - 72px));
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-grid {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
        gap: 48px;
        padding: 54px 0 64px;
        align-items: start;
    }

    .hero-copy {
        padding-top: 42px;
        min-width: 0;
    }

    .hero h1 {
        max-width: 620px;
        margin: 18px 0 18px;
        font-size: clamp(52px, 4.1vw, 66px);
        line-height: 1.03;
        letter-spacing: -.025em;
    }

    .hero-copy > p,
    .hero-tourist-note {
        max-width: 600px;
    }

    .hero-showcase {
        grid-template-columns: 150px minmax(0, 1fr);
        min-height: 160px;
        margin-top: 21px;
    }

    .hero-showcase-image {
        min-height: 205px;
    }

    .booking {
        width: 100%;
        max-width: none;
        padding: 25px;
        border-radius: 22px;
    }

    .book-head h2 {
        font-size: 30px;
    }

    .section {
        padding: 76px 0;
    }

    .head,
    .center {
        margin-bottom: 34px;
    }

    .service-grid,
    .vehicle-grid,
    .experience-grid {
        gap: 20px;
    }

    .service-grid article,
    .vehicle-card {
        padding: 24px;
    }

    .excursion-section {
        padding: 72px 0 60px;
    }

    .excursion-slide {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 52px;
    }

    .excursion-photo {
        height: 440px;
    }

    .why-grid {
        gap: 64px;
    }
}

/* Large screens: avoid oversized empty margins while preserving a calm edge. */
@media (min-width: 1500px) {
    .container,
    .site-header .nav {
        width: min(1360px, calc(100% - 96px));
        max-width: 1360px;
    }
}

/* Tablet: maintain comfortable gutters and prevent squeezed navigation/content. */
@media (min-width: 561px) and (max-width: 1100px) {
    .container {
        width: calc(100% - 40px);
    }

    .hero-grid {
        padding-top: 42px;
        padding-bottom: 48px;
    }
}

/* Phone safety: preserve the earlier mobile layout and prevent horizontal overflow. */
@media (max-width: 560px) {
    .container {
        width: calc(100% - 20px);
    }

    .hero-grid,
    .service-grid,
    .vehicle-grid,
    .experience-grid,
    .why-grid,
    .excursion-slide {
        width: 100%;
        max-width: 100%;
    }

    .booking,
    .hero-showcase,
    .experience-grid article,
    .vehicle-card,
    .service-grid article {
        max-width: 100%;
    }

    img,
    input,
    select,
    textarea,
    button {
        max-width: 100%;
    }
}

/* =========================================================
   FINAL DESKTOP BALANCE
   Keeps the site wide with calm side margins and makes the
   booking card compact enough to sit comfortably in the first
   desktop viewport. Mobile rules below remain unchanged.
========================================================= */
@media (min-width: 1101px) {
    .container,
    .site-header .nav {
        width: min(1340px, calc(100% - 120px));
        max-width: 1340px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero {
        min-height: calc(100vh - 99px);
    }

    .hero-grid {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        gap: 42px;
        padding: 30px 0 34px;
        align-items: start;
    }

    .hero-copy {
        padding-top: 30px;
    }

    .hero h1 {
        margin: 16px 0 14px;
        font-size: clamp(50px, 3.7vw, 62px);
    }

    .hero-copy > p {
        font-size: 14px;
        line-height: 1.5;
    }

    .hero-tourist-note {
        margin-top: 14px;
        padding: 10px 13px;
        font-size: 10px;
    }

    .hero-buttons {
        margin: 17px 0 13px;
    }

    .hero-showcase {
        grid-template-columns: 135px minmax(0, 1fr);
        min-height: 145px;
        margin-top: 17px;
    }

    .hero-showcase-image {
        min-height: 185px;
    }

    .hero-showcase-content {
        padding: 16px 18px;
    }

    .hero-showcase-content strong {
        font-size: 20px;
    }

    /* Compact the booking card vertically without changing its structure. */
    .booking {
        padding: 18px 20px;
        border-radius: 20px;
        box-shadow: 0 20px 52px rgba(0,0,0,.28);
    }

    .book-head {
        margin-bottom: 10px;
    }

    .book-head > span,
    .book-head > b {
        font-size: 8px;
    }

    .book-head > b {
        padding: 5px 8px;
    }

    .book-head h2 {
        margin: 3px 0 2px;
        font-size: 27px;
    }

    .book-head p {
        font-size: 9px;
    }

    .form-grid {
        gap: 7px 9px;
    }

    .form-grid label,
    .baby-seat-select {
        font-size: 8px;
    }

    .form-grid input,
    .form-grid select,
    .form-grid textarea,
    .baby-seat-select select {
        margin-top: 3px;
        padding: 8px 9px;
        min-height: 34px;
        border-radius: 8px;
        font-size: 10px;
    }

    .form-grid textarea {
        min-height: 58px;
    }

    .form-section-title {
        gap: 8px;
        padding-top: 8px;
    }

    .location-icon {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
    }

    .form-section-title strong {
        font-size: 11px;
    }

    .form-section-title small {
        font-size: 8px;
    }

    .baby-seat-box {
        margin-top: 8px;
        padding: 9px 10px;
        border-radius: 10px;
    }

    .baby-seat-heading {
        gap: 7px;
        margin-bottom: 6px;
    }

    .baby-seat-heading > span {
        font-size: 16px;
    }

    .baby-seat-heading strong {
        font-size: 10px;
    }

    .baby-seat-heading small {
        font-size: 8px;
    }

    .full-btn {
        min-height: 39px;
        margin-top: 9px;
    }

    .note {
        margin-top: 5px;
        font-size: 8px;
    }
}

/* Extra-wide monitors: retain the same visual rhythm instead of stretching edge-to-edge. */
@media (min-width: 1500px) {
    .container,
    .site-header .nav {
        width: min(1340px, calc(100% - 140px));
        max-width: 1340px;
    }
}

/* Phone: do not inherit any desktop compaction; keep comfortable touch targets. */
@media (max-width: 560px) {
    .container,
    .site-header .nav {
        width: calc(100% - 20px);
        max-width: none;
    }

    .hero {
        min-height: 0;
    }

    .booking {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .form-grid input,
    .form-grid select,
    .form-grid textarea,
    .baby-seat-select select {
        min-height: 42px;
    }
}