:root {
    /* 🎨 Theme Colors - Modern White/Blue/Green (No Neon) */

    /* Primary: Deep Professional Navy */
    --color-primary: #0F172A;
    /* Slate 900 - Dark Blue/Grey */
    --color-primary-light: #334155;
    /* Slate 700 */

    /* Accent: Fresh Natural Green (Mint/Sage/Forest mix) */
    --color-accent: #059669;
    /* Emerald 600 - Rich Green but not neon */
    --color-accent-hover: #047857;
    /* Emerald 700 */

    /* Secondary Accent: Clean Blue */
    --color-blue: #0284C7;
    /* Sky 600 */

    /* Functional Colors */
    --color-gold: #059669;
    /* REPLACED GOLD with ACCENT (User Request) */

    /* Backgrounds */
    --color-bg: #FFFFFF;
    /* Pure White */
    --color-bg-light: #F1F5F9;
    /* Slate 100 - Very subtle grey/blue tint */

    /* Text */
    --color-text-main: #334155;
    /* Slate 700 - Softer than black */
    --color-text-light: #64748B;
    /* Slate 500 */

    /* Spacing & Layout */
    --container-width: 1240px;
    --header-height: 110px;

    /* Animations */
    --transition-fast: 0.3s ease;
    --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.85);
    /* Whiter glass */
    --glass-border: 1px solid rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.08);
    /* Darker shadow color */
    --backdrop-blur: blur(16px);
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* Critical fix */
    width: 100%;
}

body {
    font-family: 'Outfit', sans-serif;
    color: var(--color-text-main);
    background-color: var(--color-bg);
    overflow-x: hidden;
    /* Double enforce */
    width: 100%;
    position: relative;
    /* Context for absolute positioning */
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* 🌀 LOADING SCREEN */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease-out, visibility 0.8s;
}

.loader-content {
    text-align: center;
    position: relative;
}

.logo-circle {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-logo {
    width: 60px;
    height: auto;
    opacity: 0;
    transform: scale(0.8);
    animation: logoFadeIn 1.2s ease-out forwards;
    z-index: 2;
}

.sparkle-effect {
    position: absolute;
    top: -10px;
    right: -10px;
    color: var(--color-accent);
    font-size: 1.2rem;
    opacity: 0;
    animation: sparkle 1.5s ease-in-out infinite;
}

.water-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    opacity: 0;
    animation: ripple 1.5s infinite;
}

.loader-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 4px;
    opacity: 0;
    transform: translateY(10px);
    animation: textFadeUp 0.8s ease-out 0.3s forwards;
}

/* Keyframes */
@keyframes logoFadeIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0.5;
    }

    100% {
        width: 150px;
        height: 150px;
        opacity: 0;
    }
}

@keyframes sparkle {

    0%,
    100% {
        transform: scale(0.5) rotate(0deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.2) rotate(45deg);
        opacity: 1;
    }
}

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

/* 🧭 HEADER */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background: white;
    /* Always white enabled */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* Slight shadow always */
    z-index: 1000;
    display: flex;
    align-items: center;
}

#main-header.scrolled {
    /* Kept for consistency if JS toggles it, but base is now white */
    background: rgba(255, 255, 255, 0.98);
}

.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
}

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

.logo {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--color-primary);
}

.logo .dot {
    color: var(--color-accent);
}

.desktop-nav {
    display: none;
}

/* 📸 SIMPLE TAP-BASED BEFORE & AFTER - Base Styles (All Screens) */
.ba-simple-container {
    max-width: 450px;
    margin: 30px auto;
    padding: 0 20px;
}

.ba-image-box {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(15, 23, 42, 0.15);
    margin-bottom: 25px;
    background: var(--color-bg-light);
    border: 2px solid rgba(15, 23, 42, 0.05);
}

.ba-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    display: block;
}

.ba-image.active {
    opacity: 1;
}

.ba-simple-label {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(220, 38, 38, 0.95);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    z-index: 10;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.ba-simple-label.show-after {
    background: rgba(5, 150, 105, 0.95);
}

.ba-tap-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 10px;
}

.ba-tap-btn {
    flex: 1;
    max-width: 180px;
    padding: 14px 28px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid var(--color-primary);
    background: white;
    color: var(--color-primary);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.ba-tap-btn i {
    font-size: 0.5rem;
    color: var(--color-primary);
    transition: all 0.3s ease;
}

.ba-tap-btn:hover {
    background: var(--color-primary);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
}

.ba-tap-btn:hover i {
    color: white;
}

.ba-tap-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
    box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3);
}

