/* =========================================================
   ISLANDS WONDER
   WATER ACTIVITY DESIGN SYSTEM
========================================================= */

:root {

    /* =========================
       OCEAN PALETTE
    ========================= */

    --ocean-deep: #073B4C;
    --ocean-dark: #062F3D;
    --ocean: #0B6E8E;
    --ocean-light: #2A9DAD;

    /* =========================
       LIGHT / NATURAL TONES
    ========================= */

    --sea-mist: #F1F8F8;
    --sea-foam: #E7F3F4;
    --sand: #F5EFE3;
    --white: #FFFFFF;

    /* =========================
       TEXT
    ========================= */

    --text-primary: #16323F;
    --text-secondary: #58717C;
    --text-muted: #82959C;
    --text-light: #FFFFFF;

    /* =========================
       ACCENT
    ========================= */

    --coral: #E88968;
    --coral-dark: #D87352;

    /* =========================
       BORDERS
    ========================= */

    --border-light: #E1ECEE;
    --border-medium: #CEDFE2;

    /* =========================
       SURFACES
    ========================= */

    --surface: #FFFFFF;
    --surface-soft: #F8FBFB;

    /* =========================
       EFFECTS
    ========================= */

    --shadow-sm:
        0 4px 18px rgba(7, 59, 76, 0.06);

    --shadow-md:
        0 10px 35px rgba(7, 59, 76, 0.10);

    --shadow-lg:
        0 18px 50px rgba(7, 59, 76, 0.14);

    /* =========================
       RADIUS
    ========================= */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* =========================
       TRANSITIONS
    ========================= */

    --transition-fast: 180ms ease;
    --transition: 280ms ease;
    --transition-slow: 450ms ease;

    /* =========================
       LAYOUT
    ========================= */

    --container-width: 1200px;

}


/* ========================================
   GLOBAL
======================================== */


html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        "Inter",
        "Manrope",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 16px;
    line-height: 1.6;

    color: var(--text-primary);
    background: var(--white);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    font-family: "Poppins", "Segoe UI", Arial, sans-serif;

    font-weight: 600;

    color: var(--ocean-deep);

    line-height: 1.15;
}

p {
    color: var(--text-secondary);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}


.container {
    width: min(
        calc(100% - 40px),
        var(--container-width)
    );

    margin-inline: auto;
}

.section {
    padding: 90px 0;
}

.section-heading {
    max-width: 650px;
    margin-bottom: 50px;
}

.section-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.section-heading h2 {
    font-size: 42px;
    line-height: 1.15;
    margin-bottom: 15px;
}

.section-heading p {
    color: #607d8b;
}


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

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

    min-height: 46px;

    padding: 0 22px;

    border: 1px solid transparent;
    border-radius: var(--radius-sm);

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}

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

.btn-primary {
    background: var(--ocean-deep);
    color: var(--white);

    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: var(--ocean);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--ocean-light);
    color: var(--white);
}

.btn-secondary:hover {
    background: var(--ocean);
}

.btn-accent {
    background: var(--coral);
    color: var(--white);
}

.btn-accent:hover {
    background: var(--coral-dark);
}

.btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.75);
    color: var(--white);
}

.btn-outline:hover {
    background: var(--white);
    color: var(--ocean-deep);
}


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

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #edf2f7;
    box-shadow: 0 1px 0 rgba(6, 40, 61, 0.03);
}

.navbar {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    display: block;
    max-height: 50px;
    width: auto;
}

.logo-name {
    font-size: 20px;
    font-weight: 700;
}

.logo span {
    color: #087ea4;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 21px;
}

.main-nav a {
    position: relative;
    font-size: 14px;
    font-weight: 500;
    color: #486581;
    white-space: nowrap;
    transition: 0.2s ease;
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: #087ea4;
    transition: width 0.25s ease;
}

.main-nav a:hover {
    color: #087ea4;
}

.main-nav a:hover::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.login-link {
    font-size: 14px;
    font-weight: 600;
    color: #334e68;
}

.mobile-menu-btn {
    display: none;
    border: none;
    background: transparent;
    font-size: 28px;
    cursor: pointer;
}

@media (max-width: 600px) {

    .navbar {
        min-height: 68px;
        gap: 15px;
    }

    .logo {
        min-width: 0;
        max-width: calc(100% - 55px);
    }

    .logo img {
        max-height: 42px;
        width: auto;
    }

    .logo-name {
        font-size: 18px;
        white-space: nowrap;
    }

    .main-nav,
    .nav-actions {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        flex-shrink: 0;
        color: #073b4c;
    }
}

@media (max-width: 600px) {

    .main-nav.mobile-open {
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        z-index: 999;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        padding: 12px 20px 20px;

        background: #ffffff;
        border-top: 1px solid #edf2f7;
        border-bottom: 1px solid #edf2f7;
        box-shadow: 0 8px 20px rgba(6, 40, 61, 0.08);
    }

    .main-nav.mobile-open a {
        display: block;
        padding: 13px 4px;
        font-size: 15px;
        color: #334e68;
    }

    .main-nav.mobile-open a::after {
        display: none;
    }

    .nav-actions.mobile-open {
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        z-index: 1000;

        display: flex;
        flex-direction: column;
        gap: 10px;

        padding: 0 20px 20px;
        background: #ffffff;
    }
}

@media (max-width: 600px) {

    .main-nav.active {
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        padding: 10px 20px 20px;

        background: #ffffff;
        border-top: 1px solid #edf2f7;
        border-bottom: 1px solid #edf2f7;
        box-shadow: 0 10px 25px rgba(6, 40, 61, 0.08);

        z-index: 999;
    }

    .main-nav.active a {
        display: block;
        padding: 13px 4px;
        font-size: 15px;
    }

    .main-nav.active a::after {
        display: none;
    }
}

@media (max-width: 1050px) and (min-width: 601px) {

    .navbar {
        min-height: 70px;
    }

    .main-nav,
    .nav-actions {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: none;
        background: transparent;
        color: #073b4c;
        font-size: 28px;
        cursor: pointer;
        flex-shrink: 0;
    }

}

@media (max-width: 1050px) and (min-width: 601px) {

    .main-nav.active {
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        padding: 10px 30px 20px;

        background: #ffffff;
        border-top: 1px solid #edf2f7;
        border-bottom: 1px solid #edf2f7;
        box-shadow: 0 10px 25px rgba(6, 40, 61, 0.08);

        z-index: 999;
    }

    .main-nav.active a {
        display: block;
        padding: 13px 4px;
        font-size: 15px;
    }

    .main-nav.active a::after {
        display: none;
    }

}

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

@media (max-width: 1050px) {

    .main-nav.active .mobile-nav-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;
        padding-top: 15px;
        border-top: 1px solid #edf2f7;
    }

    .mobile-login-link,
    .mobile-book-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 46px;
        box-sizing: border-box;
        border-radius: 6px;
    }

    .mobile-login-link {
        color: #334e68 !important;
        background: #f4f8f9;
    }

    .mobile-book-btn {
        color: #ffffff !important;
        background: #073b4c;
        font-weight: 600;
    }

}


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

.hero {
    position: relative;
    min-height: 650px;
    overflow: visible;

    background: #062d3a;
    color: #fff;
}


/* -----------------------------------------
   BACKGROUND
----------------------------------------- */

.hero-background {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 29, 40, 0.72) 0%,
            rgba(3, 29, 40, 0.48) 35%,
            rgba(3, 29, 40, 0.16) 68%,
            rgba(3, 29, 40, 0.02) 100%
        ),
        url("../images/hero.jpg") center center / cover no-repeat;

    z-index: 0;
}

.hero-background::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        to bottom,
        rgba(3, 29, 40, 0.08) 0%,
        transparent 45%,
        rgba(3, 29, 40, 0.30) 100%
    );
}


/* -----------------------------------------
   HERO CONTENT
----------------------------------------- */

.hero-content {
    position: relative;
    z-index: 2;

    min-height: 560px;

    display: flex;
    align-items: center;
    justify-content: space-between;
	
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);

    padding-top: 45px;
    padding-bottom: 115px;
}


/* -----------------------------------------
   MAIN CONTENT
----------------------------------------- */

.hero-main {
    max-width: 720px;
}


.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 27px;

    color: rgba(255,255,255,0.78);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.20em;
}


.hero-eyebrow span {
    display: block;

    width: 38px;
    height: 1px;

    background: rgba(255,255,255,0.65);
}


.hero h1 {
    margin: 0;

    max-width: 700px;

    color: #fff;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(58px, 6.5vw, 88px);
    line-height: 0.92;

    font-weight: 500;

    letter-spacing: -0.055em;
}


.hero h1 em {
    display: block;

    color: #c9e7e7;

    font-style: italic;
    font-weight: 400;
}


.hero p {
    max-width: 470px;
    margin: 26px 0 27px;

    color: rgba(255,255,255,0.86);

    font-size: 15px;
    line-height: 1.65;
}


/* -----------------------------------------
   HERO ACTIONS
----------------------------------------- */

.hero-actions {
    display: flex;
    align-items: center;
    gap: 25px;
}


.hero-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 18px;

    min-height: 50px;

    padding: 0 20px 0 23px;

    border-radius: 7px;

    background: #fff;
    color: #073b4c;

    border: 1px solid #fff;

    box-shadow: none;
}


.hero-actions .btn-primary span {
    font-size: 17px;
}


.hero-actions .btn-primary:hover {
    background: #edf7f7;
    color: #073b4c;

    transform: translateY(-2px);
}


.hero-text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding-bottom: 5px;

    color: #fff;

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

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition:
        color 180ms ease,
        border-color 180ms ease;
}


.hero-text-link span {
    transition: transform 180ms ease;
}


.hero-text-link:hover {
    color: #d9eeee;
    border-color: #d9eeee;
}


.hero-text-link:hover span {
    transform: translateX(4px);
}


/* -----------------------------------------
   HERO SIDE
----------------------------------------- */

.hero-side {
    align-self: center;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 18px;

    margin-right: 15px;
}

.hero-side-mark {
    display: flex;
    align-items: center;
    gap: 5px;
}

.hero-side-mark span {
    display: block;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: rgba(255,255,255,0.65);
}

.hero-side-mark span:nth-child(2) {
    width: 28px;
    border-radius: 2px;
}

.hero-side p {
    margin: 0;

    color: rgba(255,255,255,0.55);

    font-size: 9px;
    line-height: 1.7;
    font-weight: 700;

    letter-spacing: 0.16em;
    text-align: right;
}


/* =========================================================
   HERO SEARCH PANEL
========================================================= */

.hero-search {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -42px;
    z-index: 5;
}

.search-box {
    display: grid;
    grid-template-columns: 205px 1fr;
    align-items: stretch;

    min-height: 108px;

    padding: 12px;

    background: rgba(255, 255, 255, 0.98);

    border: 1px solid rgba(7, 59, 76, 0.08);
    border-radius: 12px;

    box-shadow:
        0 18px 45px rgba(3, 35, 48, 0.13);
}


/* -----------------------------------------
   SEARCH INTRO
----------------------------------------- */

.search-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 10px 25px;

    border-right: 1px solid #e4ecee;
}

.search-intro span {
    margin-bottom: 7px;

    color: #2a9dad;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.search-intro strong {
    color: #073b4c;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
}


/* -----------------------------------------
   SEARCH FIELDS
----------------------------------------- */

.search-fields {
    display: grid;

    grid-template-columns:
        1fr
        1.15fr
        0.8fr
        125px;

    align-items: center;
}

.search-field {
    min-width: 0;

    padding: 8px 20px;

    border-right: 1px solid #e4ecee;
}

.search-field label {
    display: block;

    margin-bottom: 6px;

    color: #819196;

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

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.search-field select,
.search-field input {
    width: 100%;
    height: 34px;

    padding: 0;

    border: 0;
    outline: none;

    background: transparent;

    color: #17343d;

    font-family: inherit;
    font-size: 13px;
    font-weight: 550;
}

.search-field select {
    cursor: pointer;
}

.search-field input {
    cursor: pointer;
}

.search-field select:focus,
.search-field input:focus {
    border: 0;
    outline: none;
    box-shadow: none;
}


/* -----------------------------------------
   SEARCH BUTTON
----------------------------------------- */

.search-btn {
    align-self: center;

    height: 46px;

    margin: 0 6px 0 16px;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: 0;
    border-radius: 7px;

    background: #073b4c;
    color: #ffffff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 180ms ease,
        transform 180ms ease;
}

.search-btn:hover {
    background: #0a5366;
    transform: translateY(-1px);
}

.search-btn span:last-child {
    font-size: 16px;
}


/* -----------------------------------------
   TABLET
----------------------------------------- */

@media (max-width: 1000px) {

    .hero-search {
        bottom: -55px;
    }

    .search-box {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .search-intro {
        padding: 0 0 16px;

        border-right: 0;
        border-bottom: 1px solid #e4ecee;
    }

    .search-fields {
        padding-top: 12px;
    }
}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 700px) {

    .hero-search {
        bottom: -205px;
    }

    .search-box {
        padding: 18px;
        border-radius: 10px;
    }

    .search-fields {
        grid-template-columns: 1fr;
    }

    .search-field {
        padding: 13px 4px;

        border-right: 0;
        border-bottom: 1px solid #e4ecee;
    }

    .search-field:last-of-type {
        border-bottom: 0;
    }

    .search-btn {
        width: 100%;

        height: 46px;

        margin: 14px 0 0;
    }
}


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

@media (max-width: 1000px) {

    .hero {
        min-height: 820px;
    }

    .hero-content {
        min-height: 700px;
    }

    .hero-side {
        display: none;
    }

}


@media (max-width: 700px) {

    .hero {
        min-height: 900px;
    }

    .hero-background {
        background:
            linear-gradient(
                180deg,
                rgba(3,29,40,0.78) 0%,
                rgba(3,29,40,0.40) 52%,
                rgba(3,29,40,0.72) 100%
            ),
            url("../images/hero.jpg") 62% center / cover no-repeat;
    }

    .hero-content {
        min-height: 700px;

        align-items: flex-start;

        padding-top: 95px;
        padding-bottom: 260px;
    }

    .hero h1 {
        font-size: clamp(64px, 18vw, 86px);
    }

    .hero p {
        max-width: 430px;

        margin-top: 28px;

        font-size: 15px;
        line-height: 1.65;
    }

    .hero-actions {
        flex-wrap: wrap;
        gap: 18px;
    }

}

@media (max-width: 600px) {
    .hero-actions .btn-primary {
        width: fit-content;
        max-width: 100%;
        box-sizing: border-box;
        white-space: nowrap;
    }
}

@media (max-width: 420px) {

    .hero {
        min-height: 930px;
    }

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

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

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

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-actions .btn-primary {
        width: 100%;
    }

}



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

.home-stats {
    position: relative;

    padding: 105px 0 58px;

    background: #e8f5f5;

    overflow: hidden;
}

.home-stats::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -300px;
    top: -280px;

    border: 90px solid rgba(42, 157, 173, 0.07);

    border-radius: 50%;
}

.home-stats::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -190px;
    bottom: -190px;

    border: 55px solid rgba(42, 157, 173, 0.06);

    border-radius: 50%;
}


/* -----------------------------------------
   MAIN
----------------------------------------- */

.stats-promise {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns: 0.82fr 1.48fr;
    gap: 55px;

    align-items: center;
}


/* -----------------------------------------
   LEFT
----------------------------------------- */

.stats-promise-heading {
    max-width: 420px;
}

.stats-promise-heading .section-label {
    display: block;

    margin-bottom: 10px;
}

.stats-promise-heading h2 {
    margin: 0 0 13px;

    color: #073b4c;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 40px;
    line-height: 1.05;

    font-weight: 600;

    letter-spacing: -0.025em;
}

.stats-promise-heading p {
    max-width: 370px;

    margin: 0;

    color: #5f7880;

    font-size: 14px;
    line-height: 1.6;
}


/* -----------------------------------------
   STATS
----------------------------------------- */

.stats-promise-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}


/* -----------------------------------------
   STAT CARD
----------------------------------------- */

.stats-promise-item {
    position: relative;

    height: 150px;
    min-height: 150px;
    box-sizing: border-box;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 20px 22px;

    background: rgba(255, 255, 255, 0.76);

    border: 1px solid rgba(7, 59, 76, 0.06);

    border-radius: 12px;

    box-shadow:
        0 6px 22px rgba(7, 59, 76, 0.035);

    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.stats-promise-item:hover {
    transform: translateY(-3px);

    background: rgba(255, 255, 255, 0.95);

    box-shadow:
        0 10px 28px rgba(7, 59, 76, 0.07);
}

.stats-icon {
    flex: 0 0 64px;

    width: 64px;
    height: 64px;

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

    border-radius: 50%;

    background: rgba(226, 244, 246, 0.9);
}

.stats-icon svg {
    width: 31px;
    height: 31px;
    fill: none;

    stroke: #087d96;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.stats-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.stats-content strong {
    display: block;

    margin: 0 0 2px;

    color: #08758b;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 40px;
    line-height: 1;

    font-weight: 600;

    letter-spacing: -0.03em;
}


.stats-title {
    display: block;

    margin-top: 5px;

    color: #073b4c;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 22px;
    line-height: 1.1;

    font-weight: 600;
}


.stats-description {
    display: block;

    margin-top: 6px;

    color: #5f7880;

    font-size: 15px;
    line-height: 1.35;

    font-weight: 400;
}


.stats-feature-title {
    color: #073b4c !important;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif !important;

    font-size: 22px !important;
    line-height: 1.1 !important;

    font-weight: 600 !important;

    letter-spacing: -0.02em !important;
}

.stats-title,
.stats-feature-title {
    font-size: 20px !important;
}

.stats-feature-title {
    white-space: nowrap;
}

/* little accent */

.stats-promise-item::after {
    content: "";

    position: absolute;

    top: 18px;
    right: 18px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #72c4c5;
}


/* booking */

.stats-booking strong {
    color: #0b6e8e;

    font-family: inherit;

    font-size: 27px;
}


/* -----------------------------------------
   TABLET
----------------------------------------- */

@media (max-width: 850px) {

    .stats-promise {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .stats-promise-heading {
        max-width: 600px;
    }

}

@media (max-width: 700px) {

    .hero-search {
        bottom: -205px;
    }

    .home-stats {
        padding-top: 320px;
    }

}

/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 600px) {

    .home-stats {
        padding: 48px 0;
        padding-top: 225px;
    }

    .stats-promise {
        gap: 28px;
    }

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

    .stats-promise-items {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .stats-promise-item {
        min-height: 105px;
        padding: 20px;
        gap: 18px;
    }

    .stats-icon {
        flex: 0 0 60px;

        width: 60px;
        height: 60px;
    }

    .stats-icon svg {
        width: 29px;
        height: 29px;
    }

    .stats-content strong {
        font-size: 37px;
    }

    .stats-title,
    .stats-feature-title {
        font-size: 20px !important;
    }

    .stats-description {
        font-size: 14px;
    }
}


/* =========================================================
   POPULAR ACTIVITIES
========================================================= */

.popular-activities {
    padding-top: 85px;
    padding-bottom: 95px;

    background: #ffffff;
}


/* -----------------------------------------
   SECTION HEADING
----------------------------------------- */

.popular-activities .section-heading {
    max-width: 650px;

    margin-bottom: 42px;
}

.popular-activities .section-heading h2 {
    margin-top: 9px;
    margin-bottom: 12px;

    color: #073b4c;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 42px;
    line-height: 1.05;

    font-weight: 600;

    letter-spacing: -0.025em;
}

.popular-activities .section-heading p {
    max-width: 520px;

    margin: 0;

    color: #6b8086;

    font-size: 14px;
    line-height: 1.7;
}


/* -----------------------------------------
   GRID
----------------------------------------- */

.activity-grid {
    display: grid;

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

    gap: 28px;
}


/* -----------------------------------------
   CARD
----------------------------------------- */

.activity-card {
    min-width: 0;

    background: #ffffff;

    border: 1px solid #e1ebed;

    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 5px 18px rgba(6, 45, 58, 0.035);

    transition:
        transform 250ms ease,
        box-shadow 250ms ease,
        border-color 250ms ease;
}

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

    border-color: #cbdfe3;

    box-shadow:
        0 16px 35px rgba(6, 45, 58, 0.10);
}


/* -----------------------------------------
   IMAGE
----------------------------------------- */

.activity-card-image {
    position: relative;

    display: block;

    height: 265px;

    overflow: hidden;

    background: #dfeeee;

    text-decoration: none;
}


.activity-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 600ms cubic-bezier(.2,.7,.2,1);
}


.activity-card:hover .activity-card-image img {
    transform: scale(1.055);
}


/* -----------------------------------------
   IMAGE OVERLAY
----------------------------------------- */

.activity-image-overlay {
    position: absolute;
	
	pointer-events: none;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(3, 35, 48, 0.55),
            transparent 48%
        );

    opacity: 0.65;

    transition: opacity 250ms ease;
}

.activity-card:hover .activity-image-overlay {
    opacity: 0.85;
}


/* -----------------------------------------
   VIEW EXPERIENCE
----------------------------------------- */

.activity-card-view {
    position: absolute;

    right: 18px;
    bottom: 17px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #ffffff;

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

    letter-spacing: 0.08em;
    text-transform: uppercase;

    opacity: 0;

    transform: translateY(6px);

    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.activity-card-view span {
    font-size: 15px;
}

.activity-card:hover .activity-card-view {
    opacity: 1;

    transform: translateY(0);
}


/* -----------------------------------------
   PLACEHOLDER
----------------------------------------- */

.activity-card-placeholder {
    width: 100%;
    height: 100%;

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

    background:
        linear-gradient(
            135deg,
            #dceff0,
            #b9dfe1
        );

    color: #0a5366;

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

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* -----------------------------------------
   CONTENT
----------------------------------------- */

.activity-card-content {
    padding: 21px 22px 20px;
}


/* -----------------------------------------
   LOCATION
----------------------------------------- */

.activity-location {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 10px;

    color: #0b8198;

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

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.location-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #45afb5;
}


/* -----------------------------------------
   TITLE
----------------------------------------- */

.activity-card-content h3 {
    margin: 0 0 12px;
    color: #073b4c;
    font-family: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 25px;
    line-height: 1.05;
    font-weight: 650;
    letter-spacing: -0.015em;
}


/* -----------------------------------------
   DESCRIPTION
----------------------------------------- */

.activity-card-content p {
    display: -webkit-box;

    margin: 0;

    color: #647b82;

    font-size: 12.5px;
    line-height: 1.65;

    letter-spacing: 0.005em;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* -----------------------------------------
   FOOTER
----------------------------------------- */

.activity-card-footer {
    display: flex;

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

    gap: 15px;

    margin-top: 19px;
    padding-top: 15px;

    border-top: 1px solid #e5edef;
}


.activity-island {
    color: #80949a;

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

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.activity-card-link {
    display: inline-flex;

    align-items: center;
    gap: 8px;

    color: #08758b;

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

    letter-spacing: 0.08em;

    text-transform: uppercase;

    text-decoration: none;
}

.activity-card-link span {
    font-size: 16px;

    transition:
        transform 180ms ease;
}

.activity-card-link:hover {
    color: #073b4c;
}

.activity-card-link:hover span {
    transform: translateX(5px);
}


/* -----------------------------------------
   SECTION ACTION
----------------------------------------- */

.popular-activities .section-action {
    margin-top: 42px;

    text-align: center;
}


/* -----------------------------------------
   TABLET
----------------------------------------- */

@media (max-width: 900px) {

    .activity-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 22px;
    }

}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 600px) {

    .popular-activities {
        padding-top: 65px;
        padding-bottom: 70px;
    }

    .popular-activities .section-heading {
        margin-bottom: 30px;
    }

    .popular-activities .section-heading h2 {
        font-size: 37px;
    }

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

        gap: 20px;
    }

    .activity-card-image {
        height: 240px;
    }

    .activity-card-content {
        padding: 19px 20px;
    }

}


/* =========================================
   GALLERY PREVIEW
========================================= */

.home-gallery {
    background: #ffffff;
}

.home-gallery-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    max-width: none;
}

