/* -------------------------------------------------------
EXTREME ADVENTURE PARK � Main Stylesheet
------------------------------------------------------- */
:root {
--green: #2d6a2d;
--green-light: #4a9b4a;
--green-dark: #1a4a1a;
--gold: #f0a500;
--white: #ffffff;
--black: #111111;
--grey: #666666;
--light-bg: #f8f8f8;
--border: #e0e0e0;
--frosted-bg: rgba(255,255,255,0.12);
--frosted-border: rgba(255,255,255,0.25);
--font-main: 'Nunito', sans-serif;
--font-hand: 'ZT Talk', sans-serif;
--nav-height: 72px;
--banner-height: 40px;
--transition: .3s ease;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Shared pattern data URI — DISABLED */
:root {
--pattern-url: none;
--pattern-svg: none;
}
body {
font-family: var(--font-main);
color: var(--black);
background-color: #f4f8f4;
background-image: none;
line-height: 1.6;
}
/* -- Apply pattern to sections that use solid white or near-white bg -- */
/* This replaces bare background:#fff with a subtly textured equivalent */
.tb-intro,
.tb-packages,
.tb-clients,
.food-page-content,
.activities-section,
.activities-page-section,
.act-grid-wrap,
.accommodations-section,
.events-section,
.packages-section,
.about-section,
.contact-section,
section[style*="background:#fff"],
section[style*="background: #fff"],
section[style*="background:white"],
section[style*="background: white"] {
background-color: #f4f8f4 !important;
background-image: none !important;
}
/* Cards and form elements keep pure white so content stays crisp */
.activity-card-inner,
.pkg-card,
.accommodation-card,
.event-card,
.review-card,
.admin-form-card,
.admin-table-card,
.tb-pkg-card,
.tb-step,
.tb-form-card,
.menu-pdf-card,
.act-grid-card {
background: #fff !important;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
/* -- Container -- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
/* -- Section Basics -- */
.section-title {
font-family: var(--font-hand);
font-size: clamp(2rem, 4vw, 3rem);
color: var(--black);
line-height: 1.15;
}
.section-subtitle { color: var(--grey); margin-top: .6rem; font-size: 1rem; }
.text-center { text-align: center; }
.section-header-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}
/* -- Buttons -- */
.btn-green {
display: inline-flex; align-items: center; justify-content: center;
background: var(--green); color: var(--white);
padding: .72rem 1.9rem; border-radius: 8px;
font-weight: 700; font-size: .88rem; letter-spacing: .04em;
border: 2px solid var(--green); text-transform: uppercase;
cursor: pointer; transition: background .22s, border-color .22s, transform .18s;
text-decoration: none; font-family: var(--font-main);
}
.btn-green:hover { background: var(--green-dark); border-color: var(--green-dark); transform: translateY(-1px); color: var(--white); }
.btn-green.btn-full { width: 100%; justify-content: center; }
.btn-outline-green {
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: var(--green);
padding: .72rem 1.9rem; border-radius: 8px; border: 2px solid var(--green);
font-weight: 700; font-size: .88rem; letter-spacing: .04em; text-transform: uppercase;
cursor: pointer; transition: background .22s, color .22s; text-decoration: none;
font-family: var(--font-main);
}
.btn-outline-green:hover { background: var(--green); color: var(--white); }
.btn-outline-dark {
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: var(--black);
padding: .68rem 1.7rem; border-radius: 8px; border: 2px solid rgba(0,0,0,.75);
font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
cursor: pointer; transition: background .22s, color .22s; text-decoration: none;
font-family: var(--font-main);
}
.btn-outline-dark:hover { background: var(--black); color: var(--white); }
.btn-white {
display: inline-flex; align-items: center; justify-content: center;
background: var(--white); color: var(--green);
padding: .72rem 2rem; border-radius: 8px; border: 2px solid var(--white);
font-weight: 700; font-size: .88rem; letter-spacing: .04em; text-transform: uppercase;
cursor: pointer; transition: background .22s, color .22s; text-decoration: none;
font-family: var(--font-main);
}
.btn-white:hover { background: transparent; color: var(--white); }
.btn-hero {
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: var(--white);
padding: .8rem 2.6rem; border-radius: 8px; border: 2px solid rgba(255,255,255,.8);
font-weight: 700; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
cursor: pointer; transition: background .22s, color .22s; margin-top: 1rem;
text-decoration: none; font-family: var(--font-main);
}
.btn-hero:hover { background: var(--white); color: var(--black); }
.btn-sm { padding: .38rem 1rem; font-size: .78rem; border-radius: 6px; font-weight: 700; letter-spacing: .03em; }
.btn-outline-white {
background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,.75);
padding: .4rem .9rem; border-radius: 6px; font-size: .78rem; font-weight: 700;
transition: var(--transition); letter-spacing: .03em;
}
.btn-outline-white:hover { background: var(--white); color: var(--black); }
/* -- Global: no icons inside CTA buttons -- */
.btn-green i[class*="fa"],
.btn-outline-green i[class*="fa"],
.btn-outline-dark i[class*="fa"],
.btn-white i[class*="fa"],
.btn-hero i[class*="fa"],
.btn-sm i[class*="fa"] { display: none !important; }
/* -- TOP BANNER -- */
.top-banner {
background: #1a1a1a;
color: var(--white);
text-align: center;
padding: 8px 16px;
font-size: .85rem;
font-weight: 600;
position: relative; z-index: 200;
display: flex; align-items: center; justify-content: center;
}
.top-banner a { color: var(--white); flex: 1; text-align: center; }
.top-banner-close {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
background: none; border: none; color: rgba(255,255,255,.7);
font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 2px 6px;
transition: color var(--transition);
}
.top-banner-close:hover { color: var(--white); }
/* -- NAVIGATION -- */
.main-nav {
position: fixed; top: 0; left: 0; right: 0;
z-index: 100;
background: transparent;
transition: background var(--transition), box-shadow var(--transition), top var(--transition);
height: var(--nav-height);
display: flex; align-items: center;
}
/* Scrolled: white background, dark text/green accents */
.main-nav.scrolled {
background: rgba(255,255,255,.97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 2px 16px rgba(0,0,0,.1);
}
/* Nav links go dark on white background */
.main-nav.scrolled .nav-links a { color: var(--black); }
.main-nav.scrolled .nav-links a:hover,
.main-nav.scrolled .nav-links a.active { color: var(--green); }
/* Logo text on white nav */
.main-nav.scrolled .logo-text-xtreme { color: var(--green-dark); }
/* Logo image � remove white filter on light bg */
.main-nav.scrolled .nav-logo img { filter: none; }
/* Dropdown stays dark */
.main-nav.scrolled .dropdown {
background: rgba(255,255,255,.98);
box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.main-nav.scrolled .dropdown li a { color: #444; }
.main-nav.scrolled .dropdown li a:hover { color: var(--green); background: rgba(45,106,45,.06); }
.main-nav.scrolled .dropdown-all a { color: var(--green) !important; }
/* Currency selector on white nav */
.main-nav.scrolled .currency-selector select {
background-color: rgba(45,106,45,.08);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-color: var(--green);
color: var(--green);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232d6a2d'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .6rem center;
background-size: 8px 5px;
}
.main-nav.scrolled .currency-selector select option { background: var(--white); color: var(--green); }
/* Book Now button on white nav */
.main-nav.scrolled .btn-book-nav {
background: rgba(45,106,45,.08);
backdrop-filter: none;
-webkit-backdrop-filter: none;
color: var(--green);
border-color: var(--green);
}
.main-nav.scrolled .btn-book-nav:hover {
background: var(--green);
color: var(--white);
}
/* Hamburger lines */
.main-nav.scrolled .nav-toggle span { background: var(--black); }
/* When banner is present, nav sits directly below it � managed via JS */
body:has(.top-banner):not(.banner-hidden) .main-nav { top: var(--banner-height); }
/* On inner pages (white bg body), nav needs dark bg immediately */
.main-nav.nav-on-light {
background: rgba(255,255,255,.97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 2px 16px rgba(0,0,0,.1);
}
.main-nav.nav-on-light .nav-links a { color: var(--black); }
.main-nav.nav-on-light .nav-links a:hover,
.main-nav.nav-on-light .nav-links a.active { color: var(--green); }
.main-nav.nav-on-light .logo-text-xtreme { color: var(--green-dark); }
.main-nav.nav-on-light .nav-logo img { filter: none; }
.main-nav.nav-on-light .dropdown { background: rgba(255,255,255,.98); box-shadow: 0 8px 30px rgba(0,0,0,.12); }
.main-nav.nav-on-light .dropdown li a { color: #444; }
.main-nav.nav-on-light .dropdown li a:hover { color: var(--green); }
.main-nav.nav-on-light .dropdown-all a { color: var(--green) !important; }
.main-nav.nav-on-light .currency-selector select { background-color: var(--white); border-color: var(--green); color: var(--green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232d6a2d'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; background-size: 8px 5px; }
.main-nav.nav-on-light .btn-book-nav { color: var(--green); border-color: var(--green); }
.main-nav.nav-on-light .btn-book-nav:hover { background: var(--green); color: var(--white); }
.main-nav.nav-on-light .nav-toggle span { background: var(--black); }
.nav-container {
max-width: 1400px; margin: 0 auto; padding: 0 24px;
display: flex; align-items: center; gap: 1.5rem; width: 100%;
}
.nav-logo img { height: 48px; }
.logo-fallback { display: inline-flex; align-items: center; gap: 4px; }
.logo-text-e { font-size: 2rem; font-weight: 900; color: var(--gold); font-family: var(--font-hand); }
.logo-text-xtreme { font-weight: 900; color: var(--white); font-size: .75rem; line-height: 1.1; text-transform: uppercase; }
.nav-links {
display: flex; align-items: center; gap: .25rem;
margin-left: auto;
}
.nav-links a {
color: var(--white); font-weight: 600; font-size: .9rem;
padding: .5rem .75rem; border-radius: 4px; transition: color var(--transition);
white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: var(--gold); }
/* Dropdown */
.has-dropdown { position: relative; }
.has-dropdown > a { display: flex; align-items: center; gap: .3rem; }
.dropdown {
position: absolute; top: calc(100% + 8px); left: 0;
background: rgba(10,30,10,.97); backdrop-filter: blur(12px);
border-radius: 8px; min-width: 200px; padding: .5rem 0;
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: all .25s ease; box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li a { display: block; padding: .5rem 1.2rem; color: #ddd; font-size: .87rem; }
.dropdown li a:hover { color: var(--gold); background: rgba(255,255,255,.05); }
.dropdown-all a { color: var(--gold) !important; border-top: 1px solid rgba(255,255,255,.1); margin-top: .4rem; }
.fa-chevron-down { font-size: .7rem; }
.nav-actions { display: flex; align-items: center; gap: .75rem; margin-left: 1rem; }
/* -- Frosted glass shared base for currency + book-now -- */
.currency-selector,
.btn-book-nav {
height: 38px;
display: inline-flex;
align-items: center;
}
.currency-selector select {
height: 38px;
background: rgba(255,255,255,.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1.5px solid rgba(255,255,255,.35);
color: var(--white);
border-radius: 10px;
padding: 0 1.8rem 0 .65rem;
font-size: .85rem;
cursor: pointer;
font-family: var(--font-main);
font-weight: 700;
transition: var(--transition);
box-sizing: border-box;
/* Remove native OS styling � use our custom arrow */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.75)'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .6rem center;
background-size: 8px 5px;
}
.currency-selector select option { background: #1a2e1a; color: var(--white); }
.currency-selector select:hover,
.currency-selector select:focus {
background-color: rgba(255,255,255,.22);
border-color: rgba(255,255,255,.65);
outline: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.9)'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .6rem center;
background-size: 8px 5px;
}
.btn-book-nav {
background: rgba(255,255,255,.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--white);
border: 1.5px solid rgba(255,255,255,.35);
padding: 0 1.2rem;
border-radius: 10px;
font-weight: 700;
font-size: .85rem;
letter-spacing: .05em;
transition: var(--transition);
box-sizing: border-box;
}
.btn-book-nav:hover {
background: var(--white);
color: var(--black);
border-color: var(--white);
}
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: var(--transition); }
/* Mobile-only nav items hidden on desktop */
.nav-mobile-book { display: none; }
/* -- Mobile menu drawer (side-panel) � hidden; nav uses .nav-links drawer instead -- */
.mobile-menu {
display: none;
position: fixed;
top: 0; right: 0;
width: min(320px, 85vw);
height: 100dvh;
background: var(--white);
z-index: 9999;
flex-direction: column;
overflow-y: auto;
box-shadow: -4px 0 40px rgba(0,0,0,.18);
transform: translateX(100%);
transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.mobile-menu.open {
display: flex;
transform: translateX(0);
}
.mobile-menu-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
z-index: 9998;
}
.mobile-menu-overlay.open { display: block; }
.mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border);
}
.mobile-menu-logo img { height: 42px; }
.mobile-menu-close {
background: none;
border: none;
font-size: 1.4rem;
color: var(--grey);
cursor: pointer;
padding: 4px 8px;
}
.mobile-menu-nav { flex: 1; padding: .5rem 0; }
.mobile-menu-nav ul { list-style: none; padding: 0; margin: 0; }
.mobile-menu-nav ul li a {
display: flex;
align-items: center;
justify-content: space-between;
padding: .9rem 1.25rem;
font-size: 1rem;
font-weight: 700;
color: var(--black);
border-bottom: 1px solid rgba(0,0,0,.06);
transition: color var(--transition), background var(--transition);
}
.mobile-menu-nav ul li a:hover,
.mobile-menu-nav ul li a.active {
color: var(--green);
background: rgba(45,106,45,.05);
}
.mobile-menu-footer {
padding: 1.25rem;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: .85rem;
}
.mobile-menu-book-btn {
display: block;
width: 100%;
padding: .85rem 1rem;
background: var(--green);
color: var(--white) !important;
font-weight: 800;
font-size: .95rem;
letter-spacing: .06em;
text-align: center;
border-radius: 10px;
transition: background var(--transition);
}
.mobile-menu-book-btn:hover { background: var(--green-dark); }
.mobile-menu-currency {
display: flex;
align-items: center;
gap: .5rem;
color: var(--grey);
font-size: .9rem;
}
.mobile-menu-currency select {
flex: 1;
padding: .4rem 1.8rem .4rem .6rem;
border: 1px solid var(--border);
border-radius: 6px;
font-size: .85rem;
background-color: var(--white);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .6rem center;
background-size: 8px 5px;
color: var(--black);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.mobile-currency-chevron { font-size: .7rem; }
.mobile-menu-contact {
display: flex;
flex-direction: column;
gap: .45rem;
font-size: .85rem;
}
.mobile-menu-contact a {
color: var(--grey);
display: flex;
align-items: center;
gap: .5rem;
}
.mobile-menu-contact a:hover { color: var(--green); }
/* -- HERO -- */
.hero {
position: relative;
/* Reduced from 100vh to 88vh � still tall but not over-long */
height: 88vh; min-height: 580px; max-height: 900px;
display: flex; flex-direction: column;
justify-content: center; align-items: center;
overflow: hidden;
padding-top: calc(var(--nav-height) + var(--banner-height));
/* Leave room at bottom so hero content doesn't overlap the floating info bar */
padding-bottom: 9rem;
}
.hero-video-wrap {
position: absolute; inset: 0; overflow: hidden;
}
.hero-video {
width: 100%; height: 100%; object-fit: cover;
}
.hero-yt {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
/* Oversized so YouTube UI chrome is always off-screen */
width: 200vh; height: 112.5vw;
min-width: 177.78vh; min-height: 100vh;
/* pointer-events:none stops any click from activating YT controls */
pointer-events: none;
/* Extra clip to make absolutely sure no edge chrome shows */
border: none;
}
/* Invisible shield over the iframe � stops any YouTube overlay interaction */
.hero-video-wrap::after {
content: '';
position: absolute; inset: 0; z-index: 1;
background: transparent;
pointer-events: none;
}
.hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.6) 100%);
}
.hero-content {
position: relative; z-index: 2;
text-align: center; color: var(--white);
padding: 0 24px; max-width: 860px;
}
.hero-title {
font-family: var(--font-hand);
font-size: clamp(2.5rem, 6vw, 4.5rem);
color: var(--white);
text-shadow: 2px 4px 12px rgba(0,0,0,.4);
line-height: 1.1;
}
.hero-subtitle {
margin-top: 1rem; font-size: clamp(1rem, 2vw, 1.15rem);
max-width: 680px; margin-left: auto; margin-right: auto;
text-shadow: 1px 2px 6px rgba(0,0,0,.3);
}
/* -- HERO INFO BAR (Frosted Glass � Standalone Floating Card) -- */
.hero-info-bar {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: grid;
grid-template-columns: 1fr repeat(3, 1fr);
gap: 0;
background: rgba(0,0,0,.45);
backdrop-filter: blur(20px) saturate(200%);
-webkit-backdrop-filter: blur(20px) saturate(200%);
border: 1px solid rgba(255,255,255,.2);
border-radius: 20px;
overflow: hidden;
width: max-content;
max-width: calc(100% - 3rem);
min-width: min(900px, calc(100% - 3rem));
box-shadow: 0 8px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06);
}
.hero-info-brand {
padding: 1.4rem 1.8rem;
border-right: 1px solid rgba(255,255,255,.15);
display: flex;
align-items: center;
}
.hero-info-tagline {
font-family: var(--font-hand);
font-size: 1rem; color: var(--white); line-height: 1.4;
}
.hero-info-item {
display: flex; align-items: center; gap: .9rem;
padding: 1.4rem 1.8rem;
border-right: 1px solid rgba(255,255,255,.15);
}
.hero-info-item:last-child { border-right: none; }
.hero-info-icon {
width: 40px; height: 40px; border-radius: 50%;
border: 2px solid rgba(255,255,255,.4);
display: flex; align-items: center; justify-content: center;
color: var(--white); font-size: .95rem; flex-shrink: 0;
}
.hero-info-label { display: block; color: rgba(255,255,255,.7); font-size: .77rem; }
.hero-info-value { display: block; color: var(--white); font-weight: 700; font-size: .88rem; }
.hero-info-value a { color: var(--white); }
/* Working hours � last info item gets gold accent */
.hero-info-item:last-child .hero-info-value { color: var(--gold); }
/* -- SECTION BG PATTERN -- */
.section-bg-pattern {
background-color: #edf4ed;
background-image: none;
}
/* -- ACTIVITIES SECTION (Balanced Collage) -- */
.activities-section { padding: 4rem 0 4rem; }
/*
Grid layout � 4 columns:
Col 1: alpha card � spans rows 1 & 2 (LEFT, dominant)
Cols 2-4: regular small cards (rows 1 & 2)
Row 3: 2 equal cards, each spanning 2 columns
*/
.activities-collage {
display: grid;
grid-template-columns: 1.3fr repeat(3, 1fr);
grid-template-rows: auto auto auto;
gap: 8px;
/* Left / right breathing room so cards don't flush the viewport edges */
padding: 0 40px;
max-width: 1600px;
margin: 0 auto;
}
/* Regular small cards � rows 1 & 2, cols 2�4 */
.collage-card-sm {
aspect-ratio: 4/5;
}
/* Alpha card � col 1 LEFT, spans rows 1 & 2 */
.activity-alpha-card {
grid-column: 1;
grid-row: 1 / 3;
aspect-ratio: auto;
min-height: 100%;
cursor: default;
}
/* Bottom two cards � row 3, explicitly placed for equal size */
.collage-card-wide {
aspect-ratio: unset;
height: 220px; /* identical fixed height for both */
}
/* 9 children total: alpha(1) + 6 sm cards(2�7) + 2 wide(8,9) */
.activities-collage > .collage-card-wide:nth-child(8) { grid-column: 1 / 3; }
.activities-collage > .collage-card-wide:nth-child(9) { grid-column: 3 / 5; }
/* -- OLD Activity Card (Legacy - Not in use) -- */
/* Kept for reference only - DO NOT USE */
/*
.activity-card {
position: relative; overflow: hidden;
background: #1a1a1a;
clip-path: polygon(
0 0,
calc(100% - 20px) 0,
100% 20px,
100% 100%,
20px 100%,
0 calc(100% - 20px)
);
transition: transform .3s ease;
}
.activity-card:hover { transform: scale(1.02); }
.activity-alpha-card:hover { transform: none; }
.activity-card-inner { position: relative; width: 100%; height: 100%; }
.activity-card-inner img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .4s ease;
}
.activity-card:hover .activity-card-inner img { transform: scale(1.06); }
.activity-placeholder-img {
width: 100%; height: 100%;
background: linear-gradient(135deg, var(--green-dark), var(--green));
display: flex; align-items: center; justify-content: center;
font-size: 3rem; color: rgba(255,255,255,.4);
}
/* DISABLED - Card info bar causing overlay issues
Card info bar
.activity-card-body {
position: absolute; bottom: 0; left: 0; right: 0;
background: rgba(0,0,0,.52);
backdrop-filter: blur(10px) saturate(150%);
-webkit-backdrop-filter: blur(10px) saturate(150%);
border-top: 1px solid rgba(255,255,255,.15);
padding: .75rem 1rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .55rem;
z-index: 2;
}
.activity-card-info { width: 100%; }
.activity-card-info h3 {
font-family: var(--font-hand); color: var(--white);
font-size: 1.25rem; margin-bottom: .2rem;
line-height: 1.2;
}
.activity-price { color: rgba(255,255,255,.85); font-size: .8rem; font-weight: 600; }
.activity-book-btn {
display: inline-flex; align-items: center; justify-content: center;
background: var(--green); color: var(--white); border: none;
padding: .45rem 1.1rem; border-radius: 10px;
font-size: .8rem; font-weight: 700;
cursor: pointer; white-space: nowrap; transition: var(--transition);
text-decoration: none; align-self: flex-start;
letter-spacing: .02em;
}
.activity-book-btn:hover { background: var(--green-light); }
.activity-card-overlay-link { position: absolute; inset: 0; z-index: 1; }
Wide cards (bottom two) � put text and button side-by-side
.collage-card-wide .activity-card-body {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.collage-card-wide .activity-card-info { width: auto; flex: 1; }
.collage-card-wide .activity-book-btn { flex-shrink: 0; align-self: auto; }
*/
/* -- Alpha Card -- */
.alpha-slides {
position: absolute; inset: 0;
overflow: hidden;
}
.alpha-slide {
position: absolute; inset: 0;
opacity: 0;
transition: opacity .8s ease;
}
.alpha-slide.active { opacity: 1; }
.alpha-slide img {
width: 100%; height: 100%; object-fit: cover;
}
.alpha-slide-label {
position: absolute; bottom: 0; left: 0; right: 0;
padding: .5rem .8rem;
background: linear-gradient(transparent, rgba(0,0,0,.6));
font-family: var(--font-hand); color: var(--white); font-size: 1rem;
opacity: 0; transition: opacity .4s ease;
}
.alpha-slide.active .alpha-slide-label { opacity: 1; }
.alpha-card-overlay {
position: absolute; inset: 0; z-index: 3;
display: flex; flex-direction: column;
justify-content: space-between; align-items: flex-start;
padding: 1.5rem;
/* Semi-transparent gradient so slides show through */
background: linear-gradient(
180deg,
rgba(0,0,0,.4) 0%,
rgba(0,0,0,.1) 40%,
rgba(0,0,0,.1) 60%,
rgba(0,0,0,.6) 100%
);
pointer-events: none;
}
.alpha-card-content {
margin-top: auto;
pointer-events: auto;
}
.alpha-card-eyebrow {
color: var(--gold); font-size: .92rem; font-weight: 800;
text-transform: uppercase; letter-spacing: .1em;
display: flex; align-items: center; gap: .4rem;
margin-bottom: .6rem;
}
.alpha-card-title {
font-family: var(--font-hand);
font-size: clamp(1.8rem, 3vw, 2.6rem);
color: var(--white); line-height: 1.15;
text-shadow: 1px 2px 8px rgba(0,0,0,.4);
margin-bottom: 1rem;
}
.alpha-card-btn {
display: inline-flex; align-items: center; gap: .5rem;
background: var(--white); color: var(--green);
padding: .55rem 1.2rem; border-radius: 10px;
font-weight: 800; font-size: .85rem;
transition: var(--transition); text-decoration: none;
}
.alpha-card-btn:hover {
background: var(--green); color: var(--white);
}
.alpha-card-btn i { transition: transform .25s ease; }
.alpha-card-btn:hover i { transform: translateX(4px); }
/* Dot progress */
.alpha-dots {
display: flex; gap: 5px; align-self: flex-end;
pointer-events: auto; margin-top: 1rem;
}
.alpha-dot {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(255,255,255,.4);
border: none; cursor: pointer; padding: 0;
transition: all .3s ease;
}
.alpha-dot.active {
background: var(--white);
width: 20px; border-radius: 3px;
}
/* -- Activities footer -- */
.activities-footer {
display: flex; align-items: center; justify-content: space-between;
padding: 2rem 40px; flex-wrap: wrap; gap: 1rem;
max-width: 1600px; margin: 0 auto;
}
.activities-footer-text {
display: flex; align-items: center; gap: 1rem; max-width: 500px;
}
.activities-footer-text p { color: var(--grey); font-size: .95rem; }
.activities-icon { width: 48px; flex-shrink: 0; }
/* -- Full-page activities grid (activities listing page) -- */
.activities-grid--full {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-template-rows: auto; gap: 12px; padding: 0;
}
.activities-grid--full .activity-card { aspect-ratio: 4/5; }
.activities-page-section { padding: 4rem 0; }
.activities-grid--compact {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-template-rows: auto; gap: 16px; padding: 0;
}
/* DISABLED - Legacy compact grid
.activities-grid--compact .activity-card { aspect-ratio: 3/2; min-height: 220px; }
.activities-grid--compact .activity-card-info h3 { font-size: 1.35rem; }
.activities-grid--compact .activity-price { font-size: .9rem; }
.activities-grid--compact .activity-card-body { padding: 1rem 1.1rem; gap: .65rem; }
*/
/* -------------------------------------------------------
NEW ACTIVITIES LAYOUT - SIMPLIFIED
------------------------------------------------------- */
.activities-section-inner {
max-width: 1400px;
margin: 0 auto;
}
.activities-section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 2.5rem;
}
.activities-new-layout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 1.5rem;
align-items: start;
}
.act-carousel-wrap {
position: relative;
width: 100%;
}
.act-carousel-inner {
width: 100%;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.actFeaturedSwiper,
.actPageSwiper {
width: 100%;
height: 100%;
}
.act-carousel-slide {
position: relative;
width: 100%;
height: 420px;
overflow: hidden;
background: #f0f0f0;
}
.act-carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.act-carousel-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.7) 100%);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1.5rem;
}
.act-carousel-meta {
display: flex;
gap: .5rem;
flex-wrap: wrap;
}
.act-featured-badge,
.act-category-badge {
padding: .35rem .8rem;
border-radius: 20px;
font-size: .75rem;
font-weight: 800;
text-transform: uppercase;
}
.act-featured-badge {
background: rgba(240,165,0,.9);
color: white;
}
.act-category-badge {
background: rgba(255,255,255,.2);
color: white;
}
.act-carousel-info {
margin-top: auto;
}
.act-carousel-name {
font-family: var(--font-hand);
font-size: 2rem;
color: white;
line-height: 1.2;
margin-bottom: .5rem;
}
.act-carousel-price {
color: rgba(255,255,255,.9);
font-size: .9rem;
margin-bottom: .6rem;
}
.act-carousel-price strong {
color: white;
font-size: 1.1rem;
font-weight: 800;
}
.act-carousel-desc {
color: rgba(255,255,255,.85);
font-size: .9rem;
margin-bottom: .8rem;
}
.act-carousel-footer-meta {
display: flex;
gap: 1rem;
color: rgba(255,255,255,.8);
font-size: .82rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.act-carousel-footer-meta span {
display: flex;
align-items: center;
gap: .4rem;
}
.act-carousel-actions {
display: flex;
gap: .6rem;
flex-wrap: wrap;
}
.act-carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: white;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.act-carousel-nav:hover {
background: var(--green);
color: white;
}
.act-carousel-prev {
left: -20px;
}
.act-carousel-next {
right: -20px;
}
.act-carousel-pagination {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.act-grid-wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.act-grid-wrap--page {
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
}
.act-grid-card {
position: relative;
display: block;
border-radius: 16px;
overflow: hidden;
background: white;
box-shadow: 0 4px 16px rgba(0,0,0,.08);
transition: all .3s ease;
text-decoration: none;
color: inherit;
}
.act-grid-card:hover {
box-shadow: 0 8px 28px rgba(0,0,0,.15);
transform: translateY(-4px);
}
.act-grid-card-img-wrap {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
background: #f0f0f0;
flex-shrink: 0;
}
.act-grid-card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.act-grid-card-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--green-dark), var(--green));
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.4);
font-size: 2.5rem;
}
.act-grid-card-name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: .8rem 1rem;
background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
color: white;
font-family: var(--font-hand);
font-size: 1.1rem;
z-index: 2;
}
.act-grid-card-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
background: rgba(255,255,255,.95);
border-top: 1px solid rgba(45,106,45,.15);
transform: translateY(100%);
transition: transform .35s ease;
z-index: 3;
}
.act-grid-card:hover .act-grid-card-name {
opacity: 0;
}
.act-grid-card:hover .act-grid-card-body {
transform: translateY(0);
}
.act-grid-card-panel-name {
font-family: var(--font-hand);
font-size: 1.1rem;
font-weight: 800;
margin-bottom: .4rem;
}
.act-grid-card-price {
color: var(--grey);
font-size: .85rem;
margin-bottom: .5rem;
}
.act-grid-card-price strong {
color: var(--green);
font-size: 1rem;
font-weight: 800;
}
.act-grid-card-meta {
display: flex;
gap: .8rem;
color: var(--grey);
font-size: .8rem;
margin-bottom: .6rem;
flex-wrap: wrap;
}
.act-grid-card-meta span {
display: flex;
align-items: center;
gap: .35rem;
}
.act-grid-card-book {
display: inline-flex;
padding: .5rem 1.2rem;
background: var(--green);
color: white;
border-radius: 10px;
font-size: .85rem;
font-weight: 700;
text-decoration: none;
}
.act-grid-card-book:hover {
background: var(--green-light);
}
.card-action-btn {
position: relative;
z-index: 10;
}
@media (max-width: 1100px) {
.activities-new-layout {
grid-template-columns: 1fr;
}
.act-carousel-wrap {
max-width: 600px;
margin: 0 auto;
}
.act-grid-wrap {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.act-grid-wrap,
.act-grid-wrap--page {
grid-template-columns: repeat(2, 1fr);
}
.act-carousel-slide {
height: 400px;
}
}
@media (max-width: 540px) {
.act-grid-wrap,
.act-grid-wrap--page {
grid-template-columns: 1fr;
}
.act-carousel-slide {
height: 360px;
}
}
/* -------------------------------------------------------
NEW ACTIVITIES LAYOUT (Carousel + Grid)
------------------------------------------------------- */
.activities-section-inner { max-width: 1400px; margin: 0 auto; }
.activities-section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 2.5rem;
}
/* Two-column layout: left carousel, right grid */
.activities-new-layout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 1.5rem;
align-items: start;
}
/* -- LEFT: Featured Carousel -- */
.act-carousel-wrap {
position: relative;
width: 100%;
}
.act-carousel-inner {
width: 100%;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0,0,0,.12);
/* Subtle clipped corner shape */
clip-path: polygon(
0 0,
calc(100% - 24px) 0,
100% 24px,
100% 100%,
24px 100%,
0 calc(100% - 24px)
);
}
.actFeaturedSwiper,
.actPageSwiper {
width: 100%;
height: 100%;
}
.act-carousel-slide {
position: relative;
width: 100%;
aspect-ratio: 4/5;
min-height: 480px;
overflow: hidden;
background: #1a1a1a;
}
.act-carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.act-carousel-slide:hover img {
transform: scale(1.05);
}
.act-carousel-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,.3) 0%,
rgba(0,0,0,.15) 40%,
rgba(0,0,0,.7) 100%
);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1.5rem;
}
.act-carousel-meta {
display: flex;
gap: .5rem;
flex-wrap: wrap;
}
.act-featured-badge,
.act-category-badge {
padding: .35rem .8rem;
border-radius: 20px;
font-size: .75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .05em;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.act-featured-badge {
background: rgba(240,165,0,.9);
color: var(--white);
border: 1px solid rgba(255,255,255,.3);
}
.act-category-badge {
background: rgba(255,255,255,.15);
color: var(--white);
border: 1px solid rgba(255,255,255,.25);
}
.act-carousel-info {
margin-top: auto;
}
.act-carousel-name {
font-family: var(--font-hand);
font-size: clamp(1.6rem, 3vw, 2.2rem);
color: var(--white);
line-height: 1.2;
margin-bottom: .5rem;
text-shadow: 1px 2px 8px rgba(0,0,0,.3);
}
.act-carousel-price {
color: rgba(255,255,255,.9);
font-size: .9rem;
font-weight: 600;
margin-bottom: .6rem;
}
.act-carousel-price strong {
color: var(--white);
font-size: 1.1rem;
font-weight: 800;
}
.act-carousel-desc {
color: rgba(255,255,255,.85);
font-size: .9rem;
line-height: 1.5;
margin-bottom: .8rem;
}
.act-carousel-footer-meta {
display: flex;
gap: 1rem;
color: rgba(255,255,255,.8);
font-size: .82rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.act-carousel-footer-meta span {
display: flex;
align-items: center;
gap: .4rem;
}
.act-carousel-footer-meta i {
color: var(--gold);
}
.act-carousel-actions {
display: flex;
gap: .6rem;
flex-wrap: wrap;
}
/* Navigation arrows (outside the clipped container) */
.act-carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: rgba(255,255,255,.95);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
font-size: .9rem;
color: var(--green);
box-shadow: 0 4px 16px rgba(0,0,0,.2);
transition: all .25s ease;
}
.act-carousel-nav:hover {
background: var(--green);
color: var(--white);
transform: translateY(-50%) scale(1.08);
}
.act-carousel-prev {
left: -20px;
}
.act-carousel-next {
right: -20px;
}
/* Pagination dots */
.act-carousel-pagination {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 10;
}
.act-carousel-pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;
background: rgba(255,255,255,.5);
opacity: 1;
border-radius: 50%;
transition: all .3s ease;
}
.act-carousel-pagination .swiper-pagination-bullet-active {
background: var(--white);
width: 24px;
border-radius: 4px;
}
/* -- RIGHT: Activities Grid -- */
.act-grid-wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
align-content: start;
}
/* Full-page activities listing variant */
.act-grid-wrap--page {
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
}
.act-grid-card {
position: relative;
display: block;
border-radius: 16px;
overflow: hidden;
background: var(--white);
box-shadow: 0 4px 16px rgba(0,0,0,.08);
transition: all .3s ease;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.act-grid-card:hover {
box-shadow: 0 8px 28px rgba(0,0,0,.15);
transform: translateY(-4px);
}
.act-grid-card-img-wrap {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
background: #f0f0f0;
flex-shrink: 0;
}
.act-grid-card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
.act-grid-card:hover .act-grid-card-img-wrap img {
transform: scale(1.08);
}
.act-grid-card-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--green-dark), var(--green));
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.4);
font-size: 2.5rem;
}
/* Name label at rest (below image) */
.act-grid-card-name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: .8rem 1rem;
background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
color: var(--white);
font-family: var(--font-hand);
font-size: 1.1rem;
font-weight: 700;
text-align: left;
z-index: 2;
transition: opacity .3s ease;
}
/* Frosted glass panel � slides up from bottom on hover */
.act-grid-card-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
background: rgba(255,255,255,.95);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border-top: 1px solid rgba(45,106,45,.15);
transform: translateY(100%);
transition: transform .35s cubic-bezier(.4,0,.2,1);
z-index: 3;
display: flex;
flex-direction: column;
gap: .6rem;
}
.act-grid-card:hover .act-grid-card-name {
opacity: 0;
}
.act-grid-card:hover .act-grid-card-body {
transform: translateY(0);
}
.act-grid-card-panel-name {
font-family: var(--font-hand);
font-size: 1.1rem;
font-weight: 800;
color: var(--black);
line-height: 1.2;
}
.act-grid-card-price {
color: var(--grey);
font-size: .85rem;
font-weight: 600;
}
.act-grid-card-price strong {
color: var(--green);
font-size: 1rem;
font-weight: 800;
}
.act-grid-card-meta {
display: flex;
gap: .8rem;
color: var(--grey);
font-size: .8rem;
flex-wrap: wrap;
}
.act-grid-card-meta span {
display: flex;
align-items: center;
gap: .35rem;
}
.act-grid-card-meta i {
color: var(--green);
font-size: .75rem;
}
.act-grid-card-book {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .5rem 1.2rem;
background: var(--green);
color: var(--white);
border: none;
border-radius: 10px;
font-size: .85rem;
font-weight: 700;
cursor: pointer;
transition: all .25s ease;
text-decoration: none;
margin-top: .2rem;
}
.act-grid-card-book:hover {
background: var(--green-light);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(45,106,45,.3);
}
/* Card action button helper to prevent event bubbling */
.card-action-btn {
position: relative;
z-index: 10;
}
/* -- Responsive breakpoints -- */
@media (max-width: 1100px) {
.activities-new-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
.act-carousel-wrap {
max-width: 600px;
margin: 0 auto;
}
.act-grid-wrap {
grid-template-columns: repeat(3, 1fr);
}
.act-grid-wrap--page {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.activities-section-header {
flex-direction: column;
align-items: flex-start;
}
.act-grid-wrap {
grid-template-columns: repeat(2, 1fr);
gap: .8rem;
}
.act-grid-wrap--page {
grid-template-columns: repeat(2, 1fr);
}
.act-carousel-slide {
min-height: 400px;
}
.act-carousel-nav {
width: 38px;
height: 38px;
font-size: .8rem;
}
.act-carousel-prev {
left: -16px;
}
.act-carousel-next {
right: -16px;
}
}
@media (max-width: 540px) {
.act-grid-wrap,
.act-grid-wrap--page {
grid-template-columns: 1fr;
gap: 1rem;
}
.act-carousel-slide {
min-height: 360px;
}
.act-carousel-inner {
clip-path: polygon(
0 0,
calc(100% - 16px) 0,
100% 16px,
100% 100%,
16px 100%,
0 calc(100% - 16px)
);
}
}
/* -- Responsive -- */
@media (max-width: 1100px) {
.activities-collage {
grid-template-columns: 1.2fr repeat(2, 1fr);
}
.activity-alpha-card { grid-column: 1; grid-row: 1 / 3; }
/* Reset explicit placement � let span handle it on 3-col grid */
.activities-collage > .collage-card-wide:nth-child(8),
.activities-collage > .collage-card-wide:nth-child(9) {
grid-column: span 1;
aspect-ratio: 4/5;
height: auto;
}
}
@media (max-width: 720px) {
.activities-collage {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.activity-alpha-card {
grid-column: 1 / -1;
grid-row: auto;
aspect-ratio: 16/9;
min-height: 240px;
}
.activities-collage > .collage-card-wide:nth-child(8),
.activities-collage > .collage-card-wide:nth-child(9) {
grid-column: span 1;
aspect-ratio: 4/5;
height: auto;
}
}
/* -------------------------------------------------------
ICON FIXES & ENHANCEMENTS
------------------------------------------------------- */
/* Ensure Font Awesome icons render properly */
.fa, .fas, .far, .fal, .fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
/* Fix icon alignment in flex containers */
.fa, .fas, .far, .fal, .fab {
vertical-align: middle;
}
/* Ensure icons don't break layout */
i[class*="fa-"] {
min-width: 1em;
text-align: center;
}
/* Icon color consistency */
.hero-info-icon i,
.contact-icon i,
.food-feature-icon i,
.meta-item i,
.sidebar-includes li i,
.accom-sidebar-meta li i,
.amenities-list i,
.act-carousel-footer-meta i,
.act-grid-card-meta i {
display: inline-block;
flex-shrink: 0;
}
/* Placeholder icons for missing images */
.activity-placeholder-img i,
.pkg-placeholder i,
.event-placeholder i,
.service-placeholder i,
.accom-placeholder i {
opacity: 0.4;
}
/* -- ACCOMMODATIONS SLIDER -- */
.accommodations-section { padding: 3rem 0; }
.accom-slider-wrap {
position: relative; margin-top: 1.5rem;
padding: 0 60px;
}
.accomSwiper { overflow: hidden; }
.accomSwiper .swiper-slide { display: flex; justify-content: center; }
.accom-card {
display: block; position: relative;
width: 100%; height: 300px; border-radius: 16px; overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.accom-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.accom-card:hover img { transform: scale(1.06); }
.accom-placeholder { width: 100%; height: 100%; background: var(--green); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); font-size: 2rem; }
.accom-card-label {
position: absolute; bottom: 0; left: 0; right: 0;
padding: .5rem .8rem;
background: linear-gradient(transparent, rgba(0,0,0,.7));
font-family: var(--font-hand);
color: var(--white); font-size: 1.25rem;
}
.accom-nav {
position: absolute; top: 50%; transform: translateY(-50%);
background: var(--white); border: none; border-radius: 50%;
width: 44px; height: 44px; cursor: pointer; z-index: 5;
box-shadow: 0 2px 12px rgba(0,0,0,.15); font-size: 1rem;
display: flex; align-items: center; justify-content: center;
transition: var(--transition);
}
.accom-nav:hover { background: var(--green); color: var(--white); }
.accom-prev { left: 8px; }
.accom-next { right: 8px; }
.accom-page-section { padding: 4rem 0 5rem; }
.accom-page-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem;
}
/* Card */
.accom-page-card {
display: flex;
flex-direction: column;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 6px 28px rgba(0,0,0,.1);
background: #fff;
transition: transform .28s ease, box-shadow .28s ease;
text-decoration: none;
color: inherit;
}
.accom-page-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 48px rgba(45,106,45,.18);
}
/* Image area */
.accom-page-card-img {
position: relative;
overflow: hidden;
}
.accom-page-card-img img {
width: 100%;
height: 240px;
object-fit: cover;
transition: transform .4s ease;
display: block;
}
.accom-page-card:hover .accom-page-card-img img {
transform: scale(1.04);
}
.accom-placeholder {
width: 100%;
height: 240px;
background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
display: flex;
align-items: center;
justify-content: center;
color: #4a9b4a;
font-size: 3rem;
}
/* Gradient scrim at bottom of image */
.accom-page-card-img::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 60%;
background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 100%);
pointer-events: none;
}
/* Badges positioned over image */
.accom-type-badge {
position: absolute;
top: 14px; left: 14px;
z-index: 2;
background: var(--green);
color: var(--white);
padding: .3rem .85rem;
border-radius: 20px;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.accom-capacity-chip {
position: absolute;
top: 14px; right: 14px;
z-index: 2;
background: rgba(0,0,0,.55);
backdrop-filter: blur(6px);
color: #fff;
padding: .3rem .85rem;
border-radius: 20px;
font-size: .75rem;
font-weight: 700;
display: flex;
align-items: center;
gap: .35rem;
}
/* Card body */
.accom-page-card-body {
padding: 1.4rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
flex: 1;
}
.accom-page-card-body h3 {
font-size: 1.2rem;
font-weight: 800;
color: var(--black);
margin: 0 0 .5rem;
line-height: 1.25;
}
.accom-page-desc {
color: var(--grey);
font-size: .9rem;
line-height: 1.55;
flex: 1;
margin-bottom: 1.1rem;
}
/* Footer: price + actions */
.accom-page-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
flex-wrap: wrap;
padding-top: 1rem;
border-top: 1px solid #eee;
}
.accom-page-price {
display: flex;
align-items: baseline;
gap: .25rem;
flex-wrap: wrap;
}
.accom-price-label {
font-size: .75rem;
color: var(--grey);
font-weight: 600;
}
.accom-price {
color: var(--green);
font-weight: 800;
font-size: 1.05rem;
}
.accom-price-period {
font-size: .78rem;
color: var(--grey);
}
.accom-actions {
display: flex;
gap: .5rem;
align-items: center;
}
/* Page-level section intro */
.accom-page-intro {
text-align: center;
max-width: 600px;
margin: 0 auto 2.5rem;
}
/* -- OFFER SECTION -- */
.offer-section {
position: relative; padding: 5rem 2rem;
background-color: var(--green);
background-size: cover; background-position: center;
background-attachment: fixed;
display: flex; align-items: center; justify-content: center;
min-height: 300px;
}
.offer-overlay {
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(10,50,10,.85) 0%, rgba(10,50,10,.5) 100%);
}
.offer-content {
position: relative; z-index: 1;
width: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center;
}
.offer-discount {
font-family: var(--font-hand);
font-size: clamp(5rem, 12vw, 9rem);
color: var(--white); line-height: 1;
text-shadow: 4px 8px 20px rgba(0,0,0,.3);
}
.offer-text { color: var(--white); max-width: 600px; }
.offer-text h2 { font-family: var(--font-hand); font-size: 2.2rem; margin-bottom: .5rem; }
.offer-subtitle { color: var(--gold); font-weight: 700; font-size: 1.1rem; margin-bottom: .8rem; }
/* -- VIDEO / STATS SECTION -- */
.video-stats-section { }
.video-section { position: relative; }
.video-thumb-wrap { position: relative; }
.video-thumb, .video-thumb-placeholder {
width: 100%; height: 420px; object-fit: cover;
}
.video-thumb-placeholder { background: linear-gradient(135deg, #1a3a1a, #2d6a2d); }
/* Configurable dark overlay on the video section thumbnail (opacity set via admin) */
.video-thumb-overlay {
position: absolute; inset: 0;
background: #000;
pointer-events: none;
transition: opacity .3s ease;
}
.video-play-btn {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 72px; height: 72px; border-radius: 50%;
background: rgba(255,255,255,.9); border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem; color: var(--green);
box-shadow: 0 4px 20px rgba(0,0,0,.3);
transition: var(--transition);
}
.video-play-btn:hover { background: var(--white); transform: translate(-50%,-50%) scale(1.08); }
.stats-bar { background: var(--green); padding: 2rem; }
.stats-grid {
max-width: 1100px; margin: 0 auto;
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 1rem; text-align: center;
}
.stat-item {}
.stat-value {
display: block; font-family: var(--font-hand);
font-size: 2.4rem; color: var(--white); line-height: 1;
}
.stat-label { display: block; color: rgba(255,255,255,.75); font-size: .85rem; margin-top: .25rem; }
/* -- EVENTS -- */
.events-section, .events-page-section { padding: 4rem 0; }
.events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }
/* Event card � used as tag */
.event-card {
border-radius: 16px; overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,.08);
background: var(--white);
display: flex; flex-direction: column;
text-decoration: none; color: inherit;
transition: transform .24s ease, box-shadow .24s ease;
border: 1px solid #eaeaea;
}
.event-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 36px rgba(45,106,45,.15);
color: inherit;
}
/* Image area */
.event-card-img { position: relative; overflow: hidden; flex-shrink: 0; }
.event-card-img img {
width: 100%; height: 210px; object-fit: cover; display: block;
transition: transform .4s ease;
}
.event-card:hover .event-card-img img { transform: scale(1.04); }
.event-placeholder {
width: 100%; height: 210px;
background: linear-gradient(135deg, var(--green-dark), var(--green));
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.35); font-size: 2.5rem;
}
/* Date pill overlay */
.event-date-pill {
position: absolute; bottom: 12px; left: 12px;
background: var(--green);
color: var(--white);
border-radius: 10px;
padding: .4rem .8rem;
text-align: center;
min-width: 56px;
box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.event-day { display: block; font-size: 1.4rem; font-weight: 900; line-height: 1; }
.event-month { display: block; font-size: .72rem; text-transform: uppercase; font-weight: 700; opacity: .9; }
/* Legacy badge (homepage events) */
.event-date-badge { text-align: center; flex-shrink: 0; background: var(--green); color: var(--white); border-radius: 10px; padding: .5rem .8rem; min-width: 52px; }
/* Card body */
.event-card-body {
display: flex; flex-direction: column; flex: 1;
padding: 1.1rem 1.2rem 1.2rem;
gap: .75rem;
}
.event-card-top { flex: 1; }
.event-card-top h3 {
font-size: 1.05rem; font-weight: 800;
color: #111; margin: 0 0 .35rem; line-height: 1.3;
}
.event-card-top p {
font-size: .85rem; color: var(--grey);
line-height: 1.55; margin: 0;
}
.event-card-footer {
display: flex; align-items: center;
justify-content: space-between; gap: .5rem;
padding-top: .75rem;
border-top: 1px solid #f0f0f0;
}
.event-price {
font-family: var(--font-hand);
font-size: 1.15rem; color: var(--green); font-weight: 400;
}
.event-price-free {
font-size: .85rem; font-weight: 700;
color: #2e7d32;
background: #e8f5e9; padding: .22rem .75rem;
border-radius: 20px;
}
/* Legacy body layout (homepage) */
.event-info h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: .3rem; }
.event-info h3 a:hover { color: var(--green); }
.event-info p { font-size: .87rem; color: var(--grey); }
/* -------------------------------------------------------
PACKAGES SECTION
------------------------------------------------------- */
.packages-section {
padding: 4rem 0;
background: var(--light-bg);
}
.packages-section .section-title {
margin-bottom: .5rem;
}
.packages-section .section-subtitle {
margin-bottom: 2rem;
}
.packages-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 2rem;
align-items: stretch;
}
/* Card is an on the listing page � reset link styles */
a.pkg-card {
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
}
.pkg-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--white);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,.08);
transition: all .3s cubic-bezier(.4,0,.2,1);
border: 1px solid rgba(0,0,0,.04);
}
.pkg-card:hover {
box-shadow: 0 12px 40px rgba(0,0,0,.15);
transform: translateY(-6px);
border-color: rgba(45,106,45,.15);
}
.pkg-card img,
.pkg-placeholder {
width: 100%;
height: 240px;
object-fit: cover;
flex-shrink: 0;
transition: transform .4s ease;
}
.pkg-card:hover img {
transform: scale(1.06);
}
.pkg-placeholder {
background: linear-gradient(135deg, var(--green-dark), var(--green));
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.4);
font-size: 2.5rem;
}
.pkg-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--gold);
color: var(--white);
padding: .35rem .85rem;
border-radius: 20px;
font-weight: 800;
font-size: .8rem;
z-index: 2;
box-shadow: 0 2px 8px rgba(0,0,0,.2);
letter-spacing: .02em;
}
.pkg-card-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex: 1;
gap: .5rem;
}
.pkg-card-body h3 {
font-size: 1.15rem;
font-weight: 800;
margin-bottom: .3rem;
line-height: 1.3;
color: var(--black);
transition: color .25s ease;
}
.pkg-card:hover .pkg-card-body h3 {
color: var(--green);
}
.pkg-card-body p {
font-size: .9rem;
color: var(--grey);
line-height: 1.6;
margin-bottom: .5rem;
flex: 1;
}
.pkg-price {
margin-bottom: .8rem;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .5rem;
}
.pkg-price .price-display {
font-weight: 800;
color: var(--green);
font-size: 1.15rem;
}
.pkg-original-price {
text-decoration: line-through;
color: var(--grey);
font-size: .9rem;
opacity: .7;
}
.pkg-card-actions {
display: flex;
gap: .6rem;
flex-wrap: wrap;
margin-top: auto;
align-items: center;
}
.pkg-card-actions .btn-outline-dark,
.pkg-card-actions .btn-green {
flex: 1;
justify-content: center;
padding: .6rem 1rem;
font-size: .85rem;
min-width: auto;
}
.pkg-card-actions .btn-outline-dark {
flex: 0 0 auto;
padding: .6rem 1.2rem;
}
/* Packages page section */
.packages-page-section {
padding: 3rem 0 4rem;
}
.packages-page-section .packages-grid {
margin-top: 2rem;
}
/* Package includes section on detail page */
.package-includes {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
}
.package-includes h3 {
font-size: 1.15rem;
font-weight: 800;
margin-bottom: 1rem;
color: var(--black);
}
.package-includes ul {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .8rem;
}
.package-includes li {
display: flex;
align-items: center;
gap: .6rem;
font-size: .95rem;
color: var(--grey);
}
.package-includes li i {
color: var(--green);
font-size: .9rem;
width: 18px;
text-align: center;
flex-shrink: 0;
}
/* -- Responsive grid breakpoints -- */
@media (max-width: 960px) {
.packages-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.2rem;
}
.pkg-card img,
.pkg-placeholder {
height: 220px;
}
}
@media (max-width: 640px) {
.package-includes ul {
grid-template-columns: 1fr;
}
}
@media (max-width: 540px) {
.packages-grid {
grid-template-columns: 1fr;
gap: 1.2rem;
}
.pkg-card img,
.pkg-placeholder {
height: 200px;
}
.pkg-card-body {
padding: 1.2rem;
}
.pkg-card-actions {
flex-direction: column;
}
.pkg-card-actions .btn-outline-dark,
.pkg-card-actions .btn-green {
width: 100%;
}
}
/* -- FOOD SECTION -- */
.food-section {
padding: 5rem 0;
background-color: #f4f8f4;
background-image: none;
overflow: hidden;
}
.food-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.food-section .section-title { margin-bottom: 1rem; }
.food-text p { color: var(--grey); margin-bottom: 1.5rem; }
.food-eyebrow {
display: inline-flex; align-items: center; gap: .45rem;
background: rgba(45,106,45,.1); color: var(--green);
font-size: .75rem; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; padding: .35rem 1rem; border-radius: 20px;
margin-bottom: .9rem;
}
.food-feature { display: flex; gap: 1rem; margin-bottom: 1.2rem; }
.food-feature-icon { width: 44px; height: 44px; border: 2px solid var(--green); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--green); font-size: 1.1rem; flex-shrink: 0; }
.food-feature strong { display: block; margin-bottom: .2rem; }
.food-feature p { color: var(--grey); font-size: .9rem; margin: 0; }
/* -- Rotating plate scene -- */
.food-scene {
position: relative; width: 100%; aspect-ratio: 1;
max-width: 480px; margin: 0 auto;
display: flex; align-items: center; justify-content: center;
}
/* The spinner rotates the RING only */
.food-spinner {
position: absolute;
inset: 0;
animation: food-spin 22s linear infinite;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
}
.food-scene:hover .food-spinner { animation-play-state: paused; }
.food-scene:hover .food-float { animation-play-state: paused; }
/* Dashed orbit ring � rotates with spinner */
.food-orbit-ring {
position: absolute;
inset: 12%;
border-radius: 50%;
border: 2px dashed rgba(139,60,30,.38);
pointer-events: none;
}
/* Plate sits centred, independently spinning */
.food-plate-wrap {
position: absolute;
z-index: 2;
width: 72%;
aspect-ratio: 1;
border-radius: 50%; overflow: hidden;
box-shadow: 0 16px 48px rgba(0,0,0,.2), 0 0 0 6px rgba(255,255,255,.85);
background: transparent;
/* Plate rotates on its own � independent of the ring spinner */
animation: food-spin 18s linear infinite;
}
.food-scene:hover .food-plate-wrap { animation-play-state: paused; }
@keyframes food-spin { to { transform: rotate(360deg); } }
/* Image counter-rotates so the food photo stays upright while the plate turns */
.food-plate-img {
width: 100%; height: 100%; object-fit: cover;
display: block;
animation: food-counter 18s linear infinite;
}
.food-scene:hover .food-plate-img { animation-play-state: paused; }
@keyframes food-counter { to { transform: rotate(-360deg); } }
.food-plate-placeholder {
width: 100%; height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: .75rem;
color: var(--green); font-size: 2.5rem;
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
animation: food-counter 18s linear infinite;
}
.food-scene:hover .food-plate-placeholder { animation-play-state: paused; }
.food-plate-placeholder span {
font-size: .72rem; color: var(--grey);
text-align: center; line-height: 1.4;
}
/* Floating items � bob independently, scale on hover */
.food-float {
position: absolute; z-index: 3;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: transform .25s ease, box-shadow .25s ease;
animation: food-float-bob 4s ease-in-out infinite;
}
.food-float:hover { transform: scale(1.18) !important; z-index: 5; }
.food-float--tl { top: 6%; left: 2%; animation-delay: 0s; }
.food-float--br { bottom: 6%; right: 2%; animation-delay: -2s; }
.food-float--leaf { top: 8%; right: 10%; animation-delay: -1s; }
@keyframes food-float-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* PNG-friendly float items � transparent background */
.food-float img {
width: 78px; height: 78px; border-radius: 50%; object-fit: cover;
box-shadow: 0 6px 22px rgba(0,0,0,.2);
border: 3px solid rgba(255,255,255,.85);
background: transparent;
transition: box-shadow .25s ease;
}
.food-float img[src$=".png"],
.food-float img[src$=".PNG"],
.food-float img[src$=".webp"] {
border-radius: 50%; background: transparent;
border-color: transparent; box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.food-float-icon {
width: 64px; height: 64px; border-radius: 50%;
background: rgba(255,255,255,.92);
box-shadow: 0 6px 20px rgba(0,0,0,.15);
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem; color: var(--green);
border: 2px solid rgba(255,255,255,.7);
transition: background .25s ease;
}
.food-float:hover .food-float-icon { background: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.2); }
.food-float-icon--leaf { color: #4caf50; font-size: 1.1rem; }
.food-quote-bubble {
position: absolute; bottom: 13%; left: -3%;
background: #fff; border-radius: 16px; padding: .65rem 1.1rem;
font-size: .78rem; font-weight: 700; color: #4a1a0a;
box-shadow: 0 6px 24px rgba(0,0,0,.13);
white-space: nowrap; z-index: 6; letter-spacing: .01em;
transition: transform .25s ease;
}
.food-quote-bubble:hover { transform: translateY(-3px); }
.food-quote-bubble::after {
content: ''; position: absolute; top: 50%; right: -8px;
transform: translateY(-50%);
border: 5px solid transparent; border-left-color: #fff;
}
.food-img-placeholder {
background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
display: flex; flex-direction: column; align-items: center; justify-content: center;
border-radius: 16px; color: var(--green); font-size: 2rem; gap: .5rem;
}
.food-img-placeholder--large { height: 340px; }
.food-img-placeholder span { font-size: .8rem; color: var(--grey); }
/* -- TEAM BUILDING -- */
.team-building-section { padding: 4rem 0; background-color: #eef4ee; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232d6a2d' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.clients-marquee { overflow: hidden; margin: 2rem 0; }
.clients-track {
display: flex; gap: 2rem;
animation: marquee 20s linear infinite; /* faster: 20s down from 30s */
width: max-content;
}
.clients-track:hover { animation-play-state: paused; }
.client-logo {
flex-shrink: 0; height: 60px; display: flex; align-items: center; justify-content: center;
min-width: 100px; padding: 0 .75rem;
}
/* Mobile: tighter gaps + faster for 4-5 logos visible */
@media (max-width: 640px) {
.clients-track { gap: 1.25rem; animation-duration: 12s; }
.client-logo { min-width: 80px; height: 50px; padding: 0 .5rem; }
.client-logo img { max-height: 40px !important; max-width: 90px !important; }
}
.client-logo img { height: 50px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .65; transition: var(--transition); }
.client-logo:hover img { filter: grayscale(0); opacity: 1; }
.client-name-text {
background: var(--white); color: var(--green); font-weight: 700; font-size: .85rem;
padding: .5rem 1rem; border-radius: 10px; border: 1.5px solid var(--border);
white-space: nowrap;
}
.team-building-cta { text-align: center; margin-top: 1.5rem; }
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
/* -- SERVICES -- */
.services-section { padding: 4rem 0; }
.services-section .section-title { margin-bottom: .5rem; }
.services-section .section-subtitle { margin-bottom: 2rem; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.service-card { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 4/3; }
.service-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.service-card:hover img { transform: scale(1.05); }
.service-placeholder { width: 100%; height: 100%; background: var(--green); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.4); font-size: 3rem; }
.service-card-overlay {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 1.5rem 1.2rem .8rem;
background: linear-gradient(transparent, rgba(0,0,0,.7));
}
.service-card-overlay h3 { font-family: var(--font-hand); color: var(--white); font-size: 1.3rem; }
/* -- REVIEWS -- */
.reviews-section { padding: 4rem 0; background-color: #edf4ed; background-image: none; }
.reviews-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.reviews-rating-summary { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.reviews-stars .fa-star, .review-stars .fa-star { color: #ddd; font-size: 1rem; }
.reviews-stars .fa-star.filled, .review-stars .fa-star.filled { color: #f59e0b; }
.reviews-avg { font-size: 1.5rem; font-weight: 900; color: var(--black); }
.reviews-count { color: var(--grey); font-size: .9rem; }
.reviews-demo-badge { background: #fff3cd; color: #856404; padding: .3rem .8rem; border-radius: 4px; font-size: .82rem; }
.google-logo { height: 32px; }
.reviewsSwiper { overflow: hidden; } /* clips slides only */
/* Outer wrapper: gives arrows room to sit outside the swiper clip */
.reviews-carousel-wrap {
position: relative;
padding: 0 52px; /* space for arrows on each side */
}
@media (max-width: 640px) {
.reviews-carousel-wrap { padding: 0 36px; }
}
.review-card {
background: var(--white); border-radius: 16px; padding: 1.5rem;
box-shadow: 0 4px 16px rgba(0,0,0,.07); height: 100%;
}
.review-header { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; flex-wrap: wrap; }
.review-avatar {
width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
background: var(--green); display: flex; align-items: center; justify-content: center;
color: var(--white); font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
}
.review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-header strong { display: block; font-size: .95rem; }
.review-header small { color: var(--grey); font-size: .8rem; }
.ml-auto { margin-left: auto; }
.review-text { color: var(--grey); font-size: .9rem; line-height: 1.6; font-style: italic; }
.reviews-pagination { margin-top: 1.5rem !important; }
/* -- Reviews nav arrows -- */
.reviews-swiper-prev,
.reviews-swiper-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--white);
border: 1.5px solid var(--border);
color: var(--green);
font-size: .9rem;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: 0 2px 12px rgba(0,0,0,.1);
transition: background var(--transition), color var(--transition);
}
.reviews-swiper-prev:hover,
.reviews-swiper-next:hover { background: var(--green); color: var(--white); }
/* Positioned relative to .reviews-carousel-wrap */
.reviews-swiper-prev { left: 0; }
.reviews-swiper-next { right: 0; }
.reviews-swiper-prev.swiper-button-disabled,
.reviews-swiper-next.swiper-button-disabled { opacity: .35; pointer-events: none; }
/* -- CONTACT -- */
.contact-section { padding: 4rem 0; background-color: #f5f8f5; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232d6a2d' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; align-items: start; margin-top: 2rem; }
.contact-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.contact-icon { width: 44px; height: 44px; background: var(--green); color: var(--white); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.contact-item strong { display: block; margin-bottom: .2rem; }
.contact-item a { color: var(--green); }
/* -- VIDEO LIGHTBOX -- */
.video-lightbox {
position: fixed; inset: 0; z-index: 9999;
display: none; align-items: center; justify-content: center;
}
.video-lightbox.open { display: flex; }
.video-lightbox-backdrop {
position: absolute; inset: 0; background: rgba(0,0,0,.85);
cursor: pointer;
}
.video-lightbox-content {
position: relative; z-index: 1; width: 90vw; max-width: 900px;
background: #000; border-radius: 16px; overflow: hidden;
aspect-ratio: 16/9;
}
.video-lightbox-close {
position: absolute; top: -40px; right: 0; background: none; border: none;
color: var(--white); font-size: 2rem; cursor: pointer; line-height: 1; z-index: 2;
}
.video-lightbox-inner { width: 100%; height: 100%; }
.video-lightbox-inner iframe { width: 100%; height: 100%; border: 0; }
/* -- PAGE HERO (inner pages) -- */
.page-hero {
position: relative;
height: 60vh; min-height: 420px;
background: linear-gradient(135deg, var(--green-dark), var(--green));
background-size: cover; background-position: center;
display: flex; align-items: center; justify-content: center;
/* No margin-top � hero extends behind the transparent nav, just like homepage */
}
.page-hero--short { height: 35vh; min-height: 240px; }
/* Mobile: uniform moderate hero height for all inner pages */
@media (max-width: 768px) {
.page-hero { height: 42vw; min-height: 220px; max-height: 300px; }
.page-hero--short { height: 32vw; min-height: 160px; max-height: 220px; }
/* food, events, accommodations custom heroes follow same rule */
.al-hero { min-height: 220px; max-height: 300px; height: 42vw; }
.food-page-hero { min-height: 220px; max-height: 300px; }
}
.page-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.5) 100%);
}
.page-hero-content {
position: relative; z-index: 1; text-align: center; color: var(--white);
padding: 0 24px;
/* push content down so it clears the nav */
margin-top: calc(var(--nav-height) + var(--banner-height));
}
.page-hero-content h1 { font-family: var(--font-hand); font-size: clamp(2rem, 5vw, 3.5rem); }
.page-hero-content p { font-size: 1rem; opacity: .85; margin-top: .5rem; }
/* -- BOOKING PAGE -- */
.booking-section { padding: 4rem 0; }
.booking-wrap { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items: start; }
.booking-form-col h2 { font-family: var(--font-hand); font-size: 2rem; margin-bottom: 1.5rem; }
.booking-form .form-group { margin-bottom: 1.2rem; }
/* -- BOOKING WIZARD (bwiz) -- */
/* Container: wizard form + aside sidebar side by side */
.booking-section .container {
display: grid;
grid-template-columns: 1fr 340px;
gap: 2.5rem;
align-items: start;
}
/* -- Step indicator -- */
.bwiz-stepper {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-bottom: 2.5rem;
grid-column: 1 / -1;
}
.bwiz-step {
display: flex;
flex-direction: column;
align-items: center;
gap: .4rem;
cursor: default;
}
.bwiz-step-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: #e0e0e0;
color: #999;
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
transition: background .25s, color .25s;
border: 2px solid transparent;
}
.bwiz-step.active .bwiz-step-icon {
background: var(--green);
color: #fff;
border-color: var(--green);
box-shadow: 0 0 0 4px rgba(45,106,45,.18);
}
.bwiz-step.done .bwiz-step-icon {
background: #c8e6c9;
color: var(--green);
border-color: #c8e6c9;
}
.bwiz-step-label {
font-size: .75rem;
font-weight: 700;
color: #bbb;
text-transform: uppercase;
letter-spacing: .05em;
transition: color .25s;
}
.bwiz-step.active .bwiz-step-label { color: var(--green); }
.bwiz-step.done .bwiz-step-label { color: var(--green); }
.bwiz-connector {
flex: 1;
height: 2px;
background: #e0e0e0;
margin: 0 .5rem;
margin-bottom: 1.4rem;
transition: background .25s;
max-width: 80px;
}
.bwiz-connector.done { background: var(--green); }
/* -- Wizard form -- */
.bwiz-form {
background: #fff;
border-radius: 20px;
box-shadow: 0 4px 28px rgba(0,0,0,.08);
overflow: hidden;
}
/* -- Panels -- */
.bwiz-panel {
display: none;
padding: 2rem 2.5rem 2.5rem;
animation: bwizIn .22s ease;
}
.bwiz-panel.active { display: block; }
.bwiz-panel.leaving { animation: bwizOut .22s ease forwards; }
@keyframes bwizIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bwizOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-10px); }
}
/* Panel header */
.bwiz-panel-header {
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--border);
margin-bottom: 1.75rem;
}
.bwiz-panel-header h2 {
font-family: var(--font-hand);
font-size: 1.8rem;
color: var(--black);
display: flex; align-items: center; gap: .6rem;
margin-bottom: .3rem;
}
.bwiz-panel-header h2 i { color: var(--green); font-size: 1.4rem; }
.bwiz-panel-header p { color: var(--grey); font-size: .95rem; margin: 0; }
/* -- Fields -- */
.bwiz-fields { display: flex; flex-direction: column; gap: 1.25rem; }
.bwiz-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group label { font-weight: 700; font-size: .9rem; color: var(--black); }
.form-group .req { color: #e53935; }
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: .7rem 1rem;
border: 1.5px solid var(--border);
border-radius: 10px;
font-family: var(--font-main);
font-size: .95rem;
color: var(--black);
background: #fff;
transition: border-color .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(45,106,45,.12);
}
.field-error { font-size: .8rem; color: #e53935; min-height: 1em; }
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea { border-color: #e53935; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* -- Booking type tiles -- */
.bwiz-type-grid {
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin-top: .4rem;
}
.bwiz-type-tile {
display: flex; align-items: center; gap: .5rem;
padding: .55rem 1.1rem;
border: 2px solid var(--border);
border-radius: 30px;
background: #fff;
font-family: var(--font-main);
font-size: .88rem;
font-weight: 700;
color: #555;
cursor: pointer;
transition: all .2s;
}
.bwiz-type-tile i { font-size: .9rem; }
.bwiz-type-tile:hover { border-color: var(--green); color: var(--green); }
.bwiz-type-tile.active {
background: var(--green);
border-color: var(--green);
color: #fff;
}
/* -- Participants counter -- */
.bwiz-participants {
display: flex; align-items: center; gap: 0;
border: 1.5px solid var(--border);
border-radius: 10px;
overflow: hidden;
width: fit-content;
}
.part-btn {
width: 42px; height: 42px;
background: var(--light-bg);
border: none;
cursor: pointer;
font-size: 1rem;
color: var(--green);
transition: background .15s;
display: flex; align-items: center; justify-content: center;
}
.part-btn:hover { background: #c8e6c9; }
.bwiz-participants input[type="number"] {
width: 64px;
text-align: center;
border: none;
border-left: 1.5px solid var(--border);
border-right: 1.5px solid var(--border);
border-radius: 0;
font-size: 1rem;
font-weight: 700;
padding: .5rem .25rem;
}
.bwiz-participants input[type="number"]:focus {
outline: none;
box-shadow: none;
border-color: var(--border);
}
/* -- Currency tiles -- */
.bwiz-currency-grid {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-top: .4rem;
}
.bwiz-currency-tile {
padding: .45rem 1rem;
border: 2px solid var(--border);
border-radius: 8px;
background: #fff;
font-family: var(--font-main);
font-size: .88rem;
font-weight: 700;
color: #555;
cursor: pointer;
transition: all .2s;
}
.bwiz-currency-tile:hover { border-color: var(--green); color: var(--green); }
.bwiz-currency-tile.active {
background: var(--green);
border-color: var(--green);
color: #fff;
}
/* -- Price card -- */
.bwiz-price-card {
background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
border-radius: 16px;
padding: 1.5rem;
color: #fff;
}
.bwiz-price-label {
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(255,255,255,.75);
margin-bottom: .35rem;
}
.bwiz-price-value {
font-family: var(--font-hand);
font-size: 2rem;
color: #fff;
line-height: 1.1;
}
.bwiz-price-breakdown {
font-size: .82rem;
color: rgba(255,255,255,.75);
margin-top: .5rem;
}
/* -- Summary (step 4) -- */
.bwiz-summary {
background: var(--light-bg);
border-radius: 14px;
padding: 1.5rem;
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
gap: .75rem;
}
.bwiz-summary-row {
display: flex;
justify-content: space-between;
gap: 1rem;
font-size: .92rem;
}
.bwiz-summary-row .label { color: var(--grey); font-weight: 600; }
.bwiz-summary-row .value { font-weight: 700; text-align: right; }
/* -- Disclaimer -- */
.bwiz-disclaimer {
background: #fff3cd;
border: 1px solid #ffe082;
border-radius: 10px;
padding: .9rem 1.1rem;
font-size: .87rem;
color: #795548;
display: flex;
align-items: flex-start;
gap: .6rem;
margin-bottom: 1.5rem;
}
.bwiz-disclaimer i { color: #f59e0b; flex-shrink: 0; margin-top: .15rem; }
/* -- Nav buttons -- */
.bwiz-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
margin-top: 1.5rem;
gap: 1rem;
}
.btn-outline {
display: inline-flex; align-items: center; gap: .5rem;
padding: .65rem 1.4rem;
border: 2px solid var(--border);
border-radius: 30px;
background: #fff;
font-family: var(--font-main);
font-size: .9rem;
font-weight: 700;
color: #555;
cursor: pointer;
transition: all .2s;
text-decoration: none;
}
.btn-outline:hover { border-color: var(--green); color: var(--green); }
/* -- Sidebar aside -- */
.bwiz-aside {
position: sticky;
top: 100px;
}
.bwiz-aside .booking-info-card,
.bwiz-aside .booking-contact-card {
background: #fff;
border-radius: 16px;
padding: 1.5rem;
border: 1.5px solid var(--border);
box-shadow: 0 2px 12px rgba(0,0,0,.06);
margin-bottom: 1.25rem;
}
.bwiz-aside .booking-info-card h3,
.bwiz-aside .booking-contact-card h3 {
font-size: 1rem;
font-weight: 800;
margin-bottom: 1rem;
display: flex; align-items: center; gap: .5rem;
color: var(--black);
}
.bwiz-aside .booking-info-card h3 i,
.bwiz-aside .booking-contact-card h3 i { color: var(--green); }
.booking-steps { padding-left: 1.2rem; list-style: decimal; }
.booking-steps li { margin-bottom: .6rem; font-size: .9rem; color: var(--grey); }
.booking-steps li strong { color: var(--black); }
.booking-contact-card p { font-size: .9rem; color: var(--grey); margin-bottom: .5rem; }
.booking-phone {
display: block;
color: var(--green);
font-size: 1.25rem;
font-weight: 800;
margin-top: .5rem;
}
/* -- Item select wrap -- */
.bwiz-item-wrap select { margin-top: .2rem; }
.booking-form label { display: block; font-weight: 700; margin-bottom: .4rem; font-size: .9rem; }
.booking-form input, .booking-form select, .booking-form textarea {
width: 100%; padding: .65rem .9rem; border: 1.5px solid var(--border);
border-radius: 10px; font-family: var(--font-main); font-size: .9rem;
transition: border-color var(--transition);
}
.booking-form select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .9rem center;
background-size: 8px 5px;
padding-right: 2.2rem;
}
.booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus {
outline: none; border-color: var(--green);
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.booking-total-display {
background: var(--light-bg); padding: .8rem 1rem; border-radius: 12px;
font-weight: 700; font-size: 1rem; color: var(--green);
}
.booking-info-card, .booking-contact-card {
background: var(--light-bg); border-radius: 16px; padding: 1.5rem;
margin-bottom: 1.5rem;
}
.booking-info-card h3, .booking-contact-card h3 { font-size: 1rem; font-weight: 800; margin-bottom: 1rem; }
.booking-steps { padding-left: 1.2rem; }
.booking-steps li { margin-bottom: .7rem; font-size: .9rem; color: var(--grey); }
.booking-phone { display: block; color: var(--green); font-size: 1.2rem; font-weight: 800; margin-top: .5rem; }
/* -- CONFIRMATION -- */
.confirmation-section { padding: 5rem 0; }
.confirmation-card {
max-width: 640px; margin: 0 auto; text-align: center;
background: var(--white); border-radius: 24px; padding: 3rem;
box-shadow: 0 8px 40px rgba(0,0,0,.1);
}
.confirmation-icon { font-size: 4rem; color: var(--green); margin-bottom: 1rem; }
.confirmation-card h1 { font-family: var(--font-hand); font-size: 2.2rem; }
.confirmation-sub { color: var(--grey); margin: .75rem 0 1.5rem; }
.confirmation-details { background: var(--light-bg); border-radius: 14px; padding: 1.5rem; margin: 1.5rem 0; text-align: left; }
.conf-item { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.conf-item:last-child { border-bottom: none; }
.conf-item span:first-child { color: var(--grey); font-size: .9rem; }
.confirmation-note { color: var(--grey); font-size: .9rem; margin: 1rem 0; }
.confirmation-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
/* -- DETAIL PAGES -- */
.activity-detail-section { padding: 3rem 0; }
.activity-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: start; }
.activity-detail-main h2 { font-family: var(--font-hand); font-size: 2rem; margin-bottom: 1rem; }
.activity-full-desc { color: var(--grey); line-height: 1.8; margin-top: 1rem; }
.activity-meta-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.meta-item { display: flex; align-items: center; gap: .75rem; color: var(--grey); font-size: .95rem; }
.meta-item i { color: var(--green); width: 18px; flex-shrink: 0; }
.booking-sidebar-card {
background: var(--light-bg); border-radius: 16px; padding: 2rem;
border: 1.5px solid var(--border); position: sticky; top: 100px;
}
.booking-sidebar-card h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: .75rem; }
.sidebar-price { font-size: 1.5rem; font-weight: 900; color: var(--green); margin-bottom: 1.25rem; }
.sidebar-divider { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
.sidebar-includes { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .7rem; }
.sidebar-includes li { display: flex; align-items: center; gap: .65rem; font-size: .92rem; color: #333; }
.sidebar-includes li i { color: var(--green); flex-shrink: 0; }
.sidebar-note { margin-top: 1rem; font-size: .82rem; color: var(--grey); display: flex; align-items: center; gap: .4rem; justify-content: center; }
.sidebar-note i { color: var(--green); }
.activity-description-block { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.activity-short-desc { font-size: 1.05rem; color: #333; line-height: 1.7; margin-bottom: 1rem; }
/* -- Accommodation show sidebar cards -- */
.accom-sidebar-card {
background: #fff;
border-radius: 20px;
padding: 1.5rem;
border: 1.5px solid var(--border);
box-shadow: 0 2px 12px rgba(0,0,0,.06);
margin-bottom: 1rem;
}
/* -- Activity Pricing Breakdown Widget -- */
.act-pricing-breakdown {
margin: 1rem 0 1.2rem;
border: 1.5px solid #e8f0e8;
border-radius: 14px;
overflow: hidden;
font-size: .88rem;
}
.act-pricing-breakdown-header {
background: var(--green);
color: #fff;
font-weight: 700;
font-size: .8rem;
letter-spacing: .05em;
text-transform: uppercase;
padding: .6rem 1rem;
display: flex;
align-items: center;
gap: .45rem;
}
.act-pricing-group {
padding: .6rem 1rem;
border-bottom: 1px solid #f0f5f0;
}
.act-pricing-group:last-child { border-bottom: none; }
.act-pricing-group-label {
display: block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #999;
margin-bottom: .4rem;
}
.act-pricing-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: .3rem 0;
border-bottom: 1px dashed #f0f0f0;
}
.act-pricing-row:last-child { border-bottom: none; }
.act-pricing-row-label {
color: #444;
display: flex;
align-items: center;
gap: .4rem;
}
.act-pricing-row-label i { color: var(--green); font-size: .8rem; width: 14px; }
.act-pricing-row-price {
font-weight: 800;
color: var(--green);
white-space: nowrap;
}
.accom-sidebar-price {
font-size: 2rem;
font-weight: 900;
color: var(--green);
line-height: 1.1;
}
.accom-sidebar-per-night {
font-size: .88rem;
color: var(--green);
margin-bottom: 1.25rem;
}
.accom-sidebar-meta {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
display: flex;
flex-direction: column;
gap: .75rem;
}
.accom-sidebar-meta li {
display: flex;
align-items: center;
gap: .6rem;
font-size: .95rem;
color: #333;
}
.accom-sidebar-meta li i {
color: var(--green);
width: 18px;
text-align: center;
flex-shrink: 0;
}
.accom-book-btn {
display: block;
width: 100%;
text-align: center;
padding: .85rem 1rem;
border-radius: 50px;
font-size: 1rem;
font-weight: 700;
}
.accom-amenities-title {
font-size: 1.1rem;
font-weight: 800;
margin: 0 0 1rem;
color: #111;
}
.accom-amenities-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: .7rem;
}
.accom-amenities-list li {
display: flex;
align-items: center;
gap: .65rem;
font-size: .92rem;
color: var(--green);
}
.accom-amenities-list li i {
width: 18px;
text-align: center;
flex-shrink: 0;
}
.accom-description { margin-top: 1.5rem; }
.accom-description-title {
font-size: 1.5rem;
font-weight: 800;
color: #111;
margin-bottom: .6rem;
}
/* -- Other Room Types (show page) -- */
.related-accom-section {
padding: 3.5rem 0 4.5rem;
background-color: #eef4ee;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232d6a2d' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.related-accom-heading-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rem;
gap: 1rem;
}
.related-accom-heading {
font-family: var(--font-hand);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 400;
color: #111;
margin: 0;
}
/* Grid */
.related-accom-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
}
/* Card */
.related-accom-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 16px rgba(0,0,0,.07);
border: 1px solid #eaeaea;
text-decoration: none;
color: inherit;
transition: transform .24s ease, box-shadow .24s ease;
}
.related-accom-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 40px rgba(45,106,45,.14);
color: inherit;
}
/* Image */
.related-accom-img {
position: relative;
overflow: hidden;
}
.related-accom-img img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.related-accom-card:hover .related-accom-img img { transform: scale(1.04); }
/* Type badge */
.related-accom-type {
position: absolute;
top: 12px; left: 12px;
background: var(--green);
color: #fff;
font-size: .68rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
padding: .22rem .75rem;
border-radius: 20px;
box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
/* Capacity badge */
.related-accom-cap {
position: absolute;
bottom: 10px; left: 12px;
background: rgba(0,0,0,.6);
backdrop-filter: blur(4px);
color: #fff;
font-size: .72rem;
font-weight: 600;
padding: .22rem .7rem;
border-radius: 20px;
display: flex;
align-items: center;
gap: .3rem;
}
/* Body */
.related-accom-body {
padding: 1.1rem 1.2rem 1.2rem;
display: flex;
flex-direction: column;
flex: 1;
}
.related-accom-body h3 {
font-size: 1.05rem;
font-weight: 800;
color: #111;
margin: 0 0 .35rem;
line-height: 1.2;
}
.related-accom-body p {
font-size: .85rem;
color: #777;
line-height: 1.55;
flex: 1;
margin: 0 0 .9rem;
}
/* Footer row */
.related-accom-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: .75rem;
border-top: 1px solid #f0f0f0;
gap: .5rem;
}
.related-accom-price { display: flex; align-items: baseline; gap: .2rem; flex-wrap: wrap; }
.rap-from { font-size: .68rem; color: #aaa; font-weight: 600; }
.rap-amt { font-size: .95rem; font-weight: 800; color: var(--green); }
.rap-per { font-size: .68rem; color: #aaa; }
/* CTA text link */
.related-accom-cta {
font-size: .78rem;
font-weight: 700;
color: var(--green);
text-transform: uppercase;
letter-spacing: .05em;
white-space: nowrap;
border-bottom: 1.5px solid var(--green);
transition: color .2s, border-color .2s;
}
.related-accom-card:hover .related-accom-cta { color: var(--green-dark); border-color: var(--green-dark); }
@media (max-width: 860px) {
.related-accom-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 540px) {
.related-accom-grid { grid-template-columns: 1fr; }
}
.related-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.related-section h3 { font-family: var(--font-hand); font-size: 1.7rem; margin-bottom: 1.5rem; }
.amenities-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; }
.amenities-list li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.amenities-list i { color: var(--green); }
/* -- Amenities icon grid (accommodation show page) -- */
.amenities-icon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
gap: .75rem;
}
.amenity-icon-item {
display: flex;
align-items: center;
gap: .65rem;
background: #f7f9f5;
border: 1px solid #e8ede8;
border-radius: 14px;
padding: .65rem .85rem;
transition: border-color .2s, box-shadow .2s, transform .2s;
}
.amenity-icon-item:hover {
border-color: var(--green);
box-shadow: 0 3px 12px rgba(45,106,45,.12);
transform: translateY(-1px);
}
.amenity-icon-wrap {
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(45,106,45,.1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--green);
font-size: .9rem;
}
.amenity-icon-item span {
font-size: .82rem;
font-weight: 600;
color: #333;
line-height: 1.3;
}
/* -- Detail Gallery Viewer (main image + thumbnail switcher) -- */
.detail-gallery-viewer { margin-top: 0; margin-bottom: 2rem; }
/* Main image container */
.gallery-main-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 16px;
overflow: hidden;
background: #111;
cursor: zoom-in;
}
.gallery-main-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity .25s ease;
}
.gallery-main-img.is-switching { opacity: 0; }
/* Main video placeholder */
.gallery-main-video {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #111;
border-radius: 10px;
cursor: pointer;
}
.gallery-video-play-btn {
width: 72px;
height: 72px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,.85);
background: rgba(0,0,0,.45);
color: #fff;
font-size: 1.6rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .2s ease, transform .2s ease;
padding-left: 4px; /* optical centre for play icon */
}
.gallery-video-play-btn:hover { background: var(--green); transform: scale(1.1); }
/* Thumbnail strip */
.gallery-thumbs {
display: flex;
gap: 8px;
margin-top: 10px;
flex-wrap: wrap;
}
.gallery-thumb {
width: 88px;
height: 62px;
border-radius: 10px;
overflow: hidden;
border: 2px solid transparent;
padding: 0;
background: #111;
cursor: pointer;
flex-shrink: 0;
transition: border-color .2s ease, opacity .2s ease;
position: relative;
}
.gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gallery-thumb.active { border-color: var(--green); }
.gallery-thumb:not(.active):hover { border-color: var(--green-light); opacity: .85; }
/* Video thumbnail overlay */
.thumb-video-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.45);
color: #fff;
font-size: .9rem;
z-index: 1;
}
.thumb-video-label {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: rgba(255,255,255,.8);
font-size: .7rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
background: #222;
}
/* Standalone video button (when there are no images at all) */
.detail-video-section { margin-top: 2rem; }
.detail-video-thumb {
display: inline-flex;
align-items: center;
gap: .7rem;
padding: .85rem 1.5rem;
border-radius: 12px;
border: 2px solid var(--green);
background: transparent;
color: var(--green);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: background .2s ease, color .2s ease;
}
.detail-video-thumb:hover { background: var(--green); color: #fff; }
.detail-video-thumb i { font-size: 1.25rem; }
/* Legacy grid kept for any pages still using it */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 1.5rem; }
.gallery-img { width: 100%; height: 140px; object-fit: cover; border-radius: 10px; cursor: pointer; transition: transform .2s ease, opacity .2s ease; }
.gallery-img:hover { transform: scale(1.03); opacity: .9; }
.gallery-lightbox-link { display: block; border-radius: 6px; overflow: hidden; }
/* Detail gallery section title */
.detail-gallery { margin-top: 2rem; }
.detail-gallery-title { font-size: 1.1rem; font-weight: 800; margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; color: var(--green); }
/* -- Packages listing page -- */
.packages-page-section { padding: 3rem 0 4rem; }
.packages-page-section .packages-grid { margin-top: 0; }
.package-includes { margin-top: 1.5rem; }
.package-includes h3 { font-size: 1rem; font-weight: 800; margin-bottom: .75rem; }
/* -- FOOTER -- */
.main-footer { position: relative; }
.footer-bg {
background: linear-gradient(rgba(0,0,0,.82), rgba(0,0,0,.9)),
url('/images/footer-bg.jpg') center/cover;
padding: 4rem 0 0;
color: var(--white);
}
.footer-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.footer-info-bar {
display: flex; gap: 2rem; flex-wrap: wrap;
padding: 1rem 0; margin-top: 2rem;
border-top: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.65); font-size: .85rem;
}
.footer-info-bar i { color: var(--gold); margin-right: .4rem; }
.footer-grid {
display: grid; grid-template-columns: 2fr 1fr 1.2fr 1.2fr 1fr;
gap: 2rem;
}
.footer-logo {
height: 56px;
width: auto;
object-fit: contain;
}
.footer-logo-fallback .logo-text-e { color: var(--gold); }
.footer-tagline {
font-family: var(--font-hand); font-size: 1.1rem;
color: var(--white); line-height: 1.4; margin: 1rem 0;
}
.footer-phone {
display: inline-flex; align-items: center; gap: .5rem;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
border-radius: 10px; padding: .5rem 1rem; font-weight: 700; color: var(--white);
font-size: .95rem;
}
.footer-phone:hover { background: var(--green); }
.footer-col h4 { color: rgba(255,255,255,.5); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; font-weight: 700; }
.footer-col ul li { margin-bottom: .5rem; }
.footer-col ul li a { color: rgba(255,255,255,.75); font-size: .88rem; transition: color var(--transition); }
.footer-col ul li a:hover { color: var(--gold); }
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
padding: 1.2rem 0; border-top: 1px solid rgba(255,255,255,.12);
font-size: .82rem; color: rgba(255,255,255,.5); flex-wrap: wrap; gap: 1rem;
}
.footer-socials { display: flex; gap: .75rem; }
.footer-socials a {
width: 34px; height: 34px; border-radius: 50%;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.7); font-size: .85rem; transition: var(--transition);
}
.footer-socials a:hover { background: var(--green); color: var(--white); border-color: var(--green); }
/* -- BADGES -- */
.badge { display: inline-block; padding: .2rem .65rem; border-radius: 20px; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.badge-pending { background: #fff3cd; color: #856404; }
.badge-confirmed { background: #d1e7dd; color: #0f5132; }
.badge-completed { background: #cff4fc; color: #055160; }
.badge-cancelled { background: #f8d7da; color: #842029; }
.badge-unpaid { background: #fff3cd; color: #856404; }
.badge-paid { background: #d1e7dd; color: #0f5132; }
.badge-refunded { background: #e2e3e5; color: #41464b; }
.badge-type { background: #e8f5e9; color: var(--green-dark); }
.badge-success { background: #d1e7dd; color: #0f5132; }
.badge-danger { background: #f8d7da; color: #842029; }
.badge-neutral { background: #e9ecef; color: #495057; }
/* -- RESPONSIVE -- */
@media (max-width: 1200px) {
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.footer-col-activities2 { display: none; }
.stats-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
:root { --nav-height: 64px; }
.food-grid { grid-template-columns: 1fr; }
.food-scene { max-width: 340px; }
.services-grid { grid-template-columns: repeat(2,1fr); }
.contact-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.stats-grid { grid-template-columns: repeat(3,1fr); }
.booking-wrap { grid-template-columns: 1fr; }
.activity-detail-grid { grid-template-columns: 1fr; }
.hero-info-bar { grid-template-columns: 1fr 1fr; bottom: 1.5rem; min-width: min(580px, calc(100% - 2rem)); }
.hero-info-brand { grid-column: span 2; border-right: none; border-bottom: 1px solid rgba(255,255,255,.15); }
/* Booking wizard: stack form + sidebar */
.booking-section .container { grid-template-columns: 1fr; }
.bwiz-aside { position: static; }
.bwiz-panel { padding: 1.5rem; }
}
@media (max-width: 640px) {
.services-grid { grid-template-columns: 1fr; }
.events-grid { grid-template-columns: 1fr; }
/* Mobile footer: 2-column grid, compact bg, no excessive height */
.footer-grid {
grid-template-columns: 1fr 1fr !important;
gap: 1.25rem !important;
}
.footer-brand { grid-column: 1 / -1; }
.footer-bg {
background-size: cover;
background-attachment: scroll;
padding: 2rem 0 0;
}
/* Prevent footer bg image from zooming/being over-cropped on mobile */
.footer-bg[style] {
background-size: cover !important;
background-position: center top !important;
background-attachment: scroll !important;
}
.footer-logo { height: 40px; }
.footer-tagline { font-size: .95rem; }
.footer-info-bar { flex-direction: column; gap: .5rem; font-size: .8rem; }
.footer-bottom { flex-direction: column-reverse; align-items: center; text-align: center; }
.stats-grid { grid-template-columns: repeat(2,1fr); }
.hero-info-bar { grid-template-columns: 1fr; bottom: 1rem; min-width: min(340px, calc(100% - 2rem)); }
.hero-info-brand { grid-column: 1; }
.hero-info-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
/* Booking wizard mobile */
.bwiz-field-row { grid-template-columns: 1fr; }
.bwiz-stepper { gap: 0; }
.bwiz-connector { max-width: 30px; }
.bwiz-step-label { font-size: .65rem; }
.form-grid-2 { grid-template-columns: 1fr; }
.offer-content { flex-direction: column; gap: 1rem; }
.accom-slider-wrap { padding: 0 44px; }
}
/* ---------------------------------------
MOBILE NAVIGATION (= 768px)
--------------------------------------- */
@media (max-width: 768px) {
/* -- Nav bar layout: logo | spacer | currency + toggle -- */
.nav-container {
padding: 0 16px;
gap: 0;
}
/* Logo stays left, natural size */
.nav-logo img { height: 44px; }
/* Push everything after the logo to the right */
.nav-links { margin-left: 0; }
/* Actions: currency selector + hamburger, flush right */
.nav-actions {
margin-left: auto;
gap: .55rem;
flex-shrink: 0;
}
/* Shrink currency selector slightly on small screens */
.currency-selector select {
height: 34px;
padding: 0 1.6rem 0 .5rem;
font-size: .8rem;
border-radius: 8px;
}
/* Hide the "Book Now" CTA from the bar (lives in the open menu instead) */
.btn-book-nav { display: none; }
/* -- Hamburger / toggle button -- */
.nav-toggle {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 8px;
border-radius: 8px;
background: rgba(255,255,255,.13);
border: 1.5px solid rgba(255,255,255,.3);
cursor: pointer;
flex-shrink: 0;
transition: background var(--transition), border-color var(--transition);
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
background: rgba(255,255,255,.22);
outline: none;
}
/* On white/light nav */
.main-nav.scrolled .nav-toggle,
.main-nav.nav-on-light .nav-toggle {
background: rgba(45,106,45,.08);
border-color: var(--green);
}
.main-nav.scrolled .nav-toggle span,
.main-nav.nav-on-light .nav-toggle span { background: var(--black); }
/* Hamburger lines */
.nav-toggle span {
display: block;
width: 20px;
height: 2px;
background: var(--white);
border-radius: 2px;
transform-origin: center;
transition: transform .3s ease, opacity .3s ease, width .3s ease;
}
/* Animate to X when open */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* -- Slide-down menu drawer -- */
.nav-links {
display: flex;
flex-direction: column;
position: fixed;
/* Sit right below the nav bar */
top: var(--nav-height);
left: 0; right: 0;
/* Full viewport height minus nav � scrollable if content overflows */
max-height: calc(100dvh - var(--nav-height));
overflow-y: auto;
background: rgba(255,255,255,.99);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: .5rem 0 2rem;
gap: 0;
box-shadow: 0 12px 40px rgba(0,0,0,.18);
border-top: 2px solid var(--green);
/* Hidden state */
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: opacity .28s ease, transform .28s ease, visibility .28s;
z-index: 99;
}
.nav-links.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Adjust top if banner is present */
body:has(.top-banner):not(.banner-hidden) .nav-links {
top: calc(var(--nav-height) + var(--banner-height));
max-height: calc(100dvh - var(--nav-height) - var(--banner-height));
}
/* Individual link rows */
.nav-links > li > a {
display: flex;
align-items: center;
justify-content: space-between;
padding: .9rem 1.4rem;
font-size: 1rem;
font-weight: 700;
color: var(--black) !important;
border-bottom: 1px solid rgba(0,0,0,.06);
transition: color var(--transition), background var(--transition);
}
.nav-links > li:last-of-type > a { border-bottom: none; }
.nav-links > li > a:hover,
.nav-links > li > a.active { color: var(--green) !important; background: rgba(45,106,45,.05); }
/* Chevron icon on dropdown parents */
.has-dropdown > a .fa-chevron-down {
transition: transform .25s ease;
font-size: .75rem;
color: var(--grey);
}
.has-dropdown.open > a .fa-chevron-down { transform: rotate(180deg); color: var(--green); }
/* Sub-menu (dropdown) */
.dropdown {
position: static;
opacity: 1;
visibility: visible;
transform: none;
background: rgba(45,106,45,.05);
box-shadow: none;
border-radius: 0;
padding: 0;
display: none;
border-left: 3px solid var(--green-light);
margin: 0;
}
.has-dropdown.open .dropdown { display: block; }
.dropdown li a {
padding: .7rem 1.4rem .7rem 2rem !important;
font-size: .9rem;
color: #333 !important;
border-bottom: 1px solid rgba(0,0,0,.04);
}
.dropdown li:last-child a { border-bottom: none; }
.dropdown li a:hover { color: var(--green) !important; background: rgba(45,106,45,.07); }
.dropdown-all a { color: var(--green) !important; font-weight: 700; border-top: 1px solid rgba(45,106,45,.15) !important; }
/* "Book Now" CTA inside the open menu, at the bottom */
.nav-mobile-book {
padding: 1.2rem 1.4rem .5rem;
border-top: 1px solid rgba(0,0,0,.08);
margin-top: .4rem;
}
.btn-book-mobile {
display: block;
width: 100%;
padding: .85rem 1rem;
background: var(--green);
color: var(--white) !important;
font-weight: 800;
font-size: .95rem;
letter-spacing: .06em;
text-align: center;
border-radius: 10px;
border: none;
transition: background var(--transition);
}
.btn-book-mobile:hover { background: var(--green-dark) !important; color: var(--white) !important; }
/* Show mobile-only items */
.nav-mobile-book { display: list-item; }
/* -- Mobile-specific adjustments for activities/packages -- */
.container {
padding: 0 16px;
}
.section-title {
font-size: clamp(1.75rem, 5vw, 2.5rem);
}
.section-subtitle {
font-size: .95rem;
}
/* Better touch targets for mobile � sized down to fit smaller screens */
.btn-green,
.btn-outline-green,
.btn-outline-dark,
.btn-white {
min-height: 40px;
padding: .55rem 1.1rem;
font-size: .85rem;
}
/* Hero button smaller on mobile */
.btn-hero {
padding: .6rem 1.6rem;
font-size: .9rem;
}
/* Mobile menu "Book Tickets" button */
.mobile-menu-book-btn {
padding: .65rem .9rem;
font-size: .88rem;
}
/* Card-level action buttons */
.activity-book-btn {
padding: .4rem .85rem;
font-size: .78rem;
}
.alpha-card-btn {
padding: .45rem .9rem;
font-size: .8rem;
}
.accom-book-btn {
padding: .5rem 1rem;
font-size: .82rem;
}
.card-action-btn {
padding: .5rem 1rem;
font-size: .82rem;
}
/* Accommodation slider adjustments */
.accom-slider-wrap {
padding: 0 40px;
}
.accom-nav {
width: 36px;
height: 36px;
font-size: .85rem;
}
/* Event cards stack better on mobile */
.events-grid {
grid-template-columns: 1fr;
gap: 1.2rem;
}
.event-card-body {
flex-direction: column;
gap: .8rem;
}
.event-date-badge {
align-self: flex-start;
}
}
/* -- Extra-small phones (=480px) � shrink buttons further -- */
@media (max-width: 480px) {
.btn-green,
.btn-outline-green,
.btn-outline-dark,
.btn-white {
min-height: 36px;
padding: .45rem .9rem;
font-size: .8rem;
border-radius: 10px;
}
.btn-hero {
padding: .5rem 1.2rem;
font-size: .85rem;
}
.mobile-menu-book-btn {
padding: .55rem .8rem;
font-size: .85rem;
}
.activity-book-btn,
.alpha-card-btn,
.accom-book-btn,
.card-action-btn {
padding: .38rem .75rem;
font-size: .75rem;
}
}
/* -- PRIVACY PAGE -- */
.privacy-section { padding: 4rem 0 5rem; }
.privacy-wrap { max-width: 820px; margin: 0 auto; }
.privacy-updated {
color: var(--grey); font-size: .87rem; margin-bottom: 2rem;
display: flex; align-items: center; gap: .4rem;
}
.privacy-updated i { color: var(--green); }
.privacy-body {
line-height: 1.9; color: #333; font-size: 1rem;
}
.privacy-body p { margin-bottom: 1rem; }
/* -------------------------------------------------------
SITE-WIDE BACKGROUND PATTERN
All pure-white sections are replaced with the same
subtle green crosshatch pattern used on the body so
there is no harsh white block between sections.
------------------------------------------------------- */
/* Shared SVG data-URI helper — DISABLED */
:root {
--pattern-svg: none;
}
/* Accommodations � was plain (inherited white body) */
.accommodations-section {
background-color: #f0f5f0;
background-image: none;
}
/* Events � section itself gets the pattern (cards remain white via .event-card) */
.events-section, .events-page-section {
background-color: #f5f8f5;
background-image: none;
}
/* Services � plain section */
.services-section {
background-color: #eef4ee;
background-image: none;
}
/* Packages section (if shown on homepage) */
.packages-section {
background-color: #f5f8f5;
background-image: none;
}
/* -- Team Building page inline-bg overrides ------------ */
/* These override the `background:#fff` values set inline
in team-building.blade.php via a specific-enough selector */
.tb-intro,
.tb-packages {
background-color: #f4f8f4 !important;
background-image: none !important;
}
.tb-process {
background-color: #edf4ed !important;
background-image: none !important;
}
.tb-clients {
background-color: #f0f5f0 !important;
background-image: none !important;
}
/* -- Food page ------------------------------------------ */
.food-page-content {
background-color: #f4f8f4;
background-image: none;
}
/* -- About page (if it exists) ------------------------- */
.about-section,
.about-content {
background-color: #f4f8f4;
background-image: none;
}
/* -- Booking page -------------------------------------- */
.booking-section,
.booking-page {
background-color: #f4f8f4;
background-image: none;
}
/* ════════════════════════════════════════════════════════
UNIFORM CARD SIZES — Activities & Accommodation
════════════════════════════════════════════════════════ */
/* ── Activity grid cards: fixed image height, uniform body ── */
.act-grid-card {
display: flex;
flex-direction: column;
}
.act-grid-card-img-wrap {
height: 200px !important;
aspect-ratio: unset !important;
flex-shrink: 0;
}
/* Page grid: slightly taller images */
.act-grid-wrap--page .act-grid-card-img-wrap {
height: 210px !important;
}
/* Mobile: consistent card sizes */
@media (max-width: 768px) {
.act-grid-card-img-wrap,
.act-grid-wrap--page .act-grid-card-img-wrap {
height: 170px !important;
}
}
@media (max-width: 480px) {
.act-grid-card-img-wrap,
.act-grid-wrap--page .act-grid-card-img-wrap {
height: 190px !important;
}
}
/* ═══════════════════════════════════════════════════════
GLOBAL CUSTOM SELECT DROPDOWNS
Removes native OS appearance on ALL