/* Luxury Real Estate - Design System */

:root {
    /* Colors */
    --color-primary: #0F172A;
    /* Dark Blue */
    --color-gold: #D4AF37;
    /* Gold Accent */
    --color-bg-warm: #F9F9F7;
    /* Warm Beige/Cream */
    --color-white: #FFFFFF;
    --color-text-dark: #1E293B;
    --color-text-light: #64748B;

    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Libre Baskerville', serif;

    /* Spacing */
    --container-width: 1200px;
    --section-padding: 100px 0;

    /* Transitions */
    --transition-smooth: all 0.4s ease;
}

/* Reset & Base */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-warm);
    color: var(--color-text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-weight: 600;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

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

ul {
    list-style: none;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 60px 0;
    /* Reduced from 100px */
}

.text-gold {
    color: var(--color-gold);
}

.text-center {
    text-align: center;
}

.btn {
    display: inline-block;
    padding: 14px 32px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1px solid var(--color-primary);
    cursor: pointer;
}

.btn:hover {
    background-color: transparent;
    color: var(--color-primary);
}

.btn-gold {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
}

.btn-gold:hover {
    background-color: transparent;
    color: var(--color-gold);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

/* Navigation */
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    transition: var(--transition-smooth);
}

.navbar-content {
    display: flex;
    justify-content: flex-end;
    /* Push nav links to the right since logo is absolute */
    align-items: center;
}

/* Logo - Positioned Absolute Top Left per User Request to avoid overlap */
.logo {
    position: absolute;
    top: 10px;
    /* Moved up */
    left: 20px;
    /* Moved left */
    /* Alinged to far left */
    z-index: 1001;
    /* Ensure on top */
    opacity: 1;
    /* Full opacity for clarity */
}

.logo-default {
    max-width: 150px;
    /* Significantly reduced from 210px */
    height: auto;
    object-fit: contain;
    /* No compression */
    display: block;
    border-radius: 8px;
    /* Soften edges */
    mix-blend-mode: normal;
    /* Ensure colors are natural */
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    color: var(--color-white);
    font-size: 0.9rem;
    font-weight: 400;
}

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

/* Base Burger Styles (Hidden on Desktop) */
.burger {
    display: none;
    cursor: pointer;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: var(--color-white);
    /* Ensure it's visible on dark bg */
    margin: 5px;
    transition: all 0.3s ease;
}

/* Mobile Navigation */
@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .nav-links {
        position: fixed;
        /* Fixed to cover screen */
        right: 0px;
        height: 100vh;
        top: 0;
        /* Start from top */
        background-color: var(--color-primary);
        /* Dark background */
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        /* Full width or 50% depending on preference */
        transform: translateX(100%);
        /* Hide off-screen */
        transition: transform 0.5s ease-in;
        z-index: 10000;
        /* Below logo/burger but above content */
        justify-content: center;
        /* Center items vertically */
        padding-top: 60px;
        /* Space for top bar */
    }

    .nav-links li {
        opacity: 0;
        margin: 20px 0;
        /* Space out links */
    }

    .nav-links a {
        font-size: 1.5rem;
        /* Larger text */
    }

    .burger {
        display: block;
        /* Show burger */
        z-index: 10001;
        /* Ensure on top of EVERYTHING */
        position: absolute;
        right: 20px;
        top: 25px;
        /* Align with logo */
    }
}

.nav-links.nav-active {
    transform: translateX(0%) !important;
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    height: auto;
    width: 100%;
    /* Mysore Palace Background with Luxury Overlay */
    background: linear-gradient(rgba(2, 6, 23, 0.75), rgba(2, 6, 23, 0.6)), url('../images/mysore_palace.jpg');
    background-size: cover;
    background-position: center 30%;
    /* Focus on the palace structure */
    background-attachment: fixed;
    /* NOTE: iOS overrides this below to avoid jitter/glitch */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
    padding-top: 85px;
    padding-bottom: 50px;
}

