/*
Theme Name: TT25 HivePress Child
Template: twentytwentyfive
Version: 1.9.6
Description: Child theme for Twenty Twenty-Five with HivePress support. Pre-renders header blocks before wp_head to ensure block styles load on plugin templates.
*/


/* mobile hero */

@media (max-width: 767px) {
    .hero-top {
        display: flex;
        align-content: center;
        align-items: center;
        text-align: center;
        position: relative;
        top: -60px !important;
    }

    .hero-bottom {
        display: flex;
        align-content: center;
        align-items: center;
        text-align: center;
        position: relative;
        bottom: 0px !important;
    }
}

/* mobile hero */


/* Gold Grid for White Background Sections */
.gold-grid {
    position: relative;
    overflow: hidden;
}

.gold-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(157, 136, 91, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(157, 136, 91, 0.12) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 85% 70% at 50% 50%, black 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 50%, black 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}

.gold-grid > * {
    position: relative;
    z-index: 1;
}

/* Responsive Grid Size */
@media (max-width: 768px) {
    .gold-grid::before {
        background-size: 40px 40px;
    }
}






/* ==========================================
   ULTRA-REALISTIC HERO BACKGROUND
   With Moving Spotlights & Fast Grid Animation
   Perfect for Car Showcases
   ========================================== */

.framer-hero {
    background: 
        linear-gradient(180deg, #0a0a0a 0%, #000000 100%);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* ==========================================
   LAYER 1: Fast Animated Moving Grid
   ========================================== */
.framer-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: 
        linear-gradient(rgba(157, 136, 91, 0.12) 2px, transparent 2px),
        linear-gradient(90deg, rgba(157, 136, 91, 0.12) 2px, transparent 2px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
    /* FAST movement - clearly visible animation */
    animation: gridMoveFast 8s linear infinite;
    /* Perspective effect for depth */
    transform-origin: 50% 0%;
}

/* ==========================================
   LAYER 2: Primary Moving Spotlight
   Ultra bright, radiating center light
   ========================================== */
.framer-hero::after {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    width: 200%;
    height: 150%;
    background: 
        radial-gradient(
            ellipse 600px 500px at 50% 30%,
            rgba(255, 255, 255, 0.35) 0%,
            rgba(250, 250, 250, 0.22) 20%,
            rgba(200, 180, 140, 0.12) 40%,
            rgba(157, 136, 91, 0.06) 60%,
            transparent 80%
        );
    pointer-events: none;
    z-index: 2;
    transform-origin: center top;
    /* Moving spotlight animation */
    animation: spotlightMove 12s ease-in-out infinite;
    mix-blend-mode: screen; /* Additive blending for intense light */
}

/* ==========================================
   LAYER 3: Secondary Spotlight (Diagonal)
   Creates dynamic radiating effect
   ========================================== */
.framer-hero-spotlight {
    content: '';
    position: absolute;
    top: -30%;
    left: 20%;
    width: 180%;
    height: 180%;
    background: 
        radial-gradient(
            ellipse 700px 600px at 40% 35%,
            rgba(255, 255, 255, 0.25) 0%,
            rgba(240, 240, 240, 0.15) 25%,
            rgba(180, 160, 120, 0.08) 50%,
            transparent 75%
        );
    pointer-events: none;
    z-index: 2;
    /* Alternate movement pattern */
    animation: spotlightSweep 15s ease-in-out infinite alternate;
    mix-blend-mode: overlay;
}

/* ==========================================
   LAYER 4: Accent Glow (Bottom-Up)
   Adds depth and dimension
   ========================================== */
.framer-hero-glow {
    content: '';
    position: absolute;
    bottom: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
    height: 100%;
    background: 
        radial-gradient(
            ellipse 800px 500px at 50% 100%,
            rgba(200, 180, 140, 0.15) 0%,
            rgba(157, 136, 91, 0.08) 35%,
            transparent 70%
        );
    pointer-events: none;
    z-index: 1;
    animation: glowPulse 10s ease-in-out infinite;
}

/* ==========================================
   LAYER 5: Vibrant Light Rays
   Creates the "shining down" effect
   ========================================== */
.framer-hero-rays {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 150%;
    background: 
        conic-gradient(
            from 0deg at 50% 0%,
            transparent 0deg,
            rgba(255, 255, 255, 0.08) 85deg,
            rgba(255, 255, 255, 0.15) 90deg,
            rgba(255, 255, 255, 0.08) 95deg,
            transparent 180deg,
            rgba(255, 255, 255, 0.08) 265deg,
            rgba(255, 255, 255, 0.15) 270deg,
            rgba(255, 255, 255, 0.08) 275deg,
            transparent 360deg
        );
    pointer-events: none;
    z-index: 1;
    animation: raysRotate 25s linear infinite;
    opacity: 0.6;
    mix-blend-mode: overlay;
}

/* ==========================================
   ANIMATIONS
   ========================================== */

/* Fast Grid Movement - Clearly Visible */
@keyframes gridMoveFast {
    0% {
        transform: translate(0, 0) perspective(1000px) rotateX(0deg);
    }
    100% {
        transform: translate(50px, 50px) perspective(1000px) rotateX(0deg);
    }
}

/* Primary Spotlight Movement - Smooth Sweep */
@keyframes spotlightMove {
    0%, 100% {
        transform: translate(-50%, 0) scale(1);
        opacity: 1;
    }
    25% {
        transform: translate(-55%, 3%) scale(1.08);
        opacity: 0.95;
    }
    50% {
        transform: translate(-45%, -2%) scale(1.12);
        opacity: 0.9;
    }
    75% {
        transform: translate(-52%, 1%) scale(1.05);
        opacity: 0.93;
    }
}

/* Secondary Spotlight Sweep */
@keyframes spotlightSweep {
    0% {
        transform: translate(-10%, 0) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(10%, -5%) scale(1.15);
        opacity: 1;
    }
    100% {
        transform: translate(-10%, 0) scale(1);
        opacity: 0.8;
    }
}

/* Bottom Glow Pulse */
@keyframes glowPulse {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateX(-50%) scale(1.1);
        opacity: 1;
    }
}

/* Rotating Light Rays */
@keyframes raysRotate {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }
    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}

