:root {
    /* Dark Luxury Palette - Maroon & Gold Edition */
    --primary-color: #800000;
    /* Maroon */
    --primary-light: #A52A2A;
    /* Lighter Maroon */
    --primary-dark: #4B0000;
    /* Darker Maroon */

    --accent-gold: #D4AF37;
    /* Metallic Gold */
    --accent-gold-light: #F4C430;
    /* Bright Gold */
    --accent-gold-dark: #AA8C2C;
    /* Dark Gold */

    --bg-dark: #121212;
    /* Deep Black */
    --bg-card: rgba(30, 30, 30, 0.6);
    /* Glassmorphism Base */
    --bg-glass: rgba(18, 18, 18, 0.85);
    /* Header Glass */

    --text-color: #F5F5F5;
    /* Off White */
    --text-muted: #B0B0B0;
    /* Silver Gray */
    --white: #FFFFFF;

    /* Fonts */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Effects */
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
    --glow: 0 0 20px rgba(212, 175, 55, 0.3);
    --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    line-height: 1.7;
    color: var(--text-color);
    background-color: var(--bg-dark);
    background-image:
        radial-gradient(circle at 15% 50%, rgba(128, 0, 0, 0.08) 0%, transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(212, 175, 55, 0.05) 0%, transparent 25%);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Premium gold text selection */
::selection {
    background: var(--accent-gold);
    color: #0a0a0a;
}

::-moz-selection {
    background: var(--accent-gold);
    color: #0a0a0a;
}

/* Custom Global Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #0f0f0f;
    border-left: 1px solid rgba(212, 175, 55, 0.1);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-dark), var(--accent-gold));
    border-radius: 6px;
    border: 3px solid #0f0f0f;
    /* Creates a floating look */
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--primary-color), var(--accent-gold-light));
    border: 2px solid #0f0f0f;
    /* Grows slightly on hover */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1rem;
    color: var(--white);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

h1 {
    font-size: 3.5rem;
    /* Fallback */
    background: linear-gradient(to right, #ffffff, #D4AF37);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

/* Global Form Input Styles */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    outline: none;
    background: rgba(255, 255, 255, 0.1);
}

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

/* Buttons */
.btn {
    display: inline-block;
    padding: 16px 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    border-radius: 2px;
    /* Sharper corners for modern look */
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: 1px solid var(--primary-light);
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.6s;
}

.btn:hover::after {
    left: 100%;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(128, 0, 0, 0.5);
    border-color: var(--accent-gold);
    color: var(--white);
}

/* Gold Button Variant */
.btn-gold {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));
    border-color: var(--accent-gold-light);
    color: #000;
}

.btn-gold:hover {
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4);
    color: #000;
}

.btn-secondary {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--white);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}


.section-padding {
    padding: 120px 0;
}

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

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

ul {
    list-style: none;
}

/* Link Underline Effect */
.link-underline {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 2px;
    transition: var(--transition);
}

.link-underline:hover {
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
}

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

.btn {
    display: inline-block;
    padding: 14px 35px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    border-radius: 5px;
    font-weight: 700;
    letter-spacing: 1px;
    border: 1px solid var(--primary-light);
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transition: 0.5s;
}

.btn:hover::after {
    left: 100%;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
    z-index: -1;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.btn:hover {
    color: var(--white);
    transform: translateY(-3px) scale(1.02);
    /* Lift up and slightly grow */
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);
    /* Gold glow shadow */
    border-color: var(--accent-gold);
}

.btn:active {
    transform: translateY(-1px) scale(0.98);
    /* Click press effect */
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}

.btn:hover::before {
    opacity: 1;
}

/* Icon spacing in buttons */
.btn i {
    margin-right: 10px;
    font-size: 1.1em;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    box-shadow: none;
}

.btn-secondary:hover {
    background: rgba(212, 175, 55, 0.1);
    color: var(--primary-light);
    border-color: var(--primary-light);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.1);
}

.section-padding {
    padding: 100px 0;
}

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

/* Header */
header {
    background-color: var(--bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: var(--shadow-sm);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: var(--transition);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 130px;
    flex-wrap: nowrap;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 120px;
    /* Increased for prominence */
    width: auto;
    transition: transform 0.3s ease;
}

/* Contact Page Layout */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

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

    /* Contact Page Mobile Reorder */
    .contact-layout {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .reveal-left {
        order: 1;
        /* Info first */
    }

    .reveal-right {
        order: 2;
        /* Map second */
        width: 100%;
    }
}


.logo:hover img {
    transform: scale(1.05);
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
}

.nav-links {
    display: flex;
    gap: 18px;
    flex-direction: row;
    align-items: center;
}

.nav-links li a {
    font-weight: 500;
    color: var(--text-color);
    position: relative;
    letter-spacing: 0.5px;
    font-size: 0.95rem;
    padding-bottom: 5px;
    white-space: nowrap;
}

.nav-links li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--accent-gold);
    transition: var(--transition);
    box-shadow: 0 0 10px var(--accent-gold);
}

.nav-links li a:hover,
.nav-links li a.active {
    color: var(--accent-gold);
}

.nav-links li a:hover::after {
    width: 100%;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-top: 2px solid var(--accent-gold);
    border-radius: 0 0 8px 8px;
    padding: 15px 0;
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    z-index: 1000;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu li {
    display: block;
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.dropdown:hover .dropdown-menu li {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation for list items */
.dropdown:hover .dropdown-menu li:nth-child(1) {
    transition-delay: 0.05s;
}

.dropdown:hover .dropdown-menu li:nth-child(2) {
    transition-delay: 0.1s;
}

.dropdown:hover .dropdown-menu li:nth-child(3) {
    transition-delay: 0.15s;
}

.dropdown:hover .dropdown-menu li:nth-child(4) {
    transition-delay: 0.2s;
}

.dropdown:hover .dropdown-menu li:nth-child(5) {
    transition-delay: 0.25s;
}

.dropdown:hover .dropdown-menu li:nth-child(6) {
    transition-delay: 0.3s;
}

.dropdown:hover .dropdown-menu li:nth-child(7) {
    transition-delay: 0.35s;
}

.dropdown:hover .dropdown-menu li:nth-child(8) {
    transition-delay: 0.4s;
}

.dropdown-menu li a {
    display: block;
    padding: 12px 25px;
    font-size: 0.95rem;
    color: var(--text-color);
    white-space: nowrap;
    transition: all 0.3s ease;
    text-align: left;
    border-left: 2px solid transparent;
}

.dropdown-menu li a:hover {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), transparent);
    color: var(--accent-gold);
    padding-left: 32px;
    border-left-color: var(--accent-gold);
}

.dropdown-menu li a::after {
    display: none;
}

.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 2px;
    margin: 6px auto;
    background-color: var(--accent-gold);
    transition: var(--transition);
}