.ba-tap-btn.active i {
    color: white;
}

.ba-tap-btn:active {
    transform: translateY(-1px);
}

/* Section Styling for Before/After */
#before-after {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-bg-light) 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

#before-after::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    opacity: 0.3;
}

#before-after .section-title {
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-weight: 800;
}

#before-after .section-subtitle {
    color: var(--color-text-light);
    font-size: 1rem;
    margin-bottom: 2.5rem;
    font-weight: 500;
}

@media (min-width: 992px) {
    .ba-simple-container {
        max-width: 500px;
    }

    .ba-image-box {
        aspect-ratio: 4/3;
        border-radius: 24px;
    }

    .ba-tap-btn {
        max-width: 200px;
        padding: 16px 32px;
        font-size: 1rem;
    }

    .desktop-nav {
        display: flex;
        gap: 2rem;
        align-items: center;
    }

    .desktop-nav a {
        font-weight: 500;
        font-size: 1rem;
        color: var(--color-text-main);
        transition: color 0.3s;
    }

    .desktop-nav a:hover {
        color: var(--color-primary);
    }

    .nav-cta {
        padding: 0.6rem 1.5rem;
        background: var(--color-accent);
        color: white !important;
        border-radius: 50px;
        transition: transform 0.3s, background 0.3s;
    }

    .nav-cta:hover {
        background: var(--color-accent-hover);
        transform: translateY(-2px);
    }
}

/* 🍔 HAMBURGER */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    z-index: 1100;
}

.bar {
    width: 30px;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: 3px;
    transition: all 0.4s ease;
}

/* Hamburger Open State */
.hamburger-menu.active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* 📍 Service Area */
#service-area {
    position: relative;
    background-image: url('caruimg/nastuh-abootalebi-yWwob8kwOCk-unsplash.jpg');
    /* Premium Background */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Parallax feel */
    padding: 80px 0;
    color: white;
}

#service-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.92);
    /* Deep Dark Blue Overlay */
    z-index: 1;
}

#service-area .container {
    position: relative;
    z-index: 2;
}

#service-area .section-title,
#service-area .section-subtitle {
    color: white;
}

.service-area-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
}

@media (min-width: 600px) {
    .service-area-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .service-area-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1000px;
        margin: 50px auto 0;
    }
}

.area-item {
    background: rgba(255, 255, 255, 0.05);
    /* Glass effect */
    backdrop-filter: blur(10px);
    padding: 20px 25px;
    border-radius: 16px;
    /* Card shape */
    text-align: center;
    font-weight: 600;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    /* Icon on top */
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.area-item:hover {
    transform: translateY(-5px);
    background: white;
    color: var(--color-primary);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.area-item i {
    font-size: 1.5rem;
    color: var(--color-accent);
    margin-bottom: 5px;
}

/* Specific Highlight Item */
.area-item.highlight {
    background: var(--color-accent);
    color: white;
    border: none;
}

.area-item.highlight:hover {
    background: var(--color-primary);
}

.area-item.highlight i {
    color: white;
}

/* 📱 MOBILE MENU FULLSCREEN */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    /* Use vw to be precise */
    max-width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    z-index: 1050;
    padding-top: 100px;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    justify-content: center;
    /* overflow-y: auto; Allow vertical scroll inside menu if needed */
}

.mobile-menu-overlay.active {
    transform: translateX(0);
}

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.mobile-link {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
}

.mobile-phone {
    font-size: 1.2rem;
    color: var(--color-text-main);
    margin-top: 1rem;
}

.mobile-cta {
    margin-top: 1rem;
    padding: 1rem 3rem;
    background: var(--color-accent);
    color: white;
    font-weight: 700;
    border-radius: 50px;
}

/* 🏠 HERO */
#hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Static background removed for carousel */
    color: white;
    overflow: hidden;
    /* Ensure slides don't overflow */
}

/* Hero Carousel */
.hero-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    transform: scale(1.05);
    /* Slight zoom for effect */
    animation: slowZoom 10s infinite alternate;
    /* Subtle movement */
}

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

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

    to {
        transform: scale(1.15);
    }
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 35, 66, 0.8), rgba(46, 204, 113, 0.4));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-top: 60px;
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

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

