/* --- Google Font Import (Good practice, though also linked in HTML) --- */
    @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Raleway:wght@400;500;700&display=swap');

    /* --- CSS Variables --- */
    :root {
    --mehrab-accent: #7ec2f2; /* Muted Gold/Champagne */
    --mehrab-dark-bg: #000000;
    --mehrab-light-text: #FFFFFF;
    --mehrab-secondary-text: rgba(255, 255, 255, 0.8); /* Slightly muted white */
    --mehrab-input-bg: #1a1a1a;
    --mehrab-input-border: #444444;
    --mehrab-footer-text: rgba(255, 255, 255, 0.6);
    --nav-height-desktop: 80px; /* Control navbar height */
    --nav-height-mobile: 70px;
    }

    /* --- Base Styles --- */
    body {
        
        background-color: var(--mehrab-dark-bg);
        color: var(--mehrab-light-text);
        font-family: 'Raleway', sans-serif;
        font-weight: 400;
        line-height: 1.7;
        overflow-x: hidden; /* Prevent horizontal scroll */
        padding-top: var(--nav-height-desktop);
    }
    
        

    h1, h2, h3, h4, h5, h6, .navbar-brand, .display-4 {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 600; /* Default heading weight */
        color: var(--mehrab-light-text);
        line-height: 1.3; /* Adjust line-height for headings */
    }

    h2 {
        font-size: 2.8rem; /* Slightly larger main section headings */
    }
    h3 {
        font-size: 1.75rem;
    }
    h4 {
        font-size: 1.3rem;
        font-weight: 600;
    }

    p {
        color: var(--mehrab-secondary-text);
        margin-bottom: 1rem;
    }

    p.lead {
        font-weight: 400;
        font-size: 1.15rem; /* Slightly larger lead text */
    }

    a {
        color: var(--mehrab-accent);
        text-decoration: none;
        transition: color 0.3s ease;
    }

    a:hover {
        color: var(--mehrab-light-text);
        /* text-decoration: underline; Let's remove default underline for cleaner look */
    }

    .mehrab-accent {
        color: var(--mehrab-accent)
    }

    .text-muted {
        color: var(--mehrab-accent) !important;
    }

    /* --- Button Styles --- */
    .btn {
        padding: 0.8rem 1.8rem;
        font-family: 'Raleway', sans-serif;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border-radius: 2px; /* Sharp edges for premium feel */
        transition: all 0.3s ease;
        border-width: 1px;
        box-shadow: none; /* Remove default bootstrap shadow */
    }
    .btn:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--mehrab-accent), 0.3); /* Custom focus ring */
    }


    /* --- Fancy Button Style --- */
    .btn-vpreme-primary {
        background-color: transparent; /* Start transparent */
        color: var(--mehrab-light-text);
        border: 2px solid var(--mehrab-light-text); /* Use white border initially */
        padding: 0.9rem 2.2rem; /* Slightly larger padding */
        font-family: 'Raleway', sans-serif;
        font-weight: 600; /* Bolder */
        text-transform: uppercase;
        letter-spacing: 1.5px; /* More spacing */
        border-radius: 50px; /* Pill shape */
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth transition */
        position: relative; /* For pseudo-elements */
        overflow: hidden; /* Contain effects */
        z-index: 1; /* Ensure text is above background fill */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    }

    .btn-vpreme-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%; /* Start off-screen to the left */
        width: 100%;
        height: 100%;
        background-color: var(--mehrab-light-text); /* White background for hover */
        transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        z-index: -1; /* Behind the text */
        border-radius: 50px; /* Match button shape */
    }

    .btn-vpreme-primary:hover::before,
    .btn-vpreme-primary:focus::before {
        left: 0; /* Slide in from the left */
    }

    .btn-vpreme-primary:hover,
    .btn-vpreme-primary:focus {
        color: var(--mehrab-dark-bg); /* Text becomes black on hover */
        border-color: var(--mehrab-light-text); /* Keep border color consistent */
        box-shadow: 0 6px 15px rgba(255, 255, 255, 0.2); /* Enhance shadow on hover */
        /* outline: none; Bootstrap might add outline, remove if necessary */
    }

    /* Ensure button text stays above the sliding background */
    .btn-vpreme-primary span {
        position: relative;
        z-index: 2;
    }

    /* Remove default focus outline if Bootstrap adds one */
    .btn-vpreme-primary:focus {
        box-shadow: 0 6px 15px rgba(255, 255, 255, 0.2); /* Maintain hover shadow */
    }

    .btn-vpreme-secondary {
        background-color: transparent;
        color: var(--mehrab-light-text);
        border-color: var(--mehrab-light-text);
    }
    .btn-vpreme-secondary:hover,
    .btn-vpreme-secondary:focus {
        background-color: var(--mehrab-light-text);
        color: var(--mehrab-dark-bg);
        border-color: var(--mehrab-light-text);
    }
    .btn-vpreme-secondary svg { /* Style the icon inside the button */
        fill: currentColor; /* Make icon inherit button text color */
        transition: fill 0.3s ease;
    }

    /*----------------*/

    



    body.overlay-open {
        overflow: hidden; /* Prevent body scroll when overlay is open */
    }
    
    #vpreme-command-nav {
        background-color: rgba(10, 10, 10, 0.7);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        padding: 0; /* Padding will be on .nav-main-bar */
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        
        z-index: 1050; /* High z-index */
        height: var(--nav-height-mobile);
    }
    @media (min-width: 992px) {
        #vpreme-command-nav {
            height: var(--nav-height-desktop);
        }
    }
    
    #vpreme-command-nav.nav-scrolled {
        background-color: rgba(0, 0, 0, 0.85);
        box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    }
    
    .nav-main-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }
    
    /* Reusing .nav-brand and .nav-brand-logo from previous styles if they fit, or redefine */
    .nav-brand { /* Assuming these are similar to your previous .nav-brand */
        font-family: 'Cormorant Garamond', serif;
        font-weight: 700;
        font-size: 1.7rem;
        color: var(--mehrab-light-text);
        text-decoration: none;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
    }
    .nav-brand:hover { color: var(--mehrab-accent); }
    .nav-brand-logo {
        width: 38px; height: 38px; margin-right: 0.5rem;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .nav-brand:hover .nav-brand-logo { transform: rotate(15deg) scale(1.05); }
    
    
    .nav-desktop-links {
        display: none; /* Shown on desktop only */
    }
    @media (min-width: 992px) {
        .nav-desktop-links {
            display: flex;
            align-items: center;
        }
        .nav-desktop-links .nav-link,
        .nav-desktop-links .nav-link-dropdown-toggle-desktop {
            font-family: 'Raleway', sans-serif;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.9px;
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            margin-left: 1.8rem; /* Spacing between links */
            padding: 0.3rem 0.1rem;
            position: relative;
            transition: color 0.3s ease;
        }
        .nav-desktop-links .nav-link::after,
        .nav-desktop-links .nav-link-dropdown-toggle-desktop::after {
            content: ''; position: absolute; bottom: -3px; left: 0;
            width: 0; height: 2px; background-color: var(--mehrab-accent);
            transition: width 0.3s ease;
        }
        .nav-desktop-links .nav-link:hover,
        .nav-desktop-links .nav-link.active,
        .nav-desktop-links .nav-link-dropdown-toggle-desktop:hover,
        .nav-desktop-links .nav-desktop-item-dropdown:hover > .nav-link-dropdown-toggle-desktop, /* Keep parent active on child hover */
        .nav-desktop-links .nav-link-dropdown-toggle-desktop.active {
            color: var(--mehrab-light-text);
        }
        .nav-desktop-links .nav-link:hover::after,
        .nav-desktop-links .nav-link.active::after,
        .nav-desktop-links .nav-link-dropdown-toggle-desktop:hover::after,
        .nav-desktop-links .nav-desktop-item-dropdown:hover > .nav-link-dropdown-toggle-desktop::after,
        .nav-desktop-links .nav-link-dropdown-toggle-desktop.active::after {
            width: 100%;
        }

        .dropdown-arrow-desktop {
            font-size: 0.7em;
            margin-left: 0.3em;
            transition: transform 0.3s ease;
            display: inline-block;
        }
    
        /*  sktop Dropdown Container */
        .nav-desktop-item-dropdown {
            position: relative; /* For absolute positioning of its dropdown-content */
            
        }
        /* Make the first item not have margin-left if it's a dropdown */
        .nav-desktop-links > .nav-desktop-item-dropdown:first-child {
            margin-left: 0;
        }
         .nav-desktop-links > li:first-child + .nav-desktop-item-dropdown, /* If dropdown is after a normal li */
         .nav-desktop-links > .nav-link:first-child + .nav-desktop-item-dropdown {
            margin-left: 1.8rem;
         }
    
    
        .nav-desktop-item-dropdown:hover .dropdown-arrow-desktop {
            transform: rotate(180deg);
        }
    
        /* Desktop Dropdown Content Styling */
        .dropdown-content-desktop {
            display: none; /* Hidden by default */
            position: absolute;
            top: 100%; /* Position below the parent link */
            left: 50%;
            transform: translateX(-50%) translateY(15px); /* Start slightly down for animation */
            min-width: 220px; /* Adjust as needed */
            background-color: rgba(20, 20, 20, 0.97); /* Dark, slightly transparent */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(192, 178, 131, 0.15);
            border-top: 3px solid var(--mehrab-accent); /* Thicker accent top border */
            border-radius: 0 0 8px 8px; /* Softer rounded bottom corners */
            box-shadow: 0 10px 30px rgba(0,0,0,0.35);
            list-style: none;
            padding: 0.6rem 0; /* Vertical padding for the dropdown box */
            margin: 0; /* Reset margin */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
            z-index: 1100; /* Ensure it's above other nav items but below overlay if open */
        }
    
        .nav-desktop-item-dropdown:hover > .dropdown-content-desktop { /* Show on hover of parent div */
            display: block;
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(5px); /* Slide into place */
            transition-delay: 0s, 0s, 0s; /* Ensure visibility transition is immediate on show */
        }
    
        .dropdown-content-desktop li a {
            display: block;
            padding: 0.7rem 1.5rem; /* Padding for dropdown items */
            font-family: 'Raleway', sans-serif;
            font-size: 0.85rem; /* Slightly smaller than main nav links */
            color: rgba(255, 255, 255, 0.75);
            text-decoration: none;
            text-transform: none; /* Usually no uppercase for sub-items */
            letter-spacing: 0.3px;
            transition: background-color 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
            white-space: nowrap;
        }
    
        .dropdown-content-desktop li a:hover,
        .dropdown-content-desktop li a.active-dropdown-item { /* For active state */
            background-color: var(--mehrab-accent);
            color: var(--mehrab-dark-bg);
            padding-left: 1.8rem; /* Indent on hover/active */
        }


    }




    .active-dropdown-item {
        color: var(--mehrab-accent) !important;
        font-weight: 600;
    }
    .dropdown-content-desktop li a.active-dropdown-item { /* Specific for desktop if needed */
         background-color: rgba(192, 178, 131, 0.1) !important; /* Subtle active bg */
    }
    






    
    .nav-actions {
        display: flex;
        align-items: center;
    }
    .btn-nav-cta-main { /* Main CTA on nav bar */
        background-color: var(--mehrab-accent);
        color: var(--mehrab-dark-bg);
        border: 1px solid var(--mehrab-accent);
        padding: 0.5rem 1.2rem;
        font-family: 'Raleway', sans-serif;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.75rem;
        border-radius: 50px;
        text-decoration: none;
        transition: all 0.3s ease;
        margin-right: 0.8rem; /* Space before menu trigger */
        display: none; /* Hidden on mobile initially */
    }
    @media (min-width: 768px) { /* Show CTA on medium screens and up */
        .btn-nav-cta-main { display: inline-block; }
    }
    .btn-nav-cta-main:hover {
        background-color: #368fbf; border-color: #368fbf;
        transform: translateY(-2px); box-shadow: 0 4px 10px rgba(192,178,131,0.2);
    }
    
    .nav-menu-trigger {
        background: none;
        border: none;
        color: var(--mehrab-light-text);
        padding: 0.5rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        transition: color 0.3s ease;
    }
    .nav-menu-trigger:hover {
        color: var(--mehrab-accent);
    }
    .menu-trigger-icon {
        width: 26px;
        height: 20px; /* Height to contain lines */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }
    .menu-trigger-line {
        display: block;
        width: 100%;
        height: 2.5px; /* Thickness of lines */
        background-color: currentColor;
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .nav-menu-trigger.open .menu-trigger-line:nth-child(1) {
        transform: translateY(8.75px) rotate(45deg);
    }
    .nav-menu-trigger.open .menu-trigger-line:nth-child(2) {
        opacity: 0;
    }
    .nav-menu-trigger.open .menu-trigger-line:nth-child(3) {
        transform: translateY(-8.75px) rotate(-45deg);
    }
    .menu-trigger-text {
        margin-left: 0.6rem;
        font-family: 'Raleway', sans-serif;
        font-weight: 500;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    
    /* Fullscreen Menu Overlay */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* Use vh for full viewport height */
        background-color: rgba(10, 10, 10, 0.95); /* Darker, slightly more opaque */
        backdrop-filter: blur(20px); /* Stronger blur */
        -webkit-backdrop-filter: blur(20px);
        z-index: 1045; /* Just below the main navbar's trigger when it's open */
        opacity: 0;
        visibility: hidden;
        transform: scale(1.05) translateY(-20px); /* Start slightly scaled up and offset for a nice entry */
        transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                    visibility 0s linear 0.4s, /* Delay visibility until end of opacity animation */
                    transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        display: flex;
        flex-direction: column;
        overflow-y: auto; /* Allow scrolling if content overflows */
    }
    .menu-overlay.open {
        opacity: 1;
        visibility: visible;
        transform: scale(1) translateY(0);
        transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                    visibility 0s linear 0s,
                    transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    
    .menu-overlay-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem; /* Match nav bar padding */
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        position: fixed; /* Keep header fixed within overlay */
        top:0; left:0;
        background-color: rgba(10,10,10,0.7); /* Match nav bar initial */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        height: var(--nav-height-mobile); /* Match mobile nav height */
    }
    @media (min-width: 992px) {
        .menu-overlay-header {
            height: var(--nav-height-desktop); /* Match desktop nav height */
        }
    }
    
    .nav-brand-overlay { /* Similar to .nav-brand */
        font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.7rem;
        color: var(--mehrab-light-text); text-decoration: none; letter-spacing: 1px;
        display: flex; align-items: center;
    }
    .menu-overlay-close {
        background: none; border: none;
        color: var(--mehrab-light-text);
        font-size: 1.8rem; /* Adjust size */
        padding: 0.5rem;
        cursor: pointer;
        transition: color 0.3s ease, transform 0.3s ease;
    }
    .menu-overlay-close:hover {
        color: var(--mehrab-accent);
        transform: rotate(90deg);
    }
    
    .menu-overlay-content {
        padding-top: calc(var(--nav-height-mobile) + 3rem); /* Space for fixed header + extra */
        padding-bottom: 3rem; /* Space before footer */
        flex-grow: 1; /* Allow content to take available space */
        width: 100%;
    }
    @media (min-width: 992px) {
        .menu-overlay-content {
            padding-top: calc(var(--nav-height-desktop) + 4rem);
        }
    }
    
    
    .menu-overlay-main-links .overlay-links-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .menu-overlay-main-links .overlay-links-list > li > a:not(.overlay-dropdown-toggle) {
        display: block;
        font-family: 'Cormorant Garamond', serif;
        font-size: 2.5rem; /* Large, statement links */
        font-weight: 600;
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        padding: 0.5rem 0;
        margin-bottom: 0.5rem;
        transition: color 0.3s ease, letter-spacing 0.3s ease;
        position: relative;
        overflow: hidden; /* For data-text effect */
    }
    
    /* Fancy hover effect with data-text */
    .menu-overlay-main-links .overlay-links-list > li > a::before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        color: var(--mehrab-accent);
        white-space: nowrap;
        overflow: hidden;
        width: 0;
        transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    .menu-overlay-main-links .overlay-links-list > li > a:hover {
        color: var(--mehrab-light-text);
        letter-spacing: 1px; /* Slight expansion on hover */
    }
    .menu-overlay-main-links .overlay-links-list > li > a:hover::before {
        width: 100%;
    }
    
    
    .overlay-link-dropdown .overlay-dropdown-toggle {
        font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; font-weight: 600;
        color: rgba(255, 255, 255, 0.8); text-decoration: none;
        padding: 0.5rem 0; margin-bottom: 0.5rem; display: flex; align-items: center;
        cursor: pointer; transition: color 0.3s ease;
    }
    .overlay-link-dropdown .overlay-dropdown-toggle:hover { color: var(--mehrab-light-text); }
    .overlay-link-dropdown .overlay-dropdown-toggle i {
        font-size: 0.6em; margin-left: 0.5em; transition: transform 0.3s ease;
    }
    .overlay-link-dropdown.open .overlay-dropdown-toggle i {
        transform: rotate(180deg);
    }
    
    .overlay-dropdown-content {
        list-style: none; padding-left: 1.5rem; margin: 0 0 1rem 0;
        max-height: 0; overflow: hidden;
        transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    }
    .overlay-link-dropdown.open > .overlay-dropdown-content {
        padding-top: 0.5rem; padding-bottom: 0.2rem;
        /* max-height will be set by JS */
    }
    .overlay-dropdown-content li a {
        display: block; font-family: 'Raleway', sans-serif; font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.7); text-decoration: none; padding: 0.4rem 0;
        transition: color 0.3s ease, padding-left 0.3s ease;
    }
    .overlay-dropdown-content li a:hover {
        color: var(--mehrab-accent);
        padding-left: 0.5rem;
    }
    
    .menu-overlay-secondary-content {
        padding-left: 2rem; /* Space from main links on desktop */
        border-left: 1px solid rgba(255,255,255,0.1);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .menu-overlay-secondary-content h4 {
        font-family: 'Cormorant Garamond', serif; font-weight: 600;
        color: var(--mehrab-light-text); margin-bottom: 0.75rem;
    }
    .menu-overlay-secondary-content .btn.overlay-cta { /* Inherit .btn-vpreme-primary styles */
        padding: 0.8rem 2rem; font-size: 0.9rem;
    }
    
    .menu-overlay-footer {
        padding: 1.5rem 1rem;
        border-top: 1px solid rgba(255,255,255,0.1);
        width: 100%;
        margin-top: auto; /* Pushes footer to bottom of flex container */
    }
    .menu-overlay-footer .small { font-size: 0.8rem; }
    
    /* Adjust body padding for fixed nav when overlay is NOT open */
    /*body:not(.overlay-open) {*/
    /*    padding-top: var(--nav-height-mobile);*/
    /*}*/
    /*@media (min-width: 992px) {*/
    /*    body:not(.overlay-open) {*/
    /*        padding-top: var(--nav-height-desktop);*/
    /*    }*/
    /*}*/
    
    /* Responsive adjustments for the overlay menu itself */
    @media (max-width: 991.98px) {
        .menu-overlay-main-links .overlay-links-list > li > a:not(.overlay-dropdown-toggle),
        .overlay-link-dropdown .overlay-dropdown-toggle {
            font-size: 1.8rem; /* Smaller main links for mobile */
        }
        .overlay-dropdown-content li a { font-size: 1rem; }
        .menu-overlay-content {
            padding-left: 1rem; padding-right: 1rem;
        }
    }









    /* --- Section Padding --- */
    section {
        padding-top: 6rem; /* Increased padding */
        padding-bottom: 6rem;
    }

    /* --- Add to Base Styles or relevant section --- */
    .fw-bold {
        font-weight: 700 !important; /* Ensure Bootstrap override if needed */
    }

    /* --- Hero Section --- */
    #hero {
        min-height: calc(100vh - 100px);
        padding: 0; /* Remove padding if using vh-100 and flex align */
        color: var(--mehrab-light-text);
        /* Background Image - Replace with your chosen Unsplash image URL */
        /* Example using abstract lights/tech feel */
        
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        position: relative; /* Needed for the overlay */
        overflow: hidden; /* Ensure overlay fits */
    }
    
        @media (max-width: 991.98px) {
            #hero {
                min-height: calc(100vh - 100px);
            }
        }

    /* Gradient Overlay */
    #hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* Darker gradient, adjust angle and opacity as needed */
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.70) 100%);
        /* background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.85) 70%, rgba(0,0,0,0.95) 100%);  */
        z-index: 1; /* Below the content */
    }

    /* Ensure content is above overlay */
    #hero .hero-content {
        position: relative;
        z-index: 2;
    }

    /* #hero h1 {
        font-size: calc(3rem + 2.5vw); 
        font-weight: 700; 
        letter-spacing: 2px; 
        margin-bottom: 0.5rem; 
        color: var(--mehrab-accent);
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); 
    } */



    #hero h1.brand-animate {
        /* Keep existing h1 styles: font-size, font-weight, letter-spacing, color, text-shadow */
        font-size: calc(3rem + 2.5vw);
        font-weight: 700;
        letter-spacing: 2px;
        margin-bottom: 0.5rem;
        color: var(--mehrab-dark-bg);
        /* text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); */
        text-transform: uppercase; 
        opacity: 1;
        /* overflow: hidden; Optional: if transforms cause temporary overflow */

        
        
    }
    
    /* Style for individual letter spans */
    #hero h1.brand-animate span.letter {
        display: inline-block; /* Crucial for transforms and transitions */
        opacity: 0; /* Start invisible */
        transform: translateY(40px) scale(0.8); /* Start slightly down and smaller */
        /* transform: rotateX(-90deg); */ /* Alternative: 3D flip */
        transition: opacity 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000), /* EaseOutCubic */
                    transform 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
        /* Prevent letters from breaking lines unexpectedly sometimes */
        transition-delay: .85s;
        white-space: nowrap;

        background: linear-gradient(135deg, rgb(255 255 255) 0%, rgb(255 255 255) 50%, rgb(0 0 0) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        
        /* Subtle animated text shadow */
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5),
                    0 0 20px rgba(255, 255, 255, 0.1);
    }
    
    /* Style for the visible/animated state of letters */
    #hero h1.brand-animate span.letter.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        /* transform: rotateX(0deg); */ /* Alternative: 3D flip */
    }











    #hero .lead-hero { /* Custom class for the tagline */
        font-family: 'Cormorant Garamond', serif; /* Use elegant font */
        font-size: calc(1.5rem + 1vw); /* Responsive font size */
        font-weight: 400; /* Lighter weight */
        color: var(--mehrab-secondary-text);
        margin-bottom: 2.5rem;
        text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
    }

    #hero .lead { /* Description */
        font-size: 1.15rem;
        margin-bottom: 3.5rem;
        color: var(--mehrab-secondary-text);
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    }



    /* --- Responsive Adjustments for Hero --- */
    @media (max-width: 767.98px) {
        /* #hero h1 {
            font-size: calc(2.5rem + 3vw);
            letter-spacing: 1px;
        } */

        #hero h1.brand-animate {
            font-size: calc(2.5rem + 3vw);
            letter-spacing: 1px;
        }

        #hero .lead-hero {
            font-size: calc(1.2rem + 1.5vw);
            margin-bottom: 2rem;
        }
        #hero .lead {
            font-size: 1rem;
            margin-bottom: 3rem;
            max-width: 90%; /* Allow wider text on smaller screens */
        }
        .btn-vpreme-primary {
            padding: 0.8rem 1.8rem;
            font-size: 0.9rem;
        }
    }


    /* --- Separators --- */
    /* Simple Gradient Line */
    .section-separator {
        height: 1px;
        width: 100%;
        background: linear-gradient(90deg, transparent, var(--mehrab-accent), transparent);
        border: none;
        margin-top: 0; /* Adjust spacing relative to sections */
        margin-bottom: 0;
        opacity: 0.4; /* More subtle */
    }
    /* Give sections padding instead of separator margin */


    /* --- Benefits Section --- */

    /* --- Benefits Section --- */
    #benefits {
        padding-top: 7rem; /* More vertical padding */
        padding-bottom: 8rem;
        /* background: linear-gradient(180deg, #050505 0%, #000000 100%); /* Subtle gradient background */
        background-color: var(--mehrab-dark-bg); /* Or stick to solid black */
        position: relative; /* Crucial for pseudo-elements/glows */
        overflow: hidden; /* Contain glows */
    }

    #benefits h2 {
        margin-bottom: 1rem; /* Adjust spacing */
        font-weight: 700; /* Bolder section title */
    }
    #benefits .lead {
        color: var(--mehrab-secondary-text);
        margin-bottom: 5rem !important; /* More space before cards */
    }

    .benefit-card {
        background-color: rgba(255, 255, 255, 0.02); /* Very subtle background */
        border: 1px solid var(--mehrab-input-border);
        padding: 1.5rem 1rem;
        height: 100%;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Smooth transition */
        border-radius: 6px; /* Slightly softer radius */
        text-align: left;
        position: relative; /* Needed for potential future pseudo-elements */
        z-index: 1; /* Ensure cards are above section glows */
        overflow: hidden; /* For potential internal effects */
        border-image: linear-gradient(to top right, var(--mehrab-input-border), var(--mehrab-input-border)) 1; /* Base border */
    }

    .benefit-icon {
        font-size: 2.5rem; /* Larger icons */
        color: var(--mehrab-accent); /* Use accent color */
        margin-bottom: 1.5rem !important; /* More space below icon */
        display: block; /* Ensure margin works */
        line-height: 1;
    }

    .benefit-card h4 {
        color: var(--mehrab-light-text); /* White heading */
        margin-bottom: 0.75rem !important;
        font-weight: 600;
        font-size: 1.4rem;
        position: relative;
        display: inline-block; /* Contain the underline */
    }

    /* Subtle underline effect for heading */
    .benefit-card h4::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 40px; /* Short underline */
        height: 2px;
        background-color: var(--mehrab-accent);
        opacity: 0.7;
        transition: width 0.4s ease;
    }


    .benefit-card p {
        color: var(--mehrab-secondary-text);
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 0.5rem; /* Adjust spacing */
    }

    .benefit-card p.sub-text {
        color: rgba(255, 255, 255, 0.6); /* More muted sub-text */
        font-size: 0.85rem;
        line-height: 1.5;
        margin-top: 1rem; /* Space above sub-text */
    }


    .benefit-card:hover {
        border-color: transparent; /* Hide base border */
        /* Fancy gradient border on hover */
        border-image: linear-gradient(to top right, var(--mehrab-accent), rgba(192, 178, 131, 0.4)) 1;
        transform: translateY(-10px) scale(1.02); /* Lift and slightly enlarge */
        box-shadow: 0 15px 35px rgba(192, 178, 131, 0.1), 0 5px 15px rgba(0,0,0,0.2); /* Softer, more prominent shadow */
        background-color: rgba(255, 255, 255, 0.04); /* Slightly lighter bg on hover */
    }

    .benefit-card:hover h4::after {
        width: 100%; /* Extend underline on hover */
        opacity: 1;
    }

    /* --- Background Glow Elements --- */

    .glow-element {
        position: absolute;
        border-radius: 50%;
        background: radial-gradient(ellipse at center, var(--mehrab-accent) 0%, rgba(192, 178, 131, 0) 70%);
        filter: blur(50px); /* Significant blur for soft glow */
        opacity: 0; /* Start invisible */
        z-index: 0; /* Behind the content container */
        pointer-events: none; /* Make them unclickable */
       
        animation: subtleGlow 4s ease-out 1 forwards; /* Play once */
    }

    .glow-animation {
        animation: subtleGlow 4s ease-out 1 forwards;
    }

    @keyframes subtleGlow {
        0% { opacity: 0; transform: scale(0.8); }
        50% { opacity: 0.5; } /* Low max opacity for subtlety */
        100% { opacity: .3; transform: scale(1.2); }
        }
    

    /* Position and size individual glows */
    .glow-1 {
        width: 400px;
        height: 400px;
        top: 10%;
        left: 5%;
        animation-delay: 0.5s; 
    }

    .glow-2 {
        width: 450px;
        height: 450px;
        bottom: 25%;
        right: 5%;
        animation-delay: 0.8s;
        /* Slightly different gradient if desired */
        /* background: radial-gradient(ellipse at center, #a89a70 0%, rgba(168, 154, 112, 0) 70%); */
    }

    .glow-3 {
        width: 250px;
        height: 250px;
        top: 60%;
        right: 30%;
        animation-delay: 1.1s;
        filter: blur(60px); /* Even softer */
    }


    /* Responsive adjustments for glows (optional) */
    @media (max-width: 991.98px) {
        .glow-element {
            /* Optionally reduce size or blur on smaller screens */
            filter: blur(40px);
        }
        .glow-1 { width: 300px; height: 300px; }
        .glow-2 { width: 250px; height: 250px; }
        .glow-3 { width: 200px; height: 200px; top: 50%; right: 10%;}
    }
    @media (max-width: 767.98px) {
        #benefits { padding-top: 5rem; padding-bottom: 5rem; }
        #benefits .lead { margin-bottom: 3rem !important; }
        .glow-element {
            display: none; /* Hide glows on mobile if they become too distracting */
        }
        .benefit-card {
            padding: 2rem 1.5rem; /* Adjust padding */
        }
        .benefit-icon { font-size: 2rem; }
        .benefit-card h4 { font-size: 1.25rem; }
    }






    /* --- Community / WhatsApp Section --- */
    
    /* --- Community / WhatsApp Section --- */
    #community {
        padding-top: 6rem;
        padding-bottom: 7rem;
        background-color: #080808; /* Slightly different shade from black if desired */
        /* Or keep it var(--mehrab-dark-bg) */
        position: relative;
        overflow: hidden;
    }

    #community h2 {
        font-weight: 700; /* Ensure bold */
        font-size: 2.6rem; /* Match other section titles */
    }

    #community .lead {
        color: var(--mehrab-secondary-text);
        font-size: 1.1rem;
        line-height: 1.7;
    }

    #community .btn-vpreme-secondary {
        /* Inherits base styles, add specific tweaks if needed */
        padding: 0.8rem 1.8rem; /* Consistent padding */
        transition: all 0.3s ease; /* Ensure smooth transition */
    }

    /* Style for the QR code container */
    .qr-code-wrapper {
        max-width: 220px; /* Limit wrapper size */
        padding: 15px; /* Padding around the QR image */
        background-color: rgba(255, 255, 255, 0.03); /* Very faint background */
        border: 1px solid var(--mehrab-input-border);
        border-radius: 8px; /* Soften edges */
        position: relative;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .qr-code-wrapper img {
        display: block; /* Remove extra space below image */
        width: 100%; /* Ensure image fills padding */
        height: auto;
        border-radius: 4px; /* Slightly round QR code corners */
        background-color: white; /* Ensure QR code background is white for scanning */
    }

    .qr-code-wrapper .qr-caption {
        color: var(--mehrab-secondary-text);
        font-family: 'Raleway', sans-serif;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .qr-code-wrapper:hover {
        transform: translateY(-8px) scale(1.03);
        border-color: var(--mehrab-accent);
        box-shadow: 0 10px 25px rgba(192, 178, 131, 0.15), 0 5px 15px rgba(0,0,0,0.25);
        background-color: rgba(255, 255, 255, 0.05);
    }


    /* Optional: Add a single subtle glow for this section */
    /*
    .glow-element.glow-4 {
        width: 350px;
        height: 350px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: radial-gradient(ellipse at center, rgba(192, 178, 131, 0.5) 0%, rgba(192, 178, 131, 0) 70%);
        filter: blur(80px);
        opacity: 0;
        z-index: 0;
        pointer-events: none;
        animation: subtleGlow 5s ease-out 1 forwards;
        animation-delay: 0.3s;
    }
    */

    /* --- Responsive Adjustments for Community Section --- */
    @media (max-width: 991.98px) {
        #community .text-lg-start {
            text-align: center !important; /* Center text below LG */
        }
        #community .row {
            align-items: center; /* Keep vertical align */
        }
        .qr-code-wrapper {
            margin-top: 2rem; /* Add space when QR code stacks below text */
        }
    }

    @media (max-width: 767.98px) {
        #community {
            padding-top: 4rem;
            padding-bottom: 5rem;
        }
        #community h2 {
            font-size: 2.2rem;
        }
        #community .lead {
            font-size: 1rem;
        }
        .qr-code-wrapper {
            max-width: 180px; /* Smaller QR code on mobile */
            padding: 10px;
        }
        /* Hide optional glow on mobile if uncommented */
        /* .glow-element.glow-4 { display: none; } */
    }


    /*------------------*/




    /* --- Spotlight Features Section --- */
    #spotlight-features {
        padding-top: 7rem;
        padding-bottom: 8rem;
        background-color: #030303; /* Very dark, almost black */
        /* background-color: var(--mehrab-dark-bg); */
        position: relative;
    }

    /* Optional: Subtle background texture */
    .spotlight-bg-texture {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Example: Subtle noise texture */
        /* background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="10" stitchTiles="stitch"/></filter><rect width="100" height="100" filter="url(%23n)" opacity="0.02"/></svg>'); */
        /* Example: Very faint geometric pattern */
        background-image:
            linear-gradient(30deg, rgba(255,255,255,0.01) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.01) 87.5%, rgba(255,255,255,0.01)),
            linear-gradient(150deg, rgba(255,255,255,0.01) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.01) 87.5%, rgba(255,255,255,0.01)),
            linear-gradient(30deg, rgba(255,255,255,0.01) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.01) 87.5%, rgba(255,255,255,0.01)),
            linear-gradient(150deg, rgba(255,255,255,0.01) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.01) 87.5%, rgba(255,255,255,0.01)),
            linear-gradient(60deg, rgba(255,255,255,0.02) 25%, transparent 25.5%, transparent 75%, rgba(255,255,255,0.02) 75%, rgba(255,255,255,0.02)),
            linear-gradient(60deg, rgba(255,255,255,0.02) 25%, transparent 25.5%, transparent 75%, rgba(255,255,255,0.02) 75%, rgba(255,255,255,0.02));
        background-size: 70px 70px, 70px 70px, 35px 35px, 35px 35px, 70px 70px, 70px 70px;
        background-position: 0 0, 0 0, 35px 35px, 35px 35px, 0 0, 35px 35px;
        opacity: 0.3;
        z-index: 0;
        pointer-events: none;
    }
    .glow-element.glow-spotlight-backdrop {
        width: 70vw;
        max-width: 1000px;
        height: 500px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: radial-gradient(ellipse at center, var(--mehrab-accent) 0%, rgba(192, 178, 131, 0) 70%);
        filter: blur(180px); /* Even more blur for a very soft large glow */
        opacity: 0; /* AOS will fade it in */
        z-index: 0;
        pointer-events: none;
    }


    #spotlight-features h2 {
        font-weight: 700;
        font-size: 2.8rem; /* Slightly larger for emphasis */
        color: var(--mehrab-light-text);
        margin-bottom: 4.5rem !important;
    }

    .spotlight-card {
        background: linear-gradient(160deg, rgba(20, 20, 20, 0.85), rgba(5, 5, 5, 0.95));
        border: 1px solid rgba(192, 178, 131, 0.1); /* Very faint border */
        border-radius: 12px;
        padding: 2.5rem; /* Generous padding */
        text-align: center;
        position: relative;
        overflow: hidden; /* Important for pseudo-elements and icon flare */
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4),
                    0 0 0 1px rgba(255, 255, 255, 0.03) inset; /* Subtle inner highlight */
        min-height: 280px; /* Ensure cards have some height */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center content vertically */
    }

    .spotlight-card:hover {
        transform: translateY(-15px) scale(1.04);
        border-color: rgba(192, 178, 131, 0.4);
        box-shadow: 0 25px 55px rgba(192, 178, 131, 0.12),
                    0 10px 30px rgba(0,0,0,0.5),
                    0 0 0 1.5px rgba(192, 178, 131, 0.2) inset;
    }

    .spotlight-icon-wrapper {
        width: 90px;
        height: 90px;
        margin: 0 auto 2rem auto;
        background: linear-gradient(145deg, var(--mehrab-accent), #a7986d); /* Gold gradient */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
        box-shadow: 0 0 25px rgba(192, 178, 131, 0.3),
                    0 4px 10px rgba(0,0,0,0.3);
        transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    .spotlight-card:hover .spotlight-icon-wrapper {
        transform: scale(1.1) rotate(5deg);
        box-shadow: 0 0 35px rgba(192, 178, 131, 0.5),
                    0 6px 15px rgba(0,0,0,0.4);
    }

    .spotlight-icon {
        font-size: 2.8rem; /* Large icon */
        color: #111; /* Dark icon on gold background */
        line-height: 1; /* Fix potential alignment issues */
        transition: transform 0.4s ease;
    }
    .spotlight-card:hover .spotlight-icon {
        transform: scale(0.9);
    }

    .icon-bg-flare {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 150%;
        height: 150%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 60%);
        transform: translate(-50%, -50%) scale(0);
        border-radius: 50%;
        opacity: 0;
        transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.7s ease;
        z-index: -1;
    }
    .spotlight-card:hover .icon-bg-flare {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    .spotlight-content {
        position: relative;
        z-index: 1;
    }

    .spotlight-title {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 700;
        font-size: 1.75rem;
        color: var(--mehrab-light-text);
        margin-bottom: 0.75rem;
        transition: color 0.3s ease;
    }
    .spotlight-card:hover .spotlight-title {
        color: var(--mehrab-accent);
    }

    .spotlight-description {
        font-family: 'Raleway', sans-serif;
        font-size: 1rem;
        color: var(--mehrab-secondary-text);
        line-height: 1.7;
        margin-bottom: 0; /* Remove default bottom margin if it's the last element */
    }

    /* Decorative line at the bottom */
    .spotlight-deco-line {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0; /* Starts at 0 width */
        height: 3px;
        background: var(--mehrab-accent);
        border-radius: 3px;
        opacity: 0;
        transition: width 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.2s,
                    opacity 0.5s ease 0.2s; /* Delay the transition */
    }
    .spotlight-card:hover .spotlight-deco-line {
        width: 60px; /* Animate to this width */
        opacity: 0.7;
    }

    /* Responsive Adjustments for Spotlight Features */
    @media (max-width: 991.98px) { /* LG */
        #spotlight-features h2 {
            font-size: 2.5rem;
            margin-bottom: 3.5rem !important;
        }
        .spotlight-card {
            padding: 2rem;
            min-height: 260px;
        }
        .spotlight-icon-wrapper {
            width: 80px;
            height: 80px;
            margin-bottom: 1.5rem;
        }
        .spotlight-icon {
            font-size: 2.4rem;
        }
        .spotlight-title {
            font-size: 1.6rem;
        }
    }

    @media (max-width: 767.98px) { /* MD */
        #spotlight-features {
            padding-top: 5rem;
            padding-bottom: 6rem;
        }
        #spotlight-features h2 {
            font-size: 2.2rem;
            margin-bottom: 3rem !important;
        }
        .spotlight-card {
            /* The gy-5 on the row in HTML handles spacing between cards when stacked */
            min-height: auto; /* Allow height to be determined by content on mobile */
        }
        .spotlight-icon-wrapper {
            width: 70px;
            height: 70px;
        }
        .spotlight-icon {
            font-size: 2rem;
        }
        .spotlight-title {
            font-size: 1.5rem;
        }
        .spotlight-description {
            font-size: 0.95rem;
        }
    }


    /*------------*/





    /* --- Latest Articles / Blog Section (Homepage) --- */
    #latest-articles {
        background-color: #050505; /* Slightly off-black, or var(--mehrab-dark-bg) */
        padding-top: 6rem;
        padding-bottom: 7rem;
    }

    #latest-articles .section-title {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 700;
        font-size: 2.8rem; /* Or match your other main section titles */
        color: var(--mehrab-light-text);
    }
    #latest-articles .section-subtitle {
        color: var(--mehrab-secondary-text);
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }

    .article-card {
        background: linear-gradient(155deg, rgba(22, 22, 22, 0.9), rgba(8, 8, 8, 0.95));
        border: 1px solid rgba(192, 178, 131, 0.1);
        border-radius: 10px; /* Softer radius */
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: column;
        height: 100%; /* Ensures cards in a row are same height if content differs */
        overflow: hidden; /* For image zoom effect and overlay */
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                    box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                    border-color 0.4s ease;
    }
    .article-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 18px 40px rgba(192, 178, 131, 0.1), 0 10px 20px rgba(0,0,0,0.3);
        border-color: rgba(192, 178, 131, 0.3);
    }

    .article-card .card-img-container {
        position: relative;
        overflow: hidden; /* Crucial for image zoom effect */
        display: block; /* Make the link take up space */
        aspect-ratio: 16 / 10; /* Or 4/3, adjust for desired image proportions */
    }

    .article-card .card-img-top {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures image covers the area, might crop */
        transition: transform 0.5s ease;
        border-bottom: 1px solid rgba(192, 178, 131, 0.1);
    }
    .article-card:hover .card-img-top {
        transform: scale(1.08); /* Slight zoom on hover */
    }

    .article-card .card-img-overlay {
        position: absolute;
        top: 1rem;
        left: 1rem;
        padding: 0;
        background: none; /* Remove default overlay background if Bootstrap adds it */
        pointer-events: none; /* So it doesn't block the link */
    }
    .badge.bg-mehrab-accent-transparent {
        background-color: rgba(192, 178, 131, 0.8) !important; /* Accent with transparency */
        color: var(--mehrab-dark-bg);
        font-family: 'Raleway', sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        padding: 0.4em 0.8em;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-radius: 3px;
    }


    .article-card .card-body {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        flex-grow: 1; /* Allows body to take remaining space */
    }

    .article-card .card-meta {
        font-family: 'Raleway', sans-serif;
        font-size: 0.8rem !important; /* Bootstrap small is 0.875em */
        color: var(--mehrab-footer-text) !important; /* More muted */
    }
    .article-card .card-meta i {
        color: var(--mehrab-accent); /* Icon color */
    }

    .article-card .card-title {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 600;
        margin-bottom: 0.75rem;
        line-height: 1.3;
    }
    .article-card .card-title a {
        color: var(--mehrab-light-text);
        text-decoration: none;
        transition: color 0.3s ease;
    }
    .article-card .card-title a:hover {
        color: var(--mehrab-accent);
    }

    .article-card .card-text {
        font-family: 'Raleway', sans-serif;
        font-size: 0.9rem;
        color: var(--mehrab-secondary-text);
        line-height: 1.6;
        flex-grow: 1; /* Pushes footer down */
        margin-bottom: 1rem; /* Space before footer */
    }

    .article-card .card-footer {
        background-color: transparent; /* Remove Bootstrap default footer bg */
        border-top: 1px solid rgba(192, 178, 131, 0.08);
        padding: 1rem 1.5rem;
        margin-top: auto; /* Pushes footer to bottom of flex container */
    }

    .btn-outline-mehrab-accent {
        color: var(--mehrab-accent);
        border-color: var(--mehrab-accent);
        font-family: 'Raleway', sans-serif;
        font-weight: 500;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 0.4rem 1rem;
        border-radius: 50px;
        transition: all 0.3s ease;
    }
    .btn-outline-mehrab-accent:hover {
        background-color: var(--mehrab-accent);
        color: var(--mehrab-dark-bg);
        border-color: var(--mehrab-accent);
        transform: translateY(-1px);
    }
    .btn-outline-mehrab-accent i {
        transition: transform 0.3s ease;
    }
    .btn-outline-mehrab-accent:hover i {
        transform: translateX(3px);
    }

    /* Responsive adjustments for blog section */
    @media (max-width: 991.98px) {
        #latest-articles .section-title { font-size: 2.5rem; }
        .article-card .card-title { font-size: 1.15rem; /* Adjust h5 to actual size for card */ }
    }
    @media (max-width: 767.98px) {
        #latest-articles { padding-top: 4rem; padding-bottom: 5rem; }
        #latest-articles .section-title { font-size: 2.2rem; }
        /* Cards will stack naturally due to col-md-6 */
    }




    /*----------------*/










    /* --- Testimonials Section --- */
    #testimonials {
        padding-top: 7rem;
        padding-bottom: 9rem; /* Extra space for dots/navigation if needed */
        background-color: #080808; /* Or var(--mehrab-dark-bg) or a slightly different dark shade */
        /* Optional: Add a very subtle pattern or gradient if desired */
        /* background-image: linear-gradient(rgba(255,255,255,0.01) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.01) 1px, transparent 1px);
        background-size: 20px 20px; */
    }

    #testimonials h2 {
        font-weight: 700;
        font-size: 2.6rem;
    }

    #testimonials .lead {
        color: var(--mehrab-secondary-text);
    }

    .testimonial-slider-wrapper {
        position: relative; /* For arrow positioning */
        min-height: 400px;
    }

    /* Slick Slider Customizations */
    .testimonial-slider .slick-slide {
        padding: 0 15px; /* Creates gutter space between slides */
        outline: none !important;
    }
    .testimonial-slider .slick-list {
        margin: 0 -15px; /* Compensates for slide padding */
    }

    .testimonial-item {
        outline: none !important; /* Remove focus outline */
    }

    .testimonial-content {
        background: linear-gradient(150deg, rgba(30, 30, 30, 0.7), rgba(15, 15, 15, 0.85));
        /* backdrop-filter: blur(8px); */ /* Optional: for a frosted glass effect if background is complex */
        /* -webkit-backdrop-filter: blur(8px); */
        border: 1px solid rgba(192, 178, 131, 0.15); /* Subtle accent border */
        border-radius: 10px;
        padding: 2.5rem 2rem 2rem; /* Top, Hori, Bottom */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0,0,0,0.1) inset;
        min-height: 320px; /* Adjust as needed for your content length */
        display: flex !important; /* Ensure flex properties apply */
        flex-direction: column;
        justify-content: space-between; /* Pushes author to bottom */
        position: relative;
        overflow: hidden; /* To contain quote marks */
        transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
                    box-shadow 0.4s cubic-bezier(0.19, 1, 0.22, 1),
                    border-color 0.4s ease;
    }

    .testimonial-item:hover .testimonial-content {
        box-shadow: 0 20px 45px rgba(192, 178, 131, 0.1), 0 12px 25px rgba(0,0,0,0.4);
        border-color: rgba(192, 178, 131, 0.5);
    }

    .quote-mark-bg {
        font-family: 'Times New Roman', Times, serif; /* Or a very classic serif */
        font-size: 8rem; /* Very large */
        color: var(--mehrab-accent);
        position: absolute;
        opacity: 0.07; /* Very subtle */
        line-height: 1;
        z-index: 0;
        user-select: none;
        pointer-events: none; /* So they don't interfere with text selection */
        transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .quote-mark-bg.top-left {
        top: -1rem;
        left: -0.5rem;
        transform: rotate(-5deg);
    }
    .quote-mark-bg.bottom-right {
        bottom: -1.5rem;
        right: -0.5rem;
        transform: rotate(5deg);
    }
    .testimonial-item:hover .quote-mark-bg {
        opacity: 0.12;
        transform: scale(1.1) rotate(0deg);
    }


    .testimonial-text {
        font-family: 'Raleway', sans-serif;
        font-size: 1.05rem; /* Or 1rem for denser text */
        line-height: 1.75;
        color: var(--mehrab-secondary-text);
        margin-bottom: 1.5rem;
        font-style: italic;
        position: relative; /* To be above quote marks */
        z-index: 1;
        flex-grow: 1; /* Allows text to take up available space */
    }

    .testimonial-author {
        display: flex;
        align-items: center;
        margin-top: auto; /* Pushes to bottom */
        padding-top: 1.5rem;
        border-top: 1px solid rgba(192, 178, 131, 0.1);
        position: relative; /* To be above quote marks */
        z-index: 1;
    }

    .author-avatar {
        width: 55px;
        height: 55px;
        border-radius: 50%;
        border: 2px solid rgba(192, 178, 131, 0.25);
        margin-right: 15px;
        object-fit: cover;
        transition: border-color 0.3s ease;
    }
    .testimonial-item:hover .author-avatar {
        border-color: var(--mehrab-accent);
    }

    .author-info {
        text-align: left;
    }
    .author-info.no-avatar { /* For testimonials without an avatar */
        margin-left: 0;
    }

    .author-name {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 700;
        color: var(--mehrab-light-text);
        font-size: 1.25rem;
        margin-bottom: 0.1rem;
    }

    .author-title {
        font-family: 'Raleway', sans-serif;
        font-size: 0.8rem;
        color: var(--mehrab-footer-text);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 0;
    }

    /* Slick Arrows */
    .testimonial-slider-wrapper .slick-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background-color: rgba(45, 37, 21, 0.679);
        border: 1px solid rgba(192, 178, 131, 0.2);
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        
    }
    .testimonial-slider-wrapper .slick-arrow:hover {
        background-color: rgba(192, 178, 131, 0.15);
        border-color: var(--mehrab-accent);
    }
    
    .testimonial-slider-wrapper .slick-prev {
        left: -25px; /* Adjust based on container width and preference */
    }
    .testimonial-slider-wrapper .slick-next {
        right: -25px; /* Adjust based on container width and preference */
    }

    .testimonial-slider-wrapper .slick-arrow i {
        color: var(--mehrab-accent);
    }

    /* Slick Dots */
    .testimonial-slider .slick-dots {
        bottom: -55px; /* Position below the slider */
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
    }
    .testimonial-slider .slick-dots li {
        display: inline-block;
        margin: 0 5px;
    }
    .testimonial-slider .slick-dots li button {
        font-size: 0; /* Hide text */
        line-height: 0;
        display: block;
        width: 10px;
        height: 10px;
        padding: 0;
        cursor: pointer;
        border: 1px solid rgba(192, 178, 131, 0.3);
        border-radius: 50%;
        background-color: transparent;
        outline: none;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    .testimonial-slider .slick-dots li button:hover,
    .testimonial-slider .slick-dots li.slick-active button {
        background-color: var(--mehrab-accent);
        border-color: var(--mehrab-accent);
    }

    /* Background Glow for Testimonial Section */
    .glow-element.glow-testimonial-backdrop {
        width: 80vw; /* Large */
        max-width: 900px;
        height: 600px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: radial-gradient(ellipse at center, var(--mehrab-accent) 0%, rgba(192, 178, 131, 0) 75%);
        filter: blur(150px); /* Very blurry */
        opacity: 0; /* AOS will fade it in */
        z-index: 0;
        pointer-events: none;
    }

    /* Responsive Adjustments for Testimonials */
    @media (max-width: 1199.98px) { /* XL */
        .testimonial-slider-wrapper .slick-prev { left: -15px; }
        .testimonial-slider-wrapper .slick-next { right: -15px; }
    }

    @media (max-width: 991.98px) { /* LG */
        #testimonials { padding-bottom: 8rem; }
        .testimonial-content { min-height: 340px; /* May need adjustment */ }
        .testimonial-slider-wrapper .slick-prev { left: 5px; } /* Bring arrows onto cards if space is tight */
        .testimonial-slider-wrapper .slick-next { right: 5px; }
        .glow-element.glow-testimonial-backdrop { filter: blur(120px); }
    }

    @media (max-width: 767.98px) { /* MD */
        #testimonials { padding-top: 5rem; padding-bottom: 7rem; }
        #testimonials h2 { font-size: 2.2rem; }
        .testimonial-content { padding: 2rem 1.5rem 1.5rem; min-height: auto; } /* Allow height to vary more */
        .testimonial-text { font-size: 0.95rem; line-height: 1.7; }
        .quote-mark-bg { font-size: 6rem; }
        .author-avatar { width: 45px; height: 45px; }
        .author-name { font-size: 1.15rem; }

        .testimonial-slider-wrapper .slick-arrow {
            width: 40px;
            height: 40px;
        }
        .testimonial-slider-wrapper .slick-arrow::before { font-size: 16px; }
        /* Option: Move arrows below slider on mobile */
        /*
        .testimonial-slider-wrapper .slick-arrow {
            top: auto;
            bottom: -40px;
            transform: translateY(0);
        }
        .testimonial-slider-wrapper .slick-prev { left: 35%; transform: translateX(-50%);}
        .testimonial-slider-wrapper .slick-next { right: 35%; transform: translateX(50%);}
        .testimonial-slider .slick-dots { bottom: -80px; }
        */
    }

    @media (max-width: 575.98px) { /* SM */
        .testimonial-slider .slick-slide { padding: 0 8px; }
        .testimonial-slider .slick-list { margin: 0 -8px; }
        .quote-mark-bg { display: none; } /* Hide large quote marks if too cluttered */
        .testimonial-slider-wrapper .slick-arrow { display: none !important; } /* Hide arrows, rely on swipe & dots */
        .testimonial-slider .slick-dots { bottom: -45px; }
    }






    

    /* --- Early Access Form Section --- */
    #early-access {
        padding-top: 7rem;
        padding-bottom: 8rem;
        background-color: var(--mehrab-dark-bg);
        position: relative;
        overflow: hidden; /* Important to contain pseudo-elements */
    }

    /* Angled Background Pattern */
    #early-access::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 60%;
        height: 100%;
        background: radial-gradient(at bottom, #b9ac7ea6, transparent 70%);
        background-size: 150%;
        background-repeat: no-repeat;
        background-attachment: fixed;
        z-index: 0;
        opacity: 0.37;
        transform: skewX(-15deg);
        transform-origin: top left;
        pointer-events: none;
    }


    #early-access h2 {
        font-weight: 700;
        font-size: 2.6rem;
    }

    #early-access .lead {
        color: var(--mehrab-secondary-text);
        margin-bottom: 4rem !important; /* More space before form panel */
    }

    /* Form Panel Styling */
    .form-panel {
        background: linear-gradient(145deg, rgba(26, 26, 26, 0.9), rgba(10, 10, 10, 0.9)); /* Subtle dark gradient */
        backdrop-filter: blur(5px); /* Blur background slightly if pattern shows through */
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(192, 178, 131, 0.2); /* Accent border, subtle */
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; /* Inner/Outer shadows */
        position: relative; /* Keep relative for potential children */
        z-index: 1; /* Above background pattern */
        padding: 3rem; /* Generous padding */
    }

    /* Form Input Styling */
    #earlyAccessForm .form-control {
        background-color: rgba(0, 0, 0, 0.2); /* Darker, slightly transparent background */
        border: 1px solid var(--mehrab-input-border);
        color: var(--mehrab-light-text);
        padding: 0.9rem 1.2rem;
        border-radius: 4px; /* Consistent radius */
        font-family: 'Raleway', sans-serif;
        font-size: 1rem;
        height: auto; /* Let padding define height */
        transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }

    #earlyAccessForm .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5); /* Slightly more visible placeholder */
    opacity: 1;
    }
    #earlyAccessForm .form-control:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); }
    #earlyAccessForm .form-control::-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); }

    #earlyAccessForm .form-control:focus {
        background-color: rgba(0, 0, 0, 0.3);
        color: var(--mehrab-light-text);
        border-color: var(--mehrab-accent); /* Highlight with accent color */
        box-shadow: 0 0 0 0.25rem rgba(192, 178, 131, 0.25); /* Accent focus glow */
        outline: none;
    }

    /* Required field styling (optional - if you add validation later) */
    /* #earlyAccessForm .form-control:required:invalid { border-color: #dc3545; } */
    /* #earlyAccessForm .form-control:required:valid { border-color: #198754; } */

    /* Submit Button */
    #early-access .btn-vpreme-primary {
        /* Inherits fancy style, maybe minor tweaks */
        padding: 0.9rem 2.5rem; /* Adjust padding if needed */
        display: inline-flex; /* Align icon nicely */
        align-items: center;
    }
    #early-access .btn-vpreme-primary i {
        font-size: 1.3em; /* Slightly larger icon */
        transition: transform 0.3s ease;
    }
    #early-access .btn-vpreme-primary:hover i {
        transform: translateX(5px); /* Move icon slightly on hover */
    }

    /* Thank You Message Styling */
    #thankYouMessage {
        background-color: rgba(192, 178, 131, 0.1); /* Accent background tint */
        border: 1px solid rgba(192, 178, 131, 0.3); /* Accent border */
        color: var(--mehrab-light-text); /* Ensure text is white/light */
        padding: 1.5rem 2rem;
        border-radius: 6px;
        text-align: left; /* Align text left */
    }
    #thankYouMessage .alert-heading {
        color: var(--mehrab-accent); /* Heading in accent color */
        font-family: 'Cormorant Garamond', serif;
        font-weight: 600;
        font-size: 1.5rem;
    }
    #thankYouMessage p {
        color: var(--mehrab-secondary-text);
        font-size: 1rem;
    }
    #thankYouMessage i {
        line-height: 1; /* Align icon better */
    }


    /* --- Responsive Adjustments for Form Section --- */
    @media (max-width: 991.98px) {
        #early-access::before {
            width: 60%; /* Pattern wider on medium screens */
            opacity: 0.5;
            transform: skewX(-10deg); /* Less skew */
            background-size: 80px 80px; /* Adjust pattern scale */
        }
    }

    @media (max-width: 767.98px) {
        #early-access {
            padding-top: 5rem;
            padding-bottom: 6rem;
        }
        #early-access h2 { font-size: 2.2rem; }
        #early-access .lead { margin-bottom: 3rem !important; }

        #early-access::before {
            width: 100%; /* Full width on small screens */
            opacity: 0.3;
            transform: skewX(0deg); /* No skew */
            background: linear-gradient( -45deg, rgba(192, 178, 131, 0.05) 25%, transparent 25% ); /* Simpler pattern */
            background-size: 60px 60px;
        }
        .form-panel {
            padding: 2rem; /* Less padding on mobile */
            background: rgba(15, 15, 15, 0.9); /* Simplify background */
            border: 1px solid rgba(192, 178, 131, 0.1);
        }
        /* Stack form inputs cleanly */
        #earlyAccessForm .row.g-3 > .col-md-6 {
            margin-bottom: 1rem;
        }
        #earlyAccessForm .row.g-3 > .col-md-6:last-child {
            margin-bottom: 0;
        }
        #earlyAccessForm .row.g-3.mb-4 {
            margin-bottom: 1.5rem !important;
        }
    }
    @media (max-width: 575.98px) {
        .form-panel { padding: 1.5rem; }
        #earlyAccessForm .form-control { font-size: 0.95rem; padding: 0.8rem 1rem;}
        #early-access .btn-vpreme-primary { width: 100%; /* Full width button */ }
    }




    /* --- Footer --- */
    



    /* --- Footer Section --- */
    #site-footer {
        background-color: #050505; /* Slightly off-black for subtle contrast */
        /* Or use var(--mehrab-dark-bg) if preferred */
        color: var(--mehrab-footer-text); /* Use the muted footer text color */
        
        padding: 0; /* Remove padding from container-fluid */
        border-top: 1px solid rgba(255, 255, 255, 0.1); /* Faint top border */
        position: relative; /* Needed for decorative line */
        overflow: hidden; /* Contain potential effects */
    }

    /* Top Decorative Line - Subtle Accent Glow */
    .footer-decoration-line {
        position: absolute;
        top: -1px; /* Slightly overlap the border */
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg,
            transparent,
            rgba(192, 178, 131, 0.6) 50%, /* Accent color, brighter in center */
            transparent
        );
        opacity: 0.5; /* Make it subtle */
        filter: blur(1px); /* Soften the line */
        pointer-events: none;
    }

    /* Footer Content Container */
    #site-footer .container {
        position: relative; /* Ensure content is above decoration */
        z-index: 1;
    }

    /* Footer Brand Styling */
    .footer-brand a {
        font-family: 'Cormorant Garamond', serif;
        font-size: 2.2rem; /* Prominent but elegant size */
        font-weight: 600;
        color: var(--mehrab-light-text); /* White color for brand */
        text-decoration: none;
        letter-spacing: 1.5px;
        transition: color 0.3s ease, text-shadow 0.3s ease;
        display: inline-block; /* Allows margin and potential effects */
        margin-bottom: 0.5rem; /* Space adjustment */
    }

    .footer-brand a:hover {
        color: var(--mehrab-accent); /* Hover to accent color */
        text-shadow: 0 0 8px rgba(192, 178, 131, 0.3); /* Subtle glow on hover */
    }

    /* Footer Links Styling */
    .footer-links {
        font-family: 'Raleway', sans-serif;
        font-size: 0.9rem;
        letter-spacing: 0.5px;
    }

    .footer-links a {
        color: var(--mehrab-secondary-text); /* Muted white for links */
        text-decoration: none;
        margin: 0 0.2rem; /* Slight space around links */
        transition: color 0.3s ease;
    }

    .footer-links a:hover {
        color: var(--mehrab-light-text); /* Hover to brighter white */
    }

    .footer-links .link-separator {
        color: rgba(255, 255, 255, 0.3); /* Very subtle separator color */
        margin: 0 0.8rem; /* Space around separator */
        font-size: 0.8em; /* Make bullet slightly smaller */
        vertical-align: middle; /* Align bullet better */
    }

    /* Copyright Text Styling */
    .footer-copyright {
        color: var(--mehrab-footer-text);
        font-family: 'Raleway', sans-serif;
        font-size: 0.85rem;
        line-height: 1.6;
        letter-spacing: 0.3px;
    }
    .footer-copyright .tagline {
        font-style: italic;
        opacity: 0.8;
        font-size: 0.9em; /* Make tagline slightly smaller */
        color: var(--mehrab-secondary-text); /* Slightly brighter than copyright */
    }


    /* --- Responsive Adjustments for Footer --- */
    @media (max-width: 767.98px) {
        #site-footer {
            margin-top: 6rem;
        }
        #site-footer .container {
            padding-top: 4rem;
            padding-bottom: 4rem;
        }
        .footer-brand a {
            font-size: 1.8rem; /* Slightly smaller brand name */
        }
        .footer-links {
            font-size: 0.85rem;
        }
        .footer-links .link-separator {
            margin: 0 0.5rem;
        }
        .footer-copyright {
            font-size: 0.8rem;
        }
    }
    












    /* --- Responsive Adjustments --- */
    @media (max-width: 991.98px) {
        h2 {
            font-size: 2.5rem;
        }

    }


    @media (max-width: 767.98px) {
        h1, .display-4 {
            font-size: 3.2rem;
        }
        
        section {
            padding-top: 4rem;
            padding-bottom: 4rem;
        }
        
    }

    @media (max-width: 575.98px) {
        h1, .display-4 {
            font-size: 2.8rem;
        }


        h2 {
            font-size: 2.1rem;
        }
        h3 {
            font-size: 1.5rem;
        }

    }







    /* --- Single Post Page Styles --- */
    body.single-post-page {
        padding-top: 80px; /* Adjust based on your navbar's final height. (Initial height of navbar) */
        background-color: #080808; /* Slightly off-black for blog background */
    }

    /* Post Hero Section (Title Area) */
    .post-hero-section {
        min-height: 50vh; /* Or adjust as needed */
        background-size: cover;
        background-position: center center;
        color: var(--mehrab-light-text);
        position: relative; /* For overlay if needed */
    }

    .post-hero-overlay {
        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1));
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }


    .post-category {
        font-family: 'Raleway', sans-serif;
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 1.5px; /* Increased letter spacing */
    }
    .post-title {
        font-family: 'Cormorant Garamond', serif;
        color: var(--mehrab-light-text);
    }
    .post-meta {
        font-family: 'Raleway', sans-serif;
        font-size: 0.95rem;
        color: var(--mehrab-secondary-text);
    }
    .post-meta .fw-medium {
        color: var(--mehrab-light-text);
    }

    /* Main Post Content Area */
    #single-post-content {
        background-color: var(--mehrab-dark-bg); /* Or #050505 */
    }

    .article-content-column {
        color: var(--mehrab-secondary-text);
        font-family: 'Raleway', sans-serif;
        font-size: 1.05rem; /* Slightly larger for readability */
        line-height: 1.85;
    }
    .article-content-column .lead-paragraph {
        font-size: 1.25rem;
        font-weight: 400;
        color: var(--mehrab-light-text); /* Lead paragraph stands out more */
        font-family: 'Raleway', sans-serif;
    }

    .article-content-column h2.article-h2,
    .article-content-column h3.article-h3 {
        font-family: 'Cormorant Garamond', serif;
        color: var(--mehrab-light-text);
        font-weight: 600;
        margin-bottom: 1.5rem;
        padding-bottom: 0.6rem;
        border-bottom: 1px solid rgba(192, 178, 131, 0.15);
        position: relative;
    }
    .article-content-column h2.article-h2::before,
    .article-content-column h3.article-h3::before { /* Accent part of underline */
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 60px;
        height: 2px; /* Thicker accent */
        background-color: var(--mehrab-accent);
    }
    .article-content-column h2.article-h2 { font-size: 2.1rem; }
    .article-content-column h3.article-h3 { font-size: 1.6rem; margin-top: 2.2rem; border-bottom-style: dashed; }
    .article-content-column h3.article-h3::before { width: 45px; height: 1px; }


    .article-content-column p {
        margin-bottom: 1.3rem;
    }
    .article-content-column strong {
        color: var(--mehrab-light-text); /* Make bold text stand out a bit more */
        font-weight: 600;
    }

    .article-content-column ul {
        list-style: none;
        padding-left: 0;
        margin-bottom: 1.5rem;
    }
    .article-content-column ul li {
        padding-left: 1.8em;
        position: relative;
        margin-bottom: 0.8rem;
    }
    .article-content-column ul li::before {
        content: "\F281"; /* Bootstrap Icon: dot */
        font-family: 'bootstrap-icons';
        position: absolute;
        left: 0;
        top: 2px;
        color: var(--mehrab-accent);
        font-size: 0.9em;
    }

    .article-content-column a {
        font-family: 'Raleway', sans-serif;
        color: var(--mehrab-accent);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.3s ease, text-decoration-color 0.3s ease;
        
    }
    .article-content-column a:hover {
        color: var(--mehrab-input-border);
        border-color: var(--mehrab-light-text);
       
    }

    .article-content-column figure.figure {
        margin-top: 1rem;
        margin-bottom: 2rem; /* More space around figures */
    }
    .article-content-column .figure-img {
        border: 1px solid rgba(255,255,255,0.05);
    }

    /* Fancy HR */
    .fancy-hr {
        border: 0;
        height: 1px;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--mehrab-accent), rgba(0, 0, 0, 0));
        opacity: 0.3;
    }

    /* Vpreme Teaser Box */
    .vpreme-teaser-box {
        background: linear-gradient(145deg, rgba(25,25,25,0.9), rgba(10,10,10,0.95));
        border: 1px solid rgba(192, 178, 131, 0.2);
        border-radius: 8px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    }
    .vpreme-teaser-box .article-h2 {
        border-bottom: none; /* Remove underline for this specific H2 */
        padding-bottom: 0;
    }
    .vpreme-teaser-box .article-h2::before {
        display: none; /* Remove accent line for this specific H2 */
    }

    /* Responsive adjustments for single post */
    @media (max-width: 991.98px) {
        body.single-post-page {
            padding-top: 70px; /* Adjust if navbar height changes significantly on mobile toggle */
        }
        .post-hero-section { min-height: 40vh; }
        .post-title { font-size: 2.5rem; } /* Adjust as needed */
    }
    @media (max-width: 767.98px) {
        .post-hero-section { text-align: center !important; min-height: 35vh; }
        .post-title { font-size: 2rem; }
        .article-content-column { font-size: 1rem; }
        .article-content-column .lead-paragraph { font-size: 1.15rem; }
        .article-content-column h2.article-h2 { font-size: 1.8rem; }
        .article-content-column h3.article-h3 { font-size: 1.4rem; }
    }

    /*-------------------*/


    /* --- Blog Listing Page Styles --- */