/* Hero Section */
.hero {
    height: 100vh;
    background:
        linear-gradient(to bottom, rgba(8, 12, 28, 0.5) 0%, rgba(8, 12, 28, 0.62) 45%, rgba(10, 12, 22, 0.96) 100%),
        radial-gradient(ellipse at 50% 40%, transparent 25%, rgba(0, 0, 0, 0.5) 100%),
        url('../images/hero_construction.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    animation: slowZoom 20s infinite alternate;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding-top: 90px;
    position: relative;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, var(--bg-dark), transparent);
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    font-size: 4rem;
    margin-bottom: 25px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    background: linear-gradient(to right, #fff, #e0e0e0);
    background-clip: text;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: slideUp 0.5s ease forwards;
}

/* Hero Content Alignment */
.hero-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-content span {
    color: var(--accent-gold);
    -webkit-text-fill-color: var(--accent-gold);
    text-shadow: 0 0 25px rgba(212, 175, 55, 0.6);
}

.hero-content p {
    font-size: 1.3rem;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: var(--white);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
    animation: slideUp 0.6s ease forwards;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;

    /* Safe for smaller screens */
    .page-header h1 {
        font-size: 1.35rem !important;
        /* Prevent overflow on small screens */
        padding: 0 10px;
        overflow-wrap: break-word;
        word-wrap: break-word;
        /* Legacy support */
    }
}

.hero-content .btn {
    animation: slideUp 0.7s ease forwards;
    margin: 0 !important;
    /* Reset margins in favor of gap */
}

/* Featured Categories & Cards */

/* Featured Categories & Cards */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 40px;
}



.category-card {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition);
    position: relative;
}

.category-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
}

/* Highlight Selected Product */
.category-card:target {
    border: 2px solid var(--accent-gold);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
    animation: slowZoom 1s ease-in-out alternate infinite;
    scroll-margin-top: 120px;
}

.category-img {
    height: 250px;
    width: 100%;
    overflow: hidden;
    position: relative;
    background-color: #f0f0f0;
}

.category-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
}

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

.category-card:hover .category-img img {
    transform: scale(1.1);
}

.category-info {
    padding: 25px;
}

.category-info h3 {
    color: var(--white);
    margin-bottom: 15px;
    font-size: 1.4rem;
    transition: var(--transition);
}

.category-card:hover .category-info h3 {
    color: var(--primary-color);
}

.category-info p {
    color: var(--text-muted);
}

/* Footer */
footer {
    background-color: #050505;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    padding: 80px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    margin-bottom: 50px;
}

.footer-grid h3 {
    color: var(--primary-color);
    margin-bottom: 25px;
    font-size: 1.2rem;
}

@media (min-width: 769px) {
    .footer-grid>div:nth-child(2) {
        text-align: center;
    }
}

.social-links {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.social-links a {
    color: var(--white);
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: var(--transition);
}

.social-links a:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #000;
    transform: scale(1.1);
}

.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
    text-align: center;
    font-size: 0.9rem;
}

.copyright a {
    color: var(--primary-color);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .logo img {
        height: 90px !important;
        /* Increased for mobile visibility */
    }

    .hamburger {
        display: block;
    }



    .nav-links {
        position: fixed;
        left: -100%;
        top: 90px;
        gap: 0;
        flex-direction: column;
        background-color: rgba(10, 10, 10, 0.98);
        backdrop-filter: blur(15px);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: var(--shadow-md);
        padding: 20px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        align-items: center;
        /* Center items horizontally */
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        /* Scrollable menu */
    }

    /* Custom Scrollbar for Mobile Menu */
    .nav-links::-webkit-scrollbar {
        width: 6px;
    }

    .nav-links::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
    }

    .nav-links::-webkit-scrollbar-thumb {
        background: linear-gradient(to bottom, var(--accent-gold), var(--primary-color));
        border-radius: 10px;
    }

    .nav-links.active {
        left: 0;
    }

    .nav-links li {
        margin: 20px 0;
        width: 100%;
        /* Ensure list items take full width */
    }

    .nav-links>li>a {
        display: block;
        /* maintain block structure */
        width: fit-content;
        /* shrink to text width */
        margin: 0 auto;
        /* center it */
    }



    /* Mobile Dropdown */
    .dropdown-menu {
        position: static;
        transform: none;
        background: rgba(255, 255, 255, 0.02);
        border: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        display: none;
        padding: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
        list-style: none !important;
        transition: none !important;
    }

    .dropdown.active .dropdown-menu {
        display: block;
        animation: slideDown 0.3s ease forwards;
    }

    .dropdown-menu li a {
        display: block;
        width: 100%;
        text-align: center !important;
        padding: 18px 20px;
        font-size: 1rem;
        background: rgba(255, 255, 255, 0.03);
        color: var(--text-color);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: background 0.3s ease !important;
    }

    .dropdown-menu li a:hover,
    .dropdown-menu li a:active {
        background: rgba(212, 175, 55, 0.1);
        color: var(--accent-gold);
        padding-left: 20px !important;
        /* Prevent desktop shift */
    }
}

/* --- Rate Us Widget Utilities --- */
.hidden {
    display: none !important;
}

.close-form-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff4d4d;
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.close-form-btn:hover {
    background-color: #ff0000;
    transform: scale(1.1);
}

.glass-effect {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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


/* Contact Form Styles */
.contact-form-container {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: var(--shadow-md);
}

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

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition);
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--accent-gold);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.contact-form button[type="submit"] {
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
}

