/* Normalize CSS
----------------------------------------------------------------------------- */
*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html, body {
    overflow-x: hidden;
}

html {
    box-sizing: border-box;
}

body {
    font-family: "Barlow", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #333;
    font-weight: 400;
}

ul {
    list-style: none inside none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

/* Global Classes
----------------------------------------------------------------------------- */
.main {
    max-width: 1200px;
    margin: 0 auto;
}

@media screen and ( max-width: 1210px ) {
    .main {
        padding: 0 15px;
    }
}

.mb-medium {
    margin-bottom: 10px;
}

.heading-secondary {
    font-size: 34px;
    font-weight: 600;
    color: #333;
    font-family: "Marcellus", serif;
}

.bg-color--green {
    background-color: #006A4E;
}

.bg-color--gray {
    background-color: #f7f7f7;
}

.bg-color-gray--medium {
    background-color: #eeece5;
}


/* Section Page Content
----------------------------------------------------------------------------- */
.section-page-content {
    padding: 0 0 100px;
}

.page-text-content {
    font-size: 17px;
}

.page-text-content h2, h3, h4, h5, h6 {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 8px;
}

.page-text-content p:not(:last-child) {
    margin-bottom: 10px;
}

/* Section Hero
----------------------------------------------------------------------------- */
.section-hero {
    position: relative;
/*     min-height: 600px; */
    height: 95vh;
    overflow: hidden;
}

.section-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.section-hero__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #fff;
    text-align: center;
}

/* HERO VIDEO */
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.hero__video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Hero Deadline
----------------------------------------------------------------------------- */
.hero__headline {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    color: #fff;
    pointer-events: none; /* let clicks pass through to the video/overlay beneath */
}

.hero__headline h1 {
    margin: 0;
    font-family: "Marcellus", serif;
    font-weight: 200;
    line-height: 1.3;
    /* Scales fluidly between 26px (small phones) and 40px (desktop)
       instead of jumping at fixed breakpoints */
    font-size: clamp(26px, 5.5vw, 40px);
}

.hero__headline p {
    margin-top: 12px;
    max-width: 60%; /* keeps long lines from stretching edge-to-edge on wide screens */
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(14px, 2.2vw, 19px);
}

/* Tighten spacing a bit further on small phones */
@media (max-width: 480px) {
    .hero__headline {
        padding: 0 18px;
    }

    .hero__headline p {
        margin-top: 10px;
        max-width: 95%;
    }
}


/* Messenger + Whats App
----------------------------------------------------------------------------- */
.hero-contact {
    position: fixed;
    right: 2%;
    bottom: 5%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10;
}

.hero-contact__link {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.hero-contact__link:hover {
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.35);
}

.hero-contact__link--messenger {
    background: #0084ff;
}

.hero-contact__link--whatsapp {
    background: #25d366;
}

.hero-contact__label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    padding: 9px 14px;
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 4px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}

.hero-contact__link:hover .hero-contact__label {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* Site Header & Navigation
----------------------------------------------------------------------------- */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease, top 0.3s ease;
}

/* Sticky state — added via JS when the user scrolls past the hero.
   Switches to a fixed dark bar so nav stays usable while scrolling. */
.site-header.is-sticky {
    position: fixed;
    top: 0;
    z-index: 100;
    background-color: rgb(37 37 37 / 0.9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Shrink header padding + logo slightly once sticky, so it takes up less
   vertical space while scrolling */
.site-header.is-sticky .site-header__wrapper {
    padding: 8px 0;
    gap: 20px;
}

.site-header.is-sticky .site-title img {
    height: 70px; /* shrink logo slightly when sticky */
}

/* Prevent content jump when header becomes fixed on non-hero pages
   (pages using .page-header instead of .section-hero) */
.page-header .site-header.is-sticky {
    top: 0;
}

/* Remove the decorative top/bottom border lines once sticky —
   they look busy against the solid dark sticky background */
.site-header.is-sticky .site-nav--left .site-nav__list {
    border-top: none;
    border-bottom: none;
}

.site-header.is-sticky .site-nav--right .site-nav__list {
    border-top: none;
    border-bottom: none;
}

/* --- Header layout: 3-column grid — [left nav] [logo] [right nav] --- */
.site-header__wrapper {
    position: relative;
    padding: 20px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    /*column-gap: 30px;*/
    column-gap: 25px;
}

.site-branding {
    justify-self: center; /* keeps logo centered regardless of nav widths */
    padding: 0 10px;
}

.site-title {
    display: flex;
    align-items: center;
}

.site-title a {
    display: inline-block;
}

.site-title img {
    height: 100px;
    display: block;

    width: auto;
}

/* =============================================================================
   SITE NAVIGATION (desktop) — left + right link lists flanking the logo
   ============================================================================= */

.site-nav__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Thin border lines above/below each nav list, only visible pre-sticky */
.site-nav--left .site-nav__list {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 25px 0;
    justify-content: flex-end; /* pushes left-nav items toward the logo */
}

.site-nav--left ul li a {
    padding-left: 22px;
}

.site-nav--right ul li a {
    padding-right: 22px;
}

.site-nav--right .site-nav__list {
    border-top: 1px solid rgb(255 255 255 / 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 25px 0;
}

/* Base link styling shared by every top-level nav item
   (Home, Rooms, Packages, Activities, etc.) */
.site-nav__list li a {
    color: #ddd;
    font-size: 15px;
    /*padding: 0 14px;*/
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.4s ease;
}

.site-nav__list li a:hover {
    color: #fff;
}

.site-nav__link {
    position: relative; /* anchor point for the absolutely-positioned caret button */
}

/* FOR HOME ICON */
.site-nav__home-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-nav__home-link .menu-icon {
    font-size: 18px; /* adjust to match your other nav items' visual weight */
}

.screen-reader-text {
    position: absolute;
    left: -9999px;
}

/* =============================================================================
   DROPDOWN SUPPORT (desktop) — hover-triggered white card sub-menu
   Used by nav items with class .menu-item-has-children (e.g. Rooms, Packages)
   ============================================================================= */

.site-nav__list li {
    position: relative; /* dropdown panel positions relative to this <li> */
}

.menu-item-has-children {
    position: relative;
}

.site-nav__item-head {
    position: relative;
    display: flex;
    align-items: center;
}

/* Caret button: VISIBLE on desktop so its chevron icon shows next to the
   link text, but it's purely DECORATIVE here — opening/closing the dropdown
   is driven by :hover on the parent <li>, not by clicking this button.
   (On mobile, this same button becomes a real, clickable accordion toggle —
   see the media query below.) */
.site-nav__caret-btn {
    /*    display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        cursor: default;
        pointer-events: none;

        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);*/

    display: flex;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    position: absolute;
    right: -10px;
    top: 5%;
}

.site-nav__caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    font-size: 12px;
    color: #ddd;
    transition: transform 0.3s ease;
}

.site-nav__caret ion-icon {
    display: block;
}

/* Flip the chevron upside-down while the dropdown is open */
.menu-item-has-children:hover .site-nav__caret {
    transform: rotate(180deg);
}

/* Invisible "bridge" element that fills the gap between the nav link and
   the dropdown panel below it. Without this, moving the mouse straight
   down from the link to the panel would pass through empty space and
   the dropdown would close before the cursor reaches it. */
.menu-item-has-children::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 270px;
    height: 26px; /* must match the sub-menu's top offset below */
}

/* The dropdown panel itself — white card, hidden by default */
.sub-menu {
    position: absolute;
    top: calc(100% + 26px); /* sits just below the invisible bridge */
    left: 0;
    width: 270px;
    background-color: rgb(37 37 37 / 0.9);
    border-radius: 3px;
    /*box-shadow: 0 2px 10px rgb(75 75 75 / 0.9);*/
    margin: 0;
    padding: 10px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 100;
}

/* Reveal the dropdown on hover, keyboard focus, or when JS adds .is-open
   (the .is-open class is mainly used by the mobile accordion logic) */
.menu-item-has-children:hover .sub-menu,
.menu-item-has-children:focus-within .sub-menu,
.menu-item-has-children.is-open .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* When the header is sticky, its padding shrinks (see .is-sticky rules
   above), so the bridge/dropdown vertical offsets need to shrink too —
   otherwise there'd be a visible gap or misalignment under the shorter header */
.site-header.is-sticky .menu-item-has-children::after {
    height: 32px;
}

.site-header.is-sticky .sub-menu {
    top: calc(100% + 32px);
}

.sub-menu li {
    width: 100%;
}

/* Thin divider between stacked sub-menu items (all but the last) */
.sub-menu__item:not(:last-child) {
    border-bottom: 1px solid #343434E6;
}

/* Layout for each sub-menu row: [icon] [title + description] */
.sub-menu__item a {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 5px;
    border-radius: 3px;
    text-transform: none;
    white-space: normal;
    color: #f7f7f7;
    font-size: inherit;
    transition: background 0.2s ease;
}

.sub-menu__item a:hover {
    color: inherit;
    background: #1c1c1c;
}

/* NOTE: this rule and the one below it both target the same element
   (.sub-menu__item a). Keep padding defined in ONE place only to avoid
   confusion about which value actually applies — currently this one wins
   since .sub-menu .sub-menu__item a is more specific. */
.sub-menu .sub-menu__item a {
    padding: 10px 5px;
}

/* Chevron icon shown before each sub-menu title.
   Fixed height matches .sub-menu__title's line-height so the icon
   vertically centers against the title text (not the whole 2-line block) */
.sub-menu__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 20px;
    color: #0f6e56;
    flex-shrink: 0;
    margin-top: 2px;
}

.sub-menu__icon ion-icon {
    font-size: 13px;
    display: block;
}

.sub-menu__text {
    flex: 1;
    min-width: 0; /* allows text to wrap instead of overflowing the card */
    text-wrap: wrap;
}

.sub-menu__title {
    display: block;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px; /* matches .sub-menu__icon height exactly, for alignment */
    color: #ddd;
    margin-bottom: 3px;
    text-transform: none;
}

.sub-menu__desc {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: #888;
    text-transform: none;
}

