:root {
    /* Colors - LIGHT MODE */
    --primary-accent: #0066CC;
    /* Professional Blue */
    --primary-accent-dark: #004C99;
    --light-bg: #FFFFFF;
    --card-bg: #F5F5F5;
    --text-dark: #1A1A1A;
    --text-gray: #666666;
    --glass-border: rgba(0, 0, 0, 0.1);

    /* Legacy variable mappings for compatibility */
    --primary-green: #0066CC;
    --primary-green-dark: #004C99;
    --dark-bg: #FFFFFF;
    --text-light: #1A1A1A;

    /* Spacing */
    --section-padding: 80px 20px;
    --container-width: 1200px;

    /* Transitions */
    --transition-fast: 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--dark-bg);
    color: var(--text-light);
    line-height: 1.6;
    overflow-x: hidden;
}

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

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

ul {
    list-style: none;
}

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

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition-fast);
    border: none;
}

.btn-primary {
    background-color: var(--primary-green);
    color: #000;
    box-shadow: 0 4px 15px rgba(57, 255, 20, 0.3);
}

.btn-primary:hover {
    background-color: var(--primary-green-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(57, 255, 20, 0.4);
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 15px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--primary-green);
    box-shadow: 0 0 10px var(--primary-green);
}

/* Utilities */
.highlight {
    color: var(--primary-green);
    text-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
}

/* Logo Button Text Colors */
.logo-btn .logo-text {
    color: #fff;
}

.logo-btn .logo-text .highlight {
    color: #39FF14;
    text-shadow: none;
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--primary-green);
    color: var(--primary-green);
    margin-left: 15px;
}

.btn-outline:hover {
    background-color: var(--primary-green);
    color: #000;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(18, 18, 18, 0.85);
    /* Semi-transparent dark */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
    padding: 15px 0;
    transition: var(--transition-fast);
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Logo as Button - Mobile Header */
.logo-btn {
    background: #000;
    padding: 10px 20px;
    border-radius: 50px;
    border: none;
    transition: all 0.3s ease;
    min-width: 120px;
    justify-content: center;
}

.logo-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.6);
}

.logo-img {
    height: 40px;
    width: auto;
}


.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links a {
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
}

.nav-links a:not(.btn)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--primary-green);
    transition: var(--transition-fast);
}

.nav-links a:not(.btn):hover::after {
    width: 100%;
}

.nav-btn {
    padding: 8px 20px;
    font-size: 0.9rem;
}

/* Mobile Menu */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.mobile-menu-btn span {
    width: 25px;
    height: 3px;
    background-color: var(--text-light);
    border-radius: 3px;
    transition: var(--transition-fast);
}

/* Hero Section */
.hero {
    height: 100vh;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('../hero_background.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: -80px;
    /* Counteract navbar height to be full screen */
    padding-top: 80px;
    position: relative;
}

/* Hero fade to white at bottom */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.7) 70%, #FFFFFF 100%);
    pointer-events: none;
    z-index: 1;
}

.hero-content {
    max-width: 800px;
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero p {
    font-size: 1.2rem;
    color: #ccc;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsiveness */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--card-bg);
        flex-direction: column;
        padding: 20px 0;
        border-bottom: 1px solid var(--glass-border);
        transform: translateY(-200%);
        transition: var(--transition-fast);
        z-index: 999;
    }

    .nav-links.active {
        transform: translateY(0);
    }
}

/* Services Section */
.services {
    padding: var(--section-padding);
    background-color: var(--dark-bg);
}

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

.service-card {
    background: var(--card-bg);
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid var(--glass-border);
    transition: var(--transition-fast);
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-green);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.icon-box {
    font-size: 3rem;
    color: var(--primary-green);
    margin-bottom: 25px;
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.service-card p {
    color: var(--text-gray);
}

/* Why Us Section */
.why-us {
    padding: var(--section-padding);
    background-color: #161616;
    /* Slightly lighter/different than dark-bg */
}

.features-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 50px;
    text-align: center;
}

.feature-item {
    flex: 1;
    min-width: 250px;
}

.feature-item i {
    font-size: 2.5rem;
    color: var(--primary-green);
    margin-bottom: 20px;
    display: inline-block;
    padding: 20px;
    border-radius: 50%;
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid var(--primary-green);
}

.feature-item h4 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.feature-item p {
    color: var(--text-gray);
}

/* Footer */
.footer {
    background-color: #000;
    padding: 80px 0 0;
    border-top: 1px solid var(--glass-border);
}

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

.footer-col h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.footer-col h4 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--primary-green);
}

.footer-col ul li {
    margin-bottom: 12px;
    color: var(--text-gray);
}

.footer-col ul li a:hover {
    color: var(--primary-green);
    padding-left: 5px;
}

.footer-col ul li i {
    color: var(--primary-green);
    margin-right: 10px;
    width: 20px;
}

.bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px 0;
    text-align: center;
    color: #666;
    font-size: 0.9rem;
}

/* Shop Section */
.shop {
    padding: var(--section-padding);
    background-color: var(--dark-bg);
    text-align: center;
}

.shop-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.product-card {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid var(--glass-border);
    width: 300px;
    transition: var(--transition-fast);
}

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

.product-image {
    background: rgba(255, 255, 255, 0.05);
    height: 200px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.product-image i {
    font-size: 4rem;
    color: var(--text-gray);
}

.product-card h3 {
    margin-bottom: 10px;
}

.price {
    font-size: 1.2rem;
    color: var(--primary-green);
    font-weight: 700;
    margin-bottom: 20px;
}

.shop-note {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin-top: 20px;
}

/* Process Section */
.process-section {
    padding: var(--section-padding);
    background-color: #1a1a1a;
}

.process-content {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.process-text {
    flex: 1;
    min-width: 300px;
}

.process-image {
    flex: 1;
    min-width: 300px;
}

.process-text h3 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--primary-green);
}

.process-text p {
    margin-bottom: 30px;
    color: var(--text-gray);
    font-size: 1.1rem;
}

.process-steps li {
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.process-steps li i {
    color: var(--primary-green);
    margin-top: 5px;
}

/* Guide Section */
.guide-section {
    padding: var(--section-padding);
}

/* Mobile & Graphic Refinements */
.process-image img,
.guide-content img {
    height: auto;
    width: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {

    /* Ensure no horizontal scroll on small phones */
    .process-image,
    .process-text {
        min-width: 100%;
    }

    .hero h1 {
        font-size: 2.5rem;
        /* Smaller heading for mobile */
    }

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

    .shop-grid,
    .features-grid,
    .process-content {
        gap: 30px;
    }
}

/* Damage Grid (Real Images) */
.damage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

@media (min-width: 1024px) {
    .damage-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }
}

.damage-card {
    background: #252525;
    border-radius: 15px;
    padding: 20px;
    border: 1px solid #333;
    transition: transform 0.3s ease;
}

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

.damage-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 20px;
}

.damage-card h4 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.status-badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
}

.status-badge.success {
    background: rgba(114, 191, 72, 0.2);
    color: var(--primary-green);
    border: 1px solid var(--primary-green);
}

/* Before/After Slider */
.slider-wrapper {
    text-align: center;
    margin-bottom: 60px;
}

.slider-wrapper h3 {
    margin-bottom: 15px;
    color: #39FF14;
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.8), 0 0 20px rgba(57, 255, 20, 0.5), 0 0 30px rgba(57, 255, 20, 0.3);
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(30, 30, 30, 0.9) 100%);
    padding: 12px 25px;
    border-radius: 12px;
    display: inline-block;
    border: 1px solid rgba(57, 255, 20, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.slider-wrapper p {
    color: #ccc;
    margin-bottom: 30px;
}

.slider-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 450px;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid var(--primary-green);
    cursor: ew-resize;
}

.slider-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slider-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slider-image.before {
    z-index: 2;
    width: 50%;
    /* Initial state */
    border-right: 2px solid var(--primary-green);
}

.slider-label {
    position: absolute;
    top: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: bold;
    pointer-events: none;
}

.slider-image.after .slider-label {
    right: 20px;
}

.slider-image.before .slider-label {
    left: 20px;
}

.slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 40px;
    margin-left: -20px;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    /* Let clicks pass through to container */
}

.handle-circle {
    width: 40px;
    height: 40px;
    background: var(--primary-green);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    box-shadow: 0 0 15px rgba(114, 191, 72, 0.5);
}

/* Slider Refinements */
.slider-handle {
    margin-left: 0 !important;
    /* Reset old margin */
    transform: translateX(-50%);
    /* Proper centering */
    cursor: grab;
}

.slider-handle:active {
    cursor: grabbing;
    transform: translateX(-50%) scale(1.1);
    /* Pop effect */
}

.slider-image.before {
    border-right: 3px solid var(--primary-green);
    /* Thicker divider */
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.5);
    /* Shadow for depth */
}

/* Comparison Slider Fix - Prevent Image Squashing */
.slider-image.before img {
    /* Important: The image must be the width of the CONTAINER, not the resizing wrapper */
    width: 100vw;
    /* Fallback */
    max-width: 800px;
    /* Match slider max-width */
    height: 100%;
    object-fit: cover;
    object-position: left;
}

.slider-container {
    /* Ensure aspect ratio is consistent */
    aspect-ratio: 16/9;
    height: auto;
}

/* Ultimate Slider Fixes */
.slider-container {
    touch-action: pan-y;
    /* Allow vertical scroll, block horizontal for slider */
    user-select: none;
    /* Prevent text selection while dragging */
    -webkit-user-select: none;
}

.slider-image.before {
    will-change: width;
    /* Optimization for animation */
}

.slider-handle {
    will-change: left;
}

/* Reviews Section */
.reviews-section {
    position: relative;
    overflow: hidden;
}

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

.review-card {
    background: #252525;
    padding: 30px;
    border-radius: 20px;
    position: relative;
    border: 1px solid #333;
    transition: all 0.3s ease;
}

.review-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-green);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.review-card.featured {
    background: radial-gradient(circle at top right, #2a2a2a, #1a1a1a);
    border: 1px solid var(--primary-green);
    transform: scale(1.05);
    z-index: 2;
}

.review-card.featured:hover {
    transform: scale(1.08) translateY(-10px);
}

.reviewer-img {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
}

.reviewer-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #333;
}

.review-card.featured .reviewer-img img {
    border-color: var(--primary-green);
}

.verified-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--primary-green);
    color: #000;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    border: 2px solid #252525;
}

.stars {
    color: #FFD700;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.review-text {
    color: #ccc;
    font-style: italic;
    margin-bottom: 20px;
    line-height: 1.6;
}

.review-card h4 {
    color: #fff;
    margin-bottom: 5px;
}

.review-date {
    display: block;
    color: #666;
    font-size: 0.9rem;
}

/* Rotating Seal Animation */
.rotating-seal {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    animation: rotate 10s linear infinite;
    pointer-events: none;
}

.rotating-seal svg {
    width: 100%;
    height: 100%;
}

.rotating-seal text {
    font-size: 14px;
    font-family: monospace;
    font-weight: bold;
    fill: var(--primary-green);
    letter-spacing: 2px;
}

.center-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.5rem;
}

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

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

/* Floating Chat Button */
.floating-chat-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--primary-green);
    color: #000;
    padding: 15px 25px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    box-shadow: 0 5px 20px rgba(114, 191, 72, 0.4);
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: pulse 2s infinite;
}

.floating-chat-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 30px rgba(114, 191, 72, 0.6);
}

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

.chat-text {
    display: flex;
    flex-direction: column;
}

.chat-text span {
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.2;
}

.chat-text small {
    font-size: 0.75rem;
    opacity: 0.8;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(114, 191, 72, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(114, 191, 72, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(114, 191, 72, 0);
    }
}

/* Footer Refinements */
.footer-logo {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 1.5rem;
    font-weight: 800;
    text-decoration: none;
    color: #fff;
}

.footer-logo .logo-text {
    letter-spacing: 1px;
}

.footer-col.contact-col ul li a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-col.contact-col ul li a:hover {
    color: var(--primary-green);
}

/* Multi-Channel Chat Widget */
.chat-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}

