@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Satisfy&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* General Styles */
body {
    /* Using 'Outfit' for modern, clean readability */
    font-family: 'Outfit', sans-serif;
    /* Soft Cream Background from the logo's inner shield */
    background-color: #F5F2E9; 
    /* Dark Slate for text to keep it easy to read */
    color: #333333;
    line-height: 1.6;
}

/* Script Headings (The "Friendship" Look) */
h1, h2, .script-font {
    /* 'Satisfy' mimics the elegant script in your logo */
    font-family: 'Satisfy', cursive;
    /* Deep Navy Blue from the logo shield */
    color: #1B365D;
    font-weight: 400;
    margin-bottom: 1rem;
}

/* Block Headings (The "MOTOR INN" Look) */
h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    /* Deep Navy Blue */
    color: #d4af37;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Body Text & Navigation */
p, li, a {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
}

/* Links & Interactive Elements */
a {
    text-decoration: none;
    /* Navy Blue links */
    color: #1B365D;
    transition: all 0.3s ease;
}

a:hover {
    /* Goldenrod accent from the handshake icon */
    color: #D4AF37;
}
/* === ANTIQUE TOPBAR STYLES === */
.antique-topbar {
    background-color: #F5F2E9; /* Cream Background */
    border-bottom: 1px solid rgba(27, 54, 93, 0.2); /* Soft Navy divider */
    padding: 8px 0;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100; /* Just above the header */
}

.topbar-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1B365D; /* Navy Blue */
    font-weight: 600;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 25px;
}

.topbar-phone {
    text-decoration: none;
    color: #1B365D;
    transition: color 0.3s;
}

.topbar-phone:hover {
    color: #D4AF37; /* Gold on hover */
}

.topbar-social {
    display: flex;
    gap: 15px;
    border-left: 1px solid rgba(27, 54, 93, 0.2);
    padding-left: 15px;
}

.topbar-social a {
    color: #1B365D;
    font-size: 14px;
    transition: transform 0.3s;
}

.topbar-social a:hover {
    color: #D4AF37;
    transform: translateY(-2px);
}

/* === ADJUST MAIN HEADER POSITION === */
/* Since we added a topbar, we need to push the main header down slightly */
.motion-header {
    top: 35px; /* Height of the topbar */
}

/* === MOBILE & TABLET ADAPTATION === */
@media (max-width: 768px) {
    .topbar-left {
        display: none; /* Hide long address on mobile to keep it clean */
    }
    
    .topbar-container {
        justify-content: center;
        padding: 0 20px;
    }
    
    .topbar-social {
        border-left: none;
        padding-left: 0;
    }

    .motion-header {
        top: 38px; /* Slightly more space for mobile padding */
    }
}
/* ===== ANTIQUE HEADER BASE ===== */
.motion-header {
    position: fixed;
    top: 45px;
    width: 100%;
    z-index: 1000;
    /* Navy Blue from logo with a slight glass effect */
    background: rgba(27, 54, 93, 0.98); 
    /* The "Golden Rail" - The car drives on this border */
    border-bottom: 4px solid #D4AF37; 
    padding: 12px 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

/* ===== NEON AMBIENT GLOW ===== */
/* Replaces the "Light Trail" with a warm, nostalgic street-lamp glow */
.neon-ambient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% -50%, rgba(212, 175, 55, 0.15), transparent 80%);
    pointer-events: none;
    animation: flicker 5s infinite;
}

@keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
    80% { opacity: 0.9; }
}

/* ===== NAVBAR LAYOUT ===== */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

/* ===== NAV LINKS ===== */
.nav-left, .nav-right {
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav-left a, .nav-right a {
    color: #F5F2E9; /* Cream Text */
    font-weight: 500;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    position: relative;
    transition: color 0.3s ease;
}

/* Antique Hover Effect: Glow and Underline */
.nav-left a::after, .nav-right a::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0%;
    height: 2px;
    background: #D4AF37; /* Gold Underline */
    transition: width 0.3s ease;
}

.nav-left a:hover::after, .nav-right a:hover::after {
    width: 100%;
}

.nav-left a:hover, .nav-right a:hover {
    color: #D4AF37; /* Gold text on hover */
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* ===== LOGO CENTER ===== */
.logo {
    position: relative;
    transition: transform 0.4s ease;
}

.logo img {
    height: 80px; /* Adjusted for the shield shape */
    display: block;
    filter: drop-shadow(0 0 8px rgba(245, 242, 233, 0.2));
}

.logo:hover {
    transform: scale(1.05) rotate(1deg); /* Slight "Antique Sign" wobble */
}

/* ===== THE MOVING VINTAGE CAR ===== */
.moving-car {
    position: absolute;
    bottom: -2px; /* Sits perfectly on the gold border */
    width: 90px;
    height: auto;
    z-index: 10;
    pointer-events: none;
    /* Makes the car look slightly aged/sepia */
    filter: sepia(0.3) drop-shadow(2px -2px 4px rgba(0,0,0,0.4));
    will-change: left;
}

/* ===== SCROLL STATE ===== */
/* Use JS to toggle the .scrolled class when the user scrolls down */
.motion-header.scrolled {
    padding: 5px 0;
    background: #1B365D; /* Darker Navy on scroll */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.motion-header.scrolled .logo img {
    height: 60px; /* Shrinks logo slightly for better visibility */
}

/* ===== MOBILE RESPONSIVENESS ===== */
@media (max-width: 768px) {
    .nav-left, .nav-right {
        display: none; /* Hide desktop menu on mobile */
    }
    .navbar {
        justify-content: center;
    }
    .moving-car {
        display: none; /* Car motion is best for desktop screens */
    }
}
/* Update these specific properties in your existing CSS */

.antique-topbar {
    /* ... existing styles ... */
    transition: transform 0.3s ease-in-out;
}

.motion-header {
    /* ... existing styles ... */
    transition: transform 0.3s ease-in-out, background 0.4s, padding 0.4s;
}

/* New Classes for Hiding */
.topbar-hidden {
    transform: translateY(-100%); /* Slides the topbar up */
}

.header-hidden {
    transform: translateY(-160%); /* Slides the header further up to clear the screen */
}
/* === NEON VINTAGE HAMBURGER === */
.hamburger-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #1B365D;
    border: 2px solid #D4AF37;
    padding: 10px;
    border-radius: 2px;
    cursor: pointer;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1200;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
    animation: signFlicker 6s infinite;
}

@keyframes signFlicker {
    0%, 95%, 100% { opacity: 1; }
    96% { opacity: 0.7; }
    97% { opacity: 1; }
    98% { opacity: 0.9; }
}

.hamburger-box .line {
    display: block;
    width: 25px;
    height: 2px;
    background: #D4AF37;
    margin: 4px 0;
    box-shadow: 0 0 5px #D4AF37;
}

.menu-text {
    font-size: 8px;
    color: #F5F2E9;
    letter-spacing: 2px;
    font-weight: bold;
    margin-top: 2px;
}

/* === THE OVERLAY (3D ENVIRONMENT) === */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 20, 35, 0.9); /* Very dark navy backdrop */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1300;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    perspective: 1200px; /* Essential for the 3D book effect */
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* === THE LEATHER FOLDER / PAPER EFFECT === */
.menu-paper-effect {
    background-color: #F5F2E9;
    background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png'); /* Physical Texture */
    width: 88%;
    max-width: 380px;
    padding: 50px 30px 0 30px; /* Footer will fill the bottom */
    position: relative;
    border: 10px solid #1B365D; /* Thick Navy Border */
    outline: 2px solid #D4AF37; /* Gold inner line */
    outline-offset: -6px;
    box-shadow: 30px 30px 50px rgba(0,0,0,0.5);
    
    /* Starting position: Rotated and scaled down */
    transform: rotateY(-40deg) scale(0.7) translateX(-50px);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
}

.mobile-menu-overlay.active .menu-paper-effect {
    transform: rotateY(0deg) scale(1) translateX(0);
    opacity: 1;
}

/* === STAGGERED LINK ANIMATION === */
.mobile-menu-links {
    list-style: none;
    margin: 20px 0;
    text-align: center;
}