/* ==========================================
   CONTENT LAYER - Ensure visibility
   ========================================== */
.framer-hero > * {
    position: relative;
    z-index: 10;
}

/* Car Image Enhancement - Ultra Crisp */
.framer-hero .car-image {
    position: relative;
    z-index: 10;
    filter: 
        contrast(1.15)        /* Vibrant contrast */
        brightness(1.05)      /* Slight brightness boost */
        saturate(1.1)         /* Rich colors */
        drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5))  /* Depth */
        drop-shadow(0 0 40px rgba(255, 255, 255, 0.1)); /* Rim lighting */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */
@media (max-width: 768px) {
    .framer-hero::before {
        background-size: 35px 35px;
        animation: gridMoveFastMobile 6s linear infinite;
    }
    
    .framer-hero::after {
        width: 250%;
    }
    
    .framer-hero-spotlight {
        width: 200%;
        height: 200%;
    }
}

@keyframes gridMoveFastMobile {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(35px, 35px);
    }
}

/* ==========================================
   OPTIONAL: Mouse-Following Spotlight
   Add this with JavaScript for interactivity
   ========================================== */
.framer-hero-interactive {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle 400px at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.1) 30%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.framer-hero:hover .framer-hero-interactive {
    opacity: 1;
}












/* Scroll Animation */
h1, h2, .fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

h1.animate-in, h2.animate-in, .fade-up.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Delay Options */
.delay-1 {
    transition-delay: 0.1s !important;
}

.delay-2 {
    transition-delay: 0.2s !important;
}

.delay-3 {
    transition-delay: 0.3s !important;
}

.delay-4 {
    transition-delay: 0.4s !important;
}

.delay-5 {
    transition-delay: 0.5s !important;
}

.delay-6 {
    transition-delay: 0.6s !important;
}

.delay-7 {
    transition-delay: 0.7s !important;
}

.delay-8 {
    transition-delay: 0.8s !important;
}

.delay-9 {
    transition-delay: 0.9s !important;
}

.delay-10 {
    transition-delay: 1s !important;
}

@media (prefers-reduced-motion: reduce) {
    h1, h2, .fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}



/* Button Base Styles */
.btn-primary,
.btn-default {
    display: inline-block;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: none;
    letter-spacing: 0.3px;
}