/* =============================================================================
   MOBILE TOGGLE (hamburger button) — hidden by default, shown only ≤960px
   ============================================================================= */

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgb(140 140 140 / 0.65);
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
}

.nav-toggle__bar {
    display: block;
    width: 18px;
    height: 2px;
    margin: 0 auto;
    background: #fff;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* These elements only matter on mobile — hidden here, shown in the
   media query below */
.nav-spacer {
    display: none;
}

.site-nav__close {
    display: none;
}

.nav-overlay {
    display: none;
}

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

/* =============================================================================
   MOBILE (≤960px) — replaces the split left/right nav with a single
   slide-in drawer containing every link, plus a tap-to-expand accordion
   for dropdown items (Rooms, Packages, etc.)
   ============================================================================= */
/*@media (max-width: 960px) {

    .site-header.is-sticky .site-header__wrapper {
        padding: 5px 15px;
    }

    !* Header becomes a simple flex row: [hamburger] ... [logo] ...
       (order is controlled below so hamburger sits on the right) *!
    .site-header__wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 15px;
    }

    !* Hide the desktop split nav — replaced entirely by .site-nav-mobile *!
    .site-nav--left,
    .site-nav--right {
        display: none;
    }

    .nav-toggle {
        display: flex;
        order: 2; !* hamburger on the right *!
    }

    .nav-spacer {
        display: none; !* no longer needed once logo is left-aligned *!
    }

    .site-branding {
        order: 1; !* logo on the left *!
        flex: 1;
        display: flex;
        justify-content: flex-start;
        padding: 0;
    }

    .site-title img {
        height: 60px;
    }

    !* Dark overlay behind the drawer, click-to-close *!
    .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
        z-index: 90;
    }

    .nav-overlay.is-visible {
        opacity: 1;
        visibility: visible;
    }

    !* The slide-in drawer itself — hidden off-screen to the right by default *!
    .site-nav-mobile {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(300px, 82vw);
        background: rgb(30 34 40 / 0.98);
        box-shadow: -12px 0 32px rgba(0, 0, 0, 0.3);
        padding: 24px 20px;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 100;
    }

    !* JS adds .is-open to slide the drawer into view *!
    .site-nav-mobile.is-open {
        transform: translateX(0);
    }

    .site-nav__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin-left: auto;
        margin-bottom: 20px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6px;
        cursor: pointer;
        color: #fff;
        font-size: 20px;
        line-height: 1;
    }

    !* Drawer's link list — stacked vertically, no borders (unlike desktop) *!
    .site-nav-mobile .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        border: none;
        padding: 0;
        gap: 4px;
    }

    .site-nav-mobile .site-nav__list li a {
        display: block;
        padding: 12px 4px;
        font-size: 14px;
        color: #ddd;
    }

    .site-nav-mobile .site-nav__item-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    !* Mobile ONLY: turn the caret button back into a real, clickable
       toggle (on desktop it's decorative/pointer-events:none — see above).
       JS listens for clicks on this button to expand/collapse the
       accordion sub-menu. *!
    .site-nav-mobile .site-nav__caret-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: transparent;
        border: none;
        color: #ddd;
        cursor: pointer;
        pointer-events: auto;
    }

    .site-nav-mobile .site-nav__caret {
        font-size: 16px;
        transition: transform 0.25s ease;
    }

    !* Flip chevron when JS adds .is-open to the parent <li> *!
    .site-nav-mobile .menu-item-has-children.is-open .site-nav__caret {
        transform: rotate(180deg);
    }

    !* The hover-bridge trick isn't needed on mobile (no hover, tap-driven) *!
    .site-nav-mobile .menu-item-has-children::after {
        display: none;
    }

    !* Sub-menu becomes an inline accordion instead of a floating card:
       starts collapsed (max-height: 0) and JS sets an explicit pixel
       height via style.maxHeight to animate it open/closed *!
    .site-nav-mobile .sub-menu {
        position: static;
        width: 100%;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        !*padding: 0 0 0 12px;*!
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        padding: 0;
    }

    !* Override the desktop light-card hover styling — the drawer is dark,
       so sub-menu items need a subtle light overlay instead of a
       light-gray background *!
    .site-nav-mobile .sub-menu__item a {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        color: #ccc;
        padding: 8px 4px;
        border-radius: 4px;
        background: transparent;
    }

    .site-nav-mobile .site-nav__list .menu-item-has-children .sub-menu__item a {
        display: flex;
        padding: 15px 0;
    }

    .site-nav-mobile .sub-menu__item a:hover,
    .site-nav-mobile .sub-menu__item a:active,
    .site-nav-mobile .sub-menu__item a:focus-visible {
        background: rgba(255, 255, 255, 0.08);
        color: #ccc;
    }

    .site-nav-mobile .sub-menu__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 20px; !* matches title's line-height so icon centers against it *!
        flex-shrink: 0;
        margin-top: 0;
    }

    .site-nav-mobile .sub-menu__icon ion-icon {
        font-size: 13px;
        display: block;
    }

    .site-nav-mobile .sub-menu__title {
        color: #fff;
        line-height: 20px; !* matches .sub-menu__icon height exactly *!
    }

    .site-nav-mobile .sub-menu__desc {
        color: #999;
    }

    .sub-menu__item:not(:last-child) {
        border-bottom: 1px solid #2d2d2d;
    }

}*/

/* Breadcrumb — bottom-left of hero
----------------------------------------------------------------------------- */
/*.hero__breadcrumb {
    position: absolute;
    bottom: 8%;
    left: 0;
    z-index: 2;
}

.hero__breadcrumb .main,
.hero__breadcrumb nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.hero__breadcrumb ol {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hero__breadcrumb li {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero__breadcrumb li:not(:last-child)::after {
    content: '/';
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.4);
}

.hero__breadcrumb li a {
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.3s ease;
}

.hero__breadcrumb li a:hover {
    color: #fff;
}

.hero__breadcrumb li[aria-current="page"] {
    color: #fff;
    font-weight: 500;
}*/

.hero__breadcrumb {
    position: absolute;
    bottom: 8%;
    left: 0;
    width: 100%; /* fixes centering — .main's max-width/margin:auto needs a full-width parent to center against */
    z-index: 2;
}

.hero__breadcrumb .main,
.hero__breadcrumb nav {
    max-width: 1200px;
    margin: 0 auto;
}

.hero__breadcrumb ol {
    display: flex;
    flex-wrap: wrap; /* allow wrapping instead of overflowing on long trails */
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hero__breadcrumb li {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero__breadcrumb li:not(:last-child)::after {
    content: '/';
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.4);
}

.hero__breadcrumb li a {
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.3s ease;
}

.hero__breadcrumb li a:hover {
    color: #fff;
}

.hero__breadcrumb li[aria-current="page"] {
    color: #fff;
    font-weight: 500;
}

/* =========================================================
   TABLET
========================================================= */
@media (max-width: 767px) {
    .hero__breadcrumb {
        bottom: 6%;
    }

    .hero__breadcrumb .main,
    .hero__breadcrumb nav {
        padding: 0 15px;
    }

    .hero__breadcrumb li {
        font-size: 13px;
    }

    .hero__breadcrumb li:not(:last-child)::after {
        margin: 0 8px;
    }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 480px) {
    .hero__breadcrumb {
        bottom: 5%;
    }

    .hero__breadcrumb ol {
        row-gap: 4px; /* spacing between wrapped lines */
    }

    .hero__breadcrumb li {
        font-size: 12px;
    }

    .hero__breadcrumb li:not(:last-child)::after {
        margin: 0 6px;
    }
}


/* Section About
----------------------------------------------------------------------------- */
/*.section-about {
    padding: 70px 0 0;
    background-color: #f7f7f7;
}

.about__content {
    width: 80%;
    text-align: center;
    margin: 0 auto;
    color: #333;
    font-size: 17px;
}

.about__content h2 {
    font-size: 40px;
    font-weight: 600;
    color: #333;
}

.about__content h2 span {
    font-family: "Edu TAS Beginner", cursive;
    font-size: 50px;
}

.about__content h3 {
    font-size: 27px;
    font-weight: 400;
    margin-bottom: 16px;
    color: #333;
}*/


/* Section About — refined typography, matching your real markup:
   .about__content > h2 (with cursive span) + h3 (sub-heading field,
   wpautop'd) + sibling <p> tags (the wonders text_content field).
   Same fonts/colors as the rest of the site — Marcellus /
   Edu TAS Beginner / Barlow, #00A035 accent. Drop-in, no PHP changes.
----------------------------------------------------------------------------- */
.section-about {
    position: relative;
    padding: 60px 0 0;
    background-color: #f7f7f7;
    overflow: hidden;
}

/* Soft, nature-toned glow behind the heading — subtle depth, not a
   literal shape, so the section doesn't feel flat */
.section-about::before {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    width: 900px;
    height: 320px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(0, 106, 78, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.about__content {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    color: #333;
    font-size: 17px;
}

.about__content h2 {
    font-size: 38px;
    font-weight: 500;
    color: #1b3b2f;
    line-height: 1.3;
    margin-bottom: 30px;
}

.about__content h2 span {
    display: inline-block;
    position: relative;
    margin-left: 8px;
    font-family: "Edu TAS Beginner", cursive;
    font-size: 52px;
    color: #00A035;
}

/* Hand-drawn underline beneath the script word — reads as a footpath
   through the park rather than a generic straight rule */
.about__content h2 span::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -8px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'%3E%3Cpath d='M2 8c20-10 40 6 60-2s40 8 60 0 40-8 76 2' fill='none' stroke='%2300A035' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* The sub-heading field — location + concept description */
.about__content h3 {
    font-size: 19px;
    font-weight: 400;
    line-height: 1.75;
    color: #333;
    margin-bottom: 24px;
}

/* The text_content field — wonders list, styled quieter than the
   sub-heading so it reads as supporting detail, not competing with it */
.about__content p {
    max-width: 70%;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.7;
    color: #4e5b54;
}

.about__content p:not(:last-child) {
    margin-bottom: 10px;
}

/* =========================================================
   TABLET
========================================================= */
@media (max-width: 767px) {
    .section-about {
        padding: 60px 0 0;
    }

    .about__content {
        max-width: 100%;
    }

    .about__content h2 {
        font-size: 30px;
    }

    .about__content h2 span {
        font-size: 40px;
    }

    .about__content h3 {
        font-size: 17px;
    }

    .about__content p {
        font-size: 15px;
        max-width: 90%;
    }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 480px) {
    .section-about {
        padding: 60px 0 0;
    }

    .about__content h2 {
        font-size: 26px;
        margin-bottom: 22px;
    }

    .about__content h2 span {
        font-size: 34px;
    }

    .about__content h3 {
        font-size: 15.5px;
        margin-bottom: 18px;
    }
}

/* Section Amenities [HOME PAGE]
----------------------------------------------------------------------------- */
.section-amenities {
    padding: 100px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
}

.section-amenities .section-title-text-box {
    text-align: center;
    width: 80%;
    margin: 0 auto 60px;
}

.amenities__wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    justify-items: center;
    grid-row-gap: 40px;
    grid-column-gap: 20px;
}

.amenities__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
    width: 100%;
    max-width: 140px;
}

.amenities__img {
    height: 45px;
    margin-bottom: 15px;
    filter: opacity(.6);
}

.amenities__item h3 {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin: 0;
}

/* Responsive
--------------------------------------------------------------*/
@media (max-width: 992px) {
    .section-amenities {
        padding: 70px 0;
    }

    .section-amenities .section-title-text-box {
        width: 100%;
        margin-bottom: 45px;
    }

    .amenities__wrapper {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        grid-row-gap: 30px;
        grid-column-gap: 15px;
    }
}

@media (max-width: 768px) {
    .amenities__wrapper {
        grid-template-columns: repeat(3, 1fr);
        grid-row-gap: 28px;
        grid-column-gap: 10px;
    }

    .amenities__item {
        max-width: 110px;
    }

    .amenities__img {
        height: 38px;
        margin-bottom: 12px;
    }

    .amenities__item h3 {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .section-amenities .section-title-text-box {
        margin-bottom: 50px;
    }

    .amenities__wrapper {
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: 26px;
        grid-column-gap: 8px;
    }

    .amenities__item {
        max-width: 130px;
    }

    .amenities__img {
        height: 34px;
        margin-bottom: 10px;
    }

    .amenities__item h3 {
        font-size: 13px;
    }
}


/* PAGE: Home / Attractions teaser
----------------------------------------------------------------------------- */
.section-attractions {
    background-color: #f7f7f7;
    padding: 90px 0;
}

/* Rows */
.attractions__row {
    display: grid;
    gap: 24px;
    margin-bottom: 24px;
}

.attractions__row--big {
    grid-template-columns: 1fr 1fr;
}

.attractions__row--small {
    grid-template-columns: repeat(3, 1fr);
}

.attraction__tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 4px;
    text-decoration: none;
}

.attraction__tile img {
    width: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.attraction__tile--big img {
    height: 340px;
}

.attraction__tile--small img {
    height: 260px;
}

.attraction__tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(22, 48, 44, 0.75) 0%, rgba(22, 48, 44, 0.05) 55%);
}

.attraction__label {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 2;
    color: #fdfcf9;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
}

.attraction__tile--big .attraction__label {
    font-size: 24px;
}

.attraction__tile:hover img {
    transform: scale(1.06);
}

/* Bottom button */
.attractions__footer {
    text-align: center;
    margin-top: 40px;
}

.attractions__footer a {
    display: inline-block;
    background-color: transparent;
}

/* Tablet */
@media (max-width: 991px) {
    .attractions__row--small {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: everything stacks to one column */
@media (max-width: 767px) {
    .section-attractions {
        padding: 60px 0;
    }

    .attractions__row--big,
    .attractions__row--small {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .attraction__tile--big img {
        height: 260px;
    }

    .attraction__tile--small img {
        height: 220px;
    }

    .attraction__label {
        font-size: 18px;
    }

    .attraction__tile--big .attraction__label {
        font-size: 20px;
    }
}


/* Section Single Room
----------------------------------------------------------------------------- */
.section-single-room {
    padding: 60px 0 100px;
    background-color: #f7f7f7;
}

.room__wrapper .section-title-text-box {
    margin-bottom: 30px;
    color: #333;
}

.room__wrapper .section-title-text-box h2 {
    color: #333;
}

.room__wrapper .section-title-text-box h2 span:nth-child(1) {
    margin-bottom: 12px;
    color: #017a2b;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.room__wrapper .section-title-text-box h2 span:nth-child(2) {
    font-size: 36px;
    display: block;
    font-weight: 500;
    font-family: "Marcellus", serif;
}

/* ROOM GALLERY GRID */
.room-gallery-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    grid-auto-rows: 220px;
    gap: 12px;
}

/* Tablet: tighten columns a bit, keep spans */
@media (max-width: 900px) {
    .room-gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        grid-auto-rows: 180px;
        gap: 10px;
    }
}

/* Mobile: drop spans entirely so every tile is equal size and stacks cleanly */
@media (max-width: 600px) {
    .room-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
        gap: 8px;
    }

    .room-gallery-grid__tile--big,
    .room-gallery-grid__tile--wide {
        grid-column: span 1;
        grid-row: span 1;
    }
}

.room-gallery-grid__tile {
    border-radius: 3px;
    overflow: hidden;
    background: #E7E1D2;
}

.room-gallery-grid__tile a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.room-gallery-grid__zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 42, 46, 0.35); /* your --navy at low opacity */
    opacity: 0;
    transition: opacity 0.25s ease;
}