.home-gallery-heading p {
    max-width: 320px;
    margin-bottom: 0;
    text-align: right;
}

.home-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 160px;
    gap: 16px;
}

.home-gallery-item {
    position: relative;
    display: block;
    grid-column: span 1;
    grid-row: span 1;
    border-radius: 14px;
    overflow: hidden;
    background: #eef6f8;
}

.home-gallery-item-large {
    grid-column: span 2;
    grid-row: span 2;
}

.home-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.home-gallery-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.home-gallery-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;

    display: flex;
    flex-direction: column;
    gap: 2px;

    background: linear-gradient(
        to top,
        rgba(3, 27, 46, 0.85),
        rgba(3, 27, 46, 0.05) 70%
    );

    color: #ffffff;
}

.home-gallery-overlay span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
}

.home-gallery-overlay strong {
    font-size: 16px;
}

@media (max-width: 900px) {

    .home-gallery-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-gallery-heading p {
        max-width: none;
        text-align: left;
    }

    .home-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
    }

    .home-gallery-item-large {
        grid-column: span 2;
        grid-row: span 1;
    }

}

@media (max-width: 600px) {

    .home-gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
    }

    .home-gallery-item-large {
        grid-column: span 1;
    }

}

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

.why-choose-us {
    position: relative;
    padding: 95px 0;
    background: #eef8f8;
    overflow: hidden;
}

.why-choose-us::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -300px;
    right: -180px;
    border-radius: 50%;
    border: 90px solid rgba(42, 157, 173, 0.045);
    pointer-events: none;
}

.why-choose-us .container {
    position: relative;
    z-index: 1;
}

.why-choose-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 75px;
    align-items: center;
}


/* ----------------------------------------
   CONTENT
---------------------------------------- */

.why-choose-content {
    max-width: 560px;
}

.why-choose-content .section-label {
    display: block;
    margin-bottom: 12px;
}

.why-choose-content h2 {
    margin: 0 0 18px;
    color: #073b4c;
    font-family: "Fraunces", "Cormorant Garamond", Georgia, serif;
    font-size: 48px;
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: -0.035em;
}

.why-choose-content > p {
    max-width: 500px;
    margin: 0 0 38px;
    color: #647b82;
    font-size: 14px;
    line-height: 1.75;
}


/* ----------------------------------------
   FEATURES
---------------------------------------- */

.why-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 32px;
}

.why-feature {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 13px;
    padding-top: 18px;
    border-top: 1px solid #d8e6e8;
}

.why-feature-number {
    padding-top: 2px;
    color: #2a9dad;
    font-family: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 15px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.why-feature h3 {
    margin: 0 0 6px;
    color: #073b4c;
    font-family: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 21px;
    line-height: 1.05;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.why-feature p {
    margin: 0;
    color: #71848a;
    font-size: 12px;
    line-height: 1.6;
}


/* ----------------------------------------
   IMAGE
---------------------------------------- */

.why-choose-image {
    position: relative;
    min-height: 545px;
    overflow: hidden;
    border-radius: 14px;
    background: #dceced;
}

.why-choose-image img {
    width: 100%;
    height: 545px;
    display: block;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
}

.why-choose-image:hover img {
    transform: scale(1.035);
}


/* ----------------------------------------
   IMAGE CAPTION
---------------------------------------- */

.why-image-caption {
    position: absolute;
    left: 24px;
    bottom: 23px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 17px;
    background: rgba(3, 35, 48, 0.78);
    border-left: 3px solid #72c4c5;
    backdrop-filter: blur(5px);
}

.why-image-caption span {
    color: rgba(255,255,255,.68);
    font-size: 8px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .15em;
}

.why-image-caption strong {
    color: #fff;
    font-family: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 25px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .01em;
}


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

@media (max-width: 900px) {

    .why-choose-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .why-choose-content {
        max-width: 700px;
    }

    .why-choose-image {
        min-height: 460px;
    }

    .why-choose-image img {
        height: 460px;
    }

}


@media (max-width: 600px) {

    .why-choose-us {
        padding: 70px 0;
    }

    .why-choose-content h2 {
        font-size: 39px;
    }

    .why-choose-content > p {
        margin-bottom: 30px;
    }

    .why-features {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .why-feature {
        padding-top: 15px;
    }

    .why-choose-image {
        min-height: 390px;
        border-radius: 11px;
    }

    .why-choose-image img {
        height: 390px;
    }

    .why-image-caption {
        left: 16px;
        bottom: 16px;
    }

}

/* ========================================
   TESTIMONIAL CAROUSEL
======================================== */

.testimonials-section {
    position: relative;
    padding: 78px 0;
    background: #eef8f8;
    overflow: hidden;
}

.testimonials-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -290px;
    top: -300px;
    border: 80px solid rgba(42, 157, 173, 0.045);
    border-radius: 50%;
    pointer-events: none;
}

.testimonials-section .container {
    position: relative;
    z-index: 1;
}


/* ----------------------------------------
   HEADER
---------------------------------------- */

.testimonials-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 34px;
}

.testimonials-header h2 {
    margin: 8px 0 0;
    color: #073b4c;
    font-family: "Fraunces", "Cormorant Garamond", Georgia, serif;
    font-size: 42px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.035em;
}

.testimonials-header > p {
    max-width: 410px;
    margin: 0 0 2px;
    color: #647b82;
    font-size: 13px;
    line-height: 1.65;
}


/* ----------------------------------------
   CAROUSEL
---------------------------------------- */

.testimonial-carousel {
    position: relative;
}

.testimonial-slides {
    position: relative;
    height: 390px;
}


/* ----------------------------------------
   SLIDE
---------------------------------------- */

.testimonial-slide {
    display: none;
    grid-template-columns: 42% 58%;
    width: 100%;
    height: 390px;
    min-height: 390px;
    background: #ffffff;
    border: 1px solid rgba(7, 59, 76, 0.07);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(7, 59, 76, 0.045);
}

.testimonial-slide.active {
    display: grid;
}


/* ----------------------------------------
   IMAGE
---------------------------------------- */

.testimonial-slide-image {
    position: relative;
    width: 100%;
    height: 390px;
    overflow: hidden;
    background: #dceff0;
}

.testimonial-slide-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(3, 35, 48, 0.35),
        transparent 45%
    );
    pointer-events: none;
}

.testimonial-slide-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 650ms cubic-bezier(.2, .7, .2, 1);
}

.testimonial-slide:hover .testimonial-slide-image img {
    transform: scale(1.025);
}

.testimonial-image-label {
    position: absolute;
    left: 20px;
    bottom: 17px;
    z-index: 2;
    color: rgba(255, 255, 255, 0.88);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.15em;
}


/* ----------------------------------------
   CONTENT
---------------------------------------- */

.testimonial-slide-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 38px 45px;
    overflow: hidden;
}

.testimonial-review {
    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient: vertical;

    max-width: 530px;
}

.testimonial-review.testimonial-review-long {
    -webkit-line-clamp: 7;
}

.testimonial-story-label {
    display: block;
    flex: 0 0 auto;
    margin-bottom: 17px;
    color: #2a9dad;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.testimonial-slide-content blockquote {
    position: relative;
    max-width: 570px;
    max-height: 225px;
    margin: 0;
    padding-left: 25px;
    overflow: hidden;
    color: #073b4c;
    font-family: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 21px;
    line-height: 1.28;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.testimonial-slide-content blockquote::before {
    content: "“";
    position: absolute;
    left: 0;
    top: -7px;
    color: #72c4c5;
    font-family: Georgia, serif;
    font-size: 32px;
    line-height: 1;
}


/* ----------------------------------------
   AUTHOR
---------------------------------------- */

.testimonial-slide-author {
    display: flex;
    align-items: center;
    margin-top: 22px;
    padding-top: 15px;
    border-top: 1px solid #e0ebed;
}

.testimonial-slide-author strong {
    color: #073b4c;
    font-family: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 17px;
    line-height: 1;
    font-weight: 650;
}


/* ----------------------------------------
   CONTROLS
---------------------------------------- */

.testimonial-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 15px;
}

.testimonial-arrow {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #c9dfe1;
    border-radius: 50%;
    background: transparent;
    color: #073b4c;
    font-family: Arial, sans-serif;
    font-size: 15px;
    cursor: pointer;
    transition:
        background 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.testimonial-arrow:hover {
    background: #073b4c;
    border-color: #073b4c;
    color: #ffffff;
    transform: translateY(-1px);
}

.testimonial-counter {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #073b4c;
    font-family: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.05em;
}

.testimonial-counter-line {
    width: 24px;
    height: 1px;
    background: #9bbabd;
}


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

@media (max-width: 900px) {

    .testimonials-header {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 30px;
    }

    .testimonial-slides {
        height: auto;
    }

    .testimonial-slide {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }

    .testimonial-slide.active {
        display: grid;
    }

    .testimonial-slide-image {
        height: 280px;
    }

    .testimonial-slide-content {
        padding: 32px 36px;
    }

    .testimonial-slide-content blockquote {
        max-height: none;
        font-size: 23px;
    }

    .testimonial-controls {
        justify-content: center;
    }
	
	.testimonial-review.testimonial-review-long {
        -webkit-line-clamp: 6;
    }
}


@media (max-width: 600px) {

    .testimonials-section {
        padding: 65px 0;
    }

    .testimonials-header h2 {
        font-size: 36px;
    }

    .testimonials-header > p {
        font-size: 12px;
    }

    .testimonial-slide {
        border-radius: 10px;
    }

    .testimonial-slide-image {
        height: 235px;
    }

    .testimonial-slide-content {
        padding: 28px 23px;
    }

    .testimonial-story-label {
        margin-bottom: 15px;
    }

    .testimonial-slide-content blockquote {
        padding-left: 22px;
        font-size: 21px;
        line-height: 1.2;
    }

    .testimonial-slide-content blockquote::before {
        top: -6px;
        font-size: 30px;
    }

    .testimonial-slide-author {
        margin-top: 22px;
        padding-top: 14px;
    }

    .testimonial-controls {
        margin-top: 13px;
    }
	
	.testimonial-review {
        max-width: 100%;
    }

    .testimonial-review.testimonial-review-long {
        -webkit-line-clamp: 5;
    }
}

/* ========================================
   TESTIMONIAL READ MORE
======================================== */

.testimonial-read-more {
    display: none;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin-top: 17px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #073b4c;
    font-family: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.01em;
    cursor: pointer;
}

.testimonial-read-more span {
    font-size: 15px;
    transition: transform 180ms ease;
}

.testimonial-read-more:hover {
    color: #0b6e8e;
}

.testimonial-read-more:hover span {
    transform: translateX(4px);
}


/* ========================================
   TESTIMONIAL MODAL
======================================== */

.testimonial-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 25px;
}

.testimonial-modal.active {
    display: flex;
}


/* ----------------------------------------
   BACKDROP
---------------------------------------- */

.testimonial-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(3, 35, 48, 0.68);
    backdrop-filter: blur(5px);
}


/* ----------------------------------------
   MODAL BOX
---------------------------------------- */

.testimonial-modal-box {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: min(680px, 90vh);
    overflow-y: auto;
    padding: 45px 50px;
    background: #ffffff;
    border: 1px solid rgba(7, 59, 76, 0.08);
    border-radius: 14px;
    box-shadow: 0 25px 70px rgba(3, 35, 48, 0.22);
}


/* ----------------------------------------
   CLOSE BUTTON
---------------------------------------- */

.testimonial-modal-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #d6e5e7;
    border-radius: 50%;
    background: transparent;
    color: #073b4c;
    font-family: Arial, sans-serif;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition:
        background 180ms ease,
        color 180ms ease,
        border-color 180ms ease;
}

.testimonial-modal-close:hover {
    background: #073b4c;
    border-color: #073b4c;
    color: #ffffff;
}


/* ----------------------------------------
   MODAL REVIEW
---------------------------------------- */

.testimonial-modal-box .testimonial-story-label {
    margin-bottom: 20px;
}

.testimonial-modal-review {
    color: #23434d;
    font-family: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 500;
}

.testimonial-modal-author {
    margin-top: 25px;
    padding-top: 17px;
    border-top: 1px solid #e0ebed;
}

.testimonial-modal-author strong {
    color: #073b4c;
    font-family: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 17px;
    font-weight: 650;
}


/* ----------------------------------------
   LOCK PAGE WHEN MODAL IS OPEN
---------------------------------------- */

body.testimonial-modal-open {
    overflow: hidden;
}


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

@media (max-width: 600px) {

    .testimonial-modal {
        padding: 15px;
    }

    .testimonial-modal-box {
        max-height: 90vh;
        padding: 35px 25px 30px;
        border-radius: 11px;
    }

    .testimonial-modal-close {
        top: 13px;
        right: 13px;
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .testimonial-modal-review {
        font-size: 18px;
        line-height: 1.48;
    }
	
	.testimonial-read-more {
        margin-top: 14px;
    }

}

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

.final-cta {
    position: relative;
    padding: 82px 0 88px;
    background:
        linear-gradient(
            120deg,
            #073b4c 0%,
            #0a5366 55%,
            #11788a 100%
        );
    color: #ffffff;
    overflow: hidden;
}


/* ----------------------------------------
   SUBTLE OCEAN SHAPES
---------------------------------------- */

.final-cta::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -260px;
    top: -360px;
    border: 85px solid rgba(255,255,255,.055);
    border-radius: 50%;
    pointer-events: none;
}

.final-cta::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    left: -250px;
    bottom: -280px;
    border: 65px solid rgba(255,255,255,.04);
    border-radius: 50%;
    pointer-events: none;
}

.final-cta .container {
    position: relative;
    z-index: 1;
}


/* ----------------------------------------
   CONTENT
---------------------------------------- */

.final-cta-content {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.final-cta .section-label {
    display: block;
    margin-bottom: 13px;
    color: rgba(255,255,255,.72);
}

.final-cta h2 {
    margin: 0 auto 17px;
    max-width: 700px;
    color: #ffffff;
    font-family: "Fraunces", "Cormorant Garamond", Georgia, serif;
    font-size: 52px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.04em;
}

.final-cta p {
    max-width: 570px;
    margin: 0 auto 29px;
    color: rgba(255,255,255,.78);
    font-size: 14px;
    line-height: 1.65;
}


/* ----------------------------------------
   ACTIONS
---------------------------------------- */

.final-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.final-cta-actions .btn {
    min-height: 47px;
    padding: 0 21px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
}

.final-cta-actions .btn-primary {
    background: #ffffff;
    border: 1px solid #ffffff;
    color: #073b4c;
    box-shadow: none;
}

.final-cta-actions .btn-primary:hover {
    background: #edf7f7;
    border-color: #edf7f7;
    color: #073b4c;
    transform: translateY(-2px);
}

.final-cta-actions .btn-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,.5);
    color: #ffffff;
}

.final-cta-actions .btn-outline:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.85);
    color: #ffffff;
    transform: translateY(-2px);
}


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

@media (max-width: 600px) {

    .final-cta {
        padding: 65px 0 70px;
    }

    .final-cta h2 {
        font-size: 39px;
    }

    .final-cta p {
        font-size: 13px;
        margin-bottom: 25px;
    }

    .final-cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .final-cta-actions .btn {
        width: 100%;
        max-width: 230px;
    }

}

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

.site-footer {
    position: relative;

    background: #062f3d;

    color: #ffffff;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


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

.footer-inner {
    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    padding: 58px 0 0;
}


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

.footer-brand {
    max-width: 760px;

    margin-bottom: 42px;
}

.footer-logo {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 14px;
}

.footer-logo img {
    width: auto;

    height: 44px;
}

.footer-logo-text {
    display: flex;

    flex-direction: column;
}

.footer-logo-text strong {
    color: #ffffff;

    font-family:
        "Fraunces",
        Georgia,
        serif;

    font-size: 28px;

    font-weight: 600;

    line-height: 1.05;
}

.footer-logo-text span {
    margin-top: 5px;

    color: #d9b46d;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.14em;

    line-height: 1.3;

    text-transform: uppercase;
}

.footer-description {
    max-width: 720px;

    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 15px;

    line-height: 1.7;
}


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

.footer-columns {
    display: grid;

    grid-template-columns:
        1.15fr
        1fr
        1fr
        1.35fr;

    gap: 44px;

    padding: 34px 0 42px;

    border-top: 1px solid rgba(255, 255, 255, 0.12);
}


/* ========================================
   COLUMN
======================================== */

.footer-column {
    display: flex;

    flex-direction: column;

    gap: 13px;
}

.footer-column h4 {
    margin: 0 0 8px;
	margin-bottom: 9px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 0.07em;

    line-height: 1.3;
}


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

.footer-column > a {
    display: flex;

    align-items: center;

    gap: 9px;

    width: fit-content;

    color: rgba(255, 255, 255, 0.70);

    font-size: 16px;

    font-weight: 400;

    line-height: 1.55;

    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-column > a::before {
    content: "›";

    color: #d9b46d;

    font-size: 18px;

    font-weight: 400;

    line-height: 1;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-column > a:hover {
    color: #ffffff;

    transform: translateX(3px);
}

.footer-column > a:hover::before {
    color: #ffffff;

    transform: translateX(2px);
}


/* ========================================
   CONTACT ITEMS
======================================== */

.footer-contact-item {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 15.5px;

    line-height: 1.6;

    transition: color 0.2s ease;
}

.footer-contact-item:hover {
    color: #ffffff;
}

.footer-address {
    cursor: default;
}


/* ========================================
   CONTACT ICONS
======================================== */

.footer-contact-icon {
    display: flex;

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

    flex: 0 0 32px;

    width: 32px;
    height: 32px;

    margin-top: 0;

    border-radius: 50%;

    background: rgba(217, 180, 109, 0.08);

    border: 1px solid rgba(217, 180, 109, 0.35);

    color: #d9b46d;
}


/* Actual SVG icons */

.footer-contact-icon svg {
    display: block !important;

    width: 16px !important;
    height: 16px !important;

    fill: none !important;

    stroke: #d9b46d !important;

    stroke-width: 1.8 !important;

    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    opacity: 1 !important;
}


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

.footer-bottom-row {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 20px;

    padding: 24px 0 28px;

    border-top: 1px solid rgba(255, 255, 255, 0.12);
}


/* ========================================
   SOCIAL ICONS
======================================== */

.footer-social {
    display: flex;

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

    gap: 10px;
}

.footer-social a {
    display: flex;

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

    width: 40px;
    height: 40px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.20);

    background: rgba(255, 255, 255, 0.04);

    color: #ffffff;

    text-decoration: none;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.footer-social a svg {
    display: block;

    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-social a[aria-label="Facebook"] svg {
    fill: currentColor;
    stroke: none;
}

.footer-social a[aria-label="YouTube"] svg {
    stroke-width: 1.7;
}

.footer-social a[aria-label="YouTube"] svg path:last-child {
    fill: currentColor;
    stroke: none;
}

.footer-social a[aria-label="LinkedIn"] svg circle {
    fill: currentColor;
    stroke: none;
}

.footer-social a:hover {
    background: #d9b46d;

    border-color: #d9b46d;

    color: #062f3d;

    transform: translateY(-3px);
}


/* ========================================
   COPYRIGHT
======================================== */

.footer-bottom {
    color: rgba(255, 255, 255, 0.45);

    font-size: 13.5px;

    line-height: 1.5;

    text-align: center;
}

.footer-bottom p {
    margin: 0;
}


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

.floating-whatsapp,
.back-to-top {
    position: fixed;

    right: 24px;

    z-index: 999;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    box-shadow:
        0 8px 24px rgba(3, 27, 46, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.floating-whatsapp:hover,
.back-to-top:hover {
    transform: translateY(-3px);
}


/* ========================================
   WHATSAPP
======================================== */

.floating-whatsapp {
    bottom: 24px;

    width: 50px;

    height: 50px;

    background: #0f766e;

    color: #ffffff;

    border: 2px solid #ffffff;

    box-shadow:
        0 8px 22px rgba(3, 27, 46, 0.25),
        0 0 0 4px rgba(15, 118, 110, 0.10);
}

.floating-whatsapp:hover {
    background: #0b625c;

    box-shadow:
        0 12px 28px rgba(3, 27, 46, 0.30),
        0 0 0 5px rgba(15, 118, 110, 0.12);
}

.floating-whatsapp svg {
    width: 23px;

    height: 23px;
}


/* ========================================
   BACK TO TOP
======================================== */

.back-to-top {
    bottom: 88px;

    background: #062f3d;

    border: 1px solid rgba(217, 180, 109, 0.45);

    color: #d9b46d;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.2s ease;
}

.back-to-top.visible {
    opacity: 1;

    visibility: visible;
}

.back-to-top svg {
    width: 18px;

    height: 18px;
}


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

@media (max-width: 900px) {

    .footer-inner {
        width: min(720px, calc(100% - 48px));
    }

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

        gap: 34px 44px;
    }
}


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

@media (max-width: 600px) {

    .footer-inner {
        width: calc(100% - 36px);

        padding-top: 44px;
    }

    .footer-brand {
        margin-bottom: 32px;
    }

    .footer-logo img {
        height: 38px;
    }

    .footer-logo-text strong {
        font-size: 23px;
    }
	
	.footer-logo-text span {
        font-size: 10px;
    }

    .footer-description {
        font-size: 14px;

        line-height: 1.65;
    }

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

        gap: 28px;

        padding: 28px 0 34px;
    }

    .footer-column {
        gap: 10px;
    }

    .footer-column h4 {
        margin-bottom: 5px;
    }

    .footer-column > a {
        font-size: 14.5px;
    }

    .footer-contact-item {
        font-size: 14px;
    }

    .footer-bottom-row {
        gap: 18px;

        padding: 20px 0 25px;
    }

    .footer-social {
        gap: 8px;
    }

    .footer-social a {
        width: 36px;

        height: 36px;
    }

    .floating-whatsapp,
    .back-to-top {
        right: 16px;
    }

    .floating-whatsapp {
        width: 46px;

        height: 46px;

        bottom: 16px;
    }

    .back-to-top {
        width: 44px;

        height: 44px;

        bottom: 78px;
    }
}
 

/* ========================================
   ACTIVITIES PAGE
======================================== */

.activities-page {
    background: #f7fbfa;
}


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

.activities-hero-new {
    position: relative;
    min-height: 440px;

    display: flex;
    align-items: center;

    background:
        url("../images/hero.jpg")
        center 52%
        / cover
        no-repeat;

    color: #ffffff;
    overflow: hidden;
}

.activities-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 29, 40, 0.84) 0%,
            rgba(3, 29, 40, 0.62) 42%,
            rgba(3, 29, 40, 0.20) 78%,
            rgba(3, 29, 40, 0.04) 100%
        );
}

.activities-hero-inner {
    position: relative;
    z-index: 2;

    padding-top: 30px;
    padding-bottom: 65px;
}

.activities-hero-copy {
    max-width: 680px;
}

.activities-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 19px;

    color: #c9e7e7;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.activities-eyebrow span {
    display: block;

    width: 38px;
    height: 1px;

    background: #c9e7e7;
}