body.blog-listing-page {
    padding-top: 80px; /* Adjust based on your navbar's final height */
    background-color: var(--mehrab-dark-bg);
}

/* Blog Listing Hero Section */
/* .blog-hero-section {
    min-height: 55vh; 
    background-size: cover;
    color: var(--mehrab-light-text);
    
} */

.blog-hero-section {
    min-height: 55vh; /* Or adjust as needed */
    color: var(--mehrab-light-text);
    position: relative; /* Keep for z-index stacking of content */


    background-attachment: fixed; /* This makes the background image stay in place */
    background-position: center center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-size: cover; /* Ensure the image covers the entire area */
    /* --- End of key changes --- */
}

.blog-hero-section .hero-content {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.blog-main-title {
    font-family: 'Cormorant Garamond', serif;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
}
.blog-main-subtitle {
    font-family: 'Raleway', sans-serif;
    font-size: 1.2rem; /* Adjust as needed */
    color: var(--mehrab-secondary-text);
    text-shadow: 1px 1px 6px rgba(0,0,0,0.3);
}

/* Main Blog Content Area */
#blog-listing-content {
   
}

/* Featured Post Section */
.featured-post-section {
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.featured-post-image {
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.featured-post-image:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.featured-post-section .post-category {
    font-family: 'Raleway', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
}
.featured-post-title a {
    color: var(--mehrab-light-text);
    text-decoration: none;
    transition: color 0.3s ease;
}
.featured-post-title a:hover {
    color: var(--mehrab-accent);
}
.featured-post-excerpt {
    font-size: 1.05rem; /* Slightly larger for featured post */
    line-height: 1.7;
}
.featured-post-section .btn-vpreme-primary {
    /* Inherits global style, can add specifics if needed */
    font-size: 0.95rem;
    padding: 0.7rem 1.8rem;
}
.featured-post-section .btn-vpreme-primary i {
    transition: transform 0.3s ease;
}
.featured-post-section .btn-vpreme-primary:hover i {
    transform: translateX(4px);
}


/* Blog Grid Section Title */
.section-title-secondary {
    font-family: 'Cormorant Garamond', serif;
    color: var(--mehrab-light-text);
    font-size: 2.2rem; /* Adjust as needed */
    position: relative;
    padding-bottom: 0.5rem;
}
.section-title-secondary::after { /* Subtle underline */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px;
    height: 2px;
    background-color: var(--mehrab-accent);
    opacity: 0.7;
}

/* Article Card Styling - (It should largely inherit from #latest-articles .article-card on index.html) */
/* If you need specific tweaks for cards on blog.html, add them here, namespaced if necessary */
/* e.g., #blog-listing-content .article-card { ... } */
/* For now, we assume the existing .article-card styles are sufficient. */


/* Pagination Styling */
.vpreme-pagination .page-item .page-link {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(192, 178, 131, 0.15);
    color: var(--mehrab-secondary-text);
    margin: 0 0.25rem;
    border-radius: 4px; /* Softer radius */
    transition: all 0.3s ease;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    padding: 0.6rem 0.9rem; /* Adjust padding */
    font-size: 0.9rem;
}
.vpreme-pagination .page-item .page-link:hover {
    background-color: rgba(192, 178, 131, 0.15);
    border-color: var(--mehrab-accent);
    color: var(--mehrab-light-text);
}
.vpreme-pagination .page-item.active .page-link {
    background-color: var(--mehrab-accent);
    border-color: var(--mehrab-accent);
    color: var(--mehrab-dark-bg);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(192, 178, 131, 0.2);
}
.vpreme-pagination .page-item.disabled .page-link {
    background-color: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.3);
}
.vpreme-pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(192, 178, 131, 0.25); /* Custom focus ring */
}

/* Responsive Adjustments for Blog Listing */
@media (max-width: 991.98px) {
    body.blog-listing-page {
        padding-top: 70px; /* Adjust if navbar height changes significantly */
    }
    .blog-hero-section { min-height: 45vh; }
    .blog-main-title { font-size: 2.8rem; }
    .featured-post-section .row { text-align: center; } /* Center featured post on tablet */
    .featured-post-image { max-width: 80%; margin-left: auto; margin-right: auto;}
    .featured-post-title { font-size: 2rem; /* Adjust h1 to actual size */ }
}
@media (max-width: 767.98px) {
    .blog-hero-section { min-height: 40vh; }
    .blog-main-title { font-size: 2.2rem; }
    .blog-main-subtitle { font-size: 1.1rem; }
    .featured-post-title { font-size: 1.8rem; }
    .section-title-secondary { font-size: 1.9rem; }
}

/*--------------*/



.promo-product-card {
    overflow: hidden;
}

.promo-product-card .col-md-4 a img {
    width: 100%;
    height: 100%;
    max-height: 270px;
    object-fit: cover;
}