.btn {
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-block;
    border: none;
}

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

.btn-accent:hover {
    background: var(--color-accent-hover);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(46, 204, 113, 0.3);
}

.btn-outline {
    background: transparent;
    border: 2px solid white;
    color: white;
}

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

.scroll-indicator {
    position: absolute;
    bottom: 100px;
    /* moved up a bit from very bottom */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    opacity: 0.7;
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

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

.hero-tagline {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-gold);
    margin-bottom: 20px;
    animation: fadeInDown 0.8s ease-out;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    /* Full pill shape */
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

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

.btn-primary:hover {
    background: transparent;
    color: var(--color-primary);
}

/* Replaced Gold with Accent (Green) */
.btn-gold {
    background: var(--color-accent);
    color: white;
    border: 2px solid var(--color-accent);
}

.btn-gold:hover {
    background: var(--color-primary);
    /* Switch to Navy on hover */
    border-color: var(--color-primary);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);
}

.btn-outline {
    background: transparent;
    border: 2px solid white;
    color: white;
}

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

.btn-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
}

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

.hero-phone {
    margin-top: 30px;
    font-size: 1.5rem;
    font-weight: 700;
}

.hero-phone a {
    color: white;
    transition: color 0.3s;
}

.hero-phone a:hover {
    color: var(--color-gold);
}

.glow-effect {
    position: relative;
    overflow: hidden;
}

.glow-effect::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(45deg);
    transition: all 0.5s;
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    20% {
        transform: translateX(100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

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

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

/* 🔻 MOBILE BOTTOM NAV */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 900;
    border-top: 1px solid #eee;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem;
    color: #999;
}

.nav-item i {
    font-size: 1.2rem;
    margin-bottom: 4px;
    transition: transform 0.2s;
}

.nav-item.active {
    color: var(--color-primary);
}

.nav-item.highlight {
    color: var(--color-accent);
}

.nav-item.highlight i {
    transform: translateY(-2px);
}

/* Scroll Progress Bar */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(to right, var(--color-accent), var(--color-gold));
    z-index: 99999;
    width: 0%;
    transition: width 0.1s;
}

@media (min-width: 768px) {
    .mobile-bottom-nav {
        display: none;
    }

    .scroll-indicator {
        bottom: 30px;
    }
}

/* Sections General */
.section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 3rem;
    position: relative;
    display: inline-block;
    width: 100%;
}

.bg-light {
    background: #f9f9f9;
}

/* Chat Bubble Premium */
.chat-bubble {
    position: fixed;
    bottom: 100px;
    /* Moved higher */
    right: 30px;
    width: 65px;
    height: 65px;
    background: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-accent);
    /* Green Icon */
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 890;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 2px solid var(--color-accent);
}

.chat-bubble:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 15px 40px rgba(5, 150, 105, 0.2);
    background: var(--color-accent);
    color: white;
}

.chat-window {
    position: fixed;
    bottom: 110px;
    right: 30px;
    width: 350px;
    max-height: 500px;
    background: white;
    border-radius: 20px;
    /* More rounded */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    z-index: 890;
    display: none;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.chat-window.active {
    display: flex;
    animation: slideUp 0.3s ease-out;
}

.chat-header {
    background: linear-gradient(135deg, var(--color-primary), #0a2e5c);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.chat-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    max-height: 400px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 15px;
    min-height: 100px;
}

.chat-body .bot-msg {
    background: #f1f5f9;
    padding: 15px;
    border-radius: 12px 12px 12px 2px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: var(--color-text-main);
    animation: fadeIn 0.3s ease-in;
}

.chat-body .user-msg {
    background: var(--color-primary);
    color: white;
    padding: 15px;
    border-radius: 12px 12px 2px 12px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    text-align: right;
    margin-left: auto;
    max-width: 80%;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.faq-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 12px 15px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-primary);
    transition: all 0.2s;
    font-weight: 500;
}

.faq-btn:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

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

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

/* Services Carousel */
.services-carousel {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
}

.services-track {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease-out;
    cursor: grab;
}

.services-track:active {
    cursor: grabbing;
}

.service-card {
    flex: 0 0 100%;
    /* Mobile: 1 card visible */
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .service-card {
        flex: 0 0 calc(50% - 10px);
        /* Tablet: 2 cards */
    }
}

@media (min-width: 1024px) {
    .services-carousel {
        overflow: visible;
        padding: 0;
    }

    .services-track {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        transform: none !important;
        cursor: default;
    }

    .service-card {
        flex: unset;
        width: 100%;
        padding: 2.5rem;
        display: flex;
        flex-direction: column;
    }

    .card-image {
        height: 200px;
        margin-bottom: 1.5rem;
        border-radius: 12px;
        overflow: hidden;
    }

    .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .service-card h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        font-weight: 700;
    }

    .service-card p {
        font-size: 1rem;
        margin-bottom: 1rem;
        line-height: 1.6;
    }

    .carousel-nav {
        display: none;
        /* Hide carousel controls on desktop */
    }
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(46, 204, 113, 0.15);
    border-color: var(--color-accent);
}