/* Premium Ticker Ad */
.premium-ad-ticker {
    position: relative;
    width: 100%;
    max-width: 850px;
    /* Slightly wider */
    margin: 0 auto 30px;
    /* Increased separation */
    padding: 12px 0;
    background: rgba(15, 23, 42, 0.9);
    /* More opaque */
    border-top: 1px solid var(--color-gold);
    border-bottom: 1px solid var(--color-gold);
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.ticker-track {
    display: flex;
    align-items: center;
    animation: scrollTicker 40s linear infinite;
    /* Slower for elegance */
    flex-shrink: 0;
    /* Critical: Prevent shrinking */
    min-width: 100%;
    /* Ensure it fills space */
    will-change: transform;
    /* Performance optimization */
}

.ticker-item {
    font-family: 'Cinzel', serif;
    color: var(--color-gold);
    font-size: 1.15rem;
    /* Readability */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    white-space: nowrap;
    padding: 0 15px;
    /* More breathing room */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.ticker-item sup {
    font-size: 0.6em;
    vertical-align: top;
    margin-right: 3px;
    color: var(--color-gold);
    /* Ensure consistence */
}

.ticker-divider {
    color: rgba(212, 175, 55, 0.4);
    /* Gold tint divider */
    margin: 0 20px;
    font-size: 1rem;
}

/* Pause on Hover for readability */
.premium-ad-ticker:hover .ticker-track {
    animation-play-state: paused;
}

@keyframes scrollTicker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

@media (max-width: 768px) {
    .premium-ad-ticker {
        padding: 10px 0;
        margin-bottom: 30px;
        /* Ensure no overlap with branding below */
        max-width: 95%;
        /* Give it some edge spacing on mobile */
        border-radius: 4px;
        /* Slight polish on mobile */
    }

    .ticker-item {
        font-size: 0.85rem;
        /* Scaled down */
        letter-spacing: 1.5px;
        padding: 0 10px;
    }

    .ticker-divider {
        margin: 0 10px;
    }
}

/* Fix for very small screens */
@media (max-width: 380px) {
    .premium-ad-ticker {
        margin-bottom: 25px;
    }

    .ticker-item {
        font-size: 0.75rem;
        letter-spacing: 1px;
    }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Subtle texture overlay or noise can be added here if needed, for now just a dark wash */
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.hero-content {
    position: relative;
    z-index: 5;
    max-width: 900px;
    padding: 0 20px;
    animation: fadeInUp 1.2s ease-out;
}

.eyebrow {
    display: block;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 25px;
    color: var(--color-gold);
    font-weight: 500;
}

.hero h1 {
    font-size: clamp(2rem, 6vw, 4.5rem);
    margin-bottom: 20px;
    color: var(--color-white);
    line-height: 1.1;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.hero-line-1 {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 15px;
    /* Space between 1st and No-brokerage */
    margin-bottom: 5px;
    /* Small gap */
}

.hero-line-2 {
    display: block;
    margin-top: -10px;
    /* Pull up to reduce gap */
}

.hero-first {
    color: var(--color-gold);
    font-size: 1.2em;
    /* Make 1st slightly larger */
    font-family: var(--font-heading);
    /* Ensure Serif */
}

.hero-subtitle {
    color: var(--color-white);
    font-family: var(--font-heading);
    /* Ensure Serif matches */
}

.hero-highlight-text {
    font-size: 1.2rem;
    font-family: var(--font-body);
    font-weight: 600;
    margin-top: 15px;
    letter-spacing: 1px;
    color: #f1f5f9;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    display: inline-block;
    /* Wrap content for background */
    line-height: 1.4;
    background: rgba(0, 0, 0, 0.4);
    /* Semi-transparent dark bg */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 25px;
    border-radius: 50px;
    /* Pill shape */
    border: 1px solid rgba(212, 175, 55, 0.3);
    /* Subtle gold border */
}

.highlight-gold {
    color: var(--color-gold);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 768px) {
    .hero-line-1 {
        flex-direction: row;
        /* changed from column */
        gap: 10px;
        /* slightly increased gap */
        align-items: baseline;
    }
}

.hero p.hero-features {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--color-gold);
    /* Highlight text color */
    background: rgba(15, 23, 42, 0.6);
    /* Semi-transparent dark background */
    padding: 20px 30px;
    border-left: 4px solid var(--color-gold);
    /* Gold accent line */
    border-radius: 4px;
    /* Slight rounding */
    backdrop-filter: blur(5px);
    /* Glassmorphism effect */
    display: inline-block;
    /* Wrap tight around text */
    margin-bottom: 20px;
    /* Reduced from 50px */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(174, 174, 174, 0.2);
    border-left-width: 4px;
    /* Ensure left border is thicker */
}

.hero-feature-highlight {
    color: var(--color-white);
    font-weight: 700;
    font-style: italic;
    font-size: 1.5rem;
    /* Slightly larger for emphasis */
    display: block;
    /* Ensure it sits on its own line */
    margin-bottom: 5px;
}

.hero p {
    /* Keeping generic p styles just in case, but they are overridden by specificity above */
    font-size: 1.35rem;
    margin-bottom: 20px;
    /* Reduced from 50px */
    font-weight: 300;
    opacity: 0.95;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: #cbd5e1;
}

.hero-btns {
    display: flex;
    gap: 20px;
    justify-content: center;
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* About Section */
/* About Section */
.about-container {
    display: flex;
    align-items: center;
    gap: 80px;
}

@media (max-width: 900px) {
    .about-container {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .about-container {
        flex-direction: column !important;
        gap: 30px;
    }

    .about-text,
    .about-image {
        width: 100% !important;
        flex: none !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }

    .about-image::before {
        display: none;
    }

    .about-text h2 {
        font-size: 2rem;
    }
}

.about-text {
    flex: 1;
}

.about-text .eyebrow {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: block;
}

.about-text h2 {
    font-size: 3rem;
    /* Larger title */
    margin-bottom: 25px;
    color: var(--color-primary);
    line-height: 1.2;
}

.about-text p {
    margin-bottom: 30px;
    color: var(--color-text-light);
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Specific button style for About section - Matched to Screenshot (Dark) */
.about-text .btn {
    border-radius: 0;
    padding: 15px 40px;
    /* Larger padding */
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    background-color: var(--color-primary);
    /* Dark Navy */
    color: var(--color-white);
    border: none;
    transition: var(--transition-smooth);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);
}

.about-text .btn:hover {
    background-color: var(--color-gold);
    color: var(--color-primary);
    transform: translateY(-2px);
}

.about-image {
    flex: 1;
    position: relative;
    z-index: 1;
    margin-right: 20px;
    /* Space for the line */
    margin-bottom: 20px;
    /* Space for the line */
}

/* L-Shape Gold Line Decoration */
.about-image::before {
    content: '';
    position: absolute;
    top: 50%;
    /* Start halfway down */
    right: -25px;
    /* Offset right */
    bottom: -25px;
    /* Offset bottom */
    left: 25%;
    /* Start quarter way across */
    border-right: 1px solid var(--color-gold);
    border-bottom: 1px solid var(--color-gold);
    z-index: -1;
}

/* Remove secondary line */
.about-image::after {
    display: none;
}

.about-image img {
    width: 100%;
    /* Ensure image respects aspect ratio */
    aspect-ratio: 16/9;
    /* Standard widescreen look */
    object-fit: cover;
    display: block;
    border-radius: 0;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
    /* Stronger shadow per reference */
}

/* Featured Properties */
.properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    gap: 30px;
    margin-top: 50px;
}

.property-card {
    background: var(--color-white);
    border-radius: 4px;
    overflow: hidden;
    transition: var(--transition-smooth);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.property-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.property-image {
    height: 250px;
    background-color: #ddd;
    /* Placeholder */
    position: relative;
    overflow: hidden;
}

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

.property-card:hover .property-image img {
    transform: scale(1.05);
}

.property-status {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 5px 12px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.property-details {
    padding: 25px;
}

.property-price {
    color: var(--color-gold);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}

.property-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--color-primary);
}

.property-location {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.property-features {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #eee;
    padding-top: 15px;
    color: var(--color-text-dark);
    font-size: 0.9rem;
}

/* Amenities Section */
.amenities-slider-container {
    display: flex;
    overflow-x: auto;
    gap: 30px;
    margin-top: 50px;
    padding-bottom: 30px;
    /* Space for scrollbar */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.amenities-slider-container::-webkit-scrollbar {
    height: 6px;
}

.amenities-slider-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.amenities-slider-container::-webkit-scrollbar-thumb {
    background: var(--color-gold);
    border-radius: 10px;
}



/* Testimonials Section */
.testimonials-slider {
    display: flex;
    gap: 30px;
    margin-top: 50px;
    overflow-x: auto;
    padding-bottom: 20px;
}

.testimonial-card {
    min-width: clamp(260px, 80vw, 350px);
    background: var(--color-white);
    padding: 40px;
    border-left: 3px solid var(--color-gold);
}

.testimonial-text {
    font-style: italic;
    color: var(--color-text-light);
    margin-bottom: 20px;
}

.testimonial-author {
    font-weight: 600;
    color: var(--color-primary);
}

.testimonial-role {
    font-size: 0.85rem;
    color: var(--color-text-light);
    display: block;
}

/* Contact Section Styles */
.contact-container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
    /* Default mobile padding */
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    gap: 15px;
    /* Reduced gap */
}



.form-group {
    display: grid;
    gap: 6px;
    /* Reduced label gap */
}

.form-group label {
    font-size: 0.85rem;
    /* Smaller label */
    font-weight: 500;
    color: var(--color-primary);
}

.form-control {
    padding: 10px 14px;
    /* Compact padding */
    border: 1px solid #ddd;
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: var(--transition-smooth);
    border-radius: 4px;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-gold);
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
    /* Reduced height */
}

/* Footer */
footer {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 40px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.footer-col h3 {
    font-size: 1.8rem;
    color: var(--color-gold);
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
}

.footer-col h4 {
    font-size: 1.2rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 2px;
    background-color: var(--color-gold);
}

.footer-col p {
    color: #cbd5e1;
    margin-bottom: 20px;
    line-height: 1.6;
}

.footer-links-list li,
.footer-contact li {
    margin-bottom: 15px;
}

.footer-links-list a {
    color: #cbd5e1;
    transition: var(--transition-smooth);
}

.footer-links-list a:hover {
    color: var(--color-gold);
    padding-left: 5px;
}

.footer-contact li {
    color: #cbd5e1;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

/* Social Links */
.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    /* Wider padding for pill shape */
    height: auto;
    /* Allow height to adjust */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    /* Pill shape */
    color: var(--color-white);
    transition: var(--transition-smooth);
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    /* Prevent text wrapping */
}

.social-icon:hover {
    background-color: var(--color-gold);
    color: var(--color-primary);
    border-color: var(--color-gold);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.9rem;
}

/* Mobile Footer */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .footer-content>.footer-col:first-child {
        grid-column: 1 / -1;
        text-align: center;
        margin-bottom: 10px;
    }

    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .social-links {
        justify-content: center;
    }

    .footer-contact li {
        justify-content: center;
        text-align: left;
    }

    .footer-links-list {
        text-align: center;
    }
}



/* Loan Planning Section */
.loan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.loan-card {
    background: var(--color-white);
    padding: 40px 30px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: var(--transition-smooth);
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.loan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--color-gold);
}

.featured-loan {
    border: 2px solid var(--color-gold);
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15);
}

.featured-loan:hover {
    transform: scale(1.05) translateY(-10px);
}

.popular-tag {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-gold);
    color: var(--color-primary);
    padding: 5px 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 0 0 5px 5px;
}

.loan-header {
    margin-bottom: 30px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 20px;
}

.loan-header h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.loan-type {
    font-size: 1.1rem;
    color: var(--color-gold);
    font-weight: 500;
}

.loan-features {
    list-style: none;
    margin-bottom: 30px;
    padding: 0;
}

.loan-features li {
    margin-bottom: 15px;
    color: var(--color-text-light);
    font-size: 0.95rem;
}

/* Premium Company Branding - Palace Style */
.company-branding {
    margin-top: 10px;
    /* Reduced from 40px */
    margin-bottom: 20px;
    /* Reduced from 40px */
    opacity: 0;
    animation: fadeInUp 1.5s ease-out 0.5s forwards;
    display: flex;
    justify-content: center;
    width: 100%;
    /* Ensure full width for centering */
}

.brand-container {
    text-align: center;
    position: relative;
    padding: 10px 20px;
    /* Reduced padding */
}



.brand-container {
    /* The Reference Box */
    background-color: #020617;
    /* Fallback */

    /* Sparkling Border Magic */
    border: 4px solid transparent;
    /* Transparent to show gradient behind */
    background:
        linear-gradient(#020617, #020617) padding-box,
        /* Inner Content BG (Dark) */
        linear-gradient(135deg, #B38728 10%, #FACC15 45%, #FFFFFF 50%, #FACC15 55%, #B38728 90%) border-box;
    /* Border Gradient with white sparkle */

    background-size: 200% 200%;
    animation: goldSparkle 3s linear infinite;

    padding: 5px;
    display: inline-block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

@keyframes goldSparkle {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.brand-top {
    /* "DASARA ESTATES" */
    font-family: 'Playfair Display', serif;
    /* Serif font */
    font-size: 3.5rem;
    /* Large size */
    font-weight: 400;
    /* Regular weight often looks more elegant in serif */
    color: #FACC15;
    /* Bright Gold */
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
    padding: 20px 40px 5px;
    /* Top/Side padding */
    border: 2px solid #B38728;
    /* Inner Gold Border (Top/Sides) */
    border-bottom: none;
    /* Connects with bottom part */
    background: transparent;
    letter-spacing: 2px;
    text-shadow: none;
    -webkit-text-fill-color: initial;
    background-clip: border-box;
    filter: none;
}

.brand-bottom-wrapper {
    /* Wrapper for "MYSURU" */
    border: 2px solid #B38728;
    /* Inner Gold Border (Bottom/Sides) */
    border-top: none;
    /* Connects with top part */
    padding: 0 20px 15px;
    /* Bottom/Side padding - Compacted */
    position: static;
    display: block;
    border-radius: 0;
    /* Square corners */
}

/* Remove old pseudo-elements */
.brand-bottom-wrapper::before,
.brand-bottom-wrapper::after {
    display: none;
}

.brand-bottom {
    /* "MYSURU" */
    font-family: 'Poppins', sans-serif;
    /* Clean Sans-serif */
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 4px;
    color: #FACC15;
    /* Gold */
    text-transform: uppercase;
    display: block;
    padding-top: 5px;
}

@media (max-width: 768px) {
    .brand-top {
        font-size: 2rem;
        padding: 15px 20px 5px;
    }

    .brand-bottom {
        font-size: 1rem;
    }

    .brand-bottom-wrapper {
        padding: 0 20px 15px;
    }

    .brand-container {
        border-width: 3px;
    }
}

/* Stats Section */
.stats-section {
    background-color: #FACC15;
    /* Bright Yellow/Gold */
    padding: 80px 0;
    color: #1e293b;
    /* Dark Blue/Slate */
}

.stats-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    gap: 40px;
}

.stat-item {
    flex: 1;
}

.stat-number {
    display: block;
    font-size: 4rem;
    font-weight: 300;
    font-family: 'Playfair Display', serif;
    line-height: 1;
    margin-bottom: 10px;
    color: #0F172A;
    /* Deep Navy */
}

.stat-label {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}

.stat-text {
    flex: 1.5;
    /* Takes up more space */
    font-size: 1.1rem;
    line-height: 1.6;
    color: #334155;
    padding: 0 20px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .stats-container {
        flex-direction: column;
        gap: 40px;
    }

    .stat-text {
        border: none;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 20px 0;
    }
}


/* Services Section */
.services-section {
    padding: 100px 0;
    background-color: transparent;
    /* Seamless with white background or whatever is needed */
}

/* Services Header */
.services-section .text-center {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 50px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.service-card {
    background: #fff;
    padding: 50px 30px;
    border-radius: 4px;
    /* Slightly squarish for premium feel */
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.08);
    /* Softer shadow */
    border-color: rgba(212, 175, 55, 0.4);
    /* Gold border */
}

.service-icon-wrapper {
    width: 90px;
    height: 90px;
    margin: 0 auto 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Bouncy effect */
    position: relative;
    background-color: #f8fafc;
    /* Default light bg */
}

.service-card:hover .service-icon-wrapper {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.1);
    /* Pulse effect ring */
}

/* Icon specific backgrounds */
.icon-blue-light {
    background-color: #eff6ff;
    color: #3b82f6;
}

.icon-red-light {
    background-color: #fef2f2;
    color: #ef4444;
}

.icon-green-light {
    background-color: #f0fdf4;
    color: #22c55e;
}

.service-icon svg {
    width: 40px;
    height: 40px;
    stroke-width: 1.5px;
}

.service-card h3 {
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-bottom: 15px;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
}

.service-card p {
    color: var(--color-text-light);
    line-height: 1.7;
    font-size: 1rem;
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        padding: 40px 20px;
    }
}


/* Floating Enquiry Button — defined once here, enhanced at line ~2412 */

/* Resort-Style Living Section */
.resort-section {
    background-color: #fff;
    padding: 100px 0;
}

.resort-header {
    margin-bottom: 60px;
}

.eyebrow-pill {
    background-color: #F3E8FF;
    /* Light Purple pill */
    color: #9333EA;
    /* Purple Text */
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 20px;
}

.resort-header h2 {
    font-size: 3rem;
    color: #0F172A;
    margin-bottom: 10px;
}

.highlight-living {
    color: #EA580C;
    /* Orange/Red */
}

.underline-center {
    width: 60px;
    height: 4px;
    background-color: #EA580C;
    margin: 10px auto 30px;
    border-radius: 2px;
}

.resort-description {
    max-width: 700px;
    margin: 0 auto;
    color: #64748B;
    font-size: 1.1rem;
    line-height: 1.6;
}

.resort-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.resort-card {
    background: #fff;
    padding: 40px 20px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    min-width: 280px;
    /* Fixed width for slider */
    flex: 0 0 auto;
    /* Prevent shrinking */
    scroll-snap-align: center;
}

.resort-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    transform: translateY(-5px);
}

.resort-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* Icon styling will be specific */
}

