:root {
    --sky: #0ea5e9;
    --sky-dark: #0284c7;
    --cyan: #06b6d4;
    --cyan-dark: #0891b2;
    --emerald: #10b981;
    --emerald-dark: #059669;
    --emerald-deeper: #064e3b;
    --teal: #14b8a6;
    --blue: #0ea5e9;
    --orange: #f97316;
    --amber: #f59e0b;
    --purple: #8b5cf6;
    --pink: #ec4899;
    --red: #ef4444;
    --g50: #f9fafb;
    --g100: #f3f4f6;
    --g200: #e5e7eb;
    --g300: #d1d5db;
    --g400: #9ca3af;
    --g500: #6b7280;
    --g600: #4b5563;
    --g700: #374151;
    --g800: #1f2937;
    --g900: #111827;
}

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

html {
    scroll-behavior: smooth
}

/* ================= GLOBAL PREMIUM BACKGROUND (OPTIMIZED) ================= */
body {
    font-family: 'Poppins', sans-serif;
    color: #1e293b;
    line-height: 1.65;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background-color: #f8fafc;
    /* Keep only the solid base color here */
}

/* GPU Accelerated Fixed Background Layer */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    /* Push it behind everything */
    pointer-events: none;
    background-image:
        radial-gradient(at 0% 0%, rgba(14, 165, 233, 0.05) 0px, transparent 60%),
        radial-gradient(at 100% 0%, rgba(16, 185, 129, 0.04) 0px, transparent 60%),
        radial-gradient(at 100% 100%, rgba(14, 165, 233, 0.04) 0px, transparent 60%),
        radial-gradient(at 0% 100%, rgba(245, 158, 11, 0.03) 0px, transparent 60%);
    transform: translateZ(0);
    /* Force GPU Rendering */
    will-change: transform;
}

h1,
h2,
h3,
h4 {
    font-family: 'Playfair Display', serif;
    line-height: 1.15
}

a {
    color: inherit;
    text-decoration: none
}

img {
    max-width: 100%;
    display: block
}

button,
input,
select,
textarea {
    font-family: inherit;
    border: none;
    outline: none
}

button {
    cursor: pointer;
    background: none
}

::-webkit-scrollbar {
    width: 7px
}

::-webkit-scrollbar-track {
    background: #f1f5f9
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--sky), var(--cyan));
    border-radius: 99px
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-20px)
    }
}

@keyframes floatSlow {

    0%,
    100% {
        transform: translateY(0) rotate(0deg)
    }

    50% {
        transform: translateY(-30px) rotate(5deg)
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(14, 165, 233, .5)
    }

    50% {
        box-shadow: 0 0 30px rgba(6, 182, 212, .7)
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(28px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes badge-pulse {
    0% {
        opacity: 1
    }

    50% {
        opacity: .7
    }

    100% {
        opacity: 1
    }
}

@keyframes icon-bounce {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}


/* =============== NEW NAVBAR CSS (WITH DESKTOP FIX) =============== */
.custom-navbar {
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 18px 0;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}

.custom-navbar .nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    /* Pushes Logo left, Wrapper right */
    align-items: center;
    flex-wrap: wrap;
}

/* Logo Styling */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-icon {
    background: linear-gradient(135deg, var(--sky), var(--cyan));
    color: white;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.logo-text {
    font-size: 24px;
    font-weight: 800;
    color: #1f2937;
    font-family: 'Playfair Display', serif;
}

.logo-text span {
    color: var(--sky);
}

/* Desktop Wrapper Layout */
.nav-menu-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
    /* Gap between links and buttons */
}

/* Bulletproof Desktop Reset (In case GSAP styles bleed on resize) */
@media (min-width: 993px) {
    .nav-menu-wrapper {
        position: static !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        flex-direction: row !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}

/* Links */
.nav-links {
    display: flex;
    list-style: none;
    gap: 35px;
    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    color: #4b5563;
    font-weight: 600;
    font-size: 15px;
    position: relative;
    padding-bottom: 6px;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--sky-dark);
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2.5px;
    background-color: var(--sky);
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 2px;
}

.nav-links a:hover::after {
    width: 100%;
}

/* Buttons Area */
.nav-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Outline Call Button */
.btn-call-new {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--sky-dark);
    font-weight: 700;
    font-size: 14px;
    padding: 8px 18px;
    border: 2px solid var(--sky);
    background-color: #f0f9ff;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-call-new:hover {
    background-color: var(--sky);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(14, 165, 233, 0.2);
}

/* Solid Book Now Button */
.btn-book-new {
    background: linear-gradient(135deg, var(--sky), var(--cyan));
    color: white;
    border: none;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 6px 15px rgba(14, 165, 233, 0.25);
}

.btn-book-new:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 20px rgba(14, 165, 233, 0.4);
}

/* Mobile Toggle Button */
.mobile-toggle-btn {
    display: none;
    background: none;
    border: none;
    font-size: 26px;
    color: #1f2937;
    cursor: pointer;
    transition: color 0.3s;
}

.mobile-toggle-btn:hover {
    color: var(--sky);
}

/* ================= RESPONSIVE DESIGN (MOBILE & TABLET) ================= */
@media (max-width: 992px) {
    .mobile-toggle-btn {
        display: block;
    }

    /* THE OVERLAY MENU */
    .nav-menu-wrapper {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.08);
        padding: 0 20px;
        display: flex;
        flex-direction: column;

        /* Default Closed State for GSAP */
        height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 20px 0;
        border-top: 1px solid #f1f5f9;
        margin-top: 5px;
        text-align: center;
    }

    .nav-links a {
        display: block;
        padding: 10px 0;
        font-size: 16px;
    }

    .nav-links a::after {
        display: none;
        /* Disable line animation on mobile */
    }

    .nav-buttons {
        display: flex;
        flex-direction: column;
        padding-bottom: 25px;
        gap: 12px;
    }

    .btn-call-new,
    .btn-book-new {
        width: 100%;
        justify-content: center;
    }
}

/* ================= WELCOME SECTION RESPONSIVE FIXES (UPDATED) ================= */
@media (max-width: 768px) {

    /* Force the Carousel Wrapper to take full width and stay visible */
    div[style*="flex: 1.2 1 500px"] {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-bottom: 20px !important;
        display: block !important;
    }

    /* Fix the massive height of the image carousel */
    div[style*="height: 650px"] {
        height: 320px !important;
        min-height: 320px !important;
        width: 100% !important;
    }

    /* Reduce padding on the main text card to save space */
    div[style*="padding: 60px 40px"] {
        padding: 30px 20px !important;
        border-radius: 24px !important;
        flex: 1 1 100% !important;
    }

    /* Force the Stats Grid to be 2 Columns (2x2) */
    #welcome-stats div[style*="grid-template-columns: repeat(auto-fit, minmax(200px"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    /* Resize stat fonts & icons so they fit perfectly in 2 columns */
    .nature-stat-card strong {
        font-size: 22px !important;
    }

    .nature-stat-card span {
        font-size: 10px !important;
        letter-spacing: 0.5px !important;
    }

    .stone-icon {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 10px !important;
    }

    .stone-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
}

.card-hover {
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.card-hover:hover {
    transform: translateY(-6px)
}

.btn-glow {
    position: relative;
    overflow: hidden
}

.btn-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
    transition: left .5s;
    opacity: 0
}

.btn-glow:hover::before {
    left: 100%;
    opacity: 1
}

.gradient-blue-light {
    background: linear-gradient(135deg, #e0f2fe 0%, #cffafe 100%)
}

.glass {
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .2)
}

.container {
    width: min(1200px, 92%);
    margin: 0 auto
}

/* Scroll Progress */
.scroll-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    z-index: 90;
    background: linear-gradient(90deg, var(--sky), var(--cyan));
    width: 0;
    transition: width .15s linear
}

/* HERO */
.hero {
    height: 100vh;
    position: relative;
    overflow: hidden;
    z-index: 1
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease
}

.slide.active {
    opacity: 1
}

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

.slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(15, 23, 42, .85) 0%, rgba(15, 23, 42, .35) 55%), linear-gradient(0deg, rgba(15, 23, 42, .55) 0%, rgba(15, 23, 42, .05) 50%)
}

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

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center
}

.hero-left {
    color: #fff;
    max-width: 640px
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 99px;
    background: rgba(14, 165, 233, .18);
    border: 1px solid rgba(14, 165, 233, .35);
    color: #38bdf8;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 16px;
    backdrop-filter: blur(6px);
    animation: badge-pulse 2s infinite
}

.mobile-break {
    display: none
}

@media(max-width:768px) {
    .mobile-break {
        display: block
    }
}

.hero-left h1 {
    font-size: clamp(2.4rem, 4.5vw, 4.2rem);
    margin-bottom: 16px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto
}

.hero-left h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #6ee7b7, #67e8f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.hero-left p {
    font-size: 17px;
    color: rgba(255, 255, 255, .78);
    max-width: 85%;
    margin-bottom: 22px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.65
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px
}

.btn-g {
    padding: 14px 30px;
    border-radius: 99px;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .3s
}

.btn-primary {
    background: linear-gradient(135deg, var(--sky), var(--cyan));
    color: #fff;
    box-shadow: 0 14px 28px rgba(14, 165, 233, .35)
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(14, 165, 233, .45)
}

.btn-outline {
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px)
}

.btn-outline:hover {
    background: rgba(255, 255, 255, .2)
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 400px
}

.hero-stat {
    background: rgba(14, 165, 233, .12);
    border: 1px solid rgba(14, 165, 233, .2);
    padding: 14px 10px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    text-align: center;
    transition: background .3s
}