.activities-hero-copy h1 {
    margin: 0;

    color: #ffffff;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(52px, 6vw, 78px);
    line-height: 0.94;
    font-weight: 500;
    letter-spacing: -0.025em;
}

.activities-hero-copy h1 em {
    display: block;

    color: #c9e7e7;

    font-style: italic;
    font-weight: 400;
}

.activities-hero-copy p {
    max-width: 510px;

    margin: 25px 0 0;

    color: rgba(255,255,255,0.84);

    font-size: 16px;
    line-height: 1.65;
}


/* ========================================
   EXPERIENCE FINDER
======================================== */

.experience-finder {
    position: relative;
    z-index: 5;

    margin-top: -42px;
}

.finder-box {
    padding: 25px 28px 18px;

    background: #ffffff;

    border: 1px solid #e0eded;
    border-radius: 12px;

    box-shadow:
        0 15px 35px rgba(6, 40, 61, 0.09);
}

.finder-heading {
    margin-bottom: 20px;
}

.finder-heading > span {
    display: block;

    margin-bottom: 5px;

    color: #087ea4;

    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.13em;
}

.finder-heading h2 {
    margin: 0;

    color: #073b4c;

    font-family:
        "Poppins",
        "Barlow Semi Condensed",
        Arial,
        sans-serif;

    font-size: 21px;
    line-height: 1.2;
    font-weight: 600;
}


/* FINDER CONTROLS */

.finder-controls {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        210px
        170px;

    gap: 14px;

    align-items: stretch;
}

.finder-control {
    min-width: 0;

    padding: 14px 15px;

    background: #f5faf9;

    border: 1px solid #e0eeee;
    border-radius: 8px;
}

.finder-control-heading {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 10px;
}

.finder-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #dff1ef;

    color: #087ea4;

    font-size: 15px;
}

.finder-control-heading label {
    display: block;

    margin: 0;

    color: #073b4c;

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

.finder-control-heading small {
    display: block;

    margin-top: 2px;

    color: #829ab1;

    font-size: 10px;
}


/* LOCATION CHIPS */

.location-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.location-chip {
    position: relative;

    cursor: pointer;
}

.location-chip input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}

.location-chip span {
    display: inline-flex;
    align-items: center;

    min-height: 30px;

    padding: 0 10px;

    border: 1px solid #d9e8e8;
    border-radius: 6px;

    background: #ffffff;

    color: #627d98;

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

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.location-chip input:checked + span {
    background: #073b4c;
    border-color: #073b4c;
    color: #ffffff;
}

.location-chip:hover span {
    border-color: #087ea4;
}


/* DATE */

.finder-date {
    display: flex;
    flex-direction: column;
}

.finder-date input {
    width: 100%;
    height: 34px;

    box-sizing: border-box;

    padding: 0 8px;

    border: 1px solid #d9e8e8;
    border-radius: 6px;

    background: #ffffff;

    color: #334e68;

    font-size: 12px;

    outline: none;
}

.finder-date input:focus {
    border-color: #087ea4;
}


/* SEARCH BUTTON */

.finder-search {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 100%;

    padding: 0 18px;

    border: none;
    border-radius: 8px;

    background: #073b4c;
    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.finder-search:hover {
    background: #087ea4;
    transform: translateY(-1px);
}

.finder-search span:last-child {
    font-size: 16px;
}


/* CLEAR */

.finder-clear {
    display: block;

    margin: 12px 0 0 auto;

    padding: 0;

    border: none;
    background: transparent;

    color: #087ea4;

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

    cursor: pointer;
}


/* ========================================
   RESULTS
======================================== */

.activities-results-section {
    padding: 76px 0 100px;
}

.activities-results-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;

    padding-bottom: 24px;

    border-bottom: 1px solid #dfecec;
}

.results-intro .section-label {
    display: block;

    margin-bottom: 9px;

    color: #087ea4;

    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.14em;
}

.results-intro h2 {
    margin: 0;

    color: #073b4c;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 39px;
    line-height: 1;

    font-weight: 500;

    letter-spacing: -0.02em;
}

.results-intro p {
    margin: 8px 0 0;

    color: #829ab1;

    font-size: 12px;
}


/* SORT */

.sort-wrapper {
    display: flex;
    align-items: center;

    gap: 9px;

    flex-shrink: 0;
}

.sort-wrapper label {
    color: #627d98;

    font-size: 11px;
    font-weight: 600;
}

.sort-wrapper select {
    height: 38px;

    padding: 0 32px 0 12px;

    border: 1px solid #dceaea;
    border-radius: 7px;

    background: #ffffff;

    color: #334e68;

    font-size: 12px;

    outline: none;
}


/* ========================================
   ACTIVITY GRID
======================================== */

.listing-grid-new {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 26px;
}


/* CARD */

.activity-card-new {
    min-width: 0;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2eded;
    border-radius: 12px;

    box-shadow:
        0 5px 18px rgba(6, 40, 61, 0.045);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.activity-card-new:hover {
    transform: translateY(-4px);

    box-shadow:
        0 13px 28px rgba(6, 40, 61, 0.09);
}


/* CARD IMAGE */

.activity-card-image-new {
    position: relative;

    display: block;

    height: 255px;

    overflow: hidden;

    background: #dceff0;
}

.activity-card-image-new img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.activity-card-new:hover
.activity-card-image-new img {
    transform: scale(1.045);
}

.activity-card-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(3,29,40,0.03) 35%,
            rgba(3,29,40,0.55) 100%
        );
}


/* LOCATION */

.activity-card-location {
    position: absolute;

    left: 15px;
    bottom: 15px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 10px;

    border-radius: 6px;

    background: rgba(5, 50, 64, 0.82);

    color: #ffffff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.location-pin svg {
    width: 13px;
    height: 13px;
}


/* ARROW */

.activity-card-arrow {
    position: absolute;

    right: 15px;
    bottom: 15px;

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

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: #ffffff;

    color: #073b4c;

    font-size: 16px;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.activity-card-new:hover
.activity-card-arrow {
    transform: translate(2px, -2px);

    background: #c9e7e7;
}


/* CARD BODY */

.activity-card-body {
    padding: 20px 21px 19px;
}

.activity-card-body h3 {
    margin: 0 0 8px;

    color: #073b4c;

    font-family:
        "Poppins",
        "Barlow Semi Condensed",
        Arial,
        sans-serif;

    font-size: 21px;
    line-height: 1.2;

    font-weight: 600;

    letter-spacing: -0.01em;
}

.activity-card-description {
    margin: 0;

    color: #627d98;

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


/* META */

.activity-card-meta {
    display: flex;
    align-items: center;

    gap: 17px;

    margin-top: 15px;

    color: #829ab1;

    font-size: 11px;
}

.activity-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.activity-card-meta svg {
    width: 14px;
    height: 14px;
}


/* CARD BOTTOM */

.activity-card-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    margin-top: 17px;
    padding-top: 15px;

    border-top: 1px solid #edf2f2;
}

.activity-card-bottom > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.activity-card-bottom > div span {
    color: #829ab1;

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

    letter-spacing: 0.11em;
}

.activity-card-bottom strong {
    color: #073b4c;

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

.activity-link-new {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #087ea4;

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

    text-decoration: none;

    white-space: nowrap;
}

.activity-link-new span {
    font-size: 15px;

    transition: transform 0.2s ease;
}

.activity-link-new:hover span {
    transform: translateX(3px);
}


/* ========================================
   EMPTY STATE
======================================== */

.no-activities-new {
    padding: 70px 20px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e2eded;
    border-radius: 12px;
}

.no-activities-mark {
    display: flex;
    justify-content: center;
    gap: 5px;

    margin-bottom: 20px;
}

.no-activities-mark span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #8bcfd0;
}

.no-activities-new .section-label {
    color: #087ea4;

    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.14em;
}

.no-activities-new h3 {
    margin: 9px 0 7px;

    color: #073b4c;

    font-size: 24px;
}

.no-activities-new p {
    max-width: 360px;

    margin: 0 auto 22px;

    color: #829ab1;

    font-size: 13px;
    line-height: 1.6;
}


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

@media (max-width: 1000px) {

    .finder-controls {
        grid-template-columns: 1fr 190px;
    }

    .finder-search {
        min-height: 48px;
    }

    .listing-grid-new {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 750px) {

    .activities-hero-new {
        min-height: 400px;
    }

    .activities-hero-inner {
        padding-top: 20px;
        padding-bottom: 60px;
    }

    .activities-hero-copy h1 {
        font-size: clamp(45px, 11vw, 62px);
    }

    .activities-hero-copy p {
        font-size: 15px;
    }


    .experience-finder {
        margin-top: -30px;
    }

    .finder-box {
        padding: 22px 18px 17px;
    }

    .finder-controls {
        grid-template-columns: 1fr;
    }

    .finder-search {
        min-height: 48px;
    }


    .activities-results-section {
        padding-top: 58px;
    }

    .activities-results-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .results-intro h2 {
        font-size: 34px;
    }

    .sort-wrapper {
        width: 100%;
        justify-content: space-between;
    }

    .sort-wrapper select {
        flex: 1;
    }


    .listing-grid-new {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .activities-hero-new {
        min-height: 370px;
    }

    .activities-hero-inner {
        padding-top: 10px;
        padding-bottom: 55px;
    }

    .activities-eyebrow {
        margin-bottom: 15px;
        font-size: 9px;
    }

    .activities-eyebrow span {
        width: 28px;
    }

    .activities-hero-copy h1 {
        font-size: 48px;
    }

    .activities-hero-copy p {
        max-width: 330px;

        margin-top: 20px;

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


    .finder-box {
        padding: 19px 15px 15px;
    }

    .finder-heading h2 {
        font-size: 19px;
    }

    .location-options {
        gap: 5px;
    }

    .location-chip span {
        min-height: 29px;

        padding: 0 8px;

        font-size: 10px;
    }


    .activities-results-section {
        padding: 50px 0 80px;
    }

    .results-intro h2 {
        font-size: 32px;
    }


    .activity-card-image-new {
        height: 220px;
    }

    .activity-card-body {
        padding: 18px 18px 18px;
    }

    .activity-card-body h3 {
        font-size: 20px;
    }

}


/* ========================================
   ACTIVITY DETAIL PAGE
======================================== */

.activity-detail-page {
    background: #f7fbfa;
    color: #073b4c;
}


/* ========================================
   BREADCRUMB
======================================== */

.activity-detail-breadcrumb {
    padding: 18px 0;

    background: #ffffff;

    border-bottom: 1px solid #e5eeee;
}

.activity-detail-breadcrumb .container {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 11px;
}

.activity-detail-breadcrumb a {
    color: #087ea4;
    font-weight: 650;
    text-decoration: none;
}

.activity-detail-breadcrumb span {
    color: #829ab1;
}


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

.activity-detail-hero {
    padding: 58px 0 70px;
}

.activity-detail-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(390px, 0.85fr);

    gap: 55px;

    align-items: center;
}


/* IMAGE */

.activity-detail-image {
    position: relative;

    height: 520px;

    overflow: hidden;

    border-radius: 14px;

    background: #dceff0;
}

.activity-detail-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.activity-detail-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(3,29,40,0.02) 50%,
            rgba(3,29,40,0.45) 100%
        );
}

.activity-detail-image-label {
    position: absolute;

    left: 20px;
    bottom: 20px;

    padding: 7px 11px;

    border-radius: 6px;

    background: rgba(5,50,64,0.82);

    color: #ffffff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
}


/* INTRO */

.activity-detail-intro {
    min-width: 0;
}

.activity-detail-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 15px;

    color: #087ea4;

    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.15em;
}

.activity-detail-eyebrow::before {
    content: "";

    width: 30px;
    height: 1px;

    background: #087ea4;
}

.activity-detail-intro h1 {
    margin: 0 0 18px;

    color: #073b4c;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(46px, 5vw, 66px);
    line-height: 0.96;
    font-weight: 500;

    letter-spacing: -0.025em;
}

.activity-detail-short {
    max-width: 510px;

    margin: 20px 0 24px;

    color: #627d98;

    font-size: 15px;
    line-height: 1.65;
}


/* LOCATION */

.activity-detail-location {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;
}

.detail-location-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #dff1ef;

    color: #087ea4;
}

.detail-location-icon svg {
    width: 17px;
    height: 17px;
}

.activity-detail-location > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.activity-detail-location span {
    color: #829ab1;

    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.activity-detail-location strong {
    color: #073b4c;

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


/* LOCATION SELECTOR */

.activity-location-selector {
    margin-bottom: 22px;
}

.activity-location-selector label {
    display: block;

    margin-bottom: 7px;

    color: #486581;

    font-size: 11px;
    font-weight: 650;
}

.activity-location-selector select {
    width: 100%;
    height: 44px;

    padding: 0 13px;

    border: 1px solid #d9e8e8;
    border-radius: 7px;

    background: #ffffff;

    color: #334e68;

    font-family: inherit;
    font-size: 13px;

    outline: none;
}

.activity-location-selector select:focus {
    border-color: #087ea4;
}


/* PRICE */

.activity-detail-price {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    padding: 19px 0;

    border-top: 1px solid #dfecec;
    border-bottom: 1px solid #dfecec;
}

.activity-detail-price > span {
    color: #829ab1;

    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#detailPrice {
    color: #073b4c;

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

#detailPrice small {
    color: #829ab1;

    font-size: 11px;
    font-weight: 500;
}


/* BOOK BUTTON */

.activity-detail-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-top: 22px;

    min-height: 49px;
    padding: 0 22px;

    border-radius: 7px;
}

.activity-detail-book span {
    font-size: 16px;
}


/* ========================================
   QUICK INFO
======================================== */

.activity-quick-info {
    background: #e8f5f5;

    border-top: 1px solid #dceeee;
    border-bottom: 1px solid #dceeee;
}

.activity-quick-info-inner {
    display: flex;
    align-items: stretch;
}

.quick-info-item {
    flex: 1;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 22px 25px;

    border-right: 1px solid #d2e7e7;
}

.quick-info-item:last-child {
    border-right: none;
}

.quick-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #ffffff;

    color: #087ea4;
}

.quick-info-icon svg {
    width: 16px;
    height: 16px;
}