.resort-icon svg {
    width: 30px;
    height: 30px;
}

/* Icon Colors */
.icon-blue {
    background-color: #EFF6FF;
    /* Light Blue */
    color: #3B82F6;
    /* Blue */
}

.icon-red {
    background-color: #FEF2F2;
    /* Light Red */
    color: #EF4444;
    /* Red */
}

.icon-purple {
    background-color: #FAF5FF;
    /* Light Purple */
    color: #A855F7;
    /* Purple */
}

.icon-green {
    background-color: #F0FDF4;
    /* Light Green */
    color: #22C55E;
    /* Green */
}

.icon-orange {
    background-color: #FFF7ED;
    /* Light Orange */
    color: #F97316;
    /* Orange */
}

.icon-dark {
    background-color: #F8FAFC;
    /* Light Slate */
    color: #334155;
    /* Slate */
}

.resort-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0F172A;
    margin-bottom: 15px;
}

.resort-card p {
    font-size: 0.9rem;
    color: #64748B;
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .resort-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .resort-grid {
        grid-template-columns: 1fr;
    }

    .resort-header h2 {
        font-size: 2.2rem;
    }
}

/* Meet Our Experts Section */
.team-section {
    background-color: #f8fafc;
    padding: 100px 0;
}

.team-header {
    margin-bottom: 60px;
}