.hero-stat:hover {
    background: rgba(14, 165, 233, .18)
}

.hero-stat strong {
    display: block;
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
    text-align: center
}

.hero-stat small {
    font-size: 11px;
    color: rgba(255, 255, 255, .6);
    text-align: center
}

.hero-right {
    display: none
}

.hero-panel {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 26px;
    border-radius: 22px;
    color: #fff;
    backdrop-filter: blur(14px);
    box-shadow: 0 16px 36px rgba(15, 23, 42, .2)
}

.hero-panel h3 {
    margin-bottom: 6px;
    font-size: 22px
}

.hero-panel p {
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 14px
}

.hero-panel ul {
    list-style: none;
    display: grid;
    gap: 10px;
    font-size: 13px
}

.hero-panel li {
    display: flex;
    align-items: center;
    gap: 10px
}

.hero-panel li .ck {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(16, 185, 129, .3);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 11px;
    color: #6ee7b7
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px
}

.hero-badge {
    padding: 6px 14px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, .25);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600
}

/* Floating badge */
.floating-badge {
    position: absolute;
    right: 7%;
    bottom: 17%;
    background: rgba(255, 255, 255, .94);
    color: var(--g900);
    padding: 18px 20px;
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .22);
    animation: floatAnim 6s ease-in-out infinite;
    max-width: 240px;
    z-index: 4;
    backdrop-filter: blur(10px)
}

.floating-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
    margin-right: 6px;
    animation: pulse 2s infinite
}

.floating-badge strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
    font-family: 'Poppins', sans-serif
}

.floating-badge span {
    font-size: 12px;
    color: var(--g500)
}

@keyframes floatAnim {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-14px)
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .4
    }
}

/* Controls */
.hero-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 14px;
    z-index: 5;
    pointer-events: none;
    transform: translateY(-50%)
}

.hero-controls button {
    width: 46px;
    height: 46px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .25);
    font-size: 20px;
    pointer-events: auto;
    backdrop-filter: blur(6px);
    transition: all .3s;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-weight: bold
}

.hero-controls button:hover {
    background: rgba(255, 255, 255, .25);
    transform: scale(1.1)
}

.hero-controls button:active {
    transform: scale(0.95)
}

@media(max-width:768px) {
    .hero-controls button {
        width: 40px;
        height: 40px;
        font-size: 18px;
        opacity: 0.6
    }

    .hero-controls {
        padding: 0 -8px;
        justify-content: space-between
    }
}

@media(max-width:600px) {
    .hero-controls button {
        width: 36px;
        height: 36px;
        font-size: 16px;
        opacity: 0.5
    }

    .hero-controls {
        padding: 0 -12px
    }
}

@media(max-width:480px) {
    .hero-controls button {
        width: 32px;
        height: 32px;
        font-size: 14px;
        opacity: 0.4
    }

    .hero-controls {
        padding: 0 -16px
    }
}

.hero-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5
}

@media(max-width:768px) {
    .hero-dots {
        bottom: 43px
    }
}

@media(max-width:600px) {
    .hero-dots {
        bottom: 43px
    }
}

@media(max-width:480px) {
    .hero-dots {
        bottom: 43px
    }
}

.hero-dots button {
    height: 8px;
    border-radius: 99px;
    transition: all .4s;
    border: none
}

.hero-dots button.inactive {
    width: 8px;
    background: rgba(255, 255, 255, .4)
}

.hero-dots button.active {
    width: 32px;
    background: var(--emerald)
}

.scroll-ind {
    position: absolute;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: all .3s;
    outline: none
}

@media(max-width:640px) {
    .scroll-ind {
        bottom: 60px;
        font-size: 12px;
        padding: 8px 14px
    }
}

.scroll-ind:hover {
    background: rgba(255, 255, 255, .2);
    transform: translateX(-50%) translateY(-2px)
}

.scroll-ind:active {
    transform: translateX(-50%) translateY(2px)
}

.scroll-ind svg {
    width: 16px;
    height: 16px;
    animation: bounceA 1.5s infinite
}

@keyframes bounceA {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(6px)
    }
}

/* Button Responsiveness Enhancement */
@media(max-width:768px) {
    .btn-g {
        padding: 13px 24px;
        width: 100%;
        max-width: 350px;
        display: flex;
        justify-content: center
    }

    .btn-primary,
    .btn-outline {
        padding: 13px 28px !important;
        font-size: 13px !important
    }
}

@media(max-width:600px) {
    .btn-g {
        padding: 12px 20px;
        max-width: 100%
    }

    .btn-primary,
    .btn-outline {
        padding: 12px 22px !important;
        font-size: 12px !important;
        width: 100% !important
    }
}

@media(max-width:480px) {
    .btn-g {
        padding: 11px 18px;
        max-width: 100%
    }

    .btn-primary,
    .btn-outline {
        padding: 11px 18px !important;
        font-size: 11px !important;
        width: 100% !important
    }
}

/* Welcome Stats Section Enhanced Responsiveness */
@media(max-width:1024px) {
    div[style*="flex: 1 1 450px"] {
        flex: 1 1 100% !important
    }
}

@media(max-width:900px) {
    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="align-items: center"][style*="gap: 60px"] {
        gap: 40px !important;
        flex-direction: column !important
    }

    div[style*="flex: 1 1 450px"] {
        flex: 1 1 100% !important
    }

    div[style*="height: 550px"] {
        height: 450px !important
    }
}

@media(max-width:768px) {
    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="align-items: center"][style*="gap: 60px"] {
        gap: 30px !important
    }

    div[style*="height: 550px"] {
        height: 380px !important
    }

    div[style*="font-size: 42px"][style*="line-height: 1.2"] {
        font-size: 32px !important;
        line-height: 1.3 !important
    }

    div[style*="font-size: 18px"][style*="line-height: 1.7"][style*="color: #4b5563"] {
        font-size: 16px !important;
        line-height: 1.6 !important
    }

    div[style*="grid-template-columns: repeat(auto-fit, minmax(200px"] {
        grid-template-columns: repeat(2, 1fr) !important
    }
}

@media(max-width:680px) {
    div[style*="display: grid"][style*="grid-template-columns: repeat(auto-fit, minmax(260px"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important
    }
}

@media(max-width:600px) {
    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="align-items: center"][style*="gap: 60px"] {
        gap: 25px !important
    }

    div[style*="height: 550px"] {
        height: 320px !important
    }

    div[style*="font-size: 42px"][style*="line-height: 1.2"] {
        font-size: 26px !important;
        line-height: 1.25 !important
    }

    div[style*="font-size: 18px"][style*="line-height: 1.7"][style*="color: #4b5563"] {
        font-size: 14px !important;
        line-height: 1.5 !important
    }

    div[style*="grid-template-columns: repeat(auto-fit, minmax(200px"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important
    }

    div[style*="padding: 24px"][style*="border-radius: 16px"][style*="border: 1px solid #f3f4f6"] {
        padding: 18px 16px !important
    }

    div[style*="font-size: 28px"][style*="font-weight: 800"][style*="font-family: 'Poppins'"] {
        font-size: 22px !important;
        line-height: 1.3 !important
    }
}

@media(max-width:480px) {
    div[style*="height: 550px"] {
        height: 260px !important
    }

    div[style*="font-size: 42px"][style*="line-height: 1.2"] {
        font-size: 22px !important;
        line-height: 1.25 !important
    }

    div[style*="font-size: 18px"][style*="line-height: 1.7"][style*="color: #4b5563"] {
        font-size: 13px !important;
        line-height: 1.5 !important
    }

    div[style*="padding: 24px"][style*="border-radius: 16px"][style*="border: 1px solid #f3f4f6"] {
        padding: 14px 12px !important
    }

    div[style*="font-size: 28px"][style*="font-weight: 800"][style*="font-family: 'Poppins'"] {
        font-size: 18px !important
    }

    div[style*="width: 48px"][style*="height: 48px"][style*="background-color"][style*="border-radius: 50%"] {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 12px !important
    }

    div[style*="padding: 20px"] img[style*="height: 20px"] {
        margin: 0 !important
    }
}


/* Sections */
section {
    padding: 90px 0;
    position: relative;
    overflow: hidden
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 99px;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 14px
}

.tag-emerald {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0
}

.tag-blue {
    background: #dbeafe;
    color: var(--sky-dark);
    border: 1px solid #93c5fd
}

.tag-green {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0
}

.tag-orange {
    background: #ffedd5;
    color: #9a3412;
    border: 1px solid #fdba74
}

.tag-purple {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #c4b5fd
}

.tag-pink {
    background: #fce7f3;
    color: #9d174d;
    border: 1px solid #f9a8d4
}

.tag-amber {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d
}

.tag-indigo {
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #a5b4fc
}

.section-head {
    text-align: center;
    margin-bottom: 50px
}

.section-head h2 {
    font-size: clamp(2rem, 3.2vw, 3.1rem);
    margin-bottom: 12px
}

.section-head h2 em {
    font-style: normal
}

.section-head p {
    color: var(--g500);
    max-width: 600px;
    margin: 0 auto;
    font-size: 16px
}

/* Stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px
}

.stat-card {
    background: #fff;
    padding: 24px 16px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 12px 28px rgba(14, 165, 233, .08);
    border: 1px solid rgba(14, 165, 233, .1);
    transition: all .4s
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(14, 165, 233, .15)
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
    color: #fff
}

.stat-card strong {
    font-size: 28px;
    display: block;
    font-family: 'Poppins', sans-serif
}

.stat-card span {
    font-size: 13px;
    color: var(--g500);
    font-weight: 500
}

/* Quick Inquiry */
.qi {
    margin-top: -30px;
    position: relative;
    z-index: 6
}