/* Mobile Dropdown Overrides */
@media (max-width: 768px) {

    /* Kill Hover Effects on Mobile */
    .dropdown-menu li a:hover {
        padding-left: 0 !important;
        background: transparent !important;
        color: var(--text-muted) !important;
    }

    /* Structural Fix for Dropdown Container */
    .dropdown {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* 1. Reset positioning to stack naturally */
    .dropdown-menu,
    .dropdown:hover .dropdown-menu,
    .dropdown.active .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        min-width: 100%;
        box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
        border: none;
        background: rgba(0, 0, 0, 0.3);
        border-top: 1px solid rgba(212, 175, 55, 0.1);
        border-bottom: 1px solid rgba(212, 175, 55, 0.1);
        display: none;
        flex-direction: column;
        padding: 10px 0 !important;
        margin: 10px 0 !important;
    }

    /* Show when active */
    .dropdown.active .dropdown-menu {
        display: flex;
    }

    /* 2. Center the text and links */
    .dropdown-menu li a {
        padding: 8px 0 !important;
        /* Reduced from 12px for tighter spacing */
        text-align: center !important;
        width: 100%;
        justify-content: center;
        display: flex;
        padding-left: 0 !important;
        color: var(--text-muted);
        font-family: var(--font-body);
        font-size: 0.95rem;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .dropdown-menu li:last-child a {
        border-bottom: none;
    }

    .dropdown-menu li a:active,
    .dropdown-menu li a:focus {
        color: var(--accent-gold);
        background: rgba(212, 175, 55, 0.05);
    }

    /* 3. Ensure the parent list item doesn't interfere */
    .nav-links li {
        width: 100%;
    }

    /* Reset submenu item margins specifically */
    .dropdown-menu li {
        margin: 0 !important;
    }
}

/* Fix Mobile Footer Alignment */
.footer-grid {
    text-align: center;
    gap: 30px;
}

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

/* Center Contact Info Items that have icons */
.footer-grid p,
.footer-grid li,
.footer-grid a {
    justify-content: center;
    text-align: center;
}

/* Ensure flex items in footer (like icon+text) are centered */
.footer-grid p i,
.footer-grid li i {
    margin-right: 10px;
    /* Keep spacing but let flex center them */
}

.hero {
    padding-top: 130px;
    /* Reduced from 180px to bring content up */
    height: auto;
    min-height: 100vh;
    padding-bottom: 50px;
    display: flex;
    align-items: center;
}

/* Fix About Page Mobile Overflow */
.about-content {
    gap: 30px;
}

.about-image,
.about-text {
    min-width: 100%;
    /* Prevents overflow on small screens */
}




.hero-content h1 {
    font-size: 1.8rem;
    /* Further reduced from 2.2rem */
    line-height: 1.2;
    margin-bottom: 15px;
}

.hero-content p {
    font-size: 0.95rem;
    /* Slightly smaller */
    line-height: 1.4;
    padding: 0 10px;
    margin-bottom: 25px;
    /* Reduce bottom margin */
}

/* Mobile Layout Refinements */
.brand-grid {
    grid-template-columns: repeat(2, 1fr);
    /* Force 2 columns */
    gap: 10px;
}

.brand-card h3 {
    font-size: 0.9rem !important;
    /* Smaller brand text */
    margin-top: 5px;
}

/* Global Mobile Align & Resize */
section,
.container,
.footer-grid {
    text-align: center;
}

/* Force bullets left on mobile generally, but override for footer */
ul,
li {
    text-align: left;
}

/* Fix Footer Links Centering on Mobile */
.footer-grid ul,
.footer-grid li {
    text-align: center;
    padding-left: 0;
    /* Remove default padding if any */
}

h2 {
    font-size: 1.6rem !important;
    /* Smaller headings */
    margin-bottom: 15px;
}

h3 {
    font-size: 1.2rem;
}

p {
    font-size: 0.9rem;
}

.hero-content .btn {
    width: auto;
    /* Allow buttons to size naturally */
    min-width: 140px;
    /* Ensure touch target size */
    padding: 12px 20px;
    /* Slightly smaller padding */
    font-size: 0.9rem;
    display: inline-flex;
    /* Keep inline */
    margin: 5px;
    /* Add spacing around buttons */
}

/* Footer Logo Center Align */
.footer-grid div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-grid div:first-child a {
    display: inline-block;
}

/* Mobile Brand Grid Fix */
.brand-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

.brand-card {
    padding: 15px 10px;
    /* Reduced padding */
}

.brand-card h3 {
    font-size: 0.8rem;
    /* Smaller text */
    font-family: 'Outfit', sans-serif;
    /* Premium modern font */
    text-transform: uppercase;
    /* Classy look */
    letter-spacing: 1px;
    /* Spaced out */
    color: var(--accent-gold);
    /* Gold color for contrast */
}

/* Mobile Hero Buttons Inline */
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-content .btn {
    width: auto !important;
    /* Allow auto width */
    min-width: 140px;
    margin: 5px;
    display: inline-flex;
    font-size: 0.9rem;
    padding: 12px 20px;
}

/* Container for buttons to sit side-by-side if needed, 
       but simple inline-block with auto width usually simpler */
.hero-content br+.btn {
    margin-left: 0 !important;
    /* Reset margin from inline style */
}


/* Animations */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes slowZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

/* Scroll Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    /* Stronger slide only */
    transition: all 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(80px);
    transition: all 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Delays */
.delay-100 {
    transition-delay: 0.2s;
}

.delay-200 {
    transition-delay: 0.3s;
}

.delay-300 {
    transition-delay: 0.4s;
}

.delay-400 {
    transition-delay: 0.5s;
}

/* WhatsApp Buttons & Animations */
.btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
    border-color: #25D366;
    color: white !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    display: inline-flex;
    /* Fix alignment */
    align-items: center;
    /* Center vertically */
    justify-content: center;
    /* Center horizontally */
    gap: 10px;
    /* Space between icon and text */
}

/* Ensure Icon doesn't get squished */
.btn-whatsapp i {
    font-size: 1.2em;
    flex-shrink: 0;
}

.btn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
    border-color: #128C7E;
}

.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    animation: pulse-gold 2s infinite;
}

.whatsapp-float:hover {
    background: #128C7E;
    color: white;
    transform: scale(1.1);
}

@keyframes pulse-gold {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Enhanced Page Header */
/* Enhanced Page Header */
.page-header {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/header_texture.png');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    padding: 150px 0 80px;
    color: white;
    text-align: center;
    margin-top: 90px;
    position: relative;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
    /* Inner shadow for depth */
}

.page-header h1 {
    font-size: 3.5rem;
    margin-bottom: 15px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.page-header p {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* Image Slider */
.slider-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.slider-track {
    display: flex;
    width: 400%;
    /* 4 images */
    height: 100%;
    animation: slide 16s infinite;
}

.slider-track img {
    width: 25%;
    /* 100% / 4 */
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

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

    20% {
        transform: translateX(0);
    }

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

    45% {
        transform: translateX(-25%);
    }

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

    70% {
        transform: translateX(-50%);
    }

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

    95% {
        transform: translateX(-75%);
    }

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

/* Slider for 5 Images */
.slider-track-5 {
    display: flex;
    width: 500%;
    /* 5 images */
    height: 100%;
    animation: slide-5 20s infinite;
}

.slider-track-5 img {
    width: 20%;
    /* 100% / 5 */
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

@keyframes slide-5 {
    0% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(0);
    }

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

    /* Move to 2nd image */
    35% {
        transform: translateX(-20%);
    }

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

    /* Move to 3rd image */
    55% {
        transform: translateX(-40%);
    }

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

    /* Move to 4th image */
    75% {
        transform: translateX(-60%);
    }

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

    /* Move to 5th image */
    95% {
        transform: translateX(-80%);
    }

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

/* Slider for 8 Images */
.slider-track-8 {
    display: flex;
    width: 800%;
    /* 8 images */
    height: 100%;
    animation: slide-8 32s infinite;
}

.slider-track-8 img {
    width: 12.5%;
    /* 100% / 8 */
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

@keyframes slide-8 {
    0% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(0);
    }

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

    22.5% {
        transform: translateX(-12.5%);
    }

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

    35% {
        transform: translateX(-25%);
    }

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

    47.5% {
        transform: translateX(-37.5%);
    }

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

    60% {
        transform: translateX(-50%);
    }

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

    72.5% {
        transform: translateX(-62.5%);
    }

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

    85% {
        transform: translateX(-75%);
    }

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

    97.5% {
        transform: translateX(-87.5%);
    }

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

/* Slider for 7 Images */
.slider-track-7 {
    display: flex;
    width: 700%;
    /* 7 images */
    height: 100%;
    animation: slide-7 28s infinite;
}

.slider-track-7 img {
    width: 14.2857%;
    /* 100% / 7 */
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

@keyframes slide-7 {
    0% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(0);
    }

    12% {
        transform: translateX(-14.28%);
    }

    21% {
        transform: translateX(-14.28%);
    }

    23% {
        transform: translateX(-28.57%);
    }

    33% {
        transform: translateX(-28.57%);
    }

    35% {
        transform: translateX(-42.85%);
    }

    45% {
        transform: translateX(-42.85%);
    }

    47% {
        transform: translateX(-57.14%);
    }

    57% {
        transform: translateX(-57.14%);
    }

    59% {
        transform: translateX(-71.42%);
    }

    69% {
        transform: translateX(-71.42%);
    }

    71% {
        transform: translateX(-85.71%);
    }

    81% {
        transform: translateX(-85.71%);
    }

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

/* About Page Specifics */
.about-content {
    display: flex;
    gap: 50px;
    align-items: center;
    flex-wrap: wrap;
}

.about-image,
.about-text {
    flex: 1;
    min-width: 300px;
}

.about-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    display: block;
}

.about-list {
    list-style: none;
    margin-top: 20px;
    padding: 0;
}

.about-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    text-align: left;
}

.about-list li i {
    color: var(--accent-gold);
    margin-right: 10px;
    min-width: 20px;
    flex-shrink: 0;
}

/* Brands Section */
.brands-section {
    background-color: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.brand-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    /* Enhanced blur */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    /* Subtle Gold Border */
    border-radius: 12px;
    /* Smoother corners */
    padding: 30px 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* Subtle shadow */
    position: relative;
    overflow: hidden;
    /* Initial state for animation */
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-card.active {
    opacity: 1;
    transform: translateY(0);
}

/* Add a sheen effect on hover */
.brand-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: 0.5s;
}

.brand-card:hover::after {
    left: 100%;
}

.brand-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    border-color: var(--accent-gold);
}


.brand-card h3 {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    color: var(--text-muted);
    transition: var(--transition);
}

.brand-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
    transform: translateY(-5px);
}

.brand-card:hover h3 {
    color: var(--white);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* Fancy Divider */
.fancy-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.45), transparent);
    width: 260px;
    margin: 70px auto;
    border: none;
    opacity: 0.9;
    box-shadow: none;
    position: relative;
    overflow: visible;
}

.fancy-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--accent-gold);
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.55);
}