.quick-info-item > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.quick-info-item > div > span {
    color: #627d98;

    font-size: 9px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.quick-info-item strong {
    color: #073b4c;

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


/* ========================================
   ABOUT
======================================== */

.activity-about {
    padding: 82px 0;
    background: #ffffff;
}

.activity-about-grid {
    display: grid;

    grid-template-columns: 0.75fr 1.25fr;

    gap: 80px;
}

.activity-about-heading h2,
.activity-locations-heading h2,
.activity-booking-heading h2 {
    margin: 10px 0 0;

    color: #073b4c;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 42px;
    line-height: 1;

    font-weight: 500;

    letter-spacing: -0.02em;
}

.activity-about-content {
    max-width: 650px;
}

.activity-about-content p {
    margin: 0 0 18px;

    color: #627d98;

    font-size: 15px;
    line-height: 1.75;
}

.activity-about-content p:last-child {
    margin-bottom: 0;
}


/* ========================================
   GOOD TO KNOW
======================================== */

.activity-good-to-know {
    padding: 0 0 80px;

    background: #ffffff;
}

.good-to-know-box {
    display: grid;

    grid-template-columns: 0.7fr 1.3fr;

    gap: 60px;

    padding: 35px 40px;

    background: #f1f9f8;

    border-radius: 12px;
}

.good-to-know-heading h2 {
    margin: 9px 0 0;

    color: #073b4c;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 32px;
    font-weight: 500;
}

.good-to-know-content {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.requirement-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.requirement-item > span {
    color: #087ea4;

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

.requirement-item p {
    margin: 0;

    color: #486581;

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


/* ========================================
   LOCATIONS
======================================== */

.activity-locations {
    padding: 78px 0;

    background: #f7fbfa;
}

.activity-locations-heading {
    margin-bottom: 30px;
}

.activity-location-list {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.activity-location-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 19px 21px;

    background: #ffffff;

    border: 1px solid #e1eded;
    border-radius: 9px;
}

.activity-location-card > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.activity-location-card > div:first-child span {
    color: #829ab1;

    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.activity-location-card > div:first-child strong {
    color: #073b4c;

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

.location-card-price {
    display: flex;
    align-items: baseline;

    gap: 4px;

    white-space: nowrap;
}

.location-card-price span {
    color: #829ab1;

    font-size: 9px;
}

.location-card-price strong {
    color: #073b4c;

    font-size: 16px;
}

.location-card-price small {
    color: #829ab1;

    font-size: 9px;
}


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

.activity-booking {
    padding: 85px 0 100px;

    background: #073b4c;

    color: #ffffff;
}

.activity-booking-heading {
    max-width: 650px;

    margin-bottom: 35px;
}

.activity-booking-heading .section-label {
    color: #a9dddd;
}

.activity-booking-heading h2 {
    color: #ffffff;
}

.activity-booking-heading p {
    margin: 14px 0 0;

    color: rgba(255,255,255,0.72);

    font-size: 14px;
    line-height: 1.6;
}

.booking-card-new {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

    padding: 30px;

    background: #ffffff;

    border-radius: 12px;

    color: #073b4c;
}

.booking-location-new {
    grid-column: 1 / -1;

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

    padding-bottom: 17px;

    border-bottom: 1px solid #e5eeee;
}

.booking-location-new span {
    color: #829ab1;

    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.booking-location-new strong {
    color: #073b4c;

    font-size: 14px;
}

.booking-field-new {
    display: flex;
    flex-direction: column;
}

.booking-field-new label {
    margin-bottom: 7px;

    color: #486581;

    font-size: 11px;
    font-weight: 650;
}

.booking-field-new label span {
    color: #9fb0bf;

    font-weight: 500;
}

.booking-field-new input,
.booking-field-new textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 0 12px;

    border: 1px solid #d9e5e7;
    border-radius: 7px;

    background: #ffffff;

    color: #334e68;

    font-family: inherit;
    font-size: 13px;

    outline: none;
}

.booking-field-new input {
    height: 44px;
}

.booking-field-new textarea {
    min-height: 105px;

    padding-top: 11px;

    resize: vertical;
}

.booking-field-new input:focus,
.booking-field-new textarea:focus {
    border-color: #087ea4;
}

.booking-field-new small {
    margin-top: 5px;

    color: #829ab1;

    font-size: 10px;
}

.booking-field-full-new {
    grid-column: 1 / -1;
}

.booking-total-new {
    grid-column: 1 / -1;

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

    margin-top: 5px;

    padding-top: 20px;

    border-top: 1px solid #e5eeee;
}

.booking-total-new span {
    color: #627d98;

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

.booking-total-new strong {
    color: #073b4c;

    font-size: 24px;
}

.booking-error-new {
    grid-column: 1 / -1;

    padding: 10px 12px;

    border-radius: 6px;

    background: #fff0f0;

    color: #b42318;

    font-size: 12px;
}

.booking-continue-new {
    grid-column: 1 / -1;

    justify-self: start;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 48px;

    padding: 0 22px;

    border-radius: 7px;
}

.booking-continue-new span {
    font-size: 16px;
}

.booking-price-placeholder {
    font-size: 18px !important;
    font-weight: 600 !important;
    opacity: 0.65;
}


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

@media (max-width: 950px) {

    .activity-detail-hero-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .activity-detail-image {
        height: 430px;
    }

    .activity-detail-intro {
        max-width: 700px;
    }

    .activity-quick-info-inner {
        flex-wrap: wrap;
    }

    .quick-info-item {
        flex: 1 1 50%;
    }

    .quick-info-item:nth-child(2) {
        border-right: none;
    }

    .quick-info-item:nth-child(-n + 2) {
        border-bottom: 1px solid #d2e7e7;
    }

}


@media (max-width: 750px) {

    .activity-detail-hero {
        padding: 35px 0 50px;
    }

    .activity-detail-image {
        height: 360px;
    }

    .activity-detail-intro h1 {
        font-size: 48px;
    }

    .activity-about {
        padding: 60px 0;
    }

    .activity-about-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .good-to-know-box {
        grid-template-columns: 1fr;
        gap: 25px;

        padding: 28px 24px;
    }

    .activity-locations {
        padding: 60px 0;
    }

    .activity-location-list {
        grid-template-columns: 1fr;
    }

    .booking-card-new {
        grid-template-columns: 1fr;

        padding: 22px;
    }

    .booking-field-full-new,
    .booking-total-new,
    .booking-error-new,
    .booking-continue-new {
        grid-column: auto;
    }

}


@media (max-width: 600px) {

    .activity-detail-breadcrumb {
        padding: 14px 0;
    }

    .activity-detail-breadcrumb .container {
        font-size: 10px;
    }

    .activity-detail-hero {
        padding: 25px 0 40px;
    }

    .activity-detail-image {
        height: 280px;
        border-radius: 10px;
    }

    .activity-detail-image-label {
        left: 13px;
        bottom: 13px;
    }

    .activity-detail-intro h1 {
        font-size: 43px;
    }

    .activity-detail-short {
        font-size: 14px;
    }

    .activity-detail-price {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .activity-detail-book {
        width: 100%;
    }

    .activity-quick-info-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .quick-info-item {
        padding: 17px 14px;
        border-right: 1px solid #d2e7e7;
    }

    .quick-info-item:nth-child(2) {
        border-right: none;
    }

    .quick-info-item:nth-child(3) {
        border-bottom: none;
    }

    .activity-about-heading h2,
    .activity-locations-heading h2,
    .activity-booking-heading h2 {
        font-size: 35px;
    }

    .activity-about-content p {
        font-size: 14px;
    }

    .activity-location-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .booking-location-new {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .booking-card-new {
        padding: 18px;
    }

}

/* =========================================================
   ACTIVITY DETAIL - EXTRA CONTENT SECTIONS
   ========================================================= */


/* ---------------------------------------------------------
   ABOUT / EXPERIENCE
   --------------------------------------------------------- */

.activity-about {
    padding: 90px 0;
    background: #ffffff;
}

.activity-about-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    align-items: start;
}

.activity-about-heading .section-label,
.activity-subheading .section-label,
.activity-expect-heading .section-label,
.good-to-know-heading .section-label {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: #087ea4;
}

.activity-about-heading h2 {
    max-width: 430px;
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.08;
    font-weight: 600;
    color: #073b4c;
}

.activity-about-content {
    padding-top: 4px;
}

.activity-about-content p {
    margin: 0 0 22px;
    font-size: 16px;
    line-height: 1.85;
    color: #526b75;
}

.activity-about-content p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   HIGHLIGHTS
   --------------------------------------------------------- */

.activity-highlights {
    margin-top: 85px;
    padding-top: 55px;
    border-top: 1px solid #e4eeee;
}

.activity-subheading {
    margin-bottom: 30px;
}

.activity-subheading h3 {
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    color: #073b4c;
}

.highlight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.highlight-card {
    position: relative;
    min-height: 190px;
    padding: 26px 24px;
    background: #f4f9f8;
    border: 1px solid #e2eeee;
    border-radius: 12px;
    overflow: hidden;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.highlight-card:hover {
    transform: translateY(-4px);
    border-color: #cfe4e4;
    box-shadow: 0 12px 28px rgba(7, 59, 76, 0.08);
}

.highlight-number {
    display: block;
    margin-bottom: 25px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #087ea4;
}

.highlight-card h4 {
    margin: 0 0 10px;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #073b4c;
}

.highlight-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #607d86;
}


/* ---------------------------------------------------------
   WHAT TO EXPECT
   --------------------------------------------------------- */

.activity-expect {
    padding: 90px 0;
    background: #f4f9f8;
}

.activity-expect-heading {
    max-width: 650px;
    margin-bottom: 55px;
}

.activity-expect-heading h2 {
    margin: 0 0 14px;
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.1;
    font-weight: 600;
    color: #073b4c;
}

.activity-expect-heading p {
    max-width: 590px;
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: #607d86;
}

.expect-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.expect-timeline::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 11%;
    right: 11%;
    height: 1px;
    background: #c9dddd;
}

.expect-step {
    position: relative;
    z-index: 1;
    padding: 0 22px;
    text-align: center;
}

.expect-step:first-child {
    padding-left: 0;
}

.expect-step:last-child {
    padding-right: 0;
}

.expect-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 24px;
    border: 1px solid #b9d4d5;
    border-radius: 50%;
    background: #f4f9f8;
    font-size: 12px;
    font-weight: 700;
    color: #087ea4;
}

.expect-step h3 {
    margin: 0 0 10px;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #073b4c;
}

.expect-step p {
    max-width: 230px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.65;
    color: #607d86;
}


/* ---------------------------------------------------------
   GOOD TO KNOW
   --------------------------------------------------------- */

.good-to-know-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 35px;
}

.requirement-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.requirement-item > span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    border-radius: 50%;
    background: #dff2ef;
    color: #087ea4;
    font-size: 13px;
    font-weight: 700;
}

.requirement-item strong {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 700;
    color: #073b4c;
}

.requirement-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #607d86;
}


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

@media (max-width: 950px) {

    .activity-about-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .activity-about-heading h2 {
        max-width: 600px;
    }

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

    .expect-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 45px 20px;
    }

    .expect-timeline::before {
        display: none;
    }

    .expect-step,
    .expect-step:first-child,
    .expect-step:last-child {
        padding: 0 15px;
    }

}


@media (max-width: 600px) {

    .activity-about {
        padding: 65px 0;
    }

    .activity-about-grid {
        gap: 28px;
    }

    .activity-about-heading h2 {
        font-size: 34px;
    }

    .activity-about-content p {
        font-size: 15px;
        line-height: 1.75;
    }

    .activity-highlights {
        margin-top: 60px;
        padding-top: 40px;
    }

    .activity-subheading h3 {
        font-size: 27px;
    }

    .highlight-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .highlight-card {
        min-height: auto;
        padding: 22px;
    }

    .highlight-number {
        margin-bottom: 18px;
    }

    .activity-expect {
        padding: 65px 0;
    }

    .activity-expect-heading {
        margin-bottom: 40px;
    }

    .activity-expect-heading h2 {
        font-size: 34px;
    }

    .activity-expect-heading p {
        font-size: 15px;
    }

    .expect-timeline {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .expect-step,
    .expect-step:first-child,
    .expect-step:last-child {
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: 18px;
        padding: 0;
        text-align: left;
    }

    .expect-step-number {
        margin: 0;
    }

    .expect-step h3 {
        margin-bottom: 6px;
    }

    .expect-step p {
        max-width: none;
        margin: 0;
    }

    .good-to-know-content {
        grid-template-columns: 1fr;
        gap: 25px;
    }

}

/* ---------------------------------------------------------
   ACTIVITY DETAILS
   --------------------------------------------------------- */

.activity-details-info {
    padding: 90px 0;
    background: #ffffff;
}

.activity-details-info-heading {
    max-width: 650px;
    margin-bottom: 45px;
}

.activity-details-info-heading h2 {
    margin: 0 0 14px;
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.1;
    font-weight: 600;
    color: #073b4c;
}

.activity-details-info-heading p {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: #607d86;
}


/* Information cards */

.activity-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.activity-detail-info-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px;
    background: #f4f9f8;
    border: 1px solid #e2eeee;
    border-radius: 12px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.activity-detail-info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(7, 59, 76, 0.07);
}

.info-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #dff2ef;
    color: #087ea4;
    font-size: 19px;
    font-weight: 600;
}

.activity-detail-info-card span:not(.info-card-icon) {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #087ea4;
}

.activity-detail-info-card strong {
    display: block;
    margin-bottom: 7px;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 21px;
    line-height: 1.2;
    color: #073b4c;
}

.activity-detail-info-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #607d86;
}


/* What's included */

.activity-included-box {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 50px;
    align-items: center;
    margin-top: 45px;
    padding: 38px 42px;
    background: #073b4c;
    border-radius: 14px;
}

.activity-included-box .section-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #78c7c9;
}

.activity-included-box h3 {
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 600;
    color: #ffffff;
}

.activity-included-box ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity-included-box li {
    position: relative;
    padding-left: 25px;
    font-size: 15px;
    line-height: 1.5;
    color: #e3f1f2;
}

.activity-included-box li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #78c7c9;
    font-weight: 700;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 950px) {

    .activity-details-grid {
        grid-template-columns: 1fr;
    }

    .activity-included-box {
        grid-template-columns: 1fr;
        gap: 28px;
    }

}


@media (max-width: 600px) {

    .activity-details-info {
        padding: 65px 0;
    }

    .activity-details-info-heading {
        margin-bottom: 32px;
    }

    .activity-details-info-heading h2 {
        font-size: 34px;
    }

    .activity-details-info-heading p {
        font-size: 15px;
    }

    .activity-detail-info-card {
        gap: 15px;
        padding: 22px;
    }

    .info-card-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .activity-detail-info-card strong {
        font-size: 19px;
    }

    .activity-included-box {
        margin-top: 30px;
        padding: 28px 24px;
    }

    .activity-included-box h3 {
        font-size: 27px;
    }

    .activity-included-box ul {
        grid-template-columns: 1fr;
        gap: 13px;
    }

}

/* =========================================================
   ACTIVITY DETAIL - CONTENT SECTIONS
   ========================================================= */


/* ---------------------------------------------------------
   WHY YOU'LL LOVE IT
   --------------------------------------------------------- */

.activity-love {
    padding: 55px 0;
    background: #eaf7f8;
    border-top: 1px solid #dceff0;
    border-bottom: 1px solid #dceff0;
}

.activity-love .container {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 55px;
    align-items: center;
}

.activity-love-intro .section-label {
    display: block;
    margin-bottom: 12px;
}

.activity-love-intro h2 {
    max-width: 330px;
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-size: 38px;
    line-height: 1.1;
    font-weight: 600;
    color: #073b4c;
}

.activity-love-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.activity-love-item {
    text-align: center;
}

.love-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 15px;
    border: 1px solid #b9dfe1;
    border-radius: 50%;
    background: #ffffff;
    color: #0783a5;
    font-size: 23px;
    font-weight: 600;
}

.activity-love-item strong {
    display: block;
    margin-bottom: 7px;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #073b4c;
}

.activity-love-item p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #607d86;
}


/* ---------------------------------------------------------
   ABOUT THE EXPERIENCE
   --------------------------------------------------------- */

.activity-about {
    padding: 85px 0;
    background: #ffffff;
}

.activity-about-main {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 70px;
    align-items: center;
}

.activity-about-content .section-label {
    display: inline-block;
    margin-bottom: 12px;
}

.activity-about-content h2 {
    margin: 0 0 22px;
    font-family: "Fraunces", Georgia, serif;
    font-size: 42px;
    line-height: 1.1;
    font-weight: 600;
    color: #073b4c;
}

.activity-about-content h2::after,
.activity-subheading h3::after {
    content: "";
    display: block;
    width: 38px;
    height: 3px;
    margin-top: 13px;
    background: #0a91b3;
    border-radius: 2px;
}

.activity-about-content p {
    max-width: 650px;
    margin: 0 0 17px;
    font-size: 15px;
    line-height: 1.75;
    color: #526b75;
}

.activity-about-content p:last-child {
    margin-bottom: 0;
}

.activity-about-visual {
    height: 330px;
    overflow: hidden;
    border-radius: 12px;
}

.activity-about-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ---------------------------------------------------------
   HIGHLIGHTS
   --------------------------------------------------------- */

.activity-highlights {
    margin-top: 75px;
    padding-top: 55px;
    border-top: 1px solid #e3eeee;
}

.activity-subheading {
    margin-bottom: 30px;
}

.activity-subheading .section-label {
    display: inline-block;
    margin-bottom: 8px;
}

.activity-subheading h3 {
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-size: 31px;
    line-height: 1.2;
    font-weight: 600;
    color: #073b4c;
}

.highlight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.highlight-card {
    padding: 25px 22px;
    background: #f3faf9;
    border: 1px solid #e0eeee;
    border-radius: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.highlight-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(7, 59, 76, 0.07);
}

.highlight-number {
    display: block;
    margin-bottom: 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #0783a5;
}

.highlight-card h4 {
    margin: 0 0 9px;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    color: #073b4c;
}

.highlight-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #607d86;
}


/* ---------------------------------------------------------
   ACTIVITY DETAILS
   --------------------------------------------------------- */

.activity-details-info {
    padding: 80px 0;
    background: #f8fbfb;
    border-top: 1px solid #edf3f3;
}

.activity-details-info-heading {
    margin-bottom: 38px;
}

.activity-details-info-heading .section-label {
    display: inline-block;
    margin-bottom: 10px;
}

.activity-details-info-heading h2 {
    margin: 0 0 12px;
    font-family: "Fraunces", Georgia, serif;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 600;
    color: #073b4c;
}

.activity-details-info-heading p {
    margin: 0;
    font-size: 15px;
    color: #607d86;
}

.activity-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.activity-detail-info-card {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e3eeee;
    border-radius: 10px;
}

.info-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e3f5f4;
    color: #0783a5;
    font-size: 19px;
}

.activity-detail-info-card span:not(.info-card-icon) {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #0783a5;
}

.activity-detail-info-card strong {
    display: block;
    margin-bottom: 5px;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 19px;
    line-height: 1.2;
    color: #073b4c;
}

.activity-detail-info-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #607d86;
}


/* Included */

.activity-included-box {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 45px;
    align-items: center;
    margin-top: 18px;
    padding: 30px 34px;
    background: #eaf7f8;
    border: 1px solid #d7eded;
    border-radius: 10px;
}

.activity-included-box .section-label {
    display: inline-block;
    margin-bottom: 9px;
    color: #0783a5;
}

.activity-included-box h3 {
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-size: 27px;
    line-height: 1.15;
    font-weight: 600;
    color: #073b4c;
}

.activity-included-box ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 25px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity-included-box li {
    position: relative;
    padding-left: 23px;
    font-size: 14px;
    color: #365866;
}

.activity-included-box li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #168d4b;
    font-weight: 700;
}


/* ---------------------------------------------------------
   WHAT TO EXPECT
   --------------------------------------------------------- */

.activity-expect {
    padding: 80px 0;
    background: #ffffff;
}

.activity-expect-heading {
    max-width: 650px;
    margin-bottom: 48px;
}

.activity-expect-heading .section-label {
    display: inline-block;
    margin-bottom: 10px;
}

.activity-expect-heading h2 {
    margin: 0 0 13px;
    font-family: "Fraunces", Georgia, serif;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 600;
    color: #073b4c;
}

.activity-expect-heading p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #607d86;
}

.expect-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.expect-timeline::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 11%;
    right: 11%;
    height: 1px;
    background: #c9dddd;
}

.expect-step {
    position: relative;
    z-index: 1;
    padding: 0 20px;
    text-align: center;
}

.expect-step:first-child {
    padding-left: 0;
}

.expect-step:last-child {
    padding-right: 0;
}

.expect-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    margin: 0 auto 20px;
    border: 1px solid #bdd9db;
    border-radius: 50%;
    background: #ffffff;
    font-size: 11px;
    font-weight: 700;
    color: #0783a5;
}

.expect-step h3 {
    margin: 0 0 7px;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #073b4c;
}

.expect-step p {
    max-width: 220px;
    margin: 0 auto;
    font-size: 13px;
    line-height: 1.6;
    color: #607d86;
}


/* ---------------------------------------------------------
   GOOD TO KNOW + TIPS
   --------------------------------------------------------- */

.activity-information {
    padding: 80px 0;
    background: #f8fbfb;
}

.information-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 18px;
}

.information-box {
    padding: 32px;
    border-radius: 12px;
    border: 1px solid;
}

.good-to-know-box {
    background: #fffaf0;
    border-color: #f1e6cc;
}

.tips-box {
    background: #edf8fb;
    border-color: #d7ebef;
}

.information-box-heading {
    margin-bottom: 28px;
}

.information-box-heading .section-label {
    display: inline-block;
    margin-bottom: 8px;
}

.information-box-heading h2 {
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-size: 29px;
    line-height: 1.15;
    font-weight: 600;
    color: #073b4c;
}

.requirement-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 28px;
}

.requirement-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.requirement-item > span,
.tip-item > span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    background: #ffffff;
    color: #168d4b;
    font-size: 12px;
    font-weight: 700;
}

.requirement-item strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #073b4c;
}

.requirement-item p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: #607d86;
}

.tips-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tip-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tip-item > span {
    color: #0783a5;
}

.tip-item p {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #526b75;
}


/* ---------------------------------------------------------
   AVAILABLE LOCATIONS
   --------------------------------------------------------- */

.activity-locations {
    padding: 80px 0;
    background: #ffffff;
}

.activity-locations-heading {
    margin-bottom: 30px;
}

.activity-locations-heading .section-label {
    display: inline-block;
    margin-bottom: 8px;
}

.activity-locations-heading h2 {
    margin: 0 0 10px;
    font-family: "Fraunces", Georgia, serif;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 600;
    color: #073b4c;
}

.activity-locations-heading p {
    margin: 0;
    font-size: 14px;
    color: #607d86;
}

.activity-location-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.activity-location-card {
    padding: 22px;
    background: #ffffff;
    border: 1px solid #dfecec;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(7, 59, 76, 0.04);
}

.activity-location-card-content {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 17px;
}

.location-pin {
    color: #e53935;
    font-size: 19px;
}

.activity-location-card-content strong {
    display: block;
    margin-bottom: 3px;
    font-size: 15px;
    line-height: 1.25;
    color: #073b4c;
}

.activity-location-card-content div > span {
    font-size: 12px;
    color: #607d86;
}

.activity-location-price {
    margin-bottom: 17px;
    font-size: 19px;
    font-weight: 700;
    color: #073b4c;
}

.activity-location-price small {
    font-size: 11px;
    font-weight: 500;
    color: #607d86;
}

.activity-location-select {
    width: 100%;
    min-height: 40px;
    border: 1px solid #70c5d8;
    border-radius: 6px;
    background: #ffffff;
    color: #0783a5;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.activity-location-select:hover {
    background: #edf8fb;
}


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

@media (max-width: 1000px) {

    .activity-love .container {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .activity-love-intro h2 {
        max-width: 500px;
    }

    .activity-love-items {
        grid-template-columns: repeat(4, 1fr);
    }

    .activity-about-main {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .activity-about-visual {
        height: 300px;
    }

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

    .activity-included-box {
        grid-template-columns: 1fr;
        gap: 25px;
    }

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

    .activity-location-list {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 750px) {

    .activity-love {
        padding: 60px 0;
    }

    .activity-love-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 15px;
    }

    .activity-about,
    .activity-details-info,
    .activity-expect,
    .activity-information,
    .activity-locations {
        padding: 65px 0;
    }

    .expect-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 15px;
    }

    .expect-timeline::before {
        display: none;
    }

    .expect-step,
    .expect-step:first-child,
    .expect-step:last-child {
        padding: 0 10px;
    }

}


@media (max-width: 600px) {

    .activity-love-intro h2,
    .activity-about-content h2,
    .activity-details-info-heading h2,
    .activity-expect-heading h2,
    .activity-locations-heading h2 {
        font-size: 34px;
    }

    .activity-love-items {
        grid-template-columns: repeat(2, 1fr);
    }

    .activity-love-item p {
        font-size: 12px;
    }

    .activity-about-visual {
        height: 240px;
    }

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

    .activity-details-grid {
        grid-template-columns: 1fr;
    }

    .activity-included-box {
        padding: 27px 23px;
    }

    .activity-included-box ul {
        grid-template-columns: 1fr;
    }

    .expect-timeline {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .expect-step,
    .expect-step:first-child,
    .expect-step:last-child {
        display: grid;
        grid-template-columns: 43px 1fr;
        gap: 16px;
        padding: 0;
        text-align: left;
    }

    .expect-step-number {
        margin: 0;
    }

    .expect-step p {
        max-width: none;
        margin: 0;
    }

    .information-box {
        padding: 25px 21px;
    }

    .requirement-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .activity-location-list {
        grid-template-columns: 1fr;
    }

}


/* ========================================
   LOGIN PAGE
======================================== */

.login-page {
    min-height: calc(100vh - 76px);

    display: flex;
    align-items: center;

    padding: 70px 0;

    background:
        linear-gradient(
            135deg,
            #f7fafc 0%,
            #eef8fb 100%
        );
}

.login-container {
    width: min(1050px, 92%);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 430px;

    gap: 80px;

    align-items: center;
}


/* ========================================
   INTRO
======================================== */

.login-intro {
    padding: 20px 0;
}

.login-label {
    display: inline-block;

    margin-bottom: 15px;

    color: #087ea4;

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

    letter-spacing: 2px;
}

.login-intro h1 {
    max-width: 500px;

    margin-bottom: 18px;

    color: #102a43;

    font-size: clamp(45px, 6vw, 68px);
    line-height: 1;
}

.login-intro > p {
    max-width: 470px;

    color: #627d98;

    font-size: 17px;
    line-height: 1.7;
}

.login-feature-list {
    display: flex;
    flex-direction: column;

    gap: 14px;

    margin-top: 35px;
}

.login-feature {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #486581;

    font-size: 14px;
}

.login-feature span {
    width: 23px;
    height: 23px;

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

    border-radius: 50%;

    background: #dff4f8;
    color: #087ea4;

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


/* ========================================
   LOGIN CARD
======================================== */

.login-card {
    padding: 35px;

    background: #ffffff;

    border: 1px solid #e6edf3;
    border-radius: 16px;

    box-shadow:
        0 20px 50px rgba(3, 27, 46, 0.08);
}

.login-card-header {
    margin-bottom: 28px;
}

.login-icon {
    width: 46px;
    height: 46px;

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

    margin-bottom: 18px;

    border-radius: 10px;

    background: #e8f6fa;

    font-size: 21px;
}

.login-card-header h2 {
    margin-bottom: 5px;

    color: #102a43;

    font-size: 27px;
}

.login-card-header p {
    color: #829ab1;

    font-size: 13px;
}


/* ========================================
   LOGIN FORM
======================================== */

.login-form-group {
    margin-bottom: 20px;
}

.login-form-group > label,
.password-label label {
    display: block;

    margin-bottom: 7px;

    color: #334e68;

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

.password-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.password-label a {
    color: #087ea4;

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

.login-form-group input[type="email"],
.password-wrapper input {
    width: 100%;
    height: 46px;

    padding: 0 13px;

    border: 1px solid #d9e2ec;
    border-radius: 8px;

    background: #ffffff;

    color: #243b53;

    font-family: inherit;
    font-size: 14px;

    outline: none;
}

.login-form-group input:focus {
    border-color: #087ea4;
}

.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-right: 65px;
}

.password-toggle {
    position: absolute;

    right: 10px;
    top: 50%;

    transform: translateY(-50%);

    border: none;
    background: transparent;

    color: #087ea4;

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

    cursor: pointer;
}


/* ========================================
   REMEMBER ME
======================================== */

.remember-me {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 22px;

    color: #627d98;

    font-size: 13px;

    cursor: pointer;
}

.remember-me input {
    accent-color: #087ea4;
}


/* ========================================
   LOGIN BUTTON
======================================== */

.login-submit {
    width: 100%;

    border: none;

    cursor: pointer;

    font-size: 14px;
}


/* ========================================
   LOGIN ERROR
======================================== */

.login-error {
    margin-top: 15px;

    padding: 11px 13px;

    border: 1px solid #f3caca;
    border-radius: 7px;

    background: #fff5f5;

    color: #b42318;

    font-size: 12px;
}


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

.login-footer {
    display: flex;
    justify-content: center;
    gap: 5px;

    margin-top: 25px;
    padding-top: 20px;

    border-top: 1px solid #edf2f7;

    color: #829ab1;

    font-size: 12px;
}

.login-footer a {
    color: #087ea4;
    font-weight: 700;
}


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

@media (max-width: 850px) {

    .login-container {
        grid-template-columns: 1fr;

        max-width: 500px;

        gap: 35px;
    }

    .login-intro {
        text-align: center;
    }

    .login-intro h1,
    .login-intro > p {
        margin-left: auto;
        margin-right: auto;
    }

    .login-feature-list {
        align-items: center;
    }

}


@media (max-width: 500px) {

    .login-page {
        padding: 45px 0;
    }

    .login-card {
        padding: 25px 20px;
    }

    .login-footer {
        flex-direction: column;
        align-items: center;
    }

}

/* ========================================
   ACTIVITIES PAGE V2
======================================== */

.activities-v2 {
    --av2-deep-sea: #0b3b54;
    --av2-deep-sea-dark: #072938;
    --av2-lagoon: #17838a;
    --av2-lagoon-light: #6fb8b2;
    --av2-sand: #f4ecd8;
    --av2-sand-deep: #e2d4b0;
    --av2-gold: #b9863a;
    --av2-coral: #c35a3a;
    --av2-foam: #fbfaf5;
    --av2-ink: #10262f;
    --av2-ink-soft: rgba(16, 38, 47, 0.64);

    --av2-font-display: "Fraunces", Georgia, serif;
    --av2-font-body: "Work Sans", -apple-system, "Segoe UI", sans-serif;

    font-family: var(--av2-font-body);
    color: var(--av2-ink);
    background: var(--av2-foam);
}

.activities-v2 *,
.activities-v2 *::before,
.activities-v2 *::after {
    box-sizing: border-box;
}

.activities-v2 img {
    max-width: 100%;
    display: block;
}


/* ========================================
   CONTAINER
======================================== */

.activities-v2 .container {
    width: min(1180px, 92%);
    margin: 0 auto;
}


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

.activities-v2 .activities-hero {
    position: relative;
    background:
        linear-gradient(
            160deg,
            var(--av2-deep-sea) 0%,
            var(--av2-deep-sea-dark) 100%
        );
    color: var(--av2-foam);
    padding: 86px 0 96px;
    overflow: hidden;
}

.activities-v2 .activities-hero::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -160px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    border: 1px solid rgba(251, 250, 245, 0.14);
}

.activities-v2 .activities-hero::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 1px solid rgba(251, 250, 245, 0.1);
}

.activities-v2 .activities-hero .container {
    position: relative;
    z-index: 1;
}

.activities-v2 .section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.86rem;
    color: var(--av2-lagoon-light);
    letter-spacing: 0.02em;
    margin-bottom: 20px;
}

.activities-v2 .section-label::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--av2-lagoon-light);
}