.chat-toggle-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary-green);
    border: none;
    color: #000;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(114, 191, 72, 0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    animation: pulse 2s infinite;
}

.chat-toggle-btn:hover {
    transform: scale(1.1);
}

.chat-toggle-btn.active {
    transform: rotate(45deg);
    background: #fff;
    color: #000;
    animation: none;
}

.chat-toggle-btn.active i {
    /* Change icon to close X via CSS content if needed, but rotation works well */
}

.chat-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #FF4444;
    color: #fff;
    font-size: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
    font-weight: bold;
}

.chat-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: bottom right;
}

.chat-options.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.chat-option {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #333;
    padding: 12px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
    min-width: 160px;
    justify-content: flex-start;
}

.chat-option:hover {
    transform: translateX(-5px);
}

.chat-option i {
    font-size: 1.2rem;
    width: 25px;
    text-align: center;
}

.chat-option.whatsapp {
    color: #25D366;
}

.chat-option.telegram {
    color: #0088cc;
}

.chat-option.sms {
    color: #555;
}

.chat-option.messenger {
    color: #0084FF;
}

/* Payment Methods Styles */
.payment-methods i {
    transition: transform 0.3s;
    opacity: 0.8;
}

.payment-methods i:hover {
    transform: translateY(-3px);
    opacity: 1;
    color: var(--primary-green);
}

/* Expanded Social Icons */
.social-links a {
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

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

/* Chat Animations */
@keyframes typingBounce {

    0%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-6px);
    }
}

@keyframes messageFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.chat-message {
    animation: messageFadeIn 0.3s ease-out;
}

#sendChatBtn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

#sendChatBtn:active {
    transform: scale(0.95);
}

/* Chat Desktop Width Enhancement */
@media (min-width: 768px) {
    .live-chat-box {
        max-width: 550px !important;
    }
}

@media (min-width: 1024px) {
    .live-chat-box {
        max-width: 600px !important;
    }
}

#userMessageInput:focus {
    border-color: #39FF14 !important;
}

/* CRISP CHAT BUBBLE - TOP RIGHT POSITION */
.crisp-client .cc-tlyw {
    bottom: auto !important;
    top: 90px !important;
    right: 20px !important;
}

.crisp-client .cc-1m2mf {
    bottom: auto !important;
    top: 150px !important;
    right: 20px !important;
}

/* Hide Tawk only (not Crisp) */
#tawk-bubble-container,
.tawk-min-container,
[class*="tawk"],
[id*="tawk"] {
    display: none !important;
}

/* Chat action button hover */
.chat-action-btn:hover {
    background: #444 !important;
    transform: scale(1.1);
}

/* Fix mobile buttons spacing */
@media (max-width: 768px) {
    .hero-btns {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .hero-btns .btn {
        width: 100%;
        display: block;
        margin: 0;
    }
}

/* Fix Footer Social Links Layout */
.social-links {
    display: flex !important;
    gap: 15px !important;
    margin-top: 20px !important;
    flex-wrap: wrap !important;
}

.social-links a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #333;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s;
    text-decoration: none;
}

.social-links a:hover {
    background: var(--primary-green);
    color: #000;
    transform: translateY(-3px);
}

/* BOOKING SECTION LAYOUT (New) */
.booking-layout-grid {
    display: grid;
    grid-template-columns: 1fr 400px 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.booking-side-block {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.booking-side-block.left {
    text-align: right;
    align-items: flex-end;
}

.booking-side-block.right {
    text-align: left;
    align-items: flex-start;
}

.trust-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 250px;
}

.booking-side-block.left .trust-item {
    align-items: flex-end;
}

.booking-side-block.right .trust-item {
    align-items: flex-start;
}

.trust-item i {
    font-size: 1.8rem;
    color: var(--primary-green);
    margin-bottom: 10px;
}

.trust-item h4 {
    color: #fff;
    font-size: 1.1rem;
    margin: 0;
}

.trust-item p {
    color: #999;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

/* Mobile Stack for Booking */
@media (max-width: 992px) {
    .booking-layout-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .booking-side-block.left,
    .booking-side-block.right {
        text-align: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .booking-side-block.left .trust-item,
    .booking-side-block.right .trust-item {
        align-items: center;
        text-align: center;
    }

    /* Reorder: Product First on Mobile */
    .product-card.main-booking-card {
        order: -1;
        margin: 0 auto;
    }
}

/* FUTURE TECH SECTION STYLES */
.future-tech-section {
    position: relative;
    text-align: center;
}

.future-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
    position: relative;
    z-index: 2;
}

.future-card {
    background: #111;
    border: 1px solid #333;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    position: relative;
}

.future-card:hover {
    transform: translateY(-15px) scale(1.02);
    border-color: var(--primary-green);
    box-shadow: 0 10px 40px rgba(57, 255, 20, 0.15);
}

.future-img-wrapper {
    width: 100%;
    height: 250px;
    /* Reduced height for better aspect ratio */
    overflow: hidden;
    position: relative;
}

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

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

.future-content {
    padding: 25px;
    text-align: left;
}

.future-content h3 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 1.4rem;
}

.future-content p {
    color: #bbb;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Designed Tech Points (Single Line) */
.tech-points-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tech-point-row {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid #333;
    border-left: 4px solid var(--primary-green);
    padding: 15px 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.tech-point-row:hover {
    background: rgba(57, 255, 20, 0.05);
    transform: translateX(10px);
}

.tech-point-icon {
    font-size: 1.2rem;
    color: var(--primary-green);
}

.tech-point-label {
    font-weight: 800;
    color: #fff;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    min-width: 180px;
    /* alignment */
}

.tech-point-desc {
    color: #ccc;
    font-style: italic;
}

/* Animated Orbs */
.tech-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
    opacity: 0.15;
    animation: orbFloat 20s infinite alternate;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: var(--primary-green);
    top: -100px;
    left: -100px;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: #0044ff;
    bottom: -150px;
    right: -150px;
    animation-delay: -5s;
}

@keyframes orbFloat {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(50px, 100px);
    }
}

/* Fix mobile hero - header covering Premium */
@media (max-width: 768px) {
    .hero {
        padding-top: 120px !important;
        margin-top: -80px;
    }

    .hero h1 {
        font-size: 2.2rem;
        margin-top: 20px;
    }

    /* Keep button text on one line */
    .hero-btns .btn {
        white-space: nowrap;
        font-size: 0.85rem;
        padding: 12px 20px;
    }
}

@media (max-width: 400px) {
    .hero-btns .btn {
        font-size: 0.75rem;
        padding: 10px 15px;
    }
}

/* Damage Grid - Force 4 columns on tablet and desktop */
.damage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 992px) {
    .damage-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }

    .damage-card {
        padding: 15px;
    }

    .damage-card img {
        max-height: 120px;
    }

    .damage-card h4 {
        font-size: 0.9rem;
    }

    .damage-card p {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 768px) {
    .damage-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    .damage-card {
        padding: 10px;
    }

    .damage-card img {
        max-height: 80px;
    }

    .damage-card h4 {
        font-size: 0.8rem;
    }

    .damage-card .status-badge {
        font-size: 0.65rem;
        padding: 4px 8px;
    }

    .damage-card p {
        display: none;
        /* Hide descriptions on mobile to save space */
    }
}

@media (max-width: 480px) {
    .damage-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .damage-card p {
        display: block;
        font-size: 0.7rem !important;
    }
}

/* Fix iOS zoom on chat input */
#userMessageInput {
    font-size: 16px !important;
    /* Prevents iOS zoom */
}

/* Full-width chat on mobile */
@media (max-width: 768px) {
    .embedded-chat-section .container {
        padding: 0 10px;
    }

    .live-chat-box {
        max-width: 100% !important;
        border-radius: 15px !important;
        margin: 0 5px;
    }

    #userMessageInput {
        font-size: 16px !important;
        padding: 12px 15px !important;
    }

    #chatMessages {
        min-height: 180px !important;
        max-height: 250px !important;
    }
}

/* SHOW Crisp Chat Bubble - Position Top Right */
.crisp-client,
.crisp-client * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Move Crisp to top right */
.crisp-client .crisp-1sps5x9 {
    bottom: auto !important;
    top: 100px !important;
    right: 20px !important;
}

/* Crisp chat box position */
.crisp-client .crisp-kquevr {
    bottom: auto !important;
    top: 160px !important;
    right: 20px !important;
}

/* 3-COLUMN CHAT LAYOUT */
.chat-layout-grid {
    display: grid;
    grid-template-columns: 1fr 550px 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.chat-side-panel {
    text-align: center;
}

.side-panel-content {
    background: rgba(30, 30, 30, 0.8);
    border: 1px solid #333;
    border-radius: 15px;
    padding: 30px 25px;
}

.side-panel-content h3 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.side-panel-content p {
    color: #999;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

@media (max-width: 1200px) {
    .chat-layout-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .chat-side-panel {
        max-width: 500px;
        margin: 0 auto;
    }

    .live-chat-box {
        max-width: 500px;
        margin: 0 auto;
    }
}

/* ALL 3 SLIDERS IN ONE ROW */
.sliders-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.sliders-row .slider-wrapper {
    margin: 0 !important;
}

.sliders-row .slider-container {
    max-height: 300px;
}

.sliders-row h3 {
    font-size: 1.1rem;
}

.sliders-row p {
    font-size: 0.85rem;
}

@media (max-width: 992px) {
    .sliders-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* FORCE 3-COLUMN GRIDS ON DESKTOP - FIX */
@media (min-width: 992px) {
    .future-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .chat-layout-grid {
        display: grid !important;
        grid-template-columns: 1fr 500px 1fr !important;
        gap: 30px !important;
    }

    .sliders-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1200px) {
    .chat-layout-grid {
        grid-template-columns: 1fr 550px 1fr !important;
        gap: 40px !important;
    }
}

/* Fix future cards container width */
.future-tech-section .container {
    max-width: 1200px;
}

/* HERO PHONE BUTTON - RESPONSIVE */
.hero-phone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 280px;
    font-size: 1.4rem;
    margin-bottom: 25px;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 800;
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.5);
}

.hero-tagline {
    font-size: 1.1rem;
    color: #aaa;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .hero-phone-btn {
        font-size: 1.1rem;
        min-width: auto;
        width: 90%;
        max-width: 300px;
        padding: 14px 20px;
    }

    .hero-tagline {
        font-size: 0.9rem;
    }
}