.mobile-menu-links li {
    margin-bottom: 15px;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.4s ease;
}

.mobile-menu-overlay.active li:nth-child(1) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.mobile-menu-overlay.active li:nth-child(2) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.mobile-menu-overlay.active li:nth-child(3) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.mobile-menu-overlay.active li:nth-child(4) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
.mobile-menu-overlay.active li:nth-child(5) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }

.mobile-menu-links li a {
    font-family: 'Satisfy', cursive;
    font-size: 2rem;
    color: #1B365D;
    text-decoration: none;
    display: inline-block;
}

.mobile-menu-links li a span {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 3px;
    color: #D4AF37;
    margin-bottom: -8px;
}

/* === BRASS PLAQUE FOOTER === */
.antique-footer {
    background: #D4AF37;
    margin: 30px -30px 0 -30px;
    padding: 25px 20px;
    text-align: center;
    border-top: 2px solid #1B365D;
    box-shadow: inset 0 5px 15px rgba(0,0,0,0.1);
}

.address {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1B365D;
    letter-spacing: 1px;
}

.phone-link {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800;
    font-size: 1.3rem;
    color: #1B365D;
    text-decoration: none;
}

/* === WAX SEAL CLOSE BUTTON === */
.mobile-menu-header {
    position: absolute;
    top: -25px;
    right: -20px;
}

.close-btn {
    width: 50px;
    height: 50px;
    background: #1B365D;
    color: #D4AF37;
    border: 3px solid #D4AF37;
    border-radius: 50%;
    font-size: 30px;
    cursor: pointer;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
}
/* === VINTAGE STAMP / LOGO SECTION (FIXED) === */
.stamp-logo {
    text-align: center;
    margin: 0 auto 30px auto; /* Centered with bottom spacing */
    position: relative;
    width: 140px; /* Constrains the area for the postmark */
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The circular postmark around the logo */
.stamp-logo::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px; 
    height: 130px;
    border: 1px dashed rgba(27, 54, 93, 0.4);
    border-radius: 50%;
    font-size: 7px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
    letter-spacing: 1px;
    color: rgba(27, 54, 93, 0.6);
    pointer-events: none;
    animation: rotateStamp 20s linear infinite; /* Slow vintage rotation */
}

@keyframes rotateStamp {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.mobile-logo {
    height: 80px; /* Much smaller, elegant size */
    width: auto;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.1));
}

/* Adjust the paper padding to give the logo room */
.menu-paper-effect {
    padding: 60px 20px 0 20px; /* Increased top padding */
    /* ... keep your other paper effect styles ... */
}
/* 1. HIDE Hamburger on Desktop (Large Screens) */
@media (min-width: 1025px) {
    .hamburger-btn {
        display: none !important;
    }

    /* Safety: Make sure the mobile overlay never shows on desktop */
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* 2. SHOW Hamburger on Mobile & Tablet */
@media (max-width: 1024px) {
    .hamburger-btn {
        display: flex !important; /* Shows the neon sign button */
    }
    
    /* Ensure the desktop navigation links are hidden on mobile */
    .nav-left, .nav-right {
        display: none !important;
    }
}
.expert-hero {
    position: relative;
    height: 100vh;
    width: 100%;
    background: #020811; /* Dark Background */
    overflow: hidden;
    margin-top: 150px;
}

/* Layering Logic */
.ex-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
}

.ex-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

/* 1. Background Image */
.ex-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ex-img-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.4);
}

/* 2. The Diagonal Reveal (Middle Layer) */
.ex-mask-layer {
    position: absolute;
    right: 0; 
    top: 0;
    width: 50%; 
    height: 100%;
    z-index: 5;
    /* The main clip for the image */
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
    transform: translateX(100%);
    transition: transform 1.2s cubic-bezier(0.7, 0, 0.2, 1);
    /* Remove the standard border-left; it won't show correctly with clip-path */
}

/* The "Expert" Diagonal Border */
.ex-mask-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6; /* Sits on top of the image */
    background: #d4af37; /* Use your Gold variable or #fff000 */
    
    /* We create a polygon that is only 2px wide along that left edge */
    /* Adjust the 25.5% and 0.5% to control border thickness */
    clip-path: polygon(29% 0, 21.5% 0, 0.10% 100%, 0% 100%);
    
    pointer-events: none;
}

.ex-slide.active .ex-mask-layer { 
    transform: translateX(0); 
}

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

/* 3. The Text Content (Top Layer) */
.ex-content {
    position: absolute;
    inset: 0;
    z-index: 20; /* High Z-index ensures title is on TOP */
    display: flex;
    align-items: center;
    pointer-events: none;
}

.ex-container { 
    width: 100%; 
    max-width: 1300px; 
    margin: 0 auto; 
    padding: 0 5%; 
}

.ex-text-block {
    max-width: 650px;
    pointer-events: auto;
}

.ex-tag {
    display: block;
    color: #d4af37; /* Gold */
    font-weight: 800;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 15px;
}