.room-gallery-grid__zoom svg {
    width: 45px;
    height: 45px;
    transform: rotate(30deg) scale(0.8);
    transition: transform 0.25s ease;
}

.room-gallery-grid__tile a:hover .room-gallery-grid__zoom {
    opacity: 1;
}

.room-gallery-grid__tile a:hover .room-gallery-grid__zoom svg {
    transform: scale(1);
}

.room-gallery-grid__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.room-gallery-grid__tile a:hover img {
    transform: scale(1.04);
}

.room-gallery-grid__tile--big {
    grid-column: span 2;
    grid-row: span 2;
}

.room-gallery-grid__tile--wide {
    grid-column: span 2;
}

.room-info {
    padding: 100px 0;
    background: #fff;
}

/* ROOM FEATURES */
.room-info__features {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(400px, 0.65fr);
    gap: 80px;
    align-items: end;
}

.section-title__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #08785f;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.room-info__title {
    margin: 0;
    color: #333;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.15;
    font-family: "Marcellus", serif;
}

.room-info__intro {
    max-width: 620px;
    margin: 18px 0 35px;
    color: #59706f;
    font-size: 16px;
    line-height: 1.7;
}

.room-amenities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 14px;
}

.room-amenity {
    /*min-height: 120px;*/
    padding: 25px 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #f5f8f5;
    border-radius: 5px;
    transition: transform 0.3s ease,
    background 0.3s ease;
}

.room-amenity:hover {
    transform: translateY(-4px);
    background: #edf5ef;
}

.room-amenity__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #076f5b;
    font-size: 23px;
    background: #e3eee7;
    border-radius: 50%;
}

.room-amenity p {
    margin: 0;
    color: #174d4b;
    font-size: 13px;
    line-height: 1.45;
}

.room-info__image-wrapper {
    position: relative;
}

.room-info__image {
    width: 100%;
    height: 480px;
    display: block;
    object-fit: cover;
    border-radius: 3px;
}

.room-info__image-caption {
    position: absolute;
    right: 25px;
    bottom: 25px;
    padding: 14px 20px;
    color: #145c51;
    font-size: 18px;
    font-style: italic;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 30px;
}

.room-info__image-caption span {
    margin: 0 7px;
}


/* =========================================================
   TERMS & CONDITIONS
========================================================= */

.room-terms {
    margin-top: 80px;
    padding: 55px;
    display: grid;
    grid-template-columns: 0.8fr 1.5fr;
    gap: 60px;
    background: #f7f7f7;
    border-radius: 10px;
}

/* =========================================================
   TERMS INTRO
========================================================= */

.room-terms__intro > p {
    max-width: 400px;
    margin: 20px 0 0;
    color: #5b7371;
    font-size: 15px;
    line-height: 1.7;
}

.room-terms__note {
    margin-top: 55px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #116356;
    font-size: 21px;
    font-style: italic;
}

.room-terms__note strong {
    font-weight: 500;
}

.room-terms__note-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    font-style: normal;
    background: #08785f;
    border-radius: 50%;
}


/* =========================================================
   TERMS LIST
========================================================= */

.room-terms__list {
    display: grid;
}

.room-term {
    padding: 0 0 20px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;

}

.room-term:not(:last-child) {
    border-bottom: 1px solid #d3e1d8;
}

.room-term__number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    background: #08785f;
    border-radius: 50%;
}

.room-term p {
    margin: 0;
    color: #333;
    font-size: 15px;
    line-height: 1.4;
}


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

