/* Root Variables - Color Scheme  */
:root {
    --primary-orange: #FF6B00;
    --primary-blue: #1E40AF;
    --dark-blue: #1E3A8A;
    --light-blue: #3B82F6;
    --text-dark: #1F2937;
    --text-gray: #6B7280;
    --bg-light: #F9FAFB;
    --white: #FFFFFF;
    --gradient-primary: linear-gradient(135deg, #FF6B00 0%, #FF8F3C 100%);
    --gradient-blue: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background: var(--white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

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

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

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

/* ===== MAIN HEADER - TRANSPARENT ===== */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

/* Header Left */
.header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #9CA3AF;
    transition: all 0.3s ease;
}

.menu-toggle:hover span {
    background-color: #FFFFFF;
}

.header-icon {
    color: #FFFFFF;
    font-size: 1.25rem;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-icon:hover {
    color: var(--primary-orange);
}

/* Header Center */
.header-center {
    flex: 2;
    display: flex;
    justify-content: center;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.brand-logo i {
    color: #FFFFFF;
    font-size: 1.75rem;
}

.brand-name {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.brand-highlight {
    color: #EF4444;
}

.reg-mark {
    font-size: 0.75rem;
    vertical-align: top;
    color: #9CA3AF;
}

/* Header Right */
.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
    flex: 1;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.contact-label {
    color: #9CA3AF;
}

.contact-number {
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: underline;
}

.contact-number:hover {
    color: var(--primary-orange);
}

.whatsapp-icon {
    font-size: 1.5rem;
}

.user-icon {
    font-size: 1.5rem;
}

/* Sidebar Navigation */
.sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100vh;
    background: #FFFFFF;
    z-index: 1001;
    transition: left 0.3s ease;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.sidebar.active {
    left: 0;
}

.sidebar-header {
    padding: 1.5rem;
    background: #0F172A;
    color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-logo {
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.close-sidebar {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
}

.sidebar-nav {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    color: #374151;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    background: #EFF6FF;
    color: var(--primary-blue);
}

.sidebar-nav a i {
    width: 20px;
    text-align: center;
}

.sidebar-divider {
    height: 1px;
    background: #E5E7EB;
    margin: 1rem 0;
}

.sidebar-logout {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    color: #EF4444;
    background: none;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    text-align: left;
}

.sidebar-logout:hover {
    background: #FEF2F2;
}

.sidebar-btn {
    background: var(--gradient-primary);
    color: #FFFFFF !important;
    justify-content: center;
    margin-top: auto;
}

.sidebar-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
}

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

/* =========================================
   Premium Auth Flip Card Styles
   ========================================= */
.auth-wrapper {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../images/hero-bg.jpg') no-repeat center center/cover;
    position: relative;
    padding: 2rem;
    overflow-x: hidden;
}

.auth-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(135deg, rgba(16, 16, 16, 0.9) 0%, rgba(16, 16, 16, 0.7) 100%);*/
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1;
}

.auth-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.auth-logo {
    text-align: center;
    margin-bottom: 1rem;
    animation: fadeInDown 0.8s ease-out;
}

.auth-logo i {
    font-size: 3rem;
    color: var(--primary-orange);
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 10px rgba(255, 107, 0, 0.5));
}

.auth-logo h1 {
    font-family: 'Playfair Display', serif;
    color: white;
    font-size: 2rem;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.auth-logo p {
    color: #cbd5e1;
    font-size: 1rem;
    letter-spacing: 1px;
}

/* Flip Card Container */
.flip-container {
    perspective: 1000px;
    width: 100%;
    max-width: 450px;
    position: relative;
    /* Anchor for repair steps */
}

.flipper {
    position: relative;
    width: 100%;
    min-height: 550px;
    /* Adjust based on content */
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.flipper.flipped {
    transform: rotateY(180deg);
}

.auth-card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.auth-card-face.back {
    transform: rotateY(180deg);
}

/* Premium Form Elements */
.auth-title {
    color: white;
    text-align: center;
    font-size: 1.75rem;
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 1rem;
}

.auth-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: var(--primary-orange);
    border-radius: 3px;
}

.premium-input-group {
    margin-bottom: 1.25rem;
    position: relative;
}

.premium-input-group i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    transition: color 0.3s ease;
}

.premium-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    border-radius: 10px;
    color: white;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.premium-input:focus {
    background: rgba(0, 0, 0, 0.5);
    border-color: var(--primary-orange);
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.1);
}

.premium-input:focus+i {
    color: var(--primary-orange);
}

.premium-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff8f00 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 1rem;
    text-transform: uppercase;
}

.premium-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 107, 0, 0.3);
}

.auth-switch {
    text-align: center;
    margin-top: auto;
    /* Push to bottom */
    padding-top: 1.5rem;
    color: #cbd5e1;
    font-size: 0.95rem;
}

.auth-switch a {
    color: var(--primary-orange);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s;
}

.auth-switch a:hover {
    color: #ffa04d;
    text-decoration: underline;
}

/* Repair Steps (Side Visual) */
.repair-steps {
    display: none;
    /* Hidden on mobile */
    position: absolute;
    right: -250px;
    top: 50%;
    transform: translateY(-50%);
}

@media (min-width: 1200px) {
    .flip-container {
        margin-right: 15rem;
        /* Make space for steps if needed, or center it */
        margin-right: 0;
    }

    .repair-steps {
        display: block;
        right: -300px;
    }
}

.step-item {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 250px;
    animation: fadeInRight 0.8s ease-out backwards;
}

.step-item:nth-child(1) {
    animation-delay: 0.2s;
}

.step-item:nth-child(2) {
    animation-delay: 0.4s;
}

.step-item:nth-child(3) {
    animation-delay: 0.6s;
}

.step-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 107, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-orange);
}

.step-text h4 {
    color: white;
    font-size: 0.9rem;
    margin: 0;
}

.step-text p {
    color: #94a3b8;
    font-size: 0.75rem;
    margin: 0;
}

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

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

/* Responsive Adjustments */
@media (max-width: 768px) {
    .contact-info {
        display: none;
    }

    .brand-name {
        font-size: 1.2rem;
    }

    .header-container {
        padding: 0 1rem;
    }
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.section-title p {
    font-size: 1.125rem;
    color: var(--text-gray);
    max-width: 600px;
    margin: 1.5rem auto 0;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 1rem;
}

.service-card {
    background: var(--white);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    border: 1px solid #F3F4F6;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.service-icon {
    width: 70px;
    height: 70px;
    background: var(--gradient-primary);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    color: var(--white);
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.service-card p {
    color: var(--text-gray);
    margin-bottom: 1.5rem;
}

/* Testimonials */
.testimonials {
    background: var(--bg-light);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.testimonial-card {
    background: var(--white);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    position: relative;
}

.stars {
    color: #FCD34D;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.testimonial-card p {
    font-style: italic;
    margin-bottom: 1.5rem;
    color: var(--text-gray);
}

.customer-name {
    font-weight: 700;
    color: var(--text-dark);
    font-style: normal;
}

/* About Section */
.about-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    align-items: center;
}

.about-text {
    padding: 1rem;
}

.about-features {
    list-style: none;
    margin-top: 2rem;
}

.about-features li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    color: var(--text-gray);
}

.about-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-orange);
    font-weight: bold;
    font-size: 1.25rem;
}

/* Appointment Form */
.appointment-section {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.05) 0%, rgba(255, 107, 0, 0.05) 100%);
}