.fancy-divider.full-width {
    width: 100%;
    margin: 0;
}

.fancy-divider.full-width::after {
    display: none;
}

/* Ultra-Modern CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #1a0505 100%);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--primary-light);
    border-bottom: 1px solid var(--primary-light);
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.cta-section h2 {
    font-size: 3rem;
    margin-bottom: 20px;
    background: linear-gradient(to right, #fff, #D4AF37);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.cta-section .btn {
    margin-top: 30px;
}


/* Modern Contact Form */
.form-input {
    width: 100%;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    /* Glass effect */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-gold);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.1);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--accent-gold);
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Desktop Text Alignment */
@media (min-width: 768px) {
    .history-text {
        text-align: left;
    }
}


/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.cta-section h2 {
    color: var(--accent-gold);
    margin-bottom: 20px;
}

.cta-section p {
    margin-bottom: 30px;
    font-size: 1.1rem;
    opacity: 0.9;
}


.section-title {
    margin-bottom: 40px;
    text-align: center;
    position: relative;
    padding-bottom: 20px;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent-gold-dark), var(--accent-gold-light), var(--accent-gold-dark));
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

/* Rate Our Services Section */
.rate-us-section {
    padding: 80px 0;
    text-align: center;
    background-color: var(--bg-dark);
    position: relative;
    overflow: hidden;
}

.rate-us-section h2 {
    color: var(--white);
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.rate-us-section p.subtitle {
    color: var(--text-muted);
    margin-bottom: 40px;
    font-size: 1.1rem;
}

/* Star Container */
.star-rating {
    display: flex;
    justify-content: center;
    gap: 15px;
    direction: rtl;
    /* Reverse for easy CSS hover */
    margin-bottom: 30px;
}

.star-rating input {
    display: none;
}

.star-rating label {
    font-size: 2rem;
    /* Richer Gold Base */
    color: rgba(255, 215, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    /* Glow Wave Animation */
    animation: glow-wave 3.5s infinite ease-in-out;
}

/* Staggered Delays for Left-to-Right Wave (DOM is RTL: 5,4,3,2,1) */
.star-rating input:nth-of-type(5)+label {
    animation-delay: 0s;
}

/* Star 1 (Left) */
.star-rating input:nth-of-type(4)+label {
    animation-delay: 0.3s;
}

/* Star 2 */
.star-rating input:nth-of-type(3)+label {
    animation-delay: 0.6s;
}

/* Star 3 */
.star-rating input:nth-of-type(2)+label {
    animation-delay: 0.9s;
}

/* Star 4 */
.star-rating input:nth-of-type(1)+label {
    animation-delay: 1.2s;
}

/* Star 5 (Right) */

/* Glow Wave Keyframes */
@keyframes glow-wave {

    0%,
    100% {
        color: rgba(255, 215, 0, 0.3);
        transform: scale(1);
        text-shadow: none;
    }

    50% {
        color: #ffd700;
        /* Bright Gold */
        transform: scale(1.2);
        /* Slight Pop */
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.4);
        /* Glow */
    }
}

/* Active and Hover States */
/* Active and Hover States */
.star-rating input:checked~label,
.star-rating label:hover,
.star-rating label:hover~label {
    color: #ffeeb0;
    /* Very Light Gold / White-Gold Core */
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.4);
    /* Intense Glow */
    animation: none;
    /* Stop pulsing on interaction */
    transform: scale(1.3);
    /* Slightly larger pop */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .rate-us-section {
        padding: 40px 0;
        /* Minimal top spacing */
    }

    .star-rating label {
        font-size: 1.5rem;
    }

    .star-rating {
        gap: 10px;
        margin-bottom: 20px;
    }
}