@media (max-width: 1199px) {

    .room-info__features {
        grid-template-columns: 1fr;
    }

    .room-info__features {
        gap: 40px;
    }

    .room-info__image-wrapper {
        max-width: 700px;
        margin: 20px auto 0;
    }

    .room-amenities {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .room-terms {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .room-terms__intro > p {
        max-width: 600px;
    }

    .room-terms__note {
        margin-top: 30px;
    }

}


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

@media (max-width: 767px) {

    .room__wrapper .section-title-text-box h2 span:nth-child(2) {
        font-size: 30px;
        line-height: 1.2;
    }

    .room-info {
        padding: 70px 0;
    }

    .room-info__container {
        width: min(100% - 30px, 600px);
    }

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

    .room-info__image {
        height: 400px;
        border-radius: 70px 15px 70px 15px;
    }

    .room-info__image-caption {
        right: 15px;
        bottom: 15px;
        font-size: 15px;
    }

    .room-terms {
        margin-top: 60px;
        padding: 35px 25px;
        border-radius: 15px;
    }

    .room-terms__list {
        grid-template-columns: 1fr;
        gap: 0;
    }

}


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

@media (max-width: 480px) {

    .room-info {
        padding: 55px 0;
    }

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

    .room-info__title {
        font-size: 30px;
        line-height: 1.2;
    }

    .room-info__intro {
        font-size: 14px;
    }

    .room-amenities {
        gap: 10px;
    }

    .room-amenity {
        min-height: 110px;
        padding: 15px 7px;
    }

    .room-amenity__icon {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .room-amenity p {
        font-size: 12px;
    }

    .room-info__image {
        height: 330px;
        border-radius: 50px 12px 50px 12px;
    }

    .room-info__image-caption {
        right: 10px;
        bottom: 10px;
        padding: 10px 14px;
        font-size: 12px;
    }

    .room-info__image-caption span {
        margin: 0 3px;
    }

    .room-terms {
        padding: 30px 18px;
    }

    .room-term {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 10px;
    }

    .room-term p {
        font-size: 12px;
    }

}

/* Section Booking CTA
----------------------------------------------------------------------------- */
.section-booking-cta {
    padding: 150px 0;
    background-color: #122a2e;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.section-booking-cta img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: center;
    z-index: 0;
}

.section-booking-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 42, 46, 0.55), rgba(18, 42, 46, 0.8));
    z-index: 1;
}

.section-booking-cta .main {
    position: relative;
    z-index: 2;
}

.cta-wrap h2 {
    font-size: 36px;
    color: #f7f7f7;
    font-weight: 500;
    text-align: center;
    font-family: "Marcellus", serif;
}

.page-cta__list {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 19px;
}

.page-cta__list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 3px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
}

.page-cta__list li:nth-child(1) a {
    background: #0d47a1;
    color: #ffffff;
    border: 1px solid transparent;
}

.page-cta__list li:nth-child(2) a {
    background: #0097a7;
    color: #ffffff;
    border: 1px solid transparent;
}

.page-cta__list li:nth-child(3) a {
    background: #25d366;
    color: #ffffff;
    border: 1px solid transparent;
}

/* Tablet */
@media (max-width: 991px) {
    .section-booking-cta {
        padding: 100px 0;
    }

    .cta-wrap h2 {
        font-size: 30px;
        padding: 0 20px;
    }
}

/* Mobile: shrink padding, stack the CTA list into a full-width column */
@media (max-width: 767px) {
    .section-booking-cta {
        padding: 70px 0;
    }

    .cta-wrap h2 {
        font-size: 24px;
        padding: 0 16px;
    }

    .page-cta__list {
        flex-direction: column;
        align-items: stretch;
        margin: 24px 20px 0;
        gap: 12px;
    }

    .page-cta__list a {
        justify-content: center;
        width: 100%;
        padding: 10px 10px;
    }
}

/* Small phones */
@media (max-width: 420px) {
    .cta-wrap h2 {
        font-size: 30px;
    }
}

/* Section Related Roooms
----------------------------------------------------------------------------- */
.section-related-rooms {
    padding: 70px 0;
    background-color: #f7f7f7;
}

.related-rooms__wrapper .section-title-text-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.related-rooms__wrapper .section-title-text-box h2 {
    color: #333;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.15;
    /*margin-bottom: 15px;*/
    text-transform: uppercase;
    font-family: "Marcellus", serif;
}

.related-rooms__nav {
    display: flex;
    gap: 10px;
    flex: none;
}

.related-rooms__nav-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #333;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.related-rooms__nav-btn:hover {
    background: #00a035d1;
    border-color: #00a035d1;
    color: #fff;
}

.related-rooms__nav-btn svg {
    width: 18px;
    height: 18px;
}

.related-rooms__viewport {
    overflow: hidden;

    margin-top: 20px;
}

.related-rooms__grid {
    display: flex;
    gap: 20px;
    padding: 4px 4px 20px;
}

.related-rooms__grid > .related__item {
    flex: 0 0 300px;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.09);
    margin-top: 15px;
    border-radius: 3px;
    overflow: hidden;
}

.related__item .room-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.room-card__link {
    display: block;
    overflow: hidden;
}

.room-card__img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.room-card__img:hover img {
    transform: scale(1.03);
}

.room-card__text {
    padding: 25px 20px;
}

.room-card__content {
    text-align: center;
}

.room-card__content h3 {
    margin: 0;
    font-size: 22px;
}

.room-card__content h3 a {
    position: relative;
    display: inline-block;
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

.room-card__content h3 a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: #00a035d1;
    transition: width 0.3s ease;
}

.related__item:has(.room-card__img:hover) .room-card__content h3 a,
.related__item:has(.room-card__content h3 a:hover) .room-card__content h3 a {
    color: rgb(0 160 53 / 0.87);
}

.related__item:has(.room-card__img:hover) .room-card__content h3 a::after,
.related__item:has(.room-card__content h3 a:hover) .room-card__content h3 a::after {
    width: 100%;
}

.room-card__text .room__btn {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 20px;
}

.room-card__text .explore-btn {
    border: 1px solid #00a035d1;
    padding: 5px 10px;
}

.room-card__text .book-btn {
    padding: 5px 10px;
}

/* Tablet */
@media (max-width: 991px) {
    .related-rooms__wrapper .section-title-text-box h2 {
        font-size: 30px;
    }
}

/* Mobile: shrink padding, stack the CTA list into a full-width column */
@media (max-width: 767px) {
    .related-rooms__wrapper .section-title-text-box h2 {
        font-size: 28px;
    }
}

/* Section Video
----------------------------------------------------------------------------- */
.section-video__wrapper {
    position: relative;
    width: 100%;
    height: 85vh;
    overflow: hidden;
}

.section-video__wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.section-video__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.section-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    padding: 0;
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
    z-index: 2;
}

.section-video__play:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    transform: translate(-50%, -50%) scale(1.1);
}

.section-video__play:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 5px;
}

.section-video__text {
    position: absolute;
    top: calc(50% + 65px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: #fff;
    font-size: 35px;
    font-weight: 200;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

/* Video Modal
----------------------------------------------------------------------------- */
.video-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9999;
}

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

.video-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}

.video-modal__content {
    position: relative;
    width: min(1000px, 90vw);
    z-index: 1;
}

.video-modal__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.video-modal__video iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.video-modal__close {
    position: absolute;
    top: -45px;
    right: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.video-modal__close:hover {
    transform: rotate(90deg);
}

.video-modal__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Media Gallery
----------------------------------------------------------------------------- */
/* ============================================
   .media-gallery — reusable hero + thumbnail strip
   Use on any page: activities, packages, resort, etc.
   No page-specific naming — safe to reuse as-is.
   ============================================ */

/* ============================================
   .media-gallery — reusable hero + thumbnail strip
   Use on any page: activities, packages, resort, etc.
   No page-specific naming — safe to reuse as-is.

   Layout: main image on top, thumbnail row below.
   Fluid at every width (not just fixed breakpoints):
   the main image scales by aspect-ratio, and thumbnails
   auto-reflow using CSS Grid rather than manual percentages.
   ============================================ */

.media-gallery {
    margin-bottom: 40px;
}

.media-gallery__main {
    width: 100%;
/*     aspect-ratio: 16 / 9; */
/*     max-height: 480px; */
	height: auto;
    overflow: hidden;
    border-radius: 3px;
}

.media-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.25s ease;
}

.media-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.media-gallery__thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 2px solid transparent;
    border-radius: 3px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    background: none;
}

.media-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-gallery__thumb:hover {
    opacity: 0.85;
}

.media-gallery__thumb.is-active {
    opacity: 1;
    border-color: #00a035d1;
}

/* Tighten the grid a little on small screens so thumbnails
   don't get too large relative to the main image. */
@media (max-width: 480px) {
    .media-gallery__thumbs {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
    }
}


/* PAGE: Section Activities
----------------------------------------------------------------------------- */
.activities__wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.activities__wrapper > .package__item:nth-child(even) {
    direction: rtl;
}

.activities__wrapper > .package__item:nth-child(even) > * {
    direction: ltr;
    text-align: right;
}

.activities__wrapper .package__item {
    display: grid;
    grid-template-columns: 45% 50%;
    align-items: start;
    gap: 40px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
}

.activities__wrapper .package__img {
    height: 380px;
}

.activities__wrapper .package__item .package__text {
    margin-top: 30px;
    padding-top: 30px;
}

/* Tablet: reduce gap and image height */
@media (max-width: 991px) {
    .page-activity .package__item {
        gap: 24px;
    }

    .page-activity .package__img {
        height: 300px;
    }

    .page-activity .package__btn-box {
        margin-top: 15px;
    }
}

/* Mobile: stack into single column, undo RTL trick */
@media (max-width: 767px) {
    .page-activity .package__item {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* On mobile, image-on-right/text-on-left swapping gets confusing;
       force everything back to normal reading order and stack */
    .page-activity > .package__item:nth-child(even) {
        direction: ltr;
    }

    .page-activity > .package__item:nth-child(even) > * {
        direction: ltr;
        text-align: left;
    }

    .page-activity .package__img {
        height: 220px;
    }

    .page-activity .package__item .package__text {
        margin-top: 0;
        padding: 20px;
    }

    .page-activity .package__btn-box {
        margin-top: 20px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .page-activity .package__img {
        height: 180px;
    }

    .page-activity .package__item .package__text {
        padding: 10px 20px 25px;
    }

    .page-activity .package__btn-box {
        margin-top: 25px;
    }
}

/* Section Activities [HOME PAGE]
----------------------------------------------------------------------------- */
.section-activities {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(180deg, #eafaf1 0%, #f4fdf8 50%, #ffffff 100%);
}

.activities__wrapper .section-title-text-box {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.activities__wrapper .section-title-text-box h2 {
    flex: 0 0 35%;
}

.activities__wrapper .section-title-text-box p {
    border-left: 1px solid #ddd;
    flex: 0 0 50%;
    margin-left: 25px;
    padding-left: 25px;
}

/* Wraps track + side arrows so arrows can position against it */
.activities__carousel {
    position: relative;
}

/* Carousel track */
.activities__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    /*scroll-snap-type: x mandatory;*/
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.activities__track::-webkit-scrollbar {
    display: none;
}

/* Each card: 4 per row on desktop */
.activities__item {
    position: relative;
    flex: 0 0 calc(25% - 15px);
    /*scroll-snap-align: start;*/
    aspect-ratio: 3 / 4;
    overflow: hidden;
    display: block;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.activities__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.activities__item:hover img {
    transform: scale(1.1);
}

.activities__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.35) 100%);
    transition: background 0.3s ease;
}

.activities__item:hover .activities__overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.45) 100%);
}