.appointment-form {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    padding: 3rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid #E5E7EB;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-orange);
}

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

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.alert {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.alert-success {
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #10B981;
}

/* Footer */
footer {
    background: var(--text-dark);
    color: var(--white);
    padding: 3rem 0 1rem;
}

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

.footer-section h3 {
    color: var(--white);
    margin-bottom: 1.5rem;
}

.footer-section p,
.footer-section a {
    color: #D1D5DB;
    margin-bottom: 0.5rem;
}

.footer-section a:hover {
    color: var(--primary-orange);
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-bottom {
    border-top: 1px solid #374151;
    padding-top: 2rem;
    text-align: center;
    color: #9CA3AF;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: #374151;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--primary-orange);
    transform: translateY(-3px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        box-shadow: var(--shadow-lg);
        padding: 1rem;
    }

    .nav-links.active {
        display: flex;
    }

    .mobile-toggle {
        display: flex;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .services-grid,
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .appointment-form {
        padding: 2rem 1.5rem;
    }
}

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

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

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

/* Utility Classes */
.text-center {
    text-align: center;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.bg-orange {
    background: var(--gradient-primary);
}

.bg-blue {
    background: var(--gradient-blue);
}

.text-orange {
    color: var(--primary-orange);
}

.text-white {
    color: var(--white);
}

/* Hero Appointment Card Overlay */
.hero-text {
    max-width: 600px;
    margin-bottom: 2rem;
}

.hero-appointment-card {
    background: var(--white);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--shadow-xl);
    max-width: 450px;
    margin-left: auto;
}

.hero-appointment-card h3 {
    color: var(--text-dark);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.hero-appointment-card .form-group {
    margin-bottom: 1rem;
}

.hero-appointment-card input,
.hero-appointment-card select,
.hero-appointment-card textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    transition: border-color 0.3s ease;
}

.hero-appointment-card input:focus,
.hero-appointment-card select:focus,
.hero-appointment-card textarea:focus {
    outline: none;
    border-color: var(--primary-orange);
}

.hero-appointment-card .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0;
}

/* Responsive adjustments for hero appointment card */
@media (max-width: 968px) {
    .hero-content {
        flex-direction: column;
        align-items: center;
    }

    .hero-text {
        text-align: center;
        margin-bottom: 2rem;
    }

    .hero-appointment-card {
        margin-left: 0;
        max-width: 100%;
    }

    .hero-appointment-card .form-row {
        grid-template-columns: 1fr;
    }
}


/* Video Toggle Button */
.video-toggle-btn {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    z-index: 4;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary-blue);
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
}

.video-toggle-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.video-toggle-btn i {
    transition: all 0.2s ease;
}


/* Hero Video Background */
.hero-video {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
    /* Account for fixed header */
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Default fallback */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Ensure video toggle button is above overlay */
.video-toggle-btn {
    z-index: 10 !important;
}

/* --- New Hero Design (Transparent Grid) --- */

.hero-content-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 60px;
}

.hero-text-center {
    text-align: center;
    color: #fff;
    margin-bottom: 3rem;
    max-width: 900px;
}

.hero-text-center h1 {
    font-size: 3.5rem;
    font-weight: 400;
    /* More elegant, thinner font as in screenshot */
    letter-spacing: 1px;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    font-family: 'Playfair Display', serif;
    /* Assuming a serif font from screenshot */
}

.hero-text-center p {
    font-size: 0.9rem;
    letter-spacing: 2px;
    opacity: 0.9;
}

/* Transparent Form Grid */
.hero-form-container {
    width: 100%;
    max-width: 1200px;
    padding: 0 1rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.form-group-transparent {
    position: relative;
}

.form-group-transparent label {
    display: block;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.text-red {
    color: #ff4d4d;
}

.input-with-icon {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.input-with-icon:hover,
.input-with-icon:focus-within {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.input-with-icon input,
.input-with-icon select {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    padding: 0.8rem 1rem 0.8rem 2.5rem;
    /* Space for icon */
    font-size: 0.9rem;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

.input-with-icon i,
.input-with-icon .input-icon-text {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 0.9rem;
    pointer-events: none;
}

/* Date input specific */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.6;
    cursor: pointer;
}

/* Select dropdown styling */
.input-with-icon select option {
    background: #fff;
    color: #333;
}

/* Book Button */
.form-submit-center {
    text-align: center;
    margin-top: 1rem;
}

.btn-book-appointment {
    background: #d4cbb3;
    /* Beige/Gold color from screenshot */
    color: #333;
    border: none;
    padding: 1rem 3rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-book-appointment:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Responsive */
@media (max-width: 992px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-text-center h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .hero-text-center h1 {
        font-size: 2rem;
    }

    .hero-video {
        padding-top: 100px;
        align-items: flex-start;
        /* Move content up on mobile */
    }
}

/* --- Header Transparency & Cinematic View --- */

/* Make header transparent/dark blue matching screenshot */
header {
    background: rgba(15, 23, 42, 0.1);
    /* Almost transparent */
    backdrop-filter: blur(5px);
    /* Glass effect */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: fixed;
    width: 100%;
    z-index: 100;
    transition: all 0.3s ease;
}

/* Cinematic View State */
body.cinematic-mode header {
    transform: translateY(-100%);
    /* Hide header in cinematic mode */
}

body.cinematic-mode .hero-content-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

body.cinematic-mode .hero-overlay {
    opacity: 0 !important;
    /* Remove overlay to show raw video */
    transition: all 0.5s ease;
}

body.cinematic-mode .video-toggle-btn {
    opacity: 0;
    /* Hide play/pause button in cinematic mode if desired, or keep it */
}

/* Add a close button for cinematic mode */
.cinematic-close-btn {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 200;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    display: none;
    background: rgba(0, 0, 0, 0.5);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

body.cinematic-mode .cinematic-close-btn {
    display: flex;
}

/* ============================================== */
/* NEW SECTIONS - CAR REPAIR BD UI */
/* ============================================== */

/* Section Padding & Headers */
.section-padding {
    padding: 5rem 0;
}

.section-header {
    margin-bottom: 3rem;
}

.section-subtitle {
    display: inline-block;
    color: var(--primary-orange);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.section-desc {
    font-size: 1.125rem;
    color: var(--text-gray);
    max-width: 600px;
    margin: 0 auto;
}

/* Enhanced Services Cards */
.service-card {
    background: var(--white);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.service-card-icon {
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.service-card:hover .service-card-icon {
    transform: scale(1.1) rotate(5deg);
}

.service-card-content {
    padding: 2rem;
}

.service-card-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.service-card-content p {
    font-size: 0.95rem;
    color: var(--text-gray);
    margin-bottom: 1.25rem;
    line-height: 1.7;
}

.service-link {
    color: var(--primary-orange);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
}

.service-link:hover {
    gap: 0.75rem;
    color: var(--primary-blue);
}

/* ============================================== */
/* PROMOTIONAL BANNERS */
/* ============================================== */
.promo-banner {
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.promo-banner-dark {
    background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
    color: white;
}

.promo-banner-gradient {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #FF8F3C 50%, var(--primary-blue) 100%);
    color: white;
}

.promo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/images/car-pattern.png') repeat;
    opacity: 0.05;
}

.promo-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.promo-content-center {
    flex-direction: column;
    text-align: center;
    justify-content: center;
}

.promo-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.promo-icon-large {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.promo-text {
    flex: 1;
}

.promo-subtitle {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.8;
    margin-bottom: 0.5rem;
    display: block;
}

.promo-text h2,
.promo-content-center h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    color: white;
}

.promo-text p,
.promo-content-center p {
    font-size: 1.125rem;
    opacity: 0.9;
    color: white;
    margin-bottom: 1rem;
}

.promo-action a,
.promo-content-center a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================== */
/* STATS COUNTERS */
/* ============================================== */
.stats-section {
    padding: 4rem 0;
    background: var(--bg-light);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.stat-item {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
}

.stat-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin: 0 auto 1rem;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-blue);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1rem;
    color: var(--text-gray);
    font-weight: 500;
}

/* ============================================== */
/* FEATURES GRID (Why Choose Us) */
/* ============================================== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.feature-card {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.feature-card:hover {
    border-color: var(--primary-orange);
    transform: translateY(-5px);
}

.feature-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.1), rgba(30, 64, 175, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--primary-orange);
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    background: var(--gradient-primary);
    color: white;
}

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.feature-card p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.7;
}

/* ============================================== */
/* BRANDS SECTION */
/* ============================================== */
.brands-section {
    background: white;
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1.5rem;
    align-items: center;
}

.brand-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--bg-light);
    border-radius: 1rem;
    transition: all 0.3s ease;
    min-height: 100px;
}

.brand-item:hover {
    background: white;
    box-shadow: var(--shadow-lg);
    transform: scale(1.05);
}

.brand-item img {
    max-width: 60px;
    max-height: 40px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.brand-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.brand-item span {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray);
    margin-top: 0.5rem;
}

/* ============================================== */
/* ABOUT SECTION - REDESIGNED */
/* ============================================== */
.about-section {
    background: var(--bg-light);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}

.about-image-wrapper {
    position: relative;
    background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-blue) 100%);
    border-radius: 1rem;
    padding: 3rem;
    min-height: 400px;
    display: flex;
    align-items: flex-end;
}

.about-experience-badge {
    position: absolute;
    top: -20px;
    right: -20px;
    background: var(--primary-orange);
    color: white;
    padding: 1.5rem;
    border-radius: 1rem;
    text-align: center;
    box-shadow: var(--shadow-xl);
}

.badge-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.badge-text {
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0.9;
}

.about-content .section-subtitle {
    margin-bottom: 0.5rem;
}

.about-content .section-title {
    font-size: 2rem;
}

.about-lead {
    font-size: 1.125rem;
    color: var(--text-dark);
    font-weight: 500;
    margin-bottom: 1rem;
}

.about-features-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.about-features-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: var(--text-gray);
}

.about-features-list li i {
    color: var(--primary-orange);
    font-size: 1.125rem;
    margin-top: 0.25rem;
}

/* ============================================== */
/* TESTIMONIALS - REDESIGNED */
/* ============================================== */
.testimonials-section {
    background: white;
}

.testimonial-card {
    background: var(--bg-light);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.testimonial-card:hover {
    background: white;
    border-color: var(--primary-orange);
    box-shadow: var(--shadow-lg);
}

.testimonial-rating {
    color: #FCD34D;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.testimonial-text {
    font-size: 1rem;
    color: var(--text-dark);
    font-style: italic;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.author-avatar {
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.author-info h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.author-info span {
    font-size: 0.875rem;
    color: var(--text-gray);
}

/* ============================================== */
/* CTA SECTION */
/* ============================================== */
.cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
    color: white;
}

.cta-content h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: white;
}

.cta-content p {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    color: white;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================== */
/* BUTTON STYLES */
/* ============================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
}

.btn-primary:hover {
    box-shadow: 0 10px 25px rgba(255, 107, 0, 0.35);
    transform: translateY(-2px);
}

.btn-white {
    background: white;
    color: var(--text-dark);
}

.btn-white:hover {
    background: #F3F4F6;
    transform: translateY(-2px);
}

.btn-outline-primary {
    background: transparent;
    border: 2px solid var(--primary-orange);
    color: var(--primary-orange);
}

.btn-outline-primary:hover {
    background: var(--primary-orange);
    color: white;
}

.btn-outline-white {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* ============================================== */
/* RESPONSIVE STYLES */
/* ============================================== */
@media (max-width: 1200px) {
    .brands-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-image-wrapper {
        min-height: 300px;
    }

    .promo-content {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .section-padding {
        padding: 3rem 0;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .brands-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .cta-content h2 {
        font-size: 1.75rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 576px) {
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .promo-text h2 {
        font-size: 1.5rem;
    }
}

/* Utilities */
.text-center {
    text-align: center;
}

.mt-4 {
    margin-top: 2rem;
}


/* ============================================== */
/* FOOTER STYLES - REDESIGNED */
/* ============================================== */
footer {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    color: #94A3B8;
    padding-top: 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-section h3 {
    color: white;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-section h3 i {
    color: var(--primary-orange);
}

.footer-section>p {
    line-height: 1.4;
    margin-bottom: 0.5rem;
    color: #94A3B8;
}

.footer-section p i {
    color: var(--primary-orange);
    width: 20px;
    margin-right: 0.5rem;
}

.social-links {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--primary-orange);
    transform: translateY(-3px);
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 0.4rem;
}

.footer-links a {
    color: #94A3B8;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.footer-links a::before {
    content: '';
    margin-right: 0.5rem;
    opacity: 0;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary-orange);
    padding-left: 0.5rem;
}

.footer-links a:hover::before {
    opacity: 1;
}

.footer-bottom {
    padding: 1rem 0;
    text-align: center;
    font-size: 0.85rem;
}

.footer-bottom p {
    color: #64748B;
    margin: 0;
}

@media (max-width: 992px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}


/* ============================================== */
/* FIXED VIDEO BACKGROUND */
/* ============================================== */

/* Fixed Video Background covering entire viewport */
.fixed-video-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
}

.fixed-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fixed-video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    z-index: -1;
}

/* Main content wrapper - scrolls over video */
.main-content-overlay {
    position: relative;
    z-index: 1;
}

/* Hero Section becomes transparent (video shows through) */
.hero-video.video-fullpage {
    background: transparent !important;
    min-height: 100vh;
}

.hero-video.video-fullpage .hero-video-container {
    display: none;
    /* Hide the in-section video container since we use fixed */
}

/* Transparent/Glass effect for all content sections */
.section-glass {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.section-glass-dark {
    background: rgba(15, 23, 42, 0.9) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Services section with glass effect */
.services.section-glass {
    background: rgba(255, 255, 255, 0.92) !important;
}

/* Stats section */
.stats-section.section-glass {
    background: rgba(249, 250, 251, 0.9) !important;
}

/* Why choose us */
.why-choose.section-glass {
    background: rgba(255, 255, 255, 0.9) !important;
}

/* Brands section */
.brands-section.section-glass {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* About section */
.about-section.section-glass {
    background: rgba(249, 250, 251, 0.92) !important;
}

/* Testimonials */
.testimonials-section.section-glass {
    background: rgba(255, 255, 255, 0.9) !important;
}

/* Promo banners keep their gradients but with transparency */
.promo-banner.section-glass-dark.promo-banner-dark {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 58, 138, 0.95) 100%) !important;
}

.promo-banner.section-glass-dark.promo-banner-gradient {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.95) 0%, rgba(255, 143, 60, 0.95) 50%, rgba(30, 64, 175, 0.95) 100%) !important;
}

/* CTA section */
.cta-section.section-glass-dark {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 58, 138, 0.95) 100%) !important;
}

/* Footer */
footer.section-glass-dark {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%) !important;
}


/* ============================================== */
/* EXACT STYLE */
/* ============================================== */

/* Beige/Cream Color Scheme */
:root {
    --carrepairbd-beige: #E8E4D9;
    --carrepairbd-cream: #F5F0E6;
    --carrepairbd-dark: #1A1A2E;
    --carrepairbd-gold: #C9A227;
    --carrepairbd-red: #8B0000;
}

/* Fixed Video Background - Keep always visible */
.fixed-video-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    overflow: hidden;
}

.fixed-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fixed-video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

/* Override section-glass with carrepairbd beige style */
.section-glass {
    background: rgba(232, 228, 217, 0.92) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Dark sections with slight transparency */
.section-glass-dark {
    background: rgba(26, 26, 46, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Services section */
.services.section-glass {
    background: rgba(245, 240, 230, 0.9) !important;
}

/* Stats section - slightly more opaque */
.stats-section.section-glass {
    background: rgba(232, 228, 217, 0.95) !important;
}

/* Why choose section */
.why-choose.section-glass {
    background: rgba(245, 240, 230, 0.92) !important;
}

/* Brands section */
.brands-section.section-glass {
    background: rgba(232, 228, 217, 0.9) !important;
}

/* About section */
.about-section.section-glass {
    background: rgba(245, 240, 230, 0.93) !important;
}

/* Testimonials */
.testimonials-section.section-glass {
    background: rgba(232, 228, 217, 0.92) !important;
}

/* Service cards - beige tint */
.section-glass .service-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.section-glass .service-card:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* Feature cards - beige tint */
.section-glass .feature-card {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
}

.section-glass .feature-card:hover {
    background: rgba(255, 255, 255, 0.7);
}

/* Stat items */
.section-glass .stat-item {
    background: rgba(255, 255, 255, 0.6);
}

/* Testimonial cards */
.section-glass .testimonial-card {
    background: rgba(255, 255, 255, 0.5);
}

.section-glass .testimonial-card:hover {
    background: rgba(255, 255, 255, 0.7);
}

/* Brand items */
.section-glass .brand-item {
    background: rgba(255, 255, 255, 0.5);
}

.section-glass .brand-item:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* About image wrapper */
.section-glass .about-image-wrapper {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.8) 0%, rgba(26, 26, 46, 0.9) 100%);
}

/* Hero section - fully transparent for video */
.hero-video.video-fullpage {
    background: transparent !important;
    min-height: 100vh;
    position: relative;
}

.hero-video.video-fullpage .hero-video-container {
    display: none;
}

/* Promo Banner Dark with carrepairbd dark blue */
.promo-banner.promo-banner-dark.section-glass-dark {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.97) 0%, rgba(30, 58, 138, 0.97) 100%) !important;
}

.promo-banner.promo-banner-gradient.section-glass-dark {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.95) 0%, rgba(201, 162, 39, 0.95) 100%) !important;
}