.ex-title {
    font-size: clamp(2.5rem, 5vw, 5.5rem);
    color: #fff;
    line-height: 1;
    margin-bottom: 25px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.ex-title span { 
    color: #d4af37; /* Gold */
    font-style: italic; 
    font-weight: 400; 
}

.ex-desc {
    color: rgba(255,255,255,0.8);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 35px;
}

/* Buttons */
.ex-cta-wrap { 
    display: flex; 
    gap: 20px; 
}

.btn-main { 
    background: #d4af37; /* Gold */
    color: #fff; 
    padding: 16px 35px; 
    text-decoration: none; 
    font-weight: 700; 
    font-size: 12px;
}

.btn-main:hover { 
    
    color: #fff; 
   
}

.btn-outline { 
    border: 1px solid rgba(255,255,255,0.3); 
    color: #fff; 
    padding: 16px 35px; 
    text-decoration: none; 
    font-weight: 700; 
    font-size: 12px; 
    transition: 0.3s;
}

.btn-outline:hover { 
    background: #fff; 
    color: #020811; /* Dark */
}

/* Navigation */
.ex-nav-interface {
    position: absolute; 
    bottom: 50px; 
    left: 5%;
    display: flex; 
    align-items: center; 
    gap: 30px; 
    z-index: 100;
}

.ex-progress-ring { 
    position: relative; 
    width: 70px; 
    height: 70px; 
}

.ex-progress-ring svg { 
    transform: rotate(-90deg); 
}

.ring-track { 
    fill: none; 
    stroke: rgba(255,255,255,0.1); 
    stroke-width: 2; 
}

.ring-fill { 
    fill: none; 
    stroke: #d4af37; /* Gold */
    stroke-width: 2; 
    stroke-dasharray: 283; 
    stroke-dashoffset: 283; 
    transition: 1s;
}

.slide-counter { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: #fff; 
    font-weight: bold; 
}

.nav-trigger { 
    background: none; 
    border: none; 
    color: #fff; 
    cursor: pointer; 
    font-size: 1.2rem; 
}

/* Mobile Response */
@media (max-width: 991px) {
    .ex-mask-layer { 
        display: none; 
    } 
    .ex-content { 
        align-items: flex-end; 
        padding-bottom: 120px; 
    }
    .ex-text-block { 
        text-align: center; 
    }
    .ex-cta-wrap { 
        justify-content: center; 
    }
    .ex-title { 
        font-size: 2.8rem; 
    }
    .ex-nav-interface { 
        left: 50%; 
        transform: translateX(-50%); 
    }
}

/* --- THE CURATED CANVAS: CORE STYLES --- */
:root {
    --deep-navy: #0A192F;
    --gold-accent: #C5A059;
    --soft-cream: #FDFBF7;
    --glass-white: rgba(255, 255, 255, 0.7);
}

.curated-welcome {
    position: relative;
    padding: 120px 0;
    background: var(--soft-cream);
    overflow: hidden;
}

.cw-ambient-glow {
    position: absolute;
    width: 60vw; height: 60vw;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    top: -10%; right: -10%;
    z-index: 0;
}

.cw-layout-grid {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* --- MEDIA BLOCK (LEFT SIDE) --- */
.cw-media-block {
    flex: 1;
    perspective: 1000px;
}

.cw-circle-frame {
    width: 550px; height: 550px;
    border-radius: 50% 50% 0 50%;
    overflow: hidden;
    position: relative;
    box-shadow: 40px 40px 80px rgba(0,0,0,0.1);
    cursor: pointer;
}

.cw-hero-img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.cw-circle-frame:hover .cw-hero-img { transform: scale(1.1); }

.cw-play-portal {
    position: absolute;
    bottom: 30px; right: 30px;
    width: 120px; height: 120px;
    background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

.rotating-label {
    position: absolute; width: 100%; height: 100%;
    animation: rotateLoop 12s linear infinite;
}

.rotating-label text { font-size: 9px; font-weight: 800; letter-spacing: 2px; fill: var(--deep-navy); }

@keyframes rotateLoop { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* --- CONTENT CARD (RIGHT SIDE) --- */
.cw-content-block {
    flex: 1.2;
    margin-left: -120px;
}

.cw-glass-card {
    background: var(--glass-white);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 60px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 30px 60px rgba(0,0,0,0.05);
}

.cw-title a{
   font-family: 'Satisfy', cursive;
    font-size: 4.5rem;
    color: var(--deep-navy);
    line-height: 1;
    margin: 20px 0;
}

.cw-outline {
    display: block;
    color: transparent;
    -webkit-text-stroke: 1px var(--deep-navy);
    font-style: italic;
    font-weight: 400;
}

.cw-btn-reveal {
    background: var(--deep-navy);
    color: #fff;
    border: none;
    padding: 10px 10px 10px 30px;
    border-radius: 50px;
    display: flex; align-items: center; gap: 20px;
    cursor: pointer; transition: 0.4s;
}

.cw-btn-circle {
    width: 45px; height: 45px;
    background: var(--gold-accent);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

/* --- SIDE DRAWER (1050px Wide) --- */
/* --- ENHANCED SIDE DRAWER (1050px) --- */
.cw-side-drawer {
    position: fixed;
    top: 0;
    right: -1050px; /* Hidden state */
    width: 1050px;
    max-width: 100vw; 
    height: 100vh;
    background: var(--deep-navy);
    color: #fff;
    z-index: 2000;
    transition: transform 0.8s cubic-bezier(0.85, 0, 0.15, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 60px rgba(0,0,0,0.3);
}

.cw-side-drawer.active {
    transform: translateX(-1050px);
}

/* --- THE DYNAMIC SCROLL CONTAINER --- */
.drawer-inner {
    padding: 80px;
    flex: 1; /* Takes up all available space */
    
    /* THE SMART SCROLLER: 
       'auto' means it only shows a bar if content overflows */
    overflow-y: auto; 
    overflow-x: hidden;
    
    /* Smooth scrolling for a premium feel */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Custom Minimalist Scrollbar */
.drawer-inner::-webkit-scrollbar {
    width: 4px;
}
.drawer-inner::-webkit-scrollbar-track {
    background: transparent;
}
.drawer-inner::-webkit-scrollbar-thumb {
    background: var(--gold-accent);
    border-radius: 10px;
}

/* --- CONTENT STYLING --- */
.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 30px;
    margin-bottom: 50px;
    position: sticky; /* Keeps Close button visible while scrolling */
    top: 0;
    background: var(--deep-navy);
    z-index: 10;
}

.drawer-content-grid {
    display: grid;
    grid-template-columns: 1fr ; /* Two columns for the 1050px width */
    gap: 60px;
    align-items: start;
}

.about-text-column p {
    font-size: 1.1rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 25px;
}
.drawer-close {
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 10px 20px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s;
}

.drawer-close:hover { background: #fff; color: var(--deep-navy); }

/* --- VIDEO OVERLAY --- */
.cw-video-overlay {
    position: fixed; inset: 0;
    background: rgba(10, 25, 47, 0.98);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
}

.cw-video-close {
    position: absolute; top: 40px; right: 40px;
    background: none; border: 2px solid #fff;
    color: #fff; padding: 12px 25px;
    font-weight: 900; cursor: pointer;
}

/* --- RESPONSIVE --- */
@media (max-width: 1200px) {
    .cw-side-drawer { width: 100%; right: -100%; }
    .cw-side-drawer.active { transform: translateX(-100%); }
}

@media (max-width: 991px) {
    .cw-layout-grid { flex-direction: column; }
    .cw-media-block { width: 100%; display: flex; justify-content: center; }
    .cw-circle-frame { width: 350px; height: 350px; }
    .cw-content-block { margin-left: 0; margin-top: -60px; width: 100%; }
    .cw-title { font-size: 3rem; }
}


/* --- THE GRANDE AMENITIES GRID: LOGO COLOR EDITION --- */

.premium-amenities-grid {
    position: relative;
    padding: 120px 0;
    /* BACKGROUND: Adjusted to match the dark navy from the logo shield */
    background: #0E223D; 
    overflow: hidden;
   
}

/* Atmospheric Background Text (Subtle Logo Color) */
.pag-background-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20vw;
    font-weight: 900;
    /* Using faint white so it blends into the new background color */
    color: rgba(255, 255, 255, 0.02); 
    letter-spacing: -10px;
    z-index: 1;
    pointer-events: none;
    text-transform: uppercase;
}

.pag-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

/* --- HEADER STYLING --- */
.pag-header {
    text-align: center;
    margin-bottom: 80px;
}

.pag-eyebrow {
    /* COLOR: Primary Gold from the logo's handshakes/scrolls */
    color: #C49A58; 
    letter-spacing: 5px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.pag-title {
    
    font-size: 3.5rem;
    color: #fff;
    margin: 15px 0;
}

.pag-title span {
    font-style: italic;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
}

.pag-divider {
    width: 60px;
    height: 3px;
    /* COLOR: Primary Gold */
    background: #C49A58; 
    margin: 0 auto;
}

/* --- THE NEW GRID SYSTEM --- */
.pag-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.pag-card {
    background: rgba(255, 255, 255, 0.03);
    /* Border adjusted for dark navy background */
    border: 1px solid rgba(255, 255, 255, 0.08); 
    padding: 40px 30px;
    border-radius: 4px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- HOVER EFFECT: LIGHT PULSE --- */
.pag-card:hover {
    background: rgba(255, 255, 255, 0.06);
    /* HOVER BORDER: Primary Gold */
    border-color: #C49A58; 
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.pag-card.highlight {
    /* HOVER GLOW: Adjusted to use Gold instead of template Cyan */
    background: radial-gradient(circle at top right, rgba(196, 154, 88, 0.1), transparent); 
}

.pag-icon {
    font-size: 28px;
    /* COLOR: Primary Gold */
    color: #C49A58; 
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* GOLD BACKGROUND with low opacity */
    background: rgba(196, 154, 88, 0.1); 
    border-radius: 50%;
}

.pag-info h3 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 5px;
    
}

.pag-info p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    margin: 0;
}

/* --- FOOTER BADGES --- */
.pag-footer-badges {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    gap: 50px;
}

.pag-footer-badges span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pag-footer-badges i {
    /* COLOR: Primary Gold */
    color: #C49A58; 
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 991px) {
    .pag-grid { grid-template-columns: 1fr 1fr; }
    .pag-title { font-size: 2.5rem; }
}

@media (max-width: 600px) {
    .pag-grid { grid-template-columns: 1fr; }
    .pag-footer-badges { flex-direction: column; align-items: center; gap: 20px; }
}

.room-atmosphere {
    position: relative;
    height: 90vh;
    min-height: 750px;
    background: #050a12;
    overflow: hidden;
    
}

.ra-visual {
    position: absolute;
    width: 100%; height: 100%;
    z-index: 1;
}

.ra-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.7) contrast(1.1);
    transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), filter 1s ease;
}

.ra-overlay-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, 
        rgba(14, 34, 61, 0.95) 0%, 
        rgba(14, 34, 61, 0.4) 40%, 
        transparent 100%);
    z-index: 2;
}

.ra-light-leak {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(196, 154, 88, 0.3), transparent, rgba(14, 34, 61, 0.6));
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.ra-content-pane {
    position: relative;
    z-index: 10;
    height: 100%;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 5%;
}

.ra-glass-card {
    width: 100%;
    max-width: 580px;
    padding: 60px;
    background: rgba(14, 34, 61, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(196, 154, 88, 0.2);
    box-shadow: -20px 40px 80px rgba(0,0,0,0.6);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

.ra-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }
.ra-line { width: 40px; height: 1px; background: #C49A58; }
.ra-eyebrow { color: #C49A58; font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; }

.ra-title {
   
    font-size: 42px;
    color: #ffffff;
    margin-bottom: 10px;
    font-weight: 400;
}

.ra-tags {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 35px;
}

.ra-copy {
    color: rgba(255, 255, 255, 0.75);
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 40px;
}

.ra-info-grid {
    display: flex;
    gap: 50px;
    margin-bottom: 45px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ra-label { display: block; color: #C49A58; font-size: 10px; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 1px; }
.ra-value { font-size: 19px; color: #fff; font-weight: 300; }

.ra-actions { display: flex; justify-content: space-between; align-items: center; gap: 20px; }

.ra-btn-primary {
    background: #C49A58;
    color: #0E223D;
    padding: 18px 35px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s ease;
}

.ra-btn-primary:hover { background: #ffffff; transform: translateY(-3px); }

.ra-navigation { display: flex; align-items: center; gap: 20px; }
.ra-nav-btn {
    background: none; border: 1px solid rgba(196, 154, 88, 0.3);
    color: #fff; width: 42px; height: 42px; cursor: pointer; transition: 0.3s;
    display: grid; place-items: center; border-radius: 0;
}
.ra-nav-btn:hover { border-color: #C49A58; background: rgba(196, 154, 88, 0.1); }
.ra-count { color: #C49A58; font-size: 14px; font-weight: 600; }

.is-switching .ra-glass-card { 
    transform: translateX(40px); 
    opacity: 0; 
}

/* Media Query for Tablets (iPad) */
@media (max-width: 1024px) {
    .ra-content-pane {
        justify-content: center; /* Center the card instead of pushing right */
        padding: 0 30px;
    }

    .ra-glass-card {
        padding: 40px;
        max-width: 90%;
    }

    .ra-title {
        font-size: 32px;
    }
}

/* Media Query for Mobile (Phones) */
@media (max-width: 768px) {
    .room-atmosphere {
        height: auto; /* Allow height to grow with content */
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .ra-visual {
        position: relative; /* Move image to top of stack */
        height: 40vh; /* Image takes top 40% of screen */
    }

    .ra-content-pane {
        position: relative;
        padding: 20px;
        margin-top: -60px; /* Pull card up slightly over the image */
        align-items: flex-start;
    }

    .ra-glass-card {
        padding: 30px 20px;
        max-width: 100%;
        backdrop-filter: blur(10px); /* Lighter blur for mobile performance */
        box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    }

    .ra-title {
        font-size: 28px;
    }

    .ra-info-grid {
        gap: 20px;
        flex-wrap: wrap; /* Stack occupancy and bedding if needed */
    }

    .ra-copy {
        font-size: 15px;
        margin-bottom: 25px;
    }

    .ra-actions {
        flex-direction: column; /* Stack button and navigation */
        gap: 30px;
        align-items: stretch;
    }

    .ra-btn-primary {
        text-align: center;
    }

    .ra-navigation {
        justify-content: center;
    }
}

.ka-horizontal-scroll {
  height: 400vh; /* Adjust based on number of slides (100vh per slide) */
  position: relative;
  background: #050a12;
}

.ka-sticky-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Background Pinning */
.ka-bg-pin {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ka-bg-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: background-image 0.8s ease-in-out;
}

.ka-vignette-modern {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #050a12 20%, rgba(5,10,18,0.4) 60%, transparent 100%);
  z-index: 2;
}

/* Horizontal Moving Track */
.ka-horizontal-track {
  display: flex;
  position: relative;
  z-index: 10;
  width: 300%; /* Number of slides * 100% */
  height: 100%;
  will-change: transform;
}

.ka-slide-panel {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  padding-left: 10%;
}

.ka-content-left {
  max-width: 550px;
  opacity: 0;
  transform: translateX(100px);
  transition: all 0.8s ease-out;
}

/* Dynamic Class for when slide is in view */
.ka-slide-panel.is-visible .ka-content-left {
  opacity: 1;
  transform: translateX(0);
}

.ka-meta { color: #C49A58; font-weight: 700; letter-spacing: 5px; font-size: 12px; display: block; margin-bottom: 20px; }
.ka-display-title {  font-size: clamp(40px, 8vw, 80px); color: #fff; margin-bottom: 20px; }
.ka-description { color: rgba(255,255,255,0.7); font-size: 18px; line-height: 1.8; margin-bottom: 40px; }
.ka-explore-link { border: 1px solid #C49A58; padding: 15px 35px; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 13px; font-weight: 700; transition: 0.3s; }
.ka-explore-link:hover { background: #C49A58; color: #050a12; }

/* Progress Bar at bottom */
.ka-progress-container {
  position: absolute;
  bottom: 50px;
  left: 10%;
  width: 80%;
  height: 2px;
  background: rgba(255,255,255,0.1);
  z-index: 20;
}
.ka-progress-bar {
  height: 100%;
  background: #C49A58;
  width: 0%;
}
/* Tablet (iPad) and Mobile Adjustments */
@media (max-width: 1024px) {
	
  .ka-slide-panel {
    padding-left: 5%; /* Less padding on sides */
    padding-right: 5%;
    justify-content: center; /* Center content on mobile */
  }

  .ka-content-left {
    max-width: 90%; /* Let the text use more width */
    text-align: center; /* Optional: centering looks better on mobile */
  }

  .ka-display-title {
    font-size: clamp(30px, 10vw, 50px); /* Smaller title for mobile */
    line-height: 1.1;
  }

  .ka-description {
    font-size: 15px; /* Smaller body text */
    line-height: 1.6;
    margin-bottom: 25px;
  }

  .ka-meta {
    font-size: 10px;
    letter-spacing: 3px;
  }

  .ka-progress-container {
    bottom: 30px;
    width: 90%;
    left: 5%;
  }
}
.pg-cinematic-section {
  background: #FDFBF7; /* Your requested light cream background */
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

.pg-container { max-width: 1600px; margin: 0 auto; padding: 0 5%; }

/* --- ASYMMETRIC HEADER --- */
.pg-header-alt {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
  /* Darker border for light background */
  border-bottom: 1px solid rgba(14, 34, 61, 0.1); 
  padding-bottom: 40px;
}

.pg-header-alt h2 {
 
  font-size: 58px;
  color: #0E223D; /* Deep Navy for readability */
  margin: 0;
}

.pg-header-alt h2 span { 
  font-style: italic; 
  font-weight: 300; 
  color: #C49A58; /* Signature Gold */
}

.header-right { max-width: 400px; text-align: right; }
.header-right p { 
  color: #555c66; /* Softer gray-navy for text */
  font-size: 16px; 
  line-height: 1.6; 
}

/* --- FILM STRIP GALLERY --- */
.pg-film-strip {
  display: flex;
  gap: 15px;
  height: 600px;
  align-items: center;
}

.pg-film-card {
  flex: 1;
  height: 80%;
  position: relative;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  /* Brighter grayscale for light mode */
  filter: grayscale(100%) opacity(0.7); 
  cursor: pointer;
  background: #000; /* Ensures images have a base if loading */
}

.pg-film-card.is-hero, 
.pg-film-card:hover {
  flex: 3;
  height: 100%;
  filter: grayscale(0%) opacity(1);
  box-shadow: 0 40px 80px rgba(14, 34, 61, 0.15); /* Soft depth shadow */
}

.img-reveal { width: 100%; height: 100%; overflow: hidden; border-radius: 4px; }
.img-reveal img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.1);
  transition: transform 1.2s ease;
}

.pg-film-card:hover img { transform: scale(1); }

/* --- CARD OVERLAYS --- */
.card-info {
  position: absolute;
  bottom: 30px; left: 30px;
  opacity: 0;
  transform: translateY(20px);
  transition: 0.5s 0.2s ease;
  z-index: 2;
}

/* Gradient overlay so text is readable on light/dark images */
.pg-film-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 34, 61, 0.6) 0%, transparent 40%);
  opacity: 0;
  transition: 0.5s;
}

.pg-film-card:hover::after,
.pg-film-card.is-hero::after { opacity: 1; }

.pg-film-card:hover .card-info,
.pg-film-card.is-hero .card-info {
  opacity: 1; transform: translateY(0);
}

.card-num { color: #C49A58; font-weight: 700; font-size: 14px; display: block; }
.card-info h3 { 
  color: #fff; /* Keep text white as it sits on the dark gradient */
  font-size: 24px; 
  margin: 5px 0; 
 
}
/* --- RESPONSIVE ADJUSTMENTS --- */

/* Tablets (iPad) */
@media (max-width: 1024px) {
  .pg-header-alt {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  
  .header-right {
    text-align: left;
    max-width: 100%;
  }

  .pg-film-strip {
    height: 500px;
    gap: 10px;
  }
  
  /* On tablets, we keep the flex effect but make the base wider */
  .pg-film-card {
    filter: grayscale(0%) opacity(1); /* Better visibility for touch */
  }
}

/* Mobile Phones */
@media (max-width: 768px) {
  .pg-cinematic-section {
    padding: 60px 0;
  }

  .pg-header-alt h2 {
    font-size: 38px; /* Scale down large titles */
  }

  /* Switch from horizontal flex to a vertical stack */
  .pg-film-strip {
    flex-direction: column;
    height: auto; /* Let content dictate height */
    gap: 20px;
  }

  .pg-film-card {
    width: 100%;
    height: 350px; /* Fixed height for mobile cards */
    flex: none !important; /* Disable the flex growing effect */
    filter: grayscale(0%) opacity(1);
  }

  .pg-film-card.is-hero, 
  .pg-film-card:hover {
    height: 400px; /* Slight growth on tap if desired */
  }

  .img-reveal img {
    transform: scale(1); /* Prevent over-zooming on small screens */
  }

  .card-info {
    opacity: 1; /* Always show info on mobile since there's no "hover" */
    transform: translateY(0);
    bottom: 20px;
    left: 20px;
  }

  .pg-film-card::after {
    opacity: 1; /* Always show gradient for text readability */
    background: linear-gradient(to top, rgba(14, 34, 61, 0.8) 0%, transparent 60%);
  }
  
  .card-info h3 {
    font-size: 20px;
  }
}
/* --- VERTICAL DECORATIVE TEXT --- */
.pg-vertical-text {
  position: absolute;
  right: -50px; top: 50%;
  transform: rotate(90deg) translateY(-50%);
  font-size: 150px;
  font-weight: 900;
  /* Darker subtle text for light background */
  color: rgba(14, 34, 61, 0.03); 
  white-space: nowrap;
  pointer-events: none;
}

.site-footer-v3 {
            background-color: #FDFBF7; /* Cream Background */
            position: relative;
            overflow: hidden;
            border-top: 1px solid rgba(0,0,0,0.05);
            color: #555555;
        }

        .f-grid-wrapper {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 30px;
        }

        /* --- WATERMARK --- */
        .f-watermark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 15vw;
            font-weight: 900;
            color: rgba(2, 52, 125, 0.03); /* Faint Navy */
            pointer-events: none;
            white-space: nowrap;
            letter-spacing: 20px;
            z-index: 1;
        }

        /* --- MAIN SECTION --- */
        .f-main-container {
            padding: 100px 0 80px;
            position: relative;
            z-index: 2;
        }

        .f-main-container .f-grid-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 100px;
        }

        /* LEFT CONTENT */
        .f-brand-section { flex: 1.5; }
        .f-logo-refined { max-width: 130px; margin-bottom: 35px; }

        .f-title-group h2 {
           
            font-size: 52px;
            color: #02347D; /* Navy */
            line-height: 1;
            margin: 0 0 20px 0;
            font-weight: 700;
        }

        .f-title-group h2 span { 
              font-family: 'Outfit', sans-serif;
            font-weight: 600; 
            color: #C49A58; /* Gold */
			text-transform: uppercase;
        }

        .f-title-group p { 
            font-size: 16px;
            max-width: 1260px; 
            line-height: 1.8; 
            margin-bottom: 45px; 
        }

        /* CONTACT GRID */
        .f-contact-grid { 
    display: flex; 
    gap: 30px; /* Increased gap for a 'bigger' wider feel */
    margin-bottom: 40px;
    width: 100%;
}
.f-contact-box {
    flex: 1; /* Allows boxes to take up available space */
}
        
        .f-contact-box small { 
    display: block; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 11px; 
    color: #C49A58; 
    margin-bottom: 12px;
    font-weight: 700;
}
        
        .f-contact-box a, 
.f-contact-box .address-text { 
    font-size: 18px; /* Slightly larger for better readability */
    color: #222222; 
    text-decoration: none; 
    line-height: 1.6;
    display: block; /* Keeps the link/address group as a block */
}
/* Fix to prevent address parts from jumping to new lines */
.f-contact-box span[itemprop] {
    display: inline; /* This prevents the stacking seen in your image */
}

        /* SOCIALS */
        .f-social-wrap {
            padding-top: 35px;
            border-top: 1px solid rgba(0,0,0,0.08);
            max-width: 460px;
        }
        
        .f-social-wrap small {
            display: block;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 11px;
            color: #C49A58; /* Gold */
            margin-bottom: 15px;
            font-weight: 700;
        }
        
        .f-social-icons { display: flex; gap: 15px; }
        
        .f-social-icons a {
            width: 42px; height: 42px;
            display: grid; place-items: center;
            background: #ffffff;
            border: 1px solid rgba(2, 52, 125, 0.1);
            color: #02347D; /* Navy */
            text-decoration: none;
            font-size: 16px;
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        
        .f-social-icons a:hover {
            background: #02347D; /* Navy */
            color: #ffffff;
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(2, 52, 125, 0.15);
        }

        /* RIGHT CONTENT (NAVIGATION) */
        .f-nav-section { 
            flex: 1; 
            display: flex; 
            justify-content: space-between;
            padding-top: 15px; 
        }

        .f-nav-col h5 {
            font-size: 20px;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: #02347D; /* Navy */
            margin: 0 0 30px 0;
            border-bottom: 2px solid #C49A58; /* Gold Underline */
            display: inline-block;
            padding-bottom: 5px;
        }

        .f-nav-links { list-style: none; padding: 0; margin: 0;}
        .f-nav-links li { margin-bottom: 15px; }
        
        .f-nav-links a { 
            text-decoration: none; 
            color: #666666; 
            font-size: 18px; 
            transition: 0.3s ease; 
        }
        
        .f-nav-links a:hover { 
            color: #02347D; /* Navy */
            padding-left: 5px; 
        }

       /* --- BOTTOM BAR --- */
.f-bottom-bar {
    background: #1E2A32; /* Slate Grey */
    padding: 25px 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.6;
}

.f-bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* 1. Ownership text aligns to the left */
.f-copy {
    flex: 1;
    text-align: left;
}

.f-copy strong {
    color: #ffffff;
    font-weight: 600;
}

/* 2. Legal links stay perfectly centered */
.f-legal {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0; /* Gap handled by the separator margin */
}

.f-legal a, .f-dev a {
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s;
}

.f-legal a:hover {
    color: #C49A58;
}

.sep {
    margin: 0 12px;
    color: rgba(255, 255, 255, 0.2);
}

/* 3. Developer credit aligns to the right */
.f-dev {
    flex: 1;
    text-align: right;
}

.f-dev a {
    color: #C49A58; /* Gold Link */
    font-weight: 600;
}

.f-dev a:hover {
    text-decoration: underline;
}

/* --- RESPONSIVE FIX --- */
@media (max-width: 1100px) {
    .f-bottom-flex {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    .f-copy, .f-legal, .f-dev {
        flex: none;
        text-align: center;
        width: 100%;
    }
}
        /* --- RESPONSIVE --- */
        @media (max-width: 1024px) {
            .f-main-container .f-grid-wrapper { flex-direction: column; gap: 60px; }
            .f-nav-section { width: 100%; justify-content: flex-start; gap: 100px; }
            .f-watermark { font-size: 20vw; }
        }

        @media (max-width: 768px) {
            .f-bottom-flex { flex-direction: column; gap: 20px; text-align: center; }
            .f-legal { justify-content: center; }
            .f-contact-grid { flex-direction: column; gap: 30px; }
            .f-nav-section { gap: 50px; }
        }
		
		
		/* ============================================================
   Inner Page Hero Section (Non-Slider)
   Reference: .expert-hero
   ============================================================ */

.inner-hero {
    position: relative;
    height: 60vh; /* Reduced height for inner pages (e.g., 60% of viewport) */
    width: 100%;
    background: #020811; /* Matches Index Dark Background */
    overflow: hidden;
    margin-top: 150px; /* Preserve header offset */
}

/* Layering Logic */
/* We remove the absolute positioning and opacity transitions from .ex-slide */

/* 1. Background Image (Lower Layer) */
.inner-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.inner-img-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.25); /* Slightly darker brightness for greater text contrast */
}

/* 2. The Diagonal Mask (Middle Layer) - Static Implementation */
.inner-mask-layer {
    position: absolute;
    right: 0; 
    top: 0;
    width: 50%; /* Same width */
    height: 100%;
    z-index: 5;
    /* Static Clip-path (the reveal is already done) */
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
    pointer-events: none;
}

/* The "Expert" Diagonal Border (Gold) - Static Implementation */
.inner-mask-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6; /* Sits on top of the image */
    background: #d4af37; /* Matches Index Gold */
    /* Matches Index diagonal angle/thickness */
    clip-path: polygon(29% 0, 21.5% 0, 0.10% 100%, 0% 100%);
    pointer-events: none;
}

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

/* 3. The Text Content (Top Layer) */
.inner-content {
    position: absolute;
    inset: 0;
    z-index: 20; /* Title is on TOP */
    display: flex;
    align-items: center; /* V-align center */
    pointer-events: none;
}

.inner-container { 
    width: 100%; 
    max-width: 1300px; /* Matches Index max-width */
    margin: 0 auto; 
    padding: 0 5%; 
}

.inner-text-block {
    max-width: 650px; /* Matches Index text block width */
    pointer-events: auto;
}

.inner-tag {
    display: block;
    color: #d4af37; /* Gold */
    font-weight: 800;
    letter-spacing: 4px;
    font-size: 11px;
    margin-bottom: 10px; /* Slightly tighter spacing for inner pages */
}

.inner-title {
    /* Slightly smaller clamping than index (index max was 5.5rem) */
    font-size: clamp(2.5rem, 4.5vw, 4.8rem); 
    color: #fff;
    line-height: 1;
    margin-bottom: 20px; /* Slightly tighter spacing */
    text-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.inner-title span { 
    color: #d4af37; /* Gold */
    font-style: italic; 
    font-weight: 400; 
}

.inner-desc {
    color: rgba(255,255,255,0.8);
    font-size: 1.05rem; /* Slightly smaller font for description */
    line-height: 1.6;
    margin-bottom: 30px; /* Slightly tighter spacing */
}

/* Inherit the existing button styles (.btn-main, .btn-outline) */
.inner-cta-wrap { 
    display: flex; 
    gap: 20px; 
}

/* ============================================================
   Inner Page Mobile Response
   ============================================================ */
@media (max-width: 991px) {
    .inner-hero {
        height: 50vh; /* Shorter header on mobile */
    }
    .inner-mask-layer { 
        display: none; /* Hide the diagonal image on mobile, keep text */
    } 
    .inner-content { 
        align-items: center; /* V-align center (was bottom align on index) */
        padding-bottom: 0; 
    }
    .inner-text-block { 
        text-align: center; /* Center-align text */
    }
    .inner-cta-wrap { 
        justify-content: center; /* Center-align buttons */
    }
    .inner-title { 
        font-size: 2.8rem; /* Preserve mobile size */
    }
}



/* === Logo-Matched Amenities Section - UPDATED FOR PREMIUM DARK THEME === */
.amenities-inner-section {
  padding: 40px 20px; /* Increased padding for better breathing room */
  position: relative;
  overflow: hidden;
  text-align: center;
  background-color: #ffffff; /* Keeping main content area clean white */
}

.amenities-inner-wrapper {
  max-width: 1250px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.amenities-inner-title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #020811; /* Matches your header/dark section color */
  letter-spacing: 1px;
  
}

.amenities-inner-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #d4af37; /* Matches your Slider Gold/Bronze */
  margin: 20px auto 45px;
}

.amenities-inner-description {
  font-size: 17px;
  color: #555;
  margin-bottom: 30px;
  max-width: 1200px; /* Narrower for better readability */
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

.amenities-inner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px; /* Increased gap for a more luxury feel */
}

.amenities-inner-card {
  background: #ffffff;
  border-radius: 0px; /* Square edges look more "antique/premium" like your site */
  padding: 50px 30px;
  border: 1px solid #e5e7eb;
  transition: all 0.5s ease;
  text-align: center;
  position: relative;
}

.amenities-inner-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px -12px rgba(2, 8, 17, 0.15);
  border-color: #d4af37; /* Changes to Gold on hover */
}

.amenities-inner-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-bottom: 30px;
  background: transparent;
  border: 1px solid #d4af37; /* Gold thin border */
  transition: all 0.4s ease;
}

.amenities-inner-card:hover .amenities-inner-icon-wrap {
  background: #d4af37; /* Fills with Gold */
  transform: rotate(45deg); /* Subtle modern touch */
}

.amenities-inner-icon-wrap i {
  font-size: 32px;
  color: #d4af37; /* Gold icons */
  transition: all 0.4s ease;
}

.amenities-inner-card:hover .amenities-inner-icon-wrap i {
  color: #ffffff; /* White icons on hover */
  transform: rotate(-45deg); /* Keeps icon straight while box rotates */
}

.amenities-inner-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #020811;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.amenities-inner-text {
  font-size: 15px;
  color: #777;
  line-height: 1.6;
  margin: 0 auto;
}

/* Responsive Tweaks */
@media (max-width: 768px) {
  .amenities-inner-title { font-size: 32px; }
  .amenities-inner-grid { gap: 20px; }
  .amenities-inner-card { padding: 40px 20px; }
}
		
		
/* === Enhanced Full Amenities List - UPDATED FOR PREMIUM THEME === */
.amenities-full-list-section {
  padding: 80px 20px; /* Increased padding for luxury feel */
  text-align: center;
  position: relative;
  z-index: 1;
  background-color: #fcfcfc; /* Very subtle off-white to separate from other sections */
}

.amenities-full-list-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.amenities-full-list-title {
  font-size: 40px;
  color: #020811; /* Matches Deep Navy/Black from Hero */
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.amenities-full-list-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #d4af37; /* Matches Slider Gold */
  margin: 20px auto 45px;
}

.amenities-full-list-description {
  font-size: 17px;
  color: #555;
  margin-bottom: 60px;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

.amenities-full-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  text-align: left;
}

.amenities-full-list-category {
  background: #fff;
  border-radius: 0px; /* Removed rounding to match your property's sharp-edge aesthetic */
  padding: 35px 30px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03); 
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

/* Accent top border on hover (Matches Gold theme) */
.amenities-full-list-category::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: #d4af37; /* Gold hover accent */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.amenities-full-list-category:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(2, 8, 17, 0.1);
  border-color: #d4af37;
}

.amenities-full-list-category:hover::before {
  opacity: 1;
}

.amenities-full-list-category h3 {
  font-size: 20px;
  font-weight: 700;
  color: #020811; /* Deep Navy Headings */
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.amenities-full-list-category ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.amenities-full-list-category ul li {
  font-size: 15px;
  color: #444;
  margin-bottom: 14px;
  padding-left: 30px;
  position: relative;
  line-height: 1.5;
}

/* Custom Checkmark Icon - Gold */
.amenities-full-list-category ul li::before {
  content: "\f00c"; /* Font Awesome check icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  color: #d4af37; /* Metallic Gold Checkmarks */
  font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
  .amenities-full-list-title { font-size: 30px; }
  .amenities-full-list-grid { grid-template-columns: 1fr; }
  .amenities-full-list-section { padding: 50px 15px; }
}


/* === Experience Section - Updated for Friendship Motor Inn Brand === */
.experience-section {
  /* Subtle light gray to keep focus on the gold/navy accents */
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #f8f9fa 100%
  );
  padding: 80px 5%; /* Increased vertical padding */
  position: relative;
}

.experience-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
}

/* Sidebar Text Section */
.experience-title {
  font-size: 52px;
  color: #020811; /* Deep Midnight Navy */
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: 1px;
  
}

.experience-title span {
  color: #d4af37; /* Signature Gold */
  font-style: italic;
  font-weight: 400;
}

.experience-intro {
  font-size: 17px;
  color: #555;
  margin-bottom: 60px;
  max-width: 1220px;
  line-height: 1.8;
}

/* Individual Items */
.exp-item {
  padding: 35px 25px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0px; /* Sharper edges to match your buttons */
}

/* The Numbering Header */
.exp-item::before {
  content: attr(data-index);
  font-family: 'Playfair Display', serif; /* Or your preferred serif font */
  font-style: italic;
  font-size: 14px;
  color: #d4af37; /* Gold */
  display: block;
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.exp-item h3 {
  font-size: 28px;
  margin: 0;
  color: #020811;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 0.3s;
}

.exp-item p {
  color: #666;
  font-size: 15px;
  line-height: 1.7;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s ease;
  opacity: 0;
}

/* Active State - Matches your Site's Luxury Hover feel */
.exp-item.active {
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(2, 8, 17, 0.1);
  border-left: 4px solid #d4af37; /* Added Gold accent bar on the left */
  border-bottom-color: transparent;
}

.exp-item.active p {
  max-height: 250px;
  opacity: 1;
  margin-top: 20px;
}

.exp-item.active h3 {
  color: #d4af37; /* Headline turns Gold when active */
}

.exp-time {
  font-size: 11px;
  text-transform: uppercase;
  color: #d4af37;
  font-weight: 700;
  letter-spacing: 2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

/* Visual Area - Refined Gold Frame */
.experience-visual {
  position: sticky;
  top: 150px; /* Adjusted for your 150px header height */
  height: 600px;
  border-radius: 0px; /* Sharp edges to match the "mask" effect in hero */
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(2, 8, 17, 0.2);
  border: 1px solid #d4af37; /* Thin gold border frame */
}

.img-frame {
  width: 100%;
  height: 100%;
  background: #020811;
}

.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9); /* Subtly darker to match hero images */
  transition: transform 1.2s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.5s ease;
}

.exp-item:hover h3 {
  color: #d4af37;
}

/* Mobile Adjustments */
@media (max-width: 1024px) {
  .experience-title {
    font-size: 34px;
  }
  
  .exp-item.active {
    border-left: none;
    border-top: 3px solid #d4af37; /* Top accent on mobile */
  }
}		


/* === Things To Do Directory - Updated for Friendship Motor Inn Brand === */
.ttd-directory-section {
  /* Subtle, clean background that matches your amenities section */
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #fcfcfc 100%
  );
  padding: 80px 5%;
  border-top: 1px solid #f0f0f0;
}

.directory-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* Header Styling */
.directory-header {
  margin-bottom: 60px;
  text-align: center; /* Center aligned for better visual balance */
}

.directory-title {
  font-size: 42px;
  color: #020811; /* Deep Midnight Navy */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.directory-title span {
  font-weight: 300;
  color: #d4af37; /* Signature Gold */
  font-style: italic;
}

/* Grid Layout */
.directory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}

/* Category Headers with Gold Accents */
.cat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  border-bottom: 1.5px solid #d4af37; /* Refined Gold Border */
  padding-bottom: 12px;
  width: 100%; /* Full width looks more structured for directories */
}

.cat-header i {
  color: #d4af37; /* Gold Icons */
  font-size: 18px;
}

.cat-header h3 {
  font-size: 19px;
  color: #020811; /* Deep Navy */
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0;
  font-weight: 700;
}

/* List Styling */
.directory-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.directory-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #f1f1f1;
  font-size: 15px;
  color: #444;
  transition: all 0.3s ease;
}

/* Elegant Hover State */
.directory-list li:hover {
  color: #d4af37; /* Changes to Gold on hover */
  padding-left: 8px;
  background-color: rgba(212, 175, 55, 0.03); /* Extremely faint gold tint */
}

.directory-list li span {
  font-weight: 500;
}

.directory-list li strong {
  color: #020811; /* Keep distance clear in Navy */
  font-weight: 700;
  font-size: 13px;
  background: #f8f9fa;
  padding: 4px 8px;
  border: 1px solid #eee; /* Makes it look like a little tag */
}

/* Helper Class for Spacing */
.mt-40 {
  margin-top: 60px;
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
  .directory-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .directory-title {
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  .ttd-directory-section {
    padding: 50px 20px;
  }
  .directory-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .directory-header {
    margin-bottom: 40px;
  }
}

/* ============================================================
   LOCATION SECTION - FRIENDSHIP MOTOR INN BRANDED
   ============================================================ */

.location-section-alt {
    padding: 80px 20px;
    /* Clean white-to-gray gradient for a premium feel */
    background: linear-gradient(135deg, #ffffff 0%, #fcfcfc 100%);
}

.location-wrapper-alt {
    max-width: 1250px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    align-items: flex-start;
}

/* --- Left Side Info --- */
.location-info-alt {
    flex: 1;
    min-width: 320px;
}

.location-title {
    font-size: 42px;
    font-weight: 800;
    color: #020811; /* Midnight Navy */
    margin-bottom: 20px;
    line-height: 1.1;
    
    letter-spacing: 1px;
}
.location-title span {
  font-weight: 300;
  color: #d4af37; /* Signature Gold */
  font-style: italic;
}

.location-description {
    font-size: 1rem;
    color: #555555;
    margin-bottom: 35px;
    line-height: 1.8;
}

.location-cards {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.info-card {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 0px; /* Sharp edges to match your property buttons */
    padding: 20px 25px;
    box-shadow: 0 10px 30px rgba(2, 8, 17, 0.05);
    gap: 20px;
    border: 1px solid #f0f0f0;
    transition: all 0.4s ease;
}

.info-card:hover {
    transform: translateX(10px);
    border-color: #d4af37; /* Gold accent on hover */
}

.info-card i {
    font-size: 24px;
    color: #d4af37; /* Metallic Gold Icon */
}

.info-card h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #020811;
}

.info-card p {
    font-size: 1rem;
    color: #333333;
    line-height: 1.5;
    margin: 0;
}

/* --- Right Side Map Area --- */
.location-map-alt {
    flex: 1.3;
    height: 450px;
    position: relative;
    border-radius: 0px; /* Sharp corners like your hero section masks */
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(2, 8, 17, 0.15);
    border: 1px solid #d4af37; /* Thin gold frame */
}

/* --- Dual-Input Floating Form --- */
.route-form-overlay {
    position: absolute;
    bottom: 25px;
    right: 25px;
    background: #1b365d; /* Solid Midnight Navy */
    color: #ffffff;
    padding: 30px;
    border-radius: 0px; /* Sharp edges */
    width: 450px; /* Refined width */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    z-index: 10;
    border-top: 4px solid #d4af37; /* Signature Gold Top Bar */
}

.route-form-overlay h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: #d4af37; /* Metallic Gold */
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.input-group label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: #d4af37;
    margin-bottom: 8px;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.input-group input {
    width: 100%;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0px;
    color: #ffffff;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.input-group input:focus {
    outline: none;
    border-color: #d4af37;
    background: rgba(255, 255, 255, 0.1);
}

.route-line {
    padding-left: 20px;
    color: rgba(212, 175, 55, 0.5); /* Semi-transparent gold */
    margin: 8px 0;
}

.route-form-overlay button {
    width: 100%;
    padding: 16px;
    background: #d4af37; /* Metallic Gold */
    color: #ffffff;
    border: none;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 0px;
    margin-top: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.route-form-overlay button:hover {
    background: #ffffff;
    color: #020811;
    transform: translateY(-3px);
}

/* --- Responsive Adjustments --- */

@media (max-width: 1024px) {
    .location-wrapper-alt { flex-direction: column; }
    .location-map-alt { width: 100%; height: 450px; border-radius: 0; }
    
    .route-form-overlay {
        position: relative;
        bottom: 0;
        right: 0;
        width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .location-title { font-size: 32px; text-align: left; }
    .location-description { text-align: left; }
    
    .input-group input, 
    .route-form-overlay button {
        width: 100%; /* Changed to 100% for better mobile usage */
    }
}
/* === Contact Section - Friendship Motor Inn Updated === */
.contact-section {
  padding: 80px 20px;
  /* Updated to a premium off-white to Deep Midnight Navy gradient */
  background: linear-gradient(180deg, #ffffff 30%, #1b365d 100%);
  text-align: center;
}

.contact-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

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

.contact-title {
  font-size: 42px;
  font-weight: 800;
  color: #020811; /* Midnight Navy */
  margin-bottom: 20px;
  
  letter-spacing: 1px;
}
.contact-title span {
  font-weight: 300;
  color: #d4af37; /* Signature Gold */
  font-style: italic;
}
.contact-description {
  font-size: 17px;
  color: #555; /* Neutral dark gray for the light top section */
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.8;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  align-items: start;
  margin-top: 40px;
}

.contact-card {
  padding: 30px;
  text-align: center;
  /* Refined vertical divider using the Gold accent */
  border-right: 1px solid rgba(212, 175, 55, 0.2); 
  transition: all 0.4s ease;
}

.contact-card:hover {
  transform: translateY(-12px);
}

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

.contact-icon {
  width: 75px;
  height: 75px;
  border-radius: 0px; /* Sharp edges to match your property layout style */
  background: #d4af37; /* Metallic Gold */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  font-size: 26px;
  color: #ffffff; /* White icon on gold */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.contact-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #ffffff; /* White text for the dark bottom section */
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.contact-card p, 
.contact-card p a {
  font-size: 16px;
  color: #e2e8f0; /* Soft light gray for readability on navy background */
  line-height: 1.6;
  text-decoration: none;
  transition: color 0.3s;
}

.contact-card p a:hover {
  color: #d4af37; /* Gold hover effect for links */
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
  .contact-card {
    border-right: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  }
}

@media (max-width: 768px) {
  .contact-section {
    padding: 60px 15px;
  }

  .contact-title {
    font-size: 32px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .contact-card {
    padding-bottom: 40px;
  }

  .contact-card:last-child {
    border-bottom: none;
  }
}

/* 🌐 Sitemap Section - Friendship Motor Inn Branded */
.sitemap-section {
  padding: 80px 20px;
  /* Premium light-to-white gradient to keep the focus on the navy/gold cards */
  background: linear-gradient(180deg, #fcfcfc 0%, #ffffff 100%);
  text-align: center;
  position: relative;
  z-index: 1;
}

.sitemap-container {
  max-width: 1200px;
  margin: 0 auto;
}

.sitemap-title {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 20px;
  color: #020811; /* Midnight Navy */
  letter-spacing: 1px;
  
}
.sitemap-title span {
  font-weight: 300;
  color: #d4af37; /* Signature Gold */
  font-style: italic;
}
.sitemap-subtitle {
  font-size: 17px;
  max-width: 1200px;
  margin: 0 auto 60px;
  color: #555555; /* Neutral dark gray for readability */
  line-height: 1.8;
}

/* Sitemap Grid */
.sitemap-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Block Styling */
.sitemap-block {
  background: #ffffff;
  color: #020811;
  padding: 40px;
  border-radius: 0px; /* Sharp edges for a premium look */
  box-shadow: 0 10px 40px rgba(2, 8, 17, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
  /* Top accent bar in Signature Metallic Gold */
  border-top: 5px solid #d4af37; 
  border: 1px solid #f0f0f0;
}

.sitemap-block:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 50px rgba(2, 8, 17, 0.12);
  border-color: #d4af37;
}

.sitemap-block h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #020811; /* Midnight Navy */
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
 
  letter-spacing: 1.5px;
}

.sitemap-block h2 i {
  color: #d4af37; /* Gold for Heading Icons */
  font-size: 1.1rem;
}

.sitemap-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sitemap-block ul li {
  margin-bottom: 12px;
  border-bottom: 1px solid #f8f9fa;
  padding-bottom: 12px;
}

.sitemap-block ul li:last-child {
  border-bottom: none;
}

.sitemap-block ul li a {
  font-size: 15px;
  text-decoration: none;
  color: #444444;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Hover States */
.sitemap-block ul li a:hover {
  color: #d4af37; /* Changes to Gold on hover */
  padding-left: 8px;
}

.sitemap-block ul li a i {
  color: #d4af37; /* Gold for list arrows */
  font-size: 13px;
}

/* 📱 Responsive Adjustments */
@media (max-width: 1024px) {
  .sitemap-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sitemap-section {
    padding: 60px 15px;
  }
  
  .sitemap-title {
    font-size: 32px;
  }

  .sitemap-links {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .sitemap-block {
    padding: 30px;
  }
}


/* === FAQ Section - Friendship Motor Inn Branded === */
.faq-section {
  padding: 80px 20px;
  /* Premium off-white to Deep Midnight Navy gradient */
  background: linear-gradient(180deg, #ffffff 0%, #203b60 100%);
  color: #fff;
  text-align: center;
}

.faq-container {
  max-width: 1100px;
  margin: 0 auto;
}

.faq-title {
  font-size: 42px;
  font-weight: 800;
  color: #020811; /* Midnight Navy */
  margin-bottom: 15px;
 
  letter-spacing: 1px;
}

.faq-subtitle {
  font-size: 17px;
  color: #555555; /* Neutral gray for readability on light top part */
  max-width: 800px;
  margin: 0 auto 60px;
  line-height: 1.8;
}

.faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  text-align: left;
}

.faq-item {
  background: #ffffff;
  color: #020811;
  padding: 40px;
  border-radius: 0px; /* Sharp edges for a premium look */
  /* Signature Gold side accent */
  border-left: 6px solid #d4af37; 
  box-shadow: 0 10px 40px rgba(2, 8, 17, 0.06);
  transition: all 0.4s ease;
  border-top: 1px solid #f0f0f0;
}

.faq-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
  border-color: #020811; /* Accents turn Navy on hover */
}

.faq-item h2 {
  font-size: 21px;
  font-weight: 700;
  color: #020811; /* Midnight Navy Questions */
  margin-bottom: 18px;
  line-height: 1.4;
  text-transform: none; /* Keeps questions readable and natural */
}

.faq-item p {
  font-size: 16px;
  line-height: 1.8;
  color: #444444;
}

/* Updated Link Styles to Metallic Gold */
.faq-item a {
  color: #d4af37; /* Links in Gold */
  font-weight: 700;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
}

.faq-item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  background: #020811; /* Underline in Navy */
  transition: width 0.3s ease;
}

.faq-item a:hover {
  color: #020811;
}

.faq-item a:hover::after {
  width: 100%;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
  .faq-section {
    padding: 60px 15px;
  }
  
  .faq-title {
    font-size: 32px;
  }
  
  .faq-subtitle {
    font-size: 16px;
    margin-bottom: 40px;
  }
  
  .faq-item {
    padding: 25px;
  }
  
  .faq-item h2 {
    font-size: 19px;
  }
  
  .faq-item p {
    font-size: 15px;
  }
}