.activities__item h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
    width: 100%;
    z-index: 2;
}

/* Side arrows — vertically centered, sitting outside the card edges */
.activities__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.25s ease;
    z-index: 3;
}

.activities__arrow:hover {
    background: #00A035;
    border-color: #00A035;
    color: #fff;
}

.activities__arrow--prev {
    left: -24px;
}

.activities__arrow--next {
    right: -24px;
}

/* Responsive */
@media (max-width: 992px) {
    .section-activities {
        padding: 70px 0;
    }

    .activities__wrapper .section-title-text-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .activities__wrapper .section-title-text-box h2 {
        flex: 1;
    }

    .activities__wrapper .section-title-text-box p {
        border: none;
        flex: 1;
        margin: 0;
        padding: 0;
    }

    .activities__track {
        margin-top: 10px;
    }

}

@media (max-width: 576px) {
    .activities__item {
        flex: 0 0 80%;
    }

    .activities__arrow--prev {
        left: 5px;
    }

    .activities__arrow--next {
        right: 5px;
    }
}

/* Package Detail
----------------------------------------------------------------------------- */
.section-package-detail {
    padding: 100px 0;
    background-color: #fff;
}

.package-detail__grid {
    /*    display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: start;*/
}

/* GALLERY */
.activity-detail__gallery,
.package-detail__gallery {
    margin-bottom: 40px;
}

.activity-detail__main-img,
.package-detail__main-img {
    width: 100%;
    height: 480px;
	height: auto;
    overflow: hidden;
    border-radius: 3px;
}

.activity-detail__main-img img,
.package-detail__main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.25s ease;
}

.activity-detail__thumbs,
.package-detail__thumbs {
    display: flex;
    gap: 12px;
    margin-top: 15px;
}

.activity-detail__thumb,
.package-detail__thumb {
    width: 160px;
    /*height: 60px;*/
    border: 2px solid transparent;
    border-radius: 3px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.activity-detail__thumb img,
.package-detail__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.activity-detail__thumb:hover,
.package-detail__thumb:hover {
    opacity: 0.85;
}

.activity-detail__thumb.is-active,
.package-detail__thumb.is-active {
    opacity: 1;
    border-color: #00a035d1;
}

/* INFO */
.package-detail__badge-inline {
    display: none; /* badge now lives in hero banner; remove if not needed */
}

.package-detail__info {
    font-size: 19px;
    line-height: 1.5;
    color: #333;
}

.package-detail__info p {
    margin-bottom: 10px;
}

.package-detail__info ul {
    padding: 0;
    list-style: none inside none;
    margin: 10px 0;
}

.package-detail__info ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 5px;
    font-size: 16px;
    color: #444;
}

.package-detail__info ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #00a035d1;
    font-weight: 700;
}

/* Related Packages Section (reusing room-carousel pattern)
----------------------------------------------------------------------------- */
.section-related-packages {
    padding: 70px 0;
    background-color: #f7f7f7;
}

.section-related-packages .section-title-text-box {
    text-align: center;
    width: 80%;
    margin: 0 auto 60px;
}

.package-carousel {
    position: relative;
}

.package-carousel__viewport {
    overflow: hidden;
}

.package-carousel__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 60px) / 3);
    gap: 30px;
    will-change: transform;
    transition: transform 0.4s ease;
}

/* PACKAGE CARD (matches your existing .package__text pattern) */
.package-carousel__grid .package__item {
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 0;

    /*display: flex;*/
    /*flex-direction: column;*/
    height: 100%;
}

.package-carousel__grid .package__img {
    display: block;
    height: 220px;
    overflow: hidden;
}

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

.package__img:hover img {
    transform: scale(1.03);
}

.package__text {
    padding: 28px 30px 35px;
}

.package-carousel__grid .package__text {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 25px 30px 35px;
}

.package-carousel__grid .package__text p {
    flex: 1;
    margin-bottom: 18px;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.package__actions {
    margin-top: auto;
    display: flex;
    gap: 10px;
}

.package__actions .details-btn {
    margin-right: 0;
}

.package__text span {
    font-size: 13px;
    text-transform: uppercase;
    color: #00a035d1;
    font-weight: 600;
}

.package__text h3 {
    margin: 8px 0 10px;
}

.package-carousel__grid .package__text h3 a {
    padding: 0;
    font-size: 21px;
    color: #333;
    font-weight: 500;
    text-transform: capitalize;
}

.package__text .details-btn {
    margin-right: 10px;
    padding: 6px 12px;
}

/* ARROWS — same pattern as room-carousel */
.package-carousel__arrow {
    position: absolute;
    top: 40%;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background-color: #fff;
    color: #333;
    font-size: 20px;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.2s ease;
}

.package-carousel__arrow:hover {
    background-color: #00a035d1;
    border-color: #00a035d1;
    color: #fff;
}

.package-carousel__arrow--prev {
    left: -24px;
}

.package-carousel__arrow--next {
    right: -24px;
}

/* =========================================================
   LARGE TABLET — show 2 cards instead of 3
========================================================= */
@media (max-width: 1199px) {
    .section-related-packages {
        padding: 80px 0;
    }

    .package-carousel__grid {
        grid-auto-columns: calc((100% - 30px) / 2); /* 2 cards, 1 gap */
    }

    .package-carousel__arrow {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .package-carousel__arrow--prev {
        left: -20px;
    }

    .package-carousel__arrow--next {
        right: -20px;
    }
}

/* =========================================================
   TABLET / SMALL SCREEN — show 1 card, arrows move inside
========================================================= */
@media (max-width: 767px) {
    .section-related-packages {
        padding: 70px 0;
    }

    .section-related-packages .section-title-text-box {
        width: 100%;
        margin: 0 auto 40px;
    }

    .package-carousel__viewport {
        padding: 0 10px; /* room for arrows so they don't clip page edge */
    }

    .package-carousel__grid {
        grid-auto-columns: 100%; /* 1 card per view */
        gap: 20px;
    }

    .package-carousel__grid .package__img {
        height: 180px;
    }

    .package-carousel__grid .package__text {
        padding: 20px 20px 25px;
    }

    .package-carousel__grid .package__text h3 a {
        font-size: 18px;
    }

    .package-carousel__arrow {
        width: 40px;
        height: 40px;
        font-size: 17px;
        top: 35%;
    }

    .package-carousel__arrow--prev {
        left: -10px;
    }

    .package-carousel__arrow--next {
        right: -10px;
    }
}

/* Section Activities [ACTIVITY PAGE] + Section Packages [PACKAGE PAGE]
----------------------------------------------------------------------------- */
.page-activity .package__text h2 a,
.page-package .package__text h2 a {
    padding: 0;
    color: #333;
    font-size: 32px;
    font-weight: 500;
    text-transform: capitalize;
}

.page-package .package__text {
	padding: 0 30px 30px;
}


/* Activity Detail [SINGLE ACTIVITY PAGE]
----------------------------------------------------------------------------- */
.section-activity-detail {
    padding: 100px 0;
    background-color: #fff;
}

.activity-detail__info {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

.activity-carousel__grid .activity__text h3 a {
    padding: 0;
    font-size: 21px;
    color: #333;
    text-transform: capitalize;
}

.activity-detail__info p {
    margin-bottom: 10px;
}

.activity-detail__info ul {
    padding: 0;
    list-style: none inside none;
    margin: 10px 0;
}

.activity-detail__info ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 5px;
    font-size: 16px;
    color: #444;
}

.activity-detail__info ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #00a035d1;
    font-weight: 700;
}

/* Section Related Activities
----------------------------------------------------------------------------- */
.section-related-activities {
    padding: 70px 0;
    background-color: #f7f7f7;
}

.section-related-activities .section-title-text-box {
    text-align: center;
    width: 80%;
    margin: 0 auto 60px;
}

.activity-carousel {
    position: relative;
}

.activity-carousel__viewport {
    overflow: hidden;
}

.activity-carousel__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 60px) / 3); /* 3 cards, 2 gaps of 30px */
    gap: 30px;
    will-change: transform;
}

/* ACTIVITY CARD — bottom-aligned buttons */
.activity__item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.activity__img {
    display: block;
    height: 220px;
    overflow: hidden;
}

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

.activity__img:hover img {
    transform: scale(1.03);
}

.activity__text {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 25px;
}