.qi-card {
    background: #fff;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .13);
    border: 1px solid var(--g100)
}

.qi-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px
}

.qi-top h3 {
    font-size: 22px
}

.qi-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e0f7ff;
    color: var(--sky-dark);
    padding: 6px 14px;
    border-radius: 99px;
    font-weight: 600;
    font-size: 12px;
    animation: icon-bounce 2s infinite
}

.qi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 14px
}

.qi-grid input,
.qi-grid select,
.form-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--g200);
    font-size: 14px;
    transition: all .3s;
    background: #fff
}

.qi-grid input:focus,
.qi-grid select:focus,
.form-input:focus {
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .15)
}

/* Feature Grid */
.feat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px
}

.feat-card {
    background: #fff;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(14, 165, 233, .06);
    border: 1px solid rgba(14, 165, 233, .1);
    transition: all .4s;
    animation: fadeInUp .6s ease-out
}

.feat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(14, 165, 233, .12)
}

.feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    color: #fff;
    font-size: 20px
}

.feat-card h3 {
    font-size: 17px;
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700
}

.feat-card p {
    font-size: 13px;
    color: var(--g500);
    line-height: 1.6
}

.trust-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 24px
}

.trust-item {
    background: #fff;
    padding: 12px 14px;
    border-radius: 12px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    color: var(--g600);
    box-shadow: 0 8px 18px rgba(14, 165, 233, .05);
    border: 1px solid rgba(14, 165, 233, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.trust-item svg {
    width: 16px;
    height: 16px;
    color: var(--sky-dark)
}

/* Steps */
.step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    position: relative
}

.step-card {
    background: #fff;
    padding: 28px;
    border-radius: 22px;
    box-shadow: 0 14px 30px rgba(14, 165, 233, .07);
    border: 1px solid rgba(14, 165, 233, .1);
    text-align: center;
    transition: all .4s;
    animation: fadeInUp .6s ease-out
}

.step-card:hover {
    transform: translateY(-4px)
}

.step-num {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    font-family: 'Poppins', sans-serif
}

.step-card h3 {
    font-size: 18px;
    margin-bottom: 8px
}

.step-card p {
    font-size: 13px;
    color: var(--g500)
}

.tour-img {
    position: relative;
    overflow: hidden
}

.tour-img img {
    height: 380px;
    width: 100%;
    object-fit: cover;
    transition: transform .6s
}

.tour-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .35) 0%, transparent 60%)
}

.tour-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .9);
    color: var(--emerald-dark);
    font-weight: 700;
    font-size: 11px;
    z-index: 2;
    backdrop-filter: blur(4px)
}

.tour-rating {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 12px;
    border-radius: 99px;
    background: var(--emerald);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    z-index: 2
}

.tour-loc {
    position: absolute;
    bottom: 10px;
    left: 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px
}

.tour-loc svg {
    width: 14px;
    height: 14px
}

.tour-body {
    padding: 18px 20px
}

.tour-body h3 {
    font-size: 18px;
    margin-bottom: 6px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700
}

.tour-meta {
    font-size: 12px;
    color: var(--g400);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px
}

.tour-meta svg {
    width: 13px;
    height: 13px;
    color: #fbbf24;
    fill: #fbbf24
}

.tour-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--g100);
    padding-top: 14px
}

.tour-footer small {
    font-size: 11px;
    color: var(--g400)
}

.tour-footer strong {
    font-size: 22px;
    color: var(--emerald);
    font-family: 'Poppins', sans-serif;
    margin-left: 4px
}

.cta-band {
    border-radius: 24px;
    padding: 36px 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #fff;
    position: relative;
    overflow: hidden
}

.cta-band .bg-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1)
}

.cta-band h3 {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem)
}

.cta-band p {
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    margin-top: 4px
}

.cta-band .cta-btn {
    background: #fff;
    color: var(--emerald);
    padding: 14px 26px;
    border-radius: 99px;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
    transition: all .3s
}

.cta-band .cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .18)
}

/* Form Card */
.form-card {
    background: #fff;
    padding: 28px;
    border-radius: 24px;
    box-shadow: 0 16px 36px rgba(14, 165, 233, .08);
    border: 1px solid rgba(14, 165, 233, .1)
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--g700);
    margin-bottom: 6px
}

/* Vehicle Section */
.v-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 28px
}

.v-tabs button {
    padding: 10px 22px;
    border-radius: 99px;
    font-weight: 600;
    font-size: 13px;
    background: var(--g100);
    color: var(--g600);
    transition: all .3s
}

.v-tabs button.active {
    background: linear-gradient(135deg, var(--sky), var(--cyan));
    color: #fff;
    box-shadow: 0 10px 22px rgba(14, 165, 233, .35)
}

.v-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px
}

.v-card {
    background: var(--g50);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(14, 165, 233, .1);
    transition: all .4s;
    animation: fadeInUp .6s ease-out
}

.v-card:hover {
    box-shadow: 0 16px 36px rgba(14, 165, 233, .12);
    transform: translateY(-4px);
    border-color: var(--sky)
}

.v-card img {
    height: 180px;
    width: 100%;
    object-fit: cover
}

.v-card-body {
    padding: 18px
}

.v-card-body h3 {
    font-size: 18px;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700
}

.v-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px
}

.v-specs div {
    background: #fff;
    padding: 10px 6px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--g100)
}

.v-specs small {
    display: block;
    font-size: 11px;
    color: var(--g400)
}

.v-specs strong {
    font-size: 14px;
    font-family: 'Poppins', sans-serif
}

.v-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.v-card-footer strong {
    font-size: 17px;
    color: var(--sky);
    font-family: 'Poppins', sans-serif
}

.v-type {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 12px;
    border-radius: 99px;
    background: var(--sky);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    z-index: 2
}

.v-card .v-img {
    position: relative
}

/* Services */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px
}

.svc-card {
    background: #fff;
    padding: 24px;
    border-radius: 22px;
    box-shadow: 0 12px 28px rgba(14, 165, 233, .06);
    border: 1px solid rgba(14, 165, 233, .1);
    transition: all .4s;
    animation: fadeInUp .6s ease-out
}

.svc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(14, 165, 233, .12)
}

.svc-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    color: #fff;
    font-size: 20px
}

.svc-card h3 {
    font-size: 17px;
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700
}

.svc-card p {
    font-size: 13px;
    color: var(--g500)
}

/* Hotel Savings Section */
.hotel-section {
    position: relative;
    overflow: hidden
}

.hotel-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #fffbeb, #fff7ed, #fff1f2)
}

.hotel-circle1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(251, 191, 36, .15), transparent);
    transform: translate(40%, -40%)
}

.hotel-circle2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(249, 115, 22, .15), transparent);
    transform: translate(-40%, 40%)
}

.hotel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center
}

.hotel-visual {
    position: relative
}

.hotel-card-main {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 44px rgba(249, 115, 22, .12);
    border: 1px solid rgba(249, 115, 22, .15)
}

.hotel-card-main img {
    height: 240px;
    width: 100%;
    object-fit: cover
}

.hotel-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 20px;
    margin-bottom: 0
}

.compare-box {
    padding: 16px;
    border-radius: 16px;
    text-align: center
}

.compare-box.online {
    background: #fef2f2;
    border: 1px solid #fecaca
}

.compare-box.local {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    position: relative
}

.compare-box .label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px
}

.compare-box.online .label {
    color: #dc2626
}

.compare-box.local .label {
    color: var(--emerald-dark)
}

.compare-box .price {
    font-size: 26px;
    font-weight: 800;
    font-family: 'Poppins', sans-serif
}

.compare-box.online .price {
    color: #dc2626;
    text-decoration: line-through
}

.compare-box.local .price {
    color: var(--emerald)
}

.compare-box .sub {
    font-size: 11px;
    color: var(--g400)
}

.save-badge {
    position: absolute;
    top: -8px;
    right: -6px;
    background: linear-gradient(135deg, var(--orange), var(--amber));
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 99px;
    box-shadow: 0 4px 12px rgba(249, 115, 22, .3)
}

.hotel-saving-banner {
    background: linear-gradient(90deg, #fef3c7, #ffedd5);
    border: 1px solid #fde68a;
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    margin: 0 20px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #92400e
}

.hotel-saving-banner strong {
    font-size: 18px;
    color: var(--orange)
}

.hotel-float {
    position: absolute;
    right: -14px;
    top: -14px;
    background: linear-gradient(135deg, var(--orange), var(--amber));
    color: #fff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 10px 24px rgba(249, 115, 22, .3);
    animation: floatAnim 5s ease-in-out infinite;
    text-align: center;
    z-index: 2
}

.hotel-float svg {
    width: 24px;
    height: 24px;
    margin-bottom: 4px
}

.hotel-float p {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.3
}

.hotel-info h3 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-bottom: 14px
}

.hotel-info>p {
    font-size: 15px;
    color: var(--g600);
    margin-bottom: 22px;
    line-height: 1.7
}

.hotel-benefits {
    display: grid;
    gap: 16px;
    margin-bottom: 24px
}

.hotel-benefit {
    display: flex;
    gap: 12px;
    align-items: flex-start
}

.hb-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0
}

.hb-text h4 {
    font-size: 14px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 2px
}

.hb-text p {
    font-size: 12px;
    color: var(--g500)
}

.hotel-bottom {
    border-radius: 24px;
    padding: 30px;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-top: 40px
}

.hotel-bottom .bg-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1)
}