.activities-v2 .activities-hero h1 {
    font-family: var(--av2-font-display);
    font-weight: 500;
    font-size: clamp(2.3rem, 4vw, 3.3rem);
    line-height: 1.1;
    margin: 0 0 18px;
    max-width: 14ch;
}

.activities-v2 .activities-hero p {
    max-width: 44ch;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(251, 250, 245, 0.78);
    margin: 0;
}


/* ========================================
   ACTIVITIES SECTION
======================================== */

.activities-v2 .activities-section {
    padding: 60px 0 90px;
}

.activities-v2 .activities-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}


/* ========================================
   FILTER SIDEBAR
======================================== */

.activities-v2 .activity-filters {
    background: var(--av2-foam);
    border: 1px solid var(--av2-sand-deep);
    border-radius: 4px;
    padding: 26px 24px 28px;
    position: sticky;
    top: 100px;
}

.activities-v2 .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
}

.activities-v2 .filter-header h3 {
    font-family: var(--av2-font-display);
    font-weight: 500;
    font-size: 1.05rem;
    margin: 0;
}

.activities-v2 .clear-filter {
    background: none;
    border: none;
    padding: 0;
    color: var(--av2-lagoon);
    font-family: var(--av2-font-body);
    font-size: 0.78rem;
    cursor: pointer;
}

.activities-v2 .clear-filter:hover {
    text-decoration: underline;
}

.activities-v2 .filter-group {
    padding: 18px 0;
    border-top: 1px solid var(--av2-sand-deep);
}

.activities-v2 .filter-group:first-of-type {
    border-top: none;
    padding-top: 0;
}

.activities-v2 .filter-group > label:not(.filter-option) {
    display: block;
    margin-bottom: 12px;
    color: var(--av2-ink-soft);
    font-size: 0.8rem;
    font-weight: 500;
}

.activities-v2 .filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    color: var(--av2-ink);
    font-size: 0.9rem;
    cursor: pointer;
}

.activities-v2 .filter-option input[type="radio"] {
    appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    display: grid;
    place-content: center;
    border: 1.5px solid var(--av2-sand-deep);
    border-radius: 50%;
    cursor: pointer;
}

.activities-v2 .filter-option input[type="radio"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--av2-deep-sea);
    transform: scale(0);
    transition: transform 0.12s ease;
}

.activities-v2 .filter-option input[type="radio"]:checked {
    border-color: var(--av2-deep-sea);
}

.activities-v2 .filter-option input[type="radio"]:checked::before {
    transform: scale(1);
}

.activities-v2 .filter-group input[type="date"] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--av2-sand-deep);
    border-radius: 3px;
    background: var(--av2-foam);
    color: var(--av2-ink);
    font-family: var(--av2-font-body);
    font-size: 0.88rem;
}

.activities-v2 .filter-group input[type="date"]:focus,
.activities-v2 .filter-option input:focus-visible {
    outline: 2px solid var(--av2-lagoon);
    outline-offset: 2px;
}


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

.activities-v2 .results-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--av2-sand-deep);
}

.activities-v2 .results-header h2 {
    font-family: var(--av2-font-display);
    font-weight: 500;
    font-size: 1.55rem;
    margin: 0 0 6px;
}

.activities-v2 .results-header p {
    margin: 0;
    color: var(--av2-ink-soft);
    font-size: 0.88rem;
}

.activities-v2 .sort-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.activities-v2 .sort-wrapper label {
    color: var(--av2-ink-soft);
}

.activities-v2 .sort-wrapper select {
    appearance: none;
    padding: 8px 30px 8px 12px;
    border: 1px solid var(--av2-sand-deep);
    border-radius: 3px;
    background:
        var(--av2-foam)
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%2310262f" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>')
        no-repeat right 12px center;
    color: var(--av2-ink);
    font-family: var(--av2-font-body);
    font-size: 0.87rem;
    cursor: pointer;
}


/* ========================================
   ACTIVITY GRID
======================================== */

.activities-v2 .activity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}


/* ========================================
   ACTIVITY CARD
======================================== */

.activities-v2 .activity-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--av2-sand-deep);
    border-radius: 4px;
    background: var(--av2-foam);
    transition:
        border-color 0.18s ease,
        transform 0.18s ease;
}

.activities-v2 .activity-card:hover {
    border-color: var(--av2-lagoon);
    transform: translateY(-2px);
}


/* ========================================
   ACTIVITY IMAGE
======================================== */

.activities-v2 .activity-image {
    position: relative;
    aspect-ratio: 4 / 3;
    height: auto;
    overflow: hidden;
    background: var(--av2-sand);
}

.activities-v2 .activity-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.activities-v2 .activity-card:hover .activity-image img {
    transform: scale(1.04);
}

.activities-v2 .activity-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(7, 41, 56, 0) 55%,
            rgba(7, 41, 56, 0.55) 100%
        );
}

.activities-v2 .activity-location {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin: 0;

    color: var(--av2-foam);
    font-size: 0.78rem;
    font-weight: 400;
}

.activities-v2 .activity-location svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}


/* ========================================
   ACTIVITY CONTENT
======================================== */

.activities-v2 .activity-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px 22px 22px;
}

.activities-v2 .activity-content h3 {
    font-family: var(--av2-font-display);
    font-weight: 500;
    font-size: 1.35rem;
    line-height: 1.25;
    margin: 0 0 8px;
    color: var(--av2-ink);
}

.activities-v2 .activity-content > p {
    max-width: 42ch;
    margin: 0 0 16px;
    color: var(--av2-ink-soft);
    font-size: 0.9rem;
    line-height: 1.65;
}


/* ========================================
   META
======================================== */

.activities-v2 .activity-meta {
    display: flex;
    gap: 18px;
    margin: 0 0 18px;
}

.activities-v2 .activity-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--av2-ink-soft);
    font-size: 0.8rem;
}

.activities-v2 .activity-meta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--av2-lagoon);
}


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

.activities-v2 .activity-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-top: auto;
    padding-top: 16px;

    border-top: 1px solid var(--av2-sand-deep);
}

.activities-v2 .activity-location-summary {
    display: flex;
    flex-direction: column;
}

.activities-v2 .price-label {
    color: var(--av2-ink-soft);
    font-size: 0.72rem;
}

.activities-v2 .activity-location-summary strong {
    color: var(--av2-deep-sea);
    font-family: var(--av2-font-display);
    font-size: 1.02rem;
    font-weight: 500;
}

.activities-v2 .activity-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 16px;

    border: 1px solid var(--av2-lagoon);
    border-radius: 3px;

    color: var(--av2-lagoon);

    font-size: 0.85rem;
    font-weight: 500;

    text-decoration: none;
    white-space: nowrap;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.activities-v2 .activity-link:hover {
    background: var(--av2-lagoon);
    color: var(--av2-foam);
}


/* ========================================
   NO RESULTS
======================================== */

.activities-v2 .no-activities {
    padding: 70px 20px;
    border: 1px dashed var(--av2-sand-deep);
    border-radius: 4px;
    text-align: center;
}

.activities-v2 .no-activities-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 18px;
    color: var(--av2-lagoon);
}

.activities-v2 .no-activities h3 {
    font-family: var(--av2-font-display);
    font-weight: 500;
    font-size: 1.2rem;
    margin: 0 0 8px;
}

.activities-v2 .no-activities p {
    margin: 0 0 20px;
    color: var(--av2-ink-soft);
    font-size: 0.9rem;
}

.activities-v2 .no-activities .btn-primary {
    display: inline-block;
    padding: 10px 22px;
    border: none;
    border-radius: 3px;
    background: var(--av2-deep-sea);
    color: var(--av2-foam);
    font-family: var(--av2-font-body);
    font-size: 0.88rem;
    text-decoration: none;
    cursor: pointer;
}


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

@media (max-width: 900px) {

    .activities-v2 .activities-layout {
        grid-template-columns: 1fr;
    }

    .activities-v2 .activity-filters {
        position: static;
    }

    .activities-v2 .activity-grid {
        grid-template-columns: 1fr;
    }

    .activities-v2 .results-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

}


@media (max-width: 600px) {

    .activities-v2 .activities-hero {
        padding: 65px 0 72px;
    }

    .activities-v2 .activities-hero h1 {
        font-size: 2.25rem;
    }

    .activities-v2 .activities-hero p {
        font-size: 0.95rem;
    }

    .activities-v2 .activities-section {
        padding: 40px 0 65px;
    }

    .activities-v2 .container {
        width: min(100% - 32px, 1180px);
    }

    .activities-v2 .activity-filters {
        padding: 22px 20px;
    }

    .activities-v2 .activity-content {
        padding: 18px 18px 20px;
    }

    .activities-v2 .activity-footer {
        align-items: flex-start;
    }

    .activities-v2 .activity-link {
        padding: 8px 13px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .activities-v2 *,
    .activities-v2 *::before,
    .activities-v2 *::after {
        transition: none !important;
    }

}

/* =========================================================
   ABOUT PAGE
   Islands Wonder - Water Activities
========================================================= */

.about-page {
    --about-deep: #073b4c;
    --about-deep-dark: #052d3a;
    --about-lagoon: #159a9c;
    --about-lagoon-light: #dff5f3;
    --about-sand: #f7f1e7;
    --about-sand-dark: #e9ddc9;
    --about-foam: #ffffff;
    --about-ink: #17343a;
    --about-muted: #60757a;

    color: var(--about-ink);
    background: var(--about-foam);
}


/* =========================================================
   SHARED SECTION LABEL
========================================================= */

.about-page .section-label {
    display: inline-block;

    margin-bottom: 17px;

    color: var(--about-lagoon);

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

    letter-spacing: 0.17em;
    line-height: 1.2;
}


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

.about-hero {
    position: relative;

    min-height: 570px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        url("../images/about-water.jpg")
        center center / cover no-repeat;

    color: #ffffff;
}


.about-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 45, 58, 0.94) 0%,
            rgba(5, 45, 58, 0.78) 42%,
            rgba(5, 45, 58, 0.42) 72%,
            rgba(5, 45, 58, 0.18) 100%
        );

    pointer-events: none;
}


.about-hero::after {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -210px;
    bottom: -250px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 50%;

    pointer-events: none;
}


.about-hero .container {
    position: relative;

    z-index: 2;
}


.about-hero-content {
    max-width: 690px;

    padding: 80px 0;
}


.about-hero .section-label {
    color: rgba(255, 255, 255, 0.76);
}


.about-hero h1 {
    max-width: 690px;

    margin: 0 0 25px;

    color: #ffffff;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(48px, 6vw, 76px);

    font-weight: 600;

    line-height: 0.98;

    letter-spacing: -0.035em;
}


.about-hero h1 span {
    display: block;

    color: #9ee4df;
}


.about-hero p {
    max-width: 560px;

    margin: 0 0 30px;

    color: rgba(255, 255, 255, 0.83);

    font-size: 15px;

    line-height: 1.75;
}


.about-hero .btn-primary {
    display: inline-flex;

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

    padding: 13px 21px;

    border-radius: 6px;

    background: #ffffff;

    color: var(--about-deep);

    text-decoration: none;

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

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.about-hero .btn-primary:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.14);
}


/* =========================================================
   INTRODUCTION
========================================================= */

.about-intro {
    padding: 105px 0;

    background: #ffffff;
}


.about-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 80px;

    align-items: center;
}


.about-intro-content {
    max-width: 590px;
}


.about-intro h2 {
    margin: 0 0 27px;

    color: var(--about-deep);

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(40px, 4.5vw, 58px);

    font-weight: 600;

    line-height: 1.05;

    letter-spacing: -0.03em;
}


.about-intro p {
    margin: 0 0 17px;

    color: var(--about-muted);

    font-size: 15px;

    line-height: 1.8;
}


.about-intro p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   Introduction image
--------------------------------------------------------- */

.about-intro-visual {
    position: relative;
}


.about-image-main {
    position: relative;

    min-height: 510px;

    overflow: hidden;

    border-radius: 14px 14px 14px 5px;

    background: var(--about-sand);
}


.about-image-main img {
    width: 100%;
    height: 100%;

    min-height: 510px;

    display: block;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}


.about-image-main:hover img {
    transform: scale(1.025);
}


.about-image-caption {
    position: absolute;

    left: -28px;
    bottom: 28px;

    max-width: 285px;

    padding: 20px 22px;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 15px 40px rgba(5, 45, 58, 0.14);
}


.about-image-caption strong {
    display: block;

    margin-bottom: 5px;

    color: var(--about-deep);

    font-family:
        "Fraunces",
        Georgia,
        serif;

    font-size: 18px;

    font-weight: 600;

    line-height: 1.2;
}


.about-image-caption span {
    color: var(--about-muted);

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================================
   VALUES
========================================================= */

.about-values {
    padding: 100px 0 110px;

    background: var(--about-sand);
}


.about-values .section-heading {
    max-width: 690px;

    margin-bottom: 48px;
}


.about-values .section-heading h2,
.about-journey .section-heading h2 {
    margin: 0 0 17px;

    color: var(--about-deep);

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(40px, 4.5vw, 57px);

    font-weight: 600;

    line-height: 1.04;

    letter-spacing: -0.03em;
}


.about-values .section-heading p {
    max-width: 600px;

    margin: 0;

    color: var(--about-muted);

    font-size: 15px;

    line-height: 1.75;
}


/* ---------------------------------------------------------
   Value cards
--------------------------------------------------------- */

.about-values-grid {
    display: grid;

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

    gap: 16px;
}


.about-value-card {
    min-height: 275px;

    padding: 30px 25px;

    border: 1px solid rgba(7, 59, 76, 0.07);

    border-radius: 12px;

    background: #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.about-value-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 14px 35px rgba(7, 59, 76, 0.08);
}


.about-value-icon {
    width: 44px;
    height: 44px;

    display: flex;

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

    margin-bottom: 25px;

    border-radius: 50%;

    background: var(--about-lagoon-light);

    color: var(--about-lagoon);

    font-size: 21px;
}


.about-value-card h3 {
    margin: 0 0 11px;

    color: var(--about-deep);

    font-family:
        "Fraunces",
        Georgia,
        serif;

    font-size: 23px;

    font-weight: 600;

    line-height: 1.15;
}


.about-value-card p {
    margin: 0;

    color: var(--about-muted);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   EXPERIENCE JOURNEY
========================================================= */

.about-journey {
    padding: 105px 0;

    background: #ffffff;
}


.about-journey .section-heading {
    max-width: 650px;

    margin-bottom: 55px;
}


.about-journey-grid {
    display: grid;

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


.about-journey-item {
    position: relative;

    min-height: 155px;

    padding: 0 30px;
}


.about-journey-item:first-child {
    padding-left: 0;
}


.about-journey-item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 20px;
    right: 0;

    width: 1px;
    height: 105px;

    background: var(--about-sand-dark);
}


.journey-number {
    display: block;

    margin-bottom: 20px;

    color: var(--about-lagoon);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.14em;
}


.about-journey-item h3 {
    margin: 0 0 10px;

    color: var(--about-deep);

    font-family:
        "Fraunces",
        Georgia,
        serif;

    font-size: 27px;

    font-weight: 600;

    line-height: 1.1;
}


.about-journey-item p {
    max-width: 210px;

    margin: 0;

    color: var(--about-muted);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   ANDAMANS FEATURE
========================================================= */

.about-andamans {
    position: relative;

    min-height: 530px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(5, 45, 58, 0.93) 0%,
            rgba(5, 45, 58, 0.70) 50%,
            rgba(5, 45, 58, 0.25) 100%
        ),
        url("../images/about-andamans.jpg")
        center center / cover no-repeat;

    color: #ffffff;
}


.about-andamans::before {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    left: -170px;
    top: -180px;

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 50%;

    pointer-events: none;
}


.about-andamans .container {
    position: relative;

    z-index: 2;
}


.about-andamans-content {
    max-width: 650px;

    padding: 75px 0;
}


.about-andamans .section-label {
    color: rgba(255, 255, 255, 0.73);
}


.about-andamans h2 {
    max-width: 630px;

    margin: 0 0 22px;

    color: #ffffff;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(44px, 5vw, 68px);

    font-weight: 600;

    line-height: 0.99;

    letter-spacing: -0.035em;
}


.about-andamans p {
    max-width: 530px;

    margin: 0 0 30px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 15px;

    line-height: 1.75;
}


.about-andamans .btn-light {
    display: inline-flex;

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

    padding: 13px 21px;

    border-radius: 6px;

    background: #ffffff;

    color: var(--about-deep);

    text-decoration: none;

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

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.about-andamans .btn-light:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.14);
}


/* =========================================================
   ACHIEVEMENTS
========================================================= */

.about-achievements {
    padding: 95px 0;

    background: var(--about-deep);

    color: #ffffff;
}


.about-achievements-heading {
    max-width: 700px;

    margin-bottom: 48px;
}


.about-achievements-heading .section-label {
    color: #8fe1d7;
}


.about-achievements-heading h2 {
    margin: 0 0 18px;

    color: #ffffff;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(40px, 4.5vw, 57px);

    font-weight: 600;

    line-height: 1.04;

    letter-spacing: -0.03em;
}


.about-achievements-heading p {
    max-width: 600px;

    margin: 0;

    color: rgba(255, 255, 255, 0.70);

    font-size: 14px;

    line-height: 1.75;
}


/* ---------------------------------------------------------
   Achievement numbers
--------------------------------------------------------- */

.about-achievements-grid {
    display: grid;

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

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

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


.about-achievement {
    padding: 35px 20px;

    text-align: center;
}


.about-achievement + .about-achievement {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}


.about-achievement strong {
    display: block;

    margin-bottom: 9px;

    color: #8fe1d7;

    font-family:
        "Fraunces",
        Georgia,
        serif;

    font-size: clamp(38px, 4vw, 51px);

    font-weight: 600;

    line-height: 1;
}


.about-achievement span {
    display: block;

    color: rgba(255, 255, 255, 0.66);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


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

.about-cta {
    padding: 95px 0;

    background: var(--about-sand);
}


.about-cta-inner {
    max-width: 700px;

    margin: 0 auto;

    text-align: center;
}


.about-cta h2 {
    margin: 0 0 18px;

    color: var(--about-deep);

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(42px, 5vw, 64px);

    font-weight: 600;

    line-height: 1;

    letter-spacing: -0.035em;
}


.about-cta p {
    max-width: 500px;

    margin: 0 auto 28px;

    color: var(--about-muted);

    font-size: 15px;

    line-height: 1.7;
}


.about-cta .btn-primary {
    display: inline-flex;

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

    padding: 13px 21px;

    border-radius: 6px;

    background: var(--about-deep);

    color: #ffffff;

    text-decoration: none;

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

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.about-cta .btn-primary:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(7, 59, 76, 0.16);
}


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

@media (max-width: 1050px) {

    .about-intro-grid {
        gap: 55px;
    }


    .about-values-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .about-value-card {
        min-height: 250px;
    }

}


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

@media (max-width: 850px) {

    .about-hero {
        min-height: 520px;
    }


    .about-intro {
        padding: 85px 0;
    }


    .about-intro-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .about-intro-content {
        max-width: 700px;
    }


    .about-image-main,
    .about-image-main img {
        min-height: 450px;
    }


    .about-image-caption {
        left: 20px;
    }


    .about-journey {
        padding: 85px 0;
    }


    .about-journey-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 45px 0;
    }


    .about-journey-item:nth-child(2)::after {
        display: none;
    }


    .about-journey-item:nth-child(3) {
        padding-left: 0;
    }


    .about-journey-item:nth-child(3)::before {
        content: "";

        position: absolute;

        top: -22px;
        left: 0;

        width: calc(200% - 30px);

        height: 1px;

        background: var(--about-sand-dark);
    }


    .about-achievements-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .about-achievement:nth-child(3),
    .about-achievement:nth-child(4) {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }


    .about-achievement:nth-child(3) {
        border-left: none;
    }

}


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

@media (max-width: 600px) {

    .about-hero {
        min-height: 500px;

        background-position: 62% center;
    }


    .about-hero-content {
        padding: 55px 0;
    }


    .about-hero h1 {
        font-size: 46px;

        line-height: 1;
    }


    .about-hero p {
        max-width: 380px;

        font-size: 14px;

        line-height: 1.65;
    }


    .about-intro {
        padding: 65px 0;
    }


    .about-intro h2 {
        font-size: 40px;
    }


    .about-intro p {
        font-size: 14px;

        line-height: 1.75;
    }


    .about-intro-grid {
        gap: 35px;
    }


    .about-image-main,
    .about-image-main img {
        min-height: 360px;
    }


    .about-image-caption {
        position: relative;

        left: auto;
        bottom: auto;

        width: calc(100% - 36px);

        max-width: none;

        margin:
            -30px 18px 0;

        z-index: 2;
    }


    .about-values {
        padding: 70px 0;
    }


    .about-values .section-heading {
        margin-bottom: 35px;
    }


    .about-values .section-heading h2,
    .about-journey .section-heading h2 {
        font-size: 40px;
    }


    .about-values-grid {
        grid-template-columns: 1fr;
    }


    .about-value-card {
        min-height: auto;

        padding: 27px 23px;
    }


    .about-journey {
        padding: 70px 0;
    }


    .about-journey-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .about-journey-item,
    .about-journey-item:first-child,
    .about-journey-item:nth-child(3) {
        min-height: auto;

        padding: 23px 0;
    }


    .about-journey-item:first-child {
        padding-top: 0;
    }


    .about-journey-item:not(:last-child)::after,
    .about-journey-item:nth-child(3)::before {
        display: none;
    }


    .about-journey-item + .about-journey-item {
        border-top: 1px solid #e8eeee;
    }


    .about-andamans {
        min-height: 500px;

        background-position: 60% center;
    }


    .about-andamans-content {
        padding: 65px 0;
    }


    .about-andamans h2 {
        font-size: 44px;
    }


    .about-andamans p {
        font-size: 14px;
    }


    .about-achievements {
        padding: 70px 0;
    }


    .about-achievements-heading {
        margin-bottom: 38px;
    }


    .about-achievements-heading h2 {
        font-size: 40px;
    }


    .about-achievements-grid {
        grid-template-columns: 1fr;
    }


    .about-achievement,
    .about-achievement:nth-child(3),
    .about-achievement:nth-child(4) {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }


    .about-achievement:first-child {
        border-top: none;
    }


    .about-achievement {
        padding: 28px 20px;
    }


    .about-cta {
        padding: 70px 0;
    }


    .about-cta h2 {
        font-size: 44px;
    }


    .about-cta p {
        font-size: 14px;
    }

}


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

@media (max-width: 420px) {

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


    .about-hero-content {
        padding: 45px 0;
    }


    .about-story-note,
    .about-image-caption {
        padding: 17px 18px;
    }


    .about-andamans h2 {
        font-size: 40px;
    }

}

/* =========================================================
   CONTACT PAGE
   Water Activity Website
   Premium Editorial Island Style
========================================================= */

.contact-page {

    --contact-deep: #073b4c;
    --contact-deep-dark: #052d3a;

    --contact-lagoon: #159a9c;
    --contact-lagoon-light: #dff5f3;

    --contact-sand: #f7f1e7;
    --contact-sand-dark: #e9ddc9;

    --contact-white: #ffffff;
    --contact-ink: #17343a;
    --contact-muted: #60757a;

    --contact-border: #d8e5e5;

    color: var(--contact-ink);
    background: var(--contact-white);
}


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

.contact-hero {

    position: relative;

    min-height: 500px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(5, 45, 58, 0.95) 0%,
            rgba(5, 45, 58, 0.80) 46%,
            rgba(5, 45, 58, 0.42) 75%,
            rgba(5, 45, 58, 0.18) 100%
        ),
        url("../images/about-water.jpg")
        center center / cover no-repeat;

    color: #fff;
}


.contact-hero::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -240px;
    bottom: -320px;

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 50%;

    pointer-events: none;
}


