/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary-color: #1CBAC9;
    --primary-dark: #159ea8;
    --dark-bg: #111111;
    --card-bg: #1a1a1a;
    --text-color: #f3f4f6;
    --text-muted: #9ca3af;
    --border-color: #333333;
    --max-width: 1200px;
    --transition: all 0.3s ease;
}

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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

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

ul {
    list-style: none;
}

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

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

/* Utilities */
.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
    border-radius: 4px;
    border: 2px solid var(--primary-color);
    text-transform: uppercase;
    font-size: 14px;
    cursor: pointer;
}

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

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

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

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

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--primary-color);
    text-transform: uppercase;
}

.section-title p {
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Header */
.site-header {
    background-color: transparent;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.4s ease;
}

/* Top Bar */
.top-bar {
    background-color: rgba(0, 0, 0, 0.9);
    /* Much darker */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px 0;
    font-size: 13px;
    transition: all 0.4s ease;
}

.top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-contact a,
.top-social,
.top-social a {
    color: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 20px;
    transition: color 0.3s;
}

.top-contact a:hover,
.top-social a:hover {
    color: var(--primary-color);
}

.social-icons {
    display: inline-flex;
    gap: 15px;
    margin-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 20px;
}

/* Scrolled State */
.site-header.scrolled {
    background-color: #000000;
    /* Solid Black */
    backdrop-filter: none;
    /* remove blur as it is solid */
    -webkit-backdrop-filter: none;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.9);
    /* Deeper shadow */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-header.scrolled .top-bar {
    height: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
}

.site-header.scrolled nav {
    height: 70px;
    /* Slightly taller than condensed to look premium */
    border-bottom: none;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    transition: height 0.4s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.logo a {
    font-size: 28px;
    /* Larger logo */
    font-weight: 800;
    color: white;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    /* Ensure font */
}

.logo span {
    color: var(--primary-color);
}

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

.nav-links a:not(.btn) {
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    position: relative;
    letter-spacing: 0.5px;
    padding: 5px 0;
}

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

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

.nav-links a:not(.btn):hover,
.nav-links a:not(.btn).active {
    color: white;
}

/* Header Button */
.site-header .btn {
    padding: 10px 25px;
    font-size: 13px;
    border-radius: 50px;
    /* Pill shape */
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    border: none;
    box-shadow: 0 4px 15px rgba(28, 186, 201, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.site-header .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(28, 186, 201, 0.5);
    color: white;
}

/* Mobile Menu Button (Hamburger) */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 1002;
}

.mobile-menu-btn span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.mobile-menu-btn:hover span {
    background-color: var(--primary-color);
}

/* Hamburger Animation */
.mobile-menu-btn.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

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

/* Hero Section */
.hero {
    height: 85vh;
    /* Reduced from 100vh to show Marquee below */
    min-height: 600px;
    /* Industrial dark teal to black gradient fallback if image fails */
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/hero-bg.jpg'), linear-gradient(135deg, #0f1719 0%, #1a2a3a 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    text-align: center;
    padding-top: 80px;
    position: relative;
    /* Ensure parent is relative */
}

.hero-content {
    position: relative;
    z-index: 3;
    /* Above the overlay which is z-index 1 */
    width: 100%;
}

.hero-content h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
    color: #ffffff;
    /* Force White */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    /* Boost contrast */
}

.hero-content span {
    color: var(--primary-color);
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 30px;
    color: #cccccc;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Features/Services Preview */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

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

.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-color);
}

.service-icon {
    font-size: 40px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

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

.service-card p {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 20px;
}

/* About Preview */
.about-preview {
    background-color: var(--card-bg);
}

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

.about-text {
    flex: 1;
}

.about-image {
    flex: 1;
}

.about-image img {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Footer */
footer {
    background-color: #0a0a0a;
    padding-top: 60px;
    border-top: 1px solid var(--border-color);
}

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

.footer-col h3 {
    font-size: 18px;
    margin-bottom: 20px;
    color: white;
}

.footer-col p {
    color: var(--text-muted);
    margin-bottom: 15px;
    font-size: 14px;
}

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

.footer-links a {
    color: var(--text-muted);
    font-size: 14px;
}

.footer-links a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

.contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
    color: var(--text-muted);
    font-size: 14px;
}

.contact-info i {
    color: var(--primary-color);
    margin-top: 4px;
}

.copyright {
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
    color: #666;
    font-size: 14px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        /* Add JS toggle logic later */
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: var(--dark-bg);
        flex-direction: column;
        padding: 20px;
        text-align: center;
    }

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

    .mobile-menu-btn {
        display: block;
    }

    .hero-content h1 {
        font-size: 32px;
    }

    .about-content {
        flex-direction: column;
    }
}