.hotel-bottom-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: center;
    position: relative;
    z-index: 2
}

.hotel-bottom h3 {
    font-size: clamp(1.3rem, 2.2vw, 1.7rem)
}

.hotel-bottom p {
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    margin-top: 6px;
    line-height: 1.6
}

.hotel-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px
}

.hotel-mini-stat {
    background: rgba(255, 255, 255, .18);
    padding: 12px;
    border-radius: 14px;
    text-align: center;
    backdrop-filter: blur(6px)
}

.hotel-mini-stat strong {
    display: block;
    font-size: 17px;
    font-family: 'Poppins', sans-serif
}

.hotel-mini-stat small {
    font-size: 10px;
    color: rgba(255, 255, 255, .7)
}

/* Gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px
}

.gallery-grid img {
    border-radius: 20px;
    height: 320px;
    width: 100%;
    object-fit: cover;
    transition: all .5s cubic-bezier(.4, 0, .2, 1);
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(14, 165, 233, .12);
    border: 1px solid rgba(14, 165, 233, .1)
}

.gallery-grid img:hover {
    transform: scale(1.04);
    box-shadow: 0 18px 44px rgba(14, 165, 233, .2)
}

/* Testimonials */
.test-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px
}

.test-card {
    background: #fff;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(14, 165, 233, .06);
    border: 1px solid rgba(14, 165, 233, .1);
    display: flex;
    flex-direction: column;
    animation: fadeInUp .6s ease-out
}

.test-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 12px
}

.test-stars svg {
    width: 14px;
    height: 14px;
    color: #fbbf24;
    fill: #fbbf24
}

.test-card p {
    font-size: 13px;
    color: var(--g600);
    flex: 1;
    margin-bottom: 14px;
    line-height: 1.65
}

.test-author {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--g100);
    padding-top: 12px
}

.test-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 12px
}

.test-name {
    font-weight: 700;
    font-size: 13px
}

.test-country {
    font-size: 11px;
    color: var(--g400)
}

/* Contact Widget */
.contact-widget {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 60
}

.contact-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sky), var(--cyan));
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 12px 26px rgba(14, 165, 233, .4);
    transition: all .3s
}

.contact-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 16px 32px rgba(14, 165, 233, .5)
}

.contact-toggle svg {
    width: 26px;
    height: 26px
}

.contact-menu {
    position: absolute;
    bottom: 72px;
    right: 0;
    background: #fff;
    border-radius: 18px;
    padding: 14px;
    width: 230px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
    display: none;
    flex-direction: column;
    gap: 8px
}

.contact-menu.active {
    display: flex
}

.contact-menu p {
    font-size: 11px;
    font-weight: 700;
    color: var(--g400);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 0 4px 4px
}

.contact-menu a {
    padding: 11px 14px;
    border-radius: 12px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    transition: all .2s
}

.contact-menu a:hover {
    transform: translateX(2px)
}

.wa {
    background: #22c55e;
    box-shadow: 0 6px 14px rgba(34, 197, 94, .3)
}

.ph {
    background: #3b82f6;
    box-shadow: 0 6px 14px rgba(59, 130, 246, .3)
}

.em {
    background: #ef4444;
    box-shadow: 0 6px 14px rgba(239, 68, 68, .3)
}

.fb {
    background: #2563eb;
    box-shadow: 0 6px 14px rgba(37, 99, 235, .3)
}

/* Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: all .7s cubic-bezier(.4, 0, .2, 1)
}

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

/* Responsive */
@media(min-width:1024px) {
    .hero-grid {
        grid-template-columns: 3fr 2fr
    }

    .hero-right {
        display: block
    }

    .hotel-grid {
        grid-template-columns: 1fr 1fr
    }

    .hotel-bottom-grid {
        grid-template-columns: 1fr 1fr
    }
}

/* Medium Tablet */
@media(max-width:768px) {
    .hero {
        height: auto;
        min-height: auto;
        padding: 40px 16px 40px
    }

    .hero-left {
        padding: 0;
        margin: 0 auto;
        max-width: 100%;
        text-align: center
    }

    .hero-left h1 {
        font-size: clamp(1.5rem, 5vw, 2.2rem);
        margin-bottom: 12px;
        line-height: 1.2;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto
    }

    .hero-left p {
        font-size: clamp(0.875rem, 2.5vw, 1rem);
        margin-bottom: 14px;
        line-height: 1.5;
        color: rgba(255, 255, 255, .85);
        max-width: 90%;
        margin-left: auto;
        margin-right: auto
    }

    .hero-pill {
        display: flex;
        justify-content: center;
        margin-bottom: 12px
    }

    .hero-actions {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
        align-items: center
    }

    .hero-actions a {
        width: auto;
        max-width: 300px;
        justify-content: center;
        padding: 14px 24px;
        font-size: 13px;
        margin: 0 auto;
        display: flex
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin-top: 20px;
        width: 100%;
        margin-left: auto;
        margin-right: auto
    }

    .hero-stat {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 16px 12px;
        font-size: 12px;
        background: rgba(14, 165, 233, .14);
        border: 1px solid rgba(14, 165, 233, .25);
        border-radius: 16px;
        min-height: 80px;
        text-align: center
    }

    .hero-stat:nth-child(3) {
        grid-column: span 2
    }

    .hero-stat strong {
        font-size: 18px;
        font-weight: 800;
        display: block;
        margin-bottom: 4px;
        line-height: 1.2
    }

    .hero-stat small {
        font-size: 11px;
        color: rgba(255, 255, 255, .7);
        display: block;
        line-height: 1.3
    }

    .floating-badge {
        bottom: 18%;
        right: 5%;
        font-size: 13px;
        max-width: 220px;
        padding: 16px 18px
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px
    }

    .gallery-grid img {
        height: 240px;
        border-radius: 16px
    }
}

/* Small Mobile */
@media(max-width:600px) {
    .container {
        width: min(100%, 95%)
    }

    .hero {
        padding: 40px 12px 40px;
        min-height: auto
    }

    .hero-left {
        max-width: 100%;
        padding: 0;
        margin: 0 auto;
        text-align: center
    }

    .hero-left h1 {
        font-size: clamp(1.25rem, 4.5vw, 1.875rem);
        margin-bottom: 10px;
        line-height: 1.25;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto
    }

    .hero-left p {
        font-size: clamp(0.8rem, 2vw, 0.9rem);
        margin-bottom: 12px;
        line-height: 1.5;
        color: rgba(255, 255, 255, .85);
        max-width: 90%;
        margin-left: auto;
        margin-right: auto
    }

    .hero-pill {
        display: flex;
        justify-content: center;
        font-size: 11px;
        padding: 6px 12px;
        margin-bottom: 10px
    }

    .hero-actions {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 20px;
        align-items: center
    }

    .hero-actions a {
        width: auto;
        max-width: 300px;
        padding: 12px 16px;
        font-size: 12px;
        border-radius: 99px;
        justify-content: center;
        margin: 0 auto;
        display: flex
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 14px;
        width: 100%;
        padding: 0
    }

    .hero-stat {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 14px 10px;
        border-radius: 14px;
        background: rgba(14, 165, 233, .14);
        font-size: 11px;
        text-align: center;
        min-height: 75px
    }

    .hero-stat:nth-child(3) {
        grid-column: span 2
    }

    .hero-stat strong {
        font-size: 16px;
        font-weight: 800;
        display: block;
        margin-bottom: 2px;
        line-height: 1.2
    }

    .hero-stat small {
        font-size: 10px;
        color: rgba(255, 255, 255, .7);
        display: block;
        line-height: 1.3
    }

    .scroll-ind {
        bottom: 30px;
        font-size: 11px;
        padding: 8px 12px;
        gap: 6px
    }

    .floating-badge {
        display: none
    }

    section {
        padding: 50px 0
    }

    .tour-grid,
    .v-grid,
    .svc-grid,
    .test-grid {
        grid-template-columns: 1fr
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px
    }

    .gallery-grid img {
        height: 180px;
        border-radius: 14px
    }

    .hotel-compare {
        grid-template-columns: 1fr
    }

    .hotel-mini-stats {
        grid-template-columns: repeat(3, 1fr)
    }

    .cta-band {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
        border-radius: 20px
    }

    .top-bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px
    }
}

/* Extra Small Mobile */
@media(max-width:480px) {
    .hero {
        padding: 40px 10px 40px;
        min-height: auto
    }

    .hero-left {
        padding: 0;
        text-align: center
    }

    .hero-left h1 {
        font-size: clamp(1.125rem, 3.5vw, 1.5rem);
        margin-bottom: 8px;
        line-height: 1.25;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto
    }

    .hero-left p {
        font-size: clamp(0.75rem, 1.8vw, 0.85rem);
        margin-bottom: 10px;
        line-height: 1.5;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto
    }

    .hero-pill {
        display: flex;
        justify-content: center;
        font-size: 10px;
        padding: 4px 10px;
        margin-bottom: 8px
    }

    .hero-actions {
        gap: 6px;
        margin-bottom: 20px;
        align-items: center
    }

    .hero-actions a {
        padding: 11px 14px;
        font-size: 11px;
        width: auto;
        max-width: 280px;
        margin: 0 auto;
        display: flex;
        justify-content: center
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-top: 12px;
        width: 100%
    }

    .hero-stat {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 12px 8px;
        font-size: 10px;
        border-radius: 12px;
        min-height: 70px;
        text-align: center
    }

    .hero-stat:nth-child(3) {
        grid-column: span 2
    }

    .hero-stat strong {
        font-size: 14px;
        line-height: 1.2
    }

    .hero-stat small {
        font-size: 9px;
        line-height: 1.3
    }

    .scroll-ind {
        bottom: 25px;
        font-size: 10px;
        padding: 6px 10px
    }

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

    .gallery-grid img {
        height: 160px;
        border-radius: 12px;
        box-shadow: 0 6px 16px rgba(14, 165, 233, .08)
    }
}