/* CTA with carrepairbd dark */
.cta-section.section-glass-dark {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(30, 58, 138, 0.98) 100%) !important;
}

/* Footer with carrepairbd dark */
footer.section-glass-dark {
    background: rgba(26, 26, 46, 0.99) !important;
}

/* Gold/Dark Red accents */
.section-subtitle {
    color: #8B0000;
}

.btn-book-appointment {
    background: linear-gradient(135deg, #C9A227 0%, #A67C00 100%) !important;
    color: #1A1A2E !important;
}

.btn-book-appointment:hover {
    background: linear-gradient(135deg, #D4AF37 0%, #C9A227 100%) !important;
}

/* Section headers with carrepairbd style */
.section-glass .section-title {
    color: #1A1A2E;
}

/* Decorative scissors/arrows like carrepairbd */
.section-header::after {
    content: '';
    display: block;
    font-size: 1.5rem;
    color: rgba(139, 0, 0, 0.3);
    margin-top: 1rem;
}


/* ============================================== */
/* TYPOGRAPHY & DETAILS */
/* ============================================== */

/* Typography - Serif Headings like carrepairbd */
h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.brand-name,
.hero-text-center h1 {
    font-family: 'Playfair Display', serif !important;
}

/* Section Divider with Wrench Icon */
.carrepairbd-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem auto 3rem;
    width: 100%;
    max-width: 800px;
}

.carrepairbd-divider::before,
.carrepairbd-divider::after {
    content: '';
    height: 1px;
    background: rgba(139, 0, 0, 0.2);
    flex: 1;
}

.carrepairbd-divider-icon {
    margin: 0 1.5rem;
    color: #8B0000;
    /* carrepairbd Red */
    font-size: 1.5rem;
    opacity: 0.8;
}

/* Update Section Headers to include divider */
.section-header {
    position: relative;
    margin-bottom: 1rem;
}

/* Remove the old scissors */
.section-header::after {
    display: none;
}

/* Refine Service Cards to match carrepairbd */
.service-card {
    border: 1px solid rgba(201, 162, 39, 0.2);
    /* Gold border hint */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: #C9A227;
}

/* Refine Brands Section */
.brands-section .brand-item {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.4s ease;
    border: none;
    background: transparent !important;
}

.brands-section .brand-item:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* Refine Buttons */
.btn-primary,
.btn-book-appointment {
    font-family: 'Inter', sans-serif;
    /* Keep buttons sans-serif for readability */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    border-radius: 0;
    /* Square buttons like carrepairbd */
}

/* Hero Text Refinement */
.hero-text-center h1 {
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-text-center p {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    letter-spacing: 3px;
}


/* ============================================== */
/* BOXED LAYOUT & SOLID SECTIONS */
/* ============================================== */

/* 1. Boxed Layout - Show video on left/right */
main {
    max-width: 1320px;
    /* Standard container width */
    margin: 0 auto;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    /* Shadow to separate content from video */
}

/* 2. Solid Backgrounds (Not Transparent) */
/* Override the previous glass effects to be solid/opaque */
.section-glass,
.services.section-glass,
.stats-section.section-glass,
.why-choose.section-glass,
.brands-section.section-glass,
.about-section.section-glass,
.testimonials-section.section-glass {
    background: #E8E4D9 !important;
    /* Solid carrepairbd Beige */
    backdrop-filter: none !important;
    border: none !important;
    opacity: 1 !important;
}

/* Dark sections solid */
.section-glass-dark,
.promo-banner.section-glass-dark {
    background: #1A1A2E !important;
    /* Solid Dark */
    backdrop-filter: none !important;
}

/* 3. Transparent Footer (Like Header) */
footer.section-glass-dark {
    background: rgba(26, 26, 46, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 0;
    /* Connect to content */
    max-width: 1320px;
    /* Match boxed layout */
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem !important;
    /* Force small padding */
    padding-bottom: 1rem !important;
}

/* Force override spacing on footer elements inside the dark glass footer */
footer.section-glass-dark .footer-content {
    gap: 2rem !important;
    padding-bottom: 1.5rem !important;
}

footer.section-glass-dark .footer-section h3 {
    margin-bottom: 1rem !important;
    font-size: 1.15rem !important;
}

footer.section-glass-dark .footer-links li {
    margin-bottom: 0.4rem !important;
}

footer.section-glass-dark .footer-links a {
    font-size: 1rem !important;
}

footer.section-glass-dark p {
    margin-bottom: 0.5rem !important;
    line-height: 1.6 !important;
    font-size: 1rem !important;
}

footer.section-glass-dark .footer-bottom {
    padding: 1.5rem 0 !important;
    font-size: 0.875rem !important;
}

footer.section-glass-dark .contact-col p {
    margin-bottom: 0.5rem !important;
}

footer.section-glass-dark .social-links {
    margin-top: 1.5rem !important;
}

footer.section-glass-dark .social-links a {
    width: 40px !important;
    height: 40px !important;
}

/* Text Shadow for better visibility over video background */
footer.section-glass-dark,
footer.section-glass-dark h3,
footer.section-glass-dark a,
footer.section-glass-dark i,
footer.section-glass-dark span,
footer.section-glass-dark li {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Contact items standard style */
footer.section-glass-dark .contact-col p {
    margin-bottom: 0.5rem !important;
    background: transparent;
    padding: 0;
    border-radius: 0;
    display: block;
    width: auto;
    box-shadow: none;
    border: none;
}

footer.section-glass-dark .contact-col p:hover {
    background: transparent;
    transform: none;
    border-color: transparent;
    box-shadow: none;
    cursor: default;
    color: var(--primary-orange);
}

/* Ensure Hero is full width but contained if needed, 
   or maybe hero stays full width? 
   User said "all nessary stap overley video...but in left and right little bit seen"
   Usually Hero is full width. Let's keep Hero full width but content boxed?
   Actually, if main has max-width, everything inside main is boxed.
   Hero is likely inside main? Let's check app.blade.php
*/

/* Adjust Hero to be transparent so video shows */
.hero-video.video-fullpage {
    background: transparent !important;
}

/* Fix for boxed layout on mobile */
@media (max-width: 1400px) {
    main {
        max-width: 95%;
    }

    footer.section-glass-dark {
        max-width: 95%;
    }
}


/* ============================================== */
/* REDUCED BEZELS (80% Less Side Video) */
/* ============================================== */

/* Increase max-width to reduce side margins */
main {
    max-width: 96% !important;
    /* Much wider, leaving only small video strips */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

/* Align footer with new width */
footer.section-glass-dark {
    max-width: 96% !important;
}

/* Ensure container inside main is also fluid/wide if needed */
/* But Bootstrap container has fixed widths. We might need to make it fluid */
/* If we want the CONTENT to stretch, we need container-fluid behavior */
/* But usually keeping content centered in a wider box is fine. */
/* Let's check if 'container' class is limiting it. */
/* Default Bootstrap container is ~1320px. */
/* If main is 96%, but container is 1320px, the beige background will be 96%? */
/* Yes, because main has the background? No, sections have background. */
/* Wait, I applied background to SECTIONS. */
/* Sections are inside main. */
/* If main is 96%, sections are 100% of main = 96% of screen. */
/* Background is on section. So background will be 96% wide. */
/* Content inside section is in .container. */
/* .container will be 1320px centered inside the 96% section. */
/* So text will be centered, but beige background will be wide. */
/* This is what we want: wider beige box, less video on sides. */


/* ============================================== */
/* FINAL REFINEMENTS - 98% WIDTH & THIN SCROLLBAR */
/* ============================================== */

/* Reduce bezel even more (98% width) */
main {
    max-width: 98% !important;
}

footer.section-glass-dark {
    max-width: 98% !important;
}

/* Thin Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
    /* Very thin */
}

::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
}

::-webkit-scrollbar-thumb {
    background: rgba(201, 162, 39, 0.6);
    /* Gold tint */
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 162, 39, 0.9);
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 162, 39, 0.6) rgba(26, 26, 46, 0.5);
}


/* ============================================== */
/* CARREPAIRBD FOOTER STYLES */
/* ============================================== */

/* Footer Container */
.carrepairbd-footer {
    padding: 60px 0 30px;
    background: transparent !important;
    /* Fully transparent as requested */
    border-top: none !important;
    backdrop-filter: none !important;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

/* 4-Column Grid */
.footer-content-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 30px;
    margin-bottom: 50px;
}

/* Logo Column */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.brand-text {
    font-family: 'Arial', sans-serif;
    /* Simple bold font for logo */
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 1px;
    color: #fff;
}

.brand-text small {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 3px;
    display: block;
    margin-top: 2px;
}

/* Links Columns */
.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-list li {
    margin-bottom: 15px;
}

.footer-links-list a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-links-list a:hover {
    color: #C9A227;
    /* carrepairbd Gold */
}

/* Contact Column */
.contact-col p {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
}

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

.footer-social a {
    color: #fff;
    font-size: 20px;
    transition: transform 0.3s ease;
}

.footer-social a:hover {
    transform: translateY(-3px);
    color: #C9A227;
}

/* Bottom Bar */
.footer-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
}