.activity__text p {
    flex: 1;
    margin-bottom: 18px;
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

.activity__actions {
    margin-top: auto;
    display: flex;
    gap: 10px;
}

.activity__text span {
    font-size: 13px;
    text-transform: uppercase;
    color: #00a035d1;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.activity__text h3 {
    font-size: 21px;
    margin: 8px 0 10px;
    color: #333;
}

.activity__text a,
.package__text a {
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    border-radius: 3px;
    text-transform: uppercase;
    display: inline-block;
    padding: 9px 18px;
}

.activity__text .details-btn {
    margin-right: 10px;
}

.activity__text .details-btn {
    background-color: transparent;
    border: 1px solid #ddd;
    color: #333;
}

.activity__text .details-btn:hover {
    background-color: #00a035d1;
    color: #fff;
}

.activity-carousel__arrow {
    position: absolute;
    top: 40%;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background-color: #fff;
    color: #333;
    font-size: 20px;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.activity-carousel__arrow:hover {
    background-color: #00a035d1;
    border-color: #00a035d1;
    color: #fff;
}

.activity-carousel__arrow--prev {
    left: -24px;
}

.activity-carousel__arrow--next {
    right: -24px;
}

/* =========================================================
   LARGE TABLET — show 2 cards instead of 3
========================================================= */
@media (max-width: 1199px) {
    .section-related-activities {
        padding: 80px 0;
    }

    .activity-carousel__grid {
        grid-auto-columns: calc((100% - 30px) / 2); /* 2 cards, 1 gap */
    }

    .activity__img {
        height: 200px;
    }

    .activity-carousel__arrow {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .activity-carousel__arrow--prev {
        left: -20px;
    }

    .activity-carousel__arrow--next {
        right: -20px;
    }
}

/* =========================================================
   TABLET / SMALL SCREEN — show 1 card, arrows move inside
========================================================= */
@media (max-width: 767px) {
    .section-related-activities {
        padding: 60px 0;
    }

    .section-related-activities .section-title-text-box {
        width: 100%;
    }

    .activity-carousel__viewport {
        padding: 0 10px; /* room for arrows so they don't clip page edge */
    }

    .activity-carousel__grid {
        grid-auto-columns: 100%; /* 1 card per view */
        gap: 20px;
    }

    .activity__img {
        height: 180px;
    }

    .activity__text {
        padding: 20px;
    }

    .activity__text h3 {
        font-size: 18px;
    }

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

    .activity-carousel__arrow {
        width: 36px;
        height: 36px;
        font-size: 16px;
        top: 35%;
    }

    .activity-carousel__arrow--prev {
        left: -10px;
    }

    .activity-carousel__arrow--next {
        right: -10px;
    }
}

/* Section Rooms [HOME PAGE]
----------------------------------------------------------------------------- */
.section-rooms {
    padding: 100px 0;
    background-color: #f7f7f7;
}

.section-rooms .section-title-text-box {
    text-align: center;
    width: 80%;
    margin: 0 auto 60px;
}

.room__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    justify-content: center;
    gap: 22px;
}

.room__item {
    flex: 0 0 360px;
    scroll-snap-align: start;
    overflow: hidden;
    border-radius: 3px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.09);
}

.room-item__text {
    padding: 40px 30px;
    font-size: 15px;
}

.room-item__text p {
    margin-bottom: 25px;
}

.room-featured-img {
    display: block;
    height: 280px;
    overflow: hidden;
    border-radius: 3px 3px 0 0;
}

.room-featured-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.room-featured-img:hover img {
    transform: scale(1.02);
}

.room-item__text h3 {
    margin-bottom: 14px;
}

.room-item__text h3 a {
    font-size: 24px;
    font-weight: 500;
    color: #333333;
    position: relative;
    transition: color 0.3s ease;
}

.room-item__text h3 a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: #00a035d1;
    transition: width 0.3s ease;
}

.room__item:has(.room-featured-img:hover) .room-item__text h3 a,
.room__item:has(.room-item__text h3 a:hover) .room-item__text h3 a {
    color: rgb(0 160 53 / 0.87);
}

.room__item:has(.room-featured-img:hover) .room-item__text h3 a::after,
.room__item:has(.room-item__text h3 a:hover) .room-item__text h3 a::after {
    width: 100%;
}

.room-item__text ul {
    margin-top: 8px;
    font-size: 15px;
}

.room-item__text ul li {
    display: flex;
    align-items: center;
    line-height: 1.9;
}

.room-item__text ul li:not(:last-child) {
    margin-bottom: 5px;
}

.room-item__text ul li img {
    height: 22px;
}

.room-card__price {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 12px 0 20px;
    white-space: nowrap;
}

.room-card__label {
    font-size: 17px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
    color: #8a8f98;
}

.room-card__value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #1f2933;
}

.room-card__value small {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #2eb55b;
    margin-right: 2px;
}

.room-item__features {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 15px auto;
}

.room-item__features li {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.room-item__features li img {
    height: 22px;
    margin-bottom: 5px;
}

.room-item__features li span:nth-child(1) {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 5px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.room__btn {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    font-size: 15px;
}

.explore-btn {
    display: block;
    background-color: #fff;
    border: 1px solid #00a035d1;
    color: #333;
    padding: 6px 18px;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    text-align: center;
    text-transform: uppercase;
}

.explore-btn:hover {
    background-color: #00a035d1;
    color: #fff;
}

.book-btn {
    display: block;
    border-radius: 3px;
    text-align: center;
    text-transform: uppercase;
    background-color: #00a035d1;
    color: #fff;
    padding: 6px 18px;
}

.book-btn:hover {
    background-color: #00a035;
}

/* ============ CAROUSEL WRAPPER — now the positioning context for arrows ============ */
.room-carousel {
    position: relative;
}

.room-carousel__viewport {
    overflow: hidden;
}

.room-carousel__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 60px) / 3);
    gap: 30px;
    will-change: transform;
}

.room-carousel__grid .room__item {
    min-width: 0;
}

/* ARROWS — positioned relative to .room-carousel, so they track the card row
   at every screen width instead of the full browser window */
.room-carousel__arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background-color: #fff;
    color: #333;
    font-size: 20px;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.room-carousel__arrow:hover {
    background-color: #00a035d1;
    border-color: #00a035d1;
    color: #fff;
}

/* Straddle the card row edge — half the arrow sits outside, half inside */
.room-carousel__arrow--prev {
    left: -24px;
}

.room-carousel__arrow--next {
    right: -24px;
}

/* =========================================================
   LARGE TABLET — 2 CARDS
========================================================= */
@media (max-width: 1199px) {
    .room-carousel__grid {
        grid-auto-columns: calc((100% - 30px) / 2);
    }

    .section-rooms .section-title-text-box {
        width: 100%;
        margin: 0 auto 60px;
    }
}

