/* ===================================
           SAFARI-COMPATIBLE DESIGN SYSTEM
           No color-mix() - Works in Safari 15+
           Generated for General Business
           =================================== */

        :root {
            /* Color Scheme: Rose Business */
            --color-primary: #4c0519;
            --color-accent: #f43f5e;
            --color-text: #ffe4e6;
            --color-background: #1f0208;
            
            /* Pre-calculated color variations for Safari compatibility */
            --color-primary-85-black: #400415;
            --color-primary-70-white: #81505e;
            --color-primary-60-black: #2d030f;
            --color-primary-70-black: #350311;
            --color-accent-80-white: #f6657e;
            --color-accent-70-white: #f7788e;
            --color-text-90-black: #e5cdcf;
            --color-text-70-black: #b29fa1;
            --color-bg-90-white: #351b20;
            --color-bg-95-primary: #210208;
            --color-button-bg-dark: #1b0107;
            
            /* Typography */
            --font-heading: 'Montserrat', serif;
            --font-body: 'Open Sans', sans-serif;
            
            /* Gradients */
            --hero-gradient: linear-gradient(45deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.2) 100%);
        }

        /* FORCE COLOR SCHEME APPLICATION */
        body, body.bg-gray-900 {
            background-color: var(--color-background) !important;
            color: var(--color-text) !important;
            font-family: var(--font-body);
        }

        /* All text elements */
        body * {
            color: inherit;
        }

        /* Header and Navigation */
        header, header.bg-gray-700, .bg-gray-700 {
            background-color: var(--color-primary) !important;
        }

        /* Mobile menu */
        #mobile-menu {
            background-color: var(--color-primary) !important;
        }

        /* Cards and Sections - SAFARI COMPATIBLE */
        .bg-gray-800, .bg-gray-800.p-6, .bg-gray-800.rounded-lg,
        .feature-item, .blog-preview, .form-card, .card {
            /* Fallback for Safari 15 */
            background-color: #400415 !important;
            /* Modern browsers with color-mix support */
            background-color: color-mix(in srgb, var(--color-primary) 85%, black 15%) !important;
            
            /* Border fallback */
            border-color: #81505e !important;
            border-color: color-mix(in srgb, var(--color-primary) 70%, white 30%) !important;
        }

        /* Even darker variant for nested cards */
        .bg-gray-900, .bg-gray-900.rounded-lg {
            /* Fallback for Safari 15 */
            background-color: #2d030f !important;
            /* Modern browsers */
            background-color: color-mix(in srgb, var(--color-primary) 60%, black 40%) !important;
        }

        /* FIXED: Read More Button - Safari Compatible */
        .read-more-btn, 
        .blog-preview a[href*="blog"][href$=".php"]:last-child,
        .blog-preview .read-more {
            /* Gradient fallback for Safari 15 */
            background: var(--color-accent) !important;
            background: linear-gradient(135deg, var(--color-accent), #f6657e) !important;
            
            /* Text color with fallback */
            color: #1b0107 !important;
            color: var(--color-button-bg-dark) !important;
            
            border: 2px solid var(--color-accent) !important;
            font-weight: 600 !important;
            padding: 0.5rem 1rem !important;
            border-radius: 0.375rem !important;
            display: inline-block !important;
            text-decoration: none !important;
            transition: all 0.3s ease !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
            position: relative !important;
            overflow: hidden !important;
        }

        /* Read More Button Hover State - Safari Compatible */
        .read-more-btn:hover,
        .blog-preview a[href*="blog"][href$=".php"]:last-child:hover,
        .blog-preview .read-more:hover {
            /* Fallback gradient */
            background: linear-gradient(135deg, #f7788e, var(--color-accent)) !important;
            transform: translateY(-2px) !important;
            /* Shadow with rgba for compatibility */
            box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
            border-color: #f7788e !important;
        }

        /* Shine effect */
        .read-more-btn::before,
        .blog-preview a[href*="blog"][href$=".php"]:last-child::before,
        .blog-preview .read-more::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.5s;
        }

        .read-more-btn:hover::before,
        .blog-preview a[href*="blog"][href$=".php"]:last-child:hover::before,
        .blog-preview .read-more:hover::before {
            left: 100%;
        }

        /* Other Buttons - Safari Compatible */
        .bg-blue-500:not(.read-more-btn), .btn-primary, button[type="submit"],
        .bg-blue-500:not(:hover):not(.read-more-btn), .btn {
            background-color: var(--color-accent) !important;
            color: var(--color-text) !important;
            /* Fallback border */
            border: 1px solid #f7788e !important;
            border: 1px solid color-mix(in srgb, var(--color-accent) 70%, white 30%) !important;
        }

        .bg-blue-500:hover:not(.read-more-btn), .bg-blue-600:not(.read-more-btn), 
        .hover\:bg-blue-600:hover:not(.read-more-btn),
        .btn:hover, button[type="submit"]:hover {
            /* Fallback */
            background-color: #f6657e !important;
            /* Modern browsers */
            background-color: color-mix(in srgb, var(--color-accent) 80%, white 20%) !important;
            color: var(--color-text) !important;
        }

        /* Secondary buttons - Safari Compatible */
        .bg-gray-600, .bg-gray-500 {
            /* Fallback */
            background-color: #81505e !important;
            /* Modern browsers */
            background-color: color-mix(in srgb, var(--color-primary) 70%, white 30%) !important;
        }

        .bg-gray-600:hover, .bg-gray-500:hover, .hover\:bg-gray-700:hover {
            /* Fallback */
            background-color: #936975 !important;
            /* Modern browsers */
            background-color: color-mix(in srgb, var(--color-primary) 60%, white 40%) !important;
        }

        /* Text Colors - Headings */
        .text-blue-400, .text-blue-300, h1, h2, h3, h4, h5, h6,
        .text-4xl, .text-3xl, .text-2xl, .text-xl {
            color: var(--color-accent) !important;
            font-family: var(--font-heading);
        }

        /* Regular text - Safari Compatible */
        .text-gray-200, .text-gray-300, .text-white, p, li, span:not(.social-icon) {
            /* Fallback */
            color: #e5cdcf !important;
            /* Modern browsers */
            color: color-mix(in srgb, var(--color-text) 90%, black 10%) !important;
        }

        /* Lighter text variants - Safari Compatible */
        .text-gray-400, .text-gray-500, .text-sm {
            /* Fallback */
            color: #b29fa1 !important;
            /* Modern browsers */
            color: color-mix(in srgb, var(--color-text) 70%, black 30%) !important;
        }

        /* Footer - Safari Compatible */
        footer, footer.bg-gray-800 {
            /* Fallback */
            background-color: #350311 !important;
            /* Modern browsers */
            background-color: color-mix(in srgb, var(--color-primary) 70%, black 30%) !important;
        }

        /* Forms and Inputs - Safari Compatible */
        input, textarea, select, .form-control {
            /* Fallback */
            background-color: #351b20 !important;
            border: 1px solid #a5828c !important;
            /* Modern browsers */
            background-color: color-mix(in srgb, var(--color-background) 90%, white 10%) !important;
            border: 1px solid color-mix(in srgb, var(--color-primary) 50%, white 50%) !important;
            color: var(--color-text) !important;
        }

        input:focus, textarea:focus, select:focus, .form-control:focus {
            border-color: var(--color-accent) !important;
            /* Use rgba for outline for better compatibility */
            outline: 2px solid rgba(244, 63, 94, 0.5) !important;
            outline-offset: 2px;
        }

        /* Links - Safari Compatible */
        a:not(.btn):not(.social-icon):not(.read-more-btn):not([href*="blog"][href$=".php"]) {
            color: var(--color-accent) !important;
        }

        a:not(.btn):not(.social-icon):not(.read-more-btn):not([href*="blog"][href$=".php"]):hover {
            /* Fallback */
            color: #f7788e !important;
            /* Modern browsers */
            color: color-mix(in srgb, var(--color-accent) 70%, white 30%) !important;
        }

        /* Social Icons - Safari Compatible */
        .social-icon {
            /* Fallback using rgba */
            color: rgba(255, 228, 230, 0.6) !important;
            /* Modern browsers */
            color: color-mix(in srgb, var(--color-text) 60%, black 40%) !important;
        }

        .social-icon:hover {
            color: var(--color-accent) !important;
        }

        /* Newsletter/Contact section - Safari Compatible */
        #contact, .forms-container {
            /* Fallback */
            background-color: #210208 !important;
            /* Modern browsers */
            background-color: color-mix(in srgb, var(--color-background) 95%, var(--color-primary) 5%) !important;
        }

        /* Mobile banner sections */
        .mobile-banner, .mobile-footer-banner {
            background-color: var(--color-primary) !important;
        }

        /* Parallax Overlays with custom gradient */
        .parallax-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--hero-gradient);
            z-index: 1;
        }

        .parallax-content > * {
            position: relative;
            z-index: 2;
        }

        /* Cookie consent popup */
        #cookieConsent {
            background-color: var(--color-primary) !important;
            color: var(--color-text) !important;
        }

        /* Search forms */
        .expandable-search-form, #expandable-search {
            background-color: var(--color-primary) !important;
        }

        /* Back to top button - Safari Compatible */
        #returnToTopButton {
            background-color: var(--color-accent) !important;
        }

        #returnToTopButton:hover {
            /* Fallback */
            background-color: #f6657e !important;
            /* Modern browsers */
            background-color: color-mix(in srgb, var(--color-accent) 80%, white 20%) !important;
        }

        /* Carousel navigation buttons */
        .carousel-nav {
            background-color: var(--color-primary) !important;
            color: var(--color-text) !important;
        }

        .carousel-nav:hover:not(:disabled) {
            background-color: var(--color-accent) !important;
        }

        /* Card styling variations - Safari Compatible */
        .blog-preview:nth-child(odd) {
            /* Fallback */
            background: #3c0414 !important;
            /* Modern browsers */
            background: color-mix(in srgb, var(--color-primary) 80%, black 20%) !important;
        }

        .blog-preview:nth-child(even) {
            /* Fallback */
            background: #440416 !important;
            /* Modern browsers */
            background: color-mix(in srgb, var(--color-primary) 90%, black 10%) !important;
        }

        /* Button Hover Effects with Theme Colors */
        