.team-header h2 {
    font-size: 3rem;
    color: #0F172A;
    /* Deep Navy */
    margin-top: 10px;
}

.team-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 30px;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
}

.team-grid::-webkit-scrollbar {
    height: 4px;
    /* Thinner for sleek look but visible */
}

.team-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.team-grid::-webkit-scrollbar-thumb {
    background: var(--color-gold);
    border-radius: 10px;
}

/* Mobile Scroll Hint */
@media (max-width: 768px) {

    .team-header,
    .resort-header,
    .why-choose-section .text-center {
        position: relative;
    }

    /* Swipe hint removed as per user request */
    .team-header::after,
    .resort-header::after,
    .why-choose-section .text-center::after {
        display: none !important;
    }

    /* Add padding to grid to show cutoff */
    .team-grid,
    .resort-grid,
    .why-choose-grid {
        padding-right: 40px !important;
        /* Expose next card */
    }
}

/* Card Styling */
.team-card {
    background: #fff;
    text-align: left;
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
    min-width: calc(50% - 15px);
    /* 2 items visible */
    flex: 0 0 auto;
    scroll-snap-align: start;
    border-radius: 4px; /* Harder corners like property card */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); /* Softer initial shadow */
}

.team-card:last-child {
    border-right: none;
}

.team-image {
    width: 100%;
    max-width: 290px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    overflow: hidden;
    background-color: #ddd;
    position: relative;
}

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


.team-info {
    padding: 25px; /* Match property-details padding */
}

.team-card h3 {
    font-size: 1.2rem;
    color: var(--color-primary); /* Use primary color for title */
    margin-bottom: 10px;
    font-family: var(--font-body); /* Standard font */
    font-weight: 600;
}

.team-card p {
    font-size: 0.9rem;
    color: var(--color-text-light); /* Subdued text color */
    text-transform: none; /* Remove uppercase */
    letter-spacing: normal; /* Normal spacing */
    margin-bottom: 20px;
}