/* Primary Button - Gold/Brown */
.btn-primary {
    background: linear-gradient(135deg, #9d885b 0%, #8a7750 100%);
    color: #ffffff;
    box-shadow: 
        0 4px 15px rgba(157, 136, 91, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Primary Button Shine Effect */
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 100%);
    transition: left 0.6s ease;
}

.btn-primary:hover::before {
    left: 100%;
}

/* Primary Button Hover */
.btn-primary:hover {
    background: linear-gradient(135deg, #b89f6b 0%, #9d885b 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 8px 30px rgba(157, 136, 91, 0.5),
        0 4px 20px rgba(157, 136, 91, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-primary:active {
    transform: translateY(-1px) scale(1);
    box-shadow: 
        0 4px 15px rgba(157, 136, 91, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Default Button - White Glass */
.btn-default {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Default Button Glow Ring */
.btn-default::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50px;
    padding: 2px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.4), 
        rgba(255, 255, 255, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.btn-default:hover::after {
    opacity: 1;
}

/* Default Button Hover */
.btn-default:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 8px 30px rgba(255, 255, 255, 0.2),
        0 4px 20px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.btn-default:active {
    transform: translateY(-1px) scale(1);
    box-shadow: 
        0 4px 15px rgba(255, 255, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Button on Light Background */
.light-section .btn-default {
    background: rgba(0, 0, 0, 0.05);
    color: #1a1a1a;
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.light-section .btn-default:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
    color: #000000;
}

/* Loading Animation (Optional) */
.btn-primary.loading,
.btn-default.loading {
    pointer-events: none;
    position: relative;
}

.btn-primary.loading::after,
.btn-default.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: button-spin 0.6s linear infinite;
}

@keyframes button-spin {
    to { transform: rotate(360deg); }
}

/* Button Sizes */
.btn-primary.btn-small,
.btn-default.btn-small {
    padding: 10px 24px;
    font-size: 0.9rem;
}

.btn-primary.btn-large,
.btn-default.btn-large {
    padding: 18px 40px;
    font-size: 1.1rem;
}

/* Button Group */
.button-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 768px) {
    .btn-primary,
    .btn-default {
        padding: 12px 28px;
        font-size: 0.95rem;
    }

    .btn-primary.btn-large,
    .btn-default.btn-large {
        padding: 16px 36px;
        font-size: 1rem;
    }

    .button-group {
        gap: 12px;
    }
}


/* H2 Headings - Modern & Elegant */
h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 20px;
    text-align: center;
}

/* Elegant centered accent bar */
h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #9d885b 20%, #c9b589 50%, #9d885b 80%, transparent);
    border-radius: 2px;
}

/* Optional: Add subtle decorative dots */
h2::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: #9d885b;
    border-radius: 50%;
    box-shadow: -30px 0 0 #9d885b, 30px 0 0 #9d885b;
    opacity: 0.6;
}

/* For dark backgrounds */
.dark-section h2,
footer h2,
.site-footer h2 {
    color: #ffffff;
}

.dark-section h2::after,
footer h2::after,
.site-footer h2::after {
    background: linear-gradient(90deg, transparent, #c9b589 20%, #e8d5b7 50%, #c9b589 80%, transparent);
}

.dark-section h2::before,
footer h2::before,
.site-footer h2::before {
    background: #c9b589;
    box-shadow: -30px 0 0 #c9b589, 30px 0 0 #c9b589;
}

/* Responsive */
@media (max-width: 768px) {
    h2 {
        padding-bottom: 18px;
    }
    
    h2::after {
        width: 60px;
    }
    
    h2::before {
        box-shadow: -22px 0 0 #9d885b, 22px 0 0 #9d885b;
    }
}


/* Footer with Dramatic Spotlight Effects */
.framer-footer {
    min-height: 100vh;
    background: 
        radial-gradient(ellipse 800px 600px at 80% 20%, rgba(157, 136, 91, 0.25) 0%, rgba(157, 136, 91, 0.1) 30%, transparent 60%),
        radial-gradient(ellipse 600px 500px at 20% 80%, rgba(157, 136, 91, 0.2) 0%, rgba(157, 136, 91, 0.08) 35%, transparent 65%),
        radial-gradient(ellipse 1000px 800px at 50% 40%, rgba(157, 136, 91, 0.15) 0%, transparent 50%),
        linear-gradient(180deg, #000000 0%, #0a0a0a 50%, #0f0f0f 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    padding-top: 80px;
    overflow: hidden;
}

/* Intense Grid Pattern with Glow */
.framer-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(157, 136, 91, 0.06) 2px, transparent 2px),
        linear-gradient(90deg, rgba(157, 136, 91, 0.06) 2px, transparent 2px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 0%, transparent 100%);
    opacity: 0.6;
    pointer-events: none;
}

/* Top Divider with Intense Glow */
.framer-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(157, 136, 91, 0.4) 15%, 
        rgba(157, 136, 91, 0.8) 50%, 
        rgba(157, 136, 91, 0.4) 85%, 
        transparent 100%);
    box-shadow: 
        0 0 40px rgba(157, 136, 91, 0.8),
        0 0 80px rgba(157, 136, 91, 0.5),
        0 0 120px rgba(157, 136, 91, 0.3);
}

/* Additional Spotlight Layer */
.framer-footer .spotlight-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle 400px at 75% 15%, rgba(201, 181, 137, 0.3) 0%, transparent 50%),
        radial-gradient(circle 500px at 25% 85%, rgba(157, 136, 91, 0.25) 0%, transparent 55%);
    pointer-events: none;
    z-index: 1;
}