/* =========================================================
   TABLET / SMALL SCREEN
========================================================= */
@media (max-width: 767px) {
    .section-rooms {
        padding: 70px 0;
    }

    .room-carousel__grid {
        grid-auto-columns: 100%;
        gap: 20px;
    }

    .room-carousel__arrow {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .room-carousel__arrow--prev {
        left: -21px;
    }

    .room-carousel__arrow--next {
        right: -21px;
    }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575px) {
    .section-rooms {
        padding: 60px 0;
    }

    .room-featured-img {
        height: 240px;
    }

    .room-item__text {
        padding: 30px 20px;
    }

    .room-item__text h3 a {
        font-size: 21px;
    }

    .room-item__features {
        gap: 6px;
    }

    .room-item__features li {
        font-size: 13px;
    }

    .room-item__features li span:nth-child(1) {
        padding: 4px 8px;
    }

    .room__btn {
        gap: 8px;
    }

    .explore-btn {
        padding: 9px 14px;
        font-size: 14px;
    }

    .book-btn {
        padding: 9px 18px;
        font-size: 14px;
    }

    .room-carousel__arrow {
        width: 45px;
        height: 45px;
        font-size: 25px;
    }

    .room-carousel__arrow--prev {
        left: -18px;
    }

    .room-carousel__arrow--next {
        right: -18px;
    }
}

/* Section Packages [HOME PAGE]
----------------------------------------------------------------------------- */
.section-packages {
    position: relative;
    padding: 100px 0;
}

.packages__carousel {
    position: relative;
    display: block;
}

.packages__content {
    position: relative;
    overflow: hidden;
}

.packages__content .package__item {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(60px);
    transition: transform 0.6s ease, opacity 0.6s ease;
    pointer-events: none;
}

.packages__content .package__item--active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.packages__content .package__item--prev {
    transform: translateX(-60px);
}

.packages__content .package__item--next-out {
    transform: translateX(60px);
    opacity: 0;
    visibility: hidden;
}

.featured-package__btn {
    margin-top: 15px;
    display: inline-block;
}

.packages__nav {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.packages__arrow {
    background: transparent;
    border: none;
    box-shadow: none;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.packages__arrow:hover {
    opacity: 1;
    background: transparent;
}

.packages__arrow--prev:hover {
    transform: translateX(-4px);
}

.packages__arrow--next:hover {
    transform: translateX(4px);
}

.page-package .package__item {
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* --- SHARED CARD STYLING (used by both homepage carousel & packages.html grid) --- */
.package__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
}

.package__img {
/*     height: 500px; */
	height: auto;
    border-radius: 3px;
    overflow: hidden;
}

.package__img a {
    display: block;
    height: 100%;
}

.package__img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.packages__content .package__text {
    padding: 0;
}

/* FOR HOMEPAGE CAROUSEL ONLY */
.packages__content .package__text span {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 400;
}

.packages__content .package__text h2 {
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 18px;
    color: #fff;
}

.packages__content .package__text p {
    font-size: 16px;
    line-height: 1.7;
    color: #f7f7f7;
    margin-bottom: 14px;
}

/* FOR PACKAGES PAGE GRID ONLY */
.package__text span {
    display: inline-block;
    color: #333;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.package__text h2 {
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 18px;
    color: #333;
}

.package__text p {
    font-size: 16px;
    line-height: 1.7;
    color: #222;
    margin-bottom: 14px;
}

.package__btn-box {
    margin-top: 20px;
    display: inline-flex;
}

.package__text .details-btn {
    background-color: transparent;
    border: 1px solid #00a035d1;
    color: #333;
    display: inline-flex;
    align-items: center;
}

.package__text .book-btn {
    background-color: #00a035d1;
    color: #fff;
}

.package__text .details-btn:hover {
    background-color: #00a035d1;
    color: #fff;
}

.package__text .book-btn:hover {
    background-color: #00a035;
}

/* --- PACKAGES.HTML — static stacked grid, alternating sides --- */
.packages__wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.bg-color--gray .packages__wrapper {
    row-gap: 80px;
}

.packages__wrapper > .package__item:nth-child(even) {
    direction: rtl;
}

.packages__wrapper > .package__item:nth-child(even) > * {
    direction: ltr;
}

/* "See All Packages" link — homepage only */
.packages__more {
    text-align: center;
}

.packages__more .explore-btn {
    display: inline-block;
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.packages__more .explore-btn:hover {
    background-color: #fff;
    color: #00a035d1;
}

/* SECTION EVENTS
----------------------------------------------------------------------------- */
.section-events {
    position: relative;
    padding: 100px 0;
}

.events__wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
    grid-column-gap: 40px;
    grid-row-gap: 80px;
}

/* If there's an odd number of items, let the last one span full width
   instead of sitting alone in a half-empty row */
.events__wrapper .event__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.event__item {
    /*border-bottom: 1px solid #ddd;*/
    /*padding-bottom: 40px;*/
}

.events__wrapper .event__item:nth-last-child(-n+2) {
    border-bottom: none;
}

.event__text {
    line-height: 1.6;
}

.event__text h2 {
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 5px;
}

.event__text h3 {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 10px;
}

.event__item .explore-btn {
    display: inline-block;
    background-color: #fff;
    border: 1px solid #00a035d1;
    color: #333;
    padding: 7px 20px;
    border-radius: 3px;
    font-size: 16px;
    margin: 20px 0 8px;
}

/* EVENT GALLERY — featured image + thumbnail strip */
.event-gallery {
    margin-bottom: 25px;
}

.event-gallery__main {
    width: 100%;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
    background-color: #f0f0f0;
}

.event-gallery__main img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
    transition: opacity 0.15s ease;
}

.event-gallery__thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.event-gallery__thumb {
    flex: 0 0 auto;
    width: 125px;
    height: 90px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    background: none;
    opacity: 0.65;
    transition: border-color 0.25s ease, opacity 0.25s ease;
}

.event-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.event-gallery__thumb:hover {
    opacity: 1;
}

.event-gallery__thumb.is-active {
    border-color: #00A035;
    opacity: 1;
}

/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991px) {
    .section-events {
        padding: 70px 0;
    }

    .events__wrapper {
        grid-row-gap: 45px;
    }

    .events__wrapper .event__item:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .event-gallery__main img {
        height: 370px;
    }

    .event-gallery__thumb {
        width: 95px;
        height: 65px;
    }

    .event__text h2 {
        font-size: 27px;
    }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575px) {
    .section-events {
        padding: 70px 0;
    }

    .event-gallery__main img {
        height: 200px;
    }

    .event-gallery__thumbs {
        gap: 8px;
    }

    .event-gallery__thumb {
        width: 90px;
        height: 80px;
    }

    /*.events__wrapper .event__item {
        padding-bottom: 30px;
    }*/
    .event__text h2 {
        font-size: 24px;
    }

    .event__text h3 {
        font-size: 17px;
    }

    .event__item .explore-btn {
        padding: 6px 16px;
        font-size: 14px;
    }
}


/* Section Swimming
----------------------------------------------------------------------------- */
.section-swimming {
    padding: 100px 0 0;
}


/* Section Restaurant
----------------------------------------------------------------------------- */
.section-restaurant {
    padding: 100px 0 0;
}


/* Section Indoor Games
----------------------------------------------------------------------------- */
.section-indoor-games {
    padding: 100px 0 0;
}


/* Section Water Park
----------------------------------------------------------------------------- */
.section-water-park {
    padding: 100px 0 0;
}

/* Section Heritage Park
----------------------------------------------------------------------------- */
.section-heritage-park {
    padding: 100px 0 0;
}


/* Section Science Park
----------------------------------------------------------------------------- */
.section-science-park {
    padding: 100px 0 0;
}

/* Page Section
----------------------------------------------------------------------------- */
.page-section {
    padding: 70px 0;
}

.page-section__content {
    font-size: 16px;
}

.page-section__content p:not(:last-child) {
    margin-bottom: 15px;
}

.page-section__content img {
    width: 100%;
}

/* Section Entry Tickets
----------------------------------------------------------------------------- */
.section-entry-tickets {
    padding: 100px 0;
}

.tickets__wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.ticket__item {
    background-color: #00A035;
    color: #fff;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.09);
    text-align: center;
}

.ticket-title {
    padding: 10px;
    border-bottom: 1px #00832C solid;
    font-size: 27px;
    font-weight: 400;
    text-transform: uppercase;
    width: 100%;
    color: #fff;
    text-shadow: 0 1px 0 #777;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
}

.ticket-price {
    padding: 15px 20px 30px;
    font-size: 40px;
    font-weight: 500;
    text-shadow: 0 2px 0 #777;
    color: #fff;
}

.ticket__currency {
    color: #ddd;
    font-size: 20px;
    text-shadow: none;
}

.ticket-price_sub {
    color: #eee;
    font-size: 20px;
    text-shadow: none;
    display: block;
}

/* =========================================================
   TABLET
========================================================= */
@media (max-width: 767px) {
    .section-entry-tickets {
        padding: 70px 0;
    }

    .tickets__wrapper {
        gap: 20px;
        padding: 0 20px;
    }

    .ticket-title {
        font-size: 22px;
    }

    .ticket-price {
        font-size: 34px;
        padding: 12px 15px 25px;
    }

    .ticket__currency,
    .ticket-price_sub {
        font-size: 17px;
    }
}

/* =========================================================
   SMALL MOBILE — prevent 300px min-width overflow
========================================================= */
@media (max-width: 360px) {
    .tickets__wrapper {
        grid-template-columns: 1fr;
        padding: 0 15px;
    }

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

    .ticket-price {
        font-size: 30px;
    }
}

/* Section MAP
----------------------------------------------------------------------------- */
.section-map {
    padding: 100px 0 0;
    background-color: #f7f7f7;
}

/* Section Contact
--------------------------------------------------------------*/
.section-contact {
    padding: 80px 0 100px;
    background-color: #f7f7f7;
}

.contact__wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.contact__left-side {
    flex: 0 0 45%;
    margin-top: 20px;
}

.contact__text-box h2 {
    line-height: 1.2;
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 400;
    color: #0d2e0d;
    margin-bottom: 20px;
}

.contact__text-box:not(:last-child) {
    margin-bottom: 30px;
    border-bottom: 1px dotted #cdcdcd;
}

.contact__item-wrapper {
    display: flex;
    flex-direction: column;
}

.contact__item {
    padding-bottom: 30px;
}

.contact__item h3 {
    font-size: 15px;
    font-weight: 600;
    color: #404651;
    margin: 0 0 8px;
}

.contact__item p {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    line-height: 1.6;
    color: #1f2937;
    margin: 0;
}

.contact__item p span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #ecfdf5;
    border-radius: 50%;
    margin-top: 1px;
}

.contact__item p span ion-icon {
    font-size: 21px;
    color: #10b981;
}

/* ── Card ── */
.sb-form-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 36px;
    border: 1px solid #e0e8e0;
    flex: 0 0 45%;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .05);
}

/* ── Header ── */
.sb-form-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e6f0e6;
    color: #2d7a2d;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 20px;
    margin-bottom: 22px;
}

.sb-form-eyebrow svg {
    width: 12px;
    height: 12px;
    stroke: #2d7a2d;
    fill: none;
    stroke-width: 2;
}

.sb-form-title {
    font-size: 28px;
    font-weight: 400;
    color: #0d2e0d;
    margin-bottom: 20px;
}

.sb-form-subtitle {
    font-size: 15px;
    color: #7a9a7a;
    margin-bottom: 28px;
    line-height: 1.65;
}

/* ── Field rows ── */
.sb-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
}

.sb-field {
    margin-bottom: 14px;
}

.sb-field.no-mb {
    margin-bottom: 0;
}

.sb-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #4a6a4a;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 7px;
}

.sb-field label ion-icon {
    font-size: 18px;
    color: #7aaa7a;
    flex-shrink: 0;
}

.sb-req {
    color: #e24b4a;
    margin-left: 1px;
}

.sb-field input,
.sb-field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #dde8dd;
    border-radius: 8px;
    font-size: 15px;
    font-family: "Anek Bangla", sans-serif;
    background: #fbfcfb;
    color: #1a1a1a;
    outline: none;
    transition: border-color .18s, box-shadow .18s, background .18s;
}

.sb-field input::placeholder,
.sb-field textarea::placeholder {
    color: #b0c8b0;
    font-family: "Anek Bangla", sans-serif;
}

.sb-field input:focus,
.sb-field textarea:focus {
    border-color: #2d7a2d;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(45, 122, 45, .08);
}

.sb-field input.error,
.sb-field textarea.error {
    border-color: #e24b4a;
    box-shadow: 0 0 0 3px rgba(226, 75, 74, .08);
}

.sb-field textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.65;
}

.sb-field .sb-char {
    text-align: right;
    font-size: 11px;
    color: #b0c8b0;
    margin-top: 4px;
}

/* ── Privacy ── */
.sb-privacy {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 15px;
    color: #7a9a7a;
    line-height: 1.55;
    margin-bottom: 20px;
    padding: 11px 13px;
    background: #f7fbf7;
    border-radius: 8px;
    border: 1px solid #e0eee0;
}

.sb-privacy ion-icon {
    font-size: 15px;
    color: #2d7a2d;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Submit ── */
.sb-btn {
    width: 100%;
    padding: 13px 20px;
    background: #1a5c1a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: background .18s, transform .1s;
    letter-spacing: .01em;
}

.sb-btn svg {
    width: 17px;
    height: 17px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
}

.sb-btn:hover {
    background: #236e23;
}

.sb-btn:active {
    transform: scale(.98);
}

.sb-success {
    display: none;
    align-items: center;
    gap: 10px;
    background: #eaf3de;
    border: 1px solid #97c459;
    border-radius: 8px;
    padding: 13px 16px;
    font-size: 17px;
    color: #27500a;
    margin-top: 14px;
    line-height: 1.5;
}

.sb-success svg {
    width: 20px;
    height: 20px;
    stroke: #3b6d11;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

.sb-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0;
    color: #c0d4c0;
    font-size: 12px;
}

.sb-divider::before,
.sb-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e8f0e8;
}

.sb-btn:disabled {
    opacity: .7;
    cursor: not-allowed;
}

.sb-error-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fdf0f0;
    border: 1px solid #e24b4a;
    border-radius: 8px;
    padding: 13px 16px;
    font-size: 15px;
    color: #c0392b;
    margin-top: 14px;
    line-height: 1.5;
}