.contact-hero::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -150px;
    bottom: -210px;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 50%;

    pointer-events: none;
}


.contact-hero .container {

    position: relative;

    z-index: 2;
}


.contact-hero-content {

    max-width: 720px;

    padding: 90px 0;
}


.contact-hero .section-label {

    display: inline-block;

    margin-bottom: 20px;

    color: rgba(255, 255, 255, 0.70);

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

    letter-spacing: 0.20em;
}


.contact-hero h1 {

    margin: 0 0 25px;

    color: #fff;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(48px, 6vw, 76px);

    line-height: 0.98;

    letter-spacing: -0.04em;

    font-weight: 600;
}


.contact-hero h1 span {

    display: block;

    color: #9ee4df;
}


.contact-hero p {

    max-width: 590px;

    margin: 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   QUICK CONTACT CARDS
========================================================= */

.contact-info-section {

    position: relative;

    z-index: 5;

    margin-top: -45px;

    padding-bottom: 85px;
}


.contact-info-grid {

    display: grid;

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

    gap: 14px;
}


.contact-info-card {

    min-height: 125px;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 22px;

    background: rgba(255, 255, 255, 0.98);

    border: 1px solid rgba(7, 59, 76, 0.08);

    border-radius: 16px;

    color: inherit;

    text-decoration: none;

    box-shadow:
        0 16px 42px rgba(7, 59, 76, 0.11);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


a.contact-info-card:hover {

    transform: translateY(-4px);

    border-color:
        rgba(21, 154, 156, 0.24);

    box-shadow:
        0 20px 48px rgba(7, 59, 76, 0.14);
}


.contact-info-icon {

    flex: 0 0 auto;

    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    background: var(--contact-lagoon-light);

    color: var(--contact-lagoon);

    font-size: 19px;
}


.contact-info-content {

    min-width: 0;
}


.contact-info-label {

    display: block;

    margin-bottom: 5px;

    color: var(--contact-muted);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.16em;
}


.contact-info-value {

    display: block;

    color: var(--contact-deep);

    font-size: 14px;

    font-weight: 700;

    line-height: 1.4;

    overflow-wrap: anywhere;
}


.contact-info-action {

    display: block;

    margin-top: 5px;

    color: var(--contact-lagoon);

    font-size: 11px;

    font-weight: 700;
}


a.contact-info-card:hover
.contact-info-action {

    text-decoration: underline;
}


/* =========================================================
   MAIN CONTACT SECTION
========================================================= */

.contact-main-section {

    padding: 20px 0 115px;

    background:
        linear-gradient(
            180deg,
            #f1f9f8 0%,
            #ffffff 24%,
            #ffffff 100%
        );
}


.contact-main-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 35px;

    align-items: stretch;
}


/* =========================================================
   CONTACT FORM CARD
========================================================= */

.contact-form-card {

    padding: 48px;

    background: #fff;

    border: 1px solid rgba(7, 59, 76, 0.08);

    border-radius: 22px;

    box-shadow:
        0 18px 55px rgba(7, 59, 76, 0.07);
}


.contact-form-heading {

    margin-bottom: 32px;
}


.contact-form-card .section-label,
.contact-location-header .section-label,
.contact-help-header .section-label,
.contact-cta .section-label {

    display: inline-block;

    margin-bottom: 14px;

    color: var(--contact-lagoon);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.18em;
}


.contact-form-card h2,
.contact-location-header h2 {

    margin: 0 0 14px;

    color: var(--contact-deep);

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(36px, 4vw, 50px);

    line-height: 1.03;

    letter-spacing: -0.035em;

    font-weight: 600;
}


.contact-form-card h2 span,
.contact-location-header h2 span {

    display: block;

    color: var(--contact-lagoon);
}


.contact-form-intro {

    max-width: 510px;

    margin: 0;

    color: var(--contact-muted);

    font-size: 14px;

    line-height: 1.75;
}


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

.contact-form {

    display: flex;

    flex-direction: column;

    gap: 19px;
}


.contact-form-row {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.contact-field {

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.contact-field label {

    color: var(--contact-deep);

    font-size: 12px;

    font-weight: 700;
}


.contact-field input,
.contact-field select,
.contact-field textarea {

    width: 100%;

    padding: 13px 15px;

    border: 1px solid #dce5e6;

    border-radius: 9px;

    background: #fbfcfc;

    color: var(--contact-ink);

    font-family: inherit;

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.contact-field select {

    appearance: none;

    padding-right: 42px;

    cursor: pointer;

    background-image:
        linear-gradient(45deg, transparent 50%, #60757a 50%),
        linear-gradient(135deg, #60757a 50%, transparent 50%);

    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;
}


.contact-field textarea {

    min-height: 145px;

    resize: vertical;

    line-height: 1.6;
}


.contact-field input::placeholder,
.contact-field textarea::placeholder {

    color: #9aaeb1;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {

    border-color: var(--contact-lagoon);

    background: #fff;

    box-shadow:
        0 0 0 3px rgba(21, 154, 156, 0.10);
}


/* =========================================================
   FORM SUBMIT
========================================================= */

.contact-form-submit {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 4px;
}


.contact-form-submit .btn {

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;
}


.contact-form-submit .btn span {

    font-size: 17px;

    transition:
        transform 0.2s ease;
}


.contact-form-submit .btn:hover span {

    transform: translateX(3px);
}


.contact-form-submit p {

    max-width: 240px;

    margin: 0;

    color: var(--contact-muted);

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================================
   LOCATION CARD
========================================================= */

.contact-location-card {

    overflow: hidden;

    display: flex;

    flex-direction: column;

    background: var(--contact-sand);

    border-radius: 22px;

    box-shadow:
        0 18px 50px rgba(7, 59, 76, 0.06);
}


.contact-location-header {

    padding: 45px 45px 30px;
}


.contact-location-header h2 {

    margin-bottom: 25px;
}


/* =========================================================
   ADDRESS
========================================================= */

.contact-address {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding-top: 4px;
}


.contact-address-icon {

    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.72);

    font-size: 18px;
}


.contact-address strong {

    display: block;

    margin-bottom: 5px;

    color: var(--contact-deep);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.contact-address p {

    max-width: 450px;

    margin: 0;

    color: var(--contact-muted);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   MAP
========================================================= */

.contact-map {

    flex: 1;

    min-height: 350px;

    overflow: hidden;

    background: #dcebea;
}


.contact-map iframe {

    width: 100%;

    height: 100%;

    min-height: 350px;

    display: block;

    border: 0;
}


.contact-map-placeholder {

    min-height: 350px;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 30px;

    color: var(--contact-muted);

    text-align: center;
}


.contact-map-placeholder span {

    width: 64px;
    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 14px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.68);

    font-size: 25px;
}


.contact-map-placeholder p {

    margin: 0;

    font-size: 13px;
}


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

.contact-location-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 20px 28px;

    background: rgba(255, 255, 255, 0.58);

    border-top: 1px solid rgba(7, 59, 76, 0.07);
}


.contact-location-footer div {

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.contact-location-footer span {

    color: var(--contact-muted);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.15em;
}


.contact-location-footer strong {

    color: var(--contact-deep);

    font-size: 12px;

    font-weight: 700;
}


.contact-location-footer a {

    color: var(--contact-lagoon);

    font-size: 12px;

    font-weight: 800;

    text-decoration: none;
}


.contact-location-footer a:hover {

    text-decoration: underline;
}


/* =========================================================
   QUICK HELP
========================================================= */

.contact-help-section {

    padding: 110px 0;

    background:
        linear-gradient(
            180deg,
            #f7f1e7 0%,
            #fbf8f3 100%
        );
}


.contact-help-header {

    max-width: 700px;

    margin-bottom: 45px;
}


.contact-help-header h2 {

    margin: 0 0 16px;

    color: var(--contact-deep);

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(38px, 4vw, 55px);

    line-height: 1.03;

    letter-spacing: -0.035em;

    font-weight: 600;
}


.contact-help-header h2 span {

    display: block;

    color: var(--contact-lagoon);
}


.contact-help-header p {

    max-width: 610px;

    margin: 0;

    color: var(--contact-muted);

    font-size: 15px;

    line-height: 1.75;
}


.contact-help-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


.contact-help-card {

    position: relative;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 30px;

    background: #fff;

    border: 1px solid rgba(7, 59, 76, 0.07);

    border-radius: 16px;

    color: inherit;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.contact-help-card:hover {

    transform: translateY(-4px);

    border-color:
        rgba(21, 154, 156, 0.20);

    box-shadow:
        0 18px 45px rgba(7, 59, 76, 0.10);
}


.contact-help-icon {

    flex: 0 0 auto;

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--contact-lagoon-light);

    color: var(--contact-lagoon);

    font-size: 22px;
}


.contact-help-card div {

    min-width: 0;
}


.contact-help-label {

    display: block;

    margin-bottom: 4px;

    color: var(--contact-lagoon);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.16em;
}


.contact-help-card h3 {

    margin: 0 0 7px;

    color: var(--contact-deep);

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 23px;

    line-height: 1.15;

    font-weight: 600;
}


.contact-help-card p {

    max-width: 420px;

    margin: 0;

    color: var(--contact-muted);

    font-size: 13px;

    line-height: 1.6;
}


.contact-help-arrow {

    flex: 0 0 auto;

    margin-left: auto;

    color: var(--contact-lagoon);

    font-size: 22px;

    transition:
        transform 0.2s ease;
}


.contact-help-card:hover
.contact-help-arrow {

    transform: translateX(4px);
}


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

.contact-cta {

    position: relative;

    overflow: hidden;

    padding: 110px 0;

    background:
        linear-gradient(
            135deg,
            var(--contact-deep-dark),
            var(--contact-deep)
        );

    color: #fff;

    text-align: center;
}


.contact-cta::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -210px;
    top: -300px;

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 50%;

    pointer-events: none;
}


.contact-cta::after {

    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    right: -150px;
    bottom: -250px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


.contact-cta .container {

    position: relative;

    z-index: 2;
}


.contact-cta-inner {

    max-width: 760px;

    margin: 0 auto;
}


.contact-cta .section-label {

    color: #8edbd6;
}


.contact-cta h2 {

    margin: 0 0 32px;

    color: #fff;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(44px, 5vw, 68px);

    line-height: 1;

    letter-spacing: -0.04em;

    font-weight: 600;
}


.contact-cta h2 span {

    display: block;

    color: #9ee4df;
}


/* =========================================================
   BUTTON FALLBACK
   Only applies if global .btn styles don't already handle it
========================================================= */

.contact-page .btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 13px 22px;

    border: 0;

    border-radius: 8px;

    background: var(--contact-lagoon);

    color: #fff;

    font-size: 12px;

    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

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


.contact-page .btn-primary:hover {

    background: #117f81;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(21, 154, 156, 0.22);
}


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

@media (max-width: 1100px) {

    .contact-info-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 900px) {

    .contact-main-grid {

        grid-template-columns: 1fr;
    }


    .contact-form-card {

        padding: 40px;
    }


    .contact-location-card {

        min-height: auto;
    }


    .contact-location-header {

        padding: 40px;
    }


    .contact-map,
    .contact-map iframe,
    .contact-map-placeholder {

        min-height: 360px;
    }

}


@media (max-width: 700px) {

    .contact-info-section {

        margin-top: -25px;
    }


    .contact-form-row {

        grid-template-columns: 1fr;
    }


    .contact-help-grid {

        grid-template-columns: 1fr;
    }

}


@media (max-width: 640px) {

    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .contact-hero {

        min-height: 530px;

        background-position: 60% center;
    }


    .contact-hero-content {

        padding: 70px 0;
    }


    .contact-hero h1 {

        font-size: 48px;
    }


    .contact-hero p {

        max-width: 500px;

        font-size: 15px;
    }


    /* -----------------------------------------
       CONTACT CARDS
    ----------------------------------------- */

    .contact-info-section {

        padding-bottom: 55px;
    }


    .contact-info-grid {

        grid-template-columns: 1fr;

        gap: 10px;
    }


    .contact-info-card {

        min-height: 96px;

        padding: 18px;
    }


    /* -----------------------------------------
       MAIN SECTION
    ----------------------------------------- */

    .contact-main-section {

        padding-top: 10px;

        padding-bottom: 75px;
    }


    .contact-form-card {

        padding: 30px 22px;

        border-radius: 17px;
    }


    .contact-form-card h2,
    .contact-location-header h2 {

        font-size: 38px;
    }


    .contact-form-submit {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }


    .contact-form-submit p {

        max-width: 100%;
    }


    /* -----------------------------------------
       LOCATION
    ----------------------------------------- */

    .contact-location-card {

        border-radius: 17px;
    }


    .contact-location-header {

        padding: 32px 24px 26px;
    }


    .contact-map,
    .contact-map iframe,
    .contact-map-placeholder {

        min-height: 320px;
    }


    .contact-location-footer {

        align-items: flex-start;

        flex-direction: column;

        padding: 18px 22px;
    }


    /* -----------------------------------------
       QUICK HELP
    ----------------------------------------- */

    .contact-help-section {

        padding: 75px 0;
    }


    .contact-help-header {

        margin-bottom: 32px;
    }


    .contact-help-header h2 {

        font-size: 40px;
    }


    .contact-help-card {

        padding: 24px 20px;

        gap: 15px;
    }


    .contact-help-icon {

        width: 44px;
        height: 44px;

        font-size: 19px;
    }


    .contact-help-card h3 {

        font-size: 21px;
    }


    .contact-help-arrow {

        font-size: 19px;
    }


    /* -----------------------------------------
       CTA
    ----------------------------------------- */

    .contact-cta {

        padding: 80px 0;
    }


    .contact-cta h2 {

        font-size: 45px;
    }

}



/* =========================================================
   GALLERY PAGE
========================================================= */

.gallery-page {
    --gallery-deep: #073b4c;
    --gallery-deep-dark: #052d3a;
    --gallery-lagoon: #159a9c;
    --gallery-lagoon-light: #dff5f3;
    --gallery-sand: #f7f1e7;
    --gallery-sand-dark: #e9ddc9;
    --gallery-white: #ffffff;
    --gallery-ink: #17343a;
    --gallery-muted: #60757a;

    color: var(--gallery-ink);
    background: var(--gallery-white);
}


/* =========================================================
   COMMON
========================================================= */

.gallery-page .container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.gallery-page .section-label {
    display: inline-block;

    margin-bottom: 14px;

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: var(--gallery-lagoon);
}


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

.gallery-hero {
    position: relative;

    min-height: 540px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(5, 45, 58, 0.94) 0%,
            rgba(5, 45, 58, 0.78) 42%,
            rgba(5, 45, 58, 0.38) 72%,
            rgba(5, 45, 58, 0.18) 100%
        ),
        url("../images/gallery-hero.jpg")
        center center / cover no-repeat;
}


/* subtle depth at the bottom */
.gallery-hero::after {
    content: "";

    position: absolute;
    inset: auto 0 0;

    height: 120px;

    background: linear-gradient(
        to top,
        rgba(5, 45, 58, 0.35),
        transparent
    );

    pointer-events: none;
}


.gallery-hero .container {
    position: relative;
    z-index: 2;
}


.gallery-hero-content {
    max-width: 690px;

    padding: 90px 0;
}


.gallery-hero .section-label {
    color: #9de2df;
}


.gallery-hero h1 {
    margin: 0;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(48px, 6vw, 78px);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.035em;

    color: var(--gallery-white);
}


.gallery-hero h1 span {
    display: block;

    color: #73d4d0;
}


.gallery-hero p {
    max-width: 570px;

    margin: 28px 0 0;

    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1.75;

    color: rgba(255, 255, 255, 0.82);
}


/* =========================================================
   GALLERY SECTION
========================================================= */

.gallery-section {
    padding: 100px 0 120px;

    background: var(--gallery-white);
}


.gallery-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;

    margin-bottom: 52px;
}


.gallery-header h2 {
    margin: 0;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(34px, 4vw, 52px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.025em;

    color: var(--gallery-deep);
}


/* =========================================================
   FILTERS
========================================================= */

.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    padding-bottom: 3px;
}


.gallery-filter {
    appearance: none;

    border: 1px solid #d6e3e3;
    border-radius: 999px;

    padding: 10px 18px;

    background: transparent;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;

    color: var(--gallery-muted);

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.gallery-filter:hover {
    border-color: var(--gallery-lagoon);
    color: var(--gallery-deep);
}


.gallery-filter.active {
    border-color: var(--gallery-deep);

    background: var(--gallery-deep);

    color: var(--gallery-white);
}


.gallery-filter:active {
    transform: translateY(1px);
}


/* =========================================================
   GALLERY GRID
========================================================= */

.gallery-grid {
    display: grid;

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

    grid-auto-rows: 250px;

    gap: 16px;
}


.gallery-item {
    position: relative;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border-radius: 12px;

    background: #e8eeee;
}


/* first image becomes larger */
.gallery-item-large {
    grid-column: span 2;
    grid-row: span 2;
}


.gallery-image-button {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    padding: 0;
    border: 0;

    background: transparent;

    cursor: pointer;

    overflow: hidden;
}


.gallery-image-button img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.4s ease;
}


.gallery-image-button:hover img {
    transform: scale(1.045);

    filter: saturate(1.05);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.gallery-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    padding: 22px;

    background:
        linear-gradient(
            to top,
            rgba(5, 45, 58, 0.86) 0%,
            rgba(5, 45, 58, 0.32) 42%,
            transparent 72%
        );

    text-align: left;

    opacity: 0;

    transition: opacity 0.3s ease;
}


.gallery-image-button:hover .gallery-overlay,
.gallery-image-button:focus-visible .gallery-overlay {
    opacity: 1;
}


.gallery-overlay-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.gallery-overlay-content strong {
    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 22px;
    font-weight: 500;

    color: var(--gallery-white);
}


.gallery-overlay-content > span {
    font-family: Arial, sans-serif;

    font-size: 12px;
    line-height: 1.4;

    color: rgba(255, 255, 255, 0.76);
}


.gallery-view-icon {
    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    font-size: 18px;
    color: var(--gallery-white);

    backdrop-filter: blur(5px);
}


/* keyboard accessibility */
.gallery-image-button:focus-visible {
    outline: 3px solid var(--gallery-lagoon);
    outline-offset: -3px;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.gallery-empty {
    margin-top: 30px;

    padding: 80px 30px;

    border: 1px dashed #cbdada;
    border-radius: 14px;

    background: #f8fbfb;

    text-align: center;
}


.gallery-empty-icon {
    margin-bottom: 18px;

    font-size: 34px;

    color: var(--gallery-lagoon);
}


.gallery-empty h3 {
    margin: 0 0 8px;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 28px;
    font-weight: 500;

    color: var(--gallery-deep);
}


.gallery-empty p {
    margin: 0;

    font-size: 14px;
    line-height: 1.6;

    color: var(--gallery-muted);
}


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

.gallery-cta {
    padding: 100px 0;

    background: var(--gallery-sand);
}


.gallery-cta-inner {
    max-width: 760px;

    margin: 0 auto;

    text-align: center;
}


.gallery-cta .section-label {
    color: var(--gallery-lagoon);
}


.gallery-cta h2 {
    margin: 0;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(40px, 5vw, 64px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;

    color: var(--gallery-deep);
}


.gallery-cta h2 span {
    display: block;

    color: var(--gallery-lagoon);
}


.gallery-cta .btn {
    display: inline-flex;

    margin-top: 30px;
}


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

.gallery-lightbox {
    position: fixed;
    inset: 0;

    z-index: 9999;

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

    padding: 30px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
}


.gallery-lightbox-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(5, 32, 40, 0.92);

    backdrop-filter: blur(8px);
}


.gallery-lightbox-content {
    position: relative;
    z-index: 2;

    width: min(1000px, 100%);

    display: flex;
    flex-direction: column;
    align-items: center;

    transform: translateY(15px) scale(0.98);

    transition: transform 0.3s ease;
}


.gallery-lightbox.active .gallery-lightbox-content {
    transform: translateY(0) scale(1);
}


.gallery-lightbox-content img {
    display: block;

    max-width: 100%;
    max-height: 78vh;

    object-fit: contain;

    border-radius: 8px;

    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
}


.gallery-lightbox-close {
    position: absolute;
    top: -52px;
    right: 0;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    font-size: 27px;
    font-weight: 300;
    line-height: 1;

    color: var(--gallery-white);

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.gallery-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.16);

    transform: rotate(90deg);
}


.gallery-lightbox-title {
    margin-top: 15px;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 20px;

    color: var(--gallery-white);

    text-align: center;
}


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

@media (max-width: 1050px) {

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

}


@media (max-width: 850px) {

    .gallery-hero {
        min-height: 500px;
    }

    .gallery-header {
        align-items: flex-start;
        flex-direction: column;

        margin-bottom: 38px;
    }

    .gallery-filters {
        width: 100%;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);

        grid-auto-rows: 230px;
    }

}


@media (max-width: 600px) {

    .gallery-page .container {
        width: min(100% - 32px, 1180px);
    }

    .gallery-hero {
        min-height: 470px;

        background-position: 60% center;
    }

    .gallery-hero-content {
        padding: 70px 0;
    }

    .gallery-hero h1 {
        font-size: 46px;
    }

    .gallery-hero p {
        font-size: 15px;
        line-height: 1.65;
    }

    .gallery-section {
        padding: 70px 0 80px;
    }

    .gallery-header h2 {
        font-size: 36px;
    }

    .gallery-filters {
        gap: 6px;
    }

    .gallery-filter {
        padding: 9px 14px;

        font-size: 11px;
    }

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

        grid-auto-rows: 280px;

        gap: 12px;
    }

    .gallery-item-large {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery-overlay {
        opacity: 1;

        padding: 18px;
    }

    .gallery-overlay-content strong {
        font-size: 19px;
    }

    .gallery-cta {
        padding: 75px 0;
    }

    .gallery-cta h2 {
        font-size: 42px;
    }

    .gallery-lightbox {
        padding: 20px;
    }

    .gallery-lightbox-close {
        top: -52px;
        right: 0;
    }

}


@media (max-width: 400px) {

    .gallery-hero h1 {
        font-size: 40px;
    }

    .gallery-grid {
        grid-auto-rows: 250px;
    }

}

/* =========================================================
   GALLERY GRID
========================================================= */

.gallery-grid {
    display: grid;

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

    grid-auto-rows: 230px;

    gap: 14px;
}


/* ---------------------------------------------------------
   GALLERY ITEM
--------------------------------------------------------- */

.gallery-item {
    position: relative;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border-radius: 12px;

    background: #e7eeee;

    animation: galleryItemIn 0.5s ease both;
}


.gallery-item:nth-child(2) {
    animation-delay: 0.04s;
}

.gallery-item:nth-child(3) {
    animation-delay: 0.08s;
}

.gallery-item:nth-child(4) {
    animation-delay: 0.12s;
}

.gallery-item:nth-child(5) {
    animation-delay: 0.16s;
}

.gallery-item:nth-child(6) {
    animation-delay: 0.20s;
}


/* Large feature image */

.gallery-item-large {
    grid-column: span 2;
    grid-row: span 2;
}


/* ---------------------------------------------------------
   IMAGE BUTTON
--------------------------------------------------------- */

.gallery-image-button {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    padding: 0;
    border: 0;

    overflow: hidden;

    background: transparent;

    cursor: pointer;

    text-align: left;
}


.gallery-image-button img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1);

    transition:
        transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.4s ease;
}


.gallery-image-button:hover img {
    transform: scale(1.06);

    filter: saturate(1.08);
}


/* ---------------------------------------------------------
   IMAGE OVERLAY
--------------------------------------------------------- */

.gallery-overlay {
    position: absolute;
    inset: 0;

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

    gap: 20px;

    padding: 24px;

    background:
        linear-gradient(
            to top,
            rgba(5, 45, 58, 0.92) 0%,
            rgba(5, 45, 58, 0.58) 25%,
            rgba(5, 45, 58, 0.08) 65%,
            transparent 100%
        );

    opacity: 0;

    transition: opacity 0.3s ease;
}


.gallery-image-button:hover .gallery-overlay,
.gallery-image-button:focus-visible .gallery-overlay {
    opacity: 1;
}


/* ---------------------------------------------------------
   OVERLAY CONTENT
--------------------------------------------------------- */

.gallery-overlay-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;
}


.gallery-overlay-content strong {
    display: block;

    overflow: hidden;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 23px;
    font-weight: 500;
    line-height: 1.15;

    color: #ffffff;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.gallery-overlay-content > span {
    display: block;

    overflow: hidden;

    font-family: Arial, sans-serif;

    font-size: 12px;
    line-height: 1.4;

    color: rgba(255, 255, 255, 0.78);

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   VIEW ICON
--------------------------------------------------------- */

.gallery-view-icon {
    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.10);

    font-size: 18px;
    line-height: 1;

    color: #ffffff;

    backdrop-filter: blur(6px);

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.gallery-image-button:hover .gallery-view-icon {
    background: rgba(255, 255, 255, 0.18);

    transform: translate(2px, -2px);
}


/* ---------------------------------------------------------
   ACCESSIBILITY
--------------------------------------------------------- */

.gallery-image-button:focus-visible {
    outline: 3px solid var(--gallery-lagoon);

    outline-offset: -3px;
}


/* ---------------------------------------------------------
   ENTRANCE ANIMATION
--------------------------------------------------------- */

@keyframes galleryItemIn {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

@media (max-width: 1050px) {

    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 850px) {

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        grid-auto-rows: 220px;
    }

}


@media (max-width: 600px) {

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

        grid-auto-rows: 280px;

        gap: 12px;
    }


    .gallery-item-large {
        grid-column: span 1;
        grid-row: span 1;
    }


    .gallery-overlay {
        padding: 18px;

        opacity: 1;
    }


    .gallery-overlay-content strong {
        font-size: 20px;
    }


    .gallery-view-icon {
        width: 36px;
        height: 36px;

        font-size: 16px;
    }

}

.gallery-item.is-hidden {
    display: none;
}

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

.vehicles-hero {
    position: relative;

    min-height: 440px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        url("../assets/images/vehicles/vehicles-hero.jpg")
        center center / cover no-repeat;

    color: #ffffff;
}


/* ---------------------------------------------------------
   Overlay
--------------------------------------------------------- */

.vehicles-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 45, 58, 0.94) 0%,
            rgba(5, 45, 58, 0.78) 40%,
            rgba(5, 45, 58, 0.42) 72%,
            rgba(5, 45, 58, 0.18) 100%
        );

    pointer-events: none;
}


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