/* Gallery Professional Styles */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    background-color: var(--card-bg);
    aspect-ratio: 4/3;
    /* Consistent aspect ratio */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(28, 186, 201, 0.4);
    /* Primary color dim */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.gallery-overlay i {
    color: white;
    font-size: 32px;
    transform: scale(0.8);
    transition: transform 0.3s ease;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item:hover .gallery-overlay i {
    transform: scale(1.1);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* Mobile Gallery Slider Request */
@media (max-width: 768px) {
    .gallery-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding-bottom: 30px;
        /* Space for scroll */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .gallery-grid::-webkit-scrollbar {
        display: none;
    }

    .gallery-item {
        flex: 0 0 85%;
        /* Shows 85% of image, peek at next */
        width: 85%;
        scroll-snap-align: center;
        height: 400px;
        /* Fixed height for consistency */
        margin-bottom: 0;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }

    .gallery-item img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}


/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

/* Thin Review Bar - Ultra Futurism */
.reviews-bar-section {
    padding: 0;
    margin-top: 60px;
    margin-bottom: 60px;
    position: relative;
    z-index: 10;
    perspective: 2000px;
    /* Enhanced 3D perspective */
}

.reviews-thin-card {
    background: rgba(10, 10, 10, 0.6);
    /* Very sheer dark base */
    backdrop-filter: blur(40px) brightness(1.1);
    /* Super frosted */
    -webkit-backdrop-filter: blur(40px) brightness(1.1);

    /* Double border trick using box-shadow for inner light and border for outer */
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 30px 60px -12px rgba(0, 0, 0, 0.8),
        /* Deep ambient shadow */
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        /* Inner subtle ring */
        inset 0 20px 40px rgba(0, 0, 0, 0.5);
    /* Inner depth */

    border-radius: 100px;
    /* Full pill shape */
    padding: 8px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 85px;
    max-width: 950px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Animated Neon Border Flow */
.reviews-thin-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 100px;
    padding: 1px;
    /* Border width */
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    animation: neonFlow 4s linear infinite;
    pointer-events: none;
}

@keyframes neonFlow {
    0% {
        background-position: 0% 50%;
        background-size: 200% 200%;
    }

    100% {
        background-position: 200% 50%;
        background-size: 200% 200%;
    }
}

.reviews-thin-card:hover {
    box-shadow:
        0 40px 80px -12px rgba(0, 0, 0, 0.9),
        0 0 30px rgba(28, 186, 201, 0.15);
    /* Primary color ambient glow */
    background: rgba(15, 15, 15, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    transition: opacity 0.2s ease;
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
    transition: color 0.3s;
}

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

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 24px;
    padding: 15px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: var(--primary-color);
    color: #000;
}

.lightbox-prev {
    left: 30px;
}

.lightbox-next {
    right: 30px;
}

/* Quick Access Items */
.qa-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 10px;
    background-color: #f8f9fa;
    border-radius: 10px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.qa-item:hover {
    background-color: white;
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.qa-item i {
    font-size: 24px;
    color: var(--primary-color);
}

.qa-item.google-maps i {
    color: #4285F4;
}

.qa-item.apple-maps i {
    color: #000;
}

.qa-item.whatsapp i {
    color: #25D366;
}

.qa-item.email i {
    color: #EA4335;
}

.qa-item span {
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .floating-btn {
        width: 50px;
        height: 50px;
        font-size: 24px;
        bottom: 20px;
    }

    .whatsapp-btn {
        right: 20px;
    }

    .quick-access-btn {
        left: 20px;
    }

    .quick-access-wrapper {
        left: 20px;
        bottom: 20px;
    }
}

/* Floating Buttons */
.floating-btn {
    position: fixed;
    bottom: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    text-decoration: none;
}

.floating-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* WhatsApp Button (Right) */
.whatsapp-btn {
    right: 30px;
    background-color: #25D366;
}

.whatsapp-btn:hover {
    background-color: #20BA5A;
}

/* Quick Access Button (Left) */
.quick-access-btn {
    left: 0;
    top: 0;
    position: relative;
    /* Relative to wrapper */
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.quick-access-wrapper {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 1001;
}

/* Quick Access Menu Popup */
.quick-access-menu {
    position: absolute;
    bottom: 80px;
    left: 0;
    width: 280px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: bottom left;
}

.quick-access-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.quick-access-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.quick-access-header h4 {
    margin: 0;
    color: #333;
    font-size: 16px;
    font-weight: 700;
}

.quick-access-header button {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 16px;
    transition: color 0.3s;
}

.quick-access-header button:hover {
    color: #333;
}

.quick-access-grid {
    text-decoration: none;
    transition: all 0.3s;
    min-width: 100px;
    text-align: center;
}

.review-action-btn:hover {
    background-color: white;
    transform: translateY(-2px);
}

.reviews-slider-container {
    flex: 1;
    height: 100%;
    margin: 0 20px;
    overflow: hidden;
    position: relative;
    /* Mask to fade edges if needed, but for one-by-one, probably clean cut is better or slight fade */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.reviews-slides-track {
    display: flex;
    /* 4 slides, so 400% width, or just enough width to hold them horizontal */
    width: 400%;
    animation: slideLeftReviews 16s ease-in-out infinite;
}

.review-slide {
    width: 25%;
    /* 100% / 4 slides */
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: #ccc;
    font-size: 14px;
    white-space: nowrap;
    opacity: 1;
    /* Reset opacity */
    animation: none;
    /* Reset animation */
}

@keyframes slideLeftReviews {

    0%,
    20% {
        transform: translateX(0);
    }

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

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

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

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

/* Mobile Fix for Review Bar - Modernized */
@media (max-width: 768px) {
    .reviews-bar-section {
        margin-top: 10px;
        margin-bottom: 20px;
        padding: 0 15px;
        /* More side padding */
    }

    .reviews-thin-card {
        flex-direction: column;
        height: auto;
        padding: 20px;
        border-radius: 20px;
        gap: 15px;
        /* Modern Glass Effect */
        background: rgba(20, 20, 20, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .google-badge {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-right: 0;
        padding-bottom: 12px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .google-badge strong {
        font-size: 14px;
    }

    .google-badge span {
        font-size: 11px;
        opacity: 0.7;
    }

    .reviews-slider-container {
        width: 100%;
        height: 70px;
        /* Adjusted height */
        margin: 0;
        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        /* Restore fade for premium feel */
    }

    .review-slide {
        padding: 0 5px;
        gap: 10px;
        justify-content: flex-start;
        /* Align left */
    }

    .review-avatar-circle {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .review-content {
        max-width: calc(100% - 40px);
        /* Fill remaining space */
        align-items: flex-start;
        text-align: left;
    }

    .review-slide p {
        font-size: 13px;
        line-height: 1.4;
    }

    .review-action-btn {
        width: 100%;
    }
}

/* Modern Badge */
.google-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    /* Fainter divider */
    padding-right: 30px;
    min-width: 140px;
    gap: 4px;
    position: relative;
}

.google-badge i {
    font-size: 24px;
    /* Pure Google Colors with drop shadow */
    background: linear-gradient(135deg, #4285F4, #EA4335, #FBBC05, #34A853);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s;
}

.reviews-thin-card:hover .google-badge i {
    transform: scale(1.1) rotate(10deg);
}

.google-badge strong {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    font-family: 'Inter', sans-serif;
}

.google-badge span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* Refined Slider Content */
.reviews-slider-container {
    flex: 1;
    height: 100%;
    margin: 0 40px;
    overflow: hidden;
    position: relative;
    /* Cinema-style fading */
    mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
}

.review-slide {
    width: 25%;
    height: 85px;
    /* Matches new container height */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-family: 'Inter', sans-serif;
}

.review-avatar-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: white;
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.08);
    background-size: cover;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

/* Shine effect on avatar */
.review-avatar-circle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%);
    pointer-events: none;
}

/* Darker overlay for hero section */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.88) 100%);
    /* Much darker overlay for readability over GIF */
    z-index: 1;
}

.review-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    /* Reduce gap to fit better */
    max-width: 80%;
    /* Prevent overflow */
}

.review-slide p {
    margin: 0;
    font-size: 14px;
    /* Slightly smaller to fit */
    line-height: 1.4;
    color: #f0f0f0;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 500px;
    /* Ensure text truncates if too long */
}

.review-slide span {
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    margin-top: 2px;
}

.review-slide .stars {
    display: none;
    /* Hide stars for cleaner "Modern" look, or make them tiny. User said modernize, less clutter is more modern. Let's hide stars in the slider, keep them implied by the 4.9 badge? Or keep them tiny. Let's keep them but make them tiny inside the content? */
}




.reviews-slides-track {
    display: flex;
    width: 400%;
    /* Important: 4 slides = 400% width relative to container */
    will-change: transform;
    /* Hint for browser optimization */
    animation: slideLeftReviews 16s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.review-slide .stars {
    color: #FFD700;
    font-size: 10px;
    display: flex;
    gap: 1px;
}

.review-slide p {
    margin: 0;
    font-style: italic;
    color: white;
    max-width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-slide span {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 12px;
}

/* Responsive Top Bar */
@media (max-width: 768px) {
    .site-header {
        top: 0;
        padding: 0;
        /* Remove extra padding on mobile */
    }

    .top-bar {
        display: none;
        /* Often best to hide top bar on mobile to save valuable screen space, 
                        BUT user asked to make it "responsive", not hide it. 
                        Let's try to show just the phone number centered. */
        display: block;
        /* Override flex if needed, or keep block */
        padding: 5px 0;
        font-size: 11px;
    }

    .top-bar-inner {
        flex-direction: column;
        gap: 5px;
        justify-content: center;
        text-align: center;
    }

    .contact-list {
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Hide Location and Email on mobile to save space, keep Phone */
    .contact-list li:not(:first-child) {
        /* Assuming Phone is first? Let's check header.php. 
           Order: Map, Phone, Email. Phone is 2nd. 
           Let's hide Map and Email. */
        display: none;
    }

    .contact-list li:nth-child(2) {
        display: flex;
        /* Keep Phone */
    }

    .social-links {
        display: none;
        /* Hide social links in top bar on mobile, they are in footer/menu */
    }
}

.review-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.review-slide p {
    white-space: normal;
    font-size: 12px;
    line-height: 1.3;
    max-width: 100%;
}

.reviews-wrapper {
    position: relative;
    width: 100%;
    margin-top: 40px;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.reviews-track {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: scrollReviews 30s linear infinite;
    padding: 10px 0;
}

.reviews-track:hover {
    animation-play-state: paused;
}

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

    100% {
        transform: translateX(calc(-50% - 15px));
    }

    /* Moves half the width (since content is doubled) */
}

.review-card {
    background-color: var(--card-bg);
    padding: 25px;
    border-radius: 12px;
    min-width: 320px;
    max-width: 320px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s;
}

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

.review-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    position: relative;
}

.review-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--primary-dark);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
}

.review-info h4 {
    color: white;
    font-size: 16px;
    margin-bottom: 3px;
    font-weight: 600;
}

.review-stars {
    color: #FFD700;
    /* Gold */
    font-size: 12px;
    display: flex;
    gap: 2px;
}

.google-icon {
    margin-left: auto;
    color: #4285F4;
    font-size: 24px;
}

.review-text {
    color: #ccc;
    font-size: 14px;
    line-height: 1.5;
    font-style: italic;
}

/* =========================================
   Scrolling Keywords Marquee
   ========================================= */
.keyword-marquee-section {
    background: #060606;
    /* Very dark background */
    padding: 20px 0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 5;
    user-select: none;
}

/* Fade edges */
.keyword-marquee-section::before,
.keyword-marquee-section::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.keyword-marquee-section::before {
    left: 0;
    background: linear-gradient(to right, #060606, transparent);
}

.keyword-marquee-section::after {
    right: 0;
    background: linear-gradient(to left, #060606, transparent);
}

.keyword-marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.keyword-track {
    display: inline-flex;
    align-items: center;
    gap: 0;
    /* Margin handled by items */
    animation: scrollText 60s linear infinite;
    /* Slower for better readability */
    will-change: transform;
}



.keyword-item {
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    /* Requested: White Text */
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 24px;
    margin: 0 10px;
    background: rgba(255, 255, 255, 0.15);
    /* Requested: Greyish/White tint */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    white-space: nowrap;
    transition: all 0.3s ease;
    cursor: default;
}

.keyword-item:hover {
    background: rgba(28, 186, 201, 0.15);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 0 15px rgba(28, 186, 201, 0.3);
    /* transform: translateY(-2px); REMOVED */
}

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

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

@media (max-width: 768px) {
    .keyword-item {
        font-size: 11px;
        padding: 6px 16px;
        margin: 0 6px;
    }
}

/* =========================================
   Typewriter Animation
   ========================================= */
.typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto 30px auto;
    letter-spacing: .10em;
    border-right: 3px solid var(--primary-color);
    animation:
        typing 4s steps(60, end),
        blink-caret .75s step-end infinite;
    max-width: 100%;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: var(--primary-color);
    }
}

/* Hero Buttons Container (Desktop default) */
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    width: 100%;
}

@media (max-width: 768px) {
    .typewriter {
        white-space: normal;
        /* Allow text to wrap */
        overflow: visible;
        border-right: none;
        /* No cursor on mobile */
        animation: none;
        /* No animation on mobile to ensure visibility */
        font-size: 16px;
        /* Readable size */
        line-height: 1.5;
        margin-bottom: 30px;
        display: block;
        width: 100%;
        height: auto;
    }

    .hero-buttons {
        display: flex;
        flex-direction: column;
        /* Stack buttons */
        align-items: center;
        /* Center buttons horizontally */
        gap: 15px;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 100%;
        display: block;
        text-align: center;
    }
}

/* =========================================
   Quote Modal Styles (Professional White Theme)
   ========================================= */
.quote-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    /* Dark semi-transparent overlay */
    z-index: 9999;
    /* Very high z-index to sit on top of everything */
    display: none;
    /* Hidden by default */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
    /* Modern blur effect */
}

.quote-modal-overlay.active {
    display: flex;
    animation: modalFadeIn 0.3s ease forwards;
}

.quote-modal-content {
    background: #ffffff;
    /* Requested: White Background */
    width: 90%;
    max-width: 420px;
    padding: 35px;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    text-align: center;
    /* Initial state for animation */
    opacity: 0;
    transform: scale(0.9) translateY(20px);
}

.quote-modal-overlay.active .quote-modal-content {
    animation: modalPopUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s forwards;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

.quote-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #f0f0f0;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #555;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.quote-modal-close:hover {
    background: #ff4757;
    color: white;
}

.quote-modal-content h3 {
    color: #222;
    /* Dark text for white bg */
    font-size: 22px;
    margin-bottom: 8px;
    font-weight: 700;
}

.quote-modal-content p {
    color: #666;
    /* Grey text */
    font-size: 13px;
    margin-bottom: 25px;
    line-height: 1.5;
}

.quote-form .form-group {
    margin-bottom: 12px;
    text-align: left;
}

.quote-form input,
.quote-form select,
.quote-form textarea {
    width: 100%;
    padding: 12px 15px;
    background: #f8f9fa;
    /* Very light grey input bg */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    color: #333;
    /* Dark text */
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(28, 186, 201, 0.1);
}

.quote-form textarea {
    resize: none;
}

.quote-form .btn {
    width: 100%;
    padding: 14px;
    font-weight: 600;
    font-size: 15px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
}

.quote-form .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(28, 186, 201, 0.4);
}