/* Content Layer */
.framer-footer > * {
    position: relative;
    z-index: 2;
}

/* Glowing Headings with Stronger Effect */
.framer-footer h2,
.framer-footer h3,
.framer-footer h4 {
    color: #c9b589 !important;
    font-weight: 600;
    margin-bottom: 24px;
    letter-spacing: 1px;
    text-shadow: 
        0 0 30px rgba(157, 136, 91, 0.6),
        0 0 60px rgba(157, 136, 91, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Footer Text */
.framer-footer p {
    color: #d0d0d0;
    line-height: 1.8;
    font-size: 0.95rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* Glowing Links */
.framer-footer a {
    color: #e8e8e8;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.framer-footer a:hover {
    color: #c9b589;
    text-shadow: 
        0 0 20px rgba(157, 136, 91, 0.8),
        0 0 40px rgba(157, 136, 91, 0.5);
    transform: translateX(5px);
}

/* Footer Lists */
.framer-footer ul {
    list-style: none;
    padding-left: 0;
}

.framer-footer ul li {
    margin-bottom: 14px;
    transition: all 0.3s ease;
}

.framer-footer ul li:hover {
    transform: translateX(3px);
}

/* Social Links with Intense Glow */
.framer-footer .wp-block-social-links {
    gap: 15px;
}

.framer-footer .wp-block-social-link {
    background: rgba(157, 136, 91, 0.15) !important;
    border: 1px solid rgba(157, 136, 91, 0.4);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 0 15px rgba(157, 136, 91, 0.2),
        inset 0 0 20px rgba(157, 136, 91, 0.1);
}

.framer-footer .wp-block-social-link:hover {
    background: rgba(157, 136, 91, 0.4) !important;
    border-color: #9d885b;
    transform: translateY(-5px);
    box-shadow: 
        0 0 40px rgba(157, 136, 91, 0.9),
        0 5px 50px rgba(157, 136, 91, 0.6),
        0 10px 80px rgba(157, 136, 91, 0.4),
        inset 0 0 30px rgba(201, 181, 137, 0.3);
}

.framer-footer .wp-block-social-link a {
    color: #c9b589;
}

.framer-footer .wp-block-social-link:hover a {
    color: #ffffff;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

/* Spotlight Effect on Columns */
.framer-footer .wp-block-column {
    padding: 30px;
    border-radius: 16px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.framer-footer .wp-block-column:hover {
    background: radial-gradient(circle at center, rgba(157, 136, 91, 0.12) 0%, rgba(157, 136, 91, 0.04) 50%, transparent 100%);
    box-shadow: 
        inset 0 0 80px rgba(157, 136, 91, 0.15),
        0 0 60px rgba(157, 136, 91, 0.1);
    transform: translateY(-5px);
}

/* Footer Bottom Section with Glow */
.framer-footer .wp-block-group:last-child,
.framer-footer > .wp-block-group:last-child {
    border-top: 1px solid rgba(157, 136, 91, 0.3);
    padding: 30px 0;
    text-align: center;
    margin-top: auto;
    background: radial-gradient(ellipse 100% 200px at center top, rgba(157, 136, 91, 0.08) 0%, transparent 60%);
    box-shadow: 0 -1px 50px rgba(157, 136, 91, 0.2);
}

/* Buttons with Intense Glow */
.framer-footer .wp-block-button__link {
    background: linear-gradient(135deg, rgba(157, 136, 91, 0.25) 0%, rgba(157, 136, 91, 0.15) 100%);
    border: 1px solid rgba(157, 136, 91, 0.5);
    color: #c9b589;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 0 30px rgba(157, 136, 91, 0.2),
        inset 0 0 20px rgba(157, 136, 91, 0.1);
}

.framer-footer .wp-block-button__link:hover {
    background: linear-gradient(135deg, #9d885b 0%, #8a7750 100%);
    color: #ffffff;
    box-shadow: 
        0 0 50px rgba(157, 136, 91, 0.8),
        0 5px 60px rgba(157, 136, 91, 0.6),
        inset 0 0 30px rgba(201, 181, 137, 0.3);
    transform: translateY(-3px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .framer-footer {
        min-height: auto;
        padding: 60px 20px 40px;
        background: 
            radial-gradient(ellipse 600px 500px at 50% 20%, rgba(157, 136, 91, 0.22) 0%, rgba(157, 136, 91, 0.08) 40%, transparent 70%),
            radial-gradient(ellipse 500px 400px at 50% 80%, rgba(157, 136, 91, 0.18) 0%, transparent 60%),
            linear-gradient(180deg, #000000 0%, #0a0a0a 50%, #0f0f0f 100%);
    }

    .framer-footer::before {
        background-size: 40px 40px;
    }
}

@media (max-width: 480px) {
    .framer-footer h2,
    .framer-footer h3 {
        font-size: 1.2rem;
    }

    .framer-footer p {
        font-size: 0.9rem;
    }

    .framer-footer .wp-block-column {
        padding: 20px;
    }
}

/* Header - Clean Glass Effect */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease;
   
    border-bottom: 1px solid transparent;
    padding: 16px 0;
}

/* Scrolled State - Compact */
header.scrolled {
    padding: 10px 0;
    background: rgba(10, 10, 10, 0.65);
    backdrop-filter: blur(50px) saturate(200%);
    -webkit-backdrop-filter: blur(50px) saturate(200%);
    border-bottom: 1px solid rgba(157, 136, 91, 0.25);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* Logo */
header .logo,
header .site-logo,
header .site-title {
    transition: all 0.3s ease;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
}

header.scrolled .logo,
header.scrolled .site-logo,
header.scrolled .site-title {
    font-size: 1.25rem;
}

/* Navigation Links */
header nav a,
header .menu a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 8px 16px;
    transition: all 0.2s ease;
}

header nav a:hover,
header .menu a:hover {
    color: #9d885b;
}

/* CTA Button */
header .wp-block-button__link,
header .cta-button,
header .button {
    background: rgba(157, 136, 91, 0.2);
    border: 1px solid rgba(157, 136, 91, 0.4);
    color: #c9b589;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

header .wp-block-button__link:hover,
header .cta-button:hover,
header .button:hover {
    background: #9d885b;
    color: #ffffff;
    border-color: #9d885b;
    transform: translateY(-1px);
}

/* Mobile Menu Fixes */
@media (max-width: 768px) {
    header {
        padding: 12px 0;
    }

    header.scrolled {
        padding: 8px 0;
    }

    /* Allow header to expand when menu is open */
    header.menu-open,
    header.is-menu-open,
    header:has(.menu-toggle[aria-expanded="true"]) {
        height: auto;
        min-height: 100vh;
        background: rgba(10, 10, 10, 0.95);
        backdrop-filter: blur(50px) saturate(200%);
        -webkit-backdrop-filter: blur(50px) saturate(200%);
    }
	.wp-block-navigation__responsive-container {
		height:100vh;
	}

    /* Mobile Navigation Container */
    header nav,
    header .navigation-menu,
    header .menu-wrapper {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Mobile Menu Items */
    header nav ul,
    header .menu {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 20px 0;
    }

    header nav li,
    header .menu li {
        width: 100%;
        text-align: center;
        margin: 8px 0;
    }

    header nav a,
    header .menu a {
        display: block;
        width: 100%;
        padding: 12px 20px;
        font-size: 1.1rem;
    }
}

/* Only push the INNER CONTENT down, not the background */
.hero-section .wp-block-cover__inner-container,
.wp-block-cover__inner-container {
    padding-top: 50px !important; /* Adjust to your header height */
}