/* Feedback Forms & Messages */
.feedback-form-container {
    max-width: 600px;
    margin: 0 auto;
    display: none;
    /* Hidden by default */
    animation: slideDown 0.5s ease;
    background: var(--bg-card);
    padding: 30px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.feedback-form-container h3 {
    margin-bottom: 20px;
    color: var(--accent-gold);
}

.feedback-form-container textarea,
.feedback-form-container input {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
    border-radius: 5px;
    font-family: var(--font-body);
    transition: all 0.3s ease;
}

.feedback-form-container textarea:focus,
.feedback-form-container input:focus {
    background: rgba(255, 255, 255, 0.1);
    /* Lighter Highlight */
    border-color: var(--accent-gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
    outline: none;
}

.feedback-form-container button {
    width: 100%;
}

.thank-you-message {
    display: none;
    /* Hidden by default */
    max-width: 600px;
    margin: 0 auto;
    animation: fadeIn 0.5s ease;
    padding: 30px;
    background: var(--bg-card);
    /* Consistent with other cards */
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.thank-you-message h3 {
    color: var(--accent-gold);
}

.thank-you-message p {
    margin-bottom: 20px;
    font-size: 1.1rem;
}


.thank-you-message strong {
    color: var(--accent-gold);
    font-weight: 700;
}

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

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Rate Us Isolated Page */
body.rate-us-page {
    /* display: flex; align-items: center; justify-content: center; removed to allow standard flow with header */
    min-height: 100vh;
    background: var(--bg-dark);
    padding-top: 150px;
    /* Offset handled by .page-header */
    display: block;
}

body.rate-us-page .rate-us-section {
    background: transparent;
    padding: 40px 0;
    width: 100%;
    max-width: 800px;
    margin: auto;
    /* Vertically center in remaining space if possible, or just standard flow */
}

/* Google Business Profile Highlight */
.google-highlight {
    color: var(--accent-gold);
    font-weight: 800;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
    font-size: 1.2em;
    letter-spacing: 0.5px;
    display: inline-block;
    padding: 0 5px;
    transition: var(--transition);
}

.google-highlight:hover {
    transform: scale(1.05);
    text-shadow: 0 0 25px rgba(212, 175, 55, 0.8);
    cursor: default;
}

/* Feedback System Autoscroll Fix */
#feedback-system {
    scroll-margin-top: 150px;
}

/* --- Desktop Specific Navigation Adjustments --- */
@media (min-width: 769px) {
    /* Logo left, menu truly centered. The empty 3rd column mirrors the logo
       column so the nav sits in the real centre of the header, not shoved right. */
    .navbar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }
    .navbar .logo { justify-self: start; }
    .navbar .nav-links { justify-self: center; }
    .navbar .hamburger { display: none; }

    .nav-links {
        height: 100%;
        align-items: stretch !important;
        /* Force items to full height */
    }

    /* Target ONLY top-level list items */
    .nav-links>li {
        display: flex;
        align-items: center;
        height: 100%;
    }

    /* Target ONLY top-level links */
    .nav-links>li>a {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 15px;
        /* Adjust horizontal spacing */
        padding-bottom: 0;
        /* consistent centering */
        justify-content: center;
    }

    /* Target ONLY top-level underlines */
    .nav-links>li>a::after {
        bottom: 40px;
        /* Adjust underline position from absolute bottom */
    }

    /* Submenu Stylings */
    .dropdown-menu {
        top: 100%;
        margin-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top: none !important;
        /* Remove top border */
        overflow: hidden;
        /* Clean corners */
    }

    /* Add borders between items */
    .dropdown-menu li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        /* Subtle divider */
    }

    .dropdown-menu li:last-child {
        border-bottom: none;
    }

    .dropdown-menu li a {
        height: auto !important;
        /* Reset height */
        display: block;
        /* Standard block for dropdowns */
        padding: 15px 25px;
        /* Comfy padding */
        line-height: 1.5;
        text-align: left;
        position: relative;
        overflow: hidden;
    }

    /* Hover effect for submenu items */
    .dropdown-menu li a:hover {
        background: rgba(255, 255, 255, 0.03);
        padding-left: 30px;
        /* Slide effect */
        color: var(--accent-gold);
    }

    /* Gold left border highlight on hover */
    .dropdown-menu li a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 3px;
        background: var(--accent-gold);
        transform: scaleY(0);
        transition: transform 0.3s ease;
    }

    .dropdown-menu li a:hover::before {
        transform: scaleY(1);
    }
}

/* Scroll Highlight Effect */
.category-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
    border: 2px solid transparent;
    /* Prepare for highlight */
}

.category-card.highlight {
    border-color: rgba(212, 175, 55, 0.5) !important;
    /* Subtler Gold */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

/* Mobile Optimizations */


/* Mobile Fixes for FAQ Page */
@media (max-width: 768px) {
    .page-header h1 {
        font-size: 2.1rem !important;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Ensure hamburger is visible */
    .hamburger span {
        background-color: var(--accent-gold) !important;
        display: block !important;
    }

    .hamburger {
        display: flex !important;
        z-index: 1000;
    }
}

/* Emergency Mobile Fixes (Logo & Hamburger) */
@media (max-width: 768px) {

    /* Restore Logo Size */
    .logo img {
        height: 85px !important;
        width: auto !important;
    }

    /* Force Hamburger Visibility */
    .hamburger {
        display: block !important;
        position: relative;
        z-index: 2000;
        cursor: pointer;
        padding-top: 10px;
        /* Align better with larger logo */
    }

    .hamburger .bar {
        display: block !important;
        background-color: var(--accent-gold) !important;
        width: 25px;
        /* Slightly smaller to balance */
        height: 3px;
        margin: 5px auto;
        /* Tighter spacing */
    }
}

/* =========================================
   Feature Card (No Beam)
   ========================================= */
.feature-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 30px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.feature-card h3 {
    margin-bottom: 5px;
    color: var(--primary-color);
}

.feature-card p {
    color: var(--text-muted);
}

/* =========================================
   Border Beam Animation (Classy & Compatible)
   ========================================= */

/* Base class: Transparent container */
.category-card,
.brand-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 10px;
}

/* 1. The Card Background (The Mask) - Middle Layer */
/* This sits on top of the beam to create the 'border' effect */
.category-card::before,
.brand-card::before {
    content: '';
    position: absolute;
    inset: 1px;
    /* Ultra-thin 1px border for classy look */
    background: var(--bg-card);
    /* Matches card background */
    z-index: 0;
    border-radius: 9px;
    /* 10px - 1px */
}

/* 2. The Rotating Beam - Bottom Layer */
.category-card::after,
.brand-card::after {
    content: '';
    position: absolute;
    /* Giant rotating square */
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -1;

    /* A subtle, sharp beam */
    background: conic-gradient(transparent 85%, var(--accent-gold) 100%);

    /* Rotate the entire element (Standard CSS - works everywhere) */
    animation: classy-spin 6s linear infinite;

    /* Hidden by default on Desktop */
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* 3. Content sits on top */
.category-card .category-img,
.category-card .category-info,
.brand-card h3,
.brand-card img {
    position: relative;
    z-index: 2;
}

/* Desktop: Show on Hover */
@media (min-width: 769px) {

    .category-card:hover::after,
    .brand-card:hover::after {
        opacity: 1;
    }
}

/* Mobile: Always visible but very subtle */
@media (max-width: 768px) {

    .category-card::after,
    .brand-card::after {
        opacity: 1 !important;
        animation: classy-spin 8s linear infinite;
        /* Even slower on mobile */
    }
}

@keyframes classy-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================================
   Universal Border Beam (Classy & Visible - OVERRIDE)
   ========================================= */

/* 1. Base Container */
.category-card,
.brand-card,
.feature-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 10px;
    height: 100%;
}

/* 2. The Inner Mask (Solid Background) */
/* MUST BE OPAQUE to hide the beam in the center */
.category-card::before,
.brand-card::before,
.feature-card::before {
    content: '';
    position: absolute;
    inset: 1px;
    /* 1px sleek border */
    background: #1e1e1e;
    /* Solid Hex Color (Not transparent rgba) */
    z-index: 0;
    /* Above beam */
    border-radius: 9px;
}

/* 3. The Rotating Beam (Gradient Layer) */
.category-card::after,
.brand-card::after,
.feature-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -1;
    /* Behind everything */

    /* Elegant Gold Gradient */
    background: conic-gradient(transparent 80%, var(--accent-gold) 100%);

    /* Constant slow rotation */
    animation: classy-spin 6s linear infinite;

    /* VISIBILITY: Subtle gold edge by default, full on hover */
    opacity: 0.18;
    transition: opacity 0.5s ease;
}

/* 4. Content Layers (Strictly on Top) */
.category-card .category-img,
.category-card .category-info,
.brand-card h3,
.brand-card img,
.feature-card i,
.feature-card h3,
.feature-card p {
    position: relative;
    z-index: 2;
}

/* Interaction: Brighten on Hover */
@media (min-width: 769px) {

    .category-card:hover::after,
    .brand-card:hover::after,
    .feature-card:hover::after {
        opacity: 1;
    }
}