/* FORCE 3 SLIDERS IN ROW */
@media (min-width: 992px) {
    .sliders-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ============================================
   MOBILE OPTIMIZATION - COMPREHENSIVE FIX
   ============================================ */

@media (max-width: 768px) {

    /* REDUCE SECTION PADDING */
    section {
        padding: 40px 0 !important;
    }

    .section-title {
        font-size: 1.8rem !important;
        margin-bottom: 25px !important;
    }

    /* CHAT SECTION - REMOVE EXTRA SPACE */
    .embedded-chat-section {
        padding: 30px 0 !important;
    }

    .embedded-chat-section .container>p {
        margin-top: 10px !important;
        margin-bottom: 0 !important;
    }

    .chat-side-panel {
        padding: 0 15px;
    }

    .side-panel-content {
        padding: 20px 15px;
    }

    .side-panel-content h3 {
        font-size: 1.1rem;
    }

    .side-panel-content p {
        font-size: 0.85rem;
        margin-bottom: 15px;
    }

    /* TECH POINTS - FIX TEXT WRAPPING */
    .tech-point-row {
        flex-wrap: wrap;
        padding: 12px 15px;
    }

    .tech-point-label {
        min-width: auto !important;
        font-size: 0.9rem !important;
    }

    .tech-point-desc {
        width: 100%;
        margin-top: 5px;
        font-size: 0.85rem;
    }

    /* PROCESS CONTENT - BETTER LAYOUT */
    .process-content {
        margin-top: 30px !important;
    }

    .process-text {
        padding: 0 15px;
    }

    .process-text h3 {
        font-size: 1.5rem !important;
        text-align: center;
    }

    .process-text p {
        text-align: center;
        font-size: 0.9rem;
    }

    .process-steps li {
        margin-bottom: 15px;
        font-size: 0.9rem;
    }

    /* PROCESS IMAGE - NICER DISPLAY */
    .process-image {
        margin-top: 25px;
        padding: 0 15px;
    }

    .process-image img {
        border-radius: 15px;
        width: 100%;
    }

    /* GUIDE SECTION - CHIP GUIDE IMAGE */
    .guide-section {
        margin-top: 30px !important;
    }

    .guide-section img {
        border-radius: 15px;
        margin: 20px auto;
        display: block;
        max-width: 95%;
    }

    /* DAMAGE CARDS - EVEN SPACING */
    .damage-grid {
        gap: 15px !important;
        padding: 0 10px;
    }

    .damage-card {
        padding: 12px !important;
    }

    .damage-card h4 {
        font-size: 0.85rem;
    }

    /* SERVICES SECTION */
    .services-grid {
        gap: 20px;
        padding: 0 15px;
    }

    .service-card {
        padding: 25px 20px;
    }

    /* FOOTER - CENTERED */
    footer {
        text-align: center !important;
    }

    .footer-content {
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px;
    }

    .footer-col {
        text-align: center !important;
        align-items: center !important;
    }

    .footer-col h4 {
        text-align: center;
    }

    .footer-col ul {
        text-align: center;
        padding: 0;
    }

    .footer-col ul li {
        text-align: center;
    }

    .footer-col p {
        text-align: center;
    }

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

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

    /* FEATURES GRID */
    .features-grid {
        gap: 25px;
        padding: 0 15px;
    }

    /* REMOVE EXCESSIVE MARGINS */
    .slider-wrapper {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    /* FUTURE TECH CARDS */
    .future-grid {
        gap: 20px !important;
        padding: 0 15px;
    }

    .future-card {
        margin-bottom: 0;
    }

    .future-content {
        padding: 15px;
    }

    .future-content h3 {
        font-size: 1.1rem;
    }

    .future-content p {
        font-size: 0.85rem;
    }

    /* BOOKING SECTION */
    .booking-layout-grid {
        gap: 25px !important;
        padding: 0 15px;
    }

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

    .trust-item h4 {
        font-size: 1rem;
    }

    .trust-item p {
        font-size: 0.85rem;
    }

    /* PRODUCT CARD */
    .product-card {
        padding: 25px 20px;
    }

    /* REVIEWS */
    .reviews-grid {
        gap: 20px;
        padding: 0 15px;
    }
}

/* EXTRA SMALL SCREENS */
@media (max-width: 400px) {
    .hero h1 {
        font-size: 1.8rem !important;
    }

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

    .hero-tagline {
        font-size: 0.8rem;
    }
}

/* HERO - SINGLE LINE TEXT - NEVER WRAP */
.hero-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-bottom: 25px;
}

.title-line {
    display: block;
    white-space: nowrap;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
}

.hero-phone-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
}

.phone-label {
    white-space: nowrap;
    font-size: 1.2rem;
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
}

.phone-number {
    white-space: nowrap;
    font-size: 2rem;
    color: var(--primary-green);
    font-weight: 800;
    text-decoration: none;
    text-shadow: 0 0 20px rgba(57, 255, 20, 0.5);
}

.phone-number:hover {
    color: #fff;
    text-shadow: 0 0 30px rgba(57, 255, 20, 0.8);
}

.hero-btn {
    white-space: nowrap !important;
}

/* RESPONSIVE - SCALE DOWN BUT NEVER WRAP */
@media (max-width: 768px) {
    .title-line {
        font-size: 1.8rem;
        letter-spacing: 1px;
    }

    .phone-label {
        font-size: 1rem;
    }

    .phone-number {
        font-size: 1.6rem;
    }

    .hero-btn {
        font-size: 0.85rem !important;
        padding: 12px 20px !important;
    }
}

@media (max-width: 400px) {
    .title-line {
        font-size: 1.5rem;
    }

    .phone-number {
        font-size: 1.4rem;
    }

    .hero-btn {
        font-size: 0.75rem !important;
        padding: 10px 15px !important;
    }
}

/* MOBILE HEADER - PHONE + WHATSAPP BUTTONS */
.mobile-header-btns {
    display: none;
    gap: 12px;
}

.mobile-header-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.phone-btn {
    background: var(--primary-green);
    color: #000;
}

.whatsapp-btn {
    background: #25D366;
    color: #fff;
}

.phone-btn:hover,
.whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.5);
}

@media (max-width: 768px) {
    .mobile-header-btns {
        display: flex;
    }

    .desktop-nav {
        display: none !important;
    }

    .mobile-menu-btn {
        display: none !important;
    }

    .navbar-container {
        justify-content: space-between;
    }

    .logo-text {
        font-size: 1.3rem;
    }

    .logo-img {
        width: 35px;
        height: 35px;
    }
}

/* MESSENGER BUTTON */
.messenger-btn {
    background: #0084FF;
    color: #fff;
}

.messenger-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0, 132, 255, 0.5);
}

@media (max-width: 768px) {
    .mobile-header-btn {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
}

/* MOBILE PILL BUTTONS - UNIFORM SIZE */
.mobile-pill-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
    min-width: 120px;
    border: 2px solid transparent;
}

.phone-pill {
    background: #39FF14;
    color: #000;
}

.whatsapp-pill {
    background: #39FF14;
    color: #000;
}

.phone-pill:hover,
.whatsapp-pill:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.6);
}

@media (max-width: 768px) {
    .mobile-header-btns {
        display: flex;
        gap: 8px;
    }

    .mobile-pill-btn {
        font-size: 0.75rem;
        padding: 8px 12px;
    }
}

@media (max-width: 400px) {
    .mobile-pill-btn {
        font-size: 0.65rem;
        padding: 6px 10px;
        gap: 5px;
    }
}

/* HIDE LOGO IMAGE ON MOBILE */
@media (max-width: 768px) {
    .logo-img {
        display: none !important;
    }
}

/* MOBILE HEADER - 3 ITEMS: PHONE | LOGO | WHATSAPP */
.mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-only {
        display: flex !important;
    }

    .navbar-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
    }

    .logo {
        order: 2;
    }

    .phone-pill.mobile-only {
        order: 1;
    }

    .whatsapp-pill.mobile-only {
        order: 3;
    }

    /* All header buttons - UNIFORM STYLE */
    .mobile-pill-btn {
        height: 42px;
        padding: 0 18px;
        font-size: 0.7rem;
        font-weight: 700;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .logo-btn {
        height: 42px;
        padding: 0 20px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000;
        border: none;
    }

    .logo-text {
        font-size: 0.9rem;
        letter-spacing: 1px;
        white-space: nowrap;
    }
}

@media (max-width: 400px) {
    .navbar-container {
        padding: 0 10px;
    }

    .mobile-pill-btn {
        height: 36px;
        padding: 0 12px;
        font-size: 0.6rem;
    }

    .logo-btn {
        height: 36px;
        padding: 0 14px;
    }

    .logo-text {
        font-size: 0.75rem;
        letter-spacing: 0.5px;
    }
}

/* MOBILE - EVEN SIDE PADDING */
@media (max-width: 768px) {
    .hero-content {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    .hero-btns {
        width: 100%;
        padding: 0 10px;
    }

    .hero-btn {
        width: 100%;
        max-width: 280px;
        text-align: center;
        justify-content: center;
    }
}

/* =============================================
   MOBILE - GLOBAL CONSISTENT PADDING
   Same left/right margins for EVERYTHING
   ============================================= */

@media (max-width: 768px) {

    /* Global container padding */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Header alignment */
    .navbar-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Chat section alignment */
    .embedded-chat-section .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .chat-side-panel,
    .side-panel-content,
    .live-chat-box {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* All sections align */
    .services .container,
    .process-section .container,
    .why-us .container,
    .shop .container,
    .reviews .container,
    footer .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Cards and grids full width */
    .service-card,
    .future-card,
    .damage-card,
    .product-card,
    .review-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Sliders full width */
    .slider-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Booking section */
    .booking-layout-grid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* All text centered */
    .hero-content,
    .section-title,
    .chat-side-panel {
        text-align: center;
    }
}

/* =============================================
   SCIENCE SECTION - FANCY ANIMATED STEPS
   ============================================= */

.process-steps li {
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.1), rgba(30, 30, 30, 0.8));
    border: 1px solid rgba(57, 255, 20, 0.3);
    border-radius: 15px;
    padding: 20px 25px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.process-steps li:nth-child(1) {
    animation-delay: 0.1s;
}

.process-steps li:nth-child(2) {
    animation-delay: 0.3s;
}

.process-steps li:nth-child(3) {
    animation-delay: 0.5s;
}

.process-steps li::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(57, 255, 20, 0.2), transparent);
    transition: left 0.5s ease;
}

.process-steps li:hover {
    transform: translateX(10px);
    border-color: var(--primary-green);
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.3);
}

.process-steps li:hover::before {
    left: 100%;
}

.process-steps li strong {
    color: var(--primary-green);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

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

/* Glowing checkmark */
.process-steps li::after {
    content: '✓';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--primary-green);
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
}

/* =============================================
   DAMAGE CARDS - BEAUTIFUL 2x2 GRID ON MOBILE
   ============================================= */

@media (max-width: 768px) {
    .damage-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 20px !important;
    }

    .damage-card {
        background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
        border: 1px solid rgba(57, 255, 20, 0.3);
        border-radius: 15px;
        padding: 15px !important;
        text-align: center;
        transition: all 0.3s ease;
    }

    .damage-card:hover {
        border-color: var(--primary-green);
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(57, 255, 20, 0.2);
    }

    .damage-card img {
        width: 100%;
        height: 100px !important;
        object-fit: cover;
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .damage-card h4 {
        font-size: 0.9rem !important;
        margin-bottom: 8px;
        color: #fff;
    }

    .damage-card .status-badge {
        font-size: 0.7rem !important;
        padding: 4px 12px !important;
        border-radius: 20px;
        margin-bottom: 8px;
    }

    .damage-card p {
        font-size: 0.75rem !important;
        color: #aaa;
        line-height: 1.4;
        display: block !important;
    }
}

/* =============================================
   FOOTER - COLORFUL SOCIAL ICONS + LAYOUT FIX
   ============================================= */

/* Colorful Social Media Icons */
.social-links a:nth-child(1) {
    color: #1877F2;
}

/* Facebook Blue */
.social-links a:nth-child(2) {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Instagram Gradient */
.social-links a:nth-child(3) {
    color: #1DA1F2;
}

/* Twitter Blue */
.social-links a:nth-child(4) {
    color: #FF0000;
}

/* YouTube Red */
.social-links a:nth-child(5) {
    color: #ff0050;
}

/* TikTok Pink */
.social-links a:nth-child(6) {
    color: #0A66C2;
}

/* LinkedIn Blue */

.social-links a {
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.social-links a:hover {
    transform: scale(1.3);
    filter: brightness(1.2);
}

/* Mobile Footer Improvements */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column !important;
        text-align: center;
    }

    .footer-col {
        width: 100% !important;
        margin-bottom: 30px;
    }

    /* Social links first, then payment */
    .social-links {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-bottom: 20px;
    }

    .payment-methods {
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 10px !important;
        font-size: 1.5rem !important;
    }

    .brand-col {
        order: 1;
    }

    .contact-col {
        order: 2;
    }

    .links-col {
        order: 3;
    }
}

/* =============================================
   CONTACT SECTION - BEAUTIFUL STYLING
   ============================================= */

.contact-list {
    list-style: none;
    padding: 0;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.1), rgba(30, 30, 30, 0.8));
    border: 1px solid rgba(57, 255, 20, 0.3);
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-item:hover {
    border-color: var(--primary-green);
    transform: translateX(5px);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.3);
}

.contact-item i {
    color: var(--primary-green);
    font-size: 1.2rem;
}

.map-container {
    margin: 20px 0;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid rgba(57, 255, 20, 0.3);
}

.map-container iframe {
    display: block;
}