/* Enhanced responsive styles for Welcome Stats Section */
@media(max-width:768px) {
    div[style*="flex: 1 1 450px"] {
        flex: 1 1 100% !important;
        margin-bottom: 20px
    }

    div[style*="height: 550px"] {
        height: 400px !important
    }

    div[style*="font-size: 42px"] {
        font-size: 32px !important
    }

    div[style*="font-size: 18px"][style*="line-height: 1.7"] {
        font-size: 16px !important
    }

    div[style*="grid-template-columns: repeat(auto-fit, minmax(200px"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important
    }
}

@media(max-width:600px) {
    div[style*="max-width: 1200px"][style*="margin: 0 auto"][style*="display: flex"][style*="flex-wrap: wrap"] {
        flex-direction: column !important;
        gap: 30px !important
    }

    div[style*="flex: 1 1 450px"] {
        flex: 1 1 100% !important
    }

    div[style*="height: 550px"] {
        height: 320px !important
    }

    div[style*="font-size: 42px"] {
        font-size: 26px !important;
        line-height: 1.3 !important
    }

    div[style*="font-size: 18px"][style*="line-height: 1.7"] {
        font-size: 14px !important
    }

    div[style*="padding: 24px"][style*="border-radius: 16px"][style*="border: 1px solid"][style*="box-shadow: 0 4px"] {
        padding: 18px !important
    }

    div[style*="font-size: 28px"][style*="font-weight: 800"][style*="font-family"][style*="Poppins"] {
        font-size: 22px !important
    }

    div[style*="grid-template-columns: repeat(auto-fit, minmax(200px"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important
    }
}

@media(max-width:480px) {
    div[style*="height: 550px"] {
        height: 260px !important
    }

    div[style*="font-size: 42px"] {
        font-size: 22px !important;
        line-height: 1.25 !important
    }

    div[style*="font-size: 18px"][style*="line-height: 1.7"] {
        font-size: 13px !important
    }

    div[style*="padding: 24px"][style*="border-radius: 16px"] {
        padding: 14px !important
    }

    div[style*="font-size: 28px"][style*="font-weight: 800"][style*="font-family"][style*="Poppins"] {
        font-size: 18px !important
    }

    div[style*="width: 48px"][style*="height: 48px"][style*="background-color"][style*="border-radius: 50%"] {
        width: 40px !important;
        height: 40px !important
    }
}

/* Explore Button Styles */
.explore-btn {
    background: #4cc9f0;
    color: white;
    padding: 14px 28px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.3s ease-in-out;
    display: inline-block;
}

/* TripAdvisor Button Styles */
.tripadvisor-btn {
    background: white;
    padding: 18px 24px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

/* Common Hover Animation (Smooth Scale / Pop Effect for both) */
.explore-btn:hover,
.tripadvisor-btn:hover {
    transform: scale(1.06);
}

/* Explore Button එකේ Hover Color එක වෙනස් වීමට */
.explore-btn:hover {
    background: #31d3e9;
}

/* ================= HERO RESPONSIVE FIXES ================= */
@media (max-width: 992px) {

    /* Override inline heights to fit mobile content perfectly */
    .hero[style] {
        height: auto !important;
        min-height: 65vh !important;
        padding: 120px 10px 60px !important;
        /* Push content down from navbar */
    }

    /* Stack the grid vertically and center everything */
    .hero-grid[style] {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 20px !important;
    }

    /* Hide the transparent info panel on mobile to save space */
    .hero-right-panel {
        display: none !important;
    }

    /* Center Left Content */
    .hero-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
        z-index: 20;
    }

    /* Responsive Typography */
    .hero-left h1[style] {
        font-size: clamp(32px, 8vw, 42px) !important;
        margin-bottom: 15px !important;
    }

    .hero-left p[style] {
        font-size: 15px !important;
        text-align: center !important;
        margin-bottom: 30px !important;
        max-width: 95% !important;
    }

    /* Fix Buttons Stacking */
    .hero-left>div[style*="display: flex"] {
        flex-direction: column !important;
        /* Stack buttons vertically */
        width: 100%;
        gap: 15px !important;
        justify-content: center !important;
    }

    .explore-btn,
    .tripadvisor-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        text-align: center;
    }

    /* Fix Overlapping Slider Arrows */
    div[style*="top: 50%"][style*="justify-content: space-between"] {
        padding: 0 10px !important;
        /* Push arrows to the absolute edges */
        pointer-events: none;
        /* Let clicks pass through the empty space to the text/buttons below */
    }

    div[style*="top: 50%"] button {
        width: 38px !important;
        height: 38px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        -webkit-appearance: none;
        appearance: none;
        pointer-events: auto;
        /* Keep the buttons themselves clickable */
    }
}

/* ================= QBITLAB STYLE MODERN TIMELINE (FULL CSS) ================= */
.modern-timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
}

/* The background gray line */
.timeline-track {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #e2e8f0;
    transform: translateX(-50%);
    border-radius: 10px;
}

/* The animated gradient line (with Purple included) */
.timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    /* GSAP animates this */
    background: linear-gradient(to bottom, #31d4e9, #3b82f6, #8b5cf6, #10b981);
    border-radius: 10px;
}

.timeline-step {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
    /* Increased margin to fit the overlapping badge */
}

/* 1. The Timeline Icons (Bigger) */
.timeline-node {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    /* Bigger Size */
    height: 80px;
    /* Bigger Size */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    /* Bigger Icon */
    border: 6px solid #f8fafc;
    /* Thick border */
    z-index: 10;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.timeline-step:hover .timeline-node {
    transform: translateX(-50%) scale(1.1) rotate(5deg);
}

/* 2. The Card (Base Style) */
.timeline-card {
    position: relative;
    width: 43%;
    padding: 45px 40px 40px;
    /* Extra top padding for badge */
    border-radius: 24px;
    overflow: visible;
    /* IMPORTANT: Must be visible so the badge can overlap */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    z-index: 5;
}

.timeline-card:hover {
    transform: translateY(-8px);
}

/* Alternating left and right for desktop */
.timeline-step:nth-child(odd) .timeline-card {
    margin-right: auto;
}

.timeline-step:nth-child(even) .timeline-card {
    margin-left: auto;
}

/* Typography inside card */
.timeline-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 700;
    color: #1a2a23;
    margin: 0 0 15px 0;
    position: relative;
    z-index: 2;
}

.timeline-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* The Giant Background Number */
.step-watermark {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 90px;
    font-weight: 900;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}

/* 3. The Step Badge (Overlapping) */
.step-num {
    position: absolute;
    top: -20px;
    /* Pulls it outside the top of the card */
    left: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 4px solid #ffffff;
    /* Cut-out effect */
    z-index: 5;
}

/* ================= VIBRANT CARD THEMES ================= */

/* Step 01 - Cyan/Sky */
.step-card-1 {
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    border: 1px solid rgba(14, 165, 233, 0.15);
    box-shadow: 0 15px 35px rgba(14, 165, 233, 0.06);
}

.step-card-1:hover {
    box-shadow: 0 20px 40px rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.3);
}

.step-card-1 .step-watermark {
    color: #0ea5e9;
    opacity: 0.12;
}

.step-card-1 .step-num {
    background: linear-gradient(135deg, #0ea5e9, #31d4e9);
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.3);
}

/* Step 02 - Blue */
.step-card-2 {
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
    border: 1px solid rgba(59, 130, 246, 0.15);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.06);
}