/* Mobile: Slightly brighter default */
@media (max-width: 768px) {

    .category-card::after,
    .brand-card::after,
    .feature-card::after {
        opacity: 0.8;
        animation: classy-spin 8s linear infinite;
    }
}

/* Feature Card Specifics (Layout) */
.feature-card {
    padding: 30px;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-card h3 {
    margin-bottom: 5px;
    color: var(--primary-color);
}

.feature-card p {
    color: var(--text-muted);
}

@keyframes classy-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================================
   Interactive Pulse (Click Effect)
   ========================================= */
.category-card:active,
.brand-card:active,
.feature-card:active {
    transform: scale(0.98) translateY(2px) !important;
    /* Visual press */
    box-shadow: 0 0 30px var(--accent-gold), inset 0 0 10px var(--accent-gold) !important;
    /* Energy Pulse */
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}


/* =========================================
   Pulse on Hover (Heartbeat Animation)
   ========================================= */
@keyframes pulse-hover {
    0% {
        transform: translateY(-5px) scale(1);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    50% {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 0 25px var(--accent-gold);
    }

    100% {
        transform: translateY(-5px) scale(1);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }
}

@media (min-width: 769px) {

    .category-card:hover,
    .brand-card:hover,
    .feature-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45), 0 0 18px rgba(212, 175, 55, 0.12);
        border-color: var(--accent-gold);
    }
}


/* =========================================
   Mobile Scroll Pulse (Auto-Trigger)
   ========================================= */
.mobile-pulse {
    animation: pulse-hover 1.5s ease-in-out infinite !important;
    border-color: var(--accent-gold) !important;
}


/* =========================================
   Apply Pulse & Beam to FAQs (Override)
   ========================================= */
/* 1. Base Container */
.faq-item {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: transparent !important;
    /* Force transparency for mask */
    border: none;
    border-radius: 10px;
}

/* 2. Mask */
.faq-item::before {
    content: '';
    position: absolute;
    inset: 1px;
    background: #1e1e1e;
    /* Match global card bg */
    z-index: 0;
    border-radius: 9px;
}

/* 3. Beam */
.faq-item::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -1;
    background: conic-gradient(transparent 80%, var(--accent-gold) 100%);
    animation: classy-spin 6s linear infinite;
    opacity: 0.4;
    transition: opacity 0.5s ease;
}

/* 4. Content Z-Index Fix */
.faq-question,
.faq-answer {
    position: relative;
    z-index: 2;
}

/* 5. Interactions */
@media (min-width: 769px) {
    .faq-item:hover::after {
        opacity: 1;
        animation: pulse-hover 2s infinite ease-in-out;
    }
}

.faq-item:active {
    transform: scale(0.99);
    box-shadow: 0 0 15px var(--accent-gold) !important;
}

/* CTA Buttons Layout */
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
}

/* =========================================
   New Sticky WhatsApp Widget
   ========================================= */
.whatsapp-sticky {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #ffffff;
    padding: 12px 28px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
}

.whatsapp-sticky i {
    font-size: 1.4rem;
}

.whatsapp-sticky:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.6);
    color: #ffffff;
}

.whatsapp-sticky:active {
    transform: scale(0.95);
}

.whatsapp-sticky::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    z-index: -1;
    opacity: 0.35;
    animation: whatsapp-pulse-ring 3.5s ease-in-out infinite;
}

@keyframes whatsapp-pulse-ring {
    0% {
        transform: scale(0.95);
        opacity: 0.4;
    }

    100% {
        transform: scale(1.12);
        opacity: 0;
    }
}

/* Mobile: Compact View (Icon Only) or Smaller Pill? User wants text "WE'RE ONLINE", so maybe keep it or adjust size */
@media (max-width: 768px) {
    .whatsapp-sticky {
        bottom: 20px;
        right: 15px;
        padding: 8px 16px;
        font-size: 0.7rem;
        gap: 8px;
        background: linear-gradient(135deg, #25D366, #128C7E);
        /* Stronger Gradient */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.2);
        /* Subtle border for visibility */
    }

    .whatsapp-sticky i {
        font-size: 1.1rem;
    }

    footer {
        padding-bottom: 100px;
        /* Space for sticky widget (20px bottom + ~50px height + 20px gap) */
    }
}

/* Scroll Positioning Middleware */
.feedback-system {
    scroll-margin-top: 150px;
}

/* =========================================================
   LIGHT THEME — cream body, dark hero / page-header / footer
   Self-contained override. Delete this whole block to revert
   back to the original dark theme.
   ========================================================= */

:root {
    --bg-dark: #F4EEE1;      /* cream canvas (flips body + var-based section bgs) */
    --bg-card: #FBF7EF;      /* warm ivory cards (not stark white) */
    --cream-muted: #6A6456;  /* secondary text on cream */
    --cream-text: #2B2924;   /* primary text on cream */
    --cream-line: rgba(0, 0, 0, 0.10);
}