.copyright {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-icon {
    font-size: 24px;
    color: #C9A227;
    /* Gold chat icon like image */
}

.footer-bottom-links {
    display: flex;
    gap: 30px;
}

.footer-bottom-links a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: #C9A227;
}

/* Responsive Footer */
@media (max-width: 991px) {
    .footer-content-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {

    /* Footer - single column stacked layout */
    .footer-content-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 1.5rem;
    }

    /* Logo - centered and larger */
    .footer-col.brand-col {
        order: 1;
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .footer-logo img {
        max-height: 70px !important;
    }

    .brand-text {
        font-size: 24px;
    }

    /* Navigation links - stacked vertically, left aligned */
    .footer-col:not(.brand-col):not(.contact-col) {
        order: 2;
        text-align: left;
    }

    .footer-links-list {
        display: block;
    }

    .footer-links-list li {
        margin-bottom: 1rem;
    }

    .footer-links-list a {
        font-size: 1rem;
        font-weight: 400;
    }

    /* Contact section - stacked, left aligned */
    .footer-col.contact-col {
        order: 3;
        text-align: left;
    }

    .contact-col p {
        margin-bottom: 1.25rem;
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Social icons - horizontal row */
    .footer-social {
        justify-content: flex-start;
        gap: 1.25rem;
        margin-top: 1.5rem;
    }

    .footer-social a {
        font-size: 1.5rem;
    }

    /* Bottom bar - stacked */
    .footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding-top: 1.5rem;
        text-align: left;
    }

    .copyright {
        font-size: 0.9rem;
        font-weight: 500;
        display: block;
    }

    .copyright a,
    .copyright span {
        display: inline;
    }

    .footer-bottom-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .footer-bottom-links a {
        font-size: 0.95rem;
    }
}


/* ============================================== */
/* FIX FOOTER TRANSPARENCY & LOGO */
/* ============================================== */

/* Force Footer Transparency */
footer.section-glass-dark,
.carrepairbd-footer {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure no pseudo-elements are creating background */
footer.section-glass-dark::before,
footer.section-glass-dark::after,
.carrepairbd-footer::before,
.carrepairbd-footer::after {
    display: none !important;
    background: transparent !important;
}

/* Fix Logo Text Size for Car Repair BD */
.brand-text {
    font-size: 22px;
}

/* ============================================== */
/* REMOVE VIDEO OVERLAY (Full Transparency) */
/* ============================================== */

.fixed-video-overlay {
    background: transparent !important;
    background-color: transparent !important;
    display: none !important;
    /* Hide it completely */
}

/* Ensure video is bright and clear */
.hero-video-container video {
    opacity: 1 !important;
    filter: none !important;
}


/* ============================================== */
/* RESTORE VISUAL FIDELITY (Match Reference) */
/* ============================================== */

/* Restore Video Overlay */
.fixed-video-overlay {
    display: block !important;
    background: rgba(0, 0, 0, 0.6) !important;
    /* Dark overlay for cinematic look */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Restore Header Background */
.main-header {
    background: rgba(0, 0, 0, 0.3) !important;
    /* Semi-transparent dark */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Restore Footer Background */
footer.section-glass-dark,
.carrepairbd-footer {
    background: rgba(0, 0, 0, 0.8) !important;
    /* Darker footer background */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Ensure Footer Content is Visible */
.carrepairbd-footer::before {
    display: none !important;
}


/* ============================================== */
/* FULL TRANSPARENCY (Final Version) */
/* ============================================== */

/* Remove Video Overlay Completely */
.fixed-video-overlay {
    display: none !important;
    background: transparent !important;
}

/* Make Header Fully Transparent */
/* .main-header {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
} */

.main-header {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Make Footer Fully Transparent */
footer.section-glass-dark,
.carrepairbd-footer {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================== */
/* FULL WIDTH LAYOUT - NO SIDE BEZELS */
/* ============================================== */

/* Make content 100% width (no side margins) */
main {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Make footer 100% width (no side margins) */
footer.section-glass-dark,
.carrepairbd-footer {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

/* Ensure sections fill full width */
.container {
    max-width: 100% !important;
}


/* ============================================== */
/* RESTORE BOXED LAYOUT - VIDEO ON SIDES */
/* ============================================== */

/* Restore 98% width to show video on sides */
main {
    max-width: 98% !important;
    width: 98% !important;
    margin: 0 auto !important;
}

/* Restore footer 98% width */
footer.section-glass-dark,
.carrepairbd-footer {
    max-width: 98% !important;
    width: 98% !important;
    margin: 0 auto !important;
}


/* ============================================== */
/* HERO SECTION FULL WIDTH - OTHER SECTIONS BOXED */
/* ============================================== */

/* Make hero section full width */
.hero.hero-video,
.hero.video-fullpage {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hero container should also be full width */
.hero .container.hero-content-wrapper {
    max-width: 100% !important;
    width: 100% !important;
}


/* ============================================== */
/* REMOVE SHADOWS ON LEFT AND RIGHT SIDES */
/* ============================================== */

/* Remove all shadows from main and sections */
main,
section,
.section-glass,
.section-glass-dark,
.section-padding,
.services,
.why-choose,
.about-section,
.testimonials-section,
.brands-section,
.stats-section,
.promo-banner,
.cta-section {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border-left: none !important;
    border-right: none !important;
}


/* ============================================== */
/* FIX HEADER OVERLAP - ADD PADDING FOR FIXED HEADER */
/* ============================================== */

/* Add padding to body to account for fixed header */
body {
    padding-top: 70px !important;
}

/* Ensure hero section doesn't overlap with header */
.hero,
.hero-video,
.video-fullpage {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Make sure header is always on top */
.main-header {
    z-index: 9999 !important;
}


/* ============================================== */
/* FIX HEADER OVERLAP - COMPREHENSIVE FIX */
/* ============================================== */

/* Remove previous body padding (it's being overridden) */
body {
    padding-top: 0 !important;
}

/* Add padding specifically to hero section */
.hero.hero-video,
.hero-video,
section.hero,
section.hero-video,
section.video-fullpage {
    padding-top: 70px !important;
    margin-top: 0 !important;
}

/* Ensure hero content has proper spacing from header */
.hero-content-wrapper,
.container.hero-content-wrapper {
    padding-top: 2rem !important;
}


/* ============================================== */
/* HEADER SCROLL EFFECT - LIKE CARREPAIRBD SITE */
/* ============================================== */

/* Header when scrolled down */
.main-header.scrolled {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}


/* ============================================== */
/* REMOVE HERO PADDING - LET CONTENT START BEHIND HEADER */
/* ============================================== */

/* Remove padding from hero - content should start at top behind header */
.hero.hero-video,
.hero-video,
section.hero,
section.hero-video,
section.video-fullpage {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Remove extra padding from hero content */
.hero-content-wrapper,
.container.hero-content-wrapper {
    padding-top: 0 !important;
}

/* Content should start from the very top */
body {
    padding-top: 0 !important;
}


/* ============================================== */
/* HEADER ALWAYS TRANSPARENT + CONTENT CLIPS UNDER HEADER */
/* ============================================== */

/* Remove scroll effect - header always transparent */
.main-header.scrolled {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Ensure proper z-index layering */
.fixed-video-bg {
    z-index: 0 !important;
}

main {
    z-index: 1 !important;
    position: relative !important;
}

.main-header {
    z-index: 999 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Clip content that scrolls under the header */
main {
    padding-top: 70px !important;
    margin-top: -70px !important;
    clip-path: inset(70px 0 0 0) !important;
}


/* ============================================== */
/* FIX FOOTER - REMOVE CLIP-PATH, USE OVERFLOW INSTEAD */
/* ============================================== */

/* Remove clip-path that was hiding footer */
main {
    clip-path: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Make footer visible */
footer {
    z-index: 1 !important;
    position: relative !important;
}


/* ============================================== */
/* PROPER CLIPPING - CONTENT CLIPS UNDER HEADER, VIDEO SHOWS THROUGH */
/* ============================================== */

/* Main content area - clips at header boundary */
main {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 70px !important;
    padding-top: 0 !important;
    clip-path: none !important;
}

/* Footer also clips properly */
footer.carrepairbd-footer {
    position: relative !important;
    z-index: 1 !important;
}

/* Create a mask for the header area - content can't show there */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    z-index: 100;
    pointer-events: none;
    /* This creates a window where only video shows through */
}

/* Video stays behind everything */
.fixed-video-bg {
    z-index: 0 !important;
}

/* Header on top but transparent */
.main-header {
    z-index: 999 !important;
    background: transparent !important;
}

/* Hero section starts under header */
.hero.hero-video,
section.hero-video {
    margin-top: -70px !important;
    padding-top: 70px !important;
}


/* ============================================== */
/* CLIP CONTENT AT HEADER BOTTOM - HEADER STAYS TRANSPARENT */
/* ============================================== */

/* Header fully transparent */
.main-header {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    height: 70px !important;
}

.main-header.scrolled {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Create a wrapper that clips content at header boundary */
body {
    overflow: hidden !important;
}

/* Content wrapper - clips at 70px from top */
.content-wrapper {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* If no wrapper, apply to main + footer */
main,
footer.carrepairbd-footer {
    position: relative !important;
}


/* ============================================== */
/* FIX ADMIN - SCOPE STYLES TO FRONTEND ONLY */
/* ============================================== */

/* Remove global body overflow hidden - was breaking admin */
body {
    overflow: auto !important;
}

/* Only apply content-wrapper styles when it exists (frontend only) */
body:has(.content-wrapper) {
    overflow: hidden !important;
}

/* Admin pages don't have .content-wrapper, so they work normally */


/* ============================================== */
/* RESTORATION BANNER SECTION - Art of Restoration */
/* ============================================== */

.restoration-banner {
    position: relative;
    min-height: 500px;
    background: linear-gradient(135deg, #1a2a3a 0%, #2d3e50 50%, #c9a45c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 4rem 0;
}

.restoration-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.restoration-banner .container {
    position: relative;
    z-index: 2;
}

.restoration-content {
    text-align: center;
    color: #fff;
}

.restoration-subtitle {
    display: inline-block;
    background: rgba(100, 180, 200, 0.3);
    padding: 0.5rem 2rem;
    border-radius: 30px;
    font-size: 0.9rem;
    font-style: italic;
    color: #a8d4e6;
    margin-bottom: 2rem;
    letter-spacing: 1px;
}

.restoration-services-fan {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem 0 3rem;
    flex-wrap: wrap;
}

.fan-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transform: rotate(0deg);
    transition: all 0.3s ease;
}

.fan-item:nth-child(1) {
    transform: rotate(-20deg);
}

.fan-item:nth-child(2) {
    transform: rotate(-10deg);
}

.fan-item:nth-child(3) {
    transform: rotate(0deg);
}

.fan-item:nth-child(4) {
    transform: rotate(10deg);
}

.fan-item:nth-child(5) {
    transform: rotate(20deg);
}

.fan-item:hover {
    transform: scale(1.1) rotate(0deg) !important;
}

.fan-image {
    width: 80px;
    height: 100px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px 10px 50% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.fan-image i {
    font-size: 2rem;
    color: #fff;
}

.fan-item:hover .fan-image {
    background: rgba(255, 107, 0, 0.4);
    border-color: #FF6B00;
}

.fan-item span {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    height: 80px;
}

.restoration-content h2 {
    font-size: 3rem;
    font-weight: 300;
    color: #fff;
    margin: 2rem 0;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    font-family: 'Playfair Display', serif;
}

.btn-learn-more {
    display: inline-block;
    padding: 0.75rem 2.5rem;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    background: transparent;
}

.btn-learn-more:hover {
    background: #fff;
    color: #1a2a3a;
}

@media (max-width: 768px) {
    .restoration-content h2 {
        font-size: 1.75rem;
    }

    .fan-item:nth-child(1),
    .fan-item:nth-child(2),
    .fan-item:nth-child(3),
    .fan-item:nth-child(4),
    .fan-item:nth-child(5) {
        transform: rotate(0deg);
    }

    .fan-image {
        width: 60px;
        height: 80px;
    }

    .fan-item span {
        writing-mode: horizontal-tb;
        transform: none;
        height: auto;
    }
}


/* ============================================== */
/* RESTORATION SLIDER SECTION */
/* ============================================== */

.restoration-slider-section {
    background: #f8f9fa;
}

.restoration-slider {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.restoration-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.restoration-slide.active {
    opacity: 1;
}

.restoration-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.restoration-slider-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 3rem;
    background: #fff;
    border-top: 1px solid #eee;
}

.slider-description {
    flex: 1;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.6;
    padding-right: 2rem;
}

.slider-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.slider-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    transition: all 0.3s;
}

.slider-btn:hover {
    color: #FF6B00;
}

.slider-btn i {
    font-size: 0.75rem;
}

.slider-counter {
    font-size: 0.9rem;
    color: #999;
    font-weight: 500;
}

.slider-counter #currentSlide {
    color: #333;
    font-weight: 700;
}

@media (max-width: 768px) {
    .restoration-slider {
        height: 300px;
    }

    .restoration-slider-footer {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        text-align: center;
    }

    .slider-description {
        padding-right: 0;
    }
}


/* ============================================== */
/* FIX SLIDER IMAGE CENTERING */
/* ============================================== */

.restoration-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center !important;
}


/* ============================================== */
/* FIXED HEADER AND FOOTER FOR ALL PAGES */
/* ============================================== */

/* Admin pages specific styling within main layout */
.admin-container {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 1rem;
    margin: 2rem auto;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.admin-header {
    border-radius: 1rem;
}

/* Ensure content wrapper allows proper scrolling */
.content-wrapper main {
    min-height: calc(100vh - 70px - 300px);
}

/* Make sure pages without video background still look good */
body:not(:has(.fixed-video-bg)) .content-wrapper {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
}


/* ============================================
   PAGINATION STYLES - Custom Small Arrows
   ============================================ */

/* Pagination Container */
nav[role="navigation"] {
    display: flex !important;
    justify-content: center !important;
    margin-top: 3rem !important;
}

/* Pagination List */
nav[role="navigation"]>div {
    display: flex !important;
    gap: 0.5rem !important;
}

/* Hide default spans */
nav[role="navigation"] span[aria-hidden="true"] {
    display: none !important;
}

/* All Pagination Links */
nav[role="navigation"] a,
nav[role="navigation"] span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 45px !important;
    height: 45px !important;
    padding: 0.5rem 1rem !important;
    background: white !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-size: 0.875rem !important;
    color: #374151 !important;
}

/* Hover */
nav[role="navigation"] a:hover {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

/* Active */
nav[role="navigation"] span[aria-current="page"] {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    border-color: transparent !important;
}

/* Disabled */
nav[role="navigation"] span[aria-disabled="true"] {
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

/* SMALL ARROWS - HIDE DEFAULT TEXT */
nav[role="navigation"] a[rel="prev"],
nav[role="navigation"] a[rel="next"],
nav[role="navigation"] span[aria-disabled="true"]:first-child,
nav[role="navigation"] span[aria-disabled="true"]:last-child {
    font-size: 0 !important;
    padding: 0.5rem 1.25rem !important;
    min-width: auto !important;
}

/* HIDE ALL CHILD TEXT AND SVG */
nav[role="navigation"] a[rel="prev"] *,
nav[role="navigation"] a[rel="next"] *,
nav[role="navigation"] span[aria-disabled="true"]:first-child *,
nav[role="navigation"] span[aria-disabled="true"]:last-child * {
    display: none !important;
}

/* HIDE SVG */
nav[role="navigation"] svg {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ===== PREVIOUS BUTTON ===== */
/* Add "‹‹ Previous" */
nav[role="navigation"] a[rel="prev"]::before,
nav[role="navigation"] span[aria-disabled="true"]:first-child::before {
    content: '‹‹ Previous' !important;
    font-size: 0.875rem !important;
    color: inherit !important;
    display: inline-block !important;
}

/* ===== NEXT BUTTON ===== */
/* Add "Next ››" */
nav[role="navigation"] a[rel="next"]::before,
nav[role="navigation"] span[aria-disabled="true"]:last-child::before {
    content: 'Next ››' !important;
    font-size: 0.875rem !important;
    color: inherit !important;
    display: inline-block !important;
}

/* ===== COLOR FIXES ===== */
/* Active links - dark text */
nav[role="navigation"] a[rel="prev"]::before,
nav[role="navigation"] a[rel="next"]::before {
    color: #374151 !important;
}

/* Hover - white text */
nav[role="navigation"] a[rel="prev"]:hover::before,
nav[role="navigation"] a[rel="next"]:hover::before {
    color: white !important;
}

/* Disabled - gray text */
nav[role="navigation"] span[aria-disabled="true"]:first-child::before,
nav[role="navigation"] span[aria-disabled="true"]:last-child::before {
    color: #9ca3af !important;
}


/* Services Section Animations - Enhanced */
.services-small-heading {
    animation: fadeInDown 0.6s ease-out;
}

.services-title {
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.services-description {
    animation: fadeIn 1s ease-out 0.4s both;
}

/* Smooth fade in from top */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

/* Smooth fade in from bottom */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Simple fade in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Reduce section header bottom margin */
.services .section-header {
    margin-bottom: 2rem !important;
}

/* FORCE GAP REDUCTION services section */
.services .section-header {
    margin-bottom: 1.5rem !important;
}

.services .section-subtitle {
    margin-bottom: 0.5rem !important;
}

.services .section-title {
    margin-bottom: 0.75rem !important;
}

.services .section-desc {
    margin-bottom: 0 !important;
}


/* ============================================== */
/* HERO AND SERVICES SECTION FIXES - AUTHORITATIVE */
/* ============================================== */

/* 1. FORCE ANIMATIONS TO BE VISIBLE + ANIMATED */
.animate-down,
.services-small-heading {
    opacity: 1 !important;
    animation: simpleFadeDown 1s ease-out;
}

.animate-up,
.services-title {
    opacity: 1 !important;
    animation: simpleFadeUp 1s ease-out 0.2s backwards;
}

.animate-fade,
.services-description {
    opacity: 1 !important;
    animation: simpleFade 1.2s ease-out 0.4s backwards;
}

@keyframes simpleFadeDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes simpleFadeUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes simpleFade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 2. KILL THE RICH TEXT GAP - AGGRESSIVE RESET */
#services .services-small-heading>*,
#services .services-title>*,
#services .services-description>* {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.25 !important;
    display: block !important;
}

/* Hide empty tags that cause gaps */
#services .services-small-heading br,
#services .services-title br,
#services .services-description br {
    display: none !important;
}

#services .services-small-heading p:empty,
#services .services-title p:empty,
#services .services-description p:empty {
    display: none !important;
}

/* Container Spacing */
#services .section-header {
    margin-bottom: 1rem !important;
}

#services .services-small-heading {
    margin-bottom: 0.25rem !important;
    display: block !important;
}

#services .services-title {
    margin-bottom: 0.5rem !important;
    display: block !important;
}

#services .services-description {
    margin-bottom: 0.75rem !important;
    display: block !important;
}


/* ============================================== */
/* PREMIUM SIDEBAR NAVIGATION */
/* ============================================== */

/* Enhanced Sidebar Container */
.sidebar {
    width: 320px !important;
    left: -320px !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.15) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.sidebar.active {
    left: 0 !important;
}

/* Premium Header with Logo */
.sidebar-header {
    padding: 1.5rem 1.75rem !important;
    background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 100%) !important;
    border-bottom: 3px solid #FF6B00 !important;
    min-height: 80px;
    justify-content: center !important;
    position: relative;
}

.sidebar-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    flex: 1;
}

.sidebar-logo img {
    height: 50px;
    width: auto;
    filter: brightness(1.1);
}

.sidebar-logo i {
    font-size: 2rem;
    color: #FF6B00;
}

.sidebar-brand-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.close-sidebar {
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.close-sidebar:hover {
    background: rgba(255, 107, 0, 0.3) !important;
    transform: rotate(90deg);
}

/* Enhanced Navigation */
.sidebar-nav {
    padding: 1.5rem 1rem !important;
    gap: 0.35rem !important;
}

.sidebar-nav a {
    padding: 0.9rem 1.25rem !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar-nav a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(135deg, #FF6B00, #FF8F3C);
    border-radius: 0 4px 4px 0;
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.sidebar-nav a:hover {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.08), rgba(255, 143, 60, 0.05)) !important;
    color: #FF6B00 !important;
    transform: translateX(4px);
}

.sidebar-nav a:hover::before {
    transform: scaleY(1);
}

.sidebar-nav a.active {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.12), rgba(255, 143, 60, 0.08)) !important;
    color: #FF6B00 !important;
    font-weight: 600 !important;
}

.sidebar-nav a.active::before {
    transform: scaleY(1);
}

.sidebar-nav a i {
    width: 24px !important;
    font-size: 1.1rem !important;
    transition: transform 0.3s ease;
}

.sidebar-nav a:hover i {
    transform: scale(1.15);
}

/* Premium Divider */
.sidebar-divider {
    height: 1px !important;
    background: linear-gradient(90deg, transparent, #E5E7EB, transparent) !important;
    margin: 0.2rem 1rem !important;
}

/* Enhanced Logout Button */
.sidebar-logout {
    padding: 0.9rem 1.25rem !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    transition: all 0.3s ease !important;
}

.sidebar-logout:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.05)) !important;
    transform: translateX(4px);
}

/* Sidebar Overlay Enhancement */
.sidebar-overlay {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* CTA Button in Sidebar */
.sidebar-nav .sidebar-btn {
    margin-top: 0.25rem;
    background: linear-gradient(135deg, #FF6B00 0%, #FF8F3C 100%) !important;
    color: #FFFFFF !important;
    text-align: center;
    justify-content: center;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3);
}

.sidebar-nav .sidebar-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.4);
}

.sidebar-nav .sidebar-btn::before {
    display: none;
}


/* ============================================== */
/* DYNAMIC BANNERS SECTION */
/* ============================================== */

.banner-section {
    padding: 3rem 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.banner-wrapper {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    min-height: 550px;
}

.banner-wrapper.banner-image-left {
    flex-direction: row;
}

.banner-wrapper.banner-image-right {
    flex-direction: row-reverse;
}

/* Red accent border on the side */
.banner-wrapper::before {
    content: '';
    width: 6px;
    background: linear-gradient(180deg, #dc2626, #b91c1c);
    flex-shrink: 0;
}

.banner-image-container {
    flex: 0 0 400px;
    max-width: 500px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-image {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain;
    border-radius: 10px;
    border: 3px solid #dc2626;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.banner-image:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.banner-content {
    flex: 1;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner-content h1,
.banner-content h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.banner-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 0.5rem;
}

.banner-content p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 0.5rem;
    text-align: justify;
}

.banner-content ul,
.banner-content ol {
    margin-left: 1.25rem;
    margin-bottom: 0.5rem;
}

.banner-content li {
    line-height: 1.6;
    color: #444;
    margin-bottom: 0.25rem;
    font-size: 0.88rem;
}

/* Text Animation - Auto-play on page load */
@keyframes textFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes textSlideIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

.banner-content h1,
.banner-content h2 {
    animation: textFadeIn 0.8s ease forwards;
}

.banner-content h3 {
    animation: textFadeIn 0.8s ease 0.2s forwards;
    opacity: 0;
}

.banner-content p {
    animation: textSlideIn 0.7s ease forwards;
    opacity: 0;
}

.banner-content p:nth-of-type(1) {
    animation-delay: 0.3s;
}

.banner-content p:nth-of-type(2) {
    animation-delay: 0.5s;
}

.banner-content p:nth-of-type(3) {
    animation-delay: 0.7s;
}

/* Responsive Banner */
@media (max-width: 768px) {
    .banner-wrapper {
        flex-direction: column !important;
        max-width: 95%;
    }

    .banner-wrapper::before {
        width: 100%;
        height: 5px;
        order: -1 !important;
    }

    .banner-image-container {
        flex: 0 0 auto;
        max-width: 100%;
        padding: 1rem;
    }

    .banner-image {
        max-height: 180px;
    }

    .banner-content {
        padding: 1rem 1.5rem 1.5rem;
    }

    .banner-content h1,
    .banner-content h2 {
        font-size: 1.2rem;
        text-align: center;
    }

    .banner-content p {
        text-align: left;
    }
}

/* Banner Animations */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

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

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

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

.animate-on-scroll {
    opacity: 1;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.animated[data-animation="fadeInLeft"] {
    animation: fadeInLeft 0.8s ease forwards;
}

.animate-on-scroll.animated[data-animation="fadeInRight"] {
    animation: fadeInRight 0.8s ease forwards;
}

.animate-on-scroll.animated[data-animation="fadeInUp"] {
    animation: fadeInUp 0.8s ease forwards;
}

/* =========================================
   Reviews Page Styles (Premium)
   ========================================= */

.reviews-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url('../images/workshop-bg.jpg');
    background-size: cover;
    background-position: center;
    padding: 6rem 0 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.reviews-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 30%, var(--primary-orange));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.reviews-hero p {
    font-size: 1.2rem;
    color: var(--text-gray);
    max-width: 600px;
    margin: 0 auto;
}

/* Review Stats Bar */
.review-stats-bar {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.stat-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem 2.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    text-align: center;
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
    border-color: var(--primary-orange);
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-orange);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Reviews Grid */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    padding: 4rem 0;
}

.review-card {
    background: #1a1a1a;
    border-radius: 1.5rem;
    padding: 2rem;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
}

.review-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(243, 112, 33, 0.3);
}

.review-card.featured {
    border-color: var(--primary-orange);
    background: linear-gradient(145deg, #1a1a1a, #251810);
}

.review-card.featured::before {
    content: "Featured";
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--primary-orange);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(243, 112, 33, 0.4);
}

.review-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.reviewer-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-orange);
    background: #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.reviewer-info h4 {
    color: white;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.reviewer-info .review-date {
    display: block;
    font-size: 0.85rem;
    color: var(--text-gray);
    margin-top: 2px;
}

.review-stars {
    color: #ffd700;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    display: flex;
    gap: 2px;
}

.review-body {
    flex-grow: 1;
}

.review-text {
    color: #e0e0e0;
    font-size: 1rem;
    line-height: 1.6;
    font-style: italic;
    opacity: 0.9;
}

.quote-icon {
    font-size: 2rem;
    color: rgba(243, 112, 33, 0.2);
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
}

/* Pagination Customization */
.pagination {
    margin-top: 3rem;
    gap: 0.5rem;
}

.page-item .page-link {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.page-item.active .page-link {
    background: var(--primary-orange);
    border-color: var(--primary-orange);
}

@media (max-width: 768px) {
    .reviews-hero h1 {
        font-size: 2.5rem;
    }

    .review-stats-bar {
        gap: 1.5rem;
    }

    .stat-item {
        padding: 1rem;
        flex: 1 1 150px;
    }
}

/* =========================================
   COMPREHENSIVE MOBILE RESPONSIVE FIXES
   ========================================= */

/* Mobile Header Fixes - Prevent Overflow */
@media (max-width: 767px) {

    /* Header Container */
    .header-container {
        padding: 0 0.75rem !important;
        height: 60px !important;
    }

    /* Hide contact info completely on mobile */
    .contact-info {
        display: none !important;
    }

    /* Hide phone number text */
    .contact-label,
    .contact-number {
        display: none !important;
    }

    /* Smaller header icons on mobile */
    .header-icon,
    .whatsapp-icon,
    .user-icon {
        font-size: 1.1rem !important;
    }

    /* Header right section - compact */
    .header-right {
        gap: 0.75rem !important;
    }

    /* Header left - compact */
    .header-left {
        gap: 0.75rem !important;
    }

    /* Brand logo smaller on mobile */
    .brand-logo {
        font-size: 1rem !important;
    }

    .brand-logo i {
        font-size: 1.25rem !important;
    }

    /* Menu toggle */
    .menu-toggle span {
        width: 20px !important;
    }

    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden !important;
    }

    .main-header {
        overflow: hidden !important;
    }
}

/* Extra Small Phones (375px and below) */
@media (max-width: 375px) {
    .header-container {
        padding: 0 0.5rem !important;
    }

    .header-right {
        gap: 0.5rem !important;
    }

    .brand-logo {
        font-size: 0.9rem !important;
    }

    .brand-logo i {
        font-size: 1rem !important;
    }

    .header-icon,
    .whatsapp-icon,
    .user-icon {
        font-size: 1rem !important;
    }
}

/* Form Elements on Mobile */
@media (max-width: 767px) {

    /* Hero Section Forms */
    .hero-appointment-form,
    .appointment-form {
        padding: 1.5rem !important;
        margin: 0 1rem !important;
        max-width: calc(100% - 2rem) !important;
    }

    /* Form Labels */
    .form-label {
        font-size: 0.85rem !important;
    }

    /* Form Inputs */
    .form-control,
    .premium-input,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
        /* Prevents zoom on iOS */
        padding: 0.75rem !important;
    }

    /* Form Groups */
    .form-group,
    .premium-input-group {
        margin-bottom: 1rem !important;
    }

    /* Buttons */
    .btn,
    .premium-btn,
    button[type="submit"] {
        padding: 0.875rem 1.25rem !important;
        font-size: 0.95rem !important;
        width: 100% !important;
    }
}

/* Hero Section Mobile */
@media (max-width: 767px) {
    .hero-section {
        min-height: 100vh !important;
        padding-top: 60px !important;
    }

    .hero-content h1,
    .hero-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }
}

/* Product Grid Mobile */
@media (max-width: 767px) {

    .product-grid,
    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 1rem !important;
    }

    .product-card {
        max-width: 100% !important;
    }
}

/* Admin Pages Mobile */
@media (max-width: 767px) {

    /* Admin Page Container */
    .page-container {
        padding: 0 1rem !important;
        margin: 1rem auto !important;
    }

    /* Admin Page Header */
    .page-header {
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 1rem !important;
    }

    .page-header h1 {
        font-size: 1.25rem !important;
        text-align: center !important;
    }

    .header-actions {
        flex-direction: column !important;
        width: 100% !important;
    }

    .btn-back,
    .btn-create {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Admin Filter Bar */
    .filter-bar {
        flex-direction: column !important;
    }

    .filter-bar form {
        flex-direction: column !important;
        width: 100% !important;
    }

    .filter-bar form>div {
        width: 100% !important;
    }

    .filter-bar button,
    .filter-bar a {
        width: 100% !important;
        justify-content: center !important;
    }

    .search-input,
    .filter-bar select {
        width: 100% !important;
    }

    /* Admin Product Grid */
    .product-grid {
        grid-template-columns: 1fr !important;
    }

    /* Admin Tables - Horizontal Scroll */
    .table-responsive,
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Sticky Footer */
    .sticky-footer {
        position: relative !important;
        margin-top: 2rem !important;
    }

    .submit-card {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
    }

    .btn-submit {
        width: 100% !important;
    }
}

/* Navigation & Sidebar Mobile */
@media (max-width: 767px) {
    .sidebar {
        width: 280px !important;
    }

    .sidebar-nav a {
        padding: 0.5rem !important;
        font-size: 0.95rem !important;
    }
}

/* Cart & Checkout Mobile */
@media (max-width: 767px) {

    .cart-container,
    .checkout-container {
        padding: 1rem !important;
    }

    .cart-item {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .cart-item-info {
        text-align: center !important;
    }

    .cart-summary {
        width: 100% !important;
    }
}

/* Footer Mobile */
@media (max-width: 767px) {
    .footer {
        padding: 2rem 1rem !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    .footer-links {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

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

/* Contact Page Mobile */
@media (max-width: 767px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
    }

    .contact-form {
        padding: 1.5rem !important;
    }

    .contact-info-card {
        padding: 1.5rem !important;
    }
}

/* Services Mobile */
@media (max-width: 767px) {
    .services-grid {
        grid-template-columns: 1fr !important;
    }

    .service-card {
        padding: 1.5rem !important;
    }
}

/* Testimonials Mobile */
@media (max-width: 767px) {
    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }

    .testimonial-card {
        padding: 1.5rem !important;
    }
}

/* Typography Scaling for Mobile */
@media (max-width: 767px) {
    h1 {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    h4 {
        font-size: 1.1rem !important;
    }

    p,
    li,
    span {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    .section-title h2 {
        font-size: 1.5rem !important;
    }

    .section-title p {
        font-size: 0.95rem !important;
    }
}

/* Fix iOS Input Zoom */
@media (max-width: 767px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
        /* Must be 16px to prevent iOS zoom */
    }
}

/* Gallery & Images Mobile */
@media (max-width: 767px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .gallery-item img {
        height: 150px !important;
        object-fit: cover !important;
    }
}

/* Notices & Blogs Mobile */
@media (max-width: 767px) {

    .notices-grid,
    .blog-grid {
        grid-template-columns: 1fr !important;
    }

    .notice-card,
    .blog-card {
        padding: 1rem !important;
    }
}

/* Auth Pages Mobile */
@media (max-width: 767px) {
    .auth-wrapper {
        padding: 1rem !important;
    }

    .flip-container {
        max-width: 100% !important;
    }

    .auth-card-face {
        padding: 1.5rem !important;
    }

    .auth-title {
        font-size: 1.5rem !important;
    }
}

/* Appointment Form Mobile */
@media (max-width: 767px) {
    .appointment-wrapper {
        padding: 1rem !important;
    }

    .appointment-form-container {
        padding: 1.5rem !important;
    }

    .form-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .form-row>* {
        width: 100% !important;
    }
}

/* About Page Mobile */
@media (max-width: 767px) {
    .about-content {
        grid-template-columns: 1fr !important;
    }

    .about-image {
        order: -1 !important;
    }

    .about-text {
        padding: 1rem !important;
    }

    .about-features {
        grid-template-columns: 1fr !important;
    }
}

/* Stats Section Mobile */
@media (max-width: 767px) {
    .stats-section {
        padding: 2rem 1rem !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .stat-number {
        font-size: 1.75rem !important;
    }

    .stat-label {
        font-size: 0.85rem !important;
    }
}

/* Modals Mobile */
@media (max-width: 767px) {

    .modal-content,
    .modal-box {
        width: 95% !important;
        max-width: 95% !important;
        margin: 1rem !important;
        padding: 1rem !important;
    }
}

/* Fix Horizontal Scroll Prevention */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

.container,
.page-container,
.section {
    max-width: 100%;
    overflow-x: hidden;
}

/* =========================================
   MOBILE FORM FIXES - Icons & Buttons
   ========================================= */

@media (max-width: 767px) {

    /* Appointment Form Container on Mobile */
    .hero-appointment-form,
    .appointment-form,
    .booking-form,
    .form-container {
        background: rgba(30, 30, 30, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        padding: 1.25rem !important;
        border-radius: 12px !important;
        max-width: 100% !important;
        margin: 0 0.5rem !important;
    }

    /* Form Input Groups - Fix Icon Positioning */
    .input-group,
    .form-group,
    .input-wrapper,
    .premium-input-group {
        position: relative !important;
        margin-bottom: 1rem !important;
    }

    /* Form Input Fields - ONLY for DARK background forms (homepage hero) */
    .hero-appointment-form .form-control,
    .hero-appointment-form input,
    .hero-appointment-form select,
    .hero-appointment-form textarea,
    .appointment-form .form-control,
    .appointment-form input,
    .booking-form .form-control,
    .booking-form input,
    .form-group-transparent input,
    .form-group-transparent select,
    .input-with-icon input,
    .input-with-icon select {
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        color: #ffffff !important;
        padding: 0.875rem 0.875rem 0.875rem 2.75rem !important;
        font-size: 16px !important;
        border-radius: 8px !important;
        width: 100% !important;
    }

    /* Placeholder for dark forms */
    .hero-appointment-form input::placeholder,
    .appointment-form input::placeholder,
    .booking-form input::placeholder,
    .form-group-transparent input::placeholder {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* Focus state for dark forms */
    .hero-appointment-form input:focus,
    .appointment-form input:focus,
    .booking-form input:focus,
    .form-group-transparent input:focus {
        outline: none !important;
        border-color: #FF6B00 !important;
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2) !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }

    /* Form Icons - ONLY for dark forms */
    .hero-appointment-form .input-group i,
    .appointment-form .input-group i,
    .booking-form .input-group i,
    .form-group-transparent i,
    .input-with-icon i {
        position: absolute !important;
        left: 0.875rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: rgba(255, 255, 255, 0.6) !important;
        font-size: 1rem !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }

    /* Labels for DARK forms only */
    .hero-appointment-form label,
    .appointment-form label,
    .booking-form label,
    .form-group-transparent label {
        display: block !important;
        margin-bottom: 0.5rem !important;
        color: #ffffff !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    /* Required Field Asterisk - for dark forms */
    .hero-appointment-form .form-label span,
    .appointment-form label span,
    .booking-form label span,
    .form-group-transparent label span {
        color: #ff4444 !important;
    }

    /* Select Dropdown Styling - for dark forms only */
    .hero-appointment-form select,
    .appointment-form select,
    .booking-form select,
    .form-group-transparent select,
    .input-with-icon select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 0.75rem center !important;
        background-size: 20px !important;
        padding-right: 2.5rem !important;
    }

    /* Select Options - for dark forms */
    .hero-appointment-form select option,
    .appointment-form select option,
    .booking-form select option,
    .form-group-transparent select option,
    .input-with-icon select option {
        background: #333333 !important;
        color: #ffffff !important;
        padding: 0.5rem !important;
    }

    /* Submit Button - More Prominent & Sticky */
    .btn-submit,
    .submit-btn,
    .book-btn,
    button[type="submit"],
    .premium-btn,
    .appointment-btn {
        width: calc(100% - 2rem) !important;
        padding: 1.25rem 2rem !important;
        background: linear-gradient(135deg, #FF6B00 0%, #FF8500 50%, #cc5500 100%) !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 12px !important;
        font-size: 1.1rem !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        cursor: pointer !important;
        margin: 1.5rem auto !important;
        display: block !important;
        text-align: center !important;
        box-shadow: 0 8px 25px rgba(255, 107, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        z-index: 100 !important;
    }

    /* Button Hover State */
    .btn-submit:hover,
    .submit-btn:hover,
    .book-btn:hover,
    button[type="submit"]:hover {
        background: linear-gradient(135deg, #cc5500 0%, #FF6B00 100%) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(255, 107, 0, 0.4) !important;
    }

    /* Date Input Specific Fixes */
    input[type="date"] {
        color-scheme: dark !important;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(1) !important;
        cursor: pointer !important;
    }

    /* Textarea Specific */
    textarea {
        min-height: 100px !important;
        resize: vertical !important;
        padding: 0.875rem !important;
    }

    /* Form Row - Stack on Mobile */
    .form-row,
    .input-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .form-row>*,
    .input-row>* {
        width: 100% !important;
        flex: none !important;
    }
}

/* Extra Small Phones - Tighter Form Spacing */
@media (max-width: 375px) {

    .hero-appointment-form,
    .appointment-form {
        padding: 1rem !important;
        margin: 0 0.25rem !important;
    }

    .form-control,
    .premium-input,
    input,
    select {
        padding: 0.75rem 0.75rem 0.75rem 2.5rem !important;
        font-size: 15px !important;
    }

    .input-group i,
    .form-group i,
    .input-icon {
        left: 0.75rem !important;
        font-size: 0.9rem !important;
    }

    .btn-submit,
    button[type="submit"] {
        padding: 0.875rem 1rem !important;
        font-size: 0.95rem !important;
    }

    .form-label,
    label {
        font-size: 0.8rem !important;
    }
}

/* Hero Section Form Specific Fixes */
@media (max-width: 767px) {

    .hero-section .appointment-form,
    .hero-content .booking-form {
        position: relative !important;
        z-index: 10 !important;
        margin-top: 1rem !important;
    }
}

/* =========================================
   SWEETALERT MODAL FIXES FOR MOBILE
   ========================================= */

/* Hide checkbox in SweetAlert modal */
.swal2-popup input[type="checkbox"],
.swal2-container input[type="checkbox"],
.swal2-modal input[type="checkbox"],
.swal2-popup .swal2-checkbox,
.swal2-container .swal2-checkbox {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Hide checkbox label in SweetAlert */
.swal2-popup label[for],
.swal2-container label.swal2-checkbox {
    display: none !important;
}

/* SweetAlert modal styling for mobile */
@media (max-width: 767px) {

    .swal2-popup,
    .swal2-modal {
        width: 90% !important;
        max-width: 320px !important;
        padding: 1.5rem !important;
        font-size: 0.95rem !important;
    }

    .swal2-title {
        font-size: 1.25rem !important;
    }

    .swal2-content,
    .swal2-html-container {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    .swal2-actions {
        width: 100% !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .swal2-confirm,
    .swal2-cancel {
        width: 100% !important;
        margin: 0 !important;
        padding: 0.75rem 1.5rem !important;
    }

    /* Hide any form elements in error modals */
    .swal2-popup input:not(.swal2-input),
    .swal2-popup textarea:not(.swal2-textarea) {
        display: none !important;
    }
}

/* =========================================
   CONTACT PAGE MOBILE FIXES
   ========================================= */

@media (max-width: 767px) {

    /* Contact Page Grid - Force Single Column */
    .contact-grid {
        display: block !important;
        grid-template-columns: 1fr !important;
    }

    /* Contact Card */
    .contact-card,
    .form-card,
    .info-card {
        padding: 1.5rem 1rem !important;
        margin-bottom: 1.5rem !important;
        border-radius: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Form Row - Force Single Column */
    .form-row,
    .contact-card .form-row,
    .form-card .form-row {
        display: block !important;
        grid-template-columns: 1fr !important;
    }

    /* Form Group */
    .form-group,
    .contact-card .form-group,
    .form-card .form-group {
        margin-bottom: 1rem !important;
        width: 100% !important;
    }

    /* Form Labels */
    .form-group label,
    .contact-card label,
    .form-card label {
        display: block !important;
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
        visibility: visible !important;
    }

    /* Form Inputs - FORCE VISIBLE */
    .form-group input,
    .form-group textarea,
    .form-group select,
    .contact-card input,
    .contact-card textarea,
    .contact-card select,
    .form-card input,
    .form-card textarea,
    .form-card select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.875rem !important;
        font-size: 16px !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 8px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
        background-color: white !important;
        color: #111827 !important;
    }

    /* Textarea specific */
    textarea,
    .form-group textarea,
    .contact-card textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }

    /* Focus State */
    .form-group input:focus,
    .form-group textarea:focus,
    .contact-card input:focus,
    .contact-card textarea:focus {
        border-color: #FF6B00 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1) !important;
    }

    /* Contact Info Wrapper */
    .contact-info-wrapper {
        display: block !important;
    }

    /* Info Items */
    .info-item {
        margin-bottom: 1.5rem !important;
    }

    /* Map */
    .map-container,
    iframe[src*="google.com/maps"] {
        height: 200px !important;
        min-height: 200px !important;
    }
}

/* =========================================
   HOMEPAGE FORM - TRANSPARENT INPUTS (Mobile)
   ========================================= */

@media (max-width: 767px) {

    /* Homepage Form - Transparent Styling */
    .form-group-transparent,
    .form-grid .form-group-transparent {
        margin-bottom: 1rem !important;
    }

    .form-group-transparent label {
        color: #ffffff !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }

    .form-group-transparent .input-with-icon {
        position: relative !important;
    }

    /* TRANSPARENT INPUT with WHITE BORDER */
    .form-group-transparent input,
    .form-group-transparent select,
    .input-with-icon input,
    .input-with-icon select {
        background: transparent !important;
        background-color: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        color: #ffffff !important;
        padding: 0.875rem 0.875rem 0.875rem 2.75rem !important;
        font-size: 16px !important;
        border-radius: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Date input special handling */
    .form-group-transparent input[type="date"],
    .input-with-icon input[type="date"] {
        padding: 0.875rem !important;
        color-scheme: dark !important;
    }

    /* Placeholder color */
    .form-group-transparent input::placeholder,
    .input-with-icon input::placeholder {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* Focus state */
    .form-group-transparent input:focus,
    .form-group-transparent select:focus,
    .input-with-icon input:focus,
    .input-with-icon select:focus {
        outline: none !important;
        border-color: #FF6B00 !important;
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2) !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }

    /* Icon styling */
    .input-with-icon i,
    .input-with-icon .input-icon-text {
        position: absolute !important;
        left: 0.875rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: rgba(255, 255, 255, 0.6) !important;
        font-size: 1rem !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }

    /* Select dropdown arrow */
    .form-group-transparent select,
    .input-with-icon select {
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 0.75rem center !important;
        background-size: 20px !important;
        padding-right: 2.5rem !important;
    }

    /* Select options */
    .form-group-transparent select option,
    .input-with-icon select option {
        background: #333333 !important;
        color: #ffffff !important;
    }

    /* Required asterisk */
    .form-group-transparent .text-red {
        color: #ff4444 !important;
    }

    /* Submit button */
    .btn-book-appointment {
        width: 100% !important;
        padding: 1rem !important;
        background: linear-gradient(135deg, #FF6B00, #ff8c42) !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 10px !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        cursor: pointer !important;
    }
}

/* =========================================
   PRODUCTS PAGE MOBILE FIXES
   ========================================= */

@media (max-width: 767px) {

    /* Search Container */
    .search-container {
        padding: 0 0.75rem !important;
        margin-bottom: 1.5rem !important;
        max-width: 100% !important;
    }

    .search-form {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
    }

    .search-form input[type="text"],
    .search-form .form-control {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 0.75rem 1rem !important;
        font-size: 16px !important;
        border-radius: 25px !important;
        border: 2px solid #e2e8f0 !important;
        background: white !important;
        color: #333 !important;
        box-shadow: none !important;
    }

    .search-form input::placeholder {
        color: #9ca3af !important;
    }

    .search-form button,
    .search-form .btn-primary {
        padding: 0.75rem 1.25rem !important;
        border-radius: 25px !important;
        background: linear-gradient(135deg, #FF6B00, #ff8c42) !important;
        border: none !important;
        flex-shrink: 0 !important;
        color: white !important;
    }

    /* Category Nav Bar */
    .category-nav-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
        padding: 0.75rem !important;
        margin: 0 0.5rem 1.5rem !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        border-radius: 12px !important;
    }

    .category-nav-bar::-webkit-scrollbar {
        display: none !important;
    }

    .category-nav-item {
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border-radius: 20px !important;
        font-weight: 500 !important;
    }

    .category-nav-item.active {
        background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
        color: white !important;
        box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3) !important;
        border: none !important;
    }

    .category-nav-item:not(.active) {
        background: #f1f5f9 !important;
        color: #475569 !important;
        border: 1px solid #e2e8f0 !important;
    }

    .category-nav-item .dropdown-arrow {
        font-size: 0.6rem !important;
        margin-left: 0.25rem !important;
    }

    /* Products Grid */
    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 0.5rem !important;
    }

    /* Product Cards */
    .product-card {
        border-radius: 1rem !important;
    }

    .card-image-wrapper {
        height: 200px !important;
    }

    .card-content {
        padding: 1rem !important;
    }

    .card-title {
        font-size: 1rem !important;
    }

    /* Featured Grid */
    .featured-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Hero */
    .premium-products-hero {
        padding: 2.5rem 0 !important;
    }

    .gradient-text {
        font-size: 1.75rem !important;
    }

    .hero-image {
        display: none !important;
    }
}

/* =========================================
   SEARCH BAR STYLES (All Screens)
   ========================================= */

.search-container {
    max-width: 600px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
}

.search-form {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.search-input {
    flex: 1;
    min-width: 0;
    padding: 0.875rem 1.25rem;
    border-radius: 50px;
    border: 2px solid #e2e8f0;
    font-size: 1rem;
    outline: none;
    background: white;
    color: #333;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input:focus {
    border-color: #FF6B00;
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}

.search-input::placeholder {
    color: #9ca3af;
}

.search-btn {
    padding: 0.875rem 1.5rem;
    border-radius: 50px;
    border: none;
    background: linear-gradient(135deg, #FF6B00, #ff8c42);
    color: white;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}

.search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
}

/* Mobile Search Bar */
@media (max-width: 767px) {

    /* Hide desktop search, show mobile search */
    .desktop-search {
        display: none !important;
    }

    .mobile-search {
        display: block !important;
    }

    .search-container {
        max-width: 100%;
        padding: 0 0.75rem;
        margin-bottom: 1.5rem;
    }

    .search-input {
        padding: 0.75rem 1rem;
        font-size: 16px;
    }

    .search-btn {
        padding: 0.75rem 1rem;
    }

    /* Category Nav Mobile Styles */
    .category-nav-bar.desktop-categories {
        display: none !important;
    }

    .mobile-categories {
        display: block !important;
    }

    .category-nav-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0.5rem !important;
        margin: 0 0.5rem 1rem !important;
    }

    .category-nav-item {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }

    .category-nav-dropdown {
        flex-shrink: 0 !important;
    }
}

/* Hidden utility class for accordion */
.hidden {
    display: none !important;
}

/* SweetAlert Validation Fix: Hide Unwanted Inputs */
.validation-error-popup .swal2-input,
.validation-error-popup .swal2-file,
.validation-error-popup .swal2-textarea,
.validation-error-popup .swal2-select,
.validation-error-popup .swal2-radio,
.validation-error-popup .swal2-checkbox {
    display: none !important;
}

/* GLOBAL FIX: Hide SweetAlert input for all error/warning popups */
.swal2-popup.swal2-icon-error .swal2-input,
.swal2-popup.swal2-icon-warning .swal2-input,
.swal2-popup.swal2-icon-info .swal2-input,
.swal2-popup .swal2-input:not([type="password"]):not([type="email"]),
.swal2-popup .swal2-textarea {
    display: none !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.validation-error-popup .swal2-html-container {
    margin: 1em 1.6em 0.3em;
    overflow: visible;
    text-align: left;
}


/* AGGRESSIVE FIX: Hide SweetAlert Inputs */
.validation-error-popup input,
.validation-error-popup textarea,
.validation-error-popup select,
.validation-error-popup .swal2-input-label {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
}


/* Mobile Reordering: All Products First, Featured Second */
@media (max-width: 768px) {
    .products-content-wrapper {
        display: flex;
        flex-direction: column;
    }

    /* Move Featured to bottom */
    .featured-products-section {
        order: 2;
    }

    /* Keep All Products at top */
    .all-products-section {
        order: 1;
    }
}


/* Mobile Category Sidebar */
.category-sidebar {
    position: fixed;
    top: 0;
    left: -320px;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    background: #ffffff;
    z-index: 999999;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.category-sidebar.active {
    left: 0;
}

/* Category overlay must be below sidebar but above header */
#categoryOverlay {
    z-index: 999998;
}

@media (max-width: 768px) {
    .mobile-category-trigger {
        display: block !important;
    }
}

/* COPY THIS CONTENT TO THE BOTTOM OF public/css/style.css ON HOSTINGER */

/* ============================================== */
/* DATE INPUT COLOR FIX - DARK BACKGROUND FORMS ONLY */
/* ============================================== */
/* These rules ONLY apply to hero section / transparent forms */
/* They do NOT apply to .apt-form-area (appointment page with white bg) */

/* Force date input text to match placeholder color (semi-transparent white) - DARK FORMS ONLY */
.hero-form-container input[type="date"],
.hero-form-container input[name="preferred_date"],
.form-group-transparent input[type="date"],
.form-group-transparent input[name="preferred_date"] {
    color: rgba(255, 255, 255, 0.6) !important;
    background: transparent !important;
}

/* Target ALL webkit internal date elements - DARK FORMS ONLY */
.hero-form-container input[type="date"]::-webkit-datetime-edit,
.hero-form-container input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.hero-form-container input[type="date"]::-webkit-datetime-edit-text,
.hero-form-container input[type="date"]::-webkit-datetime-edit-month-field,
.hero-form-container input[type="date"]::-webkit-datetime-edit-day-field,
.hero-form-container input[type="date"]::-webkit-datetime-edit-year-field,
.form-group-transparent input[type="date"]::-webkit-datetime-edit,
.form-group-transparent input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.form-group-transparent input[type="date"]::-webkit-datetime-edit-text,
.form-group-transparent input[type="date"]::-webkit-datetime-edit-month-field,
.form-group-transparent input[type="date"]::-webkit-datetime-edit-day-field,
.form-group-transparent input[type="date"]::-webkit-datetime-edit-year-field {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
}

/* Hide the native calendar picker indicator & make entire input clickable - DARK FORMS ONLY */
.hero-form-container input[type="date"]::-webkit-calendar-picker-indicator,
.form-group-transparent input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    background: transparent !important;
}

/* Left calendar icon (Font Awesome) - ensure white color - DARK FORMS ONLY */
.hero-form-container .input-with-icon i.fa-calendar-alt,
.form-group-transparent .input-with-icon i.fa-calendar-alt {
    color: rgba(255, 255, 255, 0.6) !important;
    left: 1rem !important;
    right: auto !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* Ensure proper left padding for date input - DARK FORMS ONLY */
.hero-form-container input[type="date"],
.form-group-transparent input[type="date"] {
    padding-left: 3rem !important;
}

/* ============================================== */
/* APPOINTMENT PAGE DATE INPUT FIX - LIGHT BACKGROUND */
/* ============================================== */
/* Ensure dark text color for appointment page (white background) */
.apt-form-area input[type="date"],
.apt-form-area input[type="time"] {
    color: #111827 !important;
    color-scheme: light !important;
    -webkit-text-fill-color: #111827 !important;
}

.apt-form-area input[type="date"]::-webkit-datetime-edit,
.apt-form-area input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.apt-form-area input[type="date"]::-webkit-datetime-edit-text,
.apt-form-area input[type="date"]::-webkit-datetime-edit-month-field,
.apt-form-area input[type="date"]::-webkit-datetime-edit-day-field,
.apt-form-area input[type="date"]::-webkit-datetime-edit-year-field,
.apt-form-area input[type="time"]::-webkit-datetime-edit,
.apt-form-area input[type="time"]::-webkit-datetime-edit-fields-wrapper,
.apt-form-area input[type="time"]::-webkit-datetime-edit-text,
.apt-form-area input[type="time"]::-webkit-datetime-edit-hour-field,
.apt-form-area input[type="time"]::-webkit-datetime-edit-minute-field,
.apt-form-area input[type="time"]::-webkit-datetime-edit-ampm-field {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
}