.elephant-premium-procession {
    position: absolute;
    bottom: 20px;
    /* Moved to bottom to avoid overlapping centered text */
    left: 0;
    width: 100%;
    height: 350px;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    display: flex;
    /* justify-content: center; */
    opacity: 0.9;
    /* User requested 0.9 */
    mix-blend-mode: screen;
    /* Fallback to remove black background */
    filter: brightness(1.1) contrast(1.2) grayscale(0.2);
    /* Slightly adjusted to help hide checkered bg */
}

.elephant-track-premium {
    display: flex;
    white-space: nowrap;
    animation: majesticElephantWalk 35s linear infinite;
    flex-shrink: 0;
}

.elephant-premium-img {
    height: 350px;
    /* Substantial size */
    width: auto;
    margin-right: 250px;
    /* Spacious gaps for a royal feel */
    /* Increased from 250px to fix replication/overlap */
    animation: elephantWalkingGait 3s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes majesticElephantWalk {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }
}

@keyframes elephantWalkingGait {

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

    25% {
        transform: translateY(-10px) rotate(-1deg);
    }

    50% {
        transform: translateY(0) rotate(0deg);
    }

    75% {
        transform: translateY(-10px) rotate(1deg);
    }
}

/* Ensure Hero content stays clearly on top */
/* Ensure branding box has a background to stand out */
.brand-container {
    position: relative;
    z-index: 2;
}

/* Social Icons */
.team-socials {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.team-socials a {
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.team-socials a:hover {
    opacity: 1;
}

/* Hide socials on non-active cards initially? 
   Reference shows icons only on the active card. 
   We can make them appear on hover or be present if active.
*/
.team-card .team-socials {
    display: none;
}

.team-card.active .team-socials,
.team-card:hover .team-socials {
    display: flex;
}

@media (max-width: 1024px) {
    /* Keeping the flex layout but maybe adjusting width if needed, 
       but 50% is good for tablet too according to user request "2 visible" 
       Wait, user said "adjust to screen accordingly", usually means 1 on mobile.
    */
}

@media (max-width: 768px) {
    .team-card {
        min-width: calc(50% - 15px);
        /* 2 items visible */
    }
}

/* Hero First Badge Style */
.hero-first {
    font-size: 5rem;
    color: var(--color-gold);
    line-height: 0.8;
    margin-right: 10px;
    font-family: var(--font-heading);
    vertical-align: middle;
    text-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    line-height: 0.8;
    margin-right: 10px;
    font-family: var(--font-heading);
    vertical-align: middle;
    text-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    display: inline-block;
}

.hero-subtitle {
    display: inline;
}

.hero-first sup {
    font-size: 0.4em;
    vertical-align: top;
    margin-left: 2px;
}

/* Brand Tagline Style */
.brand-tagline {
    color: #cbd5e1;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-top: 5px;
    /* Reduced margin */
    text-transform: uppercase;
    font-weight: 300;
    text-align: center;
    display: block;
    text-shadow: none;
    animation: fadeInUp 1s ease-out 1s forwards;
    opacity: 0;
    line-height: 1.2;
    padding-bottom: 0;
}

/* Site Decorations */
.site-decorations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1002;
}

/* Common Corner Style */
.decor-corner {
    position: absolute;
    width: 250px;
    height: 250px;
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
    transition: all 0.5s ease;
}

/* Top Left */
.decor-corner.top-left {
    top: 0;
    left: 0;
    background-image: url('../images/lavish_lights.svg');
    transform-origin: top left;
}

/* Top Right */
.decor-corner.top-right {
    top: 0;
    right: 0;
    background-image: url('../images/lavish_lights.svg');
    transform: scaleX(-1);
    transform-origin: top right;
}

/* Bottom Left */
.decor-corner.bottom-left {
    bottom: 0;
    left: 0;
    background-image: url('../images/lavish_lights.svg');
    transform: scaleY(-1);
    transform-origin: bottom left;
}

/* Bottom Right */
.decor-corner.bottom-right {
    bottom: 0;
    right: 0;
    background-image: url('../images/lavish_lights.svg');
    transform: scale(-1, -1);
    transform-origin: bottom right;
}

/* Mid-Edge Center Garland */
/* Mid-Edge Center Garland */
.decor-edge {
    position: absolute;
    width: 400px;
    height: 100px;
    background-image: url('../images/lavish_lights.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    opacity: 0.9;
    left: 50%;
    transform: translateX(-50%);
}

.decor-edge.top-center {
    top: 0;
    transform-origin: top center;
    animation: gentleSwayEdge 10s ease-in-out infinite alternate;
}

.decor-edge.bottom-center {
    bottom: 0;
    transform: translateX(-50%) scaleY(-1);
    transform-origin: bottom center;
    animation: gentleSwayEdgeBottom 10s ease-in-out infinite alternate;
}

@keyframes gentleSwayEdge {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }

    100% {
        transform: translateX(-50%) rotate(1deg);
    }
}

@keyframes gentleSwayEdgeBottom {
    0% {
        transform: translateX(-50%) scaleY(-1) rotate(0deg);
    }

    100% {
        transform: translateX(-50%) scaleY(-1) rotate(-1deg);
    }
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .decor-corner {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 992px) {
    .decor-corner {
        width: 180px;
        height: 180px;
    }

    .decor-edge.top-center {
        width: 300px;
    }
}

@media (max-width: 768px) {
    .decor-corner {
        width: 140px;
        height: 140px;
    }

    .decor-corner.top-left {
        width: 120px;
        height: 120px;
        opacity: 0.8;
        /* Reduce opacity to not block logo */
    }

    .decor-edge.top-center {
        display: none;
    }
}

@media (max-width: 480px) {
    .decor-corner {
        width: 100px;
        height: 100px;
    }

    .decor-corner.bottom-left,
    .decor-corner.bottom-right {
        opacity: 0.6;
    }
}

/* Subtle Sway Animation for the entire decoration */
.decor-corner {
    animation: gentleSway 8s ease-in-out infinite alternate;
}

@keyframes gentleSway {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(2deg);
    }
}

/* Adjust transforms for different corners to include the sway */
.decor-corner.top-right {
    animation: gentleSwayMirrorX 8s ease-in-out infinite alternate;
}

.decor-corner.bottom-left {
    animation: gentleSwayMirrorY 8s ease-in-out infinite alternate;
}

.decor-corner.bottom-right {
    animation: gentleSwayMirrorXY 8s ease-in-out infinite alternate;
}

@keyframes gentleSwayMirrorX {
    0% {
        transform: scaleX(-1) rotate(0deg);
    }

    100% {
        transform: scaleX(-1) rotate(-2deg);
    }
}

@keyframes gentleSwayMirrorY {
    0% {
        transform: scaleY(-1) rotate(0deg);
    }

    100% {
        transform: scaleY(-1) rotate(-2deg);
    }
}

@keyframes gentleSwayMirrorXY {
    0% {
        transform: scale(-1, -1) rotate(0deg);
    }

    100% {
        transform: scale(-1, -1) rotate(2deg);
    }
}

/* Amenities Slider Container */
.amenities-slider-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

@media (max-width: 1024px) {
    .amenities-slider-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .amenities-slider-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 20px;
        padding-bottom: 20px;
        padding-right: 40px !important;
        /* Cutoff hint */
        -webkit-overflow-scrolling: touch;
    }

    .amenities-slider-container .resort-card {
        min-width: 85%;
        scroll-snap-align: center;
        flex: 0 0 auto;
        margin-bottom: 0;
        /* Override potential margins */
    }

    /* Scrollbar for amenities */
    .amenities-slider-container::-webkit-scrollbar {
        height: 4px;
    }

    .amenities-slider-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .amenities-slider-container::-webkit-scrollbar-thumb {
        background: var(--color-gold);
        border-radius: 10px;
    }
}

