/* ═══════════════════════════════════════════════════════
OWT SRI LANKA – One World Travels
style.css — Premium White-Based Travel Website
Fonts: Cormorant Garamond (headings) + Outfit (body)
═══════════════════════════════════════════════════════ */
/* ─── CSS VARIABLES ─── */
:root {
/* Brand Colors */
--green-deep: #1a5c38; /* Primary green */
--green-mid: #2a7a50; /* Medium green */
--green-light: #3da068; /* Light green */
--green-pale: #e8f5ee; /* Pale green tint */
--orange: #f4852b; /* Primary orange */
--orange-light: #f9a85a; /* Light orange */
--orange-pale: #fff3e8; /* Pale orange tint */
/* Neutrals */
--white: #ffffff;
--off-white: #fafaf8;
--gray-50: #f7f7f5;
--gray-100: #eeede9;
--gray-200: #d8d6cf;
--gray-500: #8a8880;
--gray-700: #4a4844;
--gray-900: #1c1b18;
/* Semantic */
--text-primary: #1c1b18;
--text-secondary: #5a5855;
--text-muted: #8a8880;
--border: rgba(26,92,56,0.12);
/* Spacing */
--section-pad: 100px;
--container: 1280px;
/* Shadows */
--shadow-sm: 0 2px 12px rgba(26,92,56,0.08);
--shadow-md: 0 8px 32px rgba(26,92,56,0.12);
--shadow-lg: 0 20px 60px rgba(26,92,56,0.16);
--shadow-xl: 0 32px 80px rgba(0,0,0,0.12);
/* Transitions */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
/* Crystal / Glass tokens */
--glass-bg: rgba(255, 255, 255, 0.62);
--glass-bg-strong: rgba(255, 255, 255, 0.78);
--glass-bg-dark: rgba(20, 60, 40, 0.45);
--glass-border: rgba(255, 255, 255, 0.55);
--glass-shadow: 0 20px 50px rgba(20, 60, 40, 0.14), inset 0 1px 0 rgba(255,255,255,0.6);
--glass-blur: blur(18px);
}
/* ─── RESET & BASE ─── */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body {
font-family: 'Outfit', sans-serif;
background: var(--white);
color: var(--text-primary);
overflow-x: hidden;
line-height: 1.6;
}
img {
max-width: 100%;
display: block;
object-fit: cover;
}
a {
text-decoration: none;
color: inherit;
}
ul { list-style: none; }
button {
font-family: inherit;
cursor: pointer;
border: none;
}
/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--gray-50); }
::-webkit-scrollbar-thumb { background: var(--green-mid); border-radius: 3px; }
/* ─── CONTAINER ─── */
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 32px;
}
/* ─── TYPOGRAPHY ─── */
h1, h2, h3, h4 {
font-family: 'Cormorant Garamond', Georgia, serif;
line-height: 1.15;
font-weight: 600;
}
h1 { font-size: clamp(46px, 6vw, 80px); }
h2 { font-size: clamp(32px, 4vw, 52px); }
h3 { font-size: clamp(20px, 2.5vw, 26px); font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }
em { color: var(--orange); font-style: italic; }
p { color: var(--text-secondary); line-height: 1.75; }
/* ─── BUTTONS ─── */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
border-radius: 50px;
font-size: 15px;
font-weight: 500;
font-family: 'Outfit', sans-serif;
transition: all 0.3s var(--ease);
cursor: pointer;
}
.btn-primary {
background: var(--green-deep);
color: var(--white);
box-shadow: 0 4px 20px rgba(26,92,56,0.25);
}
.btn-primary:hover {
background: var(--green-mid);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(26,92,56,0.35);
}
.btn-outline {
background: transparent;
color: var(--green-deep);
border: 1.5px solid var(--green-deep);
}
.btn-outline:hover {
background: var(--green-pale);
transform: translateY(-2px);
}
.btn-cta {
background: linear-gradient(135deg, var(--orange), var(--orange-light));
color: var(--white);
padding: 12px 28px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 4px 16px rgba(244,133,43,0.3);
}
.btn-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(244,133,43,0.4);
}
.btn-sm {
padding: 10px 22px;
font-size: 13px;
font-weight: 500;
border-radius: 50px;
background: var(--green-pale);
color: var(--green-deep);
border: 1px solid rgba(26,92,56,0.2);
transition: all 0.3s var(--ease);
display: inline-block;
}
.btn-sm:hover {
background: var(--green-deep);
color: var(--white);
}
.btn-full { width: 100%; justify-content: center; }
/* ─── SECTION COMMONS ─── */
.section { padding: var(--section-pad) 0; }
.section-header {
text-align: center;
margin-bottom: 64px;
}
.section-tag {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--orange);
margin-bottom: 14px;
}
.section-title {
color: var(--text-primary);
margin-bottom: 16px;
}
.section-desc {
font-size: 16px;
color: var(--text-secondary);
max-width: 540px;
margin: 0 auto;
line-height: 1.75;
}
/* ─── SCROLL ANIMATIONS ─── */
.reveal {
opacity: 0;
transform: translateY(36px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.visible {
opacity: 1;
transform: none;
}
.fade-in-up {
opacity: 0;
transform: translateY(28px);
animation: fadeInUp 0.8s var(--ease-out) forwards;
}
.fade-in-right {
opacity: 0;
transform: translateX(40px);
animation: fadeInRight 0.9s var(--ease-out) forwards;
}
.delay-1 { animation-delay: 0.15s; transition-delay: 0.12s; }
.delay-2 { animation-delay: 0.3s; transition-delay: 0.24s; }
.delay-3 { animation-delay: 0.45s; transition-delay: 0.36s; }
.delay-4 { animation-delay: 0.6s; transition-delay: 0.48s; }
@keyframes fadeInUp {
to { opacity: 1; transform: none; }
}
@keyframes fadeInRight {
to { opacity: 1; transform: none; }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-12px); }
}
@keyframes pulseDot {
0%, 100% { transform: scaleY(1); opacity: 1; }
50% { transform: scaleY(0.3); opacity: 0.4; }
}
/* ═══════════════════════════════════════════
HEADER / NAVIGATION
═══════════════════════════════════════════ */
#header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 20px 0;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border-bottom: 1px solid rgba(26,92,56,0.08);
box-shadow: 0 4px 22px rgba(20,60,40,0.08);
transition: background 0.4s var(--ease), padding 0.3s var(--ease), box-shadow 0.3s;
}
#header.scrolled {
background: rgba(255, 255, 255, 0.94);
backdrop-filter: var(--glass-blur) saturate(160%);
-webkit-backdrop-filter: var(--glass-blur) saturate(160%);
padding: 14px 0;
box-shadow:
0 6px 28px rgba(26,92,56,0.12),
inset 0 1px 0 rgba(255,255,255,0.7),
inset 0 -1px 0 rgba(255,255,255,0.25);
border-bottom: 1px solid rgba(255,255,255,0.4);
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
/* Logo */
.logo {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.logo-img {
height: 68px;
width: auto;
display: block;
filter: drop-shadow(0 2px 8px rgba(255,255,255,0.65));
transition: transform 0.3s var(--ease), filter 0.3s var(--ease);
}
.logo:hover .logo-img { transform: scale(1.03); }
#header.scrolled .logo-img { height: 58px; }
/* Footer logo — invert tint so colored logo is visible on dark footer */
.footer .logo-img {
height: 64px;
filter: brightness(0) invert(1);
opacity: 0.95;
}
/* Nav links */
.nav-links {
display: flex;
align-items: center;
gap: 6px;
}
.nav-links a {
padding: 8px 14px;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
border-radius: 8px;
text-shadow: none;
transition: color 0.25s, background 0.25s, box-shadow 0.25s;
}
.nav-links a:hover,
.nav-links a.active {
color: var(--green-deep);
background: var(--green-pale);
box-shadow: 0 6px 18px rgba(26,92,56,0.12);
}
/* Nav right */
.nav-right {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
/* Hamburger */
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
background: var(--white);
border: 1.5px solid rgba(26,92,56,0.16);
border-radius: 10px;
padding: 8px;
box-shadow: var(--shadow-sm);
transition: border-color 0.25s, background 0.25s;
}
.hamburger:hover { border-color: var(--green-mid); }
.hamburger span {
display: block;
width: 100%;
height: 1.5px;
background: var(--text-primary);
border-radius: 2px;
transition: all 0.3s var(--ease);
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* Homepage keeps the original transparent header over the hero. */
body.home-page #header:not(.scrolled) {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 0;
box-shadow: none;
}
body.home-page #header:not(.scrolled) .logo-img {
filter: none;
}
body.home-page #header:not(.scrolled) .nav-links a {
color: var(--text-secondary);
font-weight: 500;
}
/* ═══════════════════════════════════════════
HERO SECTION
═══════════════════════════════════════════ */
.hero {
position: relative;
padding: 150px 0 110px;
background:
radial-gradient(900px 600px at 8% 18%, rgba(232,245,238,0.95) 0%, transparent 60%),
radial-gradient(700px 500px at 95% 12%, rgba(220,235,255,0.7) 0%, transparent 60%),
radial-gradient(900px 700px at 85% 95%, rgba(255,228,196,0.7) 0%, transparent 65%),
radial-gradient(700px 500px at 18% 95%, rgba(232,245,238,0.6) 0%, transparent 60%),
linear-gradient(180deg, #fdfffe 0%, #fbfaf6 100%);
overflow: hidden;
}
/* Sri Lanka map watermark — detailed silhouette */
.hero::before {
content: '';
position: absolute;
inset: 0;
background: rgba(26,92,56,0.10);
-webkit-mask: url("srilanka-map.png") 18% center / auto 86% no-repeat;
mask: url("srilanka-map.png") 18% center / auto 86% no-repeat;
z-index: 0;
pointer-events: none;
animation: mapDrift 14s ease-in-out infinite;
}
@keyframes mapDrift {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-6px, 8px) rotate(0.3deg); }
}
.hero-container {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 50px;
align-items: center;
position: relative;
z-index: 3;
min-height: 62vh;
}
/* Hero text */
.hero-eyebrow {
display: block;
font-family: 'Caveat', cursive;
font-size: 32px;
font-weight: 600;
color: var(--orange);
line-height: 1;
margin-bottom: 6px;
}
.hero-title {
font-family: 'Outfit', sans-serif;
font-size: clamp(38px, 5.4vw, 72px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -2px;
color: var(--text-primary);
margin-bottom: 22px;
}
.hero-title em {
font-style: normal;
color: var(--green-deep);
}
.hero-subtitle {
font-size: 17px;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 36px;
font-weight: 400;
max-width: 480px;
}
.hero-subtitle strong {
color: var(--text-primary);
font-weight: 700;
}
.hero-ctas {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
/* Pill CTA with circle arrow */
.btn-pill {
padding: 6px 8px 6px 26px;
border-radius: 50px;
gap: 14px;
font-weight: 600;
font-size: 15px;
}
.btn-pill .btn-arrow {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--white);
color: var(--green-deep);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
transition: transform 0.25s var(--ease);
}
.btn-pill:hover .btn-arrow { transform: translateX(3px); }
.btn-ghost {
background: transparent;
color: var(--text-primary);
border: none;
padding: 6px 8px 6px 8px;
box-shadow: none;
}
.btn-ghost:hover {
background: transparent;
transform: translateY(-2px);
box-shadow: none;
}
.btn-arrow-green {
background: var(--green-deep) !important;
color: var(--white) !important;
}
/* Hero visual — layered photo composition */
.hero-visual {
position: relative;
height: 560px;
padding: 30px 24px 30px 0;
}
/* Main photo */
.hero-photo {
position: absolute;
inset: 30px 24px 30px 0;
z-index: 2;
border-radius: 36px;
overflow: hidden;
box-shadow: 0 30px 60px rgba(26,92,56,0.18), 0 8px 24px rgba(0,0,0,0.06);
transition: transform 0.5s var(--ease);
}
.hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-visual:hover .hero-photo { transform: translate(-3px, -3px); }
@media (min-width: 769px) {
.hero-photo {
inset: 8px 0 8px -18px;
}
}
/* Sri Lanka map silhouette behind main photo (detailed coastline) */
.hero-photo-shape {
position: absolute;
inset: 10px -40px -20px -40px;
background: linear-gradient(160deg, var(--green-pale) 0%, rgba(232,245,238,0.7) 55%, var(--orange-pale) 100%);
border: none;
border-radius: 0;
z-index: 1;
-webkit-mask: url("srilanka-map.png") center / contain no-repeat;
mask: url("srilanka-map.png") center / contain no-repeat;
filter: drop-shadow(0 14px 28px rgba(20,60,40,0.18));
animation: shapeBreathe 9s ease-in-out infinite;
}
@keyframes shapeBreathe {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(2px, -4px) scale(1.015); }
}
/* Tilted polaroid mini-photo (top-left overlap) */
.hero-polaroid {
position: absolute;
top: -10px;
left: -36px;
width: 150px;
background: var(--white);
padding: 10px 10px 14px;
border-radius: 8px;
box-shadow: 0 16px 36px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.06);
z-index: 5;
transform: rotate(-7deg);
animation: polaroidSway 5.5s ease-in-out infinite;
transform-origin: center center;
transition: transform 0.4s var(--ease);
}
.hero-polaroid:hover { transform: rotate(-3deg) scale(1.04); animation-play-state: paused; }
.hero-polaroid img {
width: 100%;
height: 110px;
object-fit: cover;
border-radius: 4px;
display: block;
}
.hero-polaroid small {
display: block;
text-align: center;
font-family: 'Caveat', cursive;
font-size: 17px;
font-weight: 600;
color: var(--text-primary);
margin-top: 8px;
line-height: 1;
}
@keyframes polaroidSway {
0%, 100% { transform: rotate(-7deg) translateY(0); }
50% { transform: rotate(-4deg) translateY(-6px); }
}
/* Floating rating card (bottom-right) */
.hero-stat-card {
position: absolute;
bottom: 6px;
right: -8px;
background: var(--white);
border-radius: 18px;
padding: 14px 20px;
display: flex;
flex-direction: column;
gap: 4px;
box-shadow: 0 16px 36px rgba(0,0,0,0.14), 0 4px 10px rgba(0,0,0,0.06);
z-index: 5;
animation: cardFloat 6s ease-in-out infinite;
min-width: 200px;
}
.hsc-row { display: flex; align-items: center; gap: 12px; }
.hsc-stars { color: var(--orange); font-size: 14px; letter-spacing: 2px; }
.hero-stat-card strong {
font-family: 'Cormorant Garamond', serif;
font-size: 26px;
font-weight: 700;
color: var(--green-deep);
line-height: 1;
}
.hero-stat-card span {
font-size: 11px;
font-weight: 500;
color: var(--text-muted);
letter-spacing: 0.3px;
}
@keyframes cardFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* Travellers chip with avatar stack (top-right of photo) */
.hero-trav-chip {
position: absolute;
top: 50px;
right: -16px;
background: var(--white);
border-radius: 50px;
padding: 10px 18px 10px 12px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 12px 28px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.05);
z-index: 5;
animation: chipFloat 5s ease-in-out 0.8s infinite;
}
.trav-avatars {
display: inline-flex;
}
.trav-avatars span {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid var(--white);
color: var(--white);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
}
.trav-avatars span + span { margin-left: -10px; }
.trav-text { display: flex; flex-direction: column; line-height: 1.1; }
.trav-text strong {
font-size: 15px;
color: var(--text-primary);
font-weight: 700;
}
.trav-text small {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
@keyframes chipFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Dotted journey trail overlay on photo */
.journey-trail {
position: absolute;
inset: 30px 24px 30px 0;
z-index: 3;
width: auto;
height: auto;
pointer-events: none;
overflow: visible;
}
.journey-path {
stroke-dasharray: 2 12;
animation: trailFlow 2.5s linear infinite, trailDraw 2s ease-out 0.4s both;
filter: drop-shadow(0 2px 6px rgba(244,133,43,0.4));
}
@keyframes trailFlow {
to { stroke-dashoffset: -28; }
}
@keyframes trailDraw {
from { opacity: 0; }
to { opacity: 1; }
}
.journey-dot {
filter: drop-shadow(0 4px 8px rgba(244,133,43,0.45));
}
.journey-end {
transform-origin: 70px 510px;
animation: trailPulseEnd 1.6s ease-in-out infinite;
}
@keyframes trailPulseEnd {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.8; }
}
/* Decorative hand-drawn elements */
.deco {
position: absolute;
color: var(--green-mid);
opacity: 0.55;
pointer-events: none;
z-index: 1;
}
.deco-plane { top: 130px; left: 30px; width: 110px; height: 80px; }
.deco-coconut { top: 46%; left: 24px; width: 56px; height: 70px; opacity: 0.5; transform-origin: bottom center; }
.deco-cloud { top: 130px; right: 46%; width: 80px; height: 40px; opacity: 0.55; }
.deco-balloon { top: 90px; right: 50px; width: 64px; height: 90px; transform-origin: 50% 90%; }
.deco-luggage { top: 50%; right: 24px; width: 56px; height: 70px; opacity: 0.55; transform-origin: bottom center; }
.deco-cloud-2 { top: 30px; right: 36%; width: 70px; height: 36px; opacity: 0.4; display: none; }
/* ─── TRAVEL ANIMATIONS ─── */
/* Airplane: trail flows like the plane is leaving a contrail */
.deco-plane path:first-child {
stroke-dasharray: 4 5;
animation: planeTrail 1.4s linear infinite;
}
.deco-plane {
animation: planeBob 7s ease-in-out infinite;
}
@keyframes planeTrail {
to { stroke-dashoffset: -18; }
}
@keyframes planeBob {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(10px, -6px) rotate(2deg); }
}
/* Hot air balloon — gentle rise and sway */
.deco-balloon {
animation: balloonFloat 6.5s ease-in-out infinite;
}
@keyframes balloonFloat {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-14px) rotate(2deg); }
}
/* Cloud drift */
.deco-cloud {
animation: cloudDrift 14s ease-in-out infinite;
}
@keyframes cloudDrift {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(28px); }
}
/* Luggage gentle wobble */
.deco-luggage {
animation: luggageWobble 5s ease-in-out infinite;
}
@keyframes luggageWobble {
0%, 100% { transform: rotate(-4deg); }
50% { transform: rotate(4deg); }
}
/* Coconut tree sway */
.deco-coconut {
animation: coconutSway 5.5s ease-in-out infinite;
}
@keyframes coconutSway {
0%, 100% { transform: rotate(-2.5deg); }
50% { transform: rotate(2.5deg); }
}
/* Hero photo subtle breathe */
.hero-photo img {
animation: photoBreathe 10s ease-in-out infinite;
}
@keyframes photoBreathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.03); }
}
/* Pulsing location pin */
.deco-pin {
top: 38%;
right: -4px;
width: 64px;
height: 78px;
z-index: 4;
opacity: 1;
display: flex;
flex-direction: column;
align-items: center;
animation: pinFloat 4s ease-in-out infinite;
}
.deco-pin .pin-icon {
width: 30px;
height: 38px;
filter: drop-shadow(0 6px 14px rgba(244,133,43,0.35));
z-index: 2;
}
.deco-pin .pin-pulse {
position: absolute;
top: 6px;
left: 50%;
width: 30px;
height: 30px;
background: var(--orange);
border-radius: 50%;
transform: translateX(-50%);
opacity: 0.45;
animation: pinPulse 2.4s ease-out infinite;
z-index: 1;
}
.deco-pin .pin-pulse-2 { animation-delay: 1.2s; }
@keyframes pinPulse {
0% { transform: translateX(-50%) scale(1); opacity: 0.55; }
100% { transform: translateX(-50%) scale(3); opacity: 0; }
}
.deco-pin .pin-label {
margin-top: 6px;
font-family: 'Caveat', cursive;
font-size: 20px;
font-weight: 600;
color: var(--green-deep);
background: var(--white);
padding: 2px 12px;
border-radius: 50px;
box-shadow: var(--shadow-sm);
white-space: nowrap;
}
@keyframes pinFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Typewriter cursor */
.hero-eyebrow.typing::after {
content: '|';
margin-left: 2px;
color: var(--orange);
font-weight: 400;
animation: typeBlink 0.75s step-end infinite;
}
@keyframes typeBlink {
50% { opacity: 0; }
}
/* Search button gentle pulse to draw attention */
.hs-search-btn {
position: relative;
}
.hs-search-btn::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50px;
box-shadow: 0 0 0 0 rgba(26,92,56,0.35);
animation: searchPulse 2.5s ease-out infinite;
pointer-events: none;
}
@keyframes searchPulse {
0% { box-shadow: 0 0 0 0 rgba(26,92,56,0.4); }
70% { box-shadow: 0 0 0 14px rgba(26,92,56,0); }
100% { box-shadow: 0 0 0 0 rgba(26,92,56,0); }
}
/* Honor user motion preferences */
@media (prefers-reduced-motion: reduce) {
.deco-plane,
.deco-plane path:first-child,
.deco-balloon,
.deco-cloud,
.deco-luggage,
.deco-coconut,
.hero-photo img,
.deco-pin,
.deco-pin .pin-pulse,
.hs-search-btn::before {
animation: none !important;
}
}
/* Sand-dune curved shape at bottom (softened pastel) */
.hero-dune {
position: absolute;
left: -10%;
right: -10%;
bottom: -60px;
height: 280px;
background: linear-gradient(180deg, rgba(255,243,232,0) 0%, rgba(255,237,213,0.5) 55%, rgba(255,224,178,0.65) 100%);
border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;
z-index: 1;
pointer-events: none;
}
/* Search / filter panel with tabs */
.hero-search-wrap {
position: relative;
z-index: 6;
margin-top: 60px;
}
.hero-search {
background: var(--glass-bg-strong);
backdrop-filter: var(--glass-blur) saturate(160%);
-webkit-backdrop-filter: var(--glass-blur) saturate(160%);
border-radius: 70px;
border: 1px solid var(--glass-border);
box-shadow:
0 24px 60px rgba(26,92,56,0.14),
0 4px 14px rgba(0,0,0,0.04),
inset 0 1px 0 rgba(255,255,255,0.7);
padding: 18px 36px 24px;
position: relative;
}
/* Tab row */
.hs-tabs {
display: flex;
gap: 36px;
padding: 6px 0 14px 8px;
border-bottom: 1px solid var(--gray-100);
margin-bottom: 18px;
position: relative;
flex-wrap: wrap;
}
.hs-tab {
background: transparent;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 4px;
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--text-muted);
transition: color 0.3s var(--ease), transform 0.3s var(--ease);
position: relative;
}
.hs-tab .hs-tab-icon {
font-size: 18px;
display: inline-block;
transition: transform 0.4s var(--ease);
}
.hs-tab:hover { color: var(--green-deep); }
.hs-tab:hover .hs-tab-icon { transform: scale(1.15) rotate(-6deg); }
.hs-tab.active {
color: var(--green-deep);
}
.hs-tab.active .hs-tab-icon { transform: scale(1.15); }
.hs-tab-indicator {
position: absolute;
bottom: -1px;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--green-deep), var(--green-light));
border-radius: 3px;
transition: transform 0.5s var(--ease), width 0.5s var(--ease);
transform: translateX(8px);
will-change: transform, width;
}
/* Form fields */
.hs-form {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr auto;
gap: 22px;
align-items: end;
padding: 6px 0 4px;
animation: hsFormFade 0.5s ease-out;
}
@keyframes hsFormFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.hs-field {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.hs-field label {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 0.2px;
padding-left: 4px;
}
.hs-control {
background: var(--gray-50);
border: 1.5px solid transparent;
border-radius: 50px;
padding: 4px 18px;
display: flex;
align-items: center;
transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.hs-control:hover {
background: var(--white);
border-color: var(--gray-100);
}
.hs-control:focus-within {
background: var(--white);
border-color: var(--green-deep);
box-shadow: 0 0 0 4px rgba(26,92,56,0.08);
}
.hs-control select,
.hs-control input {
border: none;
background: transparent;
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
outline: none;
padding: 10px 0;
width: 100%;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.hs-control select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right center;
padding-right: 18px;
}
.hs-search-btn {
background: var(--green-deep);
color: var(--white);
padding: 14px 30px;
border-radius: 50px;
font-weight: 600;
font-size: 14px;
font-family: 'Outfit', sans-serif;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: none;
cursor: pointer;
transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
box-shadow: 0 6px 20px rgba(26,92,56,0.28);
height: 48px;
position: relative;
overflow: hidden;
}
.hs-search-btn:hover {
background: var(--green-mid);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(26,92,56,0.35);
}
.hs-search-icon { transition: transform 0.3s var(--ease); }
.hs-search-btn:hover .hs-search-icon { transform: translateX(4px); }
/* ═══════════════════════════════════════════
PACKAGES SECTION — bigger & richer
═══════════════════════════════════════════ */
.packages-section {
background:
radial-gradient(800px 400px at 90% 0%, rgba(244,133,43,0.10), transparent 60%),
radial-gradient(700px 500px at 0% 80%, rgba(244,133,43,0.06), transparent 65%),
linear-gradient(160deg, var(--green-deep) 0%, #154a2d 100%);
color: var(--white);
position: relative;
overflow: hidden;
padding-top: clamp(90px, 11vw, 150px);
padding-bottom: clamp(90px, 11vw, 150px);
}
/* Subtle animated dot pattern */
.packages-section::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.06) 1.2px, transparent 1.6px);
background-size: 32px 32px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
animation: pkgDotsDrift 60s linear infinite;
}
@keyframes pkgDotsDrift {
0% { background-position: 0 0; }
100% { background-position: 320px 320px; }
}
/* Header row (left-aligned title + view-all CTA) */
.packages-head {
max-width: 720px;
margin-bottom: 90px;
text-align: left;
position: relative;
z-index: 3;
}
.packages-head .section-tag {
color: var(--orange-light);
font-size: 14px;
letter-spacing: 4px;
}
.packages-head .section-title {
color: var(--white);
font-size: clamp(36px, 4.6vw, 64px);
line-height: 1.05;
}
.packages-head .section-title em {
color: var(--orange-light);
font-style: italic;
}
.packages-head-desc {
font-size: 16px;
line-height: 1.7;
color: rgba(255,255,255,0.75);
max-width: 560px;
margin-top: 22px;
}
.btn-pill-light {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 26px;
background: rgba(255,255,255,0.08);
color: var(--white);
border: 1px solid rgba(255,255,255,0.25);
padding: 12px 26px;
border-radius: 50px;
font-size: 14px;
font-weight: 500;
font-family: 'Outfit', sans-serif;
transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.btn-pill-light:hover {
background: var(--orange);
border-color: var(--orange);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(244,133,43,0.35);
}
/* Decorative background script + icons */
.pkg-script {
position: absolute;
top: 60px;
right: 80px;
font-family: 'Caveat', cursive;
font-size: clamp(40px, 6vw, 96px);
font-weight: 700;
line-height: 0.95;
color: rgba(255,255,255,0.08);
letter-spacing: 1px;
text-align: right;
pointer-events: none;
z-index: 1;
}
.pkg-script em {
font-style: normal;
color: rgba(255,255,255,0.18);
}
.pkg-deco {
position: absolute;
pointer-events: none;
z-index: 1;
color: rgba(255,255,255,0.35);
}
.pkg-deco-palm { top: 80px; right: 30px; width: 100px; height: 140px; transform: rotate(-8deg); animation: palmSway 7s ease-in-out infinite; transform-origin: 50% 100%; }
.pkg-deco-balloon { bottom: 240px; left: 50px; width: 64px; height: 96px; animation: balloonFloat 6s ease-in-out infinite; }
.pkg-deco-swirl { top: 220px; left: 30%; width: 150px; height: 100px; opacity: 0.4; }
@keyframes palmSway {
0%, 100% { transform: rotate(-8deg); }
50% { transform: rotate(-2deg); }
}
/* Flying plane decoration */
.pkg-plane {
position: absolute;
top: 16%;
left: -80px;
width: 60px;
height: 60px;
z-index: 2;
pointer-events: none;
filter: drop-shadow(0 8px 14px rgba(0,0,0,0.35));
animation: pkgPlaneFly 22s linear infinite;
}
@keyframes pkgPlaneFly {
0% { transform: translate(0, 0) rotate(-4deg); opacity: 0; }
6% { opacity: 1; }
50% { transform: translate(50vw, -30px) rotate(2deg); }
94% { opacity: 1; }
100% { transform: translate(110vw, 20px) rotate(-2deg); opacity: 0; }
}
.pkg-plane-trail {
position: absolute;
top: 14%;
left: 0;
width: 100%;
height: 80px;
z-index: 1;
pointer-events: none;
opacity: 0.6;
}
.pkg-plane-trail path {
stroke-dasharray: 800;
stroke-dashoffset: 800;
animation: pkgTrailDraw 22s linear infinite;
}
@keyframes pkgTrailDraw {
0% { stroke-dashoffset: 800; }
60% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -800; }
}
/* Sparkle particles */
.pkg-sparkle {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0.4) 60%, transparent 80%);
box-shadow: 0 0 12px rgba(255,255,255,0.7);
z-index: 1;
pointer-events: none;
animation: pkgTwinkle 3.6s ease-in-out infinite;
opacity: 0;
}
@keyframes pkgTwinkle {
0%, 100% { opacity: 0; transform: scale(0.6); }
50% { opacity: 0.9; transform: scale(1.4); }
}
/* Staggered card grid */
.packages-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
align-items: start;
position: relative;
z-index: 3;
}
.packages-grid .pkg-card:nth-child(1) { margin-top: 0; }
.packages-grid .pkg-card:nth-child(2) { margin-top: 70px; }
.packages-grid .pkg-card:nth-child(3) { margin-top: 35px; }
.packages-grid .pkg-card:nth-child(4) { margin-top: 105px;}
/* Package card — bigger and richer */
.pkg-card {
background: var(--white);
color: var(--text-primary);
border-radius: 24px;
overflow: hidden;
position: relative;
box-shadow:
0 24px 50px rgba(0,0,0,0.28),
0 6px 14px rgba(0,0,0,0.10);
transition: transform 0.5s var(--ease), box-shadow 0.5s;
opacity: 0;
transform: translateY(60px) rotate(-2deg) scale(0.96);
animation: pkgDeal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(var(--i, 0) * 160ms + 100ms);
}
@keyframes pkgDeal {
to {
opacity: 1;
transform: translateY(0) rotate(0) scale(1);
}
}
/* Gradient glow ring on hover */
.pkg-card::after {
content: '';
position: absolute;
inset: -2px;
border-radius: 26px;
background: linear-gradient(135deg, rgba(244,133,43,0.55), rgba(43,123,67,0.55), rgba(244,133,43,0.55));
background-size: 200% 200%;
z-index: -1;
opacity: 0;
filter: blur(14px);
transition: opacity 0.4s;
animation: pkgGlowShift 6s linear infinite;
}
@keyframes pkgGlowShift {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.pkg-card:hover {
transform: translateY(-14px) scale(1.015);
box-shadow:
0 36px 70px rgba(0,0,0,0.34),
0 10px 22px rgba(0,0,0,0.14);
}
.pkg-card:hover::after { opacity: 1; }
/* Corner badge */
.pkg-badge {
position: absolute;
top: 16px;
right: 16px;
z-index: 5;
background: var(--orange);
color: var(--white);
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 7px 14px;
border-radius: 50px;
box-shadow: 0 6px 14px rgba(244,133,43,0.45);
animation: pkgBadgePulse 2.4s ease-in-out infinite;
}
.pkg-badge-new { background: #2f8a4d; box-shadow: 0 6px 14px rgba(47,138,77,0.45); }
.pkg-badge-hot { background: #e53e3e; box-shadow: 0 6px 14px rgba(229,62,62,0.45); }
.pkg-badge-luxury { background: linear-gradient(135deg, #b8893f, #6e4f1d); box-shadow: 0 6px 14px rgba(110,79,29,0.5); }
@keyframes pkgBadgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
.pkg-top {
display: flex;
gap: 8px;
padding: 20px 20px 0;
flex-wrap: wrap;
}
.pkg-pill {
font-size: 11px;
font-weight: 500;
background: var(--gray-50);
color: var(--text-secondary);
padding: 6px 13px;
border-radius: 50px;
border: 1px solid var(--gray-100);
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.pkg-img-wrap {
position: relative;
overflow: hidden;
height: 230px;
margin: 16px 16px 0;
border-radius: 18px;
background: var(--gray-50);
}
.pkg-img-wrap img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease), filter 0.5s;
}
.pkg-card:hover .pkg-img-wrap img {
transform: scale(1.12) translateX(-2%);
filter: saturate(1.15);
}
/* Diagonal shine sweep on hover */
.pkg-img-shine {
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 45%, transparent 60%);
transform: translateX(-110%);
pointer-events: none;
transition: transform 0.9s ease;
}
.pkg-card:hover .pkg-img-shine { transform: translateX(110%); }
.pkg-body { padding: 20px 22px 22px; }
.pkg-rating {
font-size: 13px;
color: #f4852b;
letter-spacing: 1px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.pkg-rating small {
color: var(--text-muted);
font-family: 'Outfit', sans-serif;
font-size: 12px;
letter-spacing: 0;
}
.pkg-body h3 {
font-family: 'Outfit', sans-serif;
font-size: 19px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 18px;
line-height: 1.32;
letter-spacing: -0.3px;
transition: color 0.25s;
}
.pkg-card:hover .pkg-body h3 { color: var(--green-deep); }
.pkg-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-top: 14px;
border-top: 1px dashed var(--gray-100);
}
.pkg-price { display: flex; flex-direction: column; line-height: 1.1; }
.pkg-price small {
font-size: 11px;
color: var(--text-muted);
font-weight: 500;
margin-bottom: 4px;
}
.pkg-price strong {
font-family: 'Cormorant Garamond', serif;
font-size: 28px;
font-weight: 700;
color: var(--orange);
letter-spacing: -0.5px;
transition: transform 0.3s;
}
.pkg-card:hover .pkg-price strong { transform: scale(1.08); }
.btn-pill-sm {
background: var(--gray-50);
color: var(--text-primary);
padding: 11px 20px;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
font-family: 'Outfit', sans-serif;
border: 1px solid var(--gray-100);
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
transition: background 0.25s, color 0.25s, transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.btn-pill-sm span { transition: transform 0.25s; display: inline-block; }
.btn-pill-sm:hover {
background: var(--green-deep);
color: var(--white);
border-color: var(--green-deep);
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(43,123,67,0.4);
}
.btn-pill-sm:hover span { transform: translateX(3px); }
/* View + Book Now button pair on package cards */
.pkg-actions {
display: inline-flex;
gap: 8px;
align-items: center;
}
.btn-pill-view,
.btn-pill-book {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
font-family: 'Outfit', sans-serif;
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: background 0.25s, color 0.25s, transform 0.25s, border-color 0.25s, box-shadow 0.25s;
text-decoration: none;
}
.btn-pill-view {
background: var(--gray-50);
color: var(--text-primary);
border-color: var(--gray-100);
}
.btn-pill-view:hover {
background: var(--text-primary);
color: var(--white);
border-color: var(--text-primary);
transform: translateY(-2px);
}
.btn-pill-book {
background: linear-gradient(135deg, #f9a455, var(--orange));
color: var(--white);
box-shadow: 0 8px 18px rgba(244,133,43,0.32);
}
.btn-pill-book:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(244,133,43,0.45);
filter: brightness(1.05);
}
/* ═══════════════════════════════════════════
BOOKING MODAL (3-option popup)
═══════════════════════════════════════════ */
.book-modal {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.book-modal.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.3s ease, visibility 0s;
}
.book-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(10, 30, 20, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
}
.book-modal-panel {
position: relative;
width: min(420px, 100%);
max-height: calc(100vh - 48px);
overflow-y: auto;
background: var(--white);
border-radius: 24px;
padding: 32px 28px 24px;
box-shadow:
0 30px 70px rgba(10, 30, 20, 0.35),
0 8px 20px rgba(10, 30, 20, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transform: translateY(24px) scale(0.96);
opacity: 0;
transition: transform 0.35s var(--ease), opacity 0.3s ease;
}
.book-modal.open .book-modal-panel {
transform: translateY(0) scale(1);
opacity: 1;
}
.book-modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--gray-50);
border: 1px solid var(--gray-100);
color: var(--text-secondary);
font-size: 20px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, color 0.2s, transform 0.2s;
}
.book-modal-close:hover {
background: var(--text-primary);
color: var(--white);
transform: rotate(90deg);
}
.book-modal-eyebrow {
display: inline-block;
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--orange);
margin-bottom: 6px;
}
.book-modal-title {
font-family: 'Cormorant Garamond', serif;
font-size: 30px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.5px;
line-height: 1.15;
margin-bottom: 10px;
}
.book-modal-pkg {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px;
font-family: 'Outfit', sans-serif;
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px dashed var(--gray-100);
}
.book-modal-pkg-name {
font-weight: 600;
color: var(--green-deep);
}
.book-modal-pkg-price {
font-family: 'Cormorant Garamond', serif;
font-size: 20px;
font-weight: 700;
color: var(--orange);
}
.book-modal-pkg-price:empty { display: none; }
.book-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.book-option {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 14px;
border-radius: 14px;
background: var(--white);
border: 1px solid var(--gray-100);
color: var(--text-primary);
text-decoration: none;
transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.book-option:hover {
background: var(--gray-50);
border-color: rgba(43,123,67,0.25);
transform: translateX(3px);
box-shadow: 0 6px 16px rgba(20,60,40,0.08);
}
.book-option-icon {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.book-option-icon svg { width: 20px; height: 20px; }
.book-option-icon--email { background: rgba(244,133,43,0.12); color: var(--orange); }
.book-option-icon--call { background: rgba(43,123,67,0.12); color: var(--green-deep); }
.book-option-icon--whatsapp { background: rgba(37,211,102,0.14); color: #25d366; }
.book-option-body {
display: flex;
flex-direction: column;
line-height: 1.25;
flex: 1;
min-width: 0;
}
.book-option-body strong {
font-family: 'Outfit', sans-serif;
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
.book-option-body small {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
.book-option-arrow {
font-size: 18px;
color: var(--text-muted);
transition: transform 0.25s, color 0.25s;
}
.book-option:hover .book-option-arrow {
color: var(--orange);
transform: translateX(4px);
}
.book-modal-note {
font-size: 12px;
color: var(--text-muted);
text-align: center;
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed var(--gray-100);
font-family: 'Outfit', sans-serif;
}
@media (max-width: 480px) {
.book-modal-panel { padding: 26px 20px 20px; border-radius: 20px; }
.book-modal-title { font-size: 24px; }
.book-option { padding: 12px; gap: 12px; }
.book-option-icon { width: 36px; height: 36px; }
}
/* Bottom caption paragraph with inline image badges */
.pkg-bottom {
text-align: center;
font-family: 'Caveat', cursive;
font-size: clamp(22px, 2.6vw, 32px);
color: rgba(255,255,255,0.88);
max-width: 940px;
margin: 110px auto 0;
line-height: 1.7;
font-weight: 500;
position: relative;
z-index: 3;
}
.pkg-inline-img {
display: inline-block;
width: 64px;
height: 30px;
object-fit: cover;
border-radius: 50px;
vertical-align: middle;
margin: 0 6px;
border: 2px solid rgba(255,255,255,0.4);
transition: transform 0.3s;
}
.pkg-inline-img:hover { transform: scale(1.15) rotate(-2deg); }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.pkg-card,
.pkg-plane,
.pkg-plane-trail path,
.pkg-sparkle,
.pkg-badge,
.pkg-deco-palm,
.pkg-deco-balloon,
.packages-section::before {
animation: none !important;
}
.pkg-card { opacity: 1; transform: none; }
}
/* ═══════════════════════════════════════════
DESTINATIONS — CRYSTAL pebble row
═══════════════════════════════════════════ */
.destinations-section {
background:
radial-gradient(900px 500px at 80% 0%, rgba(232,245,238,0.7), transparent 60%),
radial-gradient(700px 600px at 10% 100%, rgba(255,243,232,0.7), transparent 60%),
var(--white);
position: relative;
overflow: hidden;
padding-top: clamp(90px, 10vw, 130px);
padding-bottom: clamp(90px, 10vw, 130px);
}
/* Background blurred crystal blobs */
.destinations-section::before,
.destinations-section::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
animation: crystalBlobDrift 18s ease-in-out infinite;
}
.destinations-section::before {
width: 420px; height: 420px;
top: -80px; left: -120px;
background: radial-gradient(circle, rgba(43,123,67,0.22), transparent 70%);
}
.destinations-section::after {
width: 480px; height: 480px;
bottom: -120px; right: -140px;
background: radial-gradient(circle, rgba(244,133,43,0.18), transparent 70%);
animation-delay: -9s;
}
@keyframes crystalBlobDrift {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(40px, 30px) scale(1.1); }
}
/* Floating decorative dots */
.dest-dot {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: radial-gradient(circle, rgba(244,133,43,0.85) 0%, rgba(244,133,43,0.2) 60%, transparent 80%);
z-index: 1;
pointer-events: none;
animation: destDotPulse 3.4s ease-in-out infinite;
opacity: 0;
}
@keyframes destDotPulse {
0%, 100% { opacity: 0; transform: scale(0.6); }
50% { opacity: 0.9; transform: scale(1.4); }
}
/* Centered header */
.iconic-header {
text-align: center;
max-width: 880px;
margin: 0 auto 80px;
position: relative;
z-index: 2;
}
.iconic-eyebrow {
display: inline-block;
font-family: 'Caveat', cursive;
font-size: clamp(22px, 2.2vw, 30px);
color: var(--orange);
font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.iconic-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(34px, 4.4vw, 56px);
font-weight: 700;
color: var(--text-primary);
line-height: 1.15;
letter-spacing: -1px;
}
.iconic-pill-num {
display: inline-block;
background: linear-gradient(135deg, var(--green-mid), var(--green-deep));
color: var(--white);
font-family: 'Outfit', sans-serif;
font-size: 0.65em;
font-weight: 700;
padding: 6px 22px;
border-radius: 999px;
margin: 0 6px;
vertical-align: middle;
letter-spacing: 0.5px;
box-shadow:
0 10px 26px rgba(43,123,67,0.32),
inset 0 1px 0 rgba(255,255,255,0.35);
animation: pillBob 4s ease-in-out infinite;
}
@keyframes pillBob {
0%, 100% { transform: translateY(0) rotate(-1deg); }
50% { transform: translateY(-4px) rotate(1deg); }
}
/* ── MODERN destination cards ── */
.iconic-row {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 18px;
position: relative;
z-index: 2;
perspective: 1400px;
}
.iconic-card {
position: relative;
display: block;
aspect-ratio: 3 / 4.2;
border-radius: 28px;
overflow: hidden;
cursor: pointer;
isolation: isolate;
background: var(--gray-100);
box-shadow:
0 14px 30px rgba(20,60,40,0.16),
0 4px 10px rgba(20,60,40,0.08);
transition: transform 0.5s var(--ease), box-shadow 0.5s;
text-decoration: none;
color: inherit;
opacity: 0;
transform: translateY(40px) scale(0.96);
animation: iconicRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(var(--i, 0) * 110ms + 150ms);
transform-style: preserve-3d;
}
@keyframes iconicRise {
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Alternating vertical offset — subtle bento feel */
.iconic-card:nth-child(even) { margin-top: 30px; }
/* Media wrap */
.iconic-media {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
z-index: 0;
}
.iconic-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s var(--ease), filter 0.6s;
}
/* Dark gradient overlay for legibility */
.iconic-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(10,40,25,0.55) 75%, rgba(10,40,25,0.85) 100%),
linear-gradient(180deg, rgba(244,133,43,0.05) 0%, transparent 30%);
pointer-events: none;
z-index: 1;
transition: opacity 0.5s;
}
/* Diagonal shine sweep on hover */
.iconic-shine {
position: absolute;
inset: 0;
background: linear-gradient(110deg,
transparent 30%,
rgba(255,255,255,0.35) 48%,
rgba(255,255,255,0.05) 56%,
transparent 70%);
transform: translateX(-120%);
pointer-events: none;
z-index: 2;
transition: transform 1.1s ease;
}
.iconic-card:hover .iconic-shine { transform: translateX(120%); }
/* Number badge (top-left) — serif index */
.iconic-num {
position: absolute;
top: 16px;
left: 18px;
z-index: 3;
font-family: 'Cormorant Garamond', serif;
font-size: 24px;
font-weight: 700;
font-style: italic;
color: var(--white);
letter-spacing: 0.5px;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
opacity: 0.95;
}
.iconic-num::after {
content: '';
display: block;
width: 22px;
height: 1px;
background: var(--orange-light);
margin-top: 4px;
transition: width 0.4s var(--ease);
}
.iconic-card:hover .iconic-num::after { width: 40px; }
/* Glassy "X Tours" pill (top-right) */
.iconic-tag {
position: absolute;
top: 16px;
right: 16px;
z-index: 3;
background: rgba(255,255,255,0.22);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
color: var(--white);
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.35);
box-shadow: 0 6px 16px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.4);
transition: background 0.3s, transform 0.3s;
}
.iconic-card:hover .iconic-tag {
background: var(--orange);
border-color: rgba(255,255,255,0.5);
transform: scale(1.05);
}
/* Meta info at bottom */
.iconic-meta {
position: absolute;
left: 22px;
right: 22px;
bottom: 22px;
z-index: 3;
color: var(--white);
}
.iconic-meta h3 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(20px, 1.6vw, 26px);
font-weight: 700;
color: var(--white);
letter-spacing: -0.3px;
line-height: 1.1;
margin: 0 0 4px;
transition: transform 0.4s var(--ease);
}
.iconic-sub {
display: inline-block;
font-family: 'Outfit', sans-serif;
font-size: 12px;
font-weight: 400;
color: rgba(255,255,255,0.85);
letter-spacing: 0.3px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.4s, transform 0.4s;
}
.iconic-card:hover .iconic-sub {
opacity: 1;
transform: translateY(0);
}
.iconic-card:hover .iconic-meta h3 { transform: translateY(-2px); }
/* Floating arrow CTA bottom-right */
.iconic-arrow {
position: absolute;
bottom: 22px;
right: 22px;
z-index: 3;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.22);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.35);
border-radius: 50%;
color: var(--white);
font-size: 16px;
font-weight: 600;
opacity: 0;
transform: translateX(10px) rotate(-20deg);
transition: opacity 0.4s, transform 0.4s, background 0.3s;
}
.iconic-card:hover .iconic-arrow {
opacity: 1;
transform: translateX(0) rotate(0);
background: var(--orange);
border-color: var(--orange);
}
/* Hover lift + image zoom */
.iconic-card:hover {
transform: translateY(-10px);
box-shadow:
0 30px 60px rgba(20,60,40,0.28),
0 10px 22px rgba(20,60,40,0.14);
}
.iconic-card:hover .iconic-media img {
transform: scale(1.12);
filter: saturate(1.18) contrast(1.04);
}
@media (prefers-reduced-motion: reduce) {
.iconic-card,
.iconic-pill-num,
.dest-dot,
.destinations-section::before,
.destinations-section::after {
animation: none !important;
}
.iconic-card { opacity: 1; transform: none; }
}
/* ═══════════════════════════════════════════
DAY TOURS SECTION
═══════════════════════════════════════════ */
.day-tours-section { background: var(--gray-50); }
.day-tours-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.dtour-card {
background: var(--white);
border-radius: 18px;
padding: 28px 24px;
border: 1px solid var(--gray-100);
box-shadow: var(--shadow-sm);
display: flex;
gap: 18px;
align-items: flex-start;
transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.dtour-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: rgba(26,92,56,0.2);
}
.dtour-icon {
font-size: 28px;
flex-shrink: 0;
width: 52px; height: 52px;
background: var(--green-pale);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
}
.dtour-body h3 { font-size: 18px; margin-bottom: 6px; }
.dtour-body p { font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.dtour-footer {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-muted);
margin-bottom: 12px;
}
.dtour-price { color: var(--green-deep); font-weight: 600; }
.dtour-link {
display: inline-block;
font-size: 13px; font-weight: 600;
color: var(--orange);
transition: color 0.2s, letter-spacing 0.2s;
}
.dtour-link:hover { color: var(--green-deep); letter-spacing: 0.5px; }
/* ═══════════════════════════════════════════
GROUP TOURS — "Known About Us" layout
═══════════════════════════════════════════ */
.group-tours-section {
background:
radial-gradient(900px 500px at 100% 0%, rgba(255,243,232,0.7), transparent 60%),
radial-gradient(700px 500px at 0% 100%, rgba(232,245,238,0.7), transparent 60%),
var(--white);
position: relative;
overflow: hidden;
padding-top: clamp(78px, 7vw, 105px);
padding-bottom: clamp(78px, 7vw, 105px);
}
/* Decorative trails / planes / shapes around the section */
.grp-trail {
position: absolute;
pointer-events: none;
z-index: 1;
}
.grp-trail-left { top: 70px; left: 20px; width: 200px; height: 320px; }
.grp-trail-right { top: 80px; right: 20px; width: 80px; height: 600px; }
.grp-trail path {
stroke-dasharray: 2 6;
animation: trailFlow 6s linear infinite;
}
@keyframes trailFlow {
to { stroke-dashoffset: -64; }
}
.grp-deco {
position: absolute;
pointer-events: none;
z-index: 1;
}
.grp-deco-balloon { bottom: 80px; left: 28px; width: 50px; height: 75px; animation: balloonFloat 6s ease-in-out infinite; }
.grp-deco-pin { top: 36px; left: 8px; width: 22px; height: 28px; animation: pinBob 3.5s ease-in-out infinite; }
@keyframes pinBob {
0%, 100% { transform: translateY(0) rotate(-4deg); }
50% { transform: translateY(-6px) rotate(4deg); }
}
.grp-plane {
position: absolute;
width: 28px;
height: 28px;
z-index: 2;
pointer-events: none;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.18));
}
.grp-plane-left {
top: 60px;
left: 30px;
animation: grpPlaneLeftPath 9s ease-in-out infinite;
}
.grp-plane-right {
top: 100px;
right: 28px;
animation: grpPlaneRightPath 11s ease-in-out infinite;
}
@keyframes grpPlaneLeftPath {
0% { transform: translate(0, 0) rotate(20deg); opacity: 0; }
10% { opacity: 1; }
50% { transform: translate(-40px, 120px) rotate(40deg); }
90% { opacity: 1; }
100% { transform: translate(-10px, 280px) rotate(60deg); opacity: 0; }
}
@keyframes grpPlaneRightPath {
0% { transform: translate(0, 0) rotate(120deg); opacity: 0; }
8% { opacity: 1; }
50% { transform: translate(20px, 240px) rotate(140deg); }
92% { opacity: 1; }
100% { transform: translate(-10px, 540px) rotate(160deg); opacity: 0; }
}
/* Layout */
.group-layout {
display: grid;
grid-template-columns: 0.92fr 1.08fr;
gap: clamp(48px, 5vw, 76px);
align-items: center;
position: relative;
z-index: 3;
}
/* ───── Visual column ───── */
.group-visual {
position: relative;
min-height: 520px;
max-width: 520px;
margin-left: auto;
}
/* Main rounded-square photo */
.grp-photo {
position: relative;
width: 100%;
max-width: 350px;
aspect-ratio: 1 / 1;
margin-left: 40px;
border-radius: 33% 33% 33% 33% / 25% 25% 25% 25%;
overflow: hidden;
box-shadow: 0 24px 58px rgba(20,60,40,0.18), 0 10px 22px rgba(20,60,40,0.08);
animation: grpPhotoFloat 7s ease-in-out infinite;
isolation: isolate;
}
.grp-photo img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.6s var(--ease);
}
.grp-photo:hover img { transform: scale(1.06); }
.grp-photo-shine {
position: absolute;
inset: 0;
background: linear-gradient(165deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.08) 30%, transparent 55%);
pointer-events: none;
mix-blend-mode: screen;
}
@keyframes grpPhotoFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-10px) rotate(0.4deg); }
}
/* Spinning discount badge */
.grp-discount {
position: absolute;
top: 42px;
right: 68px;
width: 94px;
height: 94px;
z-index: 4;
filter: drop-shadow(0 12px 22px rgba(244,133,43,0.4));
}
.grp-discount-bg {
width: 100%; height: 100%;
animation: discountSpin 14s linear infinite;
}
@keyframes discountSpin {
to { transform: rotate(360deg); }
}
.grp-discount-text {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--white);
text-align: center;
font-family: 'Outfit', sans-serif;
pointer-events: none;
}
.grp-discount-text strong {
font-family: 'Cormorant Garamond', serif;
font-size: 25px;
font-weight: 700;
line-height: 1;
}
.grp-discount-text span {
font-size: 9.5px;
font-weight: 500;
letter-spacing: 1px;
margin-top: 2px;
}
/* Secondary palm/suitcase illustration */
.grp-illust {
position: absolute;
bottom: 42px;
right: 20px;
width: 235px;
height: 275px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 18px 36px rgba(20,60,40,0.16);
background: #bfeeff;
border: 9px solid var(--white);
animation: grpIllustFloat 6s ease-in-out infinite;
z-index: 3;
}
.grp-illust img {
width: 100%;
height: 100%;
object-fit: cover;
}
.grp-illust::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 46%, rgba(245,214,138,0.72) 100%);
}
.grp-illust--art {
background: transparent;
border: 0;
box-shadow: none;
overflow: visible;
border-radius: 0;
}
.grp-illust--art img {
object-fit: contain;
object-position: center bottom;
filter: drop-shadow(0 16px 24px rgba(20,60,40,0.16));
}
.grp-illust--art::after,
.grp-illust--art .grp-suitcase {
display: none;
}
.grp-suitcase {
position: absolute;
left: 76px;
bottom: 24px;
width: 62px;
height: 50px;
border-radius: 8px;
background:
radial-gradient(circle at 18px 18px, #fff 0 4px, transparent 5px),
radial-gradient(circle at 42px 28px, #e94e77 0 5px, transparent 6px),
radial-gradient(circle at 45px 14px, #ffd166 0 4px, transparent 5px),
linear-gradient(135deg, #b66a2b, #7e4a24);
border: 3px solid #6f3f1e;
box-shadow: 0 8px 18px rgba(0,0,0,0.22);
z-index: 2;
}
.grp-suitcase::before {
content: "";
position: absolute;
left: 18px;
top: -12px;
width: 24px;
height: 14px;
border: 3px solid #6f3f1e;
border-bottom: 0;
border-radius: 10px 10px 0 0;
}
.grp-palm-art {
position: absolute;
right: -26px;
bottom: 142px;
width: 255px;
height: 255px;
z-index: 4;
filter: drop-shadow(0 12px 18px rgba(20,60,40,0.18));
animation: grpIllustFloat 7s ease-in-out infinite;
pointer-events: none;
}
@keyframes grpIllustFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-8px) rotate(-1deg); }
}
/* Award pill below photo */
.grp-award {
position: absolute;
bottom: 18px;
left: 74px;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 14px;
background: linear-gradient(135deg, var(--green-mid), var(--green-deep));
color: var(--white);
min-width: 205px;
min-height: 116px;
padding: 20px 22px;
border-radius: 18px;
box-shadow: 0 18px 40px rgba(43,123,67,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.15);
animation: awardBob 4.5s ease-in-out infinite;
}
.grp-award-icon {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 10px;
flex-shrink: 0;
color: #ffd166;
}
.grp-award-icon svg { width: 27px; height: 27px; }
.grp-award small {
font-size: 9px;
font-weight: 400;
color: rgba(255,255,255,0.75);
letter-spacing: 1px;
text-transform: uppercase;
}
.grp-award strong {
display: block;
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
margin-top: 2px;
}
@keyframes awardBob {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-4px) rotate(-0.5deg); }
}
/* ───── Text column ───── */
.grp-eyebrow {
display: inline-block;
font-family: 'Caveat', cursive;
font-size: clamp(17px, 1.45vw, 22px);
color: var(--orange);
font-weight: 700;
letter-spacing: 0.4px;
margin-bottom: 12px;
}
.grp-title {
font-family: 'Outfit', sans-serif;
font-size: clamp(34px, 3.1vw, 52px);
font-weight: 800;
color: var(--text-primary);
letter-spacing: -1.3px;
line-height: 1.16;
margin-bottom: 22px;
max-width: 610px;
}
.grp-title em { color: var(--green-deep); font-style: italic; }
.grp-title-word {
display: inline-block;
opacity: 0;
transform: translateY(18px);
animation: titleWordIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.grp-title-word:nth-of-type(1) { animation-delay: 0.10s; }
.grp-title-word:nth-of-type(2) { animation-delay: 0.20s; }
.grp-title-word:nth-of-type(3) { animation-delay: 0.32s; }
.grp-title em .grp-title-word:nth-of-type(1) { animation-delay: 0.34s; }
.grp-title em .grp-title-word:nth-of-type(2) { animation-delay: 0.46s; }
@keyframes titleWordIn {
to { opacity: 1; transform: translateY(0); }
}
.grp-desc {
font-size: 14px;
line-height: 1.75;
color: var(--text-secondary);
max-width: 585px;
margin-bottom: 28px;
padding-bottom: 22px;
border-bottom: 1px solid var(--gray-100);
}
.grp-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px 48px;
margin-bottom: 30px;
}
.grp-feat {
display: flex;
align-items: flex-start;
gap: 14px;
}
.grp-feat-icon {
width: 46px; height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, var(--green-light), var(--green-deep));
color: var(--white);
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 8px 18px rgba(43,123,67,0.28);
transition: transform 0.3s var(--ease);
}
.grp-feat-icon svg { width: 22px; height: 22px; }
.grp-feat:hover .grp-feat-icon {
transform: translateY(-2px) rotate(-5deg) scale(1.06);
}
.grp-feat strong {
display: block;
font-family: 'Outfit', sans-serif;
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 6px;
}
.grp-feat p {
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
/* CTA row */
.grp-cta-row {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.btn-grp-cta {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, var(--green-mid), var(--green-deep));
color: var(--white);
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 600;
padding: 9px 10px 9px 22px;
border-radius: 999px;
text-decoration: none;
transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
box-shadow: 0 10px 24px rgba(43,123,67,0.32), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-grp-cta-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.3);
font-size: 14px;
transition: transform 0.3s, background 0.3s;
}
.btn-grp-cta:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(43,123,67,0.45);
}
.btn-grp-cta:hover .btn-grp-cta-arrow {
background: var(--orange);
border-color: var(--orange);
transform: rotate(-25deg);
}
.grp-trust {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 8px 18px 8px 8px;
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 999px;
box-shadow: var(--shadow-sm);
}
.grp-avatars {
display: inline-flex;
}
.grp-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background-size: cover;
background-position: center;
border: 2px solid var(--white);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
opacity: 0;
transform: scale(0.5);
animation: avatarPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.grp-avatar + .grp-avatar { margin-left: -10px; }
.grp-avatar:nth-child(1) { animation-delay: 0.6s; }
.grp-avatar:nth-child(2) { animation-delay: 0.75s; }
.grp-avatar:nth-child(3) { animation-delay: 0.9s; }
.grp-avatar:nth-child(4) { animation-delay: 1.05s; }
@keyframes avatarPop {
to { opacity: 1; transform: scale(1); }
}
.grp-trust strong {
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
@media (prefers-reduced-motion: reduce) {
.grp-plane, .grp-trail path, .grp-photo, .grp-illust, .grp-award,
.grp-discount-bg, .grp-deco-balloon, .grp-deco-pin, .grp-avatar,
.grp-title-word {
animation: none !important;
}
.grp-title-word, .grp-avatar { opacity: 1; transform: none; }
}
/* ═══════════════════════════════════════════
WHY CHOOSE US
═══════════════════════════════════════════ */
.why-section {
background:
radial-gradient(700px 400px at 10% 10%, var(--green-pale), transparent 60%),
radial-gradient(600px 400px at 95% 95%, var(--orange-pale), transparent 60%),
var(--white);
position: relative;
}
.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.why-card {
position: relative;
padding: 32px 28px;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur) saturate(140%);
-webkit-backdrop-filter: var(--glass-blur) saturate(140%);
border: 1px solid var(--glass-border);
border-radius: 22px;
box-shadow: var(--glass-shadow);
transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.4s, background 0.4s;
overflow: hidden;
}
.why-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.9), transparent);
}
.why-card:hover {
transform: translateY(-8px);
box-shadow: 0 28px 60px rgba(20,60,40,0.16), inset 0 1px 0 rgba(255,255,255,0.8);
border-color: rgba(43,123,67,0.35);
background: var(--glass-bg-strong);
}
.why-icon {
font-size: 32px;
margin-bottom: 18px;
display: block;
}
.why-card h3 { font-size: 20px; margin-bottom: 10px; }
.why-card p { font-size: 14px; line-height: 1.7; }
/* ═══════════════════════════════════════════
TESTIMONIALS
═══════════════════════════════════════════ */
.testimonials-section {
background:
radial-gradient(800px 500px at 90% 10%, rgba(232,245,238,0.7), transparent 60%),
radial-gradient(700px 500px at 0% 90%, rgba(255,243,232,0.6), transparent 60%),
var(--gray-50);
position: relative;
}
.testi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.testi-card {
position: relative;
background: var(--glass-bg-strong);
backdrop-filter: var(--glass-blur) saturate(140%);
-webkit-backdrop-filter: var(--glass-blur) saturate(140%);
border-radius: 22px;
padding: 32px 28px;
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.4s;
overflow: hidden;
}
.testi-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.9), transparent);
}
.testi-card:hover {
transform: translateY(-7px);
box-shadow: 0 28px 60px rgba(20,60,40,0.16), inset 0 1px 0 rgba(255,255,255,0.8);
border-color: rgba(43,123,67,0.3);
}
.testi-stars { font-size: 15px; margin-bottom: 16px; letter-spacing: 2px; }
.testi-text {
font-size: 15px;
line-height: 1.75;
color: var(--text-secondary);
margin-bottom: 24px;
font-style: italic;
}
.testi-author {
display: flex; align-items: center; gap: 14px;
border-top: 1px solid var(--gray-100);
padding-top: 20px;
}
.testi-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--green-deep), var(--green-light));
color: var(--white);
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 600;
flex-shrink: 0;
}
.testi-author strong { display: block; font-size: 15px; color: var(--text-primary); font-weight: 600; }
.testi-author small { font-size: 12px; color: var(--text-muted); }
/* ═══════════════════════════════════════════
ABOUT SECTION
═══════════════════════════════════════════ */
.about-section { background: var(--white); }
.about-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.about-visuals { position: relative; height: 500px; }
.about-img-main {
position: absolute; top: 0; left: 0;
width: 78%; height: 80%;
border-radius: 20px; overflow: hidden;
box-shadow: var(--shadow-xl);
}
.about-img-main img { width: 100%; height: 100%; object-fit: cover; }
.about-img-sm {
position: absolute; bottom: 0; right: 0;
width: 50%; height: 50%;
border-radius: 20px; overflow: hidden;
box-shadow: var(--shadow-lg);
border: 5px solid var(--white);
}
.about-img-sm img { width: 100%; height: 100%; object-fit: cover; }
.about-float-box {
position: absolute;
top: 44%; left: 55%;
background: var(--green-deep);
color: var(--white);
border-radius: 16px;
padding: 20px 22px;
text-align: center;
box-shadow: var(--shadow-md);
z-index: 2;
}
.about-float-num {
font-family: 'Cormorant Garamond', serif;
font-size: 38px; font-weight: 700;
}
.about-float-num span { color: var(--orange-light); font-size: 24px; }
.about-float-label { font-size: 11px; opacity: 0.8; margin-top: 4px; line-height: 1.4; max-width: 100px; }
.about-text .section-title { margin-bottom: 18px; }
.about-text > p { margin-bottom: 14px; }
.about-values { margin: 28px 0 36px; display: flex; flex-direction: column; gap: 18px; }
.val-item { display: flex; gap: 16px; align-items: flex-start; }
.val-icon {
font-size: 22px;
width: 48px; height: 48px;
background: var(--green-pale);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.val-item h4 { margin-bottom: 4px; }
.val-item p { font-size: 14px; }
/* ═══════════════════════════════════════════
CONTACT SECTION
═══════════════════════════════════════════ */
.contact-section {
background: linear-gradient(160deg, var(--green-pale) 0%, var(--white) 50%, var(--orange-pale) 100%);
}
.contact-layout {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 64px;
align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: 28px; }
.cinfo-item {
display: flex; gap: 16px; align-items: flex-start;
}
.cinfo-icon {
font-size: 22px;
width: 50px; height: 50px;
background: var(--white);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: var(--shadow-sm);
}
.cinfo-item strong { display: block; font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.cinfo-item p { font-size: 14px; color: var(--text-secondary); }
/* Contact form */
.contact-form {
background: var(--white);
border-radius: 24px;
padding: 40px;
box-shadow: var(--shadow-md);
border: 1px solid var(--gray-100);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 18px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
letter-spacing: 0.2px;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 13px 16px;
border: 1.5px solid var(--gray-200);
border-radius: 12px;
font-size: 14px;
font-family: 'Outfit', sans-serif;
color: var(--text-primary);
background: var(--white);
transition: border-color 0.25s, box-shadow 0.25s;
outline: none;
resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--gray-500); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--green-mid);
box-shadow: 0 0 0 3px rgba(42,122,80,0.1);
}
.form-group textarea { margin-bottom: 18px; }
.form-note {
text-align: center;
font-size: 12px;
color: var(--text-muted);
margin-top: 12px;
}
/* ═══════════════════════════════════════════
FOOTER
═══════════════════════════════════════════ */
.footer {
background: var(--gray-900);
color: rgba(255,255,255,0.75);
padding: 80px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.3fr;
gap: 50px;
padding-bottom: 60px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .logo-owt { color: var(--white); }
.footer-brand .logo-sub { color: rgba(255,255,255,0.4); }
.footer-brand .logo-mark { background: var(--green-mid); }
.footer-brand > p {
font-size: 14px;
line-height: 1.75;
color: rgba(255,255,255,0.5);
margin: 18px 0 24px;
max-width: 280px;
}
.footer-socials { display: flex; gap: 10px; }
.social-link {
width: 38px; height: 38px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.7);
font-size: 14px; font-weight: 600;
transition: all 0.25s;
}
.social-link:hover {
background: var(--green-mid);
border-color: var(--green-mid);
color: var(--white);
transform: translateY(-2px);
}
.footer-col h4 {
font-size: 13px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--white);
margin-bottom: 20px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a {
font-size: 14px;
color: rgba(255,255,255,0.5);
transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--orange-light); }
.footer-contact li {
font-size: 14px;
color: rgba(255,255,255,0.5);
padding: 4px 0;
}
.footer-cert {
margin-top: 20px;
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(42,122,80,0.2);
border: 1px solid rgba(42,122,80,0.4);
border-radius: 8px;
padding: 8px 14px;
font-size: 12px;
font-weight: 600;
color: var(--green-light);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 0;
}
.footer-bottom p {
font-size: 13px;
color: rgba(255,255,255,0.35);
}
.footer-legal {
display: flex; gap: 24px;
}
.footer-legal a {
font-size: 13px;
color: rgba(255,255,255,0.35);
transition: color 0.2s;
}
.footer-legal a:hover { color: rgba(255,255,255,0.65); }
/* ─── BACK TO TOP ─── */
.back-top {
position: fixed;
bottom: 32px; right: 32px;
width: 46px; height: 46px;
background: var(--green-deep);
color: var(--white);
border-radius: 12px;
font-size: 18px; font-weight: 700;
box-shadow: var(--shadow-md);
transition: all 0.3s var(--ease);
opacity: 0; pointer-events: none; transform: translateY(10px);
z-index: 900;
}
.back-top.visible {
opacity: 1; pointer-events: auto; transform: none;
}
.back-top:hover { background: var(--green-mid); transform: translateY(-3px); }
/* ═══════════════════════════════════════════
PAGE BANNER (inner pages)
═══════════════════════════════════════════ */
.page-banner {
position: relative;
padding: 160px 0 70px;
background: linear-gradient(135deg, var(--green-pale) 0%, var(--white) 55%, var(--orange-pale) 100%);
overflow: hidden;
text-align: center;
}
.page-banner::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(640px circle at 15% 20%, rgba(232,245,238,0.65), transparent 60%),
radial-gradient(540px circle at 85% 80%, rgba(255,243,232,0.65), transparent 60%);
pointer-events: none;
}
.page-banner .container { position: relative; z-index: 1; }
.page-banner .section-tag {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--orange);
margin-bottom: 14px;
}
.page-banner-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(40px, 6vw, 64px);
font-weight: 700;
color: var(--text-primary);
letter-spacing: -1px;
line-height: 1.1;
margin: 6px 0 22px;
}
.page-banner-title em {
font-style: italic;
color: var(--green-deep);
}
.page-banner-desc {
font-size: 17px;
color: var(--text-secondary);
max-width: 640px;
margin: 0 auto 22px;
line-height: 1.75;
}
.breadcrumb {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
letter-spacing: 0.4px;
background: rgba(255,255,255,0.7);
border: 1px solid var(--border);
padding: 8px 18px;
border-radius: 999px;
backdrop-filter: blur(6px);
}
.breadcrumb a {
color: var(--green-deep);
transition: color 0.2s;
}
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb .sep { color: var(--gray-200); }
.breadcrumb .current { color: var(--text-primary); font-weight: 600; }
@media (max-width: 768px) {
.page-banner { padding: 120px 0 50px; }
.logo-img { height: 50px; }
#header.scrolled .logo-img { height: 44px; }
.footer .logo-img { height: 56px; }
}
/* ═══════════════════════════════════════════
RESPONSIVE — TABLET (≤ 1024px)
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
:root { --section-pad: 72px; }
.packages-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
.packages-grid .pkg-card:nth-child(1),
.packages-grid .pkg-card:nth-child(2),
.packages-grid .pkg-card:nth-child(3),
.packages-grid .pkg-card:nth-child(4) { margin-top: 0; }
.packages-grid .pkg-card:nth-child(2),
.packages-grid .pkg-card:nth-child(4) { margin-top: 50px; }
.pkg-script { font-size: 48px; right: 32px; top: 40px; }
.pkg-deco-palm { width: 60px; height: 90px; right: 16px; top: 70px; }
.pkg-img-wrap { height: 210px; }
.pkg-plane { width: 50px; height: 50px; }
.iconic-row { grid-template-columns: repeat(3, 1fr); gap: 22px; row-gap: 36px; }
.iconic-card:nth-child(even) { margin-top: 0; }
.iconic-card:nth-child(2),
.iconic-card:nth-child(5) { margin-top: 26px; }
.why-grid { grid-template-columns: repeat(2, 1fr); }
.testi-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
.hero-container { gap: 30px; }
.hero-visual { height: 460px; }
.deco-plane { left: 12px; width: 90px; }
.deco-balloon { right: 16px; width: 54px; }
.deco-cloud { display: none; }
.deco-cloud-2 { display: none; }
.hs-tabs { gap: 22px; }
.hs-tab { font-size: 13px; }
.hs-form { grid-template-columns: 1fr 1fr auto; gap: 16px; }
.hs-field:nth-child(3),
.hs-field:nth-child(4) { grid-column: span 1; }
.about-layout { gap: 48px; }
.group-layout { gap: 48px; }
.contact-layout { gap: 40px; }
.grp-features { grid-template-columns: 1fr 1fr; gap: 22px; }
.grp-trail-left { width: 140px; height: 240px; }
.grp-trail-right { display: none; }
.grp-deco-balloon { display: none; }
}
/* ═══════════════════════════════════════════
RESPONSIVE — MOBILE (≤ 768px)
═══════════════════════════════════════════ */
@media (max-width: 768px) {
:root { --section-pad: 56px; }
.container { padding: 0 20px; }
/* Nav */
.hamburger { display: flex; }
.nav-links {
display: none;
position: fixed;
top: 0; left: 0; right: 0;
height: 100vh;
background: var(--white);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
z-index: 999;
}
.nav-links.open { display: flex; }
.nav-links a { font-size: 24px; padding: 12px 24px; font-family: 'Cormorant Garamond', serif; font-weight: 600; }
.nav-right .btn-cta { display: none; }
/* Hero */
.hero { padding: 120px 0 90px; overflow-x: hidden; }
.hero-container { grid-template-columns: 1fr; gap: 36px; text-align: center; }
.hero-visual { height: 400px; order: -1; padding: 28px 20px; max-width: 100%; }
.hero-subtitle { margin: 0 auto 32px; }
.hero-ctas { justify-content: center; }
.hero-eyebrow { font-size: 26px; }
/* Layered photo — keep all floating elements inside bounds on mobile */
.hero-photo,
.journey-trail { inset: 28px 20px; }
.hero-photo-shape{ inset: 56px 4px 0 4px; }
.hero-polaroid {
width: 100px;
left: 4px;
top: 4px;
padding: 6px 6px 10px;
transform: rotate(-6deg);
animation: polaroidSwayMobile 5.5s ease-in-out infinite;
}
.hero-polaroid img { height: 70px; }
.hero-polaroid small { font-size: 13px; margin-top: 4px; }
@keyframes polaroidSwayMobile {
0%, 100% { transform: rotate(-6deg) translateY(0); }
50% { transform: rotate(-3deg) translateY(-4px); }
}
.hero-stat-card {
min-width: auto;
padding: 8px 14px;
right: 6px;
bottom: 6px;
border-radius: 14px;
gap: 2px;
}
.hsc-row { gap: 8px; }
.hsc-stars { font-size: 12px; letter-spacing: 1px; }
.hero-stat-card strong{ font-size: 20px; }
.hero-stat-card span { font-size: 10px; }
.hero-trav-chip { display: none; }
/* Decorative line art - hide on small screens */
.deco-plane, .deco-coconut, .deco-cloud, .deco-balloon, .deco-luggage { display: none; }
/* Tabbed search panel — stack vertically on mobile */
.hero-search { border-radius: 28px; padding: 18px 18px 22px; }
.hs-tabs {
gap: 14px;
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 16px;
margin-bottom: 14px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.hs-tabs::-webkit-scrollbar { display: none; }
.hs-tab { font-size: 12px; flex-shrink: 0; }
.hs-tab .hs-tab-icon { font-size: 16px; }
.hs-form { grid-template-columns: 1fr; gap: 14px; }
.hs-search-btn { width: 100%; padding: 16px; }
/* Packages */
.packages-section { padding-top: 70px; padding-bottom: 70px; }
.packages-grid { grid-template-columns: 1fr; gap: 26px; }
.packages-grid .pkg-card:nth-child(n) { margin-top: 0 !important; }
.packages-head { margin-bottom: 40px; max-width: 100%; text-align: center; }
.packages-head .section-title br { display: none; }
.packages-head-desc { margin-left: auto; margin-right: auto; }
.pkg-script { display: none; }
.pkg-deco-palm { display: none; }
.pkg-deco-balloon { display: none; }
.pkg-deco-swirl { display: none; }
.pkg-plane { display: none; }
.pkg-plane-trail { display: none; }
.pkg-sparkle { display: none; }
.pkg-img-wrap { height: 220px; }
.pkg-bottom { margin-top: 60px; font-size: 18px; }
.pkg-inline-img { width: 44px; height: 22px; }
.pkg-card { animation: none; opacity: 1; transform: none; }
/* Destinations */
.destinations-section { padding-top: 70px; padding-bottom: 70px; }
.iconic-header { margin-bottom: 50px; }
.iconic-row { grid-template-columns: repeat(2, 1fr); gap: 18px; row-gap: 28px; }
.iconic-card:nth-child(even) { margin-top: 0; }
.iconic-card { animation: none; opacity: 1; transform: none; aspect-ratio: 3 / 4; }
.iconic-meta h3 { font-size: 18px; }
.iconic-sub { opacity: 1; transform: none; font-size: 11px; }
.iconic-arrow { opacity: 1; transform: none; width: 34px; height: 34px; }
.dest-dot { display: none; }
/* Day tours */
.day-tours-grid { grid-template-columns: 1fr; }
/* Group */
.group-tours-section { padding-top: 60px; padding-bottom: 60px; }
.group-layout { grid-template-columns: 1fr; gap: 56px; }
.group-visual { min-height: 460px; max-width: 380px; margin: 0 auto; }
.grp-photo { max-width: 300px; margin: 0 auto; }
.grp-discount { width: 82px; height: 82px; top: 18px; right: 18px; }
.grp-discount-text strong { font-size: 22px; }
.grp-discount-text span { font-size: 9px; }
.grp-illust { width: 190px; height: 230px; bottom: 52px; right: -10px; }
.grp-award { bottom: -6px; left: 18px; transform: none; min-width: 190px; min-height: 104px; padding: 16px 18px; }
.grp-award-icon { width: 42px; height: 42px; }
.grp-award-icon svg { width: 24px; height: 24px; }
.grp-award strong { font-size: 13px; }
.grp-features { grid-template-columns: 1fr; gap: 22px; }
.grp-cta-row { gap: 18px; }
.grp-trail-left, .grp-trail-right, .grp-deco-balloon, .grp-deco-pin,
.grp-plane-left, .grp-plane-right { display: none; }
.group-text { text-align: center; }
.group-text .grp-cta-row { justify-content: center; flex-wrap: wrap; }
.group-text .grp-trust { justify-content: center; }
.grp-title { text-align: center; }
.grp-desc { text-align: center; }
/* Why */
.why-grid { grid-template-columns: 1fr; }
/* Testimonials */
.testi-grid { grid-template-columns: 1fr; }
/* About */
.about-layout { grid-template-columns: 1fr; }
.about-visuals { height: 360px; margin-bottom: 24px; }
.about-float-box { top: auto; left: auto; bottom: -20px; right: 0; }
/* Contact */
.contact-layout { grid-template-columns: 1fr; gap: 40px; }
.form-row { grid-template-columns: 1fr; }
.contact-form { padding: 28px 22px; }
/* Footer */
.footer-grid { grid-template-columns: 1fr; gap: 36px; }
.footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
.footer-legal { flex-wrap: wrap; justify-content: center; }
.back-top { bottom: 20px; right: 20px; }
/* Listing pages — layout & alignment */
.pkg-layout,
.dest-layout,
.pkg-results,
.dest-results,
.pkg-sidebar,
.dest-sidebar,
.pkg-filter-card,
.dest-filter-card {
width: 100%;
min-width: 0;
}
.dest-results-head,
.pkg-results-head {
margin-bottom: 32px;
padding: 0 4px;
}
.dest-list-title,
.pkg-list-title {
font-size: clamp(20px, 5vw, 28px);
line-height: 1.4;
word-wrap: break-word;
}
.dest-results-bar,
.pkg-results-bar {
flex-direction: column;
align-items: stretch;
text-align: center;
gap: 12px;
}
.pkg-sort {
width: 100%;
justify-content: center;
}
.pkg-sort select { flex: 1; max-width: 100%; }
.dest-chips { justify-content: center; }
.pkg-pagination,
.gt-pagination {
flex-wrap: wrap;
justify-content: center;
gap: 8px;
padding: 8px 0;
}
.pkg-page-dot {
min-width: 40px;
min-height: 40px;
}
/* Banners — center & prevent overflow */
.dest-banner,
.pkg-page-banner {
padding: 110px 0 56px;
text-align: center;
}
.dest-banner-inner,
.pkg-page-banner-inner {
max-width: 100%;
padding: 0 4px;
}
.dest-banner-title,
.pkg-page-banner-title {
font-size: clamp(26px, 6.5vw, 40px);
word-wrap: break-word;
}
.dest-banner-desc,
.pkg-page-banner-desc {
margin-left: auto;
margin-right: auto;
font-size: 15px;
}
.dest-banner .breadcrumb,
.pkg-page-banner .breadcrumb,
.gt-breadcrumb {
flex-wrap: wrap;
justify-content: center;
max-width: 100%;
font-size: 12px;
padding: 8px 14px;
}
/* Package / day tour cards */
.pkg-v2-actions {
flex-direction: column;
gap: 10px;
}
.pkg-v2-actions .btn-pill-view,
.pkg-v2-actions .btn-pill-book {
width: 100%;
flex: none;
}
.pkg-footer {
flex-direction: column;
align-items: stretch;
gap: 14px;
text-align: center;
}
.pkg-actions {
display: flex;
flex-direction: column;
width: 100%;
gap: 10px;
}
.pkg-actions .btn-pill-view,
.pkg-actions .btn-pill-book {
width: 100%;
justify-content: center;
}
.dt-card-actions {
flex-direction: column;
gap: 10px;
align-items: stretch;
}
.dt-btn-view,
.dt-btn-book {
width: 100%;
white-space: normal;
text-align: center;
justify-content: center;
}
.dt-card-body {
padding: 16px 16px 14px;
}
.dt-card-body h3 {
font-size: 19px;
line-height: 1.25;
}
/* Group tours */
.gt-hero {
min-height: auto;
padding: 100px 0 48px;
}
.gt-hero-inner { padding: 0 4px; }
.gt-hero-title { font-size: clamp(26px, 6.5vw, 38px); }
.gt-hero-desc { font-size: 15px; }
.gt-search-bar { margin-top: 0; padding: 0; }
.gt-search-form {
grid-template-columns: 1fr;
padding: 20px 0 24px;
gap: 14px;
}
.gt-search-btn { width: 100%; height: auto; padding: 14px; }
.gt-tabs {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
justify-content: flex-start;
padding-bottom: 12px;
margin-bottom: 20px;
gap: 8px;
}
.gt-tabs::-webkit-scrollbar { display: none; }
.gt-tab { flex-shrink: 0; font-size: 12px; padding: 9px 16px; }
.gt-tour-card { grid-template-columns: 1fr; }
.gt-tour-img { min-height: 200px; aspect-ratio: 16 / 10; }
.gt-tour-img img { min-height: 200px; }
.gt-tour-body {
padding: 20px 18px;
border-right: none;
border-bottom: 1px solid var(--gray-100);
text-align: left;
}
.gt-tour-body h3 { font-size: 22px; }
.gt-tour-side {
flex-direction: column;
align-items: stretch;
text-align: center;
padding: 20px 18px 22px;
gap: 14px;
background: var(--white);
}
.gt-tour-map {
max-width: 100%;
width: 100%;
margin: 0 auto;
}
.gt-tour-cta,
.gt-tour-book {
width: 100%;
max-width: none;
}
.gt-tour-price strong { font-size: 26px; }
.gt-styles-inner {
flex-direction: column;
text-align: center;
padding: 28px 22px;
gap: 20px;
}
.gt-styles-inner .btn { width: 100%; justify-content: center; }
.gt-intro { padding: 40px 16px 32px; }
.gt-intro-title { font-size: clamp(24px, 5.5vw, 32px); }
.gt-results-count { text-align: center; }
/* Tour detail */
.td-top-bar { padding: 88px 0 16px; }
.td-top-bar .breadcrumb {
flex-wrap: wrap;
font-size: 12px;
padding: 0;
background: transparent;
border: 0;
}
#tdContent.td-layout,
.td-layout {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
min-width: 0;
}
.td-col-main,
.td-col-side { width: 100%; min-width: 0; }
.td-title { font-size: clamp(26px, 6vw, 36px); }
.td-summary,
.td-section { padding: 22px 18px; }
.td-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
.td-stat { padding: 14px 10px; }
.td-stat strong { font-size: 13px; }
.td-quick-nav {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.td-quick-nav a {
text-align: center;
padding: 10px 14px;
background: var(--gray-50);
border-radius: 10px;
}
.td-milestone-row { gap: 8px; }
.td-milestone { min-width: calc(50% - 8px); flex: 1 1 calc(50% - 8px); }
.td-book-cta,
.td-wishlist-btn { width: 100%; }
.td-day-gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
/* Contact */
.ct-top-bar { padding: 88px 0 16px; }
.ct-top-bar .breadcrumb { flex-wrap: wrap; font-size: 12px; }
.ct-hero { padding: 28px 0 40px; }
.ct-hero-grid { grid-template-columns: 1fr; gap: 22px; }
.ct-card { padding: 26px 20px; }
.ct-card-title { font-size: 24px; }
.ct-info-logo img { height: 60px; }
.ct-section { padding: 0 0 44px; }
.ct-section-title { font-size: 26px; }
.ct-map-wrap iframe { min-height: 260px; }
.ct-dept-card li { align-items: flex-start; }
.ct-dept-card a { word-break: break-word; }
.ct-wa-float { bottom: 76px; right: 16px; z-index: 890; }
/* Modal & fixed UI */
.book-modal { padding: 16px; align-items: flex-end; }
.book-modal-panel {
width: 100%;
max-width: 100%;
border-radius: 20px 20px 0 0;
max-height: 88vh;
padding: 28px 20px 24px;
}
.book-modal.open { align-items: flex-end; }
.book-modal-pkg {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
/* Nav */
.nav-container { gap: 12px; }
.logo-img { height: 48px; max-width: 140px; object-fit: contain; }
#header.scrolled .logo-img { height: 42px; }
/* Range sliders — touch targets */
.range-slider { height: 28px; margin: 8px 0 12px; }
.range-values {
display: flex;
justify-content: space-between;
font-size: 13px;
}
.pkg-cat-list label { padding: 10px 0; }
.section-header {
text-align: center;
margin-bottom: 40px;
}
.section-header .section-desc {
margin-left: auto;
margin-right: auto;
}
.section-title br { display: none; }
.iconic-header { text-align: center; padding: 0 8px; }
.iconic-pill-num { margin-left: auto; margin-right: auto; }
.dtour-card { text-align: left; }
.empty,
.pkg-empty { margin: 0 auto; max-width: 100%; }
}
@media (max-width: 480px) {
.container { padding: 0 16px; }
/* Compact hero visual for narrow phones */
.hero-visual { height: 340px; padding: 18px 14px; }
.hero-photo,
.journey-trail { inset: 18px 14px; }
.hero-photo-shape { inset: 44px 0 0 0; }
.hero-polaroid { width: 84px; padding: 5px 5px 8px; }
.hero-polaroid img { height: 58px; }
.hero-polaroid small { font-size: 12px; margin-top: 3px; }
.hero-stat-card { padding: 6px 12px; right: 4px; bottom: 4px; }
.hero-stat-card strong{ font-size: 18px; }
.hsc-stars { font-size: 11px; }
.hero-stat-card span { font-size: 9px; }
.iconic-row { grid-template-columns: 1fr; }
.iconic-card:nth-child(2),
.iconic-card:nth-child(5) { margin-top: 0; }
.dest-banner,
.pkg-page-banner,
.gt-hero { padding-top: 96px; }
.td-stats { grid-template-columns: 1fr; }
.td-milestone { min-width: 100%; flex: 1 1 100%; }
.td-day-gallery { grid-template-columns: 1fr; }
.ct-phone-wrap { flex-direction: column; }
.ct-phone-code { flex: none !important; width: 100%; }
.ct-social { width: 46px; height: 46px; }
.gt-tour-summary { -webkit-line-clamp: 4; line-clamp: 4; }
.dt-filter-label-row { flex-wrap: wrap; gap: 8px; }
.pkg-quote-cta { padding: 18px 16px; text-align: center; }
.pkg-quote-cta .btn { width: 100%; justify-content: center; }
}
@media (max-width: 400px) {
h1 { font-size: 38px; }
h2 { font-size: 28px; }
.group-cards { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════
PACKAGES LISTING PAGE
═══════════════════════════════════════════════════ */
/* Banner with image overlay */
.pkg-page-banner {
position: relative;
padding: 180px 0 90px;
color: var(--white);
overflow: hidden;
isolation: isolate;
}
.pkg-page-banner-img {
position: absolute;
inset: 0;
z-index: -1;
}
.pkg-page-banner-img img {
width: 100%; height: 100%;
object-fit: cover;
filter: brightness(0.55);
}
.pkg-page-banner::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20,60,40,0.4) 0%, rgba(10,20,15,0.85) 100%);
z-index: -1;
}
.pkg-page-banner::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.5px);
background-size: 28px 28px;
z-index: -1;
opacity: 0.6;
}
.pkg-page-banner-inner { position: relative; text-align: center; }
.pkg-page-banner-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(38px, 5.5vw, 64px);
font-weight: 700;
color: var(--white);
letter-spacing: -0.5px;
line-height: 1.1;
margin-bottom: 14px;
}
.pkg-page-banner-desc {
font-size: 16px;
color: rgba(255,255,255,0.85);
max-width: 640px;
margin: 0 auto 22px;
line-height: 1.7;
}
.pkg-page-banner .breadcrumb {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.25);
color: rgba(255,255,255,0.85);
}
.pkg-page-banner .breadcrumb a { color: var(--orange-light); }
.pkg-page-banner .breadcrumb a:hover { color: var(--white); }
.pkg-page-banner .breadcrumb .current{ color: var(--white); }
.pkg-page-banner .breadcrumb .sep { color: rgba(255,255,255,0.4); }
/* List section */
.pkg-list-section {
background: var(--off-white);
padding: clamp(70px, 8vw, 110px) 0;
position: relative;
}
.pkg-results-head {
text-align: center;
margin-bottom: 50px;
}
.pkg-results-head .grp-eyebrow { color: var(--orange); }
.pkg-list-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(26px, 2.6vw, 34px);
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.3px;
line-height: 1.25;
margin-top: 4px;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.pkg-layout {
display: grid;
grid-template-columns: 300px 1fr;
gap: 36px;
align-items: start;
}
/* ───── Sidebar / filter card ───── */
.pkg-sidebar { position: sticky; top: 100px; }
.pkg-filter-card {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 22px;
padding: 26px 22px;
box-shadow: 0 12px 30px rgba(20,60,40,0.06), 0 2px 6px rgba(0,0,0,0.04);
}
.pkg-filter-head h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 14px;
letter-spacing: -0.2px;
}
.pkg-search {
position: relative;
margin-bottom: 22px;
}
.pkg-search svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px; height: 16px;
color: var(--text-muted);
}
.pkg-search input {
width: 100%;
border: 1px solid var(--gray-100);
background: var(--gray-50);
border-radius: 12px;
padding: 11px 14px 11px 38px;
font-family: 'Outfit', sans-serif;
font-size: 13px;
color: var(--text-primary);
transition: border-color 0.2s, background 0.2s;
}
.pkg-search input:focus {
outline: none;
border-color: var(--green-deep);
background: var(--white);
}
.pkg-filter-label {
display: inline-block;
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px dashed var(--gray-100);
width: 100%;
}
.pkg-filter-group {
padding: 16px 0;
border-bottom: 1px dashed var(--gray-100);
}
.pkg-filter-group:last-of-type { border-bottom: none; }
.pkg-filter-group h4 {
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 12px;
letter-spacing: 0.2px;
display: flex;
align-items: baseline;
justify-content: space-between;
}
.pkg-filter-group h4 small {
font-size: 11px;
font-weight: 400;
color: var(--text-muted);
}
/* Category radio list */
.pkg-cat-list {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.pkg-cat-list label {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Outfit', sans-serif;
font-size: 13px;
color: var(--text-secondary);
cursor: pointer;
padding: 4px 0;
transition: color 0.2s;
}
.pkg-cat-list label:hover { color: var(--green-deep); }
.pkg-cat-list input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 16px; height: 16px;
border: 1.5px solid var(--gray-200);
border-radius: 50%;
position: relative;
cursor: pointer;
flex-shrink: 0;
transition: border-color 0.2s, background 0.2s;
}
.pkg-cat-list input[type="radio"]:checked {
border-color: var(--green-deep);
background: var(--white);
}
.pkg-cat-list input[type="radio"]:checked::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--green-deep);
}
.pkg-cat-list input[type="radio"]:checked + span {
color: var(--green-deep);
font-weight: 500;
}
/* Range slider (dual handle) */
.range-slider {
position: relative;
height: 26px;
margin-bottom: 8px;
}
.range-track {
position: absolute;
top: 50%; left: 0; right: 0;
height: 4px;
background: var(--gray-100);
border-radius: 999px;
transform: translateY(-50%);
}
.range-fill {
position: absolute;
top: 50%;
height: 4px;
background: linear-gradient(90deg, var(--green-mid), var(--green-deep));
border-radius: 999px;
transform: translateY(-50%);
pointer-events: none;
}
.range-slider input[type="range"] {
position: absolute;
inset: 0;
width: 100%;
height: 26px;
background: none;
border: none;
pointer-events: none;
appearance: none;
-webkit-appearance: none;
}
.range-slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--white);
border: 2px solid var(--green-deep);
box-shadow: 0 3px 8px rgba(20,60,40,0.25);
cursor: pointer;
pointer-events: auto;
transition: transform 0.15s;
}
.range-slider input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.18); }
.range-slider input[type="range"]::-moz-range-thumb {
width: 18px; height: 18px;
border-radius: 50%;
background: var(--white);
border: 2px solid var(--green-deep);
box-shadow: 0 3px 8px rgba(20,60,40,0.25);
cursor: pointer;
pointer-events: auto;
}
.range-values {
display: flex;
justify-content: space-between;
font-family: 'Outfit', sans-serif;
font-size: 12px;
color: var(--text-secondary);
font-weight: 500;
}
.pkg-select-wrap {
position: relative;
}
.pkg-select-wrap::after {
content: '▾';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 14px;
pointer-events: none;
}
.pkg-select-wrap select {
appearance: none;
-webkit-appearance: none;
width: 100%;
border: 1px solid var(--gray-100);
background: var(--gray-50);
border-radius: 12px;
padding: 10px 36px 10px 14px;
font-family: 'Outfit', sans-serif;
font-size: 13px;
color: var(--text-primary);
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
}
.pkg-select-wrap select:focus {
outline: none;
border-color: var(--green-deep);
background: var(--white);
}
/* Custom quote CTA */
.pkg-quote-cta {
margin-top: 22px;
padding: 22px 18px;
background: linear-gradient(160deg, var(--orange-pale) 0%, var(--green-pale) 100%);
border: 1px dashed rgba(244,133,43,0.45);
border-radius: 18px;
text-align: center;
position: relative;
}
.pkg-quote-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
background: var(--white);
border: 2px solid var(--orange);
color: var(--orange);
border-radius: 50%;
font-family: 'Cormorant Garamond', serif;
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
}
.pkg-quote-cta p {
font-size: 12px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0 0 14px;
}
.pkg-quote-cta p strong { color: var(--text-primary); font-weight: 600; }
.pkg-quote-cta .btn {
font-size: 13px;
padding: 10px 22px;
}
/* ───── Results column ───── */
.pkg-results-bar {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 22px;
padding: 14px 18px;
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 14px;
}
#pkgCount {
font-family: 'Outfit', sans-serif;
font-size: 14px;
color: var(--text-secondary);
}
#pkgCount strong { color: var(--text-primary); font-weight: 600; }
.pkg-sort {
display: inline-flex;
align-items: center;
gap: 8px;
}
.pkg-sort label {
font-family: 'Outfit', sans-serif;
font-size: 13px;
color: var(--text-muted);
}
.pkg-sort select {
appearance: none;
-webkit-appearance: none;
border: 1px solid var(--gray-100);
background: var(--gray-50);
border-radius: 10px;
padding: 8px 30px 8px 12px;
font-family: 'Outfit', sans-serif;
font-size: 13px;
color: var(--text-primary);
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
}
/* Grid */
.pkg-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
/* ───── V2 listing card ───── */
.pkg-card-v2 {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 22px rgba(20,60,40,0.06), 0 2px 6px rgba(0,0,0,0.04);
display: flex;
flex-direction: column;
transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.4s;
opacity: 0;
transform: translateY(24px);
animation: pkgV2Rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes pkgV2Rise {
to { opacity: 1; transform: translateY(0); }
}
.pkg-card-v2:hover {
transform: translateY(-6px);
border-color: rgba(43,123,67,0.25);
box-shadow: 0 18px 38px rgba(20,60,40,0.14), 0 6px 14px rgba(0,0,0,0.06);
}
.pkg-v2-media {
position: relative;
height: 200px;
overflow: hidden;
}
.pkg-v2-media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.8s var(--ease);
}
.pkg-card-v2:hover .pkg-v2-media img { transform: scale(1.08); }
.pkg-v2-cat {
position: absolute;
top: 12px;
left: 12px;
background: linear-gradient(135deg, var(--green-mid), var(--green-deep));
color: var(--white);
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
padding: 6px 13px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 6px 14px rgba(43,123,67,0.32);
z-index: 2;
}
.pkg-v2-cat[data-cat="adventure"] { background: linear-gradient(135deg, #d96f2f, var(--orange)); box-shadow: 0 6px 14px rgba(244,133,43,0.32); }
.pkg-v2-cat[data-cat="cultural"] { background: linear-gradient(135deg, #6b4a23, #3b2916); box-shadow: 0 6px 14px rgba(70,42,18,0.32); }
.pkg-v2-cat[data-cat="beach"] { background: linear-gradient(135deg, #2a9bbf, #1e6e8c); box-shadow: 0 6px 14px rgba(30,110,140,0.32); }
.pkg-v2-cat[data-cat="honeymoon"] { background: linear-gradient(135deg, #e16d8c, #ad2e57); box-shadow: 0 6px 14px rgba(173,46,87,0.32); }
.pkg-v2-cat[data-cat="luxury"] { background: linear-gradient(135deg, #b8893f, #6e4f1d); box-shadow: 0 6px 14px rgba(110,79,29,0.32); }
.pkg-v2-cat[data-cat="wellness"] { background: linear-gradient(135deg, #6fb979, #2e8b40); box-shadow: 0 6px 14px rgba(46,139,64,0.32); }
.pkg-v2-cat[data-cat="family"] { background: linear-gradient(135deg, #f0b54b, #d68c1e); box-shadow: 0 6px 14px rgba(214,140,30,0.32); }
.pkg-v2-price {
position: absolute;
top: 12px;
right: 12px;
background: var(--white);
color: var(--orange);
font-family: 'Cormorant Garamond', serif;
font-size: 17px;
font-weight: 700;
padding: 6px 16px;
border-radius: 999px;
box-shadow: 0 6px 14px rgba(0,0,0,0.15);
z-index: 2;
letter-spacing: -0.3px;
}
.pkg-v2-body {
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
flex: 1;
}
.pkg-v2-body h3 {
font-family: 'Outfit', sans-serif;
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.2px;
line-height: 1.3;
margin: 0 0 6px;
min-height: 41px;
}
.pkg-v2-loc {
display: flex;
align-items: flex-start;
gap: 6px;
font-family: 'Outfit', sans-serif;
font-size: 12px;
color: var(--orange);
font-weight: 500;
margin: 0 0 10px;
line-height: 1.4;
}
.pkg-v2-loc svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.pkg-v2-desc {
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0 0 12px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pkg-v2-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
margin: 0 0 16px;
padding: 12px 0;
border-top: 1px dashed var(--gray-100);
border-bottom: 1px dashed var(--gray-100);
}
.pkg-v2-meta span {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Outfit', sans-serif;
font-size: 11px;
color: var(--text-secondary);
font-weight: 500;
}
.pkg-v2-meta svg { width: 14px; height: 14px; color: var(--green-deep); }
.pkg-v2-actions {
display: flex;
gap: 8px;
margin-top: auto;
}
.pkg-v2-actions .btn-pill-view,
.pkg-v2-actions .btn-pill-book {
flex: 1;
text-align: center;
justify-content: center;
}
/* Empty state */
.pkg-empty {
text-align: center;
padding: 60px 20px;
background: var(--white);
border: 1px dashed var(--gray-200);
border-radius: 18px;
color: var(--text-secondary);
}
.pkg-empty svg {
width: 56px; height: 56px;
color: var(--gray-200);
margin-bottom: 14px;
}
.pkg-empty h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
color: var(--text-primary);
margin-bottom: 8px;
}
.pkg-empty p {
font-size: 14px;
max-width: 360px;
margin: 0 auto 18px;
line-height: 1.6;
}
/* Pagination dots */
.pkg-pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 36px;
flex-wrap: wrap;
}
.pkg-page-dot {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--white);
border: 1px solid var(--gray-100);
color: var(--text-secondary);
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.pkg-page-dot:hover {
border-color: var(--orange);
color: var(--orange);
transform: translateY(-2px);
}
.pkg-page-dot.active {
background: linear-gradient(135deg, var(--green-mid), var(--green-deep));
color: var(--white);
border-color: transparent;
box-shadow: 0 6px 14px rgba(43,123,67,0.35);
}
/* Responsive — Tablet */
@media (max-width: 1024px) {
.pkg-layout { grid-template-columns: 240px 1fr; gap: 24px; }
.pkg-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pkg-sidebar { position: static; }
.pkg-page-banner { padding: 150px 0 70px; }
}
/* Packages mobile — extended in global 768px block */
@media (max-width: 768px) {
.pkg-layout { grid-template-columns: 1fr; gap: 24px; }
.pkg-grid { grid-template-columns: 1fr; gap: 20px; }
.pkg-list-section { padding: 48px 0 56px; }
.pkg-filter-card { padding: 22px 18px; }
.pkg-card-v2 { animation: none; opacity: 1; transform: none; }
.pkg-v2-body { padding: 18px 18px 20px; }
.pkg-v2-body h3 { font-size: 22px; }
}
/* ═══════════════════════════════════════════════════
DESTINATIONS LISTING PAGE
═══════════════════════════════════════════════════ */
/* Dark banner with highlighted word */
.dest-banner {
position: relative;
padding: 140px 0 70px;
color: var(--white);
overflow: hidden;
isolation: isolate;
background: var(--green-deep);
}
.dest-banner-img {
position: absolute;
inset: 0;
z-index: -1;
}
.dest-banner-img img {
width: 100%; height: 100%;
object-fit: cover;
filter: brightness(0.4) saturate(0.85);
}
.dest-banner::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(20,60,40,0.85) 0%, rgba(10,30,20,0.95) 60%, rgba(10,30,20,0.98) 100%);
z-index: -1;
}
.dest-banner::after {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(rgba(244,133,43,0.08) 1.5px, transparent 2px),
radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1.5px);
background-size: 80px 80px, 28px 28px;
background-position: 0 0, 14px 14px;
z-index: -1;
opacity: 0.7;
animation: pkgDotsDrift 80s linear infinite;
}
.dest-banner-inner {
position: relative;
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.dest-banner-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 700;
font-size: clamp(36px, 4.6vw, 58px);
color: var(--white);
line-height: 1.08;
letter-spacing: -1px;
margin-bottom: 16px;
}
.dest-banner-hl {
display: inline-block;
background: linear-gradient(135deg, #f9a85a, var(--orange));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-style: italic;
position: relative;
animation: destHlPulse 4s ease-in-out infinite;
}
.dest-banner-hl::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 3px;
background: linear-gradient(90deg, transparent, var(--orange), transparent);
border-radius: 2px;
transform-origin: center;
animation: destHlLine 4s ease-in-out infinite;
}
@keyframes destHlPulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.15); }
}
@keyframes destHlLine {
0%, 100% { transform: scaleX(0.7); opacity: 0.7; }
50% { transform: scaleX(1); opacity: 1; }
}
.dest-banner-desc {
font-size: 15px;
color: rgba(255,255,255,0.82);
max-width: 620px;
margin: 0 auto 22px;
line-height: 1.72;
}
.dest-banner .breadcrumb {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.2);
color: rgba(255,255,255,0.78);
margin: 0 auto;
}
.dest-banner .breadcrumb a { color: var(--orange-light); }
.dest-banner .breadcrumb a:hover { color: var(--white); }
.dest-banner .breadcrumb .current{ color: var(--white); }
.dest-banner .breadcrumb .sep { color: rgba(255,255,255,0.4); }
/* Shared inner-page banner pattern */
.dest-banner.pkg-page-banner,
.dest-banner.gt-hero,
.dest-banner.hotel-hero,
.dest-banner.ct-page-banner {
min-height: auto;
margin-top: 0;
display: block;
text-align: center;
}
.dest-banner .pkg-page-banner-inner,
.dest-banner .gt-hero-inner,
.dest-banner .hotel-hero-inner {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.dest-banner .gt-hero-title,
.dest-banner .hotel-hero h1,
.dest-banner.hotel-hero h1 {
font-family: 'Cormorant Garamond', serif;
font-weight: 700;
letter-spacing: -1.5px;
}
.dest-banner .gt-hero-desc,
.dest-banner.hotel-hero p {
margin-left: auto;
margin-right: auto;
color: rgba(255,255,255,0.78);
}
.dest-banner .gt-breadcrumb {
justify-content: center;
margin: 0 auto;
}
.dest-banner.hotel-hero::after {
display: none;
}
.hotel-search-section {
margin-top: 34px;
}
/* List section — light background (day tours + destinations) */
.dest-list-section {
background: var(--off-white);
padding: clamp(70px, 8vw, 110px) 0;
color: var(--text-primary);
position: relative;
}
.dest-list-section::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(26,92,56,0.04) 1px, transparent 1.5px);
background-size: 32px 32px;
opacity: 0.6;
pointer-events: none;
}
.dest-results-head {
text-align: center;
margin-bottom: 50px;
position: relative;
z-index: 2;
}
.dest-results-head .grp-eyebrow { color: var(--orange); }
.dest-list-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(22px, 2.6vw, 34px);
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.2px;
line-height: 1.35;
margin-top: 6px;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.dest-results-head::after {
content: '';
display: block;
width: 80px;
height: 3px;
margin: 16px auto 0;
background: linear-gradient(90deg, var(--green-deep), var(--orange));
border-radius: 2px;
}
.dest-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
align-items: start;
position: relative;
z-index: 2;
}
/* ───── Sidebar ───── */
.dest-sidebar { position: sticky; top: 100px; }
.dest-filter-card {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 22px;
padding: 26px 22px;
box-shadow: 0 12px 30px rgba(20,60,40,0.06), 0 2px 6px rgba(0,0,0,0.04);
}
.dest-filter-head h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 14px;
letter-spacing: -0.2px;
}
.dest-filter-card .pkg-search input {
background: var(--gray-50);
border-color: var(--gray-100);
color: var(--text-primary);
}
.dest-filter-card .pkg-search input::placeholder { color: var(--text-muted); }
.dest-filter-card .pkg-search input:focus {
border-color: var(--green-deep);
background: var(--white);
}
.dest-filter-card .pkg-search svg { color: var(--text-muted); }
.dest-filter-card .pkg-filter-label {
color: var(--text-muted);
border-bottom-color: var(--gray-100);
margin-top: 8px;
}
/* Category chips */
.dest-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 22px;
}
.dest-chip {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--gray-50);
border: 1px solid var(--gray-200);
color: var(--text-secondary);
font-family: 'Outfit', sans-serif;
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.2px;
padding: 6px 12px;
border-radius: 999px;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.dest-chip::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--orange);
opacity: 0.6;
flex-shrink: 0;
}
.dest-chip:hover {
background: var(--orange-pale);
border-color: var(--orange);
color: var(--green-deep);
transform: translateY(-1px);
}
.dest-chip.active {
background: linear-gradient(135deg, var(--green-mid), var(--green-deep));
border-color: var(--green-mid);
color: var(--white);
box-shadow: 0 6px 14px rgba(43,123,67,0.4);
}
.dest-chip.active::before { background: var(--orange-light); opacity: 1; }
.dest-filter-foot { padding-top: 14px; border-top: 1px dashed var(--gray-200); }
.dest-filter-foot h4 {
font-family: 'Outfit', sans-serif;
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 10px;
}
.dest-filter-foot .pkg-select-wrap select {
background: var(--gray-50);
border-color: var(--gray-100);
color: var(--text-primary);
}
.dest-filter-foot .pkg-select-wrap::after { color: var(--text-muted); }
.dest-filter-reset {
margin-top: 14px;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: transparent;
color: var(--green-deep);
border: 1px dashed var(--gray-200);
border-radius: 12px;
padding: 10px;
font-family: 'Outfit', sans-serif;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.dest-filter-reset svg { width: 14px; height: 14px; }
.dest-filter-reset:hover {
background: var(--orange-pale);
border-color: var(--orange);
color: var(--orange);
}
/* ───── Results column ───── */
.dest-results-bar {
margin-bottom: 22px;
font-family: 'Outfit', sans-serif;
font-size: 13px;
color: var(--text-muted);
}
.dest-results-bar strong { color: var(--green-deep); font-weight: 600; }
.dest-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
/* Destination card — full-bleed image + bottom overlay */
.dcard {
position: relative;
aspect-ratio: 4 / 5.3;
border-radius: 22px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 12px 30px rgba(0,0,0,0.4);
isolation: isolate;
opacity: 0;
transform: translateY(28px);
animation: pkgV2Rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(var(--i, 0) * 80ms);
transition: transform 0.5s var(--ease), box-shadow 0.5s;
}
.dcard:hover {
transform: translateY(-6px);
box-shadow: 0 24px 50px rgba(0,0,0,0.55);
}
.dcard-img { position: absolute; inset: 0; }
.dcard-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease), filter 0.6s;
}
.dcard:hover .dcard-img img {
transform: scale(1.1);
filter: saturate(1.15);
}
.dcard-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(10,30,20,0) 30%, rgba(10,30,20,0.85) 75%, rgba(10,30,20,0.96) 100%);
pointer-events: none;
z-index: 1;
}
.dcard-body {
position: absolute;
inset: auto 0 0 0;
padding: 18px 20px 20px;
color: var(--white);
z-index: 2;
}
.dcard-body h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
font-weight: 700;
color: var(--white);
letter-spacing: -0.3px;
line-height: 1.15;
margin: 0 0 6px;
}
.dcard-region {
display: flex;
align-items: flex-start;
gap: 6px;
font-family: 'Outfit', sans-serif;
font-size: 11.5px;
color: var(--orange-light);
font-weight: 500;
margin: 0 0 8px;
line-height: 1.4;
}
.dcard-region svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; }
.dcard-desc {
font-family: 'Outfit', sans-serif;
font-size: 12px;
color: rgba(255,255,255,0.75);
line-height: 1.55;
margin: 0 0 10px;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.4s ease, opacity 0.35s ease, margin 0.4s ease;
}
.dcard:hover .dcard-desc {
max-height: 80px;
opacity: 1;
}
.dcard-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 12px;
}
.dcard-tag {
background: linear-gradient(135deg, var(--green-mid), var(--green-deep));
color: var(--white);
font-family: 'Outfit', sans-serif;
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.3px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.18);
}
.dcard-tag[data-cat="cultural"] { background: linear-gradient(135deg, #6b4a23, #3b2916); }
.dcard-tag[data-cat="religious"] { background: linear-gradient(135deg, #a06bb8, #5a3779); }
.dcard-tag[data-cat="beaches"] { background: linear-gradient(135deg, #2a9bbf, #1e6e8c); }
.dcard-tag[data-cat="nature"] { background: linear-gradient(135deg, #6fb979, #2e8b40); }
.dcard-tag[data-cat="wildlife"] { background: linear-gradient(135deg, #d96f2f, var(--orange)); }
.dcard-tag[data-cat="heritage"] { background: linear-gradient(135deg, #b8893f, #6e4f1d); }
.dcard-tag[data-cat="adventure"] { background: linear-gradient(135deg, #f06d4c, #c4422a); }
.dcard-tag[data-cat="tea"] { background: linear-gradient(135deg, #6da66b, #3d6f3b); }
.dcard-tag[data-cat="waterfalls"] { background: linear-gradient(135deg, #4cc9f0, #2a6fa3); }
.dcard-tag[data-cat="lakes"] { background: linear-gradient(135deg, #5fb3d4, #1e6e8c); }
.dcard-tag[data-cat="colonial"] { background: linear-gradient(135deg, #b07a3e, #774a1c); }
.dcard-tag[data-cat="island"] { background: linear-gradient(135deg, #38c2a8, #176f5f); }
.dcard-tag[data-cat="urban"] { background: linear-gradient(135deg, #6f6f7a, #2f2f37); }
.dcard-tag[data-cat="wellness"] { background: linear-gradient(135deg, #88c5a3, #3b8a64); }
.dcard-tag[data-cat="festivals"] { background: linear-gradient(135deg, #f0b54b, #d68c1e); }
.dcard-tag[data-cat="animal"] { background: linear-gradient(135deg, #d4a07a, #82542a); }
.dcard-cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(244,133,43,0.16);
border: 1px solid var(--orange);
color: var(--orange-light);
font-family: 'Outfit', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
padding: 9px 16px;
border-radius: 999px;
text-decoration: none;
transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.dcard-cta-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
background: var(--orange);
color: var(--white);
border-radius: 50%;
font-size: 13px;
font-weight: 700;
transition: transform 0.25s;
}
.dcard:hover .dcard-cta {
background: var(--orange);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(244,133,43,0.4);
}
.dcard:hover .dcard-cta-arrow { transform: translateX(3px); }
/* Empty state & pagination use default .pkg-empty / .pkg-page-dot on light bg */
/* Responsive — Tablet */
@media (max-width: 1024px) {
.dest-layout { grid-template-columns: 230px 1fr; gap: 22px; }
.dest-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.dest-sidebar { position: static; }
}
/* Destinations mobile — extended in global 768px block */
@media (max-width: 768px) {
.dest-layout { grid-template-columns: 1fr; gap: 24px; }
.dest-grid { grid-template-columns: 1fr; gap: 18px; }
.dest-list-section { padding: 48px 0 56px; }
.dest-filter-card { padding: 22px 18px; }
.dcard {
animation: none;
opacity: 1;
transform: none;
aspect-ratio: 4 / 4.5;
}
.dcard-body { padding: 16px 18px 18px; }
.dcard-body h3 { font-size: 20px; }
.dcard-desc { max-height: 80px; opacity: 1; }
.dcard-cta { width: 100%; justify-content: center; }
}
/* ═══════════════════════════════════════════════════════════════════════
DAY TOURS PAGE
═══════════════════════════════════════════════════════════════════════ */
/* Banner reuses .dest-banner — only tweak title size for this page */
.dt-banner .dest-banner-title { font-size: clamp(36px, 5.5vw, 60px); }
/* Day tours listing uses shared light .dest-results-head / .dest-list-title above */
.dest-list-section .dest-results-head { margin-bottom: 36px; }
/* Filter label row with Clear All link */
.dt-filter-label-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4px;
margin: 18px 0 10px;
}
.pkg-filter-label {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 14px;
color: var(--text-muted);
letter-spacing: 0.4px;
text-transform: uppercase;
}
.dt-clear-btn {
background: transparent;
border: 0;
color: var(--green-deep);
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 13px;
cursor: pointer;
padding: 4px 6px;
border-radius: 8px;
transition: background 0.2s ease, color 0.2s ease;
}
.dt-clear-btn:hover {
background: var(--green-pale);
color: var(--orange);
}
/* ── Day Tours grid (3 columns of full-bleed image cards) ── */
.dt-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-bottom: 32px;
}
.dt-card {
position: relative;
border-radius: 18px;
overflow: hidden;
background: #0b1227;
aspect-ratio: 3 / 3.6;
box-shadow: 0 12px 30px rgba(0,0,0,0.35);
isolation: isolate;
opacity: 0;
transform: translateY(20px);
animation: pkgV2Rise 0.7s ease forwards;
animation-delay: calc(var(--i, 0) * 0.06s);
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.45s ease;
}
.dt-card:hover {
transform: translateY(-8px);
box-shadow: 0 22px 50px rgba(244,133,43,0.28);
}
.dt-card-img {
position: absolute;
inset: 0;
z-index: 0;
}
.dt-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s ease, filter 0.5s ease;
}
.dt-card:hover .dt-card-img img {
transform: scale(1.1);
filter: saturate(1.15) contrast(1.05);
}
.dt-card-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg,
rgba(0,0,0,0.05) 0%,
rgba(0,0,0,0.15) 35%,
rgba(7, 30, 18, 0.78) 70%,
rgba(7, 30, 18, 0.96) 100%);
pointer-events: none;
}
/* Top badges */
.dt-places {
position: absolute;
top: 14px; left: 14px;
z-index: 3;
background: var(--brand-primary);
color: var(--white);
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 12px;
padding: 6px 14px;
border-radius: 999px;
letter-spacing: 0.3px;
box-shadow: 0 4px 12px rgba(26,92,56,0.4);
}
.dt-price {
position: absolute;
top: 14px; right: 14px;
z-index: 3;
background: var(--white);
color: var(--brand-primary);
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 14px;
padding: 6px 14px;
border-radius: 999px;
letter-spacing: 0.2px;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* Card body */
.dt-card-body {
position: absolute;
inset: auto 0 0 0;
z-index: 2;
padding: 18px 18px 16px;
display: flex;
flex-direction: column;
gap: 6px;
color: var(--white);
}
.dt-card-body h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 700;
font-size: 22px;
line-height: 1.2;
margin: 0;
color: var(--white);
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.dt-card-loc {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 13px;
color: var(--brand-primary-light, #4ade80);
margin: 2px 0 4px;
}
.dt-card-loc svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.dt-card-desc {
font-size: 13px;
line-height: 1.5;
color: rgba(255,255,255,0.78);
margin: 0 0 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: 40px;
opacity: 0.85;
transition: max-height 0.45s ease, opacity 0.35s ease, -webkit-line-clamp 0.45s ease;
}
.dt-card:hover .dt-card-desc {
-webkit-line-clamp: 3;
line-clamp: 3;
max-height: 80px;
opacity: 1;
}
/* Actions row at bottom of card */
.dt-card-actions {
display: flex;
gap: 8px;
align-items: center;
margin-top: 4px;
}
.dt-btn-view,
.dt-btn-book {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 12.5px;
letter-spacing: 0.2px;
padding: 10px 14px;
border-radius: 999px;
cursor: pointer;
border: 0;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease,
background 0.25s ease, color 0.25s ease;
white-space: nowrap;
}
.dt-btn-view {
flex: 1;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.92);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.dt-btn-view:hover {
background: rgba(255,255,255,0.16);
color: var(--white);
transform: translateY(-2px);
}
.dt-btn-book {
background: var(--brand-primary);
color: var(--white);
box-shadow: 0 6px 14px rgba(26,92,56,0.4);
position: relative;
overflow: hidden;
}
.dt-btn-book::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg,
transparent 0%,
rgba(255,255,255,0.35) 50%,
transparent 100%);
transform: translateX(-120%);
transition: transform 0.55s ease;
}
.dt-btn-book:hover {
background: var(--orange);
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(244,133,43,0.5);
}
.dt-btn-book:hover::after { transform: translateX(120%); }
/* Responsive — Tablet */
@media (max-width: 1024px) {
.dt-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
/* Day tours mobile — see global MOBILE block at 768px */
@media (max-width: 768px) {
.dt-grid { grid-template-columns: 1fr; gap: 18px; }
.dt-card { aspect-ratio: 4 / 4.2; animation: none; opacity: 1; transform: none; }
}
/* ═══════════════════════════════════════════════════════════════════════
TOUR DETAIL / BOOKING PAGE
═══════════════════════════════════════════════════════════════════════ */
.td-page { background: var(--gray-50); }
.td-top-bar {
padding: 100px 0 20px;
background: var(--white);
border-bottom: 1px solid var(--border);
}
.td-top-bar .breadcrumb { margin: 0; }
.td-top-bar .breadcrumb a { color: var(--green-deep); }
.td-top-bar .breadcrumb a:hover { color: var(--orange); }
.td-top-bar .breadcrumb .current { color: var(--text-secondary); }
.td-main { padding: 32px 0 80px; }
.td-loading {
text-align: center;
padding: 80px 20px;
color: var(--text-muted);
font-size: 17px;
}
.td-not-found {
text-align: center;
padding: 80px 20px;
}
.td-not-found h1 {
font-family: 'Cormorant Garamond', serif;
font-size: 36px;
color: var(--green-deep);
margin-bottom: 12px;
}
.td-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 36px;
align-items: start;
}
/* ── Summary (main column top) ── */
.td-summary {
background: var(--white);
border-radius: 20px;
padding: 36px 40px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
margin-bottom: 28px;
}
.td-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 700;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.15;
color: var(--orange);
margin-bottom: 28px;
}
.td-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 28px;
padding-bottom: 28px;
border-bottom: 1px solid var(--gray-100);
}
.td-stat {
text-align: center;
padding: 16px 10px;
background: var(--green-pale);
border-radius: 14px;
border: 1px solid rgba(26,92,56,0.1);
}
.td-stat-icon {
display: flex;
justify-content: center;
margin-bottom: 8px;
color: var(--green-deep);
}
.td-stat-icon svg { width: 26px; height: 26px; }
.td-stat-label {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
margin-bottom: 4px;
}
.td-stat strong {
font-size: 14px;
font-weight: 600;
color: var(--green-deep);
line-height: 1.3;
}
.td-overview {
font-size: 16px;
line-height: 1.75;
color: var(--text-secondary);
margin-bottom: 20px;
}
.td-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
}
.td-tag {
font-size: 12px;
font-weight: 600;
padding: 6px 14px;
border-radius: 999px;
background: var(--green-pale);
color: var(--green-deep);
border: 1px solid rgba(26,92,56,0.15);
}
.td-quick-nav {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
padding-top: 20px;
border-top: 1px solid var(--gray-100);
}
.td-quick-nav a {
font-size: 14px;
font-weight: 600;
color: var(--green-mid);
text-decoration: none;
transition: color 0.2s ease;
}
.td-quick-nav a:hover { color: var(--orange); }
/* ── Sections ── */
.td-section {
background: var(--white);
border-radius: 20px;
padding: 32px 36px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
margin-bottom: 28px;
}
.td-section-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 700;
font-size: 28px;
color: var(--green-deep);
margin-bottom: 8px;
}
.td-section-sub {
font-size: 15px;
color: var(--text-muted);
margin-bottom: 28px;
}
/* ── Itinerary timeline ── */
.td-timeline {
position: relative;
padding-left: 28px;
}
.td-timeline::before {
content: "";
position: absolute;
left: 11px;
top: 8px;
bottom: 8px;
width: 3px;
background: linear-gradient(180deg, var(--green-light), var(--green-deep));
border-radius: 3px;
}
.td-day-card {
position: relative;
margin-bottom: 28px;
opacity: 0;
animation: pkgV2Rise 0.65s ease forwards;
animation-delay: calc(var(--i, 0) * 0.08s);
}
.td-day-card:last-child { margin-bottom: 0; }
.td-day-marker {
position: absolute;
left: -20px;
top: 28px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--green-deep);
border: 3px solid var(--white);
box-shadow: 0 0 0 2px var(--green-light);
z-index: 2;
}
.td-day-label {
display: inline-block;
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
color: var(--orange);
margin-bottom: 6px;
}
.td-day-inner {
background: linear-gradient(145deg, #fffef9 0%, #f8f6f0 50%, #f3f0e8 100%);
border: 1px solid rgba(26,92,56,0.12);
border-radius: 16px;
padding: 24px 28px;
margin-left: 12px;
box-shadow: 0 4px 20px rgba(26,92,56,0.06);
}
.td-day-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 700;
font-size: 22px;
color: var(--green-deep);
margin-bottom: 10px;
}
.td-day-desc {
font-size: 15px;
line-height: 1.7;
color: var(--text-secondary);
margin-bottom: 14px;
}
.td-day-schedule {
list-style: none;
margin: 0 0 14px;
padding: 12px 16px;
background: rgba(255,255,255,0.7);
border-radius: 10px;
border-left: 3px solid var(--green-light);
}
.td-day-schedule li {
font-size: 14px;
color: var(--text-secondary);
padding: 4px 0;
}
.td-day-schedule strong { color: var(--green-deep); }
.td-day-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
}
.td-day-tag {
font-size: 11px;
font-weight: 600;
padding: 4px 12px;
border-radius: 999px;
background: var(--green-deep);
color: var(--white);
}
.td-day-meta {
display: flex;
flex-wrap: wrap;
gap: 16px 24px;
margin-bottom: 16px;
font-size: 13px;
color: var(--text-muted);
}
.td-day-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.td-day-meta-item svg { width: 16px; height: 16px; color: var(--green-mid); flex-shrink: 0; }
.td-day-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.td-day-img {
border-radius: 10px;
overflow: hidden;
aspect-ratio: 4/3;
background: var(--gray-100);
}
.td-day-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.td-day-img:hover img { transform: scale(1.06); }
/* ── Inclusions grid ── */
.td-inc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.td-inc-col h3 {
font-family: 'Outfit', sans-serif;
font-size: 16px;
font-weight: 600;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.td-inc-icon {
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
}
.td-inc-icon--yes { background: var(--green-pale); color: var(--green-deep); }
.td-inc-icon--no { background: #fde8e8; color: #c0392b; }
.td-inc-col ul { list-style: none; }
.td-inc-col li {
font-size: 14px;
line-height: 1.6;
color: var(--text-secondary);
padding: 8px 0 8px 22px;
position: relative;
border-bottom: 1px solid var(--gray-100);
}
.td-inc-col li:last-child { border-bottom: 0; }
.td-inc-yes li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--green-deep);
font-weight: 700;
}
.td-inc-no li::before {
content: "✕";
position: absolute;
left: 0;
color: #c0392b;
font-weight: 700;
}
/* ── Alert boxes ── */
.td-alert {
border-radius: 16px;
padding: 24px 28px;
margin-bottom: 24px;
}
.td-alert h3 {
font-family: 'Outfit', sans-serif;
font-size: 17px;
font-weight: 600;
margin-bottom: 12px;
}
.td-alert-info {
display: flex;
gap: 16px;
background: #e8f4fc;
border: 1px solid #b8d9f0;
color: #1a4a6e;
}
.td-alert-info .td-alert-icon {
font-size: 22px;
flex-shrink: 0;
width: 36px;
height: 36px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.td-alert-info ul {
list-style: disc;
padding-left: 18px;
font-size: 14px;
line-height: 1.7;
}
.td-alert-booking {
background: var(--white);
border: 2px solid var(--green-deep);
}
.td-alert-booking p {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 16px;
}
.td-milestones-label {
display: block;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
margin-bottom: 10px;
}
.td-milestone-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.td-milestone {
flex: 1;
min-width: 56px;
text-align: center;
padding: 12px 8px;
background: var(--green-pale);
border: 1px solid rgba(26,92,56,0.2);
border-radius: 10px;
font-weight: 700;
font-size: 15px;
color: var(--green-deep);
}
.td-alert-cancel {
display: flex;
gap: 16px;
background: #fef0f0;
border: 1px solid #f5c6c6;
color: #6b2d2d;
}
.td-alert-cancel .td-alert-icon {
font-size: 22px;
flex-shrink: 0;
}
.td-alert-cancel p { font-size: 14px; line-height: 1.7; margin: 0; }
/* ── Sticky booking sidebar ── */
.td-col-side { position: relative; }
.td-book-card {
position: sticky;
top: 100px;
background: var(--white);
border-radius: 20px;
padding: 28px 24px;
box-shadow: var(--shadow-md);
border: 1px solid var(--border);
}
.td-book-price {
text-align: center;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--gray-100);
}
.td-book-price small {
display: block;
font-size: 12px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.td-book-price strong {
display: block;
font-family: 'Cormorant Garamond', serif;
font-size: 42px;
font-weight: 700;
color: var(--green-deep);
line-height: 1.1;
}
.td-book-price span {
font-size: 13px;
color: var(--text-muted);
}
.td-book-rating {
text-align: center;
margin-bottom: 20px;
font-size: 13px;
color: var(--text-secondary);
}
.td-stars { color: var(--orange); letter-spacing: 1px; margin-right: 4px; }
.td-book-form label {
display: block;
margin-bottom: 14px;
}
.td-book-form label span {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.td-book-form select {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--gray-200);
border-radius: 10px;
font-family: 'Outfit', sans-serif;
font-size: 15px;
color: var(--text-primary);
background: var(--white);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a5c38' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
.td-book-cta {
width: 100%;
margin-top: 8px;
padding: 14px;
font-size: 16px;
}
.td-wishlist-btn {
width: 100%;
margin-top: 10px;
padding: 12px;
background: transparent;
border: 2px solid var(--green-deep);
color: var(--green-deep);
font-weight: 600;
border-radius: 999px;
cursor: pointer;
transition: all 0.25s ease;
}
.td-wishlist-btn:hover,
.td-wishlist-btn.active {
background: var(--green-pale);
border-color: var(--orange);
color: var(--orange);
}
.td-support {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--gray-100);
text-align: center;
}
.td-support h4 {
font-size: 14px;
font-weight: 600;
color: var(--green-deep);
margin-bottom: 12px;
}
.td-support-wa {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: #25d366;
color: var(--white);
border-radius: 999px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
margin-bottom: 12px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.td-support-wa svg { width: 20px; height: 20px; }
.td-support-wa:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(37,211,102,0.4);
color: var(--white);
}
.td-support p { font-size: 13px; margin: 4px 0; }
.td-support a { color: var(--green-mid); font-weight: 500; }
.td-support a:hover { color: var(--orange); }
/* Tour detail tablet */
@media (max-width: 1024px) {
.td-layout {
display: grid;
grid-template-columns: 1fr;
}
.td-book-card { position: static; }
.td-stats { grid-template-columns: repeat(2, 1fr); }
.td-day-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.td-inc-grid { grid-template-columns: 1fr; }
.td-day-inner { margin-left: 0; padding: 20px; }
.td-timeline { padding-left: 0; }
.td-timeline::before,
.td-day-marker { display: none; }
.td-day-card { animation: none; opacity: 1; }
.td-alert { padding: 18px 16px; }
.td-alert-info { flex-direction: column; }
}
/* ═══════════════════════════════════════════════════════════════════════
CONTACT PAGE
═══════════════════════════════════════════════════════════════════════ */
.ct-page { background: var(--gray-50); }
.ct-top-bar {
padding: 100px 0 24px;
background: var(--white);
border-bottom: 1px solid var(--border);
}
.ct-top-bar .breadcrumb {
margin: 0;
background: transparent;
border: 0;
padding: 0;
border-radius: 0;
}
.ct-top-bar .breadcrumb a { color: var(--green-deep); }
.ct-top-bar .breadcrumb a:hover { color: var(--orange); }
.ct-top-bar .breadcrumb .current { color: var(--text-secondary); }
.ct-main { padding-bottom: 80px; }
/* ── Hero: form + info cards ── */
.ct-hero { padding: 40px 0 56px; }
.ct-hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 28px;
align-items: stretch;
}
.ct-card {
background: var(--white);
border-radius: 20px;
padding: 36px 32px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
}
.ct-card-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 700;
font-size: 28px;
color: var(--green-deep);
margin-bottom: 8px;
}
.ct-card-sub {
font-size: 15px;
color: var(--text-muted);
margin-bottom: 28px;
}
.ct-form-card .contact-form.ct-form {
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
border-radius: 0;
}
.ct-submit {
margin-top: 8px;
padding: 15px;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.3px;
}
/* Phone with country code */
.ct-phone-wrap {
display: flex;
gap: 8px;
}
.ct-phone-code {
flex: 0 0 108px;
padding: 13px 10px !important;
font-size: 13px !important;
}
.ct-phone-wrap input { flex: 1; min-width: 0; }
/* Info sidebar card */
.ct-info-card { display: flex; flex-direction: column; }
.ct-info-logo {
text-align: center;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--gray-100);
}
.ct-info-logo img {
height: 72px;
width: auto;
margin: 0 auto;
object-fit: contain;
}
.ct-info-block {
margin-bottom: 22px;
padding-bottom: 22px;
border-bottom: 1px solid var(--gray-100);
}
.ct-info-block:last-of-type { border-bottom: 0; padding-bottom: 0; }
.ct-info-block h3 {
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--orange);
margin-bottom: 12px;
}
.ct-info-list { list-style: none; }
.ct-info-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
font-size: 14px;
}
.ct-info-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--green-pale);
color: var(--green-deep);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ct-info-icon svg { width: 18px; height: 18px; }
.ct-info-icon--wa { background: #e8f8ee; color: #25d366; }
.ct-info-list a {
color: var(--text-primary);
font-weight: 500;
transition: color 0.2s ease;
}
.ct-info-list a:hover { color: var(--green-deep); }
.ct-address {
font-size: 14px;
line-height: 1.65;
color: var(--text-secondary);
margin-bottom: 10px;
}
.ct-map-link {
font-size: 14px;
font-weight: 600;
color: var(--green-deep);
text-decoration: none;
transition: color 0.2s ease;
}
.ct-map-link:hover { color: var(--orange); }
.ct-hours {
margin-top: auto;
padding-top: 16px;
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
}
.ct-hours strong { color: var(--green-deep); }
/* ── Sections: map, departments, social ── */
.ct-section { padding: 0 0 56px; }
.ct-section-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 700;
font-size: 32px;
color: var(--green-deep);
margin-bottom: 8px;
text-align: center;
}
.ct-section-sub {
text-align: center;
font-size: 15px;
color: var(--text-muted);
margin-bottom: 32px;
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
.ct-map-wrap {
border-radius: 18px;
overflow: hidden;
box-shadow: var(--shadow-md);
border: 1px solid var(--border);
line-height: 0;
}
.ct-map-wrap iframe {
display: block;
width: 100%;
min-height: 380px;
}
/* Departments grid */
.ct-dept-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.ct-dept-card {
background: var(--gray-50);
border: 1px solid var(--gray-100);
border-radius: 16px;
padding: 24px 22px;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ct-dept-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: rgba(26,92,56,0.2);
}
.ct-dept-card h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 20px;
font-weight: 700;
color: var(--green-deep);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--orange-pale);
}
.ct-dept-card ul { list-style: none; }
.ct-dept-card li {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 0;
font-size: 13px;
}
.ct-dept-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--white);
color: var(--green-deep);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: var(--shadow-sm);
}
.ct-dept-icon svg { width: 16px; height: 16px; }
.ct-dept-icon--wa { color: #25d366; }
.ct-dept-card a {
color: var(--text-secondary);
font-weight: 500;
word-break: break-all;
}
.ct-dept-card a:hover { color: var(--green-deep); }
/* 4th card centered on second row */
.ct-dept-grid .ct-dept-card:nth-child(4) {
grid-column: 2;
}
/* Social row */
.ct-social-sec { padding-bottom: 72px; }
.ct-social-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.ct-social {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 18px;
color: var(--white);
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.ct-social svg { width: 22px; height: 22px; }
.ct-social:hover {
transform: translateY(-4px) scale(1.08);
box-shadow: 0 12px 28px rgba(0,0,0,0.22);
color: var(--white);
}
.ct-social--fb { background: #1877f2; }
.ct-social--ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.ct-social--in { background: #0a66c2; font-size: 15px; }
.ct-social--x { background: #000; }
.ct-social--yt { background: #ff0000; font-size: 16px; }
.ct-social--pi { background: #e60023; font-size: 17px; }
.ct-social--tt { background: #010101; }
.ct-social--wa { background: #25d366; }
/* Floating WhatsApp */
.ct-wa-float {
position: fixed;
right: 24px;
bottom: 90px;
z-index: 900;
width: 56px;
height: 56px;
border-radius: 50%;
background: #25d366;
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(37,211,102,0.45);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ct-wa-float svg { width: 28px; height: 28px; }
.ct-wa-float:hover {
transform: scale(1.08);
box-shadow: 0 12px 32px rgba(37,211,102,0.55);
color: var(--white);
}
/* Contact page responsive */
@media (max-width: 1024px) {
.ct-hero-grid { grid-template-columns: 1fr; }
.ct-dept-grid { grid-template-columns: repeat(2, 1fr); }
.ct-dept-grid .ct-dept-card:nth-child(4) { grid-column: auto; }
}
@media (max-width: 768px) {
.ct-card { padding: 28px 22px; }
.ct-dept-grid { grid-template-columns: 1fr; }
.ct-phone-code { flex: 0 0 96px; }
.ct-wa-float { right: 16px; bottom: 80px; width: 50px; height: 50px; }
.ct-wa-float svg { width: 24px; height: 24px; }
.form-row { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════
GROUP TOURS PAGE
═══════════════════════════════════════════════════════════════════════ */
.gt-page { background: var(--white); }
/* ── Hero ── */
.gt-hero {
position: relative;
min-height: 420px;
display: flex;
align-items: center;
padding: 120px 0 80px;
overflow: hidden;
}
.gt-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.gt-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gt-hero-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(26,92,56,0.82) 0%, rgba(26,92,56,0.55) 50%, rgba(0,0,0,0.35) 100%);
}
.gt-hero-inner {
position: relative;
z-index: 1;
text-align: center;
max-width: 820px;
margin: 0 auto;
}
.gt-breadcrumb {
justify-content: center;
margin-bottom: 24px;
background: rgba(255,255,255,0.15);
border-color: rgba(255,255,255,0.25);
color: rgba(255,255,255,0.85);
}
.gt-breadcrumb a { color: var(--orange-light); }
.gt-breadcrumb a:hover { color: var(--white); }
.gt-breadcrumb .current { color: var(--white); }
.gt-breadcrumb .sep { color: rgba(255,255,255,0.5); }
.gt-hero-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 700;
font-size: clamp(36px, 5.5vw, 58px);
line-height: 1.12;
color: var(--white);
margin-bottom: 18px;
text-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.gt-hero-title em {
font-style: italic;
color: var(--orange-light);
}
.gt-hero-desc {
font-size: 17px;
line-height: 1.75;
color: rgba(255,255,255,0.92);
margin-bottom: 28px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.gt-hero-cta {
padding: 14px 32px;
font-size: 16px;
}
/* ── Search bar (below hero) ── */
.gt-search-bar {
background: var(--white);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-sm);
margin-top: -36px;
position: relative;
z-index: 10;
padding: 0 0 4px;
}
.gt-search-form {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr auto;
gap: 16px;
align-items: end;
padding: 24px 0 28px;
}
.gt-search-field label {
display: block;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--green-deep);
margin-bottom: 8px;
}
.gt-search-field input,
.gt-search-field select {
width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--gray-200);
border-radius: 10px;
font-family: 'Outfit', sans-serif;
font-size: 14px;
color: var(--text-primary);
background: var(--white);
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gt-search-field input:focus,
.gt-search-field select:focus {
border-color: var(--green-mid);
box-shadow: 0 0 0 3px rgba(42,122,80,0.12);
}
.gt-search-btn {
padding: 12px 28px;
white-space: nowrap;
height: 46px;
}
/* ── Intro ── */
.gt-main { padding-bottom: 0; }
.gt-intro {
padding: 56px 0 40px;
text-align: center;
max-width: 900px;
}
.gt-intro-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 700;
color: var(--green-deep);
margin-bottom: 20px;
}
.gt-intro-text p {
font-size: 16px;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 14px;
}
.gt-read-more {
background: transparent;
border: 0;
color: var(--green-deep);
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 14px;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 4px;
margin-top: 8px;
transition: color 0.2s ease;
}
.gt-read-more:hover { color: var(--orange); }
/* ── Styles banner ── */
.gt-styles-banner { margin-bottom: 48px; }
.gt-styles-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
background: linear-gradient(135deg, var(--green-pale) 0%, var(--orange-pale) 100%);
border: 1px solid var(--border);
border-radius: 18px;
padding: 36px 40px;
}
.gt-styles-inner h2 {
font-family: 'Cormorant Garamond', serif;
font-size: 26px;
font-weight: 700;
color: var(--green-deep);
margin-bottom: 8px;
}
.gt-styles-inner p {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.65;
max-width: 560px;
}
/* ── Listing + tabs ── */
.gt-listing {
padding: 0 0 64px;
background: var(--gray-50);
}
.gt-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 2px solid var(--gray-100);
}
.gt-tab {
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 600;
padding: 10px 20px;
border: 1.5px solid var(--gray-200);
border-radius: 999px;
background: var(--white);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.25s ease;
}
.gt-tab:hover {
border-color: var(--green-mid);
color: var(--green-deep);
}
.gt-tab.active {
background: var(--green-deep);
border-color: var(--green-deep);
color: var(--white);
box-shadow: 0 6px 16px rgba(26,92,56,0.3);
}
.gt-results-count {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 20px;
}
.gt-results-count strong { color: var(--green-deep); }
/* Horizontal tour cards */
.gt-tour-list {
display: flex;
flex-direction: column;
gap: 22px;
}
.gt-tour-card {
display: grid;
grid-template-columns: 280px 1fr 200px;
gap: 0;
background: var(--white);
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.gt-tour-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.gt-tour-img {
display: block;
overflow: hidden;
min-height: 200px;
}
.gt-tour-img img {
width: 100%;
height: 100%;
min-height: 200px;
object-fit: cover;
transition: transform 0.6s ease;
}
.gt-tour-card:hover .gt-tour-img img { transform: scale(1.06); }
.gt-tour-body {
padding: 24px 28px;
border-right: 1px solid var(--gray-100);
}
.gt-tour-cat {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--orange);
margin-bottom: 8px;
}
.gt-tour-body h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 24px;
font-weight: 700;
line-height: 1.25;
margin-bottom: 10px;
}
.gt-tour-body h3 a {
color: var(--green-deep);
transition: color 0.2s ease;
}
.gt-tour-body h3 a:hover { color: var(--orange); }
.gt-tour-summary {
font-size: 14px;
line-height: 1.65;
color: var(--text-secondary);
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gt-tour-months {
font-size: 13px;
color: var(--text-muted);
}
.gt-tour-months strong { color: var(--green-deep); font-weight: 600; }
.gt-tour-side {
padding: 24px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: var(--green-pale);
gap: 10px;
}
.gt-tour-map {
width: 100%;
max-width: 160px;
padding: 8px;
background: var(--white);
border-radius: 10px;
border: 1px solid rgba(26,92,56,0.12);
margin-bottom: 4px;
}
.gt-route-svg {
width: 100%;
height: 40px;
color: var(--green-deep);
}
.gt-tour-days {
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.gt-tour-price {
font-size: 14px;
color: var(--text-muted);
}
.gt-tour-price strong {
display: block;
font-family: 'Cormorant Garamond', serif;
font-size: 28px;
font-weight: 700;
color: var(--green-deep);
line-height: 1.1;
}
.gt-tour-cta {
width: 100%;
padding: 11px 16px;
font-size: 13px;
margin-top: 4px;
}
.gt-tour-book {
background: transparent;
border: 0;
font-family: 'Outfit', sans-serif;
font-size: 12px;
font-weight: 600;
color: var(--orange);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
padding: 4px;
}
.gt-tour-book:hover { color: var(--green-deep); }
.gt-empty {
text-align: center;
padding: 48px 20px;
color: var(--text-muted);
}
.gt-reset-link {
background: none;
border: 0;
color: var(--green-deep);
font-weight: 600;
cursor: pointer;
text-decoration: underline;
}
.gt-pagination { margin-top: 32px; justify-content: center; }
/* ── Category grids ── */
.gt-grid-section {
padding: 64px 0;
background: var(--white);
}
.gt-grid-section--alt { background: var(--gray-50); }
.gt-section-title {
font-family: 'Cormorant Garamond', serif;
font-size: 32px;
font-weight: 700;
color: var(--green-deep);
text-align: center;
margin-bottom: 8px;
}
.gt-section-sub {
text-align: center;
font-size: 15px;
color: var(--text-muted);
margin-bottom: 36px;
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
.gt-cat-grid {
display: grid;
gap: 20px;
}
.gt-cat-grid--4 { grid-template-columns: repeat(4, 1fr); }
.gt-cat-card {
position: relative;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 4 / 3;
display: block;
box-shadow: var(--shadow-sm);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.gt-cat-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.gt-cat-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease, filter 0.4s ease;
}
.gt-cat-card:hover img {
transform: scale(1.08);
filter: saturate(1.1);
}
.gt-cat-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(26,92,56,0.85) 100%);
}
.gt-cat-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
padding: 20px 16px;
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
font-weight: 700;
color: var(--white);
text-align: center;
line-height: 1.25;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.gt-cat-label small {
display: block;
font-family: 'Outfit', sans-serif;
font-size: 12px;
font-weight: 500;
opacity: 0.9;
margin-top: 4px;
}
/* ── Logistics ── */
.gt-logistics {
padding: 64px 0;
background: var(--white);
border-top: 1px solid var(--border);
}
.gt-logistics-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-bottom: 48px;
}
.gt-logistics-card {
background: var(--gray-50);
border: 1px solid var(--gray-100);
border-radius: 16px;
padding: 32px 28px;
}
.gt-logistics-card h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 24px;
font-weight: 700;
color: var(--green-deep);
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 2px solid var(--orange-pale);
}
.gt-logistics-card p {
font-size: 15px;
line-height: 1.75;
color: var(--text-secondary);
}
.gt-icons-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.gt-icon-block h4 {
font-family: 'Outfit', sans-serif;
font-size: 17px;
font-weight: 600;
color: var(--green-deep);
margin: 14px 0 8px;
}
.gt-icon-block p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
}
.gt-icon-circle {
width: 72px;
height: 72px;
margin: 0 auto;
border-radius: 50%;
background: var(--green-pale);
color: var(--green-deep);
display: flex;
align-items: center;
justify-content: center;
border: 2px solid rgba(26,92,56,0.15);
}
.gt-icon-circle svg { width: 32px; height: 32px; }
/* ── Final CTA ── */
.gt-final-cta {
padding: 72px 0;
background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-mid) 100%);
text-align: center;
}
.gt-final-cta h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
color: var(--white);
margin-bottom: 12px;
}
.gt-final-cta p {
font-size: 16px;
color: rgba(255,255,255,0.88);
margin-bottom: 28px;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.gt-final-cta .btn-primary {
background: var(--orange);
border-color: var(--orange);
padding: 14px 36px;
font-size: 16px;
}
.gt-final-cta .btn-primary:hover {
background: var(--orange-light);
box-shadow: 0 10px 28px rgba(244,133,43,0.45);
}
/* Group tours responsive */
@media (max-width: 1024px) {
.gt-search-form { grid-template-columns: 1fr 1fr; }
.gt-search-btn { grid-column: 1 / -1; }
.gt-tour-card { grid-template-columns: 200px 1fr; }
.gt-tour-side {
grid-column: 1 / -1;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
border-top: 1px solid var(--gray-100);
background: var(--green-pale);
}
.gt-cat-grid--4 { grid-template-columns: repeat(2, 1fr); }
.gt-styles-inner { flex-direction: column; text-align: center; }
}
@media (max-width: 768px) {
.gt-logistics-grid,
.gt-icons-row { grid-template-columns: 1fr; }
.gt-cat-grid--4 { grid-template-columns: 1fr; }
.gt-final-cta { padding: 56px 16px; }
.gt-final-cta h2 { font-size: 26px; }
}
/* Final mobile correction for group-tour cards.
Keeps image, content, route/price and buttons in clean stacked blocks. */
@media (max-width: 768px) {
.gt-listing {
padding: 0 0 48px;
}
.gt-tour-list {
gap: 18px;
}
.gt-tour-card {
display: flex;
flex-direction: column;
border-radius: 18px;
overflow: hidden;
}
.gt-tour-card:hover {
transform: none;
}
.gt-tour-img {
width: 100%;
min-height: 0;
aspect-ratio: 16 / 10;
border-radius: 0;
}
.gt-tour-img img {
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
}
.gt-tour-body {
width: 100%;
padding: 18px 18px 16px;
border-right: 0;
border-bottom: 1px solid var(--gray-100);
text-align: left;
}
.gt-tour-cat {
font-size: 10px;
line-height: 1.3;
margin-bottom: 6px;
}
.gt-tour-body h3 {
font-size: 22px;
line-height: 1.2;
margin-bottom: 8px;
}
.gt-tour-summary {
font-size: 13px;
line-height: 1.55;
-webkit-line-clamp: 4;
line-clamp: 4;
}
.gt-tour-months {
font-size: 12px;
line-height: 1.55;
}
.gt-tour-side {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 12px;
padding: 18px;
background: var(--green-pale);
text-align: center;
}
.gt-tour-map {
grid-column: 1 / 2;
grid-row: 1 / 3;
width: 100%;
max-width: none;
margin: 0;
padding: 10px;
}
.gt-route-svg {
height: 44px;
}
.gt-tour-days,
.gt-tour-price {
grid-column: 2 / 3;
margin: 0;
}
.gt-tour-price strong {
font-size: 24px;
}
.gt-tour-cta {
grid-column: 1 / -1;
width: 100%;
max-width: none;
margin: 2px 0 0;
padding: 12px 16px;
}
.gt-tour-book {
grid-column: 1 / -1;
width: 100%;
text-align: center;
padding: 6px 10px 0;
}
}
@media (max-width: 420px) {
.gt-tour-side {
grid-template-columns: 1fr;
}
.gt-tour-map,
.gt-tour-days,
.gt-tour-price,
.gt-tour-cta,
.gt-tour-book {
grid-column: 1 / -1;
grid-row: auto;
}
}
/* ═══════════════════════════════════════════
HOMEPAGE EXCLUSIVE OFFER CTA
═══════════════════════════════════════════ */
.offer-section {
background: var(--white);
padding: 0 0 clamp(70px, 8vw, 105px);
}
.offer-card {
position: relative;
min-height: 300px;
border-radius: 18px;
overflow: hidden;
background:
radial-gradient(600px circle at 80% 48%, rgba(111,184,82,0.18), transparent 58%),
radial-gradient(520px circle at 18% 110%, rgba(255,255,255,0.08), transparent 58%),
linear-gradient(135deg, #0d2c21 0%, #112f25 52%, #0b261d 100%);
display: grid;
grid-template-columns: 1.02fr 0.98fr;
align-items: center;
isolation: isolate;
box-shadow: 0 24px 60px rgba(10,30,20,0.16);
}
.offer-card::before,
.offer-card::after {
content: "";
position: absolute;
display: none;
right: 190px;
width: 300px;
height: 150px;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
background: #75b956;
opacity: 0.98;
z-index: 1;
}
.offer-card::before { top: 62px; }
.offer-card::after { top: 184px; }
.offer-copy {
position: relative;
z-index: 3;
padding: 38px 0 38px clamp(42px, 10vw, 138px);
max-width: 590px;
}
.offer-copy h2 {
font-family: 'Outfit', sans-serif;
font-size: clamp(30px, 3.3vw, 46px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -1.7px;
color: var(--white);
margin-bottom: 14px;
}
.offer-copy p {
color: rgba(255,255,255,0.88);
font-size: 13px;
line-height: 1.65;
max-width: 500px;
margin-bottom: 18px;
}
.offer-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 10px 10px 20px;
border-radius: 999px;
background: #76bd54;
color: var(--white);
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 700;
box-shadow: 0 12px 26px rgba(111,184,82,0.34);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.offer-btn:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(111,184,82,0.44);
color: var(--white);
}
.offer-btn-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.92);
color: var(--green-deep);
font-weight: 800;
}
.offer-visual {
position: relative;
z-index: 2;
align-self: stretch;
min-height: 300px;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 24px 70px 0 0;
}
.offer-arc {
position: absolute;
right: 152px;
width: 260px;
height: 126px;
border-radius: 320px 320px 0 0;
background: #75b956;
z-index: 1;
}
.offer-arc-top {
top: 48px;
}
.offer-arc-bottom {
top: 145px;
}
.offer-person {
position: relative;
z-index: 3;
width: 220px;
height: 268px;
border-radius: 140px 140px 16px 16px;
overflow: hidden;
box-shadow: 0 22px 45px rgba(0,0,0,0.24);
background: rgba(255,255,255,0.08);
}
.offer-person img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
filter: saturate(1.08) contrast(1.04);
}
.offer-ticket {
position: absolute;
z-index: 4;
right: 136px;
top: 78px;
width: 64px;
height: 92px;
border-radius: 14px;
background:
linear-gradient(90deg, rgba(255,255,255,0.35) 1px, transparent 1px) 16px 0 / 18px 100%,
linear-gradient(135deg, #dff7ff, #8fd7f3);
color: var(--green-deep);
box-shadow: 0 14px 28px rgba(0,0,0,0.22);
transform: rotate(8deg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Outfit', sans-serif;
}
.offer-ticket span {
font-size: 8px;
font-weight: 700;
letter-spacing: 1.4px;
}
.offer-ticket strong {
font-size: 15px;
font-weight: 800;
}
.offer-map {
position: absolute;
left: 78px;
bottom: -56px;
width: 520px;
height: 230px;
opacity: 0.13;
background:
radial-gradient(circle at 23% 40%, rgba(255,255,255,0.45) 0 2px, transparent 3px),
linear-gradient(12deg, transparent 34%, rgba(255,255,255,0.7) 35% 37%, transparent 38%),
radial-gradient(ellipse at 40% 58%, rgba(255,255,255,0.55) 0 42%, transparent 43%);
z-index: 1;
}
.offer-doodle {
position: absolute;
color: rgba(255,255,255,0.55);
pointer-events: none;
z-index: 2;
}
.offer-doodle-left {
width: 130px;
left: 42px;
top: 52px;
}
.offer-doodle-right {
width: 112px;
right: 54px;
top: 54px;
}
@media (max-width: 1024px) {
.offer-card {
grid-template-columns: 1fr 0.85fr;
min-height: 290px;
}
.offer-copy {
padding-left: 44px;
}
.offer-card::before,
.offer-card::after {
right: 88px;
width: 240px;
}
.offer-visual {
padding-right: 32px;
}
.offer-arc {
right: 46px;
width: 250px;
}
.offer-person {
width: 205px;
height: 260px;
}
.offer-ticket {
right: 34px;
}
}
@media (max-width: 768px) {
.offer-section {
padding-bottom: 56px;
}
.offer-card {
grid-template-columns: 1fr;
min-height: auto;
text-align: center;
}
.offer-copy {
padding: 44px 22px 24px;
margin: 0 auto;
}
.offer-copy h2 {
font-size: clamp(28px, 8vw, 38px);
letter-spacing: -1px;
}
.offer-copy p {
margin-left: auto;
margin-right: auto;
}
.offer-visual {
min-height: 300px;
padding: 12px 0 0;
}
.offer-person {
width: 220px;
height: 260px;
border-radius: 120px 120px 14px 14px;
}
.offer-arc {
right: 50%;
transform: translateX(50%);
width: 250px;
height: 124px;
}
.offer-arc-top { top: 28px; }
.offer-arc-bottom { top: 126px; }
.offer-ticket {
right: calc(50% - 126px);
top: 82px;
width: 64px;
height: 92px;
}
.offer-card::before,
.offer-card::after {
right: 50%;
transform: translateX(50%);
width: 230px;
height: 128px;
}
.offer-card::before { top: auto; bottom: 132px; }
.offer-card::after { top: auto; bottom: 42px; }
.offer-doodle,
.offer-map {
display: none;
}
}
/* ═══════════════════════════════════════════
HOMEPAGE BODY — CRYSTAL REFERENCE STYLE
═══════════════════════════════════════════ */
.home-page .section-header {
max-width: 760px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.home-page .section-title {
font-family: 'Outfit', sans-serif;
font-weight: 800;
letter-spacing: -1.2px;
}
/* Use the reference-style body as the visible homepage flow. */
.home-page #packages,
.home-page #destinations,
.home-page #day-tours,
.home-page #group-tours,
.home-page .home-adventure-title,
.home-page .home-picks-section,
.home-page .home-stories-section,
.home-page .why-section,
.home-page .testimonials-section,
.home-page #about,
.home-page #contact {
display: none;
}
.ref-home-body {
background: var(--white);
overflow: hidden;
position: relative;
isolation: isolate;
}
.ref-mini {
display: inline-block;
font-family: 'Outfit', sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--orange);
margin-bottom: 12px;
}
.ref-intro {
background:
radial-gradient(700px circle at 10% 15%, rgba(255,255,255,0.07), transparent 58%),
linear-gradient(135deg, #0d2c21 0%, #102f25 100%);
color: var(--white);
padding: clamp(76px, 8vw, 110px) 0;
position: relative;
}
.ref-intro-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 54px;
align-items: center;
}
.ref-intro-copy h2 {
font-family: 'Outfit', sans-serif;
font-size: clamp(34px, 4.2vw, 64px);
font-weight: 900;
line-height: 1.08;
letter-spacing: -1.8px;
color: var(--white);
max-width: 780px;
margin-bottom: 18px;
}
.ref-intro-copy p {
color: rgba(255,255,255,0.76);
max-width: 620px;
font-size: 15px;
}
.ref-stat-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-top: 34px;
}
.ref-stat-row span {
padding: 18px 16px;
border-radius: 18px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.14);
color: rgba(255,255,255,0.78);
text-align: center;
backdrop-filter: blur(14px);
}
.ref-stat-row strong {
display: block;
color: var(--white);
font-size: 26px;
line-height: 1;
}
.ref-intro-media {
position: relative;
}
.ref-intro-media img {
width: 100%;
height: 330px;
object-fit: cover;
border-radius: 26px;
box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
.ref-intro-card {
position: absolute;
left: -24px;
bottom: 24px;
max-width: 260px;
padding: 18px;
border-radius: 18px;
background: rgba(255,255,255,0.82);
backdrop-filter: blur(16px);
box-shadow: var(--shadow-md);
}
.ref-intro-card strong { color: var(--green-deep); }
.ref-intro-card p { font-size: 13px; margin: 4px 0 0; }
.ref-places,
.ref-category,
.ref-testimonials,
.ref-blog-gallery {
padding: clamp(62px, 7vw, 96px) 0;
}
.ref-split-head,
.ref-section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 30px;
}
.ref-split-head h2,
.ref-section-head h2,
.ref-center-title,
.ref-service-box h2 {
font-family: 'Outfit', sans-serif;
font-weight: 900;
letter-spacing: -1.2px;
color: var(--text-primary);
}
.ref-split-head h2,
.ref-section-head h2 { font-size: clamp(28px, 3.4vw, 48px); max-width: 640px; }
.ref-link {
color: var(--green-deep);
font-weight: 800;
}
.ref-place-row,
.ref-category-grid,
.ref-blog-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.ref-place-card,
.ref-category-card,
.ref-blog-grid article,
.ref-test-grid article {
background: rgba(255,255,255,0.72);
border: 1px solid rgba(255,255,255,0.72);
border-radius: 20px;
box-shadow: 0 18px 44px rgba(20,60,40,0.1);
backdrop-filter: blur(18px) saturate(150%);
}
.ref-place-card {
overflow: hidden;
position: relative;
aspect-ratio: 4 / 5;
}
.ref-place-card img,
.ref-category-card img,
.ref-blog-grid img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ref-place-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(10,30,20,0.76));
}
.ref-place-card span {
position: absolute;
left: 16px;
bottom: 16px;
z-index: 2;
color: var(--white);
font-weight: 800;
}
.ref-category {
background: linear-gradient(180deg, var(--white), var(--green-pale));
}
.ref-center-title {
text-align: center;
font-size: clamp(28px, 3.2vw, 44px);
margin-bottom: 30px;
}
.ref-category-card {
overflow: hidden;
padding-bottom: 18px;
}
.ref-category-card img {
height: 170px;
margin-bottom: 16px;
}
.ref-category-card h3,
.ref-category-card p,
.ref-blog-grid h3 {
padding: 0 18px;
}
.ref-category-card h3 {
font-family: 'Outfit', sans-serif;
font-size: 20px;
font-weight: 800;
}
.ref-category-card p { font-size: 13px; }
.ref-dark-picks {
padding: clamp(54px, 7vw, 94px) 0;
}
.ref-dark-card {
padding: clamp(34px, 5vw, 58px);
border-radius: 28px;
background:
radial-gradient(620px circle at 80% 40%, rgba(111,184,82,0.18), transparent 56%),
linear-gradient(135deg, #0d2c21, #123528);
color: var(--white);
box-shadow: 0 28px 80px rgba(10,30,20,0.22);
}
.ref-dark-card h2 {
font-family: 'Outfit', sans-serif;
font-size: clamp(28px, 3.6vw, 52px);
font-weight: 900;
color: var(--white);
text-align: center;
margin-bottom: 32px;
}
.ref-pick-grid,
.ref-test-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.ref-pick-card {
background: rgba(255,255,255,0.92);
border-radius: 18px;
overflow: hidden;
padding-bottom: 18px;
color: var(--text-primary);
}
.ref-pick-card img { width: 100%; height: 190px; object-fit: cover; }
.ref-pick-card h3,
.ref-pick-card p,
.ref-pick-card a { margin-left: 18px; margin-right: 18px; }
.ref-pick-card h3 { font-family: 'Outfit', sans-serif; font-size: 19px; font-weight: 800; margin-top: 16px; }
.ref-pick-card p { font-size: 13px; margin-bottom: 12px; }
.ref-pick-card a { color: var(--green-deep); font-weight: 800; font-size: 13px; }
.ref-dark-bottom {
margin-top: 28px;
padding: 24px;
border-radius: 22px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.ref-dark-bottom h3 { color: var(--white); font-family: 'Outfit', sans-serif; font-weight: 900; }
.ref-dark-bottom p { color: rgba(255,255,255,0.7); max-width: 620px; }
.ref-green-btn {
white-space: nowrap;
padding: 12px 24px;
border-radius: 999px;
background: #76bd54;
color: var(--white);
font-weight: 800;
}
.ref-testimonials {
background: var(--white);
}
.ref-test-grid article {
padding: 28px;
}
.ref-test-grid p {
font-size: 15px;
}
.ref-test-grid strong {
color: var(--green-deep);
}
.ref-services {
padding: clamp(56px, 7vw, 96px) 0;
background: var(--green-pale);
}
.ref-service-box {
border-radius: 28px;
padding: clamp(28px, 5vw, 54px);
background: rgba(255,255,255,0.62);
border: 1px solid rgba(255,255,255,0.7);
backdrop-filter: blur(18px);
box-shadow: var(--glass-shadow);
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 34px;
}
.ref-service-box h2 { font-size: clamp(28px, 3.2vw, 46px); }
.ref-service-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.ref-service-grid span {
padding: 16px 18px;
border-radius: 16px;
background: var(--white);
color: var(--green-deep);
font-weight: 800;
box-shadow: var(--shadow-sm);
}
.ref-blog-grid {
grid-template-columns: repeat(3, 1fr);
}
.ref-blog-grid article {
overflow: hidden;
padding-bottom: 20px;
}
.ref-blog-grid img { height: 190px; margin-bottom: 16px; }
.ref-gallery-strip {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-top: 34px;
}
.ref-gallery-strip img {
height: 170px;
width: 100%;
object-fit: cover;
border-radius: 18px;
box-shadow: var(--shadow-sm);
}
/* ─── AI ANIMATION LAYER FOR INDEX BODY ─── */
.ref-home-body::before,
.ref-home-body::after {
content: "";
position: fixed;
pointer-events: none;
z-index: -1;
border-radius: 999px;
filter: blur(2px);
}
.ref-home-body::before {
left: 4%;
bottom: 8%;
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(255,119,48,0.16), transparent 70%);
animation: refAiOrb 16s ease-in-out infinite;
}
.ref-home-body::after {
right: 4%;
top: 18%;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(26,92,56,0.14), transparent 70%);
animation: refAiOrb 20s ease-in-out infinite reverse;
}
.ref-home-body section {
position: relative;
overflow: hidden;
}
.ref-home-body section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.22) 45%, transparent 58%);
transform: translateX(-120%);
opacity: 0;
animation: refAiScan 9s ease-in-out infinite;
}
.ref-home-body section:nth-child(even)::before {
animation-delay: -4s;
}
.ref-mini {
position: relative;
}
.ref-mini::after {
content: "";
display: inline-block;
width: 7px;
height: 7px;
margin-left: 8px;
border-radius: 999px;
background: var(--orange);
box-shadow: 0 0 0 0 rgba(255,119,48,0.45);
animation: refAiPulse 1.8s ease-out infinite;
}
.ref-intro {
overflow: hidden;
}
.ref-intro::after {
content: "";
position: absolute;
right: -90px;
top: 18%;
width: 340px;
height: 340px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
background: conic-gradient(from 180deg, transparent, rgba(255,119,48,0.25), transparent, rgba(118,189,84,0.22), transparent);
opacity: 0.62;
animation: refAiOrbit 18s linear infinite;
}
.ref-intro-media img {
animation: refImageBreathe 7s ease-in-out infinite;
}
.ref-intro-card {
animation: refCardBob 5.5s ease-in-out infinite;
}
.ref-place-card,
.ref-category-card,
.ref-blog-grid article,
.ref-test-grid article,
.ref-pick-card {
transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
will-change: transform;
}
.ref-place-card:hover,
.ref-category-card:hover,
.ref-blog-grid article:hover,
.ref-test-grid article:hover,
.ref-pick-card:hover {
transform: translateY(-10px);
box-shadow: 0 26px 70px rgba(20,60,40,0.18);
border-color: rgba(255,119,48,0.24);
}
.ref-place-card img,
.ref-category-card img,
.ref-blog-grid img,
.ref-pick-card img {
transition: transform 0.8s var(--ease-out), filter 0.8s var(--ease-out);
}
.ref-place-card:hover img,
.ref-category-card:hover img,
.ref-blog-grid article:hover img,
.ref-pick-card:hover img {
transform: scale(1.07);
filter: saturate(1.18) contrast(1.04);
}
.ref-dark-card {
position: relative;
overflow: hidden;
}
.ref-dark-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent),
repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 70px);
transform: translateX(-100%);
animation: refDarkScan 6.5s ease-in-out infinite;
}
.ref-pick-card {
position: relative;
}
.ref-pick-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,0.65), transparent 72%);
transform: translateX(-120%);
transition: transform 0.8s var(--ease-out);
}
.ref-pick-card:hover::after {
transform: translateX(120%);
}
.ref-service-grid span {
position: relative;
overflow: hidden;
transition: transform 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.ref-service-grid span::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(118,189,84,0.12), rgba(255,119,48,0.12));
opacity: 0;
transition: opacity 0.35s var(--ease-out);
}
.ref-service-grid span:hover {
transform: translateX(6px);
}
.ref-service-grid span:hover::before {
opacity: 1;
}
.ref-gallery-strip img {
animation: refGalleryFloat 6s ease-in-out infinite;
animation-delay: calc(var(--i, 0) * -0.7s);
}
@keyframes refAiOrb {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(38px, -34px, 0) scale(1.12); }
}
@keyframes refAiScan {
0%, 45% { opacity: 0; transform: translateX(-120%); }
55% { opacity: 0.65; }
72%, 100% { opacity: 0; transform: translateX(120%); }
}
@keyframes refAiPulse {
0% { box-shadow: 0 0 0 0 rgba(255,119,48,0.45); }
80%, 100% { box-shadow: 0 0 0 12px rgba(255,119,48,0); }
}
@keyframes refAiOrbit {
to { transform: rotate(360deg); }
}
@keyframes refImageBreathe {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-8px) scale(1.015); }
}
@keyframes refCardBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes refDarkScan {
0%, 52% { transform: translateX(-100%); opacity: 0; }
60% { opacity: 1; }
78%, 100% { transform: translateX(100%); opacity: 0; }
}
@keyframes refGalleryFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@media (max-width: 1024px) {
.ref-intro-grid,
.ref-service-box {
grid-template-columns: 1fr;
}
.ref-place-row,
.ref-category-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.ref-split-head,
.ref-section-head,
.ref-dark-bottom {
flex-direction: column;
align-items: center;
text-align: center;
}
.ref-stat-row,
.ref-pick-grid,
.ref-test-grid,
.ref-service-grid,
.ref-blog-grid,
.ref-gallery-strip {
grid-template-columns: 1fr;
}
.ref-place-row,
.ref-category-grid {
grid-template-columns: 1fr 1fr;
}
.ref-intro-card {
position: static;
margin: -28px 18px 0;
}
}
@media (prefers-reduced-motion: reduce) {
.ref-home-body *,
.ref-home-body::before,
.ref-home-body::after {
animation: none !important;
transition-duration: 0.01ms !important;
}
}
.home-page .why-card,
.home-page .testi-card,
.home-page .dtour-card,
.home-page .contact-form,
.home-page .cinfo-item,
.home-page .about-float-box {
background: rgba(255,255,255,0.72);
border: 1px solid rgba(255,255,255,0.68);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
box-shadow: 0 18px 48px rgba(20,60,40,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
}
.home-page .day-tours-section,
.home-page .why-section,
.home-page .testimonials-section,
.home-page .contact-section {
position: relative;
overflow: hidden;
}
.home-page .day-tours-section::before,
.home-page .why-section::before,
.home-page .testimonials-section::before,
.home-page .contact-section::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(520px circle at 12% 18%, rgba(232,245,238,0.75), transparent 62%),
radial-gradient(520px circle at 88% 72%, rgba(255,243,232,0.64), transparent 62%);
pointer-events: none;
}
.home-page .day-tours-section > .container,
.home-page .why-section > .container,
.home-page .testimonials-section > .container,
.home-page .contact-section > .container {
position: relative;
z-index: 2;
}
.home-adventure-title {
padding: clamp(56px, 7vw, 90px) 0 clamp(30px, 4vw, 50px);
background: var(--white);
text-align: center;
position: relative;
overflow: hidden;
}
.home-adventure-title::before {
content: "";
position: absolute;
inset: auto 10% 12px 10%;
height: 120px;
background: linear-gradient(90deg, transparent, rgba(26,92,56,0.08), transparent);
filter: blur(18px);
}
.home-adventure-title .container {
position: relative;
z-index: 1;
}
.home-adventure-title h2 {
font-family: 'Outfit', sans-serif;
font-size: clamp(44px, 7vw, 96px);
font-weight: 900;
line-height: 0.95;
color: var(--text-primary);
letter-spacing: -3px;
margin: 10px 0 18px;
}
.home-adventure-title h2 span {
color: transparent;
-webkit-text-stroke: 1.5px rgba(26,92,56,0.35);
text-shadow: 0 14px 34px rgba(26,92,56,0.08);
}
.home-adventure-title p {
max-width: 620px;
margin: 0 auto;
font-size: 15px;
}
.home-picks-section {
background: var(--white);
padding: clamp(44px, 6vw, 80px) 0;
}
.home-picks-card {
position: relative;
overflow: hidden;
border-radius: 26px;
padding: clamp(34px, 5vw, 58px);
background:
radial-gradient(700px circle at 90% 20%, rgba(111,184,82,0.16), transparent 58%),
linear-gradient(135deg, #0d2c21 0%, #123528 100%);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 28px 80px rgba(10,30,20,0.2);
}
.home-picks-card .section-title,
.home-picks-card .section-desc {
color: var(--white);
}
.home-picks-card .section-desc {
color: rgba(255,255,255,0.72);
}
.home-picks-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 34px;
}
.home-pick {
overflow: hidden;
border-radius: 18px;
background: rgba(255,255,255,0.9);
border: 1px solid rgba(255,255,255,0.56);
box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}
.home-pick img {
width: 100%;
height: 190px;
object-fit: cover;
}
.home-pick div {
padding: 18px;
}
.home-pick span,
.home-story span {
display: inline-block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--orange);
margin-bottom: 8px;
}
.home-pick h3,
.home-story h3 {
font-family: 'Outfit', sans-serif;
font-size: 20px;
line-height: 1.25;
font-weight: 800;
color: var(--text-primary);
margin-bottom: 8px;
}
.home-pick p {
font-size: 13px;
line-height: 1.65;
margin-bottom: 14px;
}
.home-pick a {
display: inline-flex;
color: var(--green-deep);
font-size: 13px;
font-weight: 800;
}
.home-stories-section {
padding: clamp(60px, 8vw, 100px) 0;
background:
radial-gradient(700px circle at 15% 20%, rgba(232,245,238,0.78), transparent 60%),
var(--white);
}
.home-story-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.home-story {
padding: 14px 14px 22px;
border-radius: 22px;
background: rgba(255,255,255,0.74);
border: 1px solid rgba(255,255,255,0.72);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
box-shadow: 0 18px 46px rgba(20,60,40,0.1);
}
.home-story img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 16px;
margin-bottom: 16px;
}
@media (max-width: 1024px) {
.home-picks-grid,
.home-story-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.home-adventure-title h2 {
letter-spacing: -1.4px;
}
.home-picks-card {
padding: 28px 18px;
border-radius: 22px;
}
.home-picks-grid,
.home-story-grid {
grid-template-columns: 1fr;
}
.home-pick img,
.home-story img {
height: 190px;
}
}
/* ═══════════════════════════════════════════════════════
HOTELS PAGE
═══════════════════════════════════════════════════════ */
.hotels-page {
background:
radial-gradient(700px circle at 10% 12%, rgba(244,133,43,0.08), transparent 56%),
linear-gradient(180deg, var(--white), var(--green-pale) 48%, var(--white));
}
.hotel-hero {
position: relative;
min-height: 460px;
display: flex;
align-items: center;
overflow: hidden;
margin-top: 80px;
color: var(--white);
background: #0d2c21;
}
.hotel-hero-bg,
.hotel-hero-bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.hotel-hero-bg img {
object-fit: cover;
filter: brightness(0.58) saturate(1.08);
}
.hotel-hero::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(700px circle at 82% 35%, rgba(118,189,84,0.28), transparent 58%),
linear-gradient(90deg, rgba(8,34,24,0.92), rgba(8,34,24,0.58), rgba(8,34,24,0.22));
}
.hotel-hero-inner {
position: relative;
z-index: 2;
max-width: 850px;
}
.hotel-eyebrow {
display: inline-block;
margin-bottom: 12px;
color: var(--orange);
font-family: 'Outfit', sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 1.8px;
text-transform: uppercase;
}
.hotel-hero h1,
.hotel-results-head h2,
.hotel-support-card h2 {
font-family: 'Outfit', sans-serif;
font-weight: 900;
letter-spacing: -1.5px;
}
.hotel-hero h1 {
max-width: 760px;
color: var(--white);
font-size: clamp(44px, 6vw, 76px);
line-height: 1.02;
margin-bottom: 18px;
}
.hotel-hero p {
max-width: 640px;
color: rgba(255,255,255,0.86);
font-size: 17px;
}
.hotel-hero-stats {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 30px;
}
.hotel-hero-stats span {
min-width: 150px;
padding: 14px 18px;
border: 1px solid rgba(255,255,255,0.18);
border-radius: 18px;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(16px);
}
.hotel-hero-stats strong {
display: block;
color: var(--white);
font-size: 24px;
line-height: 1;
}
.hotel-search-section {
position: relative;
z-index: 3;
margin-top: 34px;
}
.hotel-search-card {
display: grid;
grid-template-columns: 1.35fr repeat(3, 0.82fr) auto;
gap: 14px;
padding: 18px;
border: 1px solid rgba(255,255,255,0.72);
border-radius: 24px;
background: rgba(255,255,255,0.82);
box-shadow: var(--glass-shadow);
backdrop-filter: blur(20px) saturate(150%);
}
.hotel-search-card label {
display: flex;
flex-direction: column;
gap: 7px;
}
.hotel-search-card span,
.hotel-filter-group h4 {
color: var(--green-deep);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.7px;
text-transform: uppercase;
}
.hotel-search-card input,
.hotel-search-card select,
.hotel-filter-group select {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid rgba(26,92,56,0.14);
border-radius: 14px;
background: var(--white);
color: var(--text-primary);
font: inherit;
outline: none;
}
.hotel-search-card button,
.hotel-support-btn,
.hotel-book-btn,
.hotel-reset {
border-radius: 999px;
background: linear-gradient(135deg, var(--green-deep), var(--green-mid));
color: var(--white);
font-weight: 800;
box-shadow: 0 14px 30px rgba(26,92,56,0.2);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.hotel-search-card button {
align-self: end;
min-height: 48px;
padding: 0 24px;
}
.hotel-search-card button:hover,
.hotel-support-btn:hover,
.hotel-book-btn:hover,
.hotel-reset:hover {
transform: translateY(-2px);
box-shadow: 0 18px 38px rgba(26,92,56,0.28);
}
.hotel-list-section {
padding: clamp(64px, 8vw, 104px) 0;
}
.hotel-layout {
display: grid;
grid-template-columns: 300px 1fr;
gap: 28px;
align-items: start;
}
.hotel-sidebar {
position: sticky;
top: 104px;
}
.hotel-filter-card,
.hotel-card,
.hotel-support-card,
.hotel-book-panel {
border: 1px solid rgba(255,255,255,0.72);
background: rgba(255,255,255,0.76);
box-shadow: var(--glass-shadow);
backdrop-filter: blur(20px) saturate(150%);
}
.hotel-filter-card {
padding: 24px;
border-radius: 24px;
}
.hotel-filter-card h3 {
font-family: 'Outfit', sans-serif;
font-weight: 900;
color: var(--green-deep);
margin-bottom: 18px;
}
.hotel-filter-group {
display: grid;
gap: 12px;
padding: 18px 0;
border-top: 1px solid rgba(26,92,56,0.1);
}
.hotel-chip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hotel-chip-list button {
padding: 8px 12px;
border-radius: 999px;
background: var(--green-pale);
color: var(--green-deep);
font-size: 12px;
font-weight: 800;
}
.hotel-chip-list button.active {
background: var(--green-deep);
color: var(--white);
}
.hotel-check {
display: flex;
align-items: center;
gap: 10px;
color: var(--text-secondary);
font-size: 14px;
}
.hotel-check input {
accent-color: var(--green-deep);
}
.hotel-reset {
width: 100%;
padding: 12px 18px;
margin-top: 8px;
}
.hotel-results-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 18px;
margin-bottom: 24px;
}
.hotel-results-head h2 {
color: var(--text-primary);
font-size: clamp(30px, 3.2vw, 48px);
}
.hotel-results-head p {
color: var(--text-secondary);
max-width: 650px;
}
.hotel-count {
white-space: nowrap;
padding: 10px 14px;
border-radius: 999px;
background: var(--orange-pale);
color: var(--orange);
font-weight: 900;
}
.hotel-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.hotel-card {
overflow: hidden;
border-radius: 24px;
transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.hotel-card:hover {
transform: translateY(-8px);
box-shadow: 0 26px 60px rgba(20,60,40,0.16);
}
.hotel-card-img {
position: relative;
height: 220px;
overflow: hidden;
}
.hotel-card-img img {
width: 100%;
height: 100%;
transition: transform 0.7s var(--ease);
}
.hotel-card:hover .hotel-card-img img {
transform: scale(1.06);
}
.hotel-card-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 44%, rgba(10,34,24,0.68));
}
.hotel-card-img span {
position: absolute;
left: 16px;
bottom: 14px;
z-index: 2;
padding: 6px 11px;
border-radius: 999px;
background: rgba(255,255,255,0.88);
color: var(--green-deep);
font-size: 12px;
font-weight: 900;
}
.hotel-card-body {
padding: 20px;
}
.hotel-card-top {
display: flex;
align-items: start;
justify-content: space-between;
gap: 14px;
margin-bottom: 10px;
}
.hotel-card-top h3 {
font-family: 'Outfit', sans-serif;
color: var(--text-primary);
font-size: 21px;
font-weight: 900;
}
.hotel-card-top strong {
padding: 6px 9px;
border-radius: 12px;
background: var(--green-deep);
color: var(--white);
font-size: 13px;
}
.hotel-card-body p {
color: var(--text-secondary);
font-size: 14px;
margin-bottom: 14px;
}
.hotel-amenities {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 18px;
}
.hotel-amenities span {
padding: 5px 9px;
border-radius: 999px;
background: var(--green-pale);
color: var(--green-deep);
font-size: 11px;
font-weight: 800;
text-transform: capitalize;
}
.hotel-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.hotel-card-foot span {
color: var(--text-secondary);
font-size: 13px;
}
.hotel-card-foot strong {
color: var(--orange);
font-size: 22px;
}
.hotel-book-btn {
padding: 10px 16px;
}
.hotel-card-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.hotel-card-actions .btn-pill-view,
.hotel-card-actions .btn-pill-book {
padding: 10px 14px;
font-size: 11px;
}
.hotel-detail-modal {
position: fixed;
inset: 0;
z-index: 1600;
display: grid;
place-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s var(--ease);
}
.hotel-detail-modal.open {
opacity: 1;
pointer-events: auto;
}
.hotel-detail-backdrop {
position: absolute;
inset: 0;
background: rgba(7, 28, 20, 0.68);
backdrop-filter: blur(8px);
}
.hotel-detail-panel {
position: relative;
z-index: 2;
width: min(94vw, 760px);
max-height: min(92vh, 900px);
overflow: auto;
border-radius: 24px;
background: var(--white);
box-shadow: var(--shadow-lg);
transform: translateY(16px) scale(0.98);
transition: transform 0.25s var(--ease);
}
.hotel-detail-modal.open .hotel-detail-panel {
transform: none;
}
.hotel-detail-close {
position: absolute;
top: 16px;
right: 16px;
z-index: 3;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255,255,255,0.92);
color: var(--green-deep);
font-size: 24px;
box-shadow: var(--shadow-sm);
}
.hotel-detail-hero {
position: relative;
aspect-ratio: 16 / 8;
overflow: hidden;
border-radius: 24px 24px 0 0;
}
.hotel-detail-hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hotel-detail-hero span {
position: absolute;
left: 18px;
bottom: 18px;
padding: 7px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.94);
color: var(--green-deep);
font-size: 12px;
font-weight: 800;
}
.hotel-detail-body {
padding: 26px 28px 30px;
}
.hotel-detail-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.hotel-detail-head h3 {
font-family: 'Outfit', sans-serif;
color: var(--green-deep);
font-weight: 900;
font-size: clamp(22px, 3vw, 28px);
line-height: 1.15;
margin-top: 6px;
}
.hotel-detail-head > strong {
flex-shrink: 0;
min-width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 14px;
background: var(--green-deep);
color: var(--white);
font-size: 18px;
}
.hotel-detail-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
}
.hotel-detail-meta span {
padding: 7px 12px;
border-radius: 999px;
background: var(--green-pale);
color: var(--green-deep);
font-size: 12px;
font-weight: 800;
}
.hotel-detail-desc {
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 22px;
}
.hotel-detail-block {
margin-bottom: 20px;
}
.hotel-detail-block h4 {
font-family: 'Outfit', sans-serif;
color: var(--green-deep);
font-size: 15px;
font-weight: 900;
margin-bottom: 10px;
}
.hotel-detail-list {
display: grid;
gap: 8px;
padding-left: 18px;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.55;
}
.hotel-detail-list li::marker {
color: var(--orange);
}
.hotel-detail-amenities {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hotel-detail-amenities span {
padding: 7px 12px;
border-radius: 999px;
background: var(--green-pale);
color: var(--green-deep);
font-size: 12px;
font-weight: 800;
text-transform: capitalize;
}
.hotel-detail-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 18px;
border-top: 1px solid var(--gray-100);
margin-top: 8px;
}
.hotel-detail-price strong {
display: block;
color: var(--orange);
font-size: 24px;
line-height: 1.1;
}
.hotel-detail-price span {
color: var(--text-secondary);
font-size: 13px;
}
.hotel-detail-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.hotel-detail-deal {
border-color: var(--green-deep);
color: var(--green-deep);
}
.hotel-detail-deal:hover {
background: var(--green-deep);
color: var(--white);
border-color: var(--green-deep);
}
.hotel-empty {
padding: 42px;
border-radius: 24px;
background: var(--white);
text-align: center;
box-shadow: var(--shadow-sm);
}
.hotel-pagination {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 30px;
}
.hotel-pagination[hidden] {
display: none;
}
.hotel-pagination button {
min-width: 42px;
height: 42px;
padding: 0 14px;
border-radius: 999px;
background: rgba(255,255,255,0.78);
border: 1px solid rgba(26,92,56,0.14);
color: var(--green-deep);
font-weight: 900;
box-shadow: var(--shadow-sm);
transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.hotel-pagination button:hover,
.hotel-pagination button.active {
transform: translateY(-2px);
background: var(--green-deep);
color: var(--white);
}
.hotel-loading {
grid-column: 1 / -1;
padding: 42px;
border-radius: 24px;
background: rgba(255,255,255,0.76);
color: var(--green-deep);
font-weight: 900;
text-align: center;
box-shadow: var(--glass-shadow);
backdrop-filter: blur(18px);
}
.hotel-support {
padding: 0 0 clamp(70px, 8vw, 105px);
}
.hotel-support-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
padding: clamp(28px, 5vw, 54px);
border-radius: 28px;
background:
radial-gradient(600px circle at 84% 40%, rgba(244,133,43,0.12), transparent 58%),
linear-gradient(135deg, rgba(255,255,255,0.86), rgba(232,245,238,0.74));
}
.hotel-support-card h2 {
max-width: 780px;
color: var(--green-deep);
font-size: clamp(28px, 3.2vw, 46px);
}
.hotel-support-btn {
white-space: nowrap;
padding: 14px 22px;
}
.hotel-book-modal {
position: fixed;
inset: 0;
z-index: 1500;
display: grid;
place-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s var(--ease);
}
.hotel-book-modal.open {
opacity: 1;
pointer-events: auto;
}
.hotel-book-backdrop {
position: absolute;
inset: 0;
background: rgba(7, 28, 20, 0.62);
backdrop-filter: blur(8px);
}
.hotel-book-panel {
position: relative;
z-index: 2;
width: min(92vw, 520px);
padding: 30px;
border-radius: 24px;
transform: translateY(16px) scale(0.98);
transition: transform 0.25s var(--ease);
}
.hotel-book-modal.open .hotel-book-panel {
transform: none;
}
.hotel-book-close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--green-pale);
color: var(--green-deep);
font-size: 24px;
}
.hotel-book-panel h3 {
font-family: 'Outfit', sans-serif;
color: var(--green-deep);
font-weight: 900;
margin-bottom: 8px;
}
.hotel-book-name {
color: var(--text-secondary);
margin-bottom: 20px;
}
.hotel-book-options {
display: grid;
gap: 12px;
}
.hotel-book-options a {
padding: 14px 16px;
border-radius: 16px;
background: var(--green-pale);
color: var(--green-deep);
font-weight: 900;
transition: transform 0.25s var(--ease);
}
.hotel-book-options a:hover {
transform: translateX(4px);
}
.hotel-book-note {
margin-top: 18px;
color: var(--text-muted);
font-size: 13px;
}
@media (max-width: 1100px) {
.hotel-search-card {
grid-template-columns: repeat(2, 1fr);
}
.hotel-search-card button {
grid-column: span 2;
}
.hotel-layout {
grid-template-columns: 1fr;
}
.hotel-sidebar {
position: static;
}
}
@media (max-width: 768px) {
.hotel-hero {
min-height: 520px;
margin-top: 72px;
}
.hotel-search-card,
.hotel-grid {
grid-template-columns: 1fr;
}
.hotel-search-card button {
grid-column: auto;
}
.hotel-results-head,
.hotel-support-card,
.hotel-card-foot {
flex-direction: column;
align-items: stretch;
}
.hotel-card-actions {
width: 100%;
}
.hotel-card-actions .btn-pill-view,
.hotel-card-actions .btn-pill-book {
flex: 1;
}
.hotel-detail-foot {
flex-direction: column;
align-items: stretch;
}
.hotel-detail-actions {
width: 100%;
}
.hotel-detail-actions .btn-pill-view,
.hotel-detail-actions .btn-pill-book,
.hotel-detail-actions .hotel-detail-deal {
flex: 1;
text-align: center;
}
.hotel-support-btn {
text-align: center;
}
}