.step-card-2:hover {
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

.step-card-2 .step-watermark {
    color: #3b82f6;
    opacity: 0.12;
}

.step-card-2 .step-num {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}

/* Step 03 - Purple */
.step-card-3 {
    background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
    border: 1px solid rgba(139, 92, 246, 0.15);
    box-shadow: 0 15px 35px rgba(139, 92, 246, 0.06);
}

.step-card-3:hover {
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
}

.step-card-3 .step-watermark {
    color: #8b5cf6;
    opacity: 0.12;
}

.step-card-3 .step-num {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
}

/* Step 04 - Emerald */
.step-card-4 {
    background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
    border: 1px solid rgba(16, 185, 129, 0.15);
    box-shadow: 0 15px 35px rgba(16, 185, 129, 0.06);
}

.step-card-4:hover {
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
}

.step-card-4 .step-watermark {
    color: #10b981;
    opacity: 0.12;
}

.step-card-4 .step-num {
    background: linear-gradient(135deg, #10b981, #34d399);
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
}


/* ================= ANIMATED START PLANNING BUTTON ================= */
.btn-start-planning {
    background: linear-gradient(135deg, var(--sky), var(--cyan));
    color: #ffffff;
    padding: 18px 45px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 15px 30px rgba(14, 165, 233, 0.25);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-start-planning i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.btn-start-planning:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(14, 165, 233, 0.4);
    background: linear-gradient(135deg, var(--sky-dark), var(--sky));
}

.btn-start-planning:hover i {
    transform: translateX(6px);
    /* Arrow moves to the right gracefully */
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {
    .modern-timeline {
        padding: 20px 0;
    }

    .timeline-track {
        left: 40px;
        /* Center aligned with the larger icon */
    }

    .timeline-step {
        margin-bottom: 60px;
    }

    /* Move node to the line */
    .timeline-node {
        left: 40px;
        transform: translateX(-50%);
        width: 60px;
        height: 60px;
        font-size: 24px;
        border-width: 4px;
    }

    .timeline-step:hover .timeline-node {
        transform: translateX(-50%) scale(1.1) rotate(5deg);
    }

    /* Push cards to the right */
    .timeline-card {
        width: calc(100% - 85px);
        margin-left: auto !important;
        margin-right: 0 !important;
        padding: 40px 25px 25px;
    }

    .step-watermark {
        font-size: 70px;
        right: 15px;
        top: 15px;
    }

    .step-num {
        top: -16px;
        left: 25px;
        font-size: 12px;
        padding: 8px 20px;
        border-width: 3px;
    }
}

/* ================= CUSTOM ITINERARY FORM MOBILE FIX ================= */
@media (max-width: 768px) {

    /* Force single column layout instead of 2 columns */
    form#journeyForm {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Override the elements (like textarea & button) that were forced to span 2 columns */
    form#journeyForm>div[style*="grid-column"] {
        grid-column: 1 / -1 !important;
    }

    /* Reduce card padding on mobile to give more space for inputs */
    .journey-card[style] {
        padding: 35px 20px !important;
        border-radius: 24px !important;
    }

    /* Make the submit button full width and centered */
    #submitBtn {
        width: 100% !important;
        justify-content: center !important;
        padding: 16px 20px !important;
    }
}

/* Extra small screens fix */
@media (max-width: 480px) {
    .journey-card[style] {
        padding: 30px 15px !important;
    }
}

/* ================= GREEN VIP BANNER MOBILE FIX ================= */
@media (max-width: 768px) {

    /* Main Green Banner - Reduce outer padding and border-radius */
    div[style*="background: linear-gradient(135deg, #10b981"] {
        padding: 40px 20px !important;
        border-radius: 24px !important;
        margin-top: 60px !important;
    }

    /* Flex container inside the banner - Reduce gap between text and card */
    div[style*="gap: 50px; position: relative; z-index: 2"] {
        gap: 30px !important;
        text-align: center !important;
        /* Center align text for better mobile layout */
    }

    /* Center the VIP Badge */
    span[style*="VIP Guest Access"] {
        margin: 0 auto 20px auto !important;
    }

    /* Inner Glass Card - Reduce inner padding */
    div[style*="backdrop-filter: blur(20px)"] {
        padding: 30px 20px !important;
        border-radius: 20px !important;
    }

    /* Stats Numbers (500+ and 45%) - Scale down slightly */
    div[style*="backdrop-filter: blur(20px)"] strong {
        font-size: 30px !important;
    }

    /* Stats Labels - Scale down */
    div[style*="backdrop-filter: blur(20px)"] span {
        font-size: 10px !important;
    }

    /* Adjust spacing between stats and button */
    div[style*="justify-content: space-around; margin-bottom: 35px"] {
        margin-bottom: 25px !important;
        gap: 10px !important;
    }

    /* WhatsApp Button Adjustments */
    .hotel-cta-btn {
        padding: 14px 20px !important;
        font-size: 14px !important;
        width: 100% !important;
    }
}

/* ================= PREMIUM HOTEL SAVINGS CARD CSS ================= */
.premium-hotel-card {
    position: relative;
    border-radius: 32px;
    margin-bottom: 40px;
    /* Space for the overlapping box */
}

.phc-image-wrapper {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    height: 480px;
    box-shadow: 0 25px 50px rgba(13, 148, 136, 0.15);
    border: 1px solid rgba(13, 148, 136, 0.1);
    transform: translateZ(0);
    /* Safari fix */
}

.phc-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.premium-hotel-card:hover .phc-image-wrapper img {
    transform: scale(1.05);
}

/* Subtle gradient overlay to make image deeper at the bottom */
.phc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
}

/* Rating Badge */
.phc-top-badges {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
}

/* ================= REDESIGNED PREMIUM RATING BADGE ================= */
.phc-top-badges {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 5;
}

/* Outer Dark Glass Pill */
.phc-rating-premium {
    background: rgba(15, 23, 42, 0.65);
    /* Dark slate semi-transparent */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 6px 18px 6px 6px;
    /* Less padding on the left to hug the inner pill */
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.premium-hotel-card:hover .phc-rating-premium {
    transform: translateY(-3px);
}

/* Inner Vibrant Gold Pill for Stars */
.phc-stars-box {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    padding: 6px 12px;
    border-radius: 50px;
    display: inline-flex;
    gap: 4px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.phc-stars-box i {
    color: #ffffff;
    /* White stars on gold background looks super clean */
    font-size: 10px;
}

/* Crisp White Text */
.phc-rating-text {
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 1.5px;
    font-family: 'Poppins', sans-serif;
    font-style: oblique;
}

/* Mobile Tweak */
@media (max-width: 768px) {
    .phc-top-badges {
        top: 15px;
        left: 15px;
    }

    .phc-stars-box {
        padding: 5px 10px;
    }

    .phc-stars-box i {
        font-size: 9px;
    }

    .phc-rating-text {
        font-size: 10px;
        letter-spacing: 1px;
    }
}

/* Modern Circular Partner Badge */
.phc-partner-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    box-shadow: 0 15px 30px rgba(13, 148, 136, 0.3);
    border: 4px solid #ffffff;
    z-index: 2;
    transform: rotate(12deg);
    transition: transform 0.4s ease;
}

.premium-hotel-card:hover .phc-partner-badge {
    transform: rotate(0deg) scale(1.05);
}

.phc-partner-badge i {
    font-size: 24px;
    margin-bottom: 4px;
}

.phc-partner-badge span {
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* The Overlapping Price Box (SaaS Style) */
.phc-price-box {
    position: absolute;
    bottom: -35px;
    /* Pull it down to overlap outside the image */
    left: 35px;
    right: 35px;
    background: #ffffff;
    border-radius: 24px;
    padding: 25px 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 25px 50px rgba(13, 148, 136, 0.12);
    border: 1px solid rgba(13, 148, 136, 0.08);
    z-index: 3;
    transition: transform 0.4s ease;
}

.premium-hotel-card:hover .phc-price-box {
    transform: translateY(-5px);
}

.phc-price-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: center;
}

.phc-label {
    font-size: 12px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 1.5px;
    font-family: 'Poppins', sans-serif;
    font-style: oblique;
}

.phc-old-price {
    font-size: 24px;
    font-weight: 700;
    color: #94a3b8;
    text-decoration: line-through;
    font-family: 'Poppins', sans-serif;
}

.phc-new-price {
    font-size: 38px;
    font-weight: 900;
    color: #1a2a23;
    line-height: 1;
    font-family: 'Poppins', sans-serif;
}

.phc-highlight .phc-label {
    color: #0d9488;
}

.phc-divider {
    width: 2px;
    height: 50px;
    background: #f1f5f9;
    border-radius: 2px;
}

.phc-savings-tag {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: white;
    padding: 12px 20px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.25);
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {
    .phc-image-wrapper {
        height: 380px;
    }

    .phc-price-box {
        left: 15px;
        right: 15px;
        padding: 20px;
        bottom: -25px;
        flex-wrap: wrap;
        /* Allow wrapping on very small screens */
        justify-content: space-around;
    }

    .phc-divider {
        display: none;
        /* Hide divider on small screens */
    }

    .phc-old-price {
        font-size: 20px;
    }

    .phc-new-price {
        font-size: 30px;
    }

    .phc-savings-tag {
        padding: 8px 14px;
        font-size: 13px;
        margin-top: 10px;
    }

    .phc-partner-badge {
        width: 80px;
        height: 80px;
        right: 15px;
        top: 15px;
    }

    .phc-partner-badge span {
        font-size: 9px;
    }
}

/* ================= PREMIUM SERVICES SECTION WITH WATERMARK ICONS ================= */

.service-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.service-card {
    position: relative;
    border-radius: 24px;
    padding: 40px 35px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    z-index: 1;
}

.service-card:hover {
    transform: translateY(-8px);
}

/* Make sure text stays above the watermark */
.sc-content {
    position: relative;
    z-index: 2;
}

/* The Small Top Icon */
.sc-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 22px;
    transition: transform 0.4s ease;
}

.service-card:hover .sc-icon {
    transform: scale(1.1) rotate(-5deg);
}

.service-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.service-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

/* The Giant Background Watermark Icon */
.bg-watermark {
    position: absolute;
    bottom: -20px;
    right: -20px;
    font-size: 140px;
    opacity: 0.15;
    /* Keeps it subtle */
    z-index: 0;
    transform: rotate(-15deg);
    transition: all 0.5s ease;
}

.service-card:hover .bg-watermark {
    transform: rotate(0deg) scale(1.1);
    opacity: 0.25;
}

/* ================= INDIVIDUAL CARD THEMES ================= */

/* 1. Hotel (Cyan Theme) */
.sc-hotel {
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    border: 1px solid rgba(14, 165, 233, 0.15);
}

.sc-hotel:hover {
    box-shadow: 0 20px 40px rgba(14, 165, 233, 0.12);
}