/* Why Choose Section Styles */
.why-choose-section {
    position: relative;
    overflow: hidden;
    padding-top: 20px;
    /* Reduced from default section padding */
}

/* Reduce bottom padding of About section to clear gap */
#about {
    padding-bottom: 20px;
}

.why-choose-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.section-subtitle {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-primary);
    max-width: 800px;
    margin: 0 auto 15px;
    line-height: 1.6;
}

.section-description {
    font-size: 1rem;
    color: var(--color-text-light);
    max-width: 800px;
    margin: 0 auto;
    font-weight: 300;
}

.why-choose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.why-card {
    background: var(--color-white);
    padding: 40px 30px;
    border-radius: 0;
    /* Sharp luxurious corners, or minimal radius */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: var(--transition-smooth);
    position: relative;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
}

.why-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: rgba(212, 175, 55, 0.3);
}

.why-card.featured-card {
    background: linear-gradient(145deg, #ffffff 0%, #fffbf0 100%);
    border: 1px solid rgba(212, 175, 55, 0.2);
    /* scale: 1.02; Slightly larger if you want emphasize middle */
}

.card-icon-wrapper {
    margin-bottom: 25px;
    display: flex;
    justify-content: flex-start;
}

.card-icon {
    width: 60px;
    height: 60px;
    background: rgba(212, 175, 55, 0.1);
    color: var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition-smooth);
}

.why-card:hover .card-icon {
    background: var(--color-gold);
    color: var(--color-white);
}

.card-icon svg {
    width: 30px;
    height: 30px;
}

.why-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--color-primary);
}

.why-card p {
    font-size: 0.95rem;
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: 15px;
}

.card-list {
    margin: 15px 0;
    padding-left: 0;
    list-style: none;
}

.card-list li {
    font-size: 0.9rem;
    color: var(--color-text-dark);
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.card-list li::before {
    content: '•';
    color: var(--color-gold);
    position: absolute;
    left: 0;
    font-size: 1.2rem;
    line-height: 1;
    top: -2px;
}

.card-footer-text {
    font-style: italic;
    font-size: 0.85rem;
    margin-top: auto;
    /* Push to bottom */
    color: var(--color-gold) !important;
}

@media (max-width: 768px) {
    .why-choose-section h2 {
        font-size: 2rem;
    }

    .why-choose-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 20px;
        margin-right: -20px;
        padding-right: 20px;
    }

    .why-card {
        min-width: 85%;
        scroll-snap-align: center;
    }
}

/* Floating Enquiry Button - Navy & Gold Bubble Style */
.floating-enquiry-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--color-primary);
    color: #FFFFFF;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.4);
    z-index: 9999;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid var(--color-gold);
    text-align: center;

    /* Initial Hidden State for Bubbling Effect */
    opacity: 0;
    transform: scale(0) translateY(50px);
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.floating-enquiry-btn:hover {
    background-color: var(--color-gold);
    color: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.5);
}

/* Show State with Animation */
.floating-enquiry-btn.show {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: all;
    animation: bounceAndPulse 3s infinite 2s;
}

@keyframes bounceAndPulse {
    0%, 100% {
        transform: scale(1) translateY(0);
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.4);
    }
    50% {
        transform: scale(1.05) translateY(-5px);
        box-shadow: 0 15px 30px rgba(15, 23, 42, 0.2);
    }
}

/* Enquiry Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 20000;
    /* Higher than nav (10000) and burger (10001) */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s;
}

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 40px;
    border: 1px solid var(--color-gold);
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: relative;
    animation: slideDown 0.4s;
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 20px;
    top: 10px;
    transition: 0.3s;
    cursor: pointer;
    z-index: 20001;
    /* Ensure on top of modal content */
    width: 40px;
    /* Increase touch target */
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: rgba(0, 0, 0, 0.05);
    /* Subtle background for visibility */
    border-radius: 50%;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--color-gold);
    text-decoration: none;
    cursor: pointer;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 600px) {
    .modal-content {
        margin: 15% auto;
        padding: 25px;
        width: 95%;
    }
}

/* Floating button – mobile sizing handled in the master @768 block below */

/* =========================================================
   MOBILE HERO FIXES — phones & small tablets
   ========================================================= */
