/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Main font: Poppins - Modern and readable sans-serif font */
body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 2; /* Above stickers */
}

.btn {
    display: inline-block;
    background: #d4af37;
    color: #000;
    padding: 12px 25px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn:hover {
    background: #b8860b;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.know-more-btn {
    margin-top: 15px;
    font-size: 0.9rem;
    padding: 8px 15px;
}

/* Navigation Bar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 10000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transform: translateY(-100%);
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0;
}

.navbar.visible {
    transform: translateY(0);
    opacity: 1;
}

body.modal-open .navbar {
    z-index: 0;
    pointer-events: none;
}

/* Fallback: Show navbar after short delay if JS hasn't made it visible yet */
.navbar:not(.visible):not([data-nav-initialized]) {
    animation: navFadeIn 0.5s ease 0.5s forwards;
}

@keyframes navFadeIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Prevent animation when JS is controlling visibility */
.navbar.visible,
.navbar[data-nav-initialized] {
    animation: none;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
    height: 80px;
}

.nav-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 15px;
}

.nav-logo .logo-img {
    height: 50px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.nav-logo .logo-img:hover {
    transform: scale(1.05);
}

/* Brand text with glitchy animation - desktop only */
.nav-brand-text {
    font-family: "Anton", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #d4af37;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    white-space: nowrap;
}

/* Glitchy animation */
@keyframes glitch {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}

@keyframes glitch-text {
    0% {
        text-shadow: 
            2px 0 #ff00c1,
            -2px 0 #00fff9,
            0 0 0;
    }
    10% {
        text-shadow: 
            -2px 0 #ff00c1,
            2px 0 #00fff9,
            0 0 0;
    }
    20% {
        text-shadow: 
            2px 0 #ff00c1,
            -2px 0 #00fff9,
            0 0 0;
    }
    30% {
        text-shadow: 
            -2px 0 #ff00c1,
            2px 0 #00fff9,
            0 0 0;
    }
    40% {
        text-shadow: 
            2px 0 #ff00c1,
            -2px 0 #00fff9,
            0 0 0;
    }
    50% {
        text-shadow: 
            -2px 0 #ff00c1,
            2px 0 #00fff9,
            0 0 0;
    }
    60% {
        text-shadow: 
            2px 0 #ff00c1,
            -2px 0 #00fff9,
            0 0 0;
    }
    70% {
        text-shadow: 
            -2px 0 #ff00c1,
            2px 0 #00fff9,
            0 0 0;
    }
    80% {
        text-shadow: 
            2px 0 #ff00c1,
            -2px 0 #00fff9,
            0 0 0;
    }
    90% {
        text-shadow: 
            -2px 0 #ff00c1,
            2px 0 #00fff9,
            0 0 0;
    }
    100% {
        text-shadow: 
            2px 0 #ff00c1,
            -2px 0 #00fff9,
            0 0 0;
    }
}

.nav-brand-text.glitch-active {
    animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both, glitch-text 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.nav-brand-text.glitch-active::before,
.nav-brand-text.glitch-active::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.nav-brand-text.glitch-active::before {
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim-1 0.3s infinite linear alternate-reverse;
}

.nav-brand-text.glitch-active::after {
    left: -2px;
    text-shadow: -2px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim-2 0.3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% {
        clip: rect(31px, 9999px, 94px, 0);
        transform: skew(0.5deg);
    }
    5% {
        clip: rect(75px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    10% {
        clip: rect(93px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    15% {
        clip: rect(78px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    20% {
        clip: rect(23px, 9999px, 98px, 0);
        transform: skew(0.5deg);
    }
    25% {
        clip: rect(30px, 9999px, 97px, 0);
        transform: skew(0.5deg);
    }
    30% {
        clip: rect(86px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    35% {
        clip: rect(94px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    40% {
        clip: rect(23px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    45% {
        clip: rect(14px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    50% {
        clip: rect(73px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    55% {
        clip: rect(40px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    60% {
        clip: rect(26px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    65% {
        clip: rect(14px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    70% {
        clip: rect(60px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    75% {
        clip: rect(10px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    80% {
        clip: rect(35px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    85% {
        clip: rect(86px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    90% {
        clip: rect(82px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    95% {
        clip: rect(60px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    100% {
        clip: rect(73px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip: rect(65px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    5% {
        clip: rect(96px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    10% {
        clip: rect(25px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    15% {
        clip: rect(63px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    20% {
        clip: rect(82px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    25% {
        clip: rect(54px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    30% {
        clip: rect(95px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    35% {
        clip: rect(30px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    40% {
        clip: rect(50px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    45% {
        clip: rect(16px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    50% {
        clip: rect(37px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    55% {
        clip: rect(87px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    60% {
        clip: rect(5px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    65% {
        clip: rect(52px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    70% {
        clip: rect(68px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    75% {
        clip: rect(19px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    80% {
        clip: rect(46px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    85% {
        clip: rect(98px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    90% {
        clip: rect(8px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    95% {
        clip: rect(34px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
    100% {
        clip: rect(90px, 9999px, 100px, 0);
        transform: skew(0.5deg);
    }
}

/* Additional brand animations per page */
.nav-brand-text.nav-brand-anim-shimmer {
    animation: navShimmerGlow 5.5s ease-in-out infinite;
}

@keyframes navShimmerGlow {
    0%, 100% {
        text-shadow: 0 0 6px rgba(212, 175, 55, 0.35), 0 0 12px rgba(255, 255, 255, 0.15);
    }
    50% {
        text-shadow: 0 0 15px rgba(212, 175, 55, 0.85), 0 0 25px rgba(255, 255, 255, 0.4);
    }
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
    margin: 0 15px;
}

.nav-link {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1rem;
    padding: 10px 15px;
    display: block;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.nav-link:hover {
    color: #d4af37;
    background: rgba(212, 175, 55, 0.1);
    transform: scale(1.05);
}

.nav-link:focus,
.btn:focus {
    outline: 2px solid #d4af37;
    outline-offset: 2px;
}

/* Dropdown Styles */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    min-width: 200px;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.nav-item.dropdown:hover .dropdown-menu,
.dropdown:hover .dropdown-menu,
.nav-item.dropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    color: #fff;
    padding: 12px 20px;
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
}

.dropdown-menu a:hover {
    background: rgba(212, 175, 55, 0.2);
    color: #d4af37;
    padding-left: 25px;
}

/* Hamburger Menu Styles */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 5px;
    z-index: 1001;
    background: transparent;
    border: none;
}

.hamburger .bar {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
}

.hamburger.active .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

.hamburger:hover .bar {
    background-color: #d4af37;
}

/* Hero Section */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../assets/background/home/BG2-min.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

/* Fixed background workaround for mobile - ensures background stays fixed */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../assets/background/home/BG2-min.jpg') center/cover no-repeat;
    z-index: -1;
    pointer-events: none;
}

/* On desktop, confine the hero background to the hero section only */
@media (min-width: 769px) {
    .hero::before {
        position: absolute;
        height: 100%;
    }
}

/* Dark overlay that fades in on scroll */
.hero-dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
    transition: background-color 0.1s linear;
    pointer-events: none;
}

/* Ensure hero content is above overlay */
.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
}

.scroll-down {
    position: relative;
    z-index: 2;
}

.hero-text {
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Heading font: Anton - Bold and impactful display font */
.hero-heading {
    font-size: 5rem;
    font-weight: 900;
    text-transform: uppercase;
    font-family: "Anton", sans-serif; /* Bold display font for main heading */
    font-size: 10em;
    font-weight: 600;
    line-height: 1;
    background: url('../assets/background/home/BG2-min.jpg');
    background-size: cover;
    background-position: center center;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 40px;
    letter-spacing: 3px;
    text-align: center;
}

/* Keep only the image-inside-text fixed on larger screens (outer hero scrolls normally) */
@media (min-width: 1024px) {
    .hero-heading {
        background-attachment: fixed;
    }
}

.hero-brand {
    flex: 1;
    min-width: 300px;
    padding: 20px;
}

/* Logo container - holds logo and orbital elements */
.logo-container {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 300px;
    margin-bottom: 30px;
}

.logo {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img {
    max-width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 10;
}

/* Orbital trail - smooth rotating shadow-like trail */
.orbital-trail {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 340px;
    height: 340px;
    margin-top: -170px;
    margin-left: -170px;
    border-radius: 50%;
    z-index: 4;
    pointer-events: none;
    animation: orbitRotateSmooth 12s linear infinite;
    /* Shadow-like fading trail effect */
    background: conic-gradient(from 0deg at 50% 50%,
        transparent 0deg,
        transparent 240deg,
        rgba(255, 255, 255, 0.1) 250deg,
        rgba(255, 255, 255, 0.2) 260deg,
        rgba(255, 255, 255, 0.35) 270deg,
        rgba(255, 255, 255, 0.5) 280deg,
        rgba(255, 255, 255, 0.65) 290deg,
        rgba(255, 255, 255, 0.8) 300deg,
        rgba(255, 255, 255, 0.9) 310deg,
        rgba(255, 255, 255, 0.95) 315deg,
        rgba(255, 255, 255, 1) 320deg,
        rgba(255, 255, 255, 0.9) 325deg,
        rgba(255, 255, 255, 0.7) 330deg,
        rgba(255, 255, 255, 0.5) 335deg,
        rgba(255, 255, 255, 0.3) 340deg,
        rgba(255, 255, 255, 0.15) 345deg,
        rgba(255, 255, 255, 0.05) 350deg,
        transparent 360deg
    );
    /* Create shadow blur effect with mask */
    filter: blur(1px);
    mask: radial-gradient(circle, transparent 45%, black 47%, black 50%, transparent 53%);
    -webkit-mask: radial-gradient(circle, transparent 45%, black 47%, black 50%, transparent 53%);
    /* Add subtle shadow to enhance the trail effect */
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

/* Smooth rotation animation - slower and more elegant */
@keyframes orbitRotateSmooth {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Motto slide up animation - appears from bottom, leaves from top */
@keyframes mottoSlideIn {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    15% {
        opacity: 1;
        transform: translateY(0);
    }
    85% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-40px);
    }
}

.motto.animating {
    animation: mottoSlideIn 4s ease-in-out;
}

/* Motto uses Poppins for readability across all languages */
.motto {
    font-family: 'Poppins', sans-serif; /* Readable font for multiple languages */
    font-size: 1.5rem;
    color: #ffffff;
    min-height: 50px;
    max-height: 50px;
    overflow: hidden;
    font-weight: 300;
    position: relative;
    text-align: center;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Scroll Down Animation */
.scroll-down {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 10;
    animation: fadeInUp 1s ease-out 1s both;
}

.scroll-text {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #ffffff;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.8;
}

.scroll-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    animation: bounceDown 2s ease-in-out infinite;
    transform: translateY(0);
}

.scroll-arrow i {
    font-size: 1.2rem;
    color: #ffffff;
    animation: jump 1.5s ease-in-out infinite;
}

/* Fade in up animation for scroll down */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Bounce down animation */
@keyframes bounceDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

/* Jump animation for arrow */
@keyframes jump {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Blog & Itinerary Section */
.blog-itinerary {
    padding: 80px 0;
    background-color: #FAF9F6;
    position: relative;
    overflow: hidden; /* Prevent stickers from overflowing */
}

/* Floating Doodle Stickers */
.doodle-stickers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0; /* Behind content */
}

.doodle-sticker {
    position: absolute;
    opacity: 0.15;
    user-select: none;
    animation: floatSticker 12s ease-in-out infinite;
    animation-play-state: paused;
    transition: opacity 0.3s ease;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

.doodle-sticker img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.doodle-sticker:hover {
    opacity: 0.25;
}

.doodle-sticker:hover img {
    opacity: 1;
    transform: scale(1.05);
}

.doodle-stickers.is-active .doodle-sticker {
    animation-play-state: running;
}

/* Individual sticker positions and animations */
.doodle-sticker.sticker-1 {
    top: 10%;
    left: 5%;
    animation-delay: 0s;
    animation-duration: 10s;
}

.doodle-sticker.sticker-2 {
    top: 20%;
    right: 8%;
    animation-delay: 1s;
    animation-duration: 12s;
}

.doodle-sticker.sticker-3 {
    top: 45%;
    left: 3%;
    animation-delay: 2s;
    animation-duration: 9s;
}

.doodle-sticker.sticker-4 {
    top: 60%;
    right: 5%;
    animation-delay: 1.5s;
    animation-duration: 11s;
}

.doodle-sticker.sticker-5 {
    top: 75%;
    left: 10%;
    animation-delay: 0.5s;
    animation-duration: 13s;
}

.doodle-sticker.sticker-6 {
    top: 30%;
    left: 85%;
    animation-delay: 2.5s;
    animation-duration: 10s;
}

.doodle-sticker.sticker-7 {
    top: 55%;
    right: 15%;
    animation-delay: 3s;
    animation-duration: 9s;
}

.doodle-sticker.sticker-8 {
    top: 80%;
    left: 90%;
    animation-delay: 1s;
    animation-duration: 12s;
}

.doodle-sticker.sticker-9 {
    top: 15%;
    left: 70%;
    animation-delay: 2s;
    animation-duration: 11s;
}

.doodle-sticker.sticker-10 {
    top: 65%;
    left: 45%;
    animation-delay: 0.8s;
    animation-duration: 14s;
}

/* Floating animation */
@keyframes floatSticker {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-20px) translateX(10px) rotate(5deg) scale(1.1);
    }
    50% {
        transform: translateY(-10px) translateX(-15px) rotate(-5deg) scale(0.9);
    }
    75% {
        transform: translateY(-30px) translateX(5px) rotate(3deg) scale(1.05);
    }
}

.blog-itinerary h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.5rem;
    color: #000;
    position: relative;
}

.blog-itinerary h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #d4af37;
    margin: 10px auto;
}

.blog-itinerary .container,
.find-us .container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    position: relative;
    z-index: 2; /* Above stickers */
}

.blog-section {
    flex: 1;
    min-width: 300px;
}

.itinerary-section {
    flex: 1;
    min-width: 300px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.blog-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.blog-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.card-image {
    height: 180px;
    background-size: cover;
    background-position: center;
}

.sikkim {
    background-image: url('../assets/background/home/C-CARD/SIKKIM.webp');
}

.nepal {
    background-image: url('../assets/background/home/C-CARD/NEPAL.webp');
}

.bhutan {
    background-image: url('../assets/background/home/C-CARD/BHUTAN.webp');
}

.darjeeling {
    background-image: url('../assets/background/home/C-CARD/DARJEELING.webp');
}

.blog-card h3 {
    padding: 15px 20px 5px;
    color: #000;
}

.blog-card p {
    padding: 0 20px 20px;
    color: #666;
}

.itinerary-list {
    list-style: none;
}

.itinerary-list li {
    padding: 20px;
    padding-top: 20px; /* Normal padding, price tag positioned outside content area */
    padding-right: 15px; /* Add padding so tape end doesn't overlap content */
    margin-bottom: 20px;
    background: #f9f9f9;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-left: 4px solid #d4af37;
    border-radius: 0 8px 8px 0;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible; /* Changed to visible so price tag shows fully */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Entrance animation - initial state */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Keyframes for fade in up animation */
@keyframes fadeInUpStagger {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* When card is visible (triggered by JS) */
.itinerary-list li.card-visible {
    opacity: 1;
    transform: translateY(0);
}

.itinerary-list li:hover {
    background: #f0f0f0;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transform: translateX(3px) translateY(0); /* Maintain Y position while translating X */
}

.itinerary-list h3 {
    color: #000;
    margin-bottom: 8px;
    padding-right: 170px; /* Add padding to prevent heading overlap with price tag */
    line-height: 1.3;
}

.itinerary-list p {
    color: #666;
}

/* Ribbon-style price tag in top-right corner with tape effect */
.price-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
    color: #000;
    padding: 5px 45px 5px 18px; /* Increased padding for bigger size */
    font-weight: 700;
    font-size: 0.8rem; /* Increased font size */
    position: absolute;
    top: 15px; /* Positioned further down to avoid overlap */
    right: 0px; /* Extend to right edge of card */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    clip-path: polygon(8% 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 8% 100%);
    transform: rotate(0deg);
    z-index: 10;
    white-space: nowrap;
    /* Tape effect with shadows */
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2)) 
            drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
    /* Create triangular cuts at the end like a cut tape */
    overflow: visible;
}

/* Triangular cuts at the right end (like scissors cut tape) - serrated edge */
.price-tag::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 0;
    width: 12px;
    height: 100%;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
    /* Create serrated edge with triangles - multiple triangular notches */
    clip-path: polygon(
        0% 0%,
        50% 20%,
        100% 0%,
        100% 30%,
        50% 50%,
        100% 70%,
        100% 100%,
        50% 80%,
        0% 100%
    );
}

/* Tape shine effect */
.price-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: tapeShine 4s infinite;
}

/* Subtle tape wrinkles */
.price-tag .tape-wrinkle {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    width: 2px;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    opacity: 0.6;
}

.price-amount {
    font-size: 1.15em; /* Slightly larger to match bigger tag */
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@keyframes tapeShine {
    0%, 100% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
}

/* Offers Section */

.offers {
    padding: 80px 0;
    background-color: #000;
    color: #fff;
    position: relative;
    overflow: hidden; /* Prevent trail from overflowing */
}

.offers .container {
    display: flex;
    align-items: center;
    gap: 50px;
}

.offers h2 {
    margin-bottom: 0;
    text-orientation: upright;
    font-size: 2rem;
    letter-spacing: 10px;
    position: relative;
}

.offers h2::after {
    display: none;
}

.coming-soon-content {
    flex: 1;
    text-align: left;
    padding: 20px 0;
}

.coming-soon {
    font-size: 3rem;
    color: #d4af37;
    margin-bottom: 30px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(0.89);
    }
    50% {
        transform: scale(0.9);
    }
}

.coming-soon-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #ccc;
    font-weight: 300;
    text-align: justify;
}

/* Find Us Section */
.find-us {
    padding: 80px 0;
    background-color: #fff;
    position: relative;
    overflow: hidden; /* Prevent stickers from overflowing */
}

/* Find Us Section - Different sticker positions */
.find-us .doodle-sticker.sticker-1 {
    top: 8%;
    left: 7%;
    animation-delay: 0s;
}

.find-us .doodle-sticker.sticker-2 {
    bottom: 18%;
    right: 8%;
    animation-delay: 1.2s;
}

.find-us .doodle-sticker.sticker-3 {
    top: 48%;
    left: 6%;
    animation-delay: 2.2s;
}

.find-us .doodle-sticker.sticker-4 {
    bottom: 12%;
    right: 12%;
    animation-delay: 0.8s;
}

.find-us .doodle-sticker.sticker-5 {
    bottom: 28%;
    left: 78%;
    animation-delay: 1.8s;
}

.find-us .doodle-sticker.sticker-6 {
    top: 62%;
    right: 18%;
    animation-delay: 2.5s;
}

.find-us .doodle-sticker.sticker-7 {
    top: 24%;
    left: 72%;
    animation-delay: 1s;
}

.find-us .doodle-sticker.sticker-8 {
    bottom: 6%;
    left: 42%;
    animation-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
    .doodle-stickers,
    .doodle-sticker {
        animation: none !important;
    }
}

/* Fade-in animation for sections as they scroll into view - Optimized for performance */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.6s ease-out;
    will-change: opacity, transform;
    position: relative;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

/* Dark fade-out overlay for sections transitioning out */
.fade-in-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
    pointer-events: none;
    transition: background 0.8s ease-out;
}

.fade-in-section.fade-out::before {
    background: rgba(0, 0, 0, 0.7);
}

/* Ensure section content is above overlay */
.fade-in-section > * {
    position: relative;
    z-index: 2;
}

.find-us .container {
    position: relative;
    z-index: 2;
}

.find-us-layout {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
    gap: 40px;
    align-items: start;
}

.find-us-title {
    grid-column: 1 / -1;
    margin-bottom: 20px;
    font-size: 2.5rem;
    color: #000;
    position: relative;
}

.find-us-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #d4af37;
    margin: 10px 0;
}

.map-wrapper {
    width: 100%;
    /* Use aspect ratio so the iframe fully fills the card on all devices */
    aspect-ratio: 16 / 9;
    min-height: 320px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.find-us-details {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.invitation {
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: #333;
    line-height: 1.8;
    text-align: justify;
    text-justify: inter-word;
}

.address {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
}

.address i {
    color: #d4af37;
    margin-right: 10px;
}

/* Contact Section */
.contact {
    padding: 80px 0;
    background-color: #000;
    color: #fff;
    position: relative;
    overflow: hidden; /* Prevent trail from overflowing */
}

/* Golden Mouse Trail Effect for Black Sections */
.mouse-trail {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #d4af37, #f4d03f);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    opacity: 0.8;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.8), 0 0 20px rgba(212, 175, 55, 0.5);
    animation: trailFade 0.8s ease-out forwards;
    transform: translate(-50%, -50%);
}

@keyframes trailFade {
    0% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
}

.contact .container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.contact-info {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-info h2 {
    margin-bottom: 30px;
    font-size: 2.5rem;
    position: relative;
}

.contact-info h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #d4af37;
    margin: 10px 0;
}

.contact-subtext {
    font-size: 1.1rem;
    color: #d4af37;
    font-style: italic;
    margin-bottom: 20px;
    font-weight: 500;
}

.phone {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: #d4af37;
}

.phone i {
    margin-right: 10px;
}

.call-btn {
    align-self: flex-start;
}

.contact-form {
    flex: 1;
    min-width: 300px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 4px;
    background: #1a1a1a;
    color: #fff;
    font-size: 1rem;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #999;
}

.send-btn {
    width: 100%;
    background: #d4af37;
    color: #000;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Donate / Join Section */
.donate {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
    color: #fff;
    position: relative;
    overflow: hidden;
    padding-top: 20px;
}

.donate-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.donate-content h2 {
    margin-bottom: 30px;
}

.donate-content p {
    margin-bottom: 20px;
    color: #ccc;
    font-size: 1.1rem;
    line-height: 1.8;
}

.donate-video {
    margin: 30px 0;
    display: flex;
    justify-content: center;
    position: relative;
}

.video-container {
    width: 100%;
    max-width: 600px;
    border: 3px solid #d4af37;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    background: #000;
}

.video-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    z-index: 3;
}

.video-container video {
    width: 100%;
    height: auto;
    display: block;
    outline: none;
}

.play-pause-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    color: #d4af37;
    cursor: pointer;
    z-index: 4;
    font-size: 1.8rem;
    transition: all 0.3s ease;
}

.play-pause-btn:hover {
    background: rgba(212, 175, 55, 0.85);
    color: #000;
    transform: translate(-50%, -50%) scale(1.05);
}

.mute-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: #d4af37;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    transition: all 0.3s ease;
}

.mute-btn:hover {
    background: rgba(212, 175, 55, 0.7);
    color: #000;
}

.donate .btn {
    margin-top: 20px;
    background: #d4af37;
    color: #000;
    font-weight: 600;
margin-bottom: 20px;
}

.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.floating-element {
    position: absolute;
    opacity: 0.1;
    animation: floatElement 15s infinite linear;
}

/* Google Reviews Section */
.google-reviews {
    padding: 80px 0;
    background-color: #FAF9F6;
}

.google-reviews h2 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.5rem;
    color: #000;
    position: relative;
}

.google-reviews h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #d4af37;
    margin: 10px auto;
}

/* Two-row scrolling reviews container */
.reviews-container {
    overflow: hidden;
    margin-top: 30px;
}

.reviews-controls {
    display: none;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}

.reviews-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.4);
    background: rgba(0, 0, 0, 0.05);
    color: #d4af37;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reviews-control:hover {
    background: #d4af37;
    color: #000;
    transform: translateY(-2px);
}

.reviews-control:focus {
    outline: 2px solid #d4af37;
    outline-offset: 2px;
}
.reviews-row {
    display: flex;
    gap: 25px;
    margin-bottom: 25px;
    width: fit-content;
    will-change: transform;
}

#reviewsRowTop {
    animation: scrollRight 40s linear infinite;
    display: flex;
}

#reviewsRowBottom {
    animation: scrollLeft 40s linear infinite;
    display: flex;
}

/* Pause on hover for desktop */
.reviews-container:hover .reviews-row {
    animation-play-state: paused;
}

/* Continuous scrolling animations */
@keyframes scrollRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes scrollLeft {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}

.review-card {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    flex: 0 0 280px;
    min-width: 280px;
    opacity: 1;
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 25px;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.review-author {
    font-weight: 700;
    font-size: 1.1rem;
    color: #000;
}

.review-stars {
    display: flex;
    gap: 3px;
    color: #d4af37;
    font-size: 1.2rem;
}

.review-text {
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.review-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
    color: #000;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.review-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
    text-decoration: none;
}

.review-link i {
    font-size: 1rem;
}

/* Mobile responsiveness for reviews */
@media (max-width: 768px) {
    .reviews-container {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .review-card {
        flex: 0 0 85vw;
        min-width: 85vw;
    }
    
    .review-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .review-stars {
        font-size: 1.05rem;
    }
    
    /* Disable auto-scroll on mobile, enable touch swipe */
    .reviews-row {
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        animation: none !important;
    }
    
    .reviews-row::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    
    /* Enable momentum scrolling on iOS */
    .reviews-row {
        -webkit-overflow-scrolling: touch;
    }
}

/* Footer */
.footer {
    background: #111;
    color: #fff;
    padding: 60px 0 20px;
}

.footer .container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
    justify-content: center;
    align-items: flex-start;
}

.about-section {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
}

.about-section h3 {
    margin-bottom: 20px;
    font-size: 1.8rem;
    color: #d4af37;
    position: relative;
}

.about-section h3::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: #d4af37;
    margin: 10px 0;
}

.about-section p.about-text {
    color: #ccc;
    line-height: 1.8;
    text-align: justify;
    text-justify: inter-word;
}

.social-section {
    flex: 1;
    min-width: 300px;
    max-width: 400px;
}

.social-section h3 {
    margin-bottom: 20px;
    font-size: 1.8rem;
    color: #d4af37;
    position: relative;
}

.social-section h3::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: #d4af37;
    margin: 10px 0;
}

.social-links {
    display: flex;
    gap: 20px;
    padding-top: 20px;
    padding-left: 6px;
}

.social-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #fff;
    transition: transform 0.3s ease;
}

ul {
    list-style: none;
}

.example-2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.example-2 .icon-content {
    margin: 0 10px;
    position: relative;
}

.example-2 .icon-content .tooltip {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    padding: 6px 10px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    font-size: 14px;
    transition: all 0.3s ease;
}

.example-2 .icon-content:hover .tooltip {
    opacity: 1;
    visibility: visible;
    top: -50px;
}

.example-2 .icon-content a {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #4d4d4d;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
}

.example-2 .icon-content a:hover {
    box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}

.example-2 .icon-content a svg {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
}

.example-2 .icon-content a:hover {
    color: white;
}

.example-2 .icon-content a .filled {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #000;
    transition: all 0.3s ease-in-out;
}

.example-2 .icon-content a:hover .filled {
    height: 100%;
}

.example-2 .icon-content a[data-social="whatsapp"] .filled,
.example-2 .icon-content a[data-social="whatsapp"] ~ .tooltip {
    background-color: #128c7e;
}

.example-2 .icon-content a[data-social="facebook"] .filled,
.example-2 .icon-content a[data-social="facebook"] ~ .tooltip {
    background-color: #3b5998;
}

.example-2 .icon-content a[data-social="instagram"] .filled,
.example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
    background: linear-gradient(45deg,
            #405de6,
            #5b51db,
            #b33ab4,
            #c135b4,
            #e1306c,
            #fd1f1f);
}

.example-2 .icon-content a[data-social="youtube"] .filled,
.example-2 .icon-content a[data-social="youtube"] ~ .tooltip {
    background-color: #ff0000;
}


.copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #333;
    color: #999;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.back-to-top-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
    color: #000;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.back-to-top-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
}

.back-to-top-btn i {
    font-size: 1.1rem;
}

/* Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 12000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    backdrop-filter: blur(5px);
    animation: modalFadeIn 0.3s ease forwards;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-overlay.closing {
    animation: modalFadeOut 0.3s ease forwards;
}

@keyframes modalFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.modal-content {
    background: #fff;
    border-radius: 10px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 12001;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.modal-content.closing {
    animation: modalSlideOut 0.3s ease forwards;
}

@keyframes modalSlideOut {
    from {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    to {
        transform: translateY(-50px) scale(0.9);
        opacity: 0;
    }
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    color: #333;
    cursor: pointer;
    z-index: 10;
    background: none;
    border: none;
}

.close-btn:hover {
    color: #d4af37;
}

.modal-header {
    padding: 20px 30px 10px;
    border-bottom: 1px solid #eee;
}

.modal-header h2 {
    color: #000;
    font-size: 1.8rem;
}

.modal-body {
    padding: 20px 30px;
}

.modal-section {
    margin-bottom: 25px;
}

.modal-section h3 {
    color: #d4af37;
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.modal-section p {
    color: #666;
    line-height: 1.6;
}

.modal-section ul {
    padding-left: 20px;
    color: #666;
}

.modal-section li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.enquire-btn {
    margin-right: 15px;
    margin-top: 10px;
    width: 100%;
}

.enquiry-modal .modal-body {
    padding: 30px;
}

.enquiry-modal .form-group {
    margin-bottom: 20px;
}

.enquiry-modal .form-group input,
.enquiry-modal .form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
    color: #333;
    font-size: 1rem;
}

.enquiry-modal .form-group input::placeholder,
.enquiry-modal .form-group textarea::placeholder {
    color: #999;
}

.enquiry-modal .form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 500;
}

.send-enquiry-btn {
    width: 100%;
    background: #d4af37;
    color: #000;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px;
}

.payment-note {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    text-align: center;
    line-height: 1.6;
}

/* Responsive Design - Mobile Compatible */
@media (max-width: 992px) {
    .hero-heading {
        font-size: 4rem;
    }
    
    .coming-soon {
        font-size: 2.5rem;
    }
    
    .coming-soon-text {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .doodle-stickers {
        display: none;
    }

    /* Doodle stickers smaller on mobile */
    .doodle-sticker {
        width: 50px;
        height: 50px;
        opacity: 0.1;
    }

    /* Hamburger Menu - Show on Mobile */
    .hamburger {
        display: flex;
    }

    /* Hide nav menu by default on mobile */
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 80px;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(20px);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.5);
        padding: 20px 0;
        z-index: 1000;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-item {
        margin: 10px 0;
        width: 100%;
    }

    .nav-link {
        padding: 15px;
        width: 100%;
        text-align: center;
    }

    /* Dropdown menu on mobile */
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: rgba(0, 0, 0, 0.5);
        box-shadow: none;
        margin-top: 5px;
        display: none;
    }

    .nav-item.dropdown.active .dropdown-menu {
        display: block;
    }

    .nav-logo .logo-img {
        height: 40px;
    }

    /* Hide brand text on mobile */
    .nav-brand-text {
        display: none;
    }

    .hero-content {
        flex-direction: column;
        text-align: center;
    }

    .hero-heading {
        font-size: 3rem;
        letter-spacing: 2px;
    }

    /* Keep background fixed on mobile using pseudo-element */
    .hero::before {
        position: fixed;
        height: 100vh;
        display: block; /* Ensure pseudo-element is visible on mobile */
    }

    .motto {
        font-size: 0.95rem;
    }
    
    .scroll-down {
        bottom: 30px;
    }
    
    .scroll-text {
        font-size: 0.8rem;
    }
    
    .scroll-arrow {
        width: 35px;
        height: 35px;
    }
    
    .logo img {
        max-width: 250px;
    }

    .modal-content {
        width: 95%;
        max-height: 95vh;
    }
    
    .modal-header h2 {
        font-size: 1.5rem;
    }
    
    .enquire-btn {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        margin-right: 0;
    }
    
    .coming-soon {
        font-size: 2rem;
        letter-spacing: 2px;
    }
    
    .coming-soon-text {
        font-size: 1rem;
    }
    
    .price-tag {
        font-size: 0.7rem; /* Slightly bigger on mobile */
        padding: 4px 40px 4px 15px; /* Increased padding for bigger size */
        top: 15px; /* Positioned below top edge */
        right: 0px; /* Extend to right edge on mobile too */
        clip-path: polygon(8% 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 8% 100%);
    }
    
    .itinerary-list h3 {
        padding-right: 150px; /* Less padding on mobile */
    }
    
    .price-amount {
        font-size: 1.1em; /* Slightly bigger on mobile */
    }
    
    .blog-itinerary h2,
    .find-us-title,
    .contact-info h2,
    .google-reviews h2 {
        font-size: 2rem;
    }
    
    .offers .container {
        flex-direction: column;
        text-align: center;
    }
    
    .offers h2 {
        writing-mode: horizontal-tb;
        font-size: 2.5rem;
        letter-spacing: 2px;
        margin-bottom: 20px;
    }
    
    .coming-soon-content {
        text-align: center;
    }

    .find-us-layout {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .find-us-title {
        margin-bottom: 10px;
        text-align: left;
    }

    .map-wrapper {
        min-height: 260px;
    }

    .find-us-details {
        gap: 20px;
    }

    .map-wrapper iframe {
        border-radius: 12px;
    }

    /* Ensure itinerary cards are fully visible on mobile (no scroll-triggered opacity) */
    .itinerary-list li {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .fade-in-section {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .fade-in-section::before {
        display: none;
    }

    .floating-element,
    .floating-elements {
        animation: none !important;
    }

    .orbital-trail {
        animation: none !important;
    }

    .motto.animating {
        animation: none;
    }

    .reviews-controls {
        display: flex;
    }
    
    .contact-subtext {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .nav-logo .logo-img {
        height: 35px;
    }

    .nav-container {
        padding: 0 15px;
        height: 70px;
    }

    .nav-menu {
        top: 70px;
    }

    .hero-heading {
        font-size: 2.5rem;
        letter-spacing: 1px;
    }

    .motto {
        font-size: 0.9rem;
    }
    
    .scroll-down {
        bottom: 20px;
    }
    
    .scroll-text {
        font-size: 0.75rem;
        letter-spacing: 1px;
    }
    
    .scroll-arrow {
        width: 30px;
        height: 30px;
    }
    
    .scroll-arrow i {
        font-size: 1rem;
    }
    
    .logo img {
        max-width: 200px;
    }

    .blog-itinerary h2,
    .find-us-title,
    .contact-info h2,
    .google-reviews h2 {
        font-size: 1.8rem;
    }
    
    .offers h2 {
        writing-mode: horizontal-tb;
        font-size: 2rem;
    }

    .map-wrapper {
        min-height: 220px;
    }

    .social-links {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .coming-soon {
        font-size: 1.8rem;
        letter-spacing: 1px;
    }
    
    .back-to-top-btn {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
    
    .review-card {
        padding: 20px;
    }
    
    .review-author {
        font-size: 1rem;
    }
    
    .review-text {
        font-size: 0.9rem;
    }

}