.sc-hotel .sc-icon {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.sc-hotel .bg-watermark {
    color: #0ea5e9;
}

/* 2. Flight (Blue Theme) */
.sc-flight {
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.sc-flight:hover {
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.12);
}

.sc-flight .sc-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.sc-flight .bg-watermark {
    color: #3b82f6;
}

/* 3. Safari (Amber/Orange Theme) */
.sc-safari {
    background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.sc-safari:hover {
    box-shadow: 0 20px 40px rgba(245, 158, 11, 0.12);
}

.sc-safari .sc-icon {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.sc-safari .bg-watermark {
    color: #f59e0b;
}

/* 4. Sunrise (Purple Theme) */
.sc-sunrise {
    background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
    border: 1px solid rgba(139, 92, 246, 0.15);
}

.sc-sunrise:hover {
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.12);
}

.sc-sunrise .sc-icon {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.sc-sunrise .bg-watermark {
    color: #8b5cf6;
}

/* 5. Camping (Emerald Theme) */
.sc-camping {
    background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
    border: 1px solid rgba(16, 185, 129, 0.15);
}

.sc-camping:hover {
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.12);
}

.sc-camping .sc-icon {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.sc-camping .bg-watermark {
    color: #10b981;
}

/* 6. Food (Rose Theme) */
.sc-food {
    background: linear-gradient(135deg, #ffffff 0%, #fff1f2 100%);
    border: 1px solid rgba(225, 29, 72, 0.15);
}

.sc-food:hover {
    box-shadow: 0 20px 40px rgba(225, 29, 72, 0.12);
}

.sc-food .sc-icon {
    background: rgba(225, 29, 72, 0.1);
    color: #e11d48;
}

.sc-food .bg-watermark {
    color: #e11d48;
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {
    .service-grid-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-card {
        padding: 30px 25px;
    }

    .bg-watermark {
        font-size: 100px;
        /* Slightly smaller on mobile to not overpower text */
        bottom: -15px;
        right: -10px;
    }
}

/* ================= VISUAL JOURNAL BUTTON & RESPONSIVE ================= */

/* The New Vibrant Button */
.btn-explore-journal {
    background: linear-gradient(135deg, #0ea5e9, #31d4e9);
    color: #ffffff;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 15px 30px rgba(14, 165, 233, 0.25);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-explore-journal i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.btn-explore-journal:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(14, 165, 233, 0.4);
    background: linear-gradient(135deg, #0284c7, #0ea5e9);
}

.btn-explore-journal:hover i {
    transform: scale(1.1);
}

/* Mobile Responsive Grid Fix */
@media (max-width: 768px) {

    /* Override the complex grid for mobile */
    div[style*="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr))"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* Make each gallery item a uniform height on mobile */
    .gallery-item {
        height: 300px !important;
        width: 100% !important;
    }

    /* The "Lion's Fortress" image was set to span 2 columns, reset it */
    .gallery-item[style*="grid-column: span 2"] {
        grid-column: auto !important;
    }

    /* The "Nine Arches" image was set to span 2 rows, reset it */
    .gallery-item[style*="grid-row: span 2"] {
        grid-row: auto !important;
        height: 400px !important;
        /* Make it slightly taller since it's vertical */
    }

    /* Adjust typography for mobile */
    span[style*="Visual Journal"] {
        margin-bottom: 15px !important;
    }

    h2[style*="font-size: 52px"] {
        font-size: clamp(32px, 6vw, 42px) !important;
    }

    p[style*="font-size: 18px"] {
        font-size: 15px !important;
        padding: 0 10px;
    }
}

/* ================= WHY TRAVEL WITH US - PREMIUM CARDS ================= */
.wt-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    /* Fits 4 cards nicely on desktop */
    gap: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.wt-card {
    position: relative;
    border-radius: 24px;
    padding: 40px 30px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    z-index: 1;
    text-align: left;
}

.wt-card:hover {
    transform: translateY(-8px);
}

.wt-content {
    position: relative;
    z-index: 2;
}

.wt-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 20px;
    transition: transform 0.4s ease;
}

.wt-card:hover .wt-icon {
    transform: scale(1.1) rotate(-5deg);
}

.wt-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.wt-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

/* ================= WT INDIVIDUAL THEMES ================= */

/* 1. Adventures (Cyan) */
.wt-adventures {
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    border: 1px solid rgba(14, 165, 233, 0.15);
}

.wt-adventures:hover {
    box-shadow: 0 20px 40px rgba(14, 165, 233, 0.12);
}

.wt-adventures .wt-icon {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.wt-adventures .bg-watermark {
    color: #0ea5e9;
}

/* 2. Chauffeurs (Blue) */
.wt-chauffeurs {
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.wt-chauffeurs:hover {
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.12);
}

.wt-chauffeurs .wt-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.wt-chauffeurs .bg-watermark {
    color: #3b82f6;
}

/* 3. Personal Care (Amber/Orange) */
.wt-care {
    background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.wt-care:hover {
    box-shadow: 0 20px 40px rgba(245, 158, 11, 0.12);
}

.wt-care .wt-icon {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.wt-care .bg-watermark {
    color: #f59e0b;
}

/* 4. Modern Fleet (Emerald) */
.wt-fleet {
    background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
    border: 1px solid rgba(16, 185, 129, 0.15);
}

.wt-fleet:hover {
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.12);
}

.wt-fleet .wt-icon {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.wt-fleet .bg-watermark {
    color: #10b981;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .wt-grid-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ================= INFINITE FEEDBACK CAROUSEL CSS ================= */

/* Hide horizontal overflow */
.feedback-carousel-container {
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
    position: relative;
    margin-top: 40px;
}

/* Flex track that holds all images */
.carousel-track {
    display: flex;
    gap: 20px;
    /* Space between images */
    width: max-content;
    /* Critical: Track is as wide as all images combined */
}

/* Base style for each image */
.carousel-image {
    width: 250px;
    /* Uniform width for all images */
    height: 250px;
    /* Uniform height */
    object-fit: cover;
    border-radius: 24px;
    border: 4px solid #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    z-index: 1;
}

/* ================= HOVER FOCUS EFFECT ================= */

/* When user hovers over ANY part of the carousel, 
   slightly dim all images by default */
.feedback-carousel-container:hover .carousel-image {
    opacity: 0.7;
}

/* Then, fully highlight only the specific hovered image */
.carousel-image:hover {
    transform: scale(1.08) translateY(-5px) !important;
    /* Scale up and pop out */
    border-color: #0ea5e9;
    /* Theme Cyan Color */
    box-shadow: 0 15px 35px rgba(14, 165, 233, 0.2);
    opacity: 1 !important;
    /* Force full opacity */
    z-index: 10;
    /* Bring to front */
}

/* ================= PREMIUM TESTIMONIALS SECTION ================= */

/* Section Header & Badge */
.premium-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
}

.premium-section-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    color: #1e293b;
    margin: 0;
}

.premium-section-header h2 em {
    color: #0ea5e9;
    font-style: italic;
}

/* Comments Grid */
.testimonial-comments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Individual Testimonial Card */
.testimonial-card {
    position: relative;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(14, 165, 233, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    /* Keeps watermark inside */
}

/* Hover Effect - Lift and Shadow */
.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(14, 165, 233, 0.12);
    border-color: rgba(14, 165, 233, 0.3);
}

/* Background Quote Watermark */
.quote-watermark {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 80px;
    color: #0ea5e9;
    opacity: 0.05;
    transition: all 0.4s ease;
}

.testimonial-card:hover .quote-watermark {
    transform: scale(1.1) rotate(10deg);
    opacity: 0.08;
}

/* Card Content Typography */
.tc-stars {
    color: #f59e0b;
    font-size: 14px;
    margin-bottom: 20px;
}

.tc-text {
    color: #64748b;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 30px;
    font-style: italic;
    position: relative;
    z-index: 2;
}

/* Author Section */
.tc-author {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 2;
}

.tc-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.tc-info h4 {
    margin: 0 0 4px 0;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: #1e293b;
}

.tc-info span {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .premium-section-header h2 {
        font-size: 32px;
    }

    .testimonial-card {
        padding: 30px;
    }
}

/* ================= PREMIUM FAQ SECTION ================= */
.faq-container {
    max-width: 800px;
    /* Keep it centered and readable */
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(14, 165, 233, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.faq-item:hover {
    border-color: rgba(14, 165, 233, 0.3);
    box-shadow: 0 10px 25px rgba(14, 165, 233, 0.08);
    transform: translateY(-2px);
}

.faq-question {
    width: 100%;
    text-align: left;
    padding: 24px;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: #0ea5e9;
}

.faq-question i {
    color: #0ea5e9;
    font-size: 14px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.faq-answer p {
    padding: 0 24px 24px;
    margin: 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
}

/* Active State Styles */
.faq-item.active {
    border-color: #0ea5e9;
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.1);
}

.faq-item.active .faq-question {
    color: #0ea5e9;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
    /* Flips the arrow */
}

/* ================= GSAP PARTICLES BASE STYLE ================= */
.floating-particle {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    /* Slight blur for depth of field */
    will-change: transform, opacity;
    /* Performance optimization */
}

/* ================= SCROLL PERFORMANCE FIXES (HARDWARE ACCELERATION) ================= */
.testimonial-card,
.faq-item,
.modern-footer,
.service-card,
.wt-card,
.premium-hotel-card {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Style fixes */

@keyframes scrollDot {
    0% {
        top: 8px;
        opacity: 1;
    }

    100% {
        top: 22px;
        opacity: 0;
    }
}

.slide {
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.slide.active {
    opacity: 1;
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-right-panel {
        display: none;
    }

    .hero-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero {
        height: auto;
        padding: 140px 0 100px;
    }
}

/* Premium Nature Stats Styling */
.nature-stat-card {
    position: relative;
    transition: 0.4s;
}

.stone-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: 0.4s;
}

.nature-stat-card strong {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #1a2a23;
    line-height: 1.1;
}

.nature-stat-card span {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
    display: block;
}

/* Hover States */
.nature-stat-card:hover {
    transform: translateY(-5px);
}

.nature-stat-card:hover .stone-icon {
    background: #31d4e9 !important;
    color: #ffffff !important;
    border-color: #31d4e9;
    box-shadow: 0 10px 20px rgba(49, 212, 233, 0.2);
}

/* New Premium Card Styling */
.premium-feature-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 24px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.02);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.pf-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: all 0.4s ease;
}

/* Hover Effect: Lifts up and gives a very soft glow */
.premium-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(14, 165, 233, 0.1);
    border-color: rgba(14, 165, 233, 0.2);
}

.premium-feature-card:hover .pf-icon-box {
    transform: scale(1.05) rotate(-5deg);
}

/* Timeline CSS */
.timeline-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #e2e8f0;
    transform: translateX(-50%);
    border-radius: 4px;
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 20px 40px;
    box-sizing: border-box;
}

.timeline-item.left {
    left: 0;
    text-align: right;
}

.timeline-item.right {
    left: 50%;
}

.timeline-icon {
    position: absolute;
    top: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: 4px solid #f8fafc;
}

.timeline-item.left .timeline-icon {
    right: -25px;
}

.timeline-item.right .timeline-icon {
    left: -25px;
}

.timeline-content {
    background: #ffffff;
    padding: 35px;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(14, 165, 233, 0.08);
    border-color: rgba(49, 212, 233, 0.3);
}

.step-num {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    color: #0ea5e9;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.timeline-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    color: #1a2a23;
    margin: 0 0 15px 0;
}

.timeline-content p {
    font-size: 14px;
    line-height: 1.7;
    color: #64748b;
    margin: 0;
}

/* Responsive Timeline for Mobile */
@media (max-width: 768px) {
    .timeline-line {
        left: 30px;
    }

    .timeline-item {
        width: 100%;
        left: 0 !important;
        padding: 20px 0 20px 70px;
        text-align: left !important;
    }

    .timeline-icon {
        left: 5px !important;
        right: auto !important;
        width: 40px;
        height: 40px;
        top: 40px;
    }

    .timeline-content {
        padding: 25px 20px;
    }

    .timeline-content h3 {
        font-size: 20px;
    }
}

#tours {
    padding: 100px 0;
    overflow: hidden;
}

/* Filter Tabs */
.tour-filter {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 24px;
    border-radius: 30px;
    border: 1px solid #e5e7eb;
    background: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn.active,
.filter-btn:hover {
    background: var(--emerald);
    color: white;
    border-color: var(--emerald);
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);
}

/* Premium Tour Grid - 3 Columns (Maximum Width Setup) */
.tour-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
    justify-content: start;
}

/* Tablet Responsive (පොඩි screens වලදී ලස්සනට adjust වෙන්න) */
@media (max-width: 1024px) {
    .tour-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

/* Mobile Responsive (Phone එකේදී අනිවාර්යයෙන් 1 card එකයි) */
@media (max-width: 768px) {
    .tour-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

/* Tour Details Gallery - Responsive */
@media (max-width: 1024px) {
    .tour-details-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .tour-details-gallery {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

.tour-image-wrap {
    position: relative;
    height: 450px;
    overflow: hidden;
}

.tour-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Glass Info Overlay */
.tour-info-box {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.tour-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--emerald);
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.tour-info-box h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
    color: #111827;
}

/* Modern CTA Band */
.modern-cta {
    margin-top: 100px;
    background: #0f172a;
    /* Dark Navy for a professional look */
    border-radius: 40px;
    padding: 60px;
    text-align: center;
    position: relative;
    color: white;
}

.modern-cta h3 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.modern-cta .cta-btn {
    margin-top: 25px;
    display: inline-block;
    background: var(--emerald);
    color: white;
    padding: 18px 40px;
}

@media (max-width: 768px) {
    .modern-cta {
        padding: 40px 20px;
        border-radius: 24px;
    }
}

/* Premium Button Hover */
.expert-btn:hover {
    background: #ecfdf5 !important;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .cta-card {
        padding: 30px !important;
        text-align: center;
        justify-content: center;
    }

    .cta-card div[style*="flex: 1"] {
        align-items: center;
        display: flex;
        flex-direction: column;
    }
}

/* Enhanced Focus States */
#journeyForm input:focus,
#journeyForm select:focus,
#journeyForm textarea:focus {
    border-color: #31d4e9 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(49, 212, 233, 0.15) !important;
}

/* Hover Effects for inputs */
#journeyForm input:hover,
#journeyForm select:hover,
#journeyForm textarea:hover {
    border-color: #cbd5e1;
}

/* Premium Button Hover */
.submit-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(14, 165, 233, 0.4) !important;
    filter: brightness(1.05);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .journey-section {
        padding: 70px 14px !important;
    }

    .journey-header {
        margin-bottom: 36px !important;
    }

    .journey-title {
        font-size: 32px !important;
        line-height: 1.25 !important;
    }

    #journeyForm {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .form-group {
        grid-column: span 1 !important;
    }

    .journey-card {
        padding: 30px 18px !important;
        border-radius: 24px !important;
    }

    .submit-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 17px 20px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .journey-title {
        font-size: 28px !important;
    }

    .journey-shell {
        width: 100%;
    }

    #journeyForm input,
    #journeyForm select,
    #journeyForm textarea {
        padding: 15px 16px !important;
        font-size: 14px !important;
    }
}

/* Hover effect matched with the new green theme */
.hotel-cta-btn:hover {
    background: #ecfdf5 !important;
    color: #047857 !important;
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(255, 255, 255, 0.2) !important;
}

@media (max-width: 768px) {
    .hotel-cta-btn {
        width: 100%;
    }
}

/* Premium Gallery Styles */
.gallery-item {
    transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.gallery-item img {
    transition: 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 42, 35, 0.8) 0%, transparent 60%);
    opacity: 1;
    transition: 0.4s;
}

.overlay-content {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: white;
}

/* ================= CLEAN & MINIMAL GALLERY TAGS ================= */
.gallery-tag {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px;
    color: #1e293b !important;
    /* Dark text for contrast */

    /* Solid light background with slight transparency */
    background: rgba(173, 216, 230, 0.9) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    padding: 4px 12px !important;
    border-radius: 12px;
    /* Slightly squared corners instead of fully round */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* Very subtle border */
    border: 1px solid rgba(173, 216, 230, 0.55) !important;
}

/* Remove the glowing dot completely */
.gallery-tag::before {
    display: none !important;
}

.overlay-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    margin-top: 12px;
    font-weight: 700;
}

/* Hover States */
.gallery-item:hover {
    transform: translateY(-10px);
    z-index: 10;
    box-shadow: 0 30px 60px rgba(13, 148, 136, 0.2);
}

.gallery-item:hover img {
    transform: scale(1.1) rotate(1deg);
}

.gallery-item:hover .gallery-overlay {
    background: linear-gradient(to top, rgba(13, 148, 136, 0.9) 0%, transparent 80%);
}

/* Hover Effects */
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08) !important;
}

