/* ============================================
FRANKY HERITAGE SAFARIS � PREMIUM REDESIGN
============================================ */
/* 1. Reset & Root Variables */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--forest: #0d1b11;
--forest-mid:#1a3a28;
--green: #2d7a4a;
--green-light:#3d9a60;
--gold: #d4a574;
--gold-dark: #b8854e;
--cream: #faf9f6;
--cream-dark:#f0ece3;
--white: #ffffff;
--text: #1a2a26;
--text-mid: #3a4a40;
--muted: #64757f;
--border: #e0d8cc;
--shadow-sm: 0 2px 12px rgba(13,27,17,.08);
--shadow: 0 8px 32px rgba(13,27,17,.12);
--shadow-lg: 0 20px 60px rgba(13,27,17,.18);
--radius: 16px;
--radius-lg: 24px;
--top-strip-height: 46px;
--transition:all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}
/* 2. Base */
html { scroll-behavior: smooth; }
body { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; line-height:1.7; color:var(--text); background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
input,textarea,select,button { font-family:inherit; }
/* 3. Typography */
h1,h2,h3,h4,h5 { line-height:1.2; font-weight:800; color:var(--forest); }
h1 { font-size:clamp(2rem, 5vw, 3.5rem); }
h2 { font-size:clamp(1.6rem, 3.5vw, 2.6rem); }
h3 { font-size:clamp(1.1rem, 2vw, 1.4rem); }
.section-eyebrow { display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green); background:rgba(45,122,74,.1); padding:.35rem .9rem; border-radius:50px; margin-bottom:1rem; }
.section-title { font-family:'Cormorant Garamond',serif; font-size:clamp(1.8rem,4vw,2.8rem); font-weight:700; color:var(--forest); margin-bottom:1rem; }
.section-title-left { font-family:'Cormorant Garamond',serif; font-size:clamp(1.7rem,3.5vw,2.5rem); font-weight:700; color:var(--forest); margin-bottom:1.2rem; }
.section-sub { font-size:1.05rem; color:var(--muted); max-width:640px; margin:0 auto; }
.section-header-center { text-align:center; margin-bottom:3rem; }
.section-header-center .section-sub { margin:0 auto; }
/* 4. Container */
.container { max-width:1200px; margin:0 auto; padding:0 2rem; width:100%; }
/* 5. Buttons */
.btn-primary { display:inline-flex; align-items:center; gap:.5rem; padding:1rem 2.2rem; background:linear-gradient(135deg,var(--green),#1f6b45); color:var(--white); border:none; border-radius:50px; font-size:.95rem; font-weight:700; cursor:pointer; transition:var(--transition); box-shadow:0 8px 24px rgba(45,122,74,.3); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(45,122,74,.4); background:linear-gradient(135deg,var(--green-light),var(--green)); }
.btn-primary.btn-lg { padding:1.1rem 2.6rem; font-size:1rem; }
.btn-outline-light { display:inline-flex; align-items:center; gap:.5rem; padding:1rem 2.2rem; background:rgba(255,255,255,.12); color:var(--white); border:2px solid rgba(255,255,255,.5); border-radius:50px; font-size:.95rem; font-weight:700; cursor:pointer; transition:var(--transition); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.btn-outline-light:hover { background:rgba(255,255,255,.22); border-color:var(--white); }
.btn-ghost-sm { display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1.2rem; background:transparent; color:var(--green); border:2px solid var(--green); border-radius:50px; font-size:.82rem; font-weight:700; cursor:pointer; transition:var(--transition); }
.btn-ghost-sm:hover { background:var(--green); color:var(--white); }
.btn-primary-sm { display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1.3rem; background:var(--green); color:var(--white); border:none; border-radius:50px; font-size:.82rem; font-weight:700; cursor:pointer; transition:var(--transition); }
.btn-primary-sm:hover { background:var(--green-light); transform:translateY(-1px); }
.btn-whatsapp { display:inline-flex; align-items:center; gap:.5rem; padding:1rem 2.2rem; background:linear-gradient(135deg,#25d366,#128c7e); color:var(--white); border:none; border-radius:50px; font-size:.95rem; font-weight:700; cursor:pointer; transition:var(--transition); box-shadow:0 8px 24px rgba(37,211,102,.3); }
.btn-whatsapp:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(37,211,102,.4); }
.btn-whatsapp.btn-lg { padding:1.1rem 2.6rem; font-size:1rem; }
.btn-full-w { width:100%; justify-content:center; }
/* 6. Top Bar */
.top-bar { background:linear-gradient(135deg,var(--forest),var(--forest-mid)); color:var(--white); font-size:.85rem; padding:.6rem 0; }
.top-bar-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
.top-bar-contacts { display:flex; gap:1.2rem; flex-wrap:wrap; }
.top-bar-contacts a { color:rgba(255,255,255,.9); transition:color .2s; display:flex; align-items:center; gap:.4rem; }
.top-bar-contacts a:hover { color:var(--gold); }
.top-bar-email-2 { display:none; }
.top-bar-whatsapp { display:flex; align-items:center; gap:.4rem; color:rgba(255,255,255,.9); font-weight:600; transition:color .2s; }
.top-bar-whatsapp:hover { color:#25d366; }
.top-bar-whatsapp i { color:#25d366; }
/* Keep the green contact strip visible on scroll across all pages */
.top-bar,
.top-contact-bar {
position:sticky;
top:0;
z-index:1300;
}
/* 7. Navigation */
.site-nav { position:sticky; top:var(--top-strip-height); z-index:1200; background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-bottom:1px solid rgba(26,42,38,.08); transition:all .3s ease; }
.site-nav.scrolled { box-shadow:var(--shadow-sm); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:.9rem 2rem; max-width:1200px; margin:0 auto; gap:1rem; }
.nav-brand { display:flex; align-items:center; gap:.7rem; color:var(--forest); font-weight:800; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; }
.nav-brand img { height:46px; width:auto; }
.nav-links { display:flex; align-items:center; gap:.2rem; }
.nav-link { padding:.6rem 1rem; color:var(--text-mid); font-size:.92rem; font-weight:600; border-radius:8px; transition:var(--transition); }
.nav-link:hover, .nav-link.active { background:var(--cream-dark); color:var(--green); }
.nav-cta { display:inline-flex; align-items:center; padding:.65rem 1.5rem; background:linear-gradient(135deg,var(--green),#1f6b45); color:var(--white); border-radius:50px; font-size:.88rem; font-weight:700; margin-left:.5rem; transition:var(--transition); box-shadow:0 4px 14px rgba(45,122,74,.25); }
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(45,122,74,.35); }
.nav-toggle { display:none; flex-direction:column; gap:5px; padding:8px; background:transparent; border:none; cursor:pointer; border-radius:8px; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--forest); border-radius:2px; transition:var(--transition); }
.nav-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.active span:nth-child(2) { opacity:0; }
.nav-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
/* 8. Hero Video Background - Premium Edition */
.hero-video { position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:flex-start; overflow:hidden; }
.hero-video-bg { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0; animation:zoomSlow 20s ease-in-out infinite; }
.hero-video-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(90deg,rgba(13,27,17,.5) 0%,rgba(13,27,17,.3) 35%,rgba(13,27,17,.15) 65%,rgba(13,27,17,0) 100%); z-index:1; }
.hero-video::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(ellipse at 20% 50%,rgba(45,122,74,.1) 0%,transparent 50%); z-index:1; pointer-events:none; }
.hero-video-content { position:relative; z-index:2; width:100%; padding:5rem 4rem; max-width:720px; animation:fadeInUp 1s ease-out; }
.hero-left-inner { max-width:600px; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.75rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem; animation:fadeInUp 1s ease-out 0.1s both; }
.hero-eyebrow i { color:var(--green-light); animation:float 3s ease-in-out infinite; }
.hero-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2.4rem,5vw,3.8rem); font-weight:800; color:var(--white); line-height:1.1; margin-bottom:1.5rem; animation:fadeInUp 1s ease-out 0.2s both; text-shadow:2px 8px 16px rgba(0,0,0,.4); letter-spacing:-0.02em; }
.hero-title em { font-style:italic; color:var(--gold); text-shadow:2px 8px 16px rgba(212,165,116,.3); }
.hero-desc { font-size:1.05rem; color:rgba(255,255,255,.88); line-height:1.85; margin-bottom:2.2rem; animation:fadeInUp 1s ease-out 0.3s both; text-shadow:1px 4px 8px rgba(0,0,0,.3); letter-spacing:.3px; }
.hero-trust-list { margin-bottom:3rem; display:flex; flex-direction:column; gap:.9rem; }
.hero-trust-list li { display:flex; align-items:center; gap:.8rem; color:rgba(255,255,255,.92); font-size:.98rem; font-weight:600; animation:fadeInUp 1s ease-out both; text-shadow:1px 3px 6px rgba(0,0,0,.2); }
.hero-trust-list li:nth-child(1) { animation-delay:0.4s; }
.hero-trust-list li:nth-child(2) { animation-delay:0.5s; }
.hero-trust-list li:nth-child(3) { animation-delay:0.6s; }
.hero-trust-list li:nth-child(4) { animation-delay:0.7s; }
.hero-trust-list i { color:var(--gold); font-size:1.1rem; flex-shrink:0; }
.hero-cta-group { display:flex; gap:1.2rem; flex-wrap:wrap; animation:fadeInUp 1s ease-out 0.8s both; }
.hero-cta-group .btn-primary { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--gold),#c9925f); box-shadow:0 8px 24px rgba(212,165,116,.25); transition:all 0.35s cubic-bezier(.34,.69,.46,.95); }
.hero-cta-group .btn-primary::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); transition:left 0.5s ease; }
.hero-cta-group .btn-primary:hover { transform:translateY(-3px); box-shadow:0 16px 36px rgba(212,165,116,.4); }
.hero-cta-group .btn-primary:hover::before { left:100%; }
.hero-cta-group .btn-outline-light { position:relative; border:2px solid rgba(255,255,255,.5); background:rgba(255,255,255,.08); color:var(--white); font-weight:600; transition:all 0.35s cubic-bezier(.34,.69,.46,.95); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.hero-cta-group .btn-outline-light::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,.1); border-radius:var(--radius); opacity:0; transition:opacity 0.35s ease; }
.hero-cta-group .btn-outline-light:hover { border-color:rgba(255,255,255,.8); background:rgba(255,255,255,.15); box-shadow:0 8px 24px rgba(255,255,255,.1); transform:translateY(-3px); }
.hero-cta-group .btn-outline-light:hover::before { opacity:1; }
/* Hero Scroll Indicator */
.hero-scroll-indicator { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2; animation:fadeInUp 1.2s ease-out 1s both; }
.scroll-mouse { width:26px; height:40px; border:2px solid rgba(255,255,255,.4); border-radius:13px; display:flex; align-items:flex-start; justify-content:center; padding-top:8px; animation:pulse 2s ease-in-out infinite; }
.scroll-mouse::before { content:''; width:3px; height:8px; background:rgba(255,255,255,.6); border-radius:2px; animation:scroll 2s ease-in-out infinite; }
/* 8b. Hero Split (Legacy - kept for compatibility) */
@keyframes zoomSlow { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.02); } }
@keyframes scroll { 0% { transform:translateY(-4px); opacity:1; } 50% { opacity:0.5; } 100% { transform:translateY(4px); opacity:0; } }
@keyframes pulse { 0%, 100% { opacity:1; } 50% { opacity:0.5; } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
/* 9. Stats Bar */
.stats-bar { background:linear-gradient(135deg,var(--forest),var(--forest-mid)); padding:3rem 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.stat-item { display:flex; align-items:center; gap:1.2rem; padding:1.5rem; background:rgba(255,255,255,.06); border-radius:var(--radius); border:1px solid rgba(255,255,255,.08); transition:var(--transition); }
.stat-item:hover { background:rgba(255,255,255,.1); transform:translateY(-2px); }
.stat-icon { width:52px; height:52px; background:rgba(45,122,74,.3); border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-icon i { font-size:1.4rem; color:var(--gold); }
.stat-content { display:flex; flex-direction:column; }
.stat-num { font-size:2rem; font-weight:800; color:var(--white); line-height:1; }
.stat-sfx { font-size:1.4rem; font-weight:800; color:var(--gold); }
.stat-label { font-size:.78rem; font-weight:600; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.06em; margin-top:.2rem; }
/* 10. About Section */
.about-section { padding:6rem 0; background:var(--white); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-img-col { position:relative; }
.about-img-wrap { position:relative; border-radius:var(--radius-lg); overflow:hidden; }
.about-img-wrap img { width:100%; height:520px; object-fit:cover; border-radius:var(--radius-lg); }
.about-img-shape { position:absolute; top:-20px; left:-20px; width:200px; height:200px; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); border-radius:50% 50% 50% 0; z-index:-1; opacity:.4; }
.about-img-badge { position:absolute; bottom:24px; left:24px; background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-radius:14px; padding:1rem 1.4rem; display:flex; align-items:center; gap:.8rem; box-shadow:var(--shadow); }
.about-img-badge i { font-size:1.8rem; color:var(--gold); }
.about-img-badge span { font-size:.9rem; font-weight:700; color:var(--forest); }
.about-text-col p { color:var(--text-mid); margin-bottom:1.2rem; font-size:1.02rem; line-height:1.8; }
.about-values-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:2rem 0; }
.about-value-card { display:flex; align-items:flex-start; gap:1rem; padding:1.2rem; background:var(--cream); border-radius:var(--radius); border:1px solid var(--border); transition:var(--transition); }
.about-value-card:hover { border-color:var(--green); transform:translateY(-2px); }
.about-value-card > i { font-size:1.5rem; color:var(--green); flex-shrink:0; margin-top:.2rem; }
.about-value-card h4 { font-size:.9rem; font-weight:700; color:var(--forest); margin-bottom:.3rem; }
.about-value-card p { font-size:.85rem; color:var(--muted); margin:0; }
/* 11. Why Choose Section */
.why-section { padding:6rem 0; background:var(--cream); }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.why-card { background:var(--white); border-radius:var(--radius); padding:2rem 1.5rem; text-align:center; border:1px solid var(--border); transition:var(--transition); position:relative; overflow:hidden; }
.why-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--green),var(--gold)); transform:scaleX(0); transition:transform .35s ease; }
.why-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(45,122,74,.2); }
.why-card:hover::before { transform:scaleX(1); }
.why-icon { width:64px; height:64px; background:linear-gradient(135deg,rgba(45,122,74,.12),rgba(45,122,74,.06)); border-radius:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem; transition:var(--transition); }
.why-card:hover .why-icon { background:linear-gradient(135deg,var(--green),var(--green-light)); }
.why-icon i { font-size:1.6rem; color:var(--green); transition:color .3s; }
.why-card:hover .why-icon i { color:var(--white); }
.why-card h3 { font-size:1rem; font-weight:700; color:var(--forest); margin-bottom:.6rem; }
.why-card p { font-size:.9rem; color:var(--muted); line-height:1.7; margin:0; }
/* 12. Featured Packages Section */
.featured-packages-section { padding:8rem 0; background:linear-gradient(135deg,#faf9f6 0%,#f5f2ed 50%,#faf9f6 100%); position:relative; overflow:hidden; }
.featured-packages-section::before { content:''; position:absolute; top:-50%; right:-10%; width:500px; height:500px; background:radial-gradient(circle,rgba(212,165,116,.08) 0%,transparent 70%); border-radius:50%; pointer-events:none; }
.featured-header { margin-bottom:4.5rem; text-align:center; }
.featured-header-text { max-width:780px; margin:0 auto; }
.featured-title { background:linear-gradient(135deg,var(--forest) 0%,var(--green) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-size:clamp(2.2rem,4vw,3.6rem); margin-bottom:1.2rem; letter-spacing:-0.02em; }
.featured-subtitle { font-size:1.1rem; color:var(--text-mid); line-height:1.8; margin:0; }
.featured-packages-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-bottom:3.5rem; }
.packages-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.pkg-filters { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:3rem; }
.filter-btn { padding:.65rem 1.5rem; background:transparent; color:var(--text-mid); border:2px solid var(--border); border-radius:50px; font-size:.88rem; font-weight:600; cursor:pointer; transition:var(--transition); }
.filter-btn:hover { border-color:var(--green); color:var(--green); }
.filter-btn.active { background:var(--green); color:var(--white); border-color:var(--green); box-shadow:0 4px 16px rgba(45,122,74,.25); }
.pkg-card { background:var(--white); border-radius:var(--radius-lg); border:1px solid var(--border); overflow:hidden; transition:var(--transition); display:flex; flex-direction:column; }
.pkg-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:rgba(45,122,74,.2); }
.pkg-card.pkg-featured { border-color:var(--gold); box-shadow:0 4px 20px rgba(212,165,116,.2); }
.pkg-card.pkg-featured::before { content:''; display:block; height:3px; background:linear-gradient(90deg,var(--gold),var(--gold-dark)); }
.pkg-img-wrap { position:relative; overflow:hidden; height:220px; }
.pkg-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.pkg-card:hover .pkg-img-wrap img { transform:scale(1.08); }
.pkg-badge { position:absolute; top:14px; left:14px; padding:.35rem .9rem; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:50px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.pkg-badge { background:rgba(13,27,17,.7); color:var(--white); }
.pkg-badge-gold { background:rgba(212,165,116,.9); color:var(--forest); }
.pkg-badge-green { background:rgba(45,122,74,.85); color:var(--white); }
.pkg-badge-blue { background:rgba(30,80,160,.8); color:var(--white); }
.pkg-body { padding:1.6rem; display:flex; flex-direction:column; flex:1; }
.pkg-meta { display:flex; gap:1rem; margin-bottom:.8rem; }
.pkg-meta span { font-size:.8rem; color:var(--muted); display:flex; align-items:center; gap:.35rem; font-weight:600; }
.pkg-meta i { color:var(--green); }
.pkg-body h3 { font-size:1.05rem; font-weight:800; color:var(--forest); margin-bottom:.7rem; line-height:1.3; }
.pkg-body p { font-size:.9rem; color:var(--text-mid); line-height:1.7; margin-bottom:1rem; }
.pkg-features { margin-bottom:1.2rem; display:flex; flex-direction:column; gap:.35rem; }
.pkg-features li { font-size:.82rem; color:var(--text-mid); display:flex; align-items:center; gap:.5rem; }
.pkg-features i { color:var(--green); font-size:.7rem; }
.pkg-footer { margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding-top:1.2rem; border-top:1px solid var(--border); flex-wrap:wrap; gap:.8rem; }
.pkg-price { display:flex; flex-direction:column; }
.price-from { font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.price-amount { font-size:1.5rem; font-weight:800; color:var(--forest); line-height:1; }
.price-per { font-size:.72rem; color:var(--muted); font-weight:500; }
.pkg-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.packages-cta { text-align:center; margin-top:3rem; }
.featured-packages-cta { text-align:center; }
.featured-packages-cta .btn-primary { background:linear-gradient(135deg,var(--green),var(--green-light)); box-shadow:0 12px 32px rgba(45,122,74,.25); position:relative; overflow:hidden; transition:all 0.35s cubic-bezier(.34,.69,.46,.95); }
.featured-packages-cta .btn-primary::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); opacity:0; transition:opacity 0.35s ease; }
.featured-packages-cta .btn-primary:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(45,122,74,.35); }
.featured-packages-cta .btn-primary:hover::after { opacity:1; }
/* 13. Booking Process */
.process-section { padding:6rem 0; background:linear-gradient(135deg,var(--forest) 0%,#1a3a28 100%); position:relative; overflow:hidden; }
.process-section::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:url('data:image/svg+xml,') repeat; }
.process-section .section-header-center { position:relative; z-index:1; }
.process-section .section-eyebrow { background:rgba(212,165,116,.15); color:var(--gold); }
.process-section .section-title { color:var(--white); }
.process-timeline { display:flex; align-items:flex-start; justify-content:center; gap:0; position:relative; z-index:1; flex-wrap:wrap; }
.process-step { text-align:center; flex:1; min-width:160px; max-width:200px; padding:1.5rem 1rem; }
.process-step-icon { width:72px; height:72px; background:rgba(255,255,255,.1); border:2px solid rgba(212,165,116,.4); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; transition:var(--transition); }
.process-step:hover .process-step-icon { background:var(--gold); border-color:var(--gold); }
.process-step-icon i { font-size:1.6rem; color:var(--gold); transition:color .3s; }
.process-step:hover .process-step-icon i { color:var(--forest); }
.process-step-num { font-size:.7rem; font-weight:800; letter-spacing:.12em; color:var(--gold); text-transform:uppercase; margin-bottom:.6rem; }
.process-step h3 { font-size:.95rem; font-weight:700; color:var(--white); margin-bottom:.5rem; }
.process-step p { font-size:.82rem; color:rgba(255,255,255,.65); line-height:1.6; }
.process-connector { flex:none; width:40px; display:flex; align-items:center; justify-content:center; padding-top:36px; }
.process-connector span { display:block; width:100%; height:2px; background:linear-gradient(90deg,rgba(212,165,116,.3),rgba(212,165,116,.6)); }
.process-cta { display:flex; justify-content:center; gap:1rem; margin-top:3rem; flex-wrap:wrap; position:relative; z-index:1; }
/* 14. Gallery Section */
.gallery-section { padding:5rem 0 6rem; background:var(--forest); }
.gallery-section .section-header-center .section-eyebrow { background:rgba(212,165,116,.15); color:var(--gold); }
.gallery-section .section-header-center .section-title { color:var(--white); }
.gallery-section .section-header-center .section-sub { color:rgba(255,255,255,.6); }
/* Category filter tabs */
.gallery-filters { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.5rem; }
.gallery-filter-btn { padding:.5rem 1.3rem; background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.15); border-radius:50px; font-size:.82rem; font-weight:600; cursor:pointer; transition:var(--transition); letter-spacing:.03em; }
.gallery-filter-btn:hover { background:rgba(255,255,255,.15); color:var(--white); }
.gallery-filter-btn.active { background:var(--gold); color:var(--forest); border-color:var(--gold); }
/* CSS Grid gallery */
.gallery-masonry {
display:grid;
grid-template-columns:repeat(4,1fr);
grid-auto-rows:220px;
gap:6px;
}
.gal-item {
overflow:hidden;
border-radius:8px;
position:relative;
cursor:pointer;
background:rgba(255,255,255,.04);
}
.gal-item.gal-tall { grid-row:span 2; }
.gal-item.gal-wide { grid-column:span 2; }
.gal-item.gal-featured { grid-column:span 2; grid-row:span 2; }
.gal-item img {
width:100%; height:100%;
object-fit:cover; display:block;
transition:transform .65s cubic-bezier(.25,.46,.45,.94);
}
.gal-item:hover img { transform:scale(1.08); }
/* Overlay */
.gal-overlay {
position:absolute; inset:0;
background:linear-gradient(to top, rgba(13,27,17,.82) 0%, rgba(13,27,17,.2) 50%, transparent 100%);
display:flex; flex-direction:column; justify-content:flex-end;
padding:1.2rem 1rem .9rem;
opacity:0;
transition:opacity .35s ease;
}
.gal-item:hover .gal-overlay { opacity:1; }
.gal-overlay span { color:var(--white); font-weight:700; font-size:.84rem; line-height:1.3; text-shadow:0 1px 4px rgba(0,0,0,.4); }
.gal-overlay i { color:var(--gold); font-size:.9rem; margin-top:.3rem; align-self:flex-end; }
/* Responsive grid */
@media (max-width:1100px) {
.gallery-masonry { grid-template-columns:repeat(3,1fr); grid-auto-rows:200px; }
}
@media (max-width:768px) {
.gallery-section { padding:4rem 0; }
.gallery-masonry { grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; gap:4px; }
.gal-item.gal-featured { grid-column:span 2; grid-row:span 1; }
}
@media (max-width:480px) {
.gallery-masonry { grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; gap:3px; }
.gal-item.gal-wide { grid-column:span 2; }
.gallery-filter-btn { font-size:.75rem; padding:.45rem 1rem; }
}
/* 15. Testimonials */
.testimonials-section { padding:6rem 0; background:var(--forest); }
.testimonials-section .section-eyebrow { background:rgba(212,165,116,.15); color:var(--gold); }
.testimonials-section .section-title { color:var(--white); }
.testimonials-wrap { max-width:760px; margin:0 auto; }
.testimonials-track { overflow:hidden; }
.testi-slide { display:none; }
.testi-slide.active { display:block; animation:fadeInUp .4s ease; }
.testi-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); padding:2.5rem; text-align:center; }
.testi-stars { margin-bottom:1.2rem; }
.testi-stars i { color:var(--gold); font-size:1.1rem; margin:0 .1rem; }
.testi-quote { font-size:1.1rem; color:rgba(255,255,255,.9); line-height:1.8; font-style:italic; font-family:'Cormorant Garamond',serif; font-weight:500; margin-bottom:1.8rem; }
.testi-author { display:flex; align-items:center; justify-content:center; gap:1rem; }
.testi-avatar { width:48px; height:48px; background:linear-gradient(135deg,var(--green),var(--gold)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--white); font-size:.9rem; flex-shrink:0; }
.testi-author h4 { font-size:.95rem; font-weight:700; color:var(--white); margin-bottom:.2rem; }
.testi-author span { font-size:.8rem; color:rgba(255,255,255,.55); }
.testi-controls { display:flex; align-items:center; justify-content:center; gap:1.5rem; margin-top:2rem; }
.testi-btn { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.2); color:var(--white); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--transition); font-size:.9rem; }
.testi-btn:hover { background:var(--green); border-color:var(--green); }
.testi-dots { display:flex; gap:.5rem; }
.testi-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25); cursor:pointer; transition:var(--transition); border:none; padding:0; }
.testi-dot.active { background:var(--gold); transform:scale(1.2); }
/* 16. FAQ Section */
.faq-section { padding:6rem 0; background:var(--white); }
.faq-inner { max-width:860px; margin:0 auto; }
.faq-list { display:flex; flex-direction:column; gap:.8rem; }
.faq-item { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:var(--transition); }
.faq-item.open { border-color:var(--green); box-shadow:0 4px 20px rgba(45,122,74,.1); }
.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; padding:1.3rem 1.6rem; background:transparent; border:none; cursor:pointer; text-align:left; gap:1rem; transition:background .2s; }
.faq-q:hover { background:var(--cream); }
.faq-item.open .faq-q { background:var(--cream); }
.faq-q span { font-size:1rem; font-weight:700; color:var(--forest); }
.faq-icon { font-size:.9rem; color:var(--green); flex-shrink:0; transition:transform .3s ease; }
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease, padding .3s ease; }
.faq-a p { padding:0 1.6rem 1.4rem; color:var(--text-mid); font-size:.95rem; line-height:1.8; }
.faq-item.open .faq-a { max-height:300px; }
/* 17. Contact Section */
.contact-section { padding:6rem 0; background:var(--cream); }
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:3rem; align-items:start; }
.contact-info-col { display:flex; flex-direction:column; gap:1rem; }
.contact-card { background:var(--white); border-radius:var(--radius); padding:1.2rem 1.4rem; display:flex; align-items:flex-start; gap:1rem; border:1px solid var(--border); transition:var(--transition); }
.contact-card:hover { border-color:var(--green); transform:translateX(4px); }
.contact-icon { width:44px; height:44px; background:linear-gradient(135deg,rgba(45,122,74,.12),rgba(45,122,74,.06)); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-icon i { color:var(--green); font-size:1.1rem; }
.contact-card h4 { font-size:.82rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.3rem; }
.contact-card a { display:block; color:var(--text); font-size:.92rem; transition:color .2s; }
.contact-card a:hover { color:var(--green); }
.contact-card p { color:var(--text-mid); font-size:.92rem; }
.contact-payment-card { flex-direction:column; }
.contact-payment-card .contact-icon { margin-bottom:.3rem; }
.payment-details-grid { display:grid; grid-template-columns:auto 1fr; gap:.3rem .8rem; font-size:.88rem; margin:.6rem 0 .8rem; }
.payment-details-grid span { color:var(--muted); font-weight:600; }
.payment-details-grid strong { color:var(--forest); }
.copy-paybill-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; background:var(--cream); color:var(--green); border:2px solid var(--green); border-radius:50px; font-size:.8rem; font-weight:700; cursor:pointer; transition:var(--transition); width:fit-content; }
.copy-paybill-btn:hover { background:var(--green); color:var(--white); }
.contact-form-col { background:var(--white); border-radius:var(--radius-lg); padding:2.5rem; border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.contact-form h3 { font-size:1.4rem; color:var(--forest); margin-bottom:1.5rem; }
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; font-size:.82rem; font-weight:700; color:var(--text-mid); margin-bottom:.4rem; letter-spacing:.02em; }
.form-group input,
.form-group textarea,
.form-group select { width:100%; padding:.85rem 1.1rem; border:2px solid var(--border); border-radius:10px; font-size:.92rem; color:var(--text); background:var(--cream); transition:var(--transition); appearance:none; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { outline:none; border-color:var(--green); background:var(--white); box-shadow:0 0 0 3px rgba(45,122,74,.12); }
.form-group textarea { resize:vertical; min-height:120px; }
/* 18. WhatsApp FAB */
.whatsapp-fab { position:fixed; bottom:28px; right:28px; z-index:999; display:flex; align-items:center; gap:.6rem; padding:.8rem 1.4rem .8rem 1rem; background:linear-gradient(135deg,#25d366,#128c7e); color:var(--white); border-radius:50px; font-weight:700; font-size:.9rem; box-shadow:0 6px 24px rgba(37,211,102,.4); transition:var(--transition); }
.whatsapp-fab i { font-size:1.5rem; }
.whatsapp-fab:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(37,211,102,.5); }
.fab-label { display:inline-block; }
/* 19. Footer */
.site-footer { background:var(--forest); padding:5rem 0 0; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.4fr; gap:3rem; padding-bottom:4rem; }
.footer-brand { display:flex; align-items:center; gap:.7rem; color:var(--white); font-weight:800; font-size:.88rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1.2rem; }
.footer-brand img { width:220px; height:auto; max-width:100%; object-fit:contain; }
.footer-brand-col p { font-size:.88rem; color:rgba(255,255,255,.55); line-height:1.8; margin-bottom:1.5rem; }
.footer-social { display:flex; gap:.6rem; }
.footer-social a { width:38px; height:38px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:10px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); transition:var(--transition); font-size:.9rem; }
.footer-social a:hover { background:var(--green); border-color:var(--green); color:var(--white); transform:translateY(-2px); }
.footer-col h4 { font-size:.82rem; font-weight:800; color:var(--white); text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.2rem; }
.footer-links { display:flex; flex-direction:column; gap:.55rem; }
.footer-links a { font-size:.88rem; color:rgba(255,255,255,.6); transition:color .2s; }
.footer-links a:hover { color:var(--gold); padding-left:4px; }
.footer-contact { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.5rem; }
.footer-contact li { display:flex; align-items:flex-start; gap:.7rem; }
.footer-contact i { color:var(--gold); font-size:.88rem; flex-shrink:0; margin-top:.2rem; }
.footer-contact a, .footer-contact span { font-size:.85rem; color:rgba(255,255,255,.6); transition:color .2s; }
.footer-contact a:hover { color:var(--gold); }
.footer-newsletter h5 { font-size:.8rem; font-weight:700; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.8rem; }
.newsletter-form { display:flex; gap:.5rem; }
.newsletter-form input { flex:1; padding:.7rem 1rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:8px; color:var(--white); font-size:.85rem; }
.newsletter-form input::placeholder { color:rgba(255,255,255,.4); }
.newsletter-form input:focus { outline:none; border-color:var(--green); }
.newsletter-form button { padding:.7rem 1.2rem; background:var(--green); color:var(--white); border:none; border-radius:8px; font-size:.82rem; font-weight:700; cursor:pointer; transition:var(--transition); white-space:nowrap; }
.newsletter-form button:hover { background:var(--green-light); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:1.5rem 0; }
.footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.footer-bottom p { font-size:.82rem; color:rgba(255,255,255,.4); }
.footer-legal { display:flex; gap:1.5rem; }
.footer-legal a { font-size:.82rem; color:rgba(255,255,255,.4); transition:color .2s; }
.footer-legal a:hover { color:var(--gold); }
/* 20. Lightbox */
.lightbox { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.lightbox.active { display:flex; }
.lb-content { max-width:90vw; max-height:90vh; position:relative; text-align:center; }
.lb-content img { max-width:100%; max-height:80vh; object-fit:contain; border-radius:12px; }
.lb-content p { color:rgba(255,255,255,.7); margin-top:.8rem; font-size:.9rem; }
.lb-close, .lb-prev, .lb-next { background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.2); color:var(--white); cursor:pointer; border-radius:50%; width:48px; height:48px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; transition:var(--transition); position:absolute; }
.lb-close { top:20px; right:20px; }
.lb-prev { left:20px; top:50%; transform:translateY(-50%); }
.lb-next { right:20px; top:50%; transform:translateY(-50%); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background:var(--green); border-color:var(--green); }
/* 21. Inner page hero (used by about, package pages, etc.) */
.inner-hero { background:linear-gradient(135deg,var(--forest),var(--forest-mid)); padding:5rem 0 4rem; text-align:center; }
.inner-eyebrow { display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.inner-hero h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(1.8rem,4vw,3rem); color:var(--white); margin-bottom:1rem; max-width:700px; margin-left:auto; margin-right:auto; }
.inner-hero p { color:rgba(255,255,255,.75); max-width:600px; margin:0 auto; font-size:1rem; }
/* 22. Shared legacy classes (for package pages, destinations etc.) */
.top-contact-bar { background:linear-gradient(135deg,var(--forest),var(--forest-mid)); color:var(--white); font-size:.85rem; padding:.6rem 0; }
.top-contact-bar-inner { display:flex; justify-content:flex-end; gap:1.5rem; align-items:center; flex-wrap:wrap; }
.top-contact-bar a { color:rgba(255,255,255,.9); text-decoration:none; display:flex; align-items:center; gap:.4rem; transition:color .2s; }
.top-contact-bar a:hover { color:var(--gold); }
.site-nav-inner { max-width:1200px; margin:0 auto; padding:.9rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.site-nav-brand { display:flex; align-items:center; gap:.7rem; color:var(--forest); font-weight:800; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; }
.site-nav-brand img { height:46px; width:auto; }
.site-nav-links { display:flex; align-items:center; gap:.2rem; }
.site-nav-link { padding:.6rem 1rem; color:var(--text-mid); font-size:.92rem; font-weight:600; border-radius:8px; transition:var(--transition); }
.site-nav-link:hover, .site-nav-link.active { background:var(--cream-dark); color:var(--green); }
.site-nav-cta { display:inline-flex; align-items:center; padding:.65rem 1.5rem; background:linear-gradient(135deg,var(--green),#1f6b45); color:var(--white); border-radius:50px; font-size:.88rem; font-weight:700; margin-left:.5rem; transition:var(--transition); }
.site-nav-cta:hover { transform:translateY(-1px); }
.site-nav-toggle { display:none; flex-direction:column; gap:5px; padding:8px; background:transparent; border:none; cursor:pointer; border-radius:8px; }
.site-nav-toggle span { display:block; width:22px; height:2px; background:var(--forest); border-radius:2px; transition:var(--transition); }
.cta-button { display:inline-flex; align-items:center; gap:.5rem; padding:1rem 2.2rem; background:linear-gradient(135deg,var(--green),#1f6b45); color:var(--white); border-radius:50px; font-size:.95rem; font-weight:700; transition:var(--transition); box-shadow:0 8px 24px rgba(45,122,74,.3); }
.cta-button:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(45,122,74,.4); }
.cta-button-secondary { background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.5); box-shadow:0 8px 24px rgba(0,0,0,.1); }
.cta-button-secondary:hover { background:rgba(255,255,255,.22); }
.book-btn { display:inline-flex; align-items:center; justify-content:center; padding:.75rem 1.6rem; background:linear-gradient(135deg,var(--green),#1f6b45); color:var(--white); border-radius:50px; font-size:.88rem; font-weight:700; border:none; cursor:pointer; transition:var(--transition); box-shadow:0 6px 18px rgba(45,122,74,.25); }
.book-btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(45,122,74,.35); }
.book-btn-secondary { background:transparent; border:2px solid var(--green); color:var(--green); box-shadow:none; }
.book-btn-secondary:hover { background:var(--green); color:var(--white); }
.submit-btn { display:inline-flex; align-items:center; padding:1rem 2rem; background:linear-gradient(135deg,var(--green),#1f6b45); color:var(--white); border:none; border-radius:50px; font-size:.95rem; font-weight:700; cursor:pointer; transition:var(--transition); }
.submit-btn:hover { transform:translateY(-2px); }
.whatsapp-float { position:fixed; bottom:28px; right:28px; z-index:999; display:flex; align-items:center; gap:.6rem; padding:.8rem 1.4rem .8rem 1rem; background:linear-gradient(135deg,#25d366,#128c7e); color:var(--white); border-radius:50px; font-weight:700; font-size:.9rem; box-shadow:0 6px 24px rgba(37,211,102,.4); }
.whatsapp-float:hover { transform:translateY(-4px); }
.sticky-book-now { position:fixed; bottom:28px; left:28px; z-index:999; padding:.8rem 1.6rem; background:var(--green); color:var(--white); border-radius:50px; font-weight:700; font-size:.88rem; box-shadow:0 6px 20px rgba(45,122,74,.35); transition:var(--transition); }
.sticky-book-now:hover { transform:translateY(-2px); }
.package-features { padding:.8rem 1.4rem; background:rgba(45,122,74,.05); margin:0 1rem .8rem; border-radius:10px; }
.package-features li { font-size:.82rem; color:var(--text-mid); padding:.3rem 0; border-bottom:1px solid rgba(45,122,74,.08); display:flex; align-items:flex-start; gap:.5rem; }
.package-features li:last-child { border-bottom:none; }
.package-features li::before { content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; color:var(--green); font-size:.65rem; flex-shrink:0; margin-top:.3rem; }
.package-addons-title { padding:0 1.4rem .4rem; font-size:.8rem; color:var(--muted); }
.package-addons { padding:0 1.4rem 1rem; }
.package-addons li { font-size:.82rem; color:var(--text-mid); padding:.3rem 0 .3rem 1rem; border-left:3px solid var(--gold); margin-bottom:.3rem; }
.package-addons li::before { content:'\2b'; font-family:'Font Awesome 6 Free'; font-weight:900; color:var(--gold); margin-right:.4rem; font-size:.65rem; }
.package-note { font-size:.8rem; color:var(--muted); padding:0 1.4rem .6rem; font-style:italic; }
.safari-card .book-btn, .safari-card .book-btn-secondary { margin:0 1.4rem 1.4rem; display:flex; justify-content:center; }
.trust-strip { background:linear-gradient(135deg,var(--forest),var(--forest-mid)); padding:3rem 0; }
.trust-strip-inner { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center; }
.trust-strip-inner h3 { font-size:1.2rem; color:var(--white); margin-bottom:.4rem; }
.trust-strip-inner p { font-size:.88rem; color:rgba(255,255,255,.65); }
.experience-types { padding:5rem 0; background:var(--cream); }
.experience-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.experience-card { background:var(--white); border-radius:var(--radius); padding:2rem; border:1px solid var(--border); transition:var(--transition); }
.experience-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.experience-tag { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green); display:block; margin-bottom:.7rem; }
.experience-card h3 { font-size:1.1rem; color:var(--forest); margin-bottom:.8rem; }
.experience-card p { font-size:.9rem; color:var(--muted); margin-bottom:1.2rem; line-height:1.7; }
.about { padding:6rem 0; background:var(--white); }
.about-content { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.about-text p { color:var(--text-mid); margin-bottom:1rem; }
.about-features { margin-top:1.2rem; display:flex; flex-direction:column; gap:.6rem; }
.about-features li { display:flex; align-items:center; gap:.7rem; font-size:.9rem; color:var(--text-mid); }
.about-features i { color:var(--green); }
.about-image-illustration { width:100%; height:360px; object-fit:cover; border-radius:var(--radius); }
.gallery { padding:6rem 0; background:var(--cream); }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.gallery-item { position:relative; overflow:hidden; border-radius:var(--radius); cursor:pointer; }
.gallery-image { width:100%; height:220px; object-fit:cover; transition:transform .5s ease; }
.gallery-item:hover .gallery-image { transform:scale(1.08); }
.gallery-item p { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top,rgba(13,27,17,.8),transparent); color:var(--white); padding:1rem .8rem .7rem; font-size:.82rem; font-weight:600; }
.testimonials { padding:6rem 0; background:var(--forest); }
.testimonials .section-title { color:var(--white); text-align:center; }
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.testimonial-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:2rem; text-align:center; }
.stars { font-size:1.1rem; margin-bottom:1rem; }
.testimonial-text { font-style:italic; color:rgba(255,255,255,.85); line-height:1.7; margin-bottom:1rem; font-size:.95rem; }
.testimonial-author { font-size:.85rem; color:var(--gold); font-weight:700; }
.journey-steps { padding:5rem 0; background:var(--cream); }
.journey-steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center; margin-bottom:2.5rem; }
.journey-steps-grid article { padding:2rem; background:var(--white); border-radius:var(--radius); border:1px solid var(--border); }
.journey-steps-grid span { display:inline-block; font-size:2rem; font-weight:800; color:var(--green); margin-bottom:.8rem; }
.journey-steps-grid h3 { font-size:1rem; color:var(--forest); margin-bottom:.5rem; }
.journey-steps-grid p { font-size:.88rem; color:var(--muted); }
.journey-steps-cta { text-align:center; }
.contact { padding:6rem 0; background:var(--white); }
.contact-content { display:grid; grid-template-columns:1fr 1.4fr; gap:3rem; align-items:start; }
.contact-info { display:flex; flex-direction:column; gap:1.2rem; }
.info-item { display:flex; align-items:flex-start; gap:1rem; padding:1.2rem; background:var(--cream); border-radius:var(--radius); border:1px solid var(--border); }
.info-item i { font-size:1.2rem; color:var(--green); flex-shrink:0; margin-top:.2rem; }
.info-item h4 { font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:.3rem; }
.info-item p { font-size:.9rem; color:var(--text-mid); }
.contact-form { background:var(--cream); border-radius:var(--radius-lg); padding:2.5rem; border:1px solid var(--border); }
.package-keyword-strip { margin-top:2.5rem; text-align:center; }
.package-keyword-strip p { font-size:.82rem; color:var(--muted); margin-bottom:1.2rem; }
.footer { background:var(--forest); padding:4rem 0 0; }
.footer-content { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem; padding-bottom:3rem; }
.footer-section h4 { font-size:.82rem; font-weight:800; color:var(--white); text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; }
.footer-section p { font-size:.85rem; color:rgba(255,255,255,.55); line-height:1.7; margin-bottom:1rem; }
.footer-section ul { display:flex; flex-direction:column; gap:.5rem; }
.footer-section ul a { font-size:.85rem; color:rgba(255,255,255,.6); transition:color .2s; }
.footer-section ul a:hover { color:var(--gold); }
.social-links { display:flex; gap:.6rem; margin-top:.8rem; }
.social-links a { width:36px; height:36px; background:rgba(255,255,255,.08); border-radius:8px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); transition:var(--transition); font-size:.9rem; }
.social-links a:hover { background:var(--green); color:var(--white); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:1.5rem 0; text-align:center; }
.footer-bottom p { font-size:.82rem; color:rgba(255,255,255,.4); }
.footer-bottom a { color:rgba(255,255,255,.5); transition:color .2s; }
.footer-bottom a:hover { color:var(--gold); }
.story-section { padding:5rem 0; background:var(--white); }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.story-grid h2 { font-family:'Cormorant Garamond',serif; font-size:1.7rem; color:var(--forest); margin-bottom:1rem; }
.story-grid p { color:var(--text-mid); margin-bottom:.8rem; font-size:.95rem; }
.simple-list { padding-left:1.2rem; }
.simple-list li { color:var(--text-mid); font-size:.95rem; padding:.3rem 0; list-style:disc; }
.guides-section { padding:5rem 0; background:var(--cream); }
.guides-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.guide-card { background:var(--white); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); text-align:center; transition:var(--transition); }
.guide-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.guide-card img { width:100%; height:220px; object-fit:cover; }
.guide-card h3 { font-size:1rem; color:var(--forest); padding:.8rem 1rem .2rem; }
.guide-card p { font-size:.85rem; color:var(--muted); padding:0 1rem .8rem; }
.cta-band { background:linear-gradient(135deg,var(--green),#1f6b45); padding:4rem 0; }
.cta-band-inner { text-align:center; }
.cta-band h2 { color:var(--white); margin-bottom:1.5rem; }
.destination-card { background:var(--white); border-radius:var(--radius-lg); border:1px solid var(--border); overflow:hidden; transition:var(--transition); }
.destination-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.hub-image { width:100%; height:240px; object-fit:cover; }
.hub-content { padding:1.5rem; }
.hub-content h2 { font-size:1.15rem; color:var(--forest); margin-bottom:.5rem; }
.hub-price { font-size:1.3rem; font-weight:800; color:var(--green); margin-bottom:.5rem; }
.hub-content p { font-size:.88rem; color:var(--muted); line-height:1.7; }
.package-inquiry-form input,
.package-inquiry-form textarea { width:100%; padding:.75rem 1rem; border:2px solid var(--border); border-radius:8px; font-size:.88rem; background:var(--cream); transition:var(--transition); }
.package-inquiry-form input:focus,
.package-inquiry-form textarea:focus { outline:none; border-color:var(--green); }
/* 23. Animations */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideInRight { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }
@keyframes countUp { from{opacity:0} to{opacity:1} }
/* 25. Note Text Styling */
.package-note-text { margin-top:1rem; font-size:0.9rem; color:var(--text-mid); }
/* 26. Overrides to force visibility for always-visible components */
.destinations-map { padding:5rem 0; background:var(--white); }
.destinations-map .section-title { margin-bottom:2rem; }
.map-embed { width:100%; height:500px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.map-embed.compact { height:400px; }
.map-embed iframe { width:100%; height:100%; border:none; }
.package-hub-section { padding:6rem 0; background:var(--cream); }
.destination-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2.5rem; margin:2rem 0; }
.destination-card { background:var(--white); border-radius:var(--radius-lg); border:1px solid var(--border); overflow:hidden; transition:var(--transition); display:flex; flex-direction:column; box-shadow:var(--shadow-sm); }
.destination-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--gold); }
.destination-card img { width:100%; height:250px; object-fit:cover; display:block; }
.destination-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:700; color:var(--forest); margin:0; padding:1.5rem 1.5rem 0.5rem; }
.destination-card > p { padding:0 1.5rem; color:var(--text); font-size:0.95rem; line-height:1.6; }
.hub-price { font-size:1.3rem; font-weight:800; color:var(--green); padding:0.5rem 1.5rem 0.8rem; margin:0; }
.package-features { list-style:none; padding:0.5rem 1.5rem 0.8rem; }
.package-features li { font-size:0.88rem; color:var(--text-mid); padding:0.3rem 0; display:flex; align-items:flex-start; }
.package-features li::before { content:'?'; color:var(--green); font-weight:800; margin-right:0.5rem; min-width:18px; }
.package-note { padding:0 1.5rem; font-size:0.82rem; color:var(--muted); font-style:italic; }
.package-card-actions { display:flex; gap:0.8rem; padding:0 1.5rem 1rem; flex-wrap:wrap; }
.book-btn { display:inline-flex; align-items:center; justify-content:center; padding:0.7rem 1.1rem; background:var(--green); color:var(--white); border-radius:8px; font-size:0.85rem; font-weight:600; transition:var(--transition); flex:1; min-width:130px; text-align:center; }
.book-btn:hover { background:var(--green-light); transform:translateY(-2px); box-shadow:0 4px 12px rgba(45,122,74,.3); }
.book-btn-alt { background:transparent; border:2px solid var(--gold); color:var(--forest); padding:calc(0.7rem - 2px) calc(1.1rem - 2px); }
.book-btn-alt:hover { background:rgba(212,165,116,.1); border-color:var(--gold); }
.package-inquiry-form { padding:1.2rem; border-top:1px solid var(--border); background:rgba(212,165,116,.05); margin-top:auto; }
.inquiry-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; margin-bottom:0.8rem; }
.package-inquiry-form input, .package-inquiry-form textarea { width:100%; padding:0.7rem; border:1px solid var(--border); border-radius:6px; font-size:0.85rem; font-family:inherit; transition:var(--transition); }
.package-inquiry-form input:focus, .package-inquiry-form textarea:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(45,122,74,.1); }
.submit-btn { width:100%; padding:0.8rem; background:var(--green); color:var(--white); border:none; border-radius:6px; font-weight:600; font-size:0.9rem; cursor:pointer; transition:var(--transition); margin-top:0.5rem; }
.submit-btn:hover { background:var(--green-light); transform:translateY(-2px); box-shadow:0 4px 12px rgba(45,122,74,.3); }
/* 23b. Blog Page Styles */
.blog-grid-wrap { padding:6rem 0; background:var(--cream); }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.blog-card { background:var(--white); border-radius:var(--radius-lg); border:1px solid var(--border); overflow:hidden; transition:var(--transition); display:flex; flex-direction:column; box-shadow:var(--shadow-sm); }
.blog-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--gold); }
.blog-card img { width:100%; height:280px; object-fit:cover; display:block; }
.blog-meta { padding:1.2rem 1.5rem 0; font-size:0.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green); }
.blog-card h2 { font-family:'Cormorant Garamond',serif; font-size:1.35rem; font-weight:700; color:var(--forest); margin:0; padding:0 1.5rem 0.5rem; }
.blog-card > p:last-of-type { padding:0 1.5rem 1.5rem; color:var(--text); font-size:0.95rem; line-height:1.6; }
.blog-card .book-btn { margin:0 1.5rem 1.5rem; }
/* 23c. About Page Styles */
.story-section { padding:5rem 0; background:var(--white); }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.story-grid article { }
.story-grid h2 { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:700; color:var(--forest); margin-bottom:1.2rem; }
.story-grid p { color:var(--text-mid); font-size:0.95rem; line-height:1.8; margin-bottom:1rem; }
.simple-list { list-style:none; }
.simple-list li { padding:0.6rem 0; padding-left:1.8rem; position:relative; color:var(--text-mid); font-size:0.95rem; line-height:1.6; }
.simple-list li::before { content:'?'; position:absolute; left:0; color:var(--green); font-weight:800; }
.guides-section { padding:6rem 0; background:var(--cream); }
.guides-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.guide-card { background:var(--white); border-radius:var(--radius-lg); border:1px solid var(--border); overflow:hidden; transition:var(--transition); text-align:center; box-shadow:var(--shadow-sm); }
.guide-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--gold); }
.guide-card img { width:100%; height:280px; object-fit:cover; display:block; }
.guide-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:700; color:var(--forest); padding:1.5rem 1.2rem 0.3rem; }
.guide-card p { padding:0 1.2rem; color:var(--text-mid); font-size:0.9rem; line-height:1.6; margin:0.2rem 0; }
.cta-band { padding:4rem 0; background:linear-gradient(135deg,var(--green),var(--green-light)); }
.cta-band-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.cta-band h2 { color:var(--white); font-size:1.8rem; margin:0; flex:1; min-width:250px; }
.cta-button { display:inline-block; padding:0.9rem 2.2rem; background:var(--gold); color:var(--forest); border-radius:50px; font-weight:700; transition:var(--transition); white-space:nowrap; }
.cta-button:hover { background:rgba(255,255,255,.95); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.25); }
/* 24. Booking Page Styles */
.booking-container { max-width:900px; margin:3rem auto; padding:0 2rem; }
.booking-header { text-align:center; margin-bottom:3rem; }
.booking-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; margin-bottom:3rem; }
.step { background:var(--cream); padding:2rem; border-radius:var(--radius); text-align:center; position:relative; border:1px solid var(--border); transition:var(--transition); }
.step:hover { box-shadow:var(--shadow); transform:translateY(-4px); }
.step-number { display:flex; align-items:center; justify-content:center; width:50px; height:50px; background:var(--green); color:var(--white); border-radius:50%; font-weight:800; font-size:1.5rem; margin:0 auto 1rem; }
.booking-form { background:var(--white); padding:3rem; border-radius:var(--radius-lg); box-shadow:var(--shadow); border:1px solid var(--border); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }
.form-row.full { grid-template-columns:1fr; }
.form-group { display:flex; flex-direction:column; }
.form-group label { margin-bottom:.5rem; font-weight:600; color:var(--forest); font-size:.95rem; }
.form-group input,.form-group select,.form-group textarea { padding:1rem; border:2px solid var(--border); border-radius:8px; font-family:inherit; font-size:1rem; transition:var(--transition); background:var(--white); color:var(--text); }
.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,122,74,.1); }
.form-group textarea { resize:vertical; min-height:120px; }
.booking-form button { width:100%; padding:1.2rem; background:linear-gradient(135deg,var(--green),#1f6b45); color:var(--white); border:none; border-radius:8px; font-size:1.1rem; font-weight:600; cursor:pointer; transition:var(--transition); margin-top:1rem; }
.booking-form button:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(45,122,74,.3); }
.price-summary { background:var(--cream); padding:1.5rem; border-radius:8px; margin-bottom:1.5rem; border-left:5px solid var(--gold); }
.price-row { display:flex; justify-content:space-between; margin-bottom:.5rem; font-size:.95rem; }
.price-total { font-size:1.3rem; font-weight:800; color:var(--forest); border-top:2px solid var(--border); padding-top:1rem; margin-top:1rem; }
.booking-section-title { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:700; color:var(--forest); margin-bottom:1.5rem; margin-top:1.5rem; }
.booking-section-title:first-child { margin-top:0; }
.destination-grid,.booking-package-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; margin:1.5rem 0; }
.destination-card { background:var(--cream); padding:1.5rem; border-radius:var(--radius); border:1px solid var(--border); transition:var(--transition); }
.destination-card:hover { box-shadow:var(--shadow); border-color:var(--gold); }
.destination-card h4 { color:var(--forest); margin-bottom:.5rem; font-size:1.05rem; }
.hub-price { font-size:1.3rem; font-weight:800; color:var(--green); margin:.5rem 0; }
.package-note { font-size:.88rem; color:var(--muted); font-style:italic; margin-bottom:1rem; }
/* 24b. Package Detail Page Styles */
.package-hero { background:linear-gradient(135deg,var(--forest),var(--forest-mid)); padding:4.5rem 0 5rem; position:relative; overflow:hidden; }
.package-hero::before { content:''; position:absolute; inset:0; background:url('data:image/svg+xml,') repeat; pointer-events:none; }
.package-hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; position:relative; z-index:1; }
.package-intro { display:flex; flex-direction:column; gap:1.2rem; }
.package-breadcrumbs { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; font-size:.8rem; font-weight:700; letter-spacing:.03em; color:rgba(255,255,255,.72); }
.package-breadcrumbs a { color:var(--gold); transition:var(--transition); }
.package-breadcrumbs a:hover { color:var(--white); }
.package-breadcrumbs span[aria-current="page"] { color:var(--white); }
.package-badge { display:inline-block; padding:.35rem .9rem; background:rgba(212,165,116,.9); color:var(--forest); font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; border-radius:50px; align-self:flex-start; }
.package-intro h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,4vw,3.2rem); font-weight:800; color:var(--white); line-height:1.15; margin:0; }
.package-intro > p { font-size:1rem; color:rgba(255,255,255,.8); line-height:1.75; margin:0; }
.package-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.package-hero-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); overflow:hidden; }
.safari-image { width:100%; height:300px; object-fit:cover; display:block; }
.package-hero-card .price { font-size:1.6rem; font-weight:800; color:var(--gold); padding:1.2rem 1.5rem .5rem; margin:0; }
.highlight-list { list-style:none; padding:.4rem 1.5rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; }
.highlight-list li { font-size:.9rem; color:rgba(255,255,255,.8); display:flex; align-items:center; gap:.6rem; }
.highlight-list li::before { content:'?'; color:var(--gold); font-weight:800; flex-shrink:0; }
.package-details { padding:5rem 0; background:var(--white); }
.package-details-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.package-conversion { padding:5rem 0; background:var(--cream); }
.package-conversion-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.detail-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; transition:var(--transition); }
.package-conversion .detail-card { background:var(--white); }
.package-details .detail-card:hover,
.package-conversion .detail-card:hover { box-shadow:var(--shadow); border-color:rgba(45,122,74,.2); transform:translateY(-3px); }
.detail-card h2 { font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:700; color:var(--forest); margin-bottom:1rem; }
.detail-card > p { font-size:.95rem; color:var(--text-mid); line-height:1.8; margin-bottom:.8rem; }
.detail-featured-image { width:100%; height:220px; object-fit:cover; border-radius:12px; margin-bottom:1rem; display:block; }
.feature-list { list-style:none; display:flex; flex-direction:column; gap:.5rem; margin:.5rem 0; }
.feature-list li { font-size:.9rem; color:var(--text-mid); display:flex; align-items:flex-start; gap:.6rem; padding:.25rem 0; border-bottom:1px solid var(--border); }
.feature-list li:last-child { border-bottom:none; }
.feature-list li::before { content:'?'; color:var(--green); font-weight:800; flex-shrink:0; margin-top:.1rem; }
.itinerary-list { list-style:none; display:flex; flex-direction:column; gap:.8rem; margin:.5rem 0; }
.itinerary-list li { font-size:.9rem; color:var(--text-mid); padding:.7rem 1rem; background:var(--cream); border-radius:10px; border-left:3px solid var(--green); line-height:1.6; }
.mini-review { font-size:.9rem; font-style:italic; color:var(--text-mid); padding:.9rem 1rem; background:var(--cream); border-radius:10px; margin-bottom:.8rem; border-left:3px solid var(--gold); line-height:1.6; }
.mini-review span { display:block; font-style:normal; font-size:.8rem; font-weight:700; color:var(--muted); margin-top:.4rem; }
.package-faq details { margin-bottom:.6rem; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.package-faq details summary { padding:.9rem 1.2rem; font-weight:700; font-size:.95rem; color:var(--forest); cursor:pointer; list-style:none; background:var(--cream); }
.package-faq details summary::-webkit-details-marker { display:none; }
.package-faq details summary::after { content:'+'; float:right; color:var(--green); font-weight:800; font-size:1.1rem; }
.package-faq details[open] summary::after { content:'-'; }
.package-faq details p { padding:.8rem 1.2rem 1rem; font-size:.9rem; color:var(--text-mid); line-height:1.7; background:var(--white); margin:0; }
.package-faq-full { grid-column:1 / -1; }
/* 25. Responsive */
@media (max-width:1100px) {
.hero-video-content { padding:4.5rem 3.5rem; max-width:680px; }
.hero-title { font-size:clamp(2rem,4.5vw,3.2rem); }
.why-grid { grid-template-columns:repeat(3,1fr); }
.featured-packages-grid { grid-template-columns:repeat(2,1fr); }
.packages-grid { grid-template-columns:repeat(2,1fr); }
.destination-grid { grid-template-columns:repeat(2,1fr); }
.blog-grid { grid-template-columns:repeat(2,1fr); }
.guides-grid { grid-template-columns:repeat(2,1fr); }
.story-grid { grid-template-columns:1fr; }
.footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
.footer-content { grid-template-columns:1fr 1fr; }
}
@media (max-width:980px) {
.hero-video-content { padding:3.5rem 2.5rem; max-width:100%; }
.hero-title { font-size:clamp(1.8rem,3.5vw,2.8rem); }
.hero-desc { font-size:1rem; }
.hero-eyebrow { font-size:0.72rem; }
.hero-scroll-indicator { bottom:1.5rem; }
.featured-packages-grid { grid-template-columns:repeat(2,1fr); }
.featured-header { margin-bottom:3rem; }
.featured-subtitle { font-size:1rem; }
.stats-grid { grid-template-columns:repeat(2,1fr); }
.package-hero-inner { grid-template-columns:1fr; gap:2.5rem; }
.package-details-grid { grid-template-columns:1fr; }
.package-conversion-grid { grid-template-columns:1fr; }
.about-grid { grid-template-columns:1fr; gap:3rem; }
.about-img-wrap img { height:380px; }
.about-values-grid { grid-template-columns:1fr; }
.why-grid { grid-template-columns:repeat(2,1fr); }
.safari-grid { grid-template-columns:repeat(2,1fr); }
.trust-strip-inner { grid-template-columns:1fr; gap:1.5rem; }
.experience-grid { grid-template-columns:1fr 1fr; }
.about-content { grid-template-columns:1fr; }
.testimonials-grid { grid-template-columns:1fr; }
.guides-grid { grid-template-columns:1fr; }
.story-grid { grid-template-columns:1fr; }
.blog-grid { grid-template-columns:1fr; }
.contact-grid { grid-template-columns:1fr; }
.contact-content { grid-template-columns:1fr; }
.destination-grid { grid-template-columns:1fr; }
.cta-band-inner { flex-direction:column; text-align:center; }
.cta-button { margin:0 auto; }
.process-timeline { flex-direction:column; align-items:center; }
.process-connector { width:2px; height:30px; padding:0; }
.process-connector span { width:2px; height:100%; }
.journey-steps-grid { grid-template-columns:1fr; }
.form-row-2 { grid-template-columns:1fr; }
.footer-grid { grid-template-columns:1fr 1fr; }
.footer-content { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
:root { --top-strip-height: 44px; }
.top-bar-email-2 { display:none !important; }
.top-bar,
.top-contact-bar { font-size:.78rem; }
.top-bar-inner,
.top-contact-bar-inner { justify-content:center; gap:.85rem; }
.top-bar-contacts { justify-content:center; gap:.85rem; }
.nav-toggle { display:flex; }
.nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:rgba(255,255,255,.98); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-top:1px solid var(--border); padding:1.2rem; flex-direction:column; gap:.3rem; box-shadow:var(--shadow); }
.nav-links.active { display:flex; }
.nav-cta { margin-left:0; text-align:center; justify-content:center; }
.site-nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:rgba(255,255,255,.98); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-top:1px solid var(--border); padding:1.2rem; flex-direction:column; gap:.3rem; box-shadow:var(--shadow); }
.site-nav-links.active { display:flex; }
.site-nav-toggle { display:flex; }
.site-nav { position:sticky; top:var(--top-strip-height); }
.package-hero { padding:3.5rem 0 4rem; }
.safari-image { height:240px; }
.package-actions { flex-direction:column; }
.package-actions .cta-button { width:100%; text-align:center; justify-content:center; }
.package-breadcrumbs { font-size:.76rem; gap:.45rem; }
.hero-video-content { padding:3rem 1.8rem; max-width:100%; }
.hero-title { font-size:1.8rem; text-shadow:2px 6px 12px rgba(0,0,0,.4); }
.hero-desc { font-size:0.95rem; margin-bottom:1.8rem; }
.hero-eyebrow { font-size:0.7rem; margin-bottom:1rem; }
.hero-trust-list { margin-bottom:2.5rem; gap:.8rem; }
.hero-trust-list li { font-size:0.92rem; }
.hero-cta-group { gap:1rem; }
.hero-scroll-indicator { bottom:1.2rem; }
.featured-packages-section { padding:6rem 0; }
.featured-packages-grid { grid-template-columns:1fr; margin-bottom:2rem; }
.featured-title { font-size:2rem; }
.featured-subtitle { font-size:0.95rem; }
.packages-grid { grid-template-columns:1fr; }
.pkg-footer { flex-direction:column; align-items:flex-start; gap:.8rem; }
.why-grid { grid-template-columns:1fr 1fr; }
.gallery-masonry { columns:2; }
.stats-grid { grid-template-columns:1fr 1fr; gap:1rem; }
.safari-grid { grid-template-columns:1fr; }
.experience-grid { grid-template-columns:1fr; }
.destination-grid { grid-template-columns:1fr; gap:1.5rem; }
.destination-card img { height:220px; }
.destination-card h3 { font-size:1.2rem; padding:1rem 1rem 0.4rem; }
.package-features { padding:0.4rem 1rem 0.6rem; }
.package-features li { font-size:0.82rem; }
.package-card-actions { padding:0 1rem 0.8rem; }
.book-btn { font-size:0.8rem; padding:0.6rem 0.9rem; min-width:110px; }
.blog-grid { grid-template-columns:1fr; gap:1.5rem; }
.blog-card img { height:240px; }
.blog-meta { padding:1rem 1rem 0; }
.blog-card h2 { font-size:1.2rem; padding:0 1rem 0.4rem; }
.blog-card > p { padding:0 1rem 1rem; font-size:0.9rem; }
.blog-card .book-btn { margin:0 1rem 1rem; }
.guides-grid { grid-template-columns:1fr; }
.guide-card img { height:240px; }
.guide-card h3 { font-size:1.2rem; }
.guide-card p { font-size:0.85rem; }
.cta-band h2 { font-size:1.4rem; }
.story-grid article h2 { font-size:1.4rem; }
.simple-list li { padding:0.5rem 0; padding-left:1.5rem; font-size:0.9rem; }
.package-inquiry-form { padding:1rem; }
.inquiry-grid { grid-template-columns:1fr; gap:0.6rem; margin-bottom:0.6rem; }
.footer-grid { grid-template-columns:1fr; gap:2rem; }
.footer-brand img { width:180px; height:auto; }
.footer-content { grid-template-columns:1fr; gap:2rem; }
.form-row { grid-template-columns:1fr; }
.booking-form { padding:1.5rem; }
.booking-container { padding:0 1.2rem; margin:2rem auto; }
.booking-steps { grid-template-columns:1fr; }
.map-embed, .map-embed.compact { height:300px; }
section { padding:4rem 0; }
.container { padding:0 1.2rem; }
}
/* ============================================
14. RELATED PACKAGES SECTION � Premium
============================================ */
.related-packages-section {
padding:5rem 0 5.5rem;
background:linear-gradient(160deg, var(--forest) 0%, #1a3a28 55%, #0f2418 100%);
margin-top:0;
border-top:none;
position:relative;
overflow:hidden;
}
.related-packages-section::before {
content:'';
position:absolute;
inset:0;
background:url('data:image/svg+xml,') repeat;
pointer-events:none;
}
.related-packages-section::after {
content:'';
position:absolute;
top:-120px; right:-120px;
width:380px; height:380px;
background:radial-gradient(circle, rgba(212,165,116,.12) 0%, transparent 70%);
border-radius:50%;
pointer-events:none;
}
.related-packages-section .container { position:relative; z-index:1; }
/* Section header */
.related-section-header { text-align:center; margin-bottom:3.5rem; }
.related-section-eyebrow {
display:inline-flex; align-items:center; gap:.5rem;
font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
color:var(--gold); background:rgba(212,165,116,.12);
padding:.35rem 1rem; border-radius:50px; margin-bottom:1rem;
}
.related-section-title {
font-family:'Cormorant Garamond', serif;
font-size:clamp(1.9rem, 3.5vw, 2.8rem);
font-weight:700; color:var(--white);
margin:0 0 .8rem;
letter-spacing:-0.02em;
}
.related-section-title em { font-style:italic; color:var(--gold); }
.related-section-sub {
font-size:.95rem; color:rgba(255,255,255,.6);
max-width:520px; margin:0 auto;
}
/* Fallback: plain h2 inside the section (for pages not yet updated) */
.related-packages-section > .container > h2 {
font-family:'Cormorant Garamond', serif;
font-size:clamp(1.9rem, 3.5vw, 2.8rem);
font-weight:700; color:var(--white);
text-align:center; margin-bottom:3rem;
background:none; -webkit-text-fill-color:var(--white);
letter-spacing:-0.02em;
}
/* Grid */
.related-packages-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
/* Card */
.related-pkg-card {
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.1);
border-radius:var(--radius-lg);
overflow:hidden;
transition:var(--transition);
display:flex; flex-direction:column;
position:relative;
}
.related-pkg-card:hover {
transform:translateY(-8px);
box-shadow:0 28px 60px rgba(0,0,0,.45);
border-color:rgba(212,165,116,.5);
background:rgba(255,255,255,.07);
}
/* Image wrapper with overlay */
.related-pkg-img-wrap {
position:relative;
overflow:hidden;
height:230px;
flex-shrink:0;
}
.related-pkg-img-wrap img,
.related-pkg-card > img {
width:100%; height:230px;
object-fit:cover; display:block;
transition:transform .65s ease;
}
.related-pkg-card:hover .related-pkg-img-wrap img,
.related-pkg-card:hover > img { transform:scale(1.08); }
.related-pkg-img-wrap::after {
content:'';
position:absolute; inset:0;
background:linear-gradient(to bottom, transparent 40%, rgba(13,27,17,.6) 100%);
pointer-events:none;
}
/* For cards where img is direct child (current markup) */
.related-pkg-card > img {
position:relative;
flex-shrink:0;
}
/* Content area */
.related-pkg-content {
padding:1.6rem 1.6rem 1.8rem;
display:flex; flex-direction:column; flex:1;
border-top:1px solid rgba(255,255,255,.08);
}
.related-pkg-content h3 {
font-family:'Cormorant Garamond', serif;
font-size:1.25rem; font-weight:700;
color:var(--white); margin:0 0 .7rem;
line-height:1.25;
}
/* Meta badges */
.related-pkg-meta {
display:flex; gap:.6rem; flex-wrap:wrap;
margin-bottom:1rem;
}
.related-pkg-meta span {
display:inline-flex; align-items:center; gap:.3rem;
font-size:.72rem; font-weight:700;
color:rgba(255,255,255,.75);
background:rgba(255,255,255,.08);
padding:.25rem .7rem; border-radius:50px;
letter-spacing:.02em;
}
.related-pkg-meta i { color:var(--gold); font-size:.7rem; }
.related-pkg-content > p {
font-size:.88rem;
color:rgba(255,255,255,.65);
line-height:1.7; margin:0 0 1.2rem;
flex:1;
}
/* Price badge */
.related-pkg-price {
display:inline-block;
font-weight:800; font-size:.9rem;
color:var(--forest);
background:linear-gradient(135deg, var(--gold), #c9925f);
padding:.28rem .9rem; border-radius:50px;
margin-bottom:1.3rem;
align-self:flex-start;
}
/* About page: improved story layout */
.story-layout-section {
background:linear-gradient(180deg,#ffffff 0%, #fbf9f4 100%);
}
.story-layout-grid {
display:grid;
grid-template-columns:1.4fr 1fr;
gap:2rem;
align-items:stretch;
}
.story-main-card,
.story-side-card {
background:var(--white);
border:1px solid var(--border);
border-radius:18px;
box-shadow:var(--shadow-sm);
}
.story-main-card {
padding:2rem 2rem 1.8rem;
}
.story-label {
display:inline-flex;
align-items:center;
padding:.3rem .8rem;
border-radius:999px;
background:rgba(45,122,74,.1);
color:var(--green);
font-size:.76rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:.9rem;
}
.story-main-card h2 {
font-family:'Cormorant Garamond',serif;
font-size:clamp(1.8rem,3.2vw,2.4rem);
color:var(--forest);
line-height:1.2;
margin-bottom:1rem;
}
.story-main-card p {
color:var(--text-mid);
line-height:1.85;
margin-bottom:.95rem;
}
.story-side-cards {
display:grid;
grid-template-rows:1fr 1fr;
gap:1rem;
}
.story-side-card {
padding:1.5rem;
position:relative;
overflow:hidden;
}
.story-side-card::before {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:linear-gradient(90deg,var(--green),var(--gold));
}
.story-side-card h3 {
font-family:'Cormorant Garamond',serif;
font-size:1.45rem;
margin-bottom:.6rem;
color:var(--forest);
}
.story-side-card p {
color:var(--text-mid);
line-height:1.8;
margin:0;
}
.story-metrics {
margin-top:1.2rem;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1rem;
}
.story-metric {
background:linear-gradient(135deg,#133322,#1f5f3f);
border-radius:14px;
padding:1.1rem 1rem;
text-align:center;
border:1px solid rgba(255,255,255,.08);
}
.story-metric-number {
display:block;
font-family:'Cormorant Garamond',serif;
font-size:2rem;
font-weight:700;
line-height:1;
color:var(--gold);
}
.story-metric-label {
display:block;
margin-top:.35rem;
font-size:.82rem;
color:rgba(255,255,255,.82);
letter-spacing:.02em;
}
.guides-intro {
max-width:700px;
margin:0 auto 2rem;
text-align:center;
color:var(--muted);
}
.guide-card-featured {
border-color:rgba(212,165,116,.7);
box-shadow:0 14px 36px rgba(13,27,17,.12);
}
.guide-card-featured h3 {
color:var(--green);
}
@media (max-width:980px) {
.story-layout-grid {
grid-template-columns:1fr;
}
.story-side-cards {
grid-template-columns:1fr 1fr;
grid-template-rows:none;
}
.story-metrics {
grid-template-columns:1fr;
}
}
@media (max-width:640px) {
.story-main-card {
padding:1.4rem;
}
.story-side-cards {
grid-template-columns:1fr;
}
.story-side-card {
padding:1.2rem;
}
}
/* About page photo visibility improvements */
.guides-section .guides-grid {
align-items:stretch;
gap:1.5rem;
}
.guides-section .guide-card {
overflow:hidden;
display:flex;
flex-direction:column;
border-radius:18px;
border:1px solid rgba(26,42,38,.12);
box-shadow:0 10px 28px rgba(13,27,17,.08);
background:linear-gradient(180deg,#f7f5ef 0%, #ffffff 100%);
}
.guides-section .guide-card img {
width:100%;
height:380px;
object-fit:contain;
object-position:center;
padding:.6rem;
background:linear-gradient(180deg,#f2ede2 0%, #f9f7f1 100%);
border-bottom:1px solid rgba(26,42,38,.08);
filter:brightness(1.05) contrast(1.03) saturate(1.04);
}
.guides-section .guide-card-featured img {
filter:brightness(1.08) contrast(1.05) saturate(1.06);
}
.guides-section .guide-card h3 {
padding:1.1rem 1rem .3rem;
}
.guides-section .guide-card p {
padding:0 1rem .85rem;
margin:0;
}
.guides-section .guide-card p:first-of-type {
font-size:.82rem;
font-weight:700;
letter-spacing:.05em;
text-transform:uppercase;
color:var(--green);
}
@media (max-width:980px) {
.guides-section .guides-grid {
grid-template-columns:repeat(2,1fr);
}
.guides-section .guide-card:first-child {
grid-column:1 / -1;
}
.guides-section .guide-card img {
height:320px;
}
}
@media (max-width:640px) {
.guides-section .guides-grid {
grid-template-columns:1fr;
}
.guides-section .guide-card:first-child {
grid-column:auto;
}
.guides-section .guide-card img {
height:280px;
padding:.35rem;
}
}
/* CTA button */
.related-pkg-link {
display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
padding:.65rem 1.4rem;
background:rgba(255,255,255,.1);
color:var(--white);
border:2px solid rgba(255,255,255,.25);
border-radius:50px;
font-size:.84rem; font-weight:700;
transition:var(--transition);
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
text-decoration:none;
align-self:flex-start;
}
.related-pkg-link::after { content:' ?'; transition:var(--transition); }
.related-pkg-card:hover .related-pkg-link {
background:var(--gold);
border-color:var(--gold);
color:var(--forest);
transform:translateX(3px);
}
/* Related packages responsive */
@media (max-width:1100px) {
.related-packages-grid { grid-template-columns:repeat(2,1fr); gap:1.5rem; }
}
@media (max-width:600px) {
.related-packages-section { padding:3.5rem 0 4rem; }
.related-packages-grid { grid-template-columns:1fr; gap:1.2rem; }
.related-pkg-img-wrap, .related-pkg-card > img { height:200px; }
.related-pkg-content { padding:1.2rem 1.2rem 1.4rem; }
.related-pkg-content h3 { font-size:1.1rem; }
}
@media (max-width:480px) {
html, body { font-size:14px; overflow-x:hidden; }
/* -- Top bar: single compact row -- */
.top-bar { padding:.45rem 0; }
.top-bar-inner { flex-direction:row; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:nowrap; }
.top-bar-contacts { flex-direction:row; gap:.6rem; flex-wrap:nowrap; }
.top-bar-contacts a:nth-child(n+2) { display:none; } /* hide email, keep only phone */
.top-bar-contacts a { font-size:.78rem; }
.top-bar-whatsapp { font-size:.78rem; }
.top-bar-email-2 { display:none !important; }
/* -- Navigation -- */
.nav-inner { padding:.65rem 1rem; gap:.5rem; }
.nav-brand { gap:.5rem; font-size:.0rem; } /* hide text, keep logo only */
.nav-brand span { display:none; }
.nav-brand img { height:38px; }
.site-nav-inner { padding:.65rem 1rem; gap:.5rem; }
.site-nav-brand { gap:.5rem; font-size:0; }
.site-nav-brand span { display:none; }
.site-nav-brand img { height:38px; }
.nav-toggle { display:flex; padding:6px; }
.nav-links {
display:none; position:fixed; top:0; left:0; right:0; bottom:0;
background:rgba(13,27,17,.97); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
padding:5rem 1.5rem 2rem; flex-direction:column; gap:.4rem;
max-height:100vh; overflow-y:auto; z-index:999;
}
.nav-links.active { display:flex; }
.nav-link { padding:.9rem 1rem; font-size:1rem; color:rgba(255,255,255,.85); border-radius:10px; border-bottom:1px solid rgba(255,255,255,.06); }
.nav-link:hover { background:rgba(255,255,255,.08); color:var(--gold); }
.nav-cta { padding:.85rem 1.2rem; font-size:.9rem; margin-left:0; text-align:center; justify-content:center; margin-top:.5rem; }
.site-nav-toggle { display:flex; padding:6px; }
.site-nav-links {
display:none; position:fixed; top:0; left:0; right:0; bottom:0;
background:rgba(13,27,17,.97); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
padding:5rem 1.5rem 2rem; flex-direction:column; gap:.4rem;
max-height:100vh; overflow-y:auto; z-index:999;
}
.site-nav-links.active { display:flex; }
.site-nav-link { padding:.9rem 1rem; font-size:1rem; color:rgba(255,255,255,.85); border-radius:10px; border-bottom:1px solid rgba(255,255,255,.06); }
.site-nav-link:hover { background:rgba(255,255,255,.08); color:var(--gold); }
.site-nav-cta { padding:.85rem 1.2rem; font-size:.9rem; margin-left:0; text-align:center; justify-content:center; margin-top:.5rem; }
/* -- Hero video section -- */
.hero-video {
min-height:100svh; min-height:100vh;
align-items:flex-start;
background:linear-gradient(160deg,#0d1b11 0%,#1a3a28 100%);
}
.hero-video-content { padding:3.5rem 1.4rem 2rem; max-width:100%; }
.hero-title { font-size:1.55rem; line-height:1.18; text-shadow:2px 5px 10px rgba(0,0,0,.5); letter-spacing:-0.01em; margin-bottom:1rem; }
.hero-desc { font-size:0.88rem; line-height:1.72; margin-bottom:1.4rem; }
.hero-eyebrow { font-size:0.68rem; margin-bottom:.9rem; letter-spacing:.12em; }
.hero-trust-list { margin-bottom:1.8rem; gap:.55rem; }
.hero-trust-list li { font-size:0.84rem; gap:.6rem; }
.hero-trust-list i { font-size:0.95rem; }
.hero-cta-group { gap:.65rem; flex-direction:column; }
.hero-cta-group .btn-primary,
.hero-cta-group .btn-outline-light { padding:0.8rem 1.8rem; font-size:0.88rem; width:100%; justify-content:center; min-height:48px; border-radius:10px; }
.hero-scroll-indicator { bottom:1rem; }
.scroll-mouse { width:22px; height:34px; border-width:1.5px; }
.scroll-mouse::before { width:2.5px; height:6px; }
/* -- Featured packages -- */
.featured-packages-section { padding:4rem 0 3rem; }
.featured-packages-grid { grid-template-columns:1fr; gap:1.2rem; }
.featured-title { font-size:1.65rem; letter-spacing:-0.01em; }
.featured-subtitle { font-size:0.88rem; line-height:1.7; }
.featured-header { margin-bottom:1.8rem; }
.pkg-card { border-radius:12px; }
.pkg-img-wrap { height:190px; }
.pkg-body { padding:1.1rem; }
.pkg-meta { gap:.7rem; font-size:.82rem; margin-bottom:.6rem; }
.pkg-card h3 { font-size:.98rem; margin-bottom:.6rem; }
.pkg-body > p { font-size:.84rem; line-height:1.6; margin-bottom:.9rem; }
.pkg-features { margin-bottom:.9rem; }
.pkg-features li { font-size:.79rem; padding:.3rem 0; }
.pkg-footer { flex-direction:column; gap:.7rem; align-items:stretch; border-top:1px solid var(--border); padding-top:1rem; }
.pkg-price { gap:.2rem; }
.price-from { font-size:.72rem; }
.price-amount { font-size:1.25rem; }
.price-per { font-size:.68rem; }
.pkg-actions { flex-direction:row; gap:.5rem; width:100%; }
.pkg-actions a { flex:1; justify-content:center; min-height:40px; font-size:.79rem; }
.btn-primary-sm { border-radius:8px; }
.btn-ghost-sm { border-radius:8px; }
.pkg-badge { padding:.28rem .75rem; font-size:.63rem; top:10px; left:10px; }
/* -- Stats bar -- */
.stats-grid { grid-template-columns:1fr 1fr; gap:.8rem; }
.stat-item { padding:1.1rem .8rem; gap:.8rem; border-radius:12px; }
.stat-icon { width:42px; height:42px; border-radius:10px; flex-shrink:0; }
.stat-icon i { font-size:1.1rem; }
.stat-num { font-size:1.7rem; }
.stat-sfx { font-size:1.2rem; }
.stat-label { font-size:.72rem; }
/* -- Section typography -- */
.section-eyebrow { font-size:.68rem; letter-spacing:.1em; }
.section-title { font-size:1.55rem; margin-bottom:.9rem; letter-spacing:-0.01em; }
.section-title-left { font-size:1.5rem; }
.section-sub { font-size:.84rem; line-height:1.7; }
.section-header-center { margin-bottom:2rem; }
/* -- About section -- */
.about-section { padding:4rem 0; }
.about-grid { grid-template-columns:1fr; gap:2rem; }
.about-img-wrap img { height:240px; border-radius:12px; }
.about-values-grid { grid-template-columns:1fr; gap:.8rem; }
.about-value-card { padding:.9rem; gap:.8rem; }
.about-value-card > i { font-size:1.2rem; }
.about-value-card h4 { font-size:.88rem; }
.about-value-card p { font-size:.8rem; }
.about-text-col p { font-size:.9rem; }
/* -- Why choose section -- */
.why-section { padding:4rem 0; }
.why-grid { grid-template-columns:1fr 1fr; gap:.8rem; }
.why-card { padding:1.4rem 1rem; border-radius:12px; }
.why-icon { width:50px; height:50px; border-radius:12px; margin-bottom:.9rem; }
.why-icon i { font-size:1.3rem; }
.why-card h3 { font-size:.88rem; }
.why-card p { font-size:.8rem; }
/* -- Process / booking steps -- */
.process-section { padding:4rem 0; }
.process-timeline { flex-direction:column; align-items:center; }
.process-step { min-width:100%; max-width:100%; padding:1rem .8rem; }
.process-step-icon { width:56px; height:56px; }
.process-step-icon i { font-size:1.3rem; }
.process-step-num { font-size:.68rem; }
.process-step h3 { font-size:.9rem; }
.process-step p { font-size:.79rem; line-height:1.6; }
.process-cta { flex-direction:column; gap:.6rem; }
.process-cta .btn-primary,
.process-cta .btn-whatsapp { width:100%; justify-content:center; min-height:48px; }
/* -- Gallery -- */
.gallery-section { padding:4rem 0; }
.gallery-masonry { columns:1; }
/* -- Testimonials -- */
.testimonials-section { padding:4rem 0; }
.testimonials-wrap { padding:0 .4rem; }
.testi-card { padding:1.4rem 1.2rem; border-radius:12px; }
.testi-quote { font-size:.92rem; line-height:1.65; margin-bottom:1rem; }
.testi-author { gap:.6rem; }
.testi-avatar { width:40px; height:40px; font-size:.8rem; flex-shrink:0; }
.testi-author h4 { font-size:.88rem; }
.testi-author span { font-size:.75rem; }
.testi-controls { margin-top:1.4rem; }
/* -- FAQ -- */
.faq-section { padding:4rem 0; }
.faq-inner { max-width:100%; }
.faq-q { padding:1rem 1.1rem; min-height:48px; }
.faq-q span { font-size:.92rem; }
.faq-a p { padding:0 1.1rem 1.1rem; font-size:.88rem; }
/* -- Contact section -- */
.contact-section { padding:4rem 0; }
.contact-grid { grid-template-columns:1fr; gap:1.5rem; }
.contact-form-col { padding:1.4rem; border-radius:12px; }
.contact-form h3 { font-size:1.2rem; margin-bottom:1.2rem; }
.form-row-2 { grid-template-columns:1fr; gap:.8rem; }
.form-group { margin-bottom:1rem; }
.form-group label { font-size:.8rem; }
.form-group input,
.form-group textarea,
.form-group select { padding:.75rem .9rem; font-size:.88rem; border-radius:8px; min-height:44px; }
/* -- CTA band -- */
.cta-band { padding:2.5rem 0; }
.cta-band h2 { font-size:1.25rem; }
.cta-button { padding:.8rem 1.8rem; font-size:.9rem; min-height:48px; border-radius:10px; }
/* -- Destination / map -- */
.destination-grid { grid-template-columns:1fr; gap:1rem; }
.destination-card { border-radius:12px; }
.destination-card img { height:190px; }
.destination-card h3 { font-size:1.05rem; }
.map-embed, .map-embed.compact { height:260px; border-radius:12px; }
.package-breadcrumbs { font-size:.72rem; line-height:1.6; }
/* -- Blog -- */
.blog-grid { grid-template-columns:1fr; gap:1.2rem; }
.blog-card { border-radius:12px; }
.blog-card img { height:200px; }
.blog-meta { padding:.9rem 1rem 0; font-size:.72rem; }
.blog-card h2 { font-size:1.05rem; padding:0 1rem .35rem; }
.blog-card > p { padding:0 1rem 1rem; font-size:.86rem; }
.blog-card .book-btn { margin:0 1rem 1rem; font-size:.79rem; min-height:40px; }
/* -- Guides -- */
.guides-grid { grid-template-columns:1fr; }
.guide-card img { height:220px; }
.guide-card h3 { font-size:1.05rem; }
.guide-card p { font-size:.84rem; }
/* -- Story / about page -- */
.story-grid article h2 { font-size:1.3rem; }
.story-grid p { font-size:.88rem; }
.simple-list li { padding:.4rem 0; padding-left:1.3rem; font-size:.84rem; }
/* -- Footer -- */
.site-footer { padding:3rem 0 0; }
.footer-grid { grid-template-columns:1fr; gap:1.8rem; padding-bottom:2.5rem; }
.footer-content { grid-template-columns:1fr; gap:1.8rem; }
.footer-col h4 { font-size:.8rem; margin-bottom:.9rem; }
.footer-links a { font-size:.84rem; }
.footer-contact li { font-size:.84rem; }
.footer-bottom { padding:1rem 0; }
.footer-bottom p { font-size:.78rem; }
.footer-legal { gap:1rem; }
.footer-legal a { font-size:.78rem; }
.newsletter-form { flex-direction:row; }
.newsletter-form input { font-size:.82rem; }
.newsletter-form button { font-size:.78rem; padding:.7rem .9rem; }
/* -- Booking page -- */
.booking-container { padding:0 1rem; margin:1.5rem auto; }
.booking-form { padding:1.4rem 1.2rem; border-radius:12px; }
.booking-steps { grid-template-columns:1fr; gap:1rem; }
.form-row { grid-template-columns:1fr; gap:.8rem; }
.btn-lg { padding:.85rem 1.8rem; font-size:.88rem; width:100%; min-height:48px; border-radius:10px; }
.sticky-book-now { left:16px; right:16px; bottom:16px; text-align:center; }
/* -- WhatsApp FAB -- */
.whatsapp-fab { padding:.7rem; bottom:78px; right:16px; min-height:52px; min-width:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 18px rgba(37,211,102,.45); }
.whatsapp-fab .fab-label { display:none; }
.whatsapp-fab i { font-size:1.6rem; }
}