@media (max-width: 768px) {

    /* FIX: background-attachment:fixed causes jitter/glitch on iOS Safari.
       Use scroll instead on mobile for a smooth experience. */
    .hero {
        background-attachment: scroll !important;
        padding-top: 90px !important;
        padding-bottom: 80px !important;
        height: auto !important;
        min-height: 100vh !important;
        display: flex !important;
        align-items: flex-start !important;
    }

    .hero-content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    /* 1. Ticker */
    .premium-ad-ticker {
        margin-bottom: 5px !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 4px !important;
    }

    /* 2. Branding Box */
    .company-branding {
        margin-top: 0 !important;
        margin-bottom: 5px !important;
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        height: auto !important;
    }

    .brand-container {
        max-width: calc(100vw - 40px) !important;
    }

    .brand-top {
        font-size: clamp(1.4rem, 7vw, 2rem) !important;
        padding: 10px 10px 5px !important;
        letter-spacing: 1px !important;
    }

    .brand-bottom-wrapper {
        padding: 0 10px 10px !important;
    }

    .brand-tagline {
        font-size: 0.65rem !important;
        letter-spacing: 1px !important;
        margin-top: 2px !important;
    }

    /* 3. Hero h1 (WE WORK WITH...) */
    .hero h1 {
        margin-top: 5px !important;
        margin-bottom: 10px !important;
        line-height: 1.4 !important;
        height: auto !important;
        width: 100% !important;
    }

    .hero-highlight-text {
        font-size: 0.85rem !important;
        margin-top: 5px !important;
        padding: 10px 14px !important;
        white-space: normal !important;
        line-height: 1.6 !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* 4. Features Box */
    .hero p.hero-features {
        font-size: 0.95rem !important;
        padding: 16px !important;
        margin-top: 10px !important;
        margin-bottom: 20px !important;
        line-height: 1.6 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .hero-feature-highlight {
        font-size: 1.2rem !important;
    }

    /* 5. Hero Buttons — stack them, but only inside hero */
    .hero-btns {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .hero-btns .btn {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 14px 20px !important;
        text-align: center !important;
    }

    /* 6. Elephant background adjustments */
    .elephant-premium-img {
        height: 200px !important;
        margin-right: 50px !important;
        opacity: 1 !important;
        width: auto !important;
    }

    .elephant-premium-procession {
        height: 200px !important;
        bottom: 0 !important;
        top: auto !important;
        opacity: 1 !important;
        width: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    .elephant-track-premium {
        display: flex !important;
        flex-shrink: 0 !important;
        width: auto !important;
        animation: mobileElephantMarquee 20s linear infinite !important;
        justify-content: flex-start !important;
    }

    @keyframes mobileElephantMarquee {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(0); }
    }
}

/* Extra small phones (e.g. 360px and below) */
@media (max-width: 400px) {
    .brand-top {
        font-size: 1.3rem !important;
        padding: 8px 8px 4px !important;
    }
    .hero-highlight-text {
        font-size: 0.78rem !important;
    }
    .hero p.hero-features {
        font-size: 0.88rem !important;
    }
}

/* Listings Grid Desktop */
.listings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns by default */
    gap: 30px;
    margin-top: 30px;
}

@media (max-width: 1024px) {
    .listings-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablet */
    }
}

/* Responsive Mission & Vision Grid */
.mission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

@media (max-width: 768px) {
    .mission-grid {
        grid-template-columns: 1fr;
        /* Stack vertically on mobile */
        gap: 30px;
    }

    /* About Section Layout */
    .about-container {
        flex-direction: column !important;
    }

    .mission-grid .property-card {
        padding: 25px !important;
        /* Reduce padding on mobile */
    }

    /* Prevent Logo Overlap */
    .logo-default {
        max-width: 100px !important;
        /* Cap size on mobile */
    }

    /* Page Hero Responsive Overrides */
    .page-hero {
        height: auto !important;
        min-height: 220px !important;
        padding: 110px 20px 50px !important;
        box-sizing: border-box !important;
    }

    .page-hero h1 {
        font-size: clamp(1.6rem, 7vw, 2.5rem) !important;
        line-height: 1.2;
    }

    .page-hero p {
        font-size: 0.95rem !important;
        padding: 0 10px;
        margin-top: 10px;
    }

    /* Listings Grid Mobile — single column, full-width cards */
    .listings-grid,
    .properties-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* Contact Form Mobile */
    .contact-container {
        padding: 0 15px;
        width: 100%;
    }

    /* Global Section Padding Standardisation */
    .section {
        padding: 60px 0 !important;
    }

    /* Our Services Slider Mobile */
    .services-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 20px;
        padding-bottom: 20px;
        margin-right: -15px;
        /* Offset container padding */
        padding-right: 40px;
        /* Peek effect */
        -webkit-overflow-scrolling: touch;
    }

    .services-grid .service-card {
        min-width: 85%;
        /* Show partial next card */
        scroll-snap-align: center;
        flex: 0 0 auto;
    }

    /* Hide scrollbar for cleaner look but keep functionality */
    .services-grid::-webkit-scrollbar {
        height: 4px;
    }

    .services-grid::-webkit-scrollbar-thumb {
        background: var(--color-gold);
        border-radius: 4px;
    }

    /* Featured Residences Slider Mobile */
    #featured .properties-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 20px;
        padding-bottom: 20px;
        margin-right: -15px;
        /* Offset container padding */
        padding-right: 40px;
        /* Peek effect */
        -webkit-overflow-scrolling: touch;
    }

    #featured .property-card {
        min-width: 85%;
        scroll-snap-align: center;
        flex: 0 0 auto;
    }

    /* Hide scrollbar */
    #featured .properties-grid::-webkit-scrollbar {
        height: 4px;
    }

    #featured .properties-grid::-webkit-scrollbar-thumb {
        background: var(--color-gold);
        border-radius: 4px;
    }

    /* Arrow Decoration for Featured Section */
    #featured .text-center {
        position: relative;
    }

    #featured .text-center::after {
        content: "\2192";
        /* Right Arrow Unicode */
        display: block;
        font-size: 2rem;
        color: var(--color-gold);
        margin: 0 auto;
        width: 40px;
        height: 40px;
        line-height: 40px;
        /* Animation */
        animation: floatRight 1.5s ease-in-out infinite;
        opacity: 0.8;
    }

    @keyframes floatRight {

        0%,
        100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(10px);
        }
    }

    /* Fix Alignment for Services & Amenities Cards (Mobile Only) */
    .service-card,
    .resort-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Center content vertically */
        align-items: center;
        text-align: center;
        aspect-ratio: 1 / 1;
        /* Force Square Shape */
        min-width: 260px;
        /* Fixed width for consistent square */
        max-width: 260px;
        padding: 20px 15px !important;
        /* Reduced padding for fit */
        white-space: normal;
        word-wrap: break-word;
        border-radius: 12px;
        /* Optional: nicer corners */
    }

    /* Adjust Icon Size for Square Fit */
    .service-card .service-icon-wrapper {
        width: 70px;
        height: 70px;
        margin-bottom: 15px;
        /* Reduced margin */
    }

    .service-card .service-icon svg,
    .resort-card .resort-icon svg {
        width: 30px;
        height: 30px;
        /* Slightly smaller icons if needed */
    }

    .service-card h3,
    .resort-card h3 {
        margin-top: 5px;
        margin-bottom: 10px;
        min-height: auto;
        /* Let it flow naturally in center */
        font-size: 1.1rem;
        /* Slightly smaller text if needed */
    }

    .service-card p,
    .resort-card p {
        margin-bottom: 0;
        flex-grow: 0;
        /* Don't stretch, just sit in center */
        font-size: 0.9rem;
        /* Slightly smaller text for fit */
        line-height: 1.4;
    }
}