.vehicles-hero-inner {
    position: relative;
    z-index: 2;

    padding-top: 30px;
    padding-bottom: 65px;
}


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

.vehicles-hero-content {
    width: min(650px, 100%);

    padding: 70px 0;
}


/* ---------------------------------------------------------
   Eyebrow
--------------------------------------------------------- */

.vehicles-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 19px;

    color: #d8f3ee;

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

    letter-spacing: 0.16em;
    line-height: 1;
}


.vehicles-eyebrow > span {
    width: 32px;
    height: 1px;

    display: inline-block;

    background: #8edfd1;
}


/* ---------------------------------------------------------
   Heading
--------------------------------------------------------- */

.vehicles-hero h1 {

    margin: 0;

    color: #ffffff;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(52px, 6vw, 78px);

    font-weight: 500;

    line-height: 0.94;

    letter-spacing: -0.025em;
}


.vehicles-hero h1 em {
    display: block;

    color: #c9e7e7;

    font-style: italic;
    font-weight: 400;
}


/* ---------------------------------------------------------
   Description
--------------------------------------------------------- */

.vehicles-hero p {
    max-width: 510px;

    margin: 24px 0 0px;

    color: rgba(255, 255, 255, 0.84);

    font-size: 16px;
    line-height: 1.65;
}


/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */

.vehicles-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 13px 20px;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;

    background: #ffffff;

    color: #073b4c;

    text-decoration: none;

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

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


.vehicles-hero-cta span {
    font-size: 17px;

    transition:
        transform 0.25s ease;
}


.vehicles-hero-cta:hover {
    transform: translateY(-2px);

    background: #dff5f3;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.12);
}


.vehicles-hero-cta:hover span {
    transform: translateX(4px);
}


/* =========================================================
   VEHICLES HERO RESPONSIVE
========================================================= */

@media (max-width: 750px) {

    .vehicles-hero {
        min-height: 470px;
        background-position: center center;
    }

    .vehicles-hero-inner {
        min-height: 470px;
    }

    .vehicles-hero-content {
        padding: 55px 0;
    }

    .vehicles-hero h1 {
        font-size: clamp(45px, 11vw, 62px);
    }


    .vehicles-hero p {
        max-width: 430px;

        margin-top: 20px;

        font-size: 14px;
        line-height: 1.6;
    }

}


@media (max-width: 600px) {

    .vehicles-hero {
        min-height: 430px;

        background-position: 60% center;
    }


    .vehicles-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5, 45, 58, 0.92) 0%,
                rgba(5, 45, 58, 0.72) 65%,
                rgba(5, 45, 58, 0.42) 100%
            );
    }


    .vehicles-hero-inner {
        min-height: 430px;
    }


    .vehicles-hero-content {
        padding: 45px 0;
    }


    .vehicles-eyebrow {
        margin-bottom: 15px;

        font-size: 9px;
    }


    .vehicles-eyebrow > span {
        width: 28px;
    }


    .vehicles-hero h1 {
        font-size: 48px;

        line-height: 0.99;
    }


    .vehicles-hero p {
        max-width: 330px;

        margin-top: 20px;

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


    .vehicles-hero-cta {
        padding: 12px 17px;

        font-size: 12px;
    }

}

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

.vehicles-intro {
    padding: 90px 0 75px;

    background: #f7fbfa;
}


.vehicles-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.9fr)
        minmax(320px, 1.1fr);

    gap: 80px;

    align-items: start;
}


/* ---------------------------------------------------------
   Heading
--------------------------------------------------------- */

.vehicles-intro-heading .section-label {
    display: inline-block;

    margin-bottom: 18px;

    color: #4d7d85;

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

    letter-spacing: 0.15em;
}


.vehicles-intro-heading h2 {
    max-width: 480px;

    margin: 0;

    color: #073b4c;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(38px, 4.5vw, 56px);

    font-weight: 600;

    line-height: 1.05;

    letter-spacing: -0.025em;
}


.vehicles-intro-heading h2 span {
    display: block;

    color: #2b7a78;
}


/* ---------------------------------------------------------
   Content
--------------------------------------------------------- */

.vehicles-intro-content {
    max-width: 600px;

    padding-top: 8px;
}


.vehicles-intro-content p {
    margin: 0;

    color: #61757b;

    font-size: 15px;

    line-height: 1.8;
}


.vehicles-intro-content .vehicles-intro-lead {
    margin-bottom: 18px;

    color: #385b63;

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   VEHICLES INTRO RESPONSIVE
========================================================= */

@media (max-width: 800px) {

    .vehicles-intro {
        padding: 70px 0 60px;
    }


    .vehicles-intro-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .vehicles-intro-content {
        padding-top: 0;
    }

}


@media (max-width: 600px) {

    .vehicles-intro {
        padding: 60px 0 50px;
    }


    .vehicles-intro-heading h2 {
        font-size: 40px;
    }


    .vehicles-intro-content .vehicles-intro-lead {
        font-size: 16px;
    }


    .vehicles-intro-content p {
        font-size: 14px;
        line-height: 1.7;
    }

}

/* =========================================================
   VEHICLE OPTIONS
========================================================= */

.vehicles-options {
    padding: 85px 0 95px;

    background: #ffffff;
}


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

.vehicles-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: end;
    gap: 70px;
    margin-bottom: 48px;
}

.vehicles-section-heading .section-label {
    display: inline-block;
    margin-bottom: 15px;
    color: #2b7a78;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.vehicles-section-heading h2 {
    max-width: 620px;
    margin: 0;
    color: #073b4c;
    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;
    font-size: clamp(40px, 4.5vw, 56px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.vehicles-section-heading h2 span {
    color: #2b7a78;
}

.vehicles-section-heading > p {
    max-width: 330px;
    margin: 0 0 4px auto;
    color: #687d82;
    font-size: 14px;
    line-height: 1.75;
}


/* ---------------------------------------------------------
   Vehicle grid
--------------------------------------------------------- */

.vehicles-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 28px;
}


/* ---------------------------------------------------------
   Vehicle card
--------------------------------------------------------- */

.vehicle-option-card {
    position: relative;

    overflow: hidden;

    border: 1px solid #dce8e7;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 8px 24px rgba(6, 45, 58, 0.045);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

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

    border-color: #c8dfdc;

    box-shadow:
        0 20px 45px rgba(6, 45, 58, 0.11);
}


/* ---------------------------------------------------------
   Image
--------------------------------------------------------- */

.vehicle-option-image {
    position: relative;

    height: 285px;

    overflow: hidden;

    background: #e8f2f1;
}

.vehicle-option-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(4, 38, 48, 0.42) 0%,
            rgba(4, 38, 48, 0.08) 35%,
            transparent 65%
        );

    pointer-events: none;
}

.vehicle-option-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}

.vehicle-option-card:hover
.vehicle-option-image img {
    transform: scale(1.045);
}


/* ---------------------------------------------------------
   Vehicle type badge
--------------------------------------------------------- */

.vehicle-option-type {
    position: absolute;

    left: 20px;
    bottom: 20px;

    z-index: 2;

    padding: 8px 12px;

    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;

    background: rgba(5, 45, 58, 0.86);

    color: #ffffff;

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

    letter-spacing: 0.12em;
    text-transform: uppercase;

    backdrop-filter: blur(6px);
}


/* ---------------------------------------------------------
   Card body
--------------------------------------------------------- */

.vehicle-option-body {
    padding: 27px 27px 25px;
}


/* ---------------------------------------------------------
   Title row
--------------------------------------------------------- */

.vehicle-option-title-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 15px;
}

.vehicle-option-title-row h3 {
    margin: 0;
    color: #073b4c;
    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;
    font-size: 31px;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.vehicle-capacity {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border: 1px solid #dceae8;
    border-radius: 5px;
    background: #f4faf8;
    color: #4b7775;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   Description
--------------------------------------------------------- */

.vehicle-option-description {
    min-height: 48px;

    margin: 0 0 23px;

    color: #647a80;

    font-size: 14px;

    line-height: 1.7;
}


/* ---------------------------------------------------------
   Meta information
--------------------------------------------------------- */

.vehicle-option-meta {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;

    padding: 19px 0;

    border-top: 1px solid #e5eded;
    border-bottom: 1px solid #e5eded;
}

.vehicle-option-meta > div {
    display: flex;

    flex-direction: column;

    gap: 6px;
}

.meta-label {
    color: #8b9b9e;

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

    letter-spacing: 0.13em;
}

.meta-value {
    color: #365861;

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

    line-height: 1.45;
}


/* ---------------------------------------------------------
   Card action
--------------------------------------------------------- */

.vehicle-option-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 21px;

    color: #0a716d;

    text-decoration: none;

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

    letter-spacing: 0.01em;

    transition:
        color 0.2s ease,
        gap 0.25s ease;
}

.vehicle-option-link span {
    font-size: 17px;

    transition:
        transform 0.25s ease;
}

.vehicle-option-link:hover {
    color: #075c5c;
}

.vehicle-option-link:hover span {
    transform: translateX(5px);
}

.vehicle-option-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 21px;
}

.vehicle-option-action .vehicle-option-link {
    margin-top: 0;
    flex-shrink: 0;
}

.vehicle-option-action small {
    color: #91a1a4;
    font-size: 10px;
    line-height: 1.4;
    text-align: right;
}

@media (max-width: 600px) {

    .vehicle-option-action {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .vehicle-option-action small {
        text-align: left;
    }

}


/* ---------------------------------------------------------
   Empty state
--------------------------------------------------------- */

.vehicles-empty {
    grid-column: 1 / -1;

    padding: 50px 20px;

    border: 1px dashed #d7e4e4;
    border-radius: 12px;

    background: #f7fbfa;

    text-align: center;
}


.vehicles-empty p {
    margin: 0;

    color: #6b7f84;

    font-size: 14px;
}


/* =========================================================
   VEHICLE OPTIONS RESPONSIVE
========================================================= */

@media (max-width: 800px) {

    .vehicles-options {
        padding: 70px 0 75px;
    }


    .vehicles-section-heading {
		grid-template-columns: 1fr;
		gap: 18px;
		margin-bottom: 35px;
	}

	.vehicles-section-heading > p {
		max-width: 520px;
		margin: 0;
	}


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

}


@media (max-width: 600px) {

    .vehicles-options {
        padding: 60px 0 65px;
    }


    .vehicles-section-heading h2 {
        font-size: 40px;
    }


    .vehicle-option-image {
        height: 240px;
    }


    .vehicle-option-body {
        padding: 22px 20px;
    }


    .vehicle-option-title-row h3 {
        font-size: 27px;
    }


    .vehicle-option-meta {
        gap: 12px;
    }

}

/* =========================================================
   HOW IT WORKS
========================================================= */

.vehicles-process {
    padding: 105px 0;

    background: #ffffff;
}


.vehicles-process-heading {
    max-width: 620px;

    margin-bottom: 65px;
}


.vehicles-process-heading .section-label {
    display: inline-block;

    margin-bottom: 15px;
}


.vehicles-process-heading h2 {
    margin: 0;

    color: #073038;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.08;
    letter-spacing: -0.025em;
}


.vehicles-process-heading p {
    margin: 18px 0 0;

    color: #687a7d;

    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   PROCESS GRID
========================================================= */

.vehicles-process-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr) 70px minmax(0, 1fr);
    align-items: center;
    gap: 0;
}

/* ========================================
   HOW IT WORKS
========================================= */

.vehicles-process {
    padding: 105px 0 110px;
    background: #f5faf9;
}

.vehicles-process-heading {
    max-width: 620px;
    margin-bottom: 55px;
}

.vehicles-process-heading .section-label {
    display: inline-block;
    margin-bottom: 14px;
    color: #2b7a78;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.vehicles-process-heading h2 {
    margin: 0 0 15px;
    color: #073b4c;
    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;
    font-size: clamp(40px, 4.5vw, 54px);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -0.035em;
}

.vehicles-process-heading p {
    max-width: 430px;
    margin: 0;
    color: #687d82;
    font-size: 14px;
    line-height: 1.75;
}

/* PROCESS CARD */

.vehicle-process-step {
    position: relative;
    min-height: 280px;
    padding: 32px 30px 30px;
    border: 1px solid #dce9e7;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(6, 45, 58, 0.035);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.vehicle-process-step:hover {
    transform: translateY(-5px);
    border-color: #c8dfdc;
    box-shadow: 0 18px 38px rgba(6, 45, 58, 0.08);
}


/* NUMBER */

.vehicle-process-number {
    position: absolute;
    top: 25px;
    right: 27px;
    color: #d8e8e6;
    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
}


/* ICON */

.vehicle-process-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 27px;
    border: 1px solid #d6ebe7;
    border-radius: 12px;
    background: #eef8f6;
    color: #17716d;
    font-size: 21px;
}


/* TITLE */

.vehicle-process-step h3 {
    margin: 0 0 11px;
    color: #073b4c;
    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
}


/* DESCRIPTION */

.vehicle-process-step p {
    max-width: 310px;
    margin: 0;
    color: #687d82;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   CONNECTING LINE
========================================================= */

.vehicle-process-line {
    position: relative;
    height: 1px;
    background: #cddfdd;
}

.vehicle-process-line::after {
    content: "→";
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    transform: translate(-50%, -50%);
    background: #f5faf9;
    color: #7aa19e;
    font-size: 14px;
    line-height: 1;
}


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

@media (max-width: 900px) {

    .vehicles-process-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .vehicle-process-step {
        min-height: auto;
    }


    .vehicle-process-line {
        width: 1px;
        height: 35px;

        margin: 0 auto;

        background: #cbdedb;
    }


    .vehicle-process-line::after {
        content: "↓";

        top: auto;
        right: auto;
        bottom: -7px;
        left: 50%;

        transform: translateX(-50%);

        padding: 5px 0;

        background: #ffffff;
    }

}

@media (max-width: 800px) {

    .vehicles-process {
        padding: 75px 0 80px;
    }

    .vehicles-process-heading {
        margin-bottom: 38px;
    }

    .vehicles-process-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .vehicle-process-step {
        min-height: auto;
    }
	
	.vehicle-process-line {
        display: none;
    }

}


@media (max-width: 768px) {

    .vehicles-process {
        padding: 80px 0;
    }


    .vehicles-process-heading {
        margin-bottom: 40px;
    }


    .vehicle-process-step {
        padding: 25px;
    }

}

@media (max-width: 600px) {

    .vehicles-process {
        padding: 65px 0 70px;
    }

    .vehicles-process-heading h2 {
        font-size: 40px;
    }

    .vehicle-process-step {
        padding: 27px 24px 28px;
    }

}


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

.vehicle-booking-section {
    padding: 110px 0;

    background: #ffffff;
}


.vehicle-booking-card {
    padding: 60px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #073038,
            #075c5c
        );

    box-shadow:
        0 25px 70px rgba(7, 48, 56, 0.16);
}


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