.card-icon {
    width: 80px;
    height: 80px;
    background: #f0fdf4;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 1.5rem;
    color: var(--color-accent);
    font-size: 2rem;
    transition: transform 0.5s;
}

.service-card:hover .card-icon {
    transform: rotateY(180deg);
    background: var(--color-accent);
    color: white;
}

.service-list {
    text-align: left;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.service-list li {
    margin-bottom: 0.5rem;
    padding-left: 20px;
    position: relative;
}

.service-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

.carousel-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.carousel-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    background: #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background: var(--color-primary);
    transform: scale(1.2);
}

.prev-btn,
.next-btn {
    background: white;
    border: 1px solid #eee;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-primary);
    transition: all 0.3s;
}

.prev-btn:hover,
.next-btn:hover {
    background: var(--color-primary);
    color: white;
}

/* Modern Footer Redesign */
.main-footer {
    background: #0f172a;
    /* Darker Slate */
    color: #e2e8f0;
    padding-top: 100px;
    /* More breathing room */
    padding-bottom: 40px;
    margin-top: 0;
    /* Connected to bottom section */
    position: relative;
    clip-path: polygon(0 0, 100% 50px, 100% 100%, 0 100%);
    /* Slight angle cut at top for "Better/Different" feel */
}

/* Mobile: Extra padding for iOS navigation */
@media (max-width: 768px) {
    .main-footer {
        padding-bottom: 120px;
        /* Extra space for iOS nav bar */
    }
}

/* Adjust grid for better spacing */
.footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    /* Wider first column */
    margin-top: 40px;
}

.footer-col h4 {
    color: var(--color-gold);
    /* Gold Highlights */
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.footer-col h4::after {
    display: none;
    /* Remove underline */
}

.footer-contact p i {
    color: var(--color-accent);
    /* Green icons */
    width: 20px;
}

/* Timeline Styling */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 0;
    /* More padding */
}

/* Background Gray Line */
.timeline::before {
    content: '';
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 20px;
    /* Adjusted position */
    width: 6px;
    background: #e2e8f0;
    border-radius: 6px;
    z-index: 1;
}

/* 🔵 Timeline BLUE FILL Line (Follows Scroll) */
.timeline-fill {
    content: '';
    position: absolute;
    top: 40px;
    left: 20px;
    /* Adjusted position */
    width: 6px;
    background: var(--color-blue);
    border-radius: 6px;
    z-index: 2;
    height: 0%;
    transition: height 0.1s linear;
}

/* 🔵 Timeline Blue Ball (Leader) */
.timeline-ball {
    position: absolute;
    left: 20px;
    /* Match line position */
    top: 40px;
    width: 24px;
    height: 24px;
    background: var(--color-blue);
    border: 4px solid white;
    border-radius: 50%;
    transform: translateX(-50%);
    /* Center on the line */
    z-index: 20;
    box-shadow: 0 0 20px rgba(2, 132, 199, 0.5);
    transition: top 0.1s linear;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    width: 50%;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
}

.timeline-item:nth-child(even) {
    left: 50%;
}

.timeline-item::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border: 4px solid var(--color-accent);
    border-radius: 50%;
    top: 25px;
    z-index: 10;
}

.timeline-item:nth-child(odd)::after {
    right: -10px;
}

.timeline-item:nth-child(even)::after {
    left: -10px;
}

.timeline-content {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: transform 0.3s;
}

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

.year {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
    color: var(--color-accent);
}