/* Pagination Styles */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 50px;
}

.btn-pagination {
    padding: 10px 20px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-pagination:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #ccc;
    color: #ccc;
}

.btn-pagination:disabled:hover {
    background-color: transparent;
    color: #ccc;
    border-color: #ccc;
}

.page-numbers {
    display: flex;
    gap: 10px;
}

.page-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid var(--color-gold);
    color: var(--color-primary);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.page-number:hover, .page-number.active {
    background-color: var(--color-gold);
    color: var(--color-white);
}

@media (max-width: 768px) {
    .pagination-container {
        gap: 10px;
    }
    .btn-pagination {
        padding: 8px 15px;
        font-size: 0.85rem;
    }
    .page-number {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

/* =========================================================
   COMPREHENSIVE RESPONSIVE FIXES — All Mobile Formats
   ========================================================= */

/* ---- Page Hero (about.html, listings.html) ---- */
.page-hero {
    box-sizing: border-box;
    padding: 80px 20px 50px;
}

.page-hero h1 {
    font-size: clamp(1.8rem, 7vw, 3.5rem);
    margin-bottom: 15px;
    line-height: 1.2;
}

.page-hero p {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    max-width: 100%;
    padding: 0 10px;
}

/* ---- Testimonials — prevent overflow on phones ---- */
.testimonials-slider {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
}

.testimonials-slider::-webkit-scrollbar {
    height: 4px;
}
.testimonials-slider::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.testimonials-slider::-webkit-scrollbar-thumb { background: var(--color-gold); border-radius: 10px; }

/* ---- Filter bar (listings.html) ---- */
.listings-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 30px;
}

/* ============================================================
   BREAKPOINT: Tablet (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* Page Hero */
    .page-hero {
        height: auto !important;
        min-height: 220px !important;
        padding: 100px 20px 50px !important;
    }

    .page-hero h1 {
        font-size: clamp(1.6rem, 7vw, 2.5rem) !important;
    }

    .page-hero p {
        font-size: 0.95rem !important;
    }

    /* Testimonials */
    .testimonial-card {
        min-width: 85vw;
        padding: 28px 24px;
        scroll-snap-align: center;
        flex: 0 0 auto;
    }

    .testimonial-text {
        font-size: 0.95rem;
    }

    /* Contact form */
    .contact-container {
        padding: 20px 15px;
        border-radius: 12px;
        box-shadow: none;
        width: 100%;
        box-sizing: border-box;
    }

    .contact-form .form-group {
        margin-bottom: 12px;
    }

    /* Floating enquiry button */
    .floating-enquiry-btn {
        bottom: 16px !important;
        right: 16px !important;
        padding: 11px 20px !important;
        font-size: 0.82rem !important;
        letter-spacing: 0.5px !important;
        border-width: 1.5px !important;
    }

    /* Modal */
    .modal-content {
        width: 92% !important;
        padding: 24px 18px !important;
        margin: 10% auto !important;
    }

    /* Stats numbers */
    .stat-number {
        font-size: 3rem;
    }

    .section-subtitle,
    .section-description {
        padding: 0 10px;
    }

    /* Why-choose grid — already a horizontal scroll; make card widths nicer */
    .why-card {
        min-width: 82% !important;
    }

    /* Listings grid */
    .listings-grid,
    .properties-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Filter buttons on listings page */
    .listings-filter .btn,
    [style*="justify-content: center"] .btn {
        font-size: 0.8rem;
        padding: 10px 16px;
    }
}

/* ============================================================
   BREAKPOINT: Small phones (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {

    /* Navbar logo */
    .logo-default {
        max-width: 80px !important;
    }

    /* Page hero */
    .page-hero {
        padding: 90px 15px 40px !important;
    }

    /* Brand box */
    .brand-top {
        font-size: 1.3rem !important;
        padding: 8px 8px 4px !important;
        letter-spacing: 0.5px !important;
    }

    .brand-tagline {
        font-size: 0.6rem !important;
        letter-spacing: 0.8px !important;
    }

    /* Hero text */
    .hero-highlight-text {
        font-size: 0.78rem !important;
        padding: 8px 10px !important;
    }

    .hero p.hero-features {
        font-size: 0.88rem !important;
        padding: 14px !important;
    }

    .hero-feature-highlight {
        font-size: 1.05rem !important;
    }

    /* Hero buttons */
    .hero-btns {
        max-width: 260px !important;
    }

    .hero-btns .btn {
        font-size: 0.82rem !important;
        padding: 12px 16px !important;
    }

    /* Team cards */
    .team-card {
        min-width: 80vw !important;
    }

    /* Service / resort cards */
    .service-card,
    .resort-card {
        min-width: 240px !important;
        max-width: 240px !important;
    }

    /* Testimonials */
    .testimonial-card {
        min-width: 88vw;
        padding: 22px 18px;
    }

    /* Footer */
    .footer-col h3 {
        font-size: 1.4rem;
    }

    .footer-col h4 {
        font-size: 1rem;
    }

    /* Floating button */
    .floating-enquiry-btn {
        bottom: 12px !important;
        right: 12px !important;
        padding: 9px 16px !important;
        font-size: 0.75rem !important;
    }

    /* Stats */
    .stat-number {
        font-size: 2.5rem;
    }

    /* Modal */
    .modal-content {
        width: 96% !important;
        padding: 20px 14px !important;
        margin: 8% auto !important;
    }

    /* About image on small phones */
    .about-image {
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }

    .about-image::before {
        display: none;
    }

    /* Pagination */
    .pagination-container {
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn-pagination {
        padding: 7px 12px;
        font-size: 0.8rem;
    }

    .page-number {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

/* ============================================================
   BREAKPOINT: Very small phones (≤ 360px)
   ============================================================ */
@media (max-width: 360px) {

    .brand-top {
        font-size: 1.1rem !important;
        letter-spacing: 0.3px !important;
    }

    .hero-highlight-text {
        font-size: 0.72rem !important;
    }

    .hero p.hero-features {
        font-size: 0.82rem !important;
    }

    .hero-btns {
        max-width: 220px !important;
    }

    .hero-btns .btn {
        font-size: 0.78rem !important;
        padding: 10px 12px !important;
    }

    .floating-enquiry-btn {
        padding: 8px 13px !important;
        font-size: 0.7rem !important;
    }

    .testimonial-card {
        padding: 18px 14px;
    }

    .page-hero h1 {
        font-size: 1.4rem !important;
    }
}