/* Canvas */
body {
    background-color: #F4EEE1;
    background-image:
        radial-gradient(circle at 15% 50%, rgba(128, 0, 0, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 85% 30%, rgba(212, 175, 55, 0.07) 0%, transparent 30%);
    color: var(--cream-text);
}

/* Light scrollbar */
::-webkit-scrollbar-track { background: #ece3d2; border-left: 1px solid rgba(0,0,0,0.06); }
::-webkit-scrollbar-thumb { border: 3px solid #ece3d2; }

/* Headings dark on cream (dark-zone headings re-asserted below by higher specificity) */
h2, h3, h4, h5, h6 { color: var(--cream-text); }

/* Generic body links/underline on cream */
.link-underline { border-bottom-color: rgba(0, 0, 0, 0.25); }

/* Inline muted/white/black baked into HTML -> readable on cream */
[style*="--text-muted"] { color: var(--cream-muted) !important; }
[style*="color: #fff"], [style*="color:#fff"] { color: var(--cream-text) !important; }
[style*="var(--white)"] { color: var(--cream-text) !important; }
[style*="#000000"], [style*="#0c0c0c"] { background-color: var(--bg-dark) !important; }

/* Counters: gold is low-contrast on cream -> darker gold */
.counter { color: var(--accent-gold-dark) !important; }

/* ---- Cards: warm ivory faces, hairline border + soft shadow, no rotating beam ---- */
.category-card, .feature-card, .faq-item {
    background: var(--bg-card) !important;
    border: 1px solid var(--cream-line) !important;
    box-shadow: 0 6px 18px rgba(120, 90, 20, 0.06);
}
.category-card::before,
.brand-card::before,
.feature-card::before,
.faq-item::before { background: var(--bg-card); }
.category-card::after,
.feature-card::after,
.faq-item::after { opacity: 0 !important; }

/* No-flicker on scroll: drop the (now pointless) blur and stop the hidden
   rotating-beam animation so cards don't repaint every frame on mobile. */
.category-card, .brand-card, .feature-card, .faq-item {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.category-card::after,
.brand-card::after,
.feature-card::after,
.faq-item::after { animation: none !important; }

.category-info h3 { color: var(--cream-text); }
.category-info p,
.feature-card p,
.brand-card h3,
.rate-us-section p.subtitle { color: var(--cream-muted); }
.brand-card:hover h3 { color: var(--primary-color); text-shadow: none; }
.feature-card:hover { box-shadow: 0 16px 36px rgba(120, 90, 20, 0.13); }

/* ---- Logos strip ---- */
.logos-strip { border-top-color: var(--cream-line) !important; border-bottom-color: var(--cream-line) !important; }
.logos-strip-label { color: var(--cream-muted) !important; }
.brand-pill {
    color: var(--accent-gold-dark) !important;
    border-color: rgba(170, 140, 44, 0.55) !important;
    background: rgba(212, 175, 55, 0.10) !important;
}
.brand-pill:hover { background: rgba(212, 175, 55, 0.20) !important; border-color: var(--accent-gold-dark) !important; }

/* ---- Brands section ---- */
.brands-section { border-top-color: var(--cream-line); border-bottom-color: var(--cream-line); }

/* Brand tiles -> defined gold-edged badges (plain white was too flat on cream) */
.brand-card {
    background: var(--bg-card) !important;
    border: 1px solid rgba(170, 140, 44, 0.40) !important;
    box-shadow: 0 6px 16px rgba(120, 90, 20, 0.06);
}
.brand-card::after { opacity: 0 !important; }   /* hide rotating beam on light */
.brand-card h3 {
    color: var(--primary-color) !important;
    font-weight: 700;
    letter-spacing: 1px;
}
@media (min-width: 769px) {
    .brand-card:hover {
        transform: translateY(-4px);
        border-color: var(--accent-gold-dark) !important;
        box-shadow: 0 12px 26px rgba(128, 0, 0, 0.12) !important;
        background: var(--bg-card) !important;
    }
}
.brand-card:hover h3 { color: var(--primary-color) !important; text-shadow: none; }

/* ---- Deep warm band: breaks up the cream so key sections stand apart ---- */
.band-deep {
    background: linear-gradient(180deg, #EDE4D1 0%, #F1EADB 100%);
    border-top: 1px solid var(--cream-line);
    border-bottom: 1px solid var(--cream-line);
}

/* ---- Delivery section: maroon brand band, strongest break on the page ---- */
.delivery-section {
    background: linear-gradient(135deg, #4B0000 0%, #6E0F0F 55%, #3E0505 100%) !important;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}
.delivery-heading { color: #FBF7EF !important; }
.delivery-text-col p,
.delivery-perks li { color: rgba(244, 238, 225, 0.85) !important; }
.delivery-perks li i { color: var(--accent-gold) !important; }

/* .btn-gold was silently losing to the base .btn maroon gradient (defined later in
   the file) -- invisible on the maroon band. Re-assert with higher specificity. */
.btn.btn-gold {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));
    border-color: var(--accent-gold-light);
    color: #1a1206;
}
.btn.btn-gold:hover {
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4);
    color: #1a1206;
}

/* ---- Rate Us band (was solid black) ---- */
.rate-us-section h2 { color: var(--primary-color) !important; }
.rate-us-section p { color: var(--cream-text) !important; }

/* ---- Rate Us star picker: bright #ffd700 + gold glows were tuned for the old
   dark page and wash out on cream. Muted tan for empty, the site's dark gold
   (same as the testimonial stars) for filled, warm brown shadow for depth. ---- */
.star-rating label {
    color: #C9BA98;                                   /* empty: warm tan, reads on cream */
    text-shadow: 0 1px 1px rgba(120, 90, 20, 0.12);
}
@keyframes glow-wave {
    0%, 100% {
        color: #C9BA98;
        transform: scale(1);
        text-shadow: 0 1px 1px rgba(120, 90, 20, 0.12);
    }
    50% {
        color: var(--accent-gold);
        transform: scale(1.15);
        text-shadow: 0 2px 8px rgba(170, 140, 44, 0.45);
    }
}
.star-rating input:checked~label,
.star-rating label:hover,
.star-rating label:hover~label {
    color: var(--accent-gold-dark);                   /* filled: matches testimonial stars */
    text-shadow: 0 2px 10px rgba(170, 140, 44, 0.5);
    animation: none;
    transform: scale(1.25);
}

/* ---- Rate Us form loader: covers the iframe until it finishes fetching ---- */
.form-loader {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--bg-card);
    border-radius: 10px;
    color: var(--cream-muted);
    font-size: 0.9rem;
    z-index: 2;
}
.form-loading .form-loader { display: flex; }
.form-loader p { margin: 0; }
.form-loader-spinner {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(170, 140, 44, 0.25);
    border-top-color: var(--accent-gold-dark);
    animation: form-spin 0.8s linear infinite;
}
@keyframes form-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .form-loader-spinner { animation-duration: 2.4s; }
}

/* ---- Forms on cream ---- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], textarea, select,
.form-input, .contact-form input, .contact-form textarea {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: var(--cream-text);
}
.form-input::placeholder, input::placeholder, textarea::placeholder { color: #9a9382; }
.contact-form label { color: var(--cream-muted); }

/* ---- FAQ items (page <style> sets white/#ccc, so !important) ---- */
.faq-question { color: var(--cream-text) !important; }
.faq-answer { color: var(--cream-muted) !important; }
.faq-item.faq-open .faq-question { color: var(--accent-gold-dark) !important; }

/* ---- Long-form article pages (.blog-content, set in page <style>) ---- */
.blog-content p,
.blog-content li { color: var(--cream-muted) !important; }
.blog-content h2 { color: var(--primary-color) !important; border-bottom-color: var(--cream-line) !important; }
.blog-content h3,
.blog-content strong { color: var(--cream-text) !important; }
[style*="#ccc"] { color: var(--cream-muted) !important; }

/* ---- Reviews: static light-themed cards replace the reputationhub iframe,
   which is a cross-origin dark widget we can't restyle. Real quotes, hand-picked
   from the live widget (see git history for the source), not auto-updating. ---- */
.reviews-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 45px;
}
.reviews-summary-score {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
}
.reviews-summary-stars { color: var(--accent-gold-dark); letter-spacing: 2px; }
.reviews-summary-count { color: var(--cream-muted); font-size: 0.95rem; }

/* Horizontal slider (all 21 real reviews) instead of a fixed grid of 6 --
   scroll-snap gives native touch/trackpad swipe, edge buttons scroll by one card. */
.testimonials-slider-wrap {
    position: relative;
    margin: 0 -4px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.testimonials-slider {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 40px 10px;
    scrollbar-width: none;
}
.testimonials-slider::-webkit-scrollbar { display: none; }

.testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--cream-line);
    border-radius: 10px;
    padding: 28px;
    box-shadow: 0 6px 18px rgba(120, 90, 20, 0.06);
    display: flex;
    flex-direction: column;
    flex: 0 0 300px;
    scroll-snap-align: start;
}
.testimonial-stars { color: var(--accent-gold-dark); letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-stars .filled-empty { color: var(--cream-line); }
.testimonial-quote {
    color: var(--cream-text);
    font-style: italic;
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 20px;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #FBF7EF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.testimonial-name { display: block; font-weight: 700; color: var(--cream-text); font-size: 0.95rem; }
.testimonial-date { display: flex; align-items: center; gap: 6px; color: var(--cream-muted); font-size: 0.8rem; }
.testimonial-date .fa-google { color: #4285F4; }

.reviews-slider-controls { display: flex; justify-content: center; gap: 16px; margin-top: 20px; }
.reviews-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(170, 140, 44, 0.4);
    background: var(--bg-card);
    color: var(--primary-color);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
}
.reviews-nav-btn:hover { background: rgba(212, 175, 55, 0.15); border-color: var(--accent-gold-dark); }

@media (max-width: 768px) {
    .testimonial-card { flex-basis: 82vw; }
}

/* ---- Footer stays DARK (anchors the page, re-assert over the cream cascade) ---- */
footer { background-color: #14110D; }
footer h3,
footer .footer-grid h3 { color: var(--accent-gold); }   /* maroon headings unreadable on black */
footer .copyright a { color: var(--accent-gold); }

/* =========================================================
   LIGHT HEADER + HERO + PAGE-HEADER (v75)
   Header/nav, hero and inner page banners now match the
   cream body. Uses images/logo_light.png (transparent cut
   of the logo) since logo.png has a dark background baked in.
   ========================================================= */

/* ---- Header: warm ivory glass, dark nav text ---- */
header {
    background-color: rgba(249, 244, 234, 0.92);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 14px rgba(60, 40, 10, 0.08);
}
.nav-links li a { color: var(--cream-text); }
.nav-links li a:hover,
.nav-links li a.active { color: var(--primary-color); }
/* No hover underline -- colour change alone marks the active/hovered item. */
.nav-links li a::after { display: none; }
.logo:hover img { filter: drop-shadow(0 2px 8px rgba(128, 0, 0, 0.25)); }
.bar { background-color: var(--primary-color); }

/* Compact bar: 130px with a 120px logo ate too much screen. Also aligns the
   mobile menu, which slides out at top: 90px and assumed a ~90px bar. */
.navbar { height: 92px; }
.logo img { height: 72px; }
@media (max-width: 768px) {
    header .logo img { height: 60px !important; }
    .nav-links { top: 92px; max-height: calc(100vh - 92px); }
}

/* "Rate Us" -> pill CTA so the nav ends with an action, not another text link */
.nav-links li a.btn-nav {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #FBF7EF;
    padding: 10px 22px;
    border-radius: 30px;
    border: 1px solid var(--primary-light);
    align-self: center;      /* parent li stretches to bar height; keep the pill compact */
    height: auto;            /* desktop media rule forces nav anchors to height: 100% */
}
.nav-links li a.btn-nav::after { display: none; }
.nav-links li a.btn-nav:hover {
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(128, 0, 0, 0.3);
}

/* Desktop dropdown -> ivory panel */
@media (min-width: 769px) {
    .dropdown-menu {
        background: rgba(251, 247, 239, 0.97);
        border: 1px solid var(--cream-line);
        border-top: 2px solid var(--primary-color);
        box-shadow: 0 14px 34px rgba(60, 40, 10, 0.16);
    }
}
.dropdown-menu li a { color: var(--cream-text); }
.dropdown-menu li a:hover {
    background: linear-gradient(90deg, rgba(128, 0, 0, 0.07), transparent);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
}

/* Mobile slide-down menu -> ivory */
@media (max-width: 768px) {
    /* mobile fixes above force gold bars; maroon reads better on ivory */
    .hamburger .bar,
    .hamburger span { background-color: var(--primary-color) !important; }

    .nav-links {
        background-color: rgba(249, 244, 234, 0.98);
        border-top: 1px solid var(--cream-line);
        box-shadow: 0 18px 30px rgba(60, 40, 10, 0.14);
    }
    .nav-links::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); }
    .dropdown-menu { background: rgba(0, 0, 0, 0.03); }
}

/* ---- Hero: light wash over the site photo (photo stays visible), dark text ---- */
.hero {
    background:
        linear-gradient(to bottom, rgba(244, 238, 225, 0.50) 0%, rgba(246, 240, 228, 0.38) 45%, rgba(244, 238, 225, 0.92) 100%),
        url('../images/hero_construction_v2.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--cream-text);
}
.hero::after { background: linear-gradient(to top, #F4EEE1, transparent); }

/* Mobile: lighter wash + crop shifted toward the buildings, and the hero hugs
   its content instead of stretching to 100vh -- full-height flex centering
   left a big dead band below the buttons on tall phones. */
@media (max-width: 768px) {
    .hero {
        background:
            linear-gradient(to bottom, rgba(244, 238, 225, 0.25) 0%, rgba(246, 240, 228, 0.35) 45%, rgba(244, 238, 225, 0.96) 100%),
            url('../images/hero_construction_v2.jpg');
        background-size: cover;
        background-position: 68% 50%;
        min-height: 0;
        padding-top: 130px;      /* clear the fixed header */
        padding-bottom: 60px;
    }
}

/* Text sits over a visible photo now -> a soft cream scrim behind the whole content
   block (fades out at the edges), text halos alone were not enough on the busy photo */
.hero-content {
    background: radial-gradient(ellipse closest-side,
        rgba(244, 238, 225, 0.92) 0%,
        rgba(244, 238, 225, 0.78) 55%,
        rgba(244, 238, 225, 0.45) 80%,
        rgba(244, 238, 225, 0) 100%);
    padding-top: 40px;
    padding-bottom: 40px;
}
.hero-content h1 {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--cream-text);
    -webkit-text-fill-color: var(--cream-text);
    text-shadow: 0 2px 16px rgba(244, 238, 225, 0.95), 0 1px 4px rgba(244, 238, 225, 0.8);
}
.hero-content h1 span {
    color: var(--primary-color) !important;      /* beats inline gold */
    -webkit-text-fill-color: var(--primary-color);
    text-shadow: 0 2px 16px rgba(244, 238, 225, 0.95), 0 1px 4px rgba(244, 238, 225, 0.8);
}
.hero-content p {
    color: #3E382E;                               /* darker than cream-muted: photo shows behind */
    text-shadow: 0 1px 10px rgba(244, 238, 225, 0.9);
}

/* Trust bar (styled in page <style>, so !important) -- halo for legibility over the now-visible photo.
   .htb-item needs its own rule: ".hero-content span" (base theme) sets span color directly,
   which beats inheriting from .hero-trust-bar even with !important there. Also reset
   -webkit-text-fill-color -- that base rule sets it too, and it wins over `color` in Chromium. */
.hero-trust-bar,
.hero-trust-bar .htb-item {
    color: #3E382E !important;
    -webkit-text-fill-color: #3E382E !important;
    text-shadow: 0 1px 10px rgba(244, 238, 225, 0.9);
}
.htb-star {
    color: var(--accent-gold-dark) !important;
    -webkit-text-fill-color: var(--accent-gold-dark) !important;
}
.htb-dot {
    color: var(--accent-gold-dark) !important;
    -webkit-text-fill-color: var(--accent-gold-dark) !important;
}

/* ---- Inner page banners: cream wash over texture, maroon title ---- */
.page-header {
    background: linear-gradient(rgba(244, 238, 225, 0.93), rgba(244, 238, 225, 0.93)), url('../images/header_texture.png');
    background-size: cover;
    background-position: center;
    color: var(--cream-text);
    box-shadow: none;
    border-bottom: 1px solid var(--cream-line);
}
.page-header h1 {
    /* kill the global white->gold gradient text, unreadable on cream */
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--primary-color);
    -webkit-text-fill-color: var(--primary-color);
    text-shadow: none;
}
.page-header p { color: var(--cream-muted); opacity: 1; }