/* Responsive
--------------------------------------------------------------*/
@media (max-width: 992px) {
    .section-contact {
        padding: 60px 0 70px;
    }

    .contact__wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .contact__left-side {
        flex: 0 0 100%;
        margin-top: 0;
    }

    .sb-form-card {
        flex: 0 0 100%;
        padding: 32px 28px;
    }
}

@media (max-width: 768px) {
    .sb-row-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .sb-field.no-mb {
        margin-bottom: 14px;
    }
}

@media (max-width: 576px) {
    .section-contact {
        padding: 50px 0 60px;
    }

    .contact__wrapper {
        gap: 30px;
    }

    .contact__text-box h2 {
        font-size: 20px;
    }

    .contact__item p {
        font-size: 15px;
        gap: 8px;
    }

    .contact__item p span {
        width: 28px;
        height: 28px;
    }

    .contact__item p span ion-icon {
        font-size: 18px;
    }

    .sb-form-card {
        padding: 24px 18px;
        border-radius: 12px;
    }

    .sb-form-title {
        font-size: 22px;
    }

    .sb-field input,
    .sb-field textarea {
        font-size: 14px;
        padding: 9px 12px;
    }

    .sb-privacy {
        font-size: 13px;
        padding: 10px 12px;
    }

    .sb-btn {
        font-size: 14px;
        padding: 12px 16px;
    }

    .sb-success,
    .sb-error-msg {
        font-size: 14px;
        padding: 11px 14px;
    }
}

/* Page Header
----------------------------------------------------------------------------- */
/*.page-header {
    position: relative;
    height: 70vh;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.09)), var(--page-header-bg, url("../images/slider/slider_2.jpg"));
    background-size: cover;
    background-position: center;
}*/

.page-header {
    position: relative;
    height: 70vh;
    --page-header-bg: url("../images/slider/slider_2.jpg"); /* default, overridden inline per page */
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.09)), var(--page-header-bg);
    background-size: cover;
    background-position: center;
}

/* optional dark overlay so white text/nav stays readable over busy images */
.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.page-header__content {
    position: absolute;
    top: 52%;
    left: 0;
    text-align: left;
    z-index: 2;
    color: #ddd;
    width: 70%;
    line-height: 1.6;
    font-weight: 400;
}

.page-header__content h1 {
    font-size: 40px;
    color: #ddd;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 10px;
}

.page-header__content p:not(:last-child) {
    margin-bottom: 8px;
}

.page-header .main {
    position: relative;
    height: 100%;
    width: 100%;
}

/* Section Gallery
----------------------------------------------------------------------------- */
.section-gallery {
    background-color: #fff;
}

.gallery__viewport {
    overflow: hidden;
}

.gallery__wrapper {
    display: flex;
    transition: transform 0.8s ease;
}

.gallery__item {
    display: block;
    flex: 0 0 33.33%;
    box-sizing: border-box;
}

.gallery__item figure {
    position: relative;
    height: 350px;
    overflow: hidden;
    margin: 0;
}

.gallery__item figure img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery__item:hover figure img {
    transform: scale(1.1);
}

.gallery__item figure::before {
    position: absolute;
    top: 0;
    left: -86%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
    transform: skewX(-25deg);
    pointer-events: none;
}

.gallery__item:hover figure::before {
    animation: shine 0.9s;
}

@keyframes shine {
    100% {
        left: 125%;
    }
}

/* SECTION: Section Gallery Page [Gallery Page]
----------------------------------------------------------------------------- */
.section-gallery-page {
    padding: 100px 0;
    background-color: #f7f7f7;
}

.gallery-filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 45px;
}

.gallery-filter__button {
    position: relative;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    padding: 12px 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.gallery-filter__button:hover,
.gallery-filter__button.is-active {
    color: #fff;
    background-color: #00A035;
    border-color: #00A035;
}

/* Gallery Grid — responsive columns, fixed 240px row height */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-auto-rows: 240px;
    gap: 20px;
}

.gallery-grid__item {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 3px;
}

.gallery-grid__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-grid__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gallery-grid__overlay-piece {
    position: absolute;
    background: rgb(255 255 255 / 0.3);
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.gallery-grid__overlay-piece--top {
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    transform: translateY(-100%);
}

.gallery-grid__overlay-piece--bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    transform: translateY(100%);
}

.gallery-grid__overlay-piece--left {
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    transform: translateX(-100%);
}

.gallery-grid__overlay-piece--right {
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    transform: translateX(100%);
}

.gallery-grid__item:hover .gallery-grid__overlay-piece {
    transform: translate(0, 0);
}

.gallery-grid__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    font-size: 27px;
    opacity: 0;
    transition: opacity 0.3s ease 0.2s, transform 0.3s ease;
    z-index: 1;
}

.gallery-grid__item:hover .gallery-grid__icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0.2s;
}

/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991px) {
    .section-gallery-page {
        padding: 70px 0;
    }

    .gallery-grid {
        grid-auto-rows: 200px;
        gap: 15px;
    }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575px) {
    .section-gallery-page {
        padding: 50px 0;
    }

    .gallery-filter {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 8px;
        margin-bottom: 30px;
    }

    .gallery-filter__button {
        padding: 10px 6px;
        font-size: 13px;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        grid-auto-rows: 160px;
        gap: 10px;
    }

    .gallery-grid__icon {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
}

/* =========================================================
   TOUCH DEVICES — hover doesn't translate well to tap.
   Overlay stays hidden until the finger is actually down
   (:active), then resets on release. Nothing here is ever
   "stuck open" the way the previous version was.
========================================================= */
@media (hover: none) {
    .gallery-grid__overlay-piece {
        transition: none;
    }

    .gallery-grid__overlay-piece--top {
        transform: translateY(-100%);
    }

    .gallery-grid__overlay-piece--bottom {
        transform: translateY(100%);
    }

    .gallery-grid__overlay-piece--left {
        transform: translateX(-100%);
    }

    .gallery-grid__overlay-piece--right {
        transform: translateX(100%);
    }

    .gallery-grid__item:active .gallery-grid__overlay-piece {
        transform: translate(0, 0);
    }

    .gallery-grid__icon {
        opacity: 0;
        transition: none;
    }

    .gallery-grid__item:active .gallery-grid__icon {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}


/* Site Footer
----------------------------------------------------------------------------- */
.site-footer {
    padding: 70px 0 40px;
    background-color: #1b1b1b;
}

.footer__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    color: #aeaeae;
    border-bottom: 1px solid #333;
    padding-bottom: 50px;
    margin-bottom: 50px;
}

.footer__intro-text h3 {
    font-weight: 400;
    color: #f7f7f7;
    font-size: 20px;
    margin-bottom: 5px;
}

.footer__intro-text h3 span {
    color: #f7f7f7;
    font-weight: 400;
}

.footer__intro-text p {
    color: #aeaeae;
    font-size: 15px;
    margin: 0;
}

.footer__cta {
    padding: 10px 20px;
    border: 1px solid #333;
    border-radius: 5px;
    color: #f7f7f7;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.footer__cta:hover {
    background-color: #fff;
    color: #333;
}

/* FOOTER GRID */
.footer__content {
    display: grid;
    grid-template-columns: 4fr 1fr 1.1fr;
    gap: 100px;
}

.footer__content h3 {
    font-size: 19px;
    font-weight: 400;
    margin-bottom: 20px;
    color: #f7f7f7;
    text-transform: uppercase;
}

.footer__about p {
    font-weight: 400;
    color: #aeaeae;
    font-size: 15px;
    line-height: 1.7;
}

.footer__about p:not(:last-child) {
    margin-bottom: 12px;
}

.footer__quick-links ul,
.footer__social-media ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__quick-links ul li {
    display: flex;
    align-items: center;
}

.footer__quick-links ul li:not(:last-child) {
    margin-bottom: 12px;
}

.footer__quick-links ul li a {
    color: #aeaeae;
    text-decoration: none;
    margin-left: 4px;
    font-size: 15px;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer__quick-links ul li a:hover {
    color: #f7f7f7;
}

.footer__social-media ul {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.footer__social-media ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 3px;
    color: #fff;
    text-decoration: none;
    font-size: 24px;
    transition: background 0.2s, filter 0.2s;
    border: 1px solid #333;
    background: #1b1b1b;
}

.footer__social-media ul li:nth-child(1) a:hover {
    background: #1877F2;
}

.footer__social-media ul li:nth-child(2) a:hover {
    background: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5);
}

.footer__social-media ul li:nth-child(3) a:hover {
    background: #000000;
}

.footer__social-media ul li:nth-child(4) a:hover {
    background: #FF0000;
}

.footer__social-media ul li:nth-child(5) a:hover {
    background: #000000;
}

.footer__quick-links ul li ion-icon {
    height: 20px;
}

.footer__quick-links ul li a {
    line-height: 1; /* prevents text's own line-height from pushing it off-center */
}

/* FOOTER COPYRIGHT */
.footer__copyright {
    border-top: 1px solid #333;
    padding-top: 30px;
    margin-top: 40px;
    color: #ddd;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer__copyright p {
    margin: 0;
}

.footer__copyright a {
    position: relative;
    color: #ddd;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.footer__copyright a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background-color: #fff;
    transition: width 0.3s ease-in-out;
}

.footer__copyright a:hover {
    color: #fff;
}

.footer__copyright a:hover::after {
    width: 100%;
}

/* Tablet */
@media (max-width: 991px) {
    .site-footer {
        padding: 60px 0 30px;
    }

    .footer__content {
        grid-template-columns: 1fr 1fr;
        gap: 40px 60px;
    }

    .footer__about {
        grid-column: 1 / -1;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .site-footer {
        padding: 50px 0 30px;
    }

    .footer__intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    .footer__intro-text h3 {
        font-size: 18px;
    }

    .footer__content h3 {
        margin-bottom: 10px;
    }

    .footer__content {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer__about {
        grid-column: auto;
    }

    .footer__copyright {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        text-align: left;
    }
}

/* Small phones */
@media (max-width: 420px) {
    .footer__intro-text h3 {
        font-size: 16px;
        line-height: 1.4;
    }

    .footer__cta {
        width: 100%;
        text-align: center;
    }

    .footer__social-media ul li a {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }
}