@media (max-width: 768px) {
    .contact-item {
        justify-content: center;
        padding: 15px 20px;
    }

    .map-container {
        margin: 15px 0;
    }
}

/* =============================================
   TRUST ITEMS - SINGLE LINE TEXT FIX
   ============================================= */

.trust-item h4 {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure container allows width */
.booking-side-block {
    min-width: 0;
    /* Flexbox overflow fix */
}

/* Responsive Font Sizing for Trust items to preventing wrapping */
@media (max-width: 1200px) {
    .trust-item h4 {
        font-size: 0.95rem;
    }
}

@media (max-width: 992px) {
    .trust-item h4 {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .booking-layout-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .booking-side-block {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .trust-item {
        width: 45%;
        /* 2 items per row on mobile for better balance */
        min-width: 140px;
        margin-bottom: 20px;
        padding: 0 5px;
    }

    .trust-item h4 {
        font-size: 0.85rem;
        white-space: nowrap !important;
    }

    .trust-item p {
        font-size: 0.75rem;
        line-height: 1.3;
        display: block;
        /* Ensure subtext shows */
    }
}

@media (max-width: 400px) {
    .trust-item h4 {
        font-size: 0.75rem;
    }
}

/* MOBILE CHAT - HIDE SIDE PANELS */
@media (max-width: 992px) {
    .chat-side-panel {
        display: none !important;
    }

    .chat-layout-grid {
        grid-template-columns: 1fr !important;
        display: block !important;
    }

    .live-chat-box {
        width: 100% !important;
        margin: 0 auto;
    }
}

/* MOBILE - HIDE CHAT SIDE PANELS */
@media (max-width: 768px) {
    .chat-side-panel {
        display: none !important;
    }

    .chat-layout-grid {
        grid-template-columns: 1fr !important;
        display: block !important;
    }

    /* Ensure the center chat box takes full width */
    .chat-center-panel {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =============================================
   SERVICES - SINGLE LINE TITLES
   ============================================= */

.service-card h3 {
    white-space: nowrap !important;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media (max-width: 480px) {
    .service-card h3 {
        font-size: 1.1rem !important;
        /* Scale down to fit */
    }
}

@media (max-width: 360px) {
    .service-card h3 {
        font-size: 1.0rem !important;
    }
}

/* =============================================
   SCIENCE SECTION - NEW CARD DESIGN
   ============================================= */

.science-card {
    background: #111;
    border: 1px solid #333;
    border-left: 5px solid var(--primary-green);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
    transition: all 0.3s ease;
}

.science-card:hover {
    transform: translateX(10px);
    background: #1a1a1a;
    box-shadow: 0 10px 30px rgba(57, 255, 20, 0.1);
}

.science-icon {
    font-size: 2rem;
    color: var(--primary-green);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
}

.science-text h4 {
    color: #fff;
    margin: 0;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-weight: 700;
}

.science-text p {
    color: #aaa;
    margin: 5px 0 0;
    font-size: 0.95rem;
    font-style: italic;
}

/* Animations */
.science-card {
    animation: fadeInUp 0.5s ease backwards;
}

.science-card:nth-child(1) {
    animation-delay: 0.1s;
}

.science-card:nth-child(2) {
    animation-delay: 0.2s;
}

.science-card:nth-child(3) {
    animation-delay: 0.3s;
}

/* FIX MOBILE HEADER BUTTONS ON ONE LINE */
@media (max-width: 480px) {
    .mobile-header-btns {
        flex-wrap: nowrap !important;
        /* Force single line */
        gap: 8px !important;
        width: 100% !important;
        justify-content: space-between !important;
    }

    .mobile-pill-btn {
        padding: 8px 12px !important;
        /* Reduce padding to fit */
        font-size: 0.8rem !important;
        /* Reduce font size */
        white-space: nowrap !important;
    }

    /* Ensure icon and text fit */
    .mobile-pill-btn i {
        margin-right: 5px !important;
    }

    .logo-text {
        font-size: 1.2rem !important;
        /* Slightly smaller logo */
    }
}

@media (max-width: 360px) {
    .mobile-pill-btn span {
        display: none !important;
        /* Hide text on very small screens, show icon only */
    }

    .mobile-pill-btn {
        padding: 10px !important;
        border-radius: 50% !important;
        /* Circle button */
    }

    .mobile-pill-btn i {
        margin-right: 0 !important;
    }
}

/* =============================================
   MOBILE HEADER - TWICE AS BIG
   ============================================= */

@media (max-width: 768px) {
    .navbar {
        padding: 35px 0 !important;
        /* Doubling the standard 15px with some extra */
    }

    /* Ensure elements remain centered vertically */
    .navbar-container {
        min-height: 60px;
        /* Ensure logical height */
    }
}

/* =============================================
   MOBILE HEADER FIXES
   ============================================= */

@media (max-width: 768px) {

    /* 1. Compensation for taller header */
    .hero {
        padding-top: 130px !important;
        /* Increase from 80px to accommodate taller fixed header */
        background-position: center top !important;
    }

    /* 2. Layout Width Fixes */
    .navbar-container {
        padding: 0 10px !important;
        /* Reduce container padding to give more space to content */
        gap: 5px !important;
    }

    /* 3. Sizing Adjustments to prevent overflow */
    .logo {
        font-size: 1.1rem !important;
        /* Smaller logo */
    }

    .logo-img {
        height: 25px !important;
    }

    .mobile-pill-btn {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
    }

    /* Hide specific text on very narrow screens to prevent overlap */
    @media (max-width: 380px) {

        .phone-pill span,
        .whatsapp-pill span {
            display: none !important;
            /* Show icons only on small phones */
        }

        .mobile-pill-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 !important;
        }

        .mobile-pill-btn i {
            margin: 0 !important;
            font-size: 1.1rem;
        }
    }
}

/* =============================================
   MOBILE HEADER - FIT CONTENT
   ============================================= */

@media (max-width: 768px) {
    .navbar {
        padding: 10px 0 !important;
        /* Tight padding, let content dictate height */
        height: auto !important;
        min-height: auto !important;
    }

    .navbar-container {
        min-height: 0 !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        align-items: center !important;
        /* Vertically center everything */
    }

    /* Ensure Hero starts after the header */
    .hero {
        padding-top: 80px !important;
        /* Reset to reasonable offset */
    }
}

/* =============================================
   MOBILE HEADER - PERFECT GRID ALIGNMENT
   ============================================= */

@media (max-width: 768px) {
    .navbar-container {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        /* Left, Center, Right */
        align-items: center !important;
        justify-items: center;
        width: 100% !important;
        padding: 10px 15px !important;
        /* Balanced padding */
    }

    /* Left Button (Phone) */
    .phone-pill {
        justify-self: start !important;
    }

    /* Center Logo */
    .logo {
        justify-self: center !important;
        margin: 0 !important;
        grid-column: 2;
    }

    /* Right Button (WhatsApp) */
    .whatsapp-pill {
        justify-self: end !important;
    }

    /* Make buttons compact to prevent overflow */
    .mobile-pill-btn {
        min-width: 40px;
        /* Ensure clickable area */
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px !important;
        /* Always rounded */
        padding: 0 12px !important;
        margin: 0 !important;
    }

    /* Hide text if screen is too narrow (adaptive) */
    @media (max-width: 400px) {
        .mobile-pill-btn {
            width: 40px !important;
            padding: 0 !important;
            border-radius: 50% !important;
            /* Circle on small screens */
        }

        .mobile-pill-btn span,
        .mobile-pill-btn::after {
            display: none !important;
            /* Hide text content */
        }

        .mobile-pill-btn i {
            margin: 0 !important;
            font-size: 1.2rem !important;
        }
    }
}

/* =============================================
   FORCE ICON-ONLY BUTTONS ON MOBILE
   ============================================= */

@media (max-width: 768px) {

    /* Hide text inside grid buttons starting from general mobile width */
    .mobile-pill-btn span {
        display: none !important;
    }

    .mobile-pill-btn {
        width: 45px !important;
        height: 45px !important;
        border-radius: 50% !important;
        /* Perfect circle */
        padding: 0 !important;
        min-width: 0 !important;
    }

    .mobile-pill-btn i {
        margin: 0 !important;
        font-size: 1.4rem !important;
        /* Larger icon */
    }

    /* Ensure no ::after content interferes */
    .mobile-pill-btn::after {
        display: none !important;
    }
}

/* =============================================
   SAFEGUARD - FORCE HIDE TEXT ON MOBILE
   ============================================= */
@media (max-width: 768px) {
    .mobile-pill-btn {
        font-size: 0 !important;
        /* Forces any stray text to be invisible */
    }

    .mobile-pill-btn i {
        font-size: 1.4rem !important;
        /* Restore icon size */
    }
}

/* =============================================
   MOBILE HEADER - GREEN PILL BUTTONS (RESTORED TEXT)
   ============================================= */

@media (max-width: 768px) {

    /* 1. Restore Button Visibility & Styling */
    .mobile-pill-btn {
        background-color: var(--primary-green) !important;
        /* Neon Green Background */
        color: #000 !important;
        /* Black Text */
        border: none !important;
        border-radius: 50px !important;
        /* Full rounded pill */
        padding: 6px 14px !important;
        /* optimize padding */
        font-size: 0.75rem !important;
        /* Compact font */
        font-weight: 700 !important;
        width: auto !important;
        /* Allow auto width */
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        box-shadow: 0 4px 10px rgba(57, 255, 20, 0.3);
    }

    /* 2. Restore Text */
    .mobile-pill-btn span {
        display: inline-block !important;
        /* Show text again */
        white-space: nowrap !important;
    }

    /* 3. Icon Styling */
    .mobile-pill-btn i {
        font-size: 0.9rem !important;
        margin: 0 !important;
        color: #000 !important;
    }

    /* 4. Disable the Icon-Only override I added previously */
    .mobile-pill-btn::after {
        display: none !important;
    }

    /* 5. Layout Adjustments to Fit Everything */
    .navbar-container {
        padding: 5px 8px !important;
        /* Very tight container padding */
        gap: 2px !important;
    }

    .logo-text {
        font-size: 1rem !important;
        /* Smaller logo text to make room */
        white-space: nowrap;
    }

    .logo-img {
        height: 20px !important;
        /* Smaller logo icon */
    }

    /* 6. Specific styling for very small screens (iPhone SE etc) */
    @media (max-width: 370px) {
        .mobile-pill-btn {
            padding: 5px 8px !important;
            font-size: 0.65rem !important;
        }

        .logo-text {
            display: none !important;
            /* Hide logo text only on tiniest screens to save layout */
        }

        .logo-img {
            height: 28px !important;
            /* Make icon slightly bigger since text is gone */
        }
    }
}

/* =============================================
   MOBILE HEADER - EQUAL SIZE BUTTONS
   ============================================= */

@media (max-width: 768px) {
    .navbar-container {
        /* Ensure the grid gives equal space to left and right columns */
        grid-template-columns: 1fr auto 1fr !important;
        gap: 5px !important;
        padding: 10px 5px !important;
    }

    .mobile-pill-btn {
        /* FORCE EQUAL WIDTHS */
        width: 100% !important;
        max-width: 140px !important;
        /* Cap width so they don't get too huge */
        min-width: 110px !important;
        /* Ensure they don't get too small */

        /* Layout internals */
        justify-content: center !important;
        padding: 8px 5px !important;
        /* Use padding to control height equivalence */
        height: 38px !important;
        /* Fixed height for uniformity */

        /* Font sizing - allow "different sizes" as requested, but start standard */
        font-size: 0.7rem !important;
        letter-spacing: -0.5px !important;
        /* Tighten up text to fit */
    }

    /* Target specific buttons to align them perfectly */
    .phone-pill {
        justify-self: start !important;
        /* Stick to left edge */
        margin-left: 2px !important;
    }

    .whatsapp-pill {
        justify-self: end !important;
        /* Stick to right edge */
        margin-right: 2px !important;
    }

    /* Make the logo compact to fit between the equal-sized buttons */
    .logo {
        padding: 0 5px !important;
        width: auto !important;
        white-space: nowrap !important;
    }

    .logo-img {
        height: 22px !important;
    }

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

    /* Auto-scale text for very small screens if needed */
    @media (max-width: 380px) {
        .mobile-pill-btn {
            min-width: auto !important;
            /* Allow shrinking below 110px on tiny screens */
            width: 100% !important;
            font-size: 0.6rem !important;
        }
    }
}

/* =============================================
   MOBILE HEADER - LOGO DOMINANCE
   ============================================= */

@media (max-width: 768px) {

    /* 1. Make the Logo BIGGER */
    .logo {
        transform: scale(1.0);
        /* Reset any transforms */
        z-index: 10;
        padding: 0 4px !important;
    }

    .logo-text {
        font-size: 1.3rem !important;
        /* significantly larger */
        line-height: 1;
        display: inline-block;
    }

    .logo-img {
        height: 32px !important;
        /* taller icon */
    }

    /* 2. Shrink Buttons slightly to let Logo shine */
    .mobile-pill-btn {
        height: 34px !important;
        /* slightly slimmer than 38px */
        padding: 4px 8px !important;
        /* compact padding */
        font-size: 0.65rem !important;
        /* smaller text */
        max-width: 120px !important;
        /* strict width limit */
        width: auto !important;
        /* let them shrink to content */
    }

    .mobile-pill-btn i {
        font-size: 0.8rem !important;
    }

    /* 3. Adjust Grid to prioritize Center */
    .navbar-container {
        grid-template-columns: 1fr auto 1fr !important;
        gap: 2px !important;
    }
}

/* =============================================
   HIDE SECURE CHAT FOOTER ON MOBILE
   ============================================= */

@media (max-width: 768px) {
    .secure-chat-footer {
        display: none !important;
    }
}

/* =============================================
   MOBILE FOOTER - REORDER & HIDE LOGO
   ============================================= */

@media (max-width: 768px) {

    /* 1. Hide the Logo in Footer */
    .footer-logo {
        display: none !important;
    }

    /* 2. Reorder Columns
       Goal: Payment (Brand Col) below Privacy Policy (Links Col)
       New Order: Contact -> Links -> Brand (Payment)
    */

    .contact-col {
        order: 1 !important;
        margin-bottom: 20px !important;
    }

    .links-col {
        order: 2 !important;
        margin-bottom: 20px !important;
    }

    .brand-col {
        order: 3 !important;
        margin-top: 10px !important;
        margin-bottom: 20px !important;
    }

    /* Ensure payment methods look good by themselves */
    .payment-methods {
        margin-top: 0 !important;
        /* Remove top margin since logo is gone */
    }
}

/* =============================================
   MOBILE LAYOUT FIXES (STEP 1952)
   ============================================= */

@media (max-width: 768px) {

    /* 1. FORCE HIDE SECURE CHAT FOOTER */
    /* Being extra specific to override any conflicts */
    p.secure-chat-footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
    }

    /* 2. SERVICES SECTION - HORIZONTAL SCROLL ("One Line") */
    .services-grid {
        display: flex !important;
        /* Switch from grid to flex */
        flex-wrap: nowrap !important;
        /* Don't wrap */
        overflow-x: auto !important;
        /* Enable horizontal scroll */
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll on iOS */
        gap: 15px !important;
        padding: 10px 20px 30px 20px !important;
        /* Bottom padding for scrollbar space */
        justify-content: flex-start !important;
        scroll-snap-type: x mandatory;
        /* Snap effect */
    }

    .service-card {
        min-width: 85vw !important;
        /* Make cards wide (85% of screen width) */
        flex: 0 0 auto !important;
        /* Prevent shrinking */
        scroll-snap-align: center;
        /* Snap to center */
        margin: 0 !important;
    }

    /* Hide scrollbar for cleaner look (optional, but requested "one line") */
    .services-grid::-webkit-scrollbar {
        display: none;
    }

    .services-grid {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* =============================================
   MOBILE FOOTER & SERVICES OVERHAUL
   ============================================= */

@media (max-width: 768px) {

    /* --- FOOTER CHANGES --- */

    /* 1. Hide Social Icons */
    .social-links {
        display: none !important;
    }

    /* 2. Redesign Quick Links (Button Grid) */
    .links-col ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        /* 2 columns */
        gap: 10px;
    }

    .links-col li {
        margin-bottom: 0 !important;
    }

    .links-col a {
        display: block;
        background: #222;
        padding: 10px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #333;
        font-size: 0.85rem;
        color: #fff;
    }

    /* --- SERVICES SECTION CHANGES (COMPACT 3-COL) --- */

    /* Remove previous scroll/flex styles */
    .services-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        /* Force 3 columns */
        gap: 5px !important;
        padding: 0 5px !important;
        overflow-x: visible !important;
        justify-content: center !important;
    }

    .service-card {
        min-width: 0 !important;
        /* Allow shrinking */
        width: 100% !important;
        flex: none !important;
        padding: 10px 5px !important;
        /* Minimal padding */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: auto !important;
        min-height: 110px;
    }

    /* Shrink Icons */
    .service-card .icon-box {
        width: 35px !important;
        height: 35px !important;
        font-size: 1rem !important;
        margin-bottom: 8px !important;
    }

    /* Shrink Title */
    .service-card h3 {
        font-size: 0.65rem !important;
        /* Very small text */
        white-space: normal !important;
        /* Allow wrapping if needed, or keep nowrap */
        line-height: 1.2;
        margin-bottom: 0 !important;
        height: auto;
    }

    /* HIDE Description Text on Mobile (User said "less text") */
    .service-card p {
        display: none !important;
    }
}

/* =============================================
   MOBILE FOOTER POLISH (PREMIUM DESIGN)
   ============================================= */

@media (max-width: 768px) {

    /* 1. Spacer for the Copyright Text */
    footer {
        padding-bottom: 50px !important;
        /* Move copyright up from the edge */
    }

    .footer-bottom {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        font-size: 0.8rem;
        opacity: 0.7;
    }

    /* 2. Premium Contact Cards (Like the reference image) */
    .contact-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .contact-item {
        background: #0f0f0f;
        /* Very dark bg */
        border: 1px solid #333;
        /* Subtle border */
        border-radius: 12px;
        padding: 15px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Center content */
        gap: 12px;
        color: #fff;
        font-weight: 500;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        margin: 0 !important;
        /* Reset margins */
    }

    /* Green Icons */
    .contact-item i {
        color: var(--primary-green);
        font-size: 1.1rem;
    }

    /* Active State/Hover touch */
    .contact-item:active {
        border-color: var(--primary-green);
        background: #151515;
    }

    /* 3. Section Titles */
    .footer h4 {
        text-align: center;
        margin-bottom: 20px;
        font-size: 1.3rem;
        position: relative;
        display: inline-block;
        padding-bottom: 10px;
    }

    /* Underline effect */
    .footer h4::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 3px;
        background: var(--primary-green);
        border-radius: 2px;
    }

    /* 4. Quick Links Polish */
    .links-col ul {
        gap: 12px;
    }

    .links-col a {
        background: #111;
        border: 1px solid #2a2a2a;
        padding: 14px;
        font-weight: 500;
        transition: all 0.2s;
    }

    .links-col a:active {
        border-color: var(--primary-green);
        color: var(--primary-green);
    }
}

/* =============================================
   MOBILE DAMAGE GRID - WIDER & TIGHTER MARGINS
   ============================================= */

@media (max-width: 768px) {

    /* 1. Maximize Width */
    .damage-grid {
        padding: 0 5px !important;
        /* Reduce side padding significantly */
        gap: 8px !important;
        /* Tighter gap to allow wider cards */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* 2. Adjust Parent Container if needed */
    .guide-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    .guide-section .container {
        padding-left: 5px !important;
        padding-right: 5px !important;
        max-width: 100% !important;
    }

    /* 3. Card Sizing */
    .damage-card {
        width: 100% !important;
        /* Take full available grid slot space */
        padding: 15px 5px !important;
        /* Reduce internal side padding */
    }

    /* Ensure images fill the card width nicely */
    .damage-card img {
        width: 100% !important;
        height: auto !important;
        max-height: 90px;
    }
}

/* =============================================
   MOBILE SCIENCE COLLAGE IMAGE
   ============================================= */

@media (max-width: 768px) {
    .science-collage-container {
        width: 100% !important;
        padding: 0 5px !important;
        /* Wide like the damage cards */
        margin-top: 20px !important;
    }

    .science-collage-container img {
        width: 100% !important;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        border: 1px solid #333;
        display: block;
    }
}

/* =============================================
   MOBILE DAMAGE GRID - EVEN SPACING FIX
   ============================================= */

@media (max-width: 768px) {
    .damage-grid {
        padding: 0 12px !important;
        /* Even outer padding */
        gap: 12px !important;
        /* Matches outer padding for consistency */
        margin-bottom: 20px !important;
    }

    .damage-card {
        padding: 15px 10px !important;
        /* Restore comfortable internal padding */
    }

    /* Ensure the grid columns share space equally */
    .damage-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =============================================
   GLOBAL MOBILE PADDING FIX (5% CONSISTENCY)
   ============================================= */

@media (max-width: 768px) {

    /* 1. Global Container Padding */
    .container {
        padding-left: 5% !important;
        padding-right: 5% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 2. Update Navbar to match */
    .navbar-container {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }

    /* 3. Update Damage Grid (override previous 12px) */
    .damage-grid {
        padding-left: 5% !important;
        padding-right: 5% !important;
        /* Keep gap reasonable */
        gap: 3% !important;
    }

    /* 4. Update Services Grid (Horizontal Scroll) */
    /* Note: For scrolling containers, padding often acts as the "gutter" */
    .services-grid {
        padding-left: 5% !important;
        padding-right: 5% !important;
        /* Ensure cards take up appropriate width relative to this */
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2% !important;
    }

    /* 5. Update Science Collage Image */
    .science-collage-container {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }

    /* 6. Footer Content */
    .footer-content {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
}

/* =============================================
   MOBILE TRUST SECTION - 6 ITEM GRID ("2 LINES")
   ============================================= */

@media (max-width: 768px) {

    /* 1. Parent becomes the Grid */
    .booking-layout-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        /* 3 Columns = 2 Lines of 6 items */
        gap: 10px !important;
        align-items: start;
    }

    /* 2. Unwrap the side blocks so items flow together */
    .booking-side-block {
        display: contents !important;
        /* The Magic: Side blocks disappear, children join parent grid */
    }

    /* 3. Handle the Main Card (Move to Top, Full Width) */
    .product-card.main-booking-card {
        grid-column: 1 / -1 !important;
        /* Full width */
        order: -1 !important;
        /* Move to top of section */
        margin-bottom: 20px !important;
    }

    /* 4. Style the Trust Items (Compact) */
    .trust-item {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 5px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: rgba(255, 255, 255, 0.03);
        /* Subtle backdrop */
        border-radius: 8px;
    }

    /* 5. Hide Checkbox/Description Text for "Less Text" */
    .trust-item p {
        display: none !important;
    }

    /* 6. Adjust Icon and Title */
    .trust-item i {
        font-size: 1.2rem !important;
        margin-bottom: 8px !important;
        color: var(--primary-green) !important;
    }

    .trust-item h4 {
        font-size: 0.7rem !important;
        line-height: 1.2;
        margin: 0;
        white-space: normal !important;
        /* Allow wrap */
    }
}

/* =============================================
   BOOKING PROMO IMAGE & BADGE
   ============================================= */

/* Style the New Image Container */
.product-image {
    position: relative;
    /* Anchor for the badge */
    width: 100%;
    height: 180px;
    /* Define a nice height */
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    /* Fallback */
    margin-bottom: 20px;
    display: flex;
    /* Center img if needed */
    align-items: center;
    justify-content: center;
    border: 1px solid #333;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fill the box nicely */
    transition: transform 0.5s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
    /* Zoom effect on hover */
}

/* Remove old icon styles if they conflict */
.product-image i {
    display: none;
}

/* The "20% OFF" Badge */
.promo-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--primary-green);
    color: #000;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 5px 10px;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    z-index: 2;
    transform: rotate(3deg);
    /* Fun tilt */
}

/* =============================================
   MOBILE FOOTER FINALE - ART & SYMMETRY
   ============================================= */

@media (max-width: 768px) {

    /* 1. Address Styling */
    .contact-item span {
        line-height: 1.4;
    }

    /* 2. Quick Links Symmetry (Centering the last odd item) */
    /* 2. Quick Links Symmetry (Now 6 items, standard grid) */
    .links-col ul li:last-child {
        grid-column: auto !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* 3. Footer Art Overlay */
    footer {
        position: relative;
        overflow: hidden;
        padding-bottom: 80px !important;
        /* Visual finish */
    }

    .footer-art-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 250px;
        /* Paint splatter height */
        background-image: url('../neon_splatter.png');
        background-position: bottom center;
        background-size: cover;
        background-repeat: no-repeat;
        pointer-events: none;
        /* Let clicks pass through */
        z-index: 0;
        opacity: 0.8;
    }

    /* Ensure content sits ABOVE the art */
    .footer-content,
    .footer-bottom {
        position: relative;
        z-index: 1;
    }

    /* 4. Compact Payment Icons */
    .payment-methods {
        gap: 8px !important;
        transform: scale(0.9);
        /* Slightly more compact */
        margin-bottom: 5px !important;
    }

    .footer-bottom p {
        margin-top: 5px !important;
        font-size: 0.75rem !important;
        opacity: 0.9;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
        /* Ensure readable over art */
    }
}

/* =============================================
   MOBILE BOOKING CARD - WIDE & COMPACT
   ============================================= */

@media (max-width: 768px) {

    /* 1. Maximize Card Width & Stretch Content */
    .product-card.main-booking-card {
        padding: 10px !important;
        /* Less internal padding */
        width: 100% !important;
        margin-bottom: 25px !important;
    }

    /* 2. Image Full Width */
    .product-image {
        width: 100% !important;
        height: 200px !important;
        /* Slightly taller for impact */
        margin-bottom: 12px !important;
    }

    /* 3. Typography Updates (Single Line Goals) */
    .main-booking-card h3 {
        font-size: 1.4rem !important;
        margin-bottom: 5px !important;
        white-space: nowrap !important;
        /* Force one line */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .main-booking-card p {
        font-size: 0.9rem !important;
        margin-bottom: 15px !important;
        white-space: nowrap !important;
        /* Force one line */
        overflow: hidden;
        text-overflow: ellipsis;
        color: #bbb;
    }

    /* 4. Price & Discount Styling */
    .price-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        margin-bottom: 15px;
    }

    .old-price {
        text-decoration: line-through;
        color: #666;
        font-size: 1.2rem;
        font-weight: 600;
    }

    .price {
        color: var(--primary-green) !important;
        font-size: 1.8rem !important;
        font-weight: 800 !important;
        text-shadow: 0 0 10px rgba(57, 255, 20, 0.4);
    }
}

/* =============================================
   MOBILE CLEANUP & GLOBAL FOOTER ART
   ============================================= */

/* 1. HIDE Secure Checkout Text on Mobile */
@media (max-width: 768px) {
    .shop-note {
        display: none !important;
    }
}

/* 2. GLOBAL FOOTER ART (Desktop + Mobile Support) */
/* Moving this out of the mobile-only query so it shows everywhere */

footer {
    position: relative;
    overflow: hidden;
    /* Padding might be mobile specific, but lets ensure base relative positioning */
}

/* The art overlay itself */
.footer-art-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Base height for desktop (taller) */
    height: 400px;
    background-image: url('../neon_splatter.png');
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    opacity: 0.8;
    display: block !important;
    /* Force show */
}

/* Ensure content is above art globally */
.footer-content,
.footer-bottom {
    position: relative;
    z-index: 1;
}

/* Mobile adjustments for the art (override the global height) */
@media (max-width: 768px) {
    .footer-art-overlay {
        height: 250px !important;
        /* Keep the compact mobile height */
    }
}

/* =============================================
   URGENT: GLOBAL MOBILE ALIGNMENT FIX (5% RULE)
   ============================================= */

@media (max-width: 768px) {

    /* 1. MASTER CONTAINER RULE */
    /* Ensure ALL content sits inside this 5% rail */
    .container {
        padding-left: 5% !important;
        padding-right: 5% !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. HEADER ALIGNMENT */
    /* Must match the container exactly */
    .navbar-container {
        padding-left: 5% !important;
        padding-right: 5% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. RESET COMPONENT WIDTHS (Undo "Wide" Hacks) */
    /* By removing side padding/margins, they will fill the .container exactly */

    .damage-grid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        gap: 10px !important;
        /* Keep internal gap */
    }

    .services-grid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .science-collage-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .science-collage-container img {
        width: 100% !important;
        border-radius: 8px !important;
    }

    .booking-layout-grid {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .product-card.main-booking-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* 4. FOOTER ALIGNMENT */
    .footer-content {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }

    .footer-bottom {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
}

/* =============================================
   MOBILE GRID ALIGNMENT CORRECTION
   ============================================= */

@media (max-width: 768px) {
    /* 1. FORCE GRID CENTERING */
    /* The gap is pushing items on the right side over the edge or off-center */

    .booking-layout-grid {
        /* Ensure no lingering padding/margins interfering with the 5% container rule */
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;

        /* Balance the columns */
        justify-content: space-between !important;

        /* Reduce the gap slightly to fit 3 cols comfortably in 90vw */
        gap: 5px !important;
    }

    /* 2. RESET TRUST ITEMS (Phantom Margin Fix) */
    /* Ensure no desktop margins persist on these items */
    .booking-layout-grid .trust-item {
        margin: 0 !important;
        padding: 10px 2px !important;
        /* Slightly tighter internal padding */
        width: 100% !important;
        box-sizing: border-box !important;

        /* Force Center Content */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
    }

    /* 3. ENSURE BOOKING CARD IS ALSO FLUSH */
    .product-card.main-booking-card {
        margin: 0 0 25px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =============================================
   DESKTOP CENTRALIZATION FIX (USER REQUEST)
   ============================================= */

/* Override the specific "wings" layout (Left/Right alignment) */
/* Force Standard Center Alignment for EVERYTHING in booking section on Desktop */

.booking-side-block.left,
.booking-side-block.right {
    text-align: center !important;
    align-items: center !important;
}

.booking-side-block.left .trust-item,
.booking-side-block.right .trust-item {
    align-items: center !important;
    text-align: center !important;
}

/* Ensure the layout grid itself is balanced */
.booking-layout-grid {
    align-items: center !important;
    /* grid-template-columns is already 1fr 400px 1fr, which works well with center align */
}

/* =============================================
   URGENT: HORIZONTAL OVERFLOW KILLER
   ============================================= */

/* 1. Global Safety Net */
html,
body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 768px) {

    /* 2. Constrain Review Section */
    .reviews-section,
    .reviews-grid {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        /* Hide direct overflow */
        margin-right: 0 !important;
    }

    .reviews-grid {
        display: flex !important;
        flex-direction: column !important;
        /* Stack reviews on mobile to be safe */
        gap: 20px !important;
        padding-left: 0 !important;
        /* 5% handled by container */
        padding-right: 0 !important;
    }

    /* 3. Constrain Review Cards */
    .review-card {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* 4. Ensure Grid Items don't blow out */
    .row,
    .col {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
}

/* =============================================
   PLACEMENT GLITCH FIX (HEIGHT & CENTER)
   ============================================= */

@media (min-width: 992px) {

    /* 1. Compact the Side Blocks (Desktop) */
    .booking-side-block {
        gap: 15px !important;
        /* Reduce gap (was 30px) so it fits INSIDE the card height */
        justify-content: center !important;
    }

    /* 2. Compact the Trust Items (Desktop) */
    .trust-item {
        margin-bottom: 0 !important;
    }

    .trust-item i {
        font-size: 1.5rem !important;
        /* Slightly smaller icons to save height */
        margin-bottom: 8px !important;
    }

    .trust-item h4 {
        font-size: 1rem !important;
    }

    .trust-item p {
        font-size: 0.85rem !important;
        margin: 0 !important;
    }

    /* 3. Ensure Main Card Dominates Height */
    .product-card.main-booking-card {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}

@media (max-width: 768px) {

    /* 4. Mobile Grid - Strict Centering Safety */
    .booking-layout-grid {
        justify-content: center !important;
        /* Force center */
        justify-items: center !important;
        /* Force items to center of their cells */
        width: 100% !important;
        margin: 0 auto !important;
    }
}

/* =============================================
   CALLBACK REQUEST SECTION
   ============================================= */

.callback-section {
    padding: 40px 0;
    position: relative;
    z-index: 5;
}

.callback-card {
    background: #111;
    border: 1px solid #333;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.callback-card:hover {
    border-color: rgba(57, 255, 20, 0.3);
}

.callback-icon {
    font-size: 3rem;
    color: var(--primary-green);
    margin-bottom: 15px;
    filter: drop-shadow(0 0 10px rgba(57, 255, 20, 0.4));
}

.callback-card h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.callback-card p {
    color: #ccc;
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.5;
}

.callback-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.callback-form input {
    width: 100%;
    padding: 15px;
    background: #222;
    border: 1px solid #444;
    border-radius: 12px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s;
    box-sizing: border-box;
}

.callback-form input:focus {
    border-color: var(--primary-green);
    background: #1a1a1a;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.1);
}

.callback-form button {
    width: 100%;
    padding: 15px;
    background: var(--primary-green);
    color: #000;
    font-weight: 800;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.callback-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(57, 255, 20, 0.4);
    background: #32e010;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .callback-section {
        padding: 20px 0;
    }

    .callback-card {
        padding: 25px 20px;
        width: 100%;
        /* Fill container */
        max-width: 100%;
        margin: 0;
    }

    .callback-icon {
        font-size: 2.5rem;
    }

    .callback-card h3 {
        font-size: 1.3rem;
    }
}

/* =============================================
   MOBILE REPAIR PROCESS - SPLIT IMAGES
   ============================================= */

/* Default State (Desktop): Hide Mobile Split */
.mobile-process-split {
    display: none;
}

/* Mobile State: Show Split, Hide Desktop */
@media (max-width: 768px) {
    .desktop-process-img {
        display: none !important;
    }

    .mobile-process-split {
        display: flex !important;
        flex-direction: column;
        gap: 15px;
        /* The "Nice Cut" Gap */
        width: 100%;
    }

    .split-step {
        width: 100%;
        height: 140px;
        /* Consistent height for each slice */
        overflow: hidden;
        border-radius: 15px;
        /* Nice rounded corners */
        border: 1px solid rgba(57, 255, 20, 0.3);
        /* Subtle green border */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        position: relative;
    }

    .split-step img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    /* Interactive Touch: Zoom slightly on press/hover */
    .split-step:active img {
        transform: scale(1.1);
    }
}

/* =============================================
   MOBILE REPAIR PROCESS - TEXT HEADERS
   ============================================= */

@media (max-width: 768px) {

    /* 1. Hide the original text list (it's now integrated above images) */
    .process-content .process-text .tech-points-container {
        display: none !important;
    }

    /* 2. Wrapper for Text + Image Pair */
    .process-step-wrapper {
        display: flex;
        flex-direction: column;
        gap: 10px;
        /* Space between text card and image */
    }

    /* 3. Style the Mobile Header Card */
    .mobile-header.tech-point-row {
        background: #111;
        /* Dark card background */
        border: 1px solid #333;
        border-left: 4px solid var(--primary-green);
        /* The requested green border */
        padding: 15px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 15px;
        margin: 0 !important;
        /* Reset any desktop margins */
        width: 100%;
        box-sizing: border-box;
    }

    /* 4. Text Stack Alignment */
    .mobile-text-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .mobile-header .tech-point-label {
        font-size: 1rem !important;
        margin-bottom: 2px;
        color: #fff;
    }

    .mobile-header .tech-point-desc {
        font-size: 0.85rem !important;
        color: #aaa;
    }

    .mobile-header .tech-point-icon {
        font-size: 1.4rem;
        /* Slightly larger icon */
    }
}

/* =============================================
   GLOBAL 5% PADDING ENFORCEMENT (MOBILE)
   ============================================= */

@media (max-width: 768px) {

    /* STRICT GLOBAL RULE: 5% Padding on all key containers */
    .container,
    .navbar-container,
    .hero-content,
    /* Often sits outside container */
    .section-title,
    /* Ensure titles align */
    .footer-content,
    .callback-card,
    .slider-wrapper {
        padding-left: 5% !important;
        padding-right: 5% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Reset specific grids that are INSIDE container to avoid double padding (5% + 5% = 10%) */
    .damage-grid-container,
    .services-grid,
    .booking-layout-grid,
    .process-image,
    .future-tech-section .container,
    /* Already covered by .container */
    .shop-note,
    .damage-grid,
    .services-grid .service-card,
    .booking-side-block {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Ensure no negative margins pull content out */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* =============================================
   MOBILE TEXT CUTOFF FIX - 2 COLUMNS
   ============================================= */

@media (max-width: 768px) {

    /* Switch Trust Items to 2 Columns for more breathing room */
    .booking-layout-grid {
        grid-template-columns: 1fr 1fr !important;
        /* 2 columns instead of 3 */
        gap: 10px !important;
        justify-content: center !important;
    }

    /* Make the items flow naturally */
    .trust-item {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 8px 4px !important;
        min-height: auto !important;
        /* Let text expand height if needed */
        overflow: visible !important;
        /* Ensure no clipping */
    }

    .trust-item h4 {
        white-space: normal !important;
        /* Force wrap */
        overflow: visible !important;
        text-overflow: clip !important;
        /* No ellipsis */
        font-size: 0.75rem !important;
        /* slightly readable size */
        margin-top: 4px !important;
    }

    /* Make the Main Booking Card span both columns so it stays centered/large */
    .main-booking-card {
        grid-column: span 2 !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}

/* =============================================
   WHATSAPP CHAT BLOCK
   ============================================= */

.whatsapp-card {
    background: #111;
    border: 1px solid #333;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    max-width: 400px;
    /* Nice contained width */
    margin: 0 auto;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s ease;
}

.whatsapp-card:hover {
    border-color: rgba(37, 211, 102, 0.3);
    /* WhatsApp green border hint */
}

.whatsapp-icon-large {
    font-size: 3.5rem;
    color: #25D366;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 15px rgba(37, 211, 102, 0.4));
}

.whatsapp-card h3 {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.whatsapp-card p {
    color: #ccc;
    font-size: 0.95rem;
    margin-bottom: 25px;
}

.btn-whatsapp-large {
    background: #25D366;
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    padding: 15px 25px;
    border-radius: 12px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.btn-whatsapp-large:hover {
    background: #20b858;
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
    color: #fff;
}

.whatsapp-fallback {
    margin-top: 20px;
    font-size: 0.9rem;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.whatsapp-fallback a {
    color: #ccc;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.whatsapp-fallback a:hover {
    color: #fff;
}

/* Mobile Tweak */
@media (max-width: 768px) {
    .whatsapp-chat-section {
        padding-left: 5% !important;
        /* Enforce alignment */
        padding-right: 5% !important;
        margin: 40px 0 !important;
    }

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

/* =============================================
   WHATSAPP BLOCK REDESIGN (SLIM & PREMIUM)
   ============================================= */

.whatsapp-card {
    /* Make it slimmer and wider */
    padding: 25px 20px !important;
    max-width: 600px !important;
    /* Allow it to be wider on desktop */
    width: 100%;

    /* Premium Look */
    background: linear-gradient(145deg, #111 0%, #050505 100%);
    border: 1px solid #333;
    border-left: 4px solid #25D366;
    /* Matching the Science Card style */
    border-radius: 15px;

    /* Center Layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}

.whatsapp-card:hover {
    border-color: #25D366;
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.2);
}

.whatsapp-icon-large {
    font-size: 2.5rem !important;
    /* Smaller icon for slim look */
    margin-bottom: 5px !important;
    filter: drop-shadow(0 0 10px rgba(37, 211, 102, 0.4));
}

.whatsapp-card h3 {
    font-size: 1.4rem !important;
    margin: 0 !important;
    line-height: 1.2;
}

.whatsapp-card p {
    margin: 0 !important;
    font-size: 0.9rem !important;
    color: #aaa;
    max-width: 80%;
}

.btn-whatsapp-large {
    margin-top: 10px;
    padding: 12px 0 !important;
    /* Slimmer button */
    font-size: 1rem !important;
    border-radius: 50px !important;
    /* Pill shape */
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.whatsapp-fallback {
    margin-top: 10px !important;
    font-size: 0.85rem !important;
}

/* Mobile Tweaks to ensure full width usage within padding */
@media (max-width: 768px) {
    .whatsapp-chat-section {
        margin: 30px 0 !important;
        /* Reduced vertical margin */
    }

    .whatsapp-card {
        border-left: 1px solid #333;
        /* Full border on mobile looks cleaner than just left strip? 
                                       Actually let's keep the premium borders user asked for */
        border: 1px solid rgba(37, 211, 102, 0.3);
        /* Visible Green Border on sides */
        border-radius: 12px;
    }
}

/* =============================================
   GLOBAL MOBILE VERTICAL RHYTHM (50px Rule)
   ============================================= */

@media (max-width: 768px) {

    /* 1. Reset & Standardize Section Spacing */
    section,
    .hero-section,
    .features-section,
    .process-content,
    .guide-section,
    .shop,
    .reviews-section,
    .whatsapp-chat-section {
        margin-bottom: 50px !important;
        margin-top: 0 !important;
        /* Let the previous section's bottom margin handle the gap */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Exception: Hero usually needs no top margin but bottom is key */
    .hero-section {
        margin-bottom: 50px !important;
    }

    /* Exception: Future Tech might need internal padding */
    .future-tech-section {
        padding: 40px 0 !important;
        margin-bottom: 50px !important;
    }

    /* 2. COMPACT FOOTER (Top to Bottom) */
    footer {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        /* enough for splatter art */
        margin-top: 0 !important;
    }

    .footer-content {
        gap: 30px !important;
        /* consistent gap between footer cols */
    }

    .footer h4 {
        margin-bottom: 15px !important;
        /* tighter titles */
    }

    /* 3. internal spacing for breathing room */
    .section-title {
        margin-bottom: 30px !important;
        /* consistent title-to-content gap */
        margin-top: 0 !important;
    }

    /* 4. Fix WhatsApp Block Spacing */
    .whatsapp-chat-section {
        margin: 50px 0 !important;
        /* Strict 50px top/bottom if it's an inserted block */
        padding: 0 5% !important;
        /* Horizontal alignment */
    }
}

/* =============================================
   LIGHT MODE OVERRIDES
   ============================================= */

/* Global Light Mode */
body {
    background-color: #FFFFFF !important;
    color: #1A1A1A !important;
}

/* Navbar */
.navbar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar .logo-text,
.navbar .nav-links a {
    color: #1A1A1A !important;
}

.navbar .nav-links a:hover {
    color: #0066CC !important;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%) !important;
}

.hero-section h1,
.hero-section p {
    color: #1A1A1A !important;
}

.hero-section .highlight {
    color: #0066CC !important;
}

/* Cards Global */
.service-card,
.damage-card,
.product-card,
.review-card,
.science-card,
.callback-card,
.whatsapp-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    color: #1A1A1A !important;
}

.service-card h3 {
    color: #39FF14 !important;
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.8), 0 0 20px rgba(57, 255, 20, 0.5), 0 0 30px rgba(57, 255, 20, 0.3);
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(30, 30, 30, 0.9) 100%);
    padding: 12px 20px;
    border-radius: 10px;
    display: inline-block;
    border: 1px solid rgba(57, 255, 20, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.damage-card h4,
.product-card h3,
.review-card h4,
.science-card h4 {
    color: #1A1A1A !important;
}

.service-card p,
.damage-card p,
.product-card p,
.review-card p,
.science-card p {
    color: #666666 !important;
}

/* Section Titles */
.section-title {
    color: #1A1A1A !important;
}

.section-title::after {
    background: #0066CC !important;
}

/* Buttons */
.btn-primary,
.btn-whatsapp-large {
    background: #0066CC !important;
    color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-whatsapp-large:hover {
    background: #004C99 !important;
}

/* Trust Items */
.trust-item {
    background: rgba(0, 102, 204, 0.05) !important;
    border: 1px solid rgba(0, 102, 204, 0.1) !important;
}

.trust-item i {
    color: #0066CC !important;
}

.trust-item h4 {
    color: #1A1A1A !important;
}

/* Footer */
.footer {
    background: #1A1A1A !important;
    color: #FFFFFF !important;
}

.footer h4,
.footer a,
.footer p,
.footer .contact-item {
    color: #FFFFFF !important;
}

.footer a:hover {
    color: #0066CC !important;
}

.footer h4::after {
    background: #0066CC !important;
}

/* Process Section */
.tech-point-row {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-left: 4px solid #0066CC !important;
}

.tech-point-label {
    color: #1A1A1A !important;
}

.tech-point-desc {
    color: #666666 !important;
}

/* Booking Section */
.shop {
    background: #F5F5F5 !important;
}

.price {
    color: #0066CC !important;
}

/* Reviews */
.stars i {
    color: #FFB800 !important;
}

/* WhatsApp Icon */
.whatsapp-icon-large i {
    color: #25D366 !important;
}

/* Status Badges */
.status-badge.success {
    background: #0066CC !important;
    color: #FFFFFF !important;
}

/* Icons */
.icon-box,
.science-icon {
    background: rgba(0, 102, 204, 0.1) !important;
    color: #0066CC !important;
}

.science-icon i {
    color: #0066CC !important;
}

/* Links Column in Footer */
.links-col a {
    background: #2A2A2A !important;
    color: #FFFFFF !important;
}

/* =============================================
   LIGHT MODE FIXES - READABILITY & VIBRANCY
   ============================================= */

/* 1. Hero Section - Light Overlay for Readability */
.hero-section {
    background: #FFFFFF !important;
    position: relative;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85) !important;
    z-index: 1;
}

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

.hero-section h1 {
    color: #1A1A1A !important;
    text-shadow: none !important;
}

.hero-section .highlight {
    color: #0066CC !important;
    text-shadow: none !important;
}

.hero-section p {
    color: #333333 !important;
}

/* 2. Make Colors POP - More Vibrant Accent */
:root {
    --primary-accent: #0077FF !important;
    /* Brighter blue */
    --primary-green: #0077FF !important;
}

.btn-primary {
    background: linear-gradient(135deg, #0077FF 0%, #0055CC 100%) !important;
    box-shadow: 0 4px 20px rgba(0, 119, 255, 0.4) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0088FF 0%, #0066DD 100%) !important;
    box-shadow: 0 6px 25px rgba(0, 119, 255, 0.5) !important;
    transform: translateY(-3px) !important;
}

/* 3. Background Pure White */
body,
.hero-section,
main,
section:not(.footer) {
    background-color: #FFFFFF !important;
}

/* 4. Cards with More Pop */
.service-card,
.damage-card,
.product-card,
.science-card {
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
}

.service-card:hover,
.damage-card:hover,
.product-card:hover,
.science-card:hover {
    box-shadow: 0 12px 40px rgba(0, 119, 255, 0.15) !important;
    border-color: #0077FF !important;
    transform: translateY(-5px) !important;
}

/* 5. Section Titles - Pop */
.section-title {
    color: #1A1A1A !important;
}

.section-title::after {
    background: linear-gradient(90deg, #0077FF, #00AAFF) !important;
    height: 4px !important;
}

/* 6. Icons Pop */
.icon-box,
.science-icon,
.trust-item i {
    color: #0077FF !important;
    background: rgba(0, 119, 255, 0.1) !important;
}

/* 7. Booking Section Background */
.shop {
    background: #F8FAFC !important;
}

/* 8. Price Pop */
.price {
    color: #0077FF !important;
    font-weight: 800 !important;
}

/* 9. Status Badges */
.status-badge.success {
    background: linear-gradient(135deg, #0077FF, #0055CC) !important;
}

/* 10. WhatsApp Card - Keep Green */
.whatsapp-card {
    background: #FFFFFF !important;
    border: 2px solid #25D366 !important;
}

.whatsapp-icon-large i {
    color: #25D366 !important;
}

.btn-whatsapp-large {
    background: #25D366 !important;
}

/* 11. Tech Point Rows */
.tech-point-row {
    background: #FFFFFF !important;
    border-left: 4px solid #0077FF !important;
}

/* 12. Reviews Section */
.reviews-section {
    background: #FFFFFF !important;
}

.review-card {
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
}

/* =============================================
   WHITE + GREEN THEME (User Requested)
   ============================================= */

/* Reset to GREEN accent */
:root {
    --primary-accent: #39FF14 !important;
    --primary-green: #39FF14 !important;
    --primary-green-dark: #32CD32 !important;
}

/* 1. HERO - White text on dark image */
.hero-section {
    background: none !important;
    position: relative;
}

.hero-section::before {
    display: none !important;
    /* Remove white overlay */
}

.hero-section h1,
.hero-section .highlight,
.hero-section p,
.hero-section .hero-content * {
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

.hero-section .highlight {
    color: #39FF14 !important;
}

/* 2. Navbar - White with green accents */
.navbar {
    background: #FFFFFF !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important;
}

.navbar .logo-text {
    color: #1A1A1A !important;
}

.navbar .logo-text .highlight {
    color: #39FF14 !important;
}

.navbar .btn-phone,
.navbar .btn-whatsapp {
    background: #39FF14 !important;
    color: #000000 !important;
}

/* 3. ALL Buttons = Green */
.btn-primary {
    background: #39FF14 !important;
    color: #000000 !important;
    box-shadow: 0 4px 20px rgba(57, 255, 20, 0.4) !important;
}

.btn-primary:hover {
    background: #32CD32 !important;
    box-shadow: 0 6px 25px rgba(57, 255, 20, 0.5) !important;
}

/* 4. Section Titles */
.section-title::after {
    background: #39FF14 !important;
}

/* 5. Icons = Green */
.icon-box,
.science-icon,
.trust-item i,
.tech-point-icon i {
    color: #39FF14 !important;
    background: rgba(57, 255, 20, 0.1) !important;
}

.science-icon i {
    color: #39FF14 !important;
}

/* 6. Cards hover = Green glow */
.service-card:hover,
.damage-card:hover,
.product-card:hover,
.science-card:hover {
    border-color: #39FF14 !important;
    box-shadow: 0 12px 40px rgba(57, 255, 20, 0.15) !important;
}

/* 7. Tech Point Rows = Green border */
.tech-point-row {
    border-left: 4px solid #39FF14 !important;
}

/* 8. Price = Green */
.price {
    color: #39FF14 !important;
}

/* 9. Status Badges = Green */
.status-badge.success {
    background: #39FF14 !important;
    color: #000000 !important;
}

/* 10. WhatsApp keeps its green */
.whatsapp-card {
    border: 2px solid #25D366 !important;
}

/* 11. Footer - Dark for contrast */
.footer {
    background: #1A1A1A !important;
}

.footer h4::after {
    background: #39FF14 !important;
}

/* 12. Reviews stars = Gold */
.stars i {
    color: #FFB800 !important;
}

/* =============================================
   TEXT CONTRAST FIXES
   ============================================= */

/* 1. HERO - ALL TEXT BRIGHT WHITE */
.hero-section h1,
.hero-section h1 span,
.hero-section p,
.hero-content h1,
.hero-content p {
    color: #FFFFFF !important;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !important;
}

/* Keep highlight green but visible */
.hero-section .highlight,
.hero-content .highlight {
    color: #39FF14 !important;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.9), 0 0 10px rgba(57, 255, 20, 0.5) !important;
}

/* 2. GRAY TEXT ON WHITE - Make Darker */
/* Any .text-gray or description text */
.service-card p,
.damage-card p,
.product-card p,
.review-card p,
.science-card p,
.tech-point-desc,
.whatsapp-card p,
.callback-card p,
.slider-desc,
.science-text p {
    color: #555555 !important;
    /* Darker gray for readability */
}

/* 3. Future Tech / Science Section descriptions */
.future-tech-section p,
.science-section p,
.slider-card p {
    color: #444444 !important;
}

/* 4. WhatsApp fallback text */
.whatsapp-fallback,
.whatsapp-fallback a {
    color: #555555 !important;
}

/* 5. Any remaining light gray text */
.text-gray,
[style*="color: #999"],
[style*="color: #ccc"],
[style*="color: #aaa"] {
    color: #555555 !important;
}

/* 6. Ensure callback card text is visible */
.callback-card h3,
.whatsapp-card h3 {
    color: #1A1A1A !important;
}

/* 7. Trust item descriptions */
.trust-item p {
    color: #666666 !important;
}

/* 8. Review text */
.review-text {
    color: #333333 !important;
}

/* =============================================
   SLIDER TEXT CONTRAST FIX
   ============================================= */

/* Slider descriptions - darker for white bg */
.slider-desc,
.slider-card p,
.comparison-text,
.slide-description,
.slider-wrapper p,
.future-tech-section .slider-card p,
.future-tech-section p:not(h3):not(h4) {
    color: #444444 !important;
}

/* Any italicized descriptions */
.slider-card p em,
.slider-card p i,
em,
i {
    color: #555555 !important;
}

/* Ensure all paragraph text on white is readable */
section p,
.container p {
    color: #444444 !important;
}

/* Exception: Hero stays white */
.hero-section p,
.hero-content p {
    color: #FFFFFF !important;
}

/* Exception: Footer stays white */
.footer p,
.footer-content p {
    color: #FFFFFF !important;
}

/* =============================================
   LOGO DESIGN - LUX VISIBILITY FIX
   ============================================= */

/* Logo Text Styling */
.logo-text {
    font-weight: 800 !important;
    letter-spacing: 2px !important;
}

/* GLASS part - Dark (for non-navbar areas) */
.logo-text {
    color: #1A1A1A !important;
}

/* Navbar Logo Button - GLASS white */
.navbar .logo-btn .logo-text {
    color: #fff !important;
}

/* LUX part - Match Button Green */
.logo-text .highlight {
    color: #39FF14 !important;
    text-shadow: none !important;
    font-weight: 900 !important;
}

/* Navbar specific */
.navbar .logo-text .highlight {
    color: #39FF14 !important;
}

/* Footer logo - Green on dark */
.footer .logo-text .highlight {
    color: #39FF14 !important;
    text-shadow: none !important;
}

/* Footer GLASS text - White */
.footer .logo-text {
    color: #FFFFFF !important;
}

/* =============================================
   GREEN TEXT ON WHITE - DARKER FOR READABILITY
   ============================================= */

/* All green headings on white background = Darker green */
.slider-card h4,
.science-card h4,
.future-tech-section h4,
.service-card h3,
.tech-point-label,
h3.highlight,
h4.highlight,
.slider-title,
.comparison-title {
    color: #00994D !important;
    /* Darker green for white bg */
}

/* Green section subtitles */
.science-text h4,
.slider-wrapper h4 {
    color: #00994D !important;
}

/* Any green text that's a title/heading */
section h3:not(.section-title),
section h4 {
    color: #00994D !important;
}

/* Exception: Keep neon green for dark backgrounds */
.footer h3,
.footer h4 {
    color: #FFFFFF !important;
}

/* Icon boxes - darker green */
.icon-box,
.science-icon {
    background: rgba(0, 153, 77, 0.1) !important;
    color: #00994D !important;
}

.science-icon i,
.icon-box i {
    color: #00994D !important;
}

/* Trust item icons */
.trust-item i {
    color: #00994D !important;
}

/* Price - darker green */
.price {
    color: #00994D !important;
}

/* Tech point border */
.tech-point-row {
    border-left-color: #00994D !important;
}

/* Section title underline */
.section-title::after {
    background: #00994D !important;
}

/* Status badges */
.status-badge.success {
    background: #00994D !important;
}

/* =============================================
   MOBILE HEADER - FINAL UNIFIED STYLES
   This section overrides all previous header rules
   ============================================= */

@media (max-width: 768px) {

    /* Hide desktop navigation */
    .navbar .desktop-nav {
        display: none !important;
    }

    /* Show mobile buttons */
    .navbar .mobile-only {
        display: flex !important;
    }

    /* Hide logo image on mobile */
    .navbar .logo-img {
        display: none !important;
    }

    /* Navbar Container - equal spacing */
    .navbar .navbar-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 15px !important;
        gap: 0 !important;
    }

    /* === ALL 3 HEADER BUTTONS - UNIFORM SIZE === */
    .navbar .mobile-pill-btn,
    .navbar .logo.logo-btn {
        /* IDENTICAL dimensions */
        width: 30% !important;
        max-width: 110px !important;
        height: 40px !important;
        padding: 0 12px !important;

        /* IDENTICAL shape */
        border-radius: 20px !important;

        /* IDENTICAL typography */
        font-size: 0.7rem !important;
        font-weight: 700 !important;

        /* IDENTICAL layout */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;

        /* Reset any other styles */
        white-space: nowrap !important;
        text-decoration: none !important;
        border: none !important;
    }

    /* Green buttons (Phone & WhatsApp) */
    .navbar .mobile-pill-btn.phone-pill,
    .navbar .mobile-pill-btn.whatsapp-pill {
        background: #39FF14 !important;
        color: #000 !important;
    }

    /* Logo button (Black) */
    .navbar .logo.logo-btn {
        background: #000 !important;
        min-width: 100px !important;
    }

    /* Logo text styling */
    .navbar .logo.logo-btn .logo-text {
        color: #fff !important;
        font-size: 0.8rem !important;
        font-weight: 800 !important;
        letter-spacing: 1px !important;
        white-space: nowrap !important;
    }

    /* LUX text - same green as buttons */
    .navbar .logo.logo-btn .logo-text .highlight {
        color: #39FF14 !important;
        text-shadow: none !important;
    }

    /* Button ordering */
    .navbar .phone-pill.mobile-only {
        order: 1 !important;
    }

    .navbar .logo.logo-btn {
        order: 2 !important;
    }

    .navbar .whatsapp-pill.mobile-only {
        order: 3 !important;
    }

    /* Hover effects */
    .navbar .mobile-pill-btn:hover,
    .navbar .logo.logo-btn:hover {
        transform: scale(1.03) !important;
    }
}

/* Extra small screens (400px and below) */
@media (max-width: 400px) {

    .navbar .mobile-pill-btn,
    .navbar .logo.logo-btn {
        width: 31% !important;
        max-width: 95px !important;
        height: 36px !important;
        padding: 0 8px !important;
        font-size: 0.6rem !important;
        border-radius: 18px !important;
    }

    .navbar .logo.logo-btn .logo-text {
        font-size: 0.7rem !important;
        letter-spacing: 0.5px !important;
    }
}

/* Very small screens (340px and below) */
@media (max-width: 340px) {
    .navbar .mobile-pill-btn span {
        display: none !important;
    }

    .navbar .mobile-pill-btn {
        width: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    .navbar .mobile-pill-btn i {
        margin: 0 !important;
        font-size: 1rem !important;
    }

    .navbar .logo.logo-btn {
        width: auto !important;
        max-width: none !important;
        padding: 0 12px !important;
    }
}

/* =============================================
   CRACK CLOSE-UP SLIDER - SQUARE ASPECT RATIO
   ============================================= */

/* Make slider 4 (Crack Close-up) square on mobile */
@media (max-width: 768px) {
    #comparisonSlider4 {
        aspect-ratio: 1 / 1 !important;
        /* Square */
        max-height: 400px !important;
    }

    #comparisonSlider4 .slider-image img {
        object-fit: cover !important;
        object-position: center !important;
    }
}