.btn:not(.read-more-btn), button:not(.read-more-btn), a.btn:not(.read-more-btn) {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.btn:not(.read-more-btn)::before, button:not(.read-more-btn)::before, a.btn:not(.read-more-btn)::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
    z-index: -1;
}
.btn:hover:not(.read-more-btn)::before, button:hover:not(.read-more-btn)::before, a.btn:hover:not(.read-more-btn)::before {
    left: 100%;
}
.btn:hover:not(.read-more-btn), button:hover:not(.read-more-btn), a.btn:hover:not(.read-more-btn) {
    background-color: var(--color-accent) !important;
}

        /* Card Hover Effects */
        
/* Card tilt effect - applies to features AND blog cards */
.feature-item, .blog-preview, .card {
    transition: transform 0.3s ease;
    transform-style: preserve-3d;
}
.feature-item:hover, .blog-preview:hover, .card:hover {
    transform: perspective(1000px) rotateY(5deg) rotateX(-5deg);
}

        /* Section Dividers */
        
.section-divider {
    height: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z' fill='%231f0208'/%3E%3C/svg%3E");
    background-size: cover;
}

        /* Image Filters */
        
/* Brightness hover effect for all card images */
.feature-image, .blog-preview img, .card img {
    transition: filter 0.3s;
}
.feature-image:hover, .blog-preview:hover img, .card:hover img {
    filter: brightness(1.2);
}

        /* Blog Layout Style */
        
    /* ========================================
       ADAPTIVE BLOG LAYOUT SYSTEM - SAFARI COMPATIBLE
       Intelligently adjusts based on post count
       ======================================== */

    /* Base blog card structure - consistent for all layouts */
    .blog-preview {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        /* Safari fallback - use CSS variable */
        background: var(--color-primary-85-black);
        border-radius: 0.5rem;
    }

    .blog-preview img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        display: block;
    }

    .blog-preview .blog-content {
        padding: 1.5rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .blog-preview h3, .blog-preview h4 {
        margin-bottom: 0.75rem;
        font-size: 1.25rem;
        line-height: 1.4;
        color: var(--color-accent);
        font-family: var(--font-heading);
    }

    .blog-preview p {
        margin-bottom: 1rem;
        flex-grow: 1;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        /* Safari fallback */
        color: var(--color-text-90-black);
    }

    /* Read More button positioning */
    .blog-preview .read-more,
    .blog-preview a[href*="blog"][href$=".php"]:last-child {
        margin-top: auto;
        align-self: flex-start;
    }

    /* Card styling variations - SAFARI COMPATIBLE */
    .blog-preview:nth-child(odd) {
        /* Use pre-calculated variable instead of color-mix */
        background: var(--color-primary-85-black);
        /* Slightly different shade using opacity */
        background: rgba(0, 0, 0, 0.2);
        background-blend-mode: multiply;
    }

    .blog-preview:nth-child(even) {
        /* Use pre-calculated variable */
        background: var(--color-primary-85-black);
        /* Very slight variation */
        background: rgba(0, 0, 0, 0.1);
        background-blend-mode: multiply;
    }

    /* Alternative approach for card variations using filters */
    .blog-preview:nth-child(odd) {
        filter: brightness(0.95);
    }

    .blog-preview:nth-child(even) {
        filter: brightness(1.05);
    }

    /* Hover effects */
    .blog-preview:hover img {
        opacity: 0.9;
    }
    
    /* Adaptive 3-2 Layout: Adjusts intelligently based on post count */
    @media (min-width: 1024px) {
        .blog-preview-section {
            display: grid;
            gap: 2rem;
        }
        
        /* Layout-specific grid arrangements... */
        /* (Rest of the layout CSS remains the same as it doesn't use color-mix) */
        
        /* 5 posts: 3 above, 2 centered below */
        .blog-preview-section:has(.blog-preview:nth-child(5)):not(:has(.blog-preview:nth-child(6))) {
            grid-template-columns: repeat(6, 1fr);
        }
        
        .blog-preview-section:has(.blog-preview:nth-child(5)):not(:has(.blog-preview:nth-child(6))) .blog-preview:nth-child(1) {
            grid-column: 1 / span 2;
        }
        
        .blog-preview-section:has(.blog-preview:nth-child(5)):not(:has(.blog-preview:nth-child(6))) .blog-preview:nth-child(2) {
            grid-column: 3 / span 2;
        }
        
        .blog-preview-section:has(.blog-preview:nth-child(5)):not(:has(.blog-preview:nth-child(6))) .blog-preview:nth-child(3) {
            grid-column: 5 / span 2;
        }
        
        .blog-preview-section:has(.blog-preview:nth-child(5)):not(:has(.blog-preview:nth-child(6))) .blog-preview:nth-child(4) {
            grid-column: 2 / span 2;
        }
        
        .blog-preview-section:has(.blog-preview:nth-child(5)):not(:has(.blog-preview:nth-child(6))) .blog-preview:nth-child(5) {
            grid-column: 4 / span 2;
        }
        
        /* Remaining layout rules are the same... */
        /* 6 posts: 3-3 (two rows of three) */
        .blog-preview-section:has(.blog-preview:nth-child(6)):not(:has(.blog-preview:nth-child(7))) {
            grid-template-columns: repeat(3, 1fr);
        }
        
        /* 7 posts: 3-3-1 (centered last one) */
        .blog-preview-section:has(.blog-preview:nth-child(7)):not(:has(.blog-preview:nth-child(8))) {
            grid-template-columns: repeat(6, 1fr);
        }
        
        .blog-preview-section:has(.blog-preview:nth-child(7)):not(:has(.blog-preview:nth-child(8))) .blog-preview:nth-child(1),
        .blog-preview-section:has(.blog-preview:nth-child(7)):not(:has(.blog-preview:nth-child(8))) .blog-preview:nth-child(2),
        .blog-preview-section:has(.blog-preview:nth-child(7)):not(:has(.blog-preview:nth-child(8))) .blog-preview:nth-child(3) {
            grid-column: span 2;
        }
        
        .blog-preview-section:has(.blog-preview:nth-child(7)):not(:has(.blog-preview:nth-child(8))) .blog-preview:nth-child(4),
        .blog-preview-section:has(.blog-preview:nth-child(7)):not(:has(.blog-preview:nth-child(8))) .blog-preview:nth-child(5),
        .blog-preview-section:has(.blog-preview:nth-child(7)):not(:has(.blog-preview:nth-child(8))) .blog-preview:nth-child(6) {
            grid-column: span 2;
        }
        
        .blog-preview-section:has(.blog-preview:nth-child(7)):not(:has(.blog-preview:nth-child(8))) .blog-preview:nth-child(7) {
            grid-column: 3 / span 2;
        }
        
        /* 8 posts: 3-3-2 (centered last row) */
        .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) {
            grid-template-columns: repeat(6, 1fr);
        }
        
        .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) .blog-preview:nth-child(1),
        .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) .blog-preview:nth-child(2),
        .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) .blog-preview:nth-child(3) {
            grid-column: span 2;
        }
        
        .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) .blog-preview:nth-child(4),
        .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) .blog-preview:nth-child(5),
        .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) .blog-preview:nth-child(6) {
            grid-column: span 2;
        }
        
        .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) .blog-preview:nth-child(7) {
            grid-column: 2 / span 2;
        }
        
        .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) .blog-preview:nth-child(8) {
            grid-column: 4 / span 2;
        }
        
        /* 9+ posts: standard 3-column grid */
        .blog-preview-section:has(.blog-preview:nth-child(9)) {
            grid-template-columns: repeat(3, 1fr);
        }
        
        /* Default for 4 or fewer posts */
        .blog-preview-section:not(:has(.blog-preview:nth-child(5))) {
            grid-template-columns: repeat(2, 1fr);
            max-width: 800px;
            margin: 0 auto;
        }
    }

    /* Tablet layout */
    @media (min-width: 768px) and (max-width: 1023px) {
        .blog-preview-section {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
        }
    }

    /* Mobile layout */
    @media (max-width: 767px) {
        .blog-preview-section {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }
    }
        
        /* Enhanced font size boost for better readability */
        @media (min-width: 1024px) {
            header nav { font-size: 1.1em; }
            .hero h1, #hero h1, .intro-section h1 { font-size: 115%; }
            body { font-size: 16px; }
            nav a { font-size: 1.05em; }
        }

        @media (min-width: 768px) {
            .feature-item, .blog-preview, .card { font-size: 0.95rem; }
            p { font-size: 1rem; line-height: 1.6; }
        }

        /* Ensure proper text decoration handling */
        .blog-preview a, .blog-preview a:hover,
        .next-post a, .next-post a:hover {
            text-decoration: none !important;
        }

        .blog-preview h4:hover {
            /* Use rgba for better compatibility */
            color: var(--color-accent-80-white) !important;
            transition: color 0.3s ease;
        }