@media (max-width: 768px) {
    .timeline::before {
        left: 20px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 50px;
        padding-right: 0;
        text-align: left !important;
    }

    .timeline-item:nth-child(even) {
        left: 0;
    }

    .timeline-item::after {
        left: 12px !important;
        right: auto !important;
    }
}

/* Service Grid Basic */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.service-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
}

.service-card:hover {
    transform: translateY(-10px);
}

.service-card i {
    font-size: 3rem;
    color: var(--color-accent);
    margin-bottom: 1.5rem;
}


/* 📱 New Mobile Menu Styles */
.mobile-menu-close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: transparent;
    border: none;
    font-size: 2.5rem;
    color: var(--color-primary);
    cursor: pointer;
    z-index: 1060;
}

.mobile-link {
    font-size: 2.2rem;
    /* Bigger Words */
    font-weight: 800;
    /* Cooler Font (Bolder) */
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: -1px;
    transition: color 0.3s;
}

.mobile-link:hover {
    color: var(--color-accent);
    transform: scale(1.05);
    /* Slight pop */
}

/* Hero Socials Top - Noticeable */
.hero-socials-top {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 25px;
    /* Above tagline */
}

.social-icon {
    width: 60px;
    height: 60px;
    display: flex;
    /* Center icon */
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    /* SVG Logo Bigger */
    color: white;
    background: rgba(255, 255, 255, 0.1);
    /* Glass background */
    backdrop-filter: blur(5px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: white;
    transform: translateY(-5px) scale(1.1);
}

.social-icon.instagram:hover {
    color: #E1306C;
}

.social-icon.tiktok:hover {
    color: #000000;
}

/* 📱 NEW: Mobile Header Styles */
.mobile-header-actions {
    display: none;
    /* Hidden on desktop */
    align-items: center;
    gap: 10px;
    margin-right: 15px;
    /* Space before hamburger */
}

.mobile-header-phone {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    flex-direction: row;
    /* Ensure text is next to icon */
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    /* Light slate bg */
    padding: 8px 12px;
    border-radius: 50px;
    /* Pill shape */
    border: 1px solid #e2e8f0;
    line-height: 1;
    text-decoration: none;
    transition: all 0.2s ease;
}

.mobile-header-phone:active,
.mobile-header-phone:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: scale(0.98);
}