.banner-btn:hover {
    background: #ecfdf5 !important;
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .service-card {
        padding: 25px 20px !important;
    }
}

/* ================= UNIFIED PREMIUM TOUR CARD ================= */
.tour-card {
    position: relative;
    background: #ffffff;
    border-radius: 40px 10px 40px 10px;
    /* The beautiful organic shape */
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Consistent Gap Enforcement - Removed staggering margin to prevent overlap */
.tour-card:nth-child(even) {
    /* Removed margin-top: 40px to ensure consistent grid gaps */
}

/* Hover Lift Effect */
.tour-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 25px 50px rgba(14, 165, 233, 0.12) !important;
    border-color: rgba(14, 165, 233, 0.2);
}

/* Image Wrapper */
.tour-image-wrap {
    position: relative;
    height: 280px;
    overflow: hidden;
}

.tour-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

/* Image Zoom on Hover */
.tour-card:hover .tour-image-wrap img {
    transform: scale(1.08) !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .tour-card:nth-child(even) {
        margin-top: 0;
    }
}

/* ================= RETURN TO HOME BUTTON ================= */
.btn-return-home:hover {
    color: #10b981 !important;
}

.btn-return-home:hover .back-icon-box {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    transform: translateX(-5px);
    /* Moves the arrow slightly to the left */
    box-shadow: 0 8px 15px rgba(16, 185, 129, 0.2) !important;
}

/* ================= TAILOR-MADE HOLIDAYS CARD WATERMARK ================= */
.cta-card .fa-xing {
    /* Default Desktop Positioning (ඔයා දාපු ටිකමයි) */
    right: 20%;
    bottom: -20%;
    font-size: clamp(180px, 25vw, 350px);
    opacity: 0.3;
}

@media (max-width: 768px) {
    .cta-card .fa-xing {
        /* Mobile Positioning: Shifted to right and bottom to look like a subtle background texture */
        right: -15% !important;
        bottom: -15% !important;
        font-size: 220px !important;
        /* Fixed size for mobile */
        opacity: 0.15 !important;
        /* Slightly lower opacity so it doesn't distract from text */
        transform: rotate(-25deg) !important;
        /* Adjusted angle */
    }
}

/* ================= MOBILE PERFORMANCE OPTIMIZATION ================= */

/* Force GPU rendering for heavy elements */
.organic-glass-box,
.organic-sidebar-box,
.hero-info-box,
.custom-navbar,
.tour-card {
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    /* This triggers GPU Hardware Acceleration */
}

/* Optimize Glassmorphism specifically for mobile */
@media (max-width: 768px) {

    .organic-glass-box,
    .hero-info-box {
        /* Optional: Slightly reduce blur radius on mobile for massive performance boost 
           e.g., changing from blur(20px) to blur(10px) makes a huge difference */
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}