.vehicle-booking-header {
    display: grid;

    grid-template-columns: minmax(0, 1fr) 320px;

    align-items: center;

    gap: 70px;

    padding-bottom: 42px;

    margin-bottom: 0;

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


.vehicle-booking-header .section-label {
    display: inline-block;

    margin-bottom: 15px;

    color: #a9e7df;
}


.vehicle-booking-header h2 {
    max-width: 560px;

    margin: 0;

    color: #ffffff;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(40px, 4vw, 54px);

    font-weight: 600;

    line-height: 1.02;

    letter-spacing: -0.035em;
}


.vehicle-booking-header p {
    max-width: 520px;

    margin: 16px 0 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   AVAILABILITY NOTE
========================================================= */

.vehicle-booking-note {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    padding: 18px 19px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.055);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}


.vehicle-booking-note-icon {
    flex: 0 0 auto;

    width: 30px;
    height: 30px;

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

    border-radius: 50%;

    background: #8edfd1;

    color: #073038;

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


.vehicle-booking-note strong {
    display: block;

    margin-bottom: 4px;

    color: #ffffff;

    font-size: 13px;
}


.vehicle-booking-note span:last-child {
    display: block;

    color: rgba(255, 255, 255, 0.62);

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


/* =========================================================
   FORM SECTIONS
========================================================= */

.vehicle-form-section {
    padding: 38px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.vehicle-form-section:first-of-type {
    border-top: none;
}

.vehicle-form-section-heading {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    margin-bottom: 26px;
}

.vehicle-form-group input[name="special_requirements"] {
    min-height: 54px;
}


.vehicle-form-section-number {
    flex: 0 0 auto;

    min-width: 30px;
    height: 30px;

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

    margin-top: 1px;

    border: 1px solid rgba(142, 223, 209, 0.28);

    border-radius: 8px;

    background: rgba(142, 223, 209, 0.07);

    color: #8edfd1;

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

    letter-spacing: 0.08em;
}


.vehicle-form-section-heading h3 {
    margin: 0;

    color: #ffffff;

    font-size: 20px;
}


.vehicle-form-section-heading p {
    margin: 5px 0 0;

    color: rgba(255, 255, 255, 0.55);

    font-size: 13px;
}


/* =========================================================
   FORM GRID
========================================================= */

.vehicle-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 24px;
    row-gap: 24px;
}


.vehicle-form-group-wide {
    grid-column: 1 / -1;
}


.vehicle-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vehicle-form-group label {
    display: flex;
    align-items: center;
    gap: 7px;

    margin: 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.vehicle-form-group label span {
    color: rgba(255, 255, 255, 0.42);

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


.vehicle-form-group input,
.vehicle-form-group select {
    width: 100%;

    min-height: 54px;

    padding: 0 17px;

    box-sizing: border-box;

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 11px;

    outline: none;

    background: rgba(255, 255, 255, 0.055);

    color: #ffffff;

    font-family: inherit;
    font-size: 13px;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.vehicle-form-group input::placeholder {
    color: rgba(255, 255, 255, 0.40);
}


.vehicle-form-group select option {
    color: #073038;
    background: #ffffff;
}


.vehicle-form-group input:hover,
.vehicle-form-group select:hover {
    border-color: rgba(142, 223, 209, 0.28);

    background: rgba(255, 255, 255, 0.075);
}


.vehicle-form-group input:focus,
.vehicle-form-group select:focus {
    border-color: #8edfd1;

    background: rgba(255, 255, 255, 0.09);

    box-shadow:
        0 0 0 3px rgba(142, 223, 209, 0.09);
}


/* =========================================================
   FORM MESSAGE
========================================================= */

.vehicle-form-message {
    margin-bottom: 25px;

    padding: 15px 18px;

    border-radius: 10px;

    font-size: 13px;
    line-height: 1.5;
}


.vehicle-form-message-success {
    background: rgba(142, 223, 209, 0.14);

    border: 1px solid rgba(142, 223, 209, 0.3);

    color: #baf0e8;
}


.vehicle-form-message-error {
    background: rgba(255, 120, 120, 0.12);

    border: 1px solid rgba(255, 120, 120, 0.25);

    color: #ffd0d0;
}

.field-note {
    display: block;

    margin-top: 7px;

    color: rgba(255, 255, 255, 0.48);

    font-size: 12px;

    line-height: 1.5;
}

/* =========================================================
   VEHICLE LOCATION PICKER
========================================================= */

.vehicle-location-picker {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: 2px;
}


/* ---------------------------------------------------------
   LOCATION OPTION
--------------------------------------------------------- */

.vehicle-location-option {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 64px;

    padding: 13px 16px;

    border: 1px solid rgba(255, 255, 255, 0.13);

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.045);

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* ---------------------------------------------------------
   HIDE NATIVE CHECKBOX
--------------------------------------------------------- */

.vehicle-location-option input[type="checkbox"] {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* ---------------------------------------------------------
   CUSTOM CHECKBOX
--------------------------------------------------------- */

.vehicle-location-option::before {
    content: "";

    flex: 0 0 auto;

    width: 19px;
    height: 19px;

    margin-right: 12px;

    border: 1px solid rgba(255, 255, 255, 0.30);

    border-radius: 5px;

    background: rgba(255, 255, 255, 0.045);

    box-sizing: border-box;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* ---------------------------------------------------------
   CHECK MARK
--------------------------------------------------------- */

.vehicle-location-option::after {
    content: "✓";

    position: absolute;

    left: 17px;
    top: 50%;

    width: 17px;
    height: 17px;

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

    transform:
        translateY(-50%)
        scale(0);

    color: #073038;

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

    opacity: 0;

    transition:
        transform 0.18s ease,
        opacity 0.18s ease;
}


/* ---------------------------------------------------------
   LOCATION NAME
--------------------------------------------------------- */

.vehicle-location-option-name {
    display: block;

    color: rgba(255, 255, 255, 0.88);

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

    line-height: 1.35;

    transition:
        color 0.2s ease;
}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

.vehicle-location-option:hover {
    border-color: rgba(142, 223, 209, 0.40);

    background: rgba(142, 223, 209, 0.055);

    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   SELECTED LOCATION
--------------------------------------------------------- */

.vehicle-location-option:has(
    input[type="checkbox"]:checked
) {
    border-color: rgba(142, 223, 209, 0.65);

    background:
        linear-gradient(
            135deg,
            rgba(142, 223, 209, 0.13),
            rgba(142, 223, 209, 0.055)
        );

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.10);
}


.vehicle-location-option:has(
    input[type="checkbox"]:checked
)::before {
    border-color: #8edfd1;

    background: #8edfd1;

    box-shadow:
        0 0 0 3px rgba(142, 223, 209, 0.08);
}


.vehicle-location-option:has(
    input[type="checkbox"]:checked
)::after {
    opacity: 1;

    transform:
        translateY(-50%)
        scale(1);
}


.vehicle-location-option:has(
    input[type="checkbox"]:checked
)
.vehicle-location-option-name {
    color: #ffffff;
}


/* ---------------------------------------------------------
   KEYBOARD FOCUS
--------------------------------------------------------- */

.vehicle-location-option:has(
    input[type="checkbox"]:focus-visible
) {
    border-color: #8edfd1;

    box-shadow:
        0 0 0 3px rgba(142, 223, 209, 0.12);
}


/* =========================================================
   LOCATION PLACEHOLDER
========================================================= */

.vehicle-location-placeholder {
    grid-column: 1 / -1;

    padding: 18px;

    border: 1px dashed rgba(255, 255, 255, 0.16);

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.025);

    color: rgba(255, 255, 255, 0.42);

    font-size: 12px;

    text-align: center;
}


/* =========================================================
   LOCATION COUNT
========================================================= */

.vehicle-location-count {
    margin-top: 10px;

    color: #8edfd1;

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

    letter-spacing: 0.02em;
}

/* =========================================================
   VEHICLE PRICE SUMMARY
========================================================= */

.vehicle-price-summary {
    grid-column: 1 / -1;

    margin-top: 4px;

    padding: 22px 24px;

    border: 1px solid rgba(142, 223, 209, 0.20);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(142, 223, 209, 0.075),
            rgba(255, 255, 255, 0.035)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}


/* ---------------------------------------------------------
   PRICE ROW
--------------------------------------------------------- */

.vehicle-price-row {
    display: flex;

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

    gap: 20px;

    padding: 5px 0;

    color: rgba(255, 255, 255, 0.58);

    font-size: 12px;
}


.vehicle-price-row strong {
    color: rgba(255, 255, 255, 0.92);

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


/* ---------------------------------------------------------
   TOTAL
--------------------------------------------------------- */

.vehicle-price-total {
    display: flex;

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

    gap: 20px;

    margin-top: 13px;

    padding-top: 16px;

    border-top: 1px solid rgba(255, 255, 255, 0.12);
}


.vehicle-price-total span {
    color: #ffffff;

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

    letter-spacing: 0.02em;
}


.vehicle-price-total strong {
    color: #8edfd1;

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

    letter-spacing: -0.02em;
}

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

.vehicle-booking-actions {
    display: flex;
    align-items: center;
    gap: 28px;

    padding-top: 36px;

    border-top: 1px solid rgba(255, 255, 255, 0.11);
}


.vehicle-booking-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
	min-height: 50px;

    padding: 0 24px;

    border-radius: 8px;

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


.vehicle-booking-actions .btn span {
    font-size: 17px;

    transition:
        transform 0.25s ease;
}


.vehicle-booking-actions .btn:hover span {
    transform: translateX(4px);
}


.vehicle-booking-actions-info {
    display: flex;
    align-items: center;

    gap: 8px;

    max-width: 330px;

    color: rgba(255, 255, 255, 0.48);

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


.vehicle-booking-secure {
    color: rgba(255, 255, 255, 0.42);

    font-size: 11px;
}

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

@media (max-width: 900px) {

    .vehicle-booking-header {
		grid-template-columns: 1fr;

		gap: 28px;

		padding-bottom: 34px;
	}


    .vehicle-booking-note {
        max-width: 500px;
    }

}


@media (max-width: 768px) {

    .vehicle-booking-section {
        padding: 80px 0;
    }


    .vehicle-booking-card {
        padding: 40px 25px;

        border-radius: 22px;
    }


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


    .vehicle-form-group-wide {
        grid-column: auto;
    }


    .vehicle-booking-actions {
        align-items: flex-start;
        flex-direction: column;

        gap: 18px;
    }
	
	.vehicle-location-picker {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 480px) {

    .vehicle-booking-card {
        padding: 32px 20px;
    }


    .vehicle-booking-header {
        margin-bottom: 35px;
    }


    .vehicle-form-section {
        padding: 27px 0;
    }


    .vehicle-booking-actions .btn {
        width: 100%;

        justify-content: center;
    }
	
	.vehicle-price-summary {
		padding: 18px;
	}


	.vehicle-price-total strong {
		font-size: 22px;
	}

}

/* =========================================================
   WHOLE TRIP VEHICLE NOTE
========================================================= */

.vehicle-trip-note {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin: 26px 0 0;

    padding: 20px 22px;

    border: 1px solid rgba(142, 223, 209, 0.18);

    border-radius: 11px;

    background: rgba(255, 255, 255, 0.035);
}


.vehicle-trip-note-content {
    max-width: 720px;
}


.vehicle-trip-note-label {
    display: block;

    margin-bottom: 6px;

    color: #8edfd1;

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

    letter-spacing: 0.14em;
}


.vehicle-trip-note h3 {
    margin: 0;

    color: #ffffff;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 22px;
    font-weight: 600;

    line-height: 1.15;
}


.vehicle-trip-note p {
    max-width: 680px;

    margin: 7px 0 0;

    color: rgba(255, 255, 255, 0.56);

    font-size: 12px;

    line-height: 1.6;
}


.vehicle-trip-note-link {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 10px 14px;

    border: 1px solid rgba(142, 223, 209, 0.25);

    border-radius: 6px;

    color: #8edfd1;

    text-decoration: none;

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

    white-space: nowrap;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        gap 0.2s ease;
}


.vehicle-trip-note-link span {
    font-size: 15px;
}


.vehicle-trip-note-link:hover {
    gap: 11px;

    border-color: rgba(142, 223, 209, 0.45);

    background: rgba(142, 223, 209, 0.07);
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 700px) {

    .vehicle-trip-note {
        align-items: flex-start;

        flex-direction: column;

        gap: 16px;

        padding: 18px;
    }


    .vehicle-trip-note-link {
        width: fit-content;
    }

}

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

.vehicles-cta {
    position: relative;

    overflow: hidden;

    padding: 105px 0;

    background: #073038;
}


.vehicles-cta-inner {
    position: relative;

    display: grid;

    grid-template-columns: minmax(0, 1fr) 300px;

    align-items: center;

    gap: 70px;

    min-height: 360px;
}


.vehicles-cta-content {
    position: relative;
    z-index: 2;
}


.vehicles-cta .section-label {
    display: inline-block;

    margin-bottom: 17px;

    color: #9de2d8;
}


.vehicles-cta h2 {
    max-width: 760px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.04;
    letter-spacing: -0.035em;
}


.vehicles-cta p {
    max-width: 610px;

    margin: 23px 0 30px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 16px;
    line-height: 1.7;
}


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

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

    gap: 20px;
    flex-wrap: wrap;
}


.vehicles-cta-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


.vehicles-cta-actions .btn span {
    font-size: 17px;

    transition:
        transform 0.25s ease;
}


.vehicles-cta-actions .btn:hover span {
    transform: translateX(4px);
}


.vehicles-cta-note {
    color: rgba(255, 255, 255, 0.45);

    font-size: 12px;
}


/* =========================================================
   DECORATIVE VEHICLE
========================================================= */

.vehicles-cta-decoration {
    position: relative;

    width: 280px;
    height: 280px;

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


.vehicles-cta-circle {
    position: relative;
    z-index: 2;

    width: 170px;
    height: 170px;

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

    border: 1px solid rgba(157, 226, 216, 0.28);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(142, 223, 209, 0.15),
            rgba(142, 223, 209, 0.02)
        );

    font-size: 65px;
}


.vehicles-cta-circle::before {
    content: "";

    position: absolute;

    inset: -25px;

    border: 1px dashed rgba(157, 226, 216, 0.22);

    border-radius: 50%;
}


.vehicles-cta-route {
    position: absolute;

    border: 1px solid rgba(157, 226, 216, 0.13);

    border-radius: 50%;
}


.route-one {
    width: 235px;
    height: 125px;

    transform: rotate(25deg);
}


.route-two {
    width: 290px;
    height: 170px;

    transform: rotate(-25deg);
}


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

@media (max-width: 850px) {

    .vehicles-cta-inner {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .vehicles-cta-decoration {
        display: none;
    }

}


@media (max-width: 768px) {

    .vehicles-cta {
        padding: 80px 0;
    }


    .vehicles-cta-actions {
        align-items: flex-start;

        flex-direction: column;
    }


    .vehicles-cta-actions .btn {
        width: fit-content;
    }

}


@media (max-width: 480px) {

    .vehicles-cta h2 {
        font-size: 38px;
    }


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

        justify-content: center;
    }

}

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

.faq-page {
    --faq-deep: #073b4c;
    --faq-deep-dark: #052d3a;

    --faq-lagoon: #159a9c;
    --faq-lagoon-light: #dff5f3;

    --faq-sand: #f7f1e7;
    --faq-white: #ffffff;

    --faq-ink: #17343a;
    --faq-muted: #60757a;

    --faq-border: #d7e5e5;

    background: var(--faq-white);
    color: var(--faq-ink);
}


/* =========================================================
   COMMON
========================================================= */

.faq-page .container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}


.faq-page .section-label {
    display: inline-block;

    margin-bottom: 14px;

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: var(--faq-lagoon);
}


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

.faq-hero {
    position: relative;

    min-height: 500px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(5, 45, 58, 0.94) 0%,
            rgba(5, 45, 58, 0.78) 45%,
            rgba(5, 45, 58, 0.40) 75%,
            rgba(5, 45, 58, 0.20) 100%
        ),
        url("../images/faq-hero.jpg")
        center center / cover no-repeat;
}


.faq-hero::after {
    content: "";

    position: absolute;
    inset: auto 0 0;

    height: 120px;

    background:
        linear-gradient(
            to top,
            rgba(5, 45, 58, 0.30),
            transparent
        );

    pointer-events: none;
}


.faq-hero .container {
    position: relative;
    z-index: 2;
}


.faq-hero-content {
    max-width: 720px;

    padding: 85px 0;

    color: var(--faq-white);
}


.faq-hero .section-label {
    color: #9de2df;
}


.faq-hero h1 {
    margin: 0;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(48px, 6vw, 76px);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.035em;

    color: var(--faq-white);
}


.faq-hero h1 span {
    display: block;

    color: #73d4d0;
}


.faq-hero p {
    max-width: 600px;

    margin: 28px 0 0;

    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1.75;

    color: rgba(255, 255, 255, 0.82);
}


/* =========================================================
   MAIN FAQ SECTION
========================================================= */

.faq-section {
    position: relative;

    padding: 105px 0 115px;

    background:
        linear-gradient(
            180deg,
            #eef9f8 0%,
            #f8fbfb 16%,
            #ffffff 38%,
            #ffffff 100%
        );
}


/*
 * Soft decorative glow behind the content.
 */

.faq-section::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -170px;
    right: -160px;

    border-radius: 50%;

    background: rgba(21, 154, 156, 0.055);

    pointer-events: none;
}


.faq-section .container {
    position: relative;
    z-index: 1;
}


.faq-content {
    width: min(900px, 100%);

    margin: 0 auto;
}


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

.faq-group {
    margin-bottom: 90px;
}


.faq-group:last-of-type {
    margin-bottom: 75px;
}


.faq-group-heading {
    margin-bottom: 30px;
}


.faq-group-heading .section-label {
    margin-bottom: 10px;
}


.faq-group-heading h2 {
    margin: 0;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(34px, 4vw, 50px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.025em;

    color: var(--faq-deep);
}


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

.faq-list {
    overflow: hidden;

    border: 1px solid var(--faq-border);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.88);

    box-shadow:
        0 10px 30px rgba(7, 59, 76, 0.045);
}


.faq-item {
    border-bottom: 1px solid var(--faq-border);

    background: transparent;

    transition:
        background 0.25s ease;
}


.faq-item:last-child {
    border-bottom: 0;
}


.faq-item.active {
    background: #fbfefe;
}


/* =========================================================
   QUESTION
========================================================= */

.faq-question {
    width: 100%;

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

    gap: 30px;

    padding: 24px 25px;

    border: 0;
    background: transparent;

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;

    color: var(--faq-deep);

    text-align: left;

    cursor: pointer;

    transition: color 0.2s ease;
}


.faq-question:hover {
    color: var(--faq-lagoon);
}


.faq-question > span:first-child {
    max-width: 760px;
}


/* =========================================================
   PLUS ICON
========================================================= */

.faq-icon {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border: 1px solid #cbdada;
    border-radius: 50%;

    background: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;

    color: var(--faq-lagoon);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}


.faq-item.active .faq-icon {
    transform: rotate(45deg);

    border-color: var(--faq-lagoon);

    background: var(--faq-lagoon);

    color: var(--faq-white);
}


/* =========================================================
   ANSWER
========================================================= */

.faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows 0.3s ease;
}


.faq-answer p {
    min-height: 0;

    overflow: hidden;

    max-width: 780px;

    margin: 0;

    padding: 0 80px 0 25px;

    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.8;

    color: var(--faq-muted);

    transition:
        padding 0.3s ease;
}


.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}


.faq-item.active .faq-answer p {
    padding-bottom: 27px;
}


/* =========================================================
   KEYBOARD ACCESSIBILITY
========================================================= */

.faq-question:focus-visible {
    outline: 2px solid var(--faq-lagoon);

    outline-offset: -2px;
}


/* =========================================================
   CONTACT CARD
========================================================= */

.faq-contact-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    padding: 45px;

    border: 1px solid #dfd4c2;
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #f7f1e7,
            #fbf8f2
        );
}


.faq-contact-card .section-label {
    margin-bottom: 9px;
}


.faq-contact-card h2 {
    margin: 0 0 9px;

    font-family:
        "Fraunces",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;

    color: var(--faq-deep);
}


.faq-contact-card p {
    max-width: 550px;

    margin: 0;

    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.65;

    color: var(--faq-muted);
}


.faq-contact-card .btn {
    flex: 0 0 auto;
}


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

@media (max-width: 850px) {

    .faq-section {
        padding: 80px 0 90px;
    }


    .faq-content {
        width: 100%;
    }


    .faq-group {
        margin-bottom: 75px;
    }


    .faq-contact-card {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 600px) {

    .faq-page .container {
        width: min(100% - 32px, 1180px);
    }


    /* HERO */

    .faq-hero {
        min-height: 460px;
    }


    .faq-hero-content {
        padding: 70px 0;
    }


    .faq-hero h1 {
        font-size: 46px;
    }


    .faq-hero p {
        margin-top: 22px;

        font-size: 15px;
        line-height: 1.7;
    }


    /* FAQ */

    .faq-section {
        padding: 70px 0 80px;

        background:
            linear-gradient(
                180deg,
                #eef9f8 0%,
                #ffffff 25%,
                #ffffff 100%
            );
    }


    .faq-group {
        margin-bottom: 62px;
    }


    .faq-group-heading {
        margin-bottom: 22px;
    }


    .faq-group-heading h2 {
        font-size: 36px;
    }


    .faq-list {
        border-radius: 12px;
    }


    .faq-question {
        gap: 18px;

        padding: 20px;
        font-size: 15px;
    }


    .faq-question > span:first-child {
        max-width: calc(100% - 48px);
    }


    .faq-icon {
        width: 31px;
        height: 31px;

        font-size: 18px;
    }


    .faq-answer p {
        padding-right: 20px;
        padding-left: 20px;

        font-size: 14px;
        line-height: 1.75;
    }


    .faq-item.active .faq-answer p {
        padding-bottom: 22px;
    }


    /* CONTACT */

    .faq-contact-card {
        gap: 25px;

        padding: 30px 25px;
    }


    .faq-contact-card h2 {
        font-size: 28px;
    }


    .faq-contact-card p {
        font-size: 14px;
    }

}


@media (max-width: 400px) {

    .faq-hero h1 {
        font-size: 41px;
    }


    .faq-group-heading h2 {
        font-size: 32px;
    }


    .faq-question {
        font-size: 14px;
    }

}