.mobile-header-cta {
    background: var(--color-accent);
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

.hero-socials {
    margin: 25px 0 15px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.hero-socials a {
    font-size: 2rem;
    color: white;
    transition: transform 0.3s, color 0.3s;
}

.hero-socials a:hover {
    color: var(--color-accent);
    transform: translateY(-5px);
}

/* 📱 RESPONSIVE RESPONSIVE MEDIA QUERIES */
@media (max-width: 991px) {
    :root {
        --header-height: 80px;
    }

    /* Show mobile header items */
    .mobile-header-actions {
        display: flex;
    }

    .logo img {
        height: 60px !important;
        width: auto !important;
    }

    .hero-title {
        font-size: 2.5rem;
        /* Bigger on mobile too */
        line-height: 1.1;
    }

    .container {
        width: 92%;
    }

    #main-header {
        padding: 0 5px;
        justify-content: space-between;
    }

    /* Ensure close button is visible */
    .mobile-menu-overlay {
        padding-top: 120px;
        /* Space for close button */
    }

    /* Services Grid on Mobile (No Scroll) */
    .services-carousel {
        padding: 0;
        overflow: visible;
    }

    .services-track {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* 2 Columns */
        gap: 10px;
        transform: none !important;
        /* Disable JS slide */
    }

    .service-card {
        flex: unset;
        width: 100%;
        padding: 1rem;
        /* Compact padding */
        border-radius: 12px;
        margin-bottom: 0;
    }

    .card-image {
        height: 120px;
        /* Slightly taller */
        margin-bottom: 8px;
        border-radius: 8px;
        overflow: hidden;
    }

    .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Ensure it covers nicely */
        object-position: center;
    }

    .service-card h3 {
        font-size: 1.1rem;
        /* Readable title */
        margin-bottom: 4px;
        font-weight: 700;
        line-height: 1.2;
    }

    .service-card p {
        font-size: 0.85rem;
        display: -webkit-box;
        /* Show description */
        -webkit-line-clamp: 3;
        /* Limit to 3 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 0;
        line-height: 1.3;
        color: #64748b;
    }

    .service-list {
        display: none;
        /* Keep bullets hidden to avoid clutter */
    }

    /* Reset text to be visible if user wants detailed view, or keep simple?
       User said "make everything seeable". Let's keep title and maybe description but make font small. 
       Let's hide the list to prevent scrolling. */

    .carousel-nav {
        display: none;
        /* Hide arrows/dots */
    }

    /* Stack or hide if too crowded on very small screens? */
    @media (max-width: 350px) {
        .services-track {
            grid-template-columns: 1fr;
            /* 1 Column extremely small screens */
        }
    }

    @media (max-width: 400px) {
        .mobile-header-phone {
            font-size: 0px;
        }

        .mobile-header-phone i {
            font-size: 1.2rem;
            margin-right: 5px;
        }

        .mobile-header-cta {
            padding: 5px 10px;
            font-size: 0.75rem;
        }
    }

    .hero-socials a {
        font-size: 1.8rem;
    }

    /* 📸 Mobile Optimization for Verified Results */
    #before-after .ba-simple-container {
        max-width: 100%;
        margin: 20px auto;
        padding: 0 15px;
    }

    #before-after .ba-image-box {
        aspect-ratio: 1;
        border-radius: 16px;
        margin-bottom: 20px;
        max-height: 400px;
    }

    #before-after .ba-image {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover;
    }

    #before-after .ba-simple-label {
        font-size: 0.7rem;
        padding: 8px 16px;
        top: 12px;
        right: 12px;
    }

    #before-after .ba-tap-buttons {
        gap: 12px;
        padding: 0;
    }

    #before-after .ba-tap-btn {
        padding: 12px 20px;
        font-size: 0.85rem;
        max-width: none;
    }

    #before-after .ba-tap-btn i {
        font-size: 0.45rem;
    }

    /* 🔘 Button-Based Before/After Controls */
    .ba-button-container {
        max-width: 100%;
    }

    .ba-image-display {
        height: 300px;
        /* Mobile height */
    }

    .ba-button-controls {
        gap: 10px;
    }

    .ba-btn {
        flex: 1;
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}

/* 🔘 Button-Based Before/After System */
.ba-button-container {
    max-width: 700px;
    margin: 0 auto;
}

.ba-image-display {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    margin-bottom: 30px;
}

.ba-image-display img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.ba-overlay-label {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--color-primary);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 2px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transition: all 0.3s ease;
}

.ba-button-controls {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.ba-btn {
    flex: 1;
    max-width: 200px;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    border: 2px solid var(--color-primary);
    background: white;
    color: var(--color-primary);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.ba-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

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

.ba-btn i {
    font-size: 1.2rem;
}

/* 📱 MOBILE MENU FULLSCREEN */
@media (min-width: 992px) {
    .logo img {
        height: 90px;
        width: auto;
    }

    /* Hide mobile specific items on desktop */
    .mobile-header-actions {
        display: none !important;
    }

    .mobile-menu-close {
        display: none;
    }
}

/* 📩 ESTIMATE MODAL CSS (Missing) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: white;
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    padding: 40px;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.2s;
}

.modal-close:hover {
    color: var(--color-primary);
}

.modal-header {
    text-align: center;
    margin-bottom: 30px;
}

.modal-header h3 {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.modal-header p {
    color: #64748b;
}

.form-floating {
    position: relative;
    margin-bottom: 20px;
}

.form-floating input,
.form-floating textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    outline: none;
    font-size: 1rem;
    transition: all 0.2s;
    background: #f8fafc;
}

.form-floating label {
    position: absolute;
    left: 15px;
    top: 17px;
    color: #94a3b8;
    pointer-events: none;
    transition: all 0.2s;
    background: transparent;
}

.form-floating input:focus,
.form-floating textarea:focus,
.form-floating input:not(:placeholder-shown),
.form-floating textarea:not(:placeholder-shown) {
    border-color: var(--color-accent);
    background: white;
}

.form-floating input:focus~label,
.form-floating textarea:focus~label,
.form-floating input:not(:placeholder-shown)~label,
.form-floating textarea:not(:placeholder-shown)~label {
    top: -10px;
    left: 10px;
    font-size: 0.8rem;
    color: var(--color-accent);
    background: white;
    padding: 0 5px;
}

.btn-block {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
}