:root {
    --primary: #2d2d2d;
    /* Dark Grey Steel */
    --secondary: #4a4a4a;
    --accent: #444444;
    /* Mid Grey */
    --accent-hover: #333333;
    --text: #333333;
    --text-light: #666666;
    --bg-light: #f8f9fa;
    --white: #ffffff;
    --shadow: none;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    line-height: 1.6;
    background-color: var(--white);
    overflow-x: hidden;
    padding-top: 95px;
}

h1,
h2,
h3,
h4 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
}

/* Header & Navigation */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--white);
    padding: 5px 0;
    transition: var(--transition);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.main-header.scrolled {
    padding: 5px 0;
    box-shadow: var(--shadow);
}

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

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

.header-left,
.header-right {
    flex: 1;
}

.header-center {
    flex: 0 0 auto;
    text-align: center;
}

.mobile-br {
    display: none;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 30px;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    color: var(--primary);
    font-weight: 600;
    transition: var(--transition);
}

.nav-link:hover,
.nav-link.active {
    color: #000000;
}

.btn-quote {
    background: var(--accent);
    color: var(--white);
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    transition: var(--transition);
}

.mobile-menu-overlay,
.mobile-toggle {
    display: none;
}

.btn-quote:hover {
    background: #dcdcdc;
    /* Light grey background */
    color: #000000;
    /* Black text */
    box-shadow: none;
    transform: translateY(-2px);
}

.logo-img {
    height: 85px;
    transition: var(--transition);
}

.main-header.scrolled .logo-img {
    height: 65px;
}

.header-right {
    display: flex;
    justify-content: flex-end;
}

.contact-info {
    text-align: right;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.phone-number {
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: var(--transition);
}

.phone-number:hover {
    color: #000000;
}

.social-icons {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.social-link {
    color: var(--primary);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    /* Explicit height */
    width: 24px;
    /* Explicit width */
}

.main-header.scrolled .social-link {
    color: var(--primary);
}

.social-link:hover {
    color: var(--accent);
}

.social-link[aria-label="WhatsApp"]:hover {
    color: #25D366;
}

.social-link[aria-label="Instagram"]:hover {
    color: #E1306C;
}

/* Hero Section */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: left;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -2;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

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

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

.hero-welcome {
    font-size: 1.2rem;
    letter-spacing: 5px;
    margin-bottom: 10px;
    font-weight: 400;
}

.hero-title {
    font-size: clamp(2rem, 6vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 800;
}

.hero-divider {
    width: 100px;
    height: 5px;
    background: var(--accent);
    margin: 0 0 30px 0;
}

.hero-subtitle {
    font-size: 1.1rem;
    letter-spacing: 3px;
    margin-bottom: 40px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: none;
}

.btn-primary {
    background: var(--accent);
    color: var(--white);
    border: 2px solid var(--accent);
    /* Added explicit border for layout stability on swap */
}

.btn-primary:hover {
    background: #dcdcdc;
    /* Light grey background */
    color: #000000;
    /* Black text */
    border-color: #dcdcdc;
    /* Convert border to bg color effectively hiding it, or remove if structure allows */
    transform: translateY(-2px);
}

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

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

/* Statistics Section */
.stats-section {
    padding: 160px 0;
    background: var(--white);
    margin-top: -100px;
    /* Slightly more overlap for the longer hero */
    position: relative;
    z-index: 10;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: transparent;
    padding: 0;
    text-align: center;
}

/* Stat items styling */
.stat-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--accent);
    transition: transform 0.3s ease;
    display: inline-block;
}

.stat-item:hover .stat-number {
    transform: scale(1.1);
}

.stat-label {
    text-transform: uppercase;
    font-size: 0.9rem;
    color: var(--accent);
    letter-spacing: 2px;
    font-weight: 700;
}

/* Services Section */
.services-section {
    padding: 0;
    background: var(--white);
    max-width: 100%;
}

.services-section .container {
    max-width: 100%;
    padding: 0;
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.section-subtitle {
    color: var(--accent);
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.section-title {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 20px;
}

.section-divider {
    width: 60px;
    height: 4px;
    background: var(--accent);
    margin: 0 auto;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-bottom: 0;
    width: 100%;
}

.service-card {
    position: relative;
    padding: 0;
    text-align: center;
    border-radius: 0;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    overflow: hidden;
    aspect-ratio: 1/1;
}

.service-card:hover {
    box-shadow: var(--shadow);
}

.service-card.active {
    border: none;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5), var(--shadow);
}

.service-img-container {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
}

.service-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

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

.service-name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    z-index: 2;
    background: linear-gradient(to top, rgba(35, 35, 35, 0.95) 0%, rgba(35, 35, 35, 0.8) 60%, transparent 100%);
    text-transform: uppercase;
}

.service-card.active .service-name {
    color: var(--primary);
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 60%, transparent 100%);
    text-shadow: none;
    margin: 0;
}

/* Service Details */
.service-details-container {
    background: var(--white);
    border-radius: 0;
    padding: 80px 50px;
    box-shadow: none;
}

.service-detail {
    display: none;
    animation: fadeIn 0.5s ease;
}

.service-detail.active {
    display: block;
}

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

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

.detail-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    width: 100%;
}

.detail-image {
    width: 75%;
    aspect-ratio: 1/1;
    margin: 0 auto;
}

.detail-image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.detail-title {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--primary);
    text-transform: uppercase;
}

.detail-desc {
    margin-bottom: 30px;
    color: var(--text-light);
}

.detail-list-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.detail-list {
    list-style: none;
}

.detail-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-weight: 500;
}

.detail-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 800;
}

.detail-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

/* About Us Section */
.about-section {
    padding: 0;
    margin-top: 0;
    background: transparent;
    max-width: 100%;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    min-height: 80vh;
}

.about-section .container {
    max-width: 100%;
    padding: 0;

}

.about-content {
    display: flex;
    align-items: center;
    z-index: 10;
    padding: 60px 0 60px 0;
    margin-right: 0;
}

.about-text-bg {
    background: var(--primary);
    padding: 80px 60px 80px 60px;
    color: var(--white);
    position: relative;
    left: -120px;
    width: calc(100% + 120px);
    border-radius: 4px 0 0 4px;
    box-shadow: none;
    margin: auto 0;
    z-index: 20;
}

.about-text-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100vw;
    height: 100%;
    background: var(--primary);
    z-index: -1;
}



.about-text {
    margin-top: 0;
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 25px;
}

.about-stats {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

.about-stat {
    display: flex;
    flex-direction: column;
}

.about-stat-num {
    font-size: 2rem;
    font-weight: 800;
    color: #bdc3c7;
    /* Lighter grey */
}

.about-stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-image {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    height: 100%;
    box-shadow: none;
}

.about-slideshow {
    position: relative;
    background: #f0f0f0;
}

.about-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
    /* Always fully opaque */
    transform: translateX(100%);
    /* Start from right */
    transition: transform 1s ease-in-out;
    /* Only slide, no fade */
}

.about-img.active {
    transform: translateX(0);
    z-index: 2;
}

.about-img.exit {
    transform: translateX(-100%);
    /* Move to left */
    z-index: 1;
}


/* Testimonials Section */
.testimonials-section {
    padding: 100px 0;
    background: var(--white);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.testimonial-card {
    background: #dcdcdc;
    /* Darker medium grey */
    padding: 40px;
    border-radius: 12px;
    position: relative;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

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

.testimonial-stars {
    color: var(--accent);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.testimonial-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 30px;
    font-style: italic;
    flex-grow: 1;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    border-top: 2px solid var(--accent);
    padding-top: 15px;
}

.author-name {
    font-weight: 700;
    color: var(--primary);
    font-size: 1.1rem;
}

.author-location {
    font-size: 0.85rem;
    color: var(--text-light);
    text-transform: uppercase;
    margin-top: 4px;
}

/* Process Section */
.process-section {
    padding: 100px 0;
    background: var(--white);
    color: var(--text);
    position: relative;
    overflow: hidden;
}

/* Header Utilities */
.center-header {
    text-align: center;
    margin-bottom: 60px;
}

.center-header .section-divider {
    margin: 0 auto;
}

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

.light-text .section-subtitle {
    color: var(--accent);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.process-card {
    background: var(--white);
    /* Darker medium grey */
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* Lighter border */
    padding: 60px 40px 40px;
    /* More top padding for icon */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    position: relative;
    /* overflow: visible; allow icon to float out if desired, but image shows fully contained or overlapping edge? 
       Actually image shows icon floating ON the card but top edge. 
       Let's stick to 'visible' if we want it to break the border, but look at the image again.
       The image shows the icon INSIDE the card boundary essentially, but at the very top.
       Actually, looked at image again: icon is popping out of the top edge. so Overflow Visible is needed.
       And margin-top is needed on the card to safely space it. */
    overflow: visible;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    margin-top: 40px;
    /* Space for the icon */
    text-align: left;
    /* Text alignment according to image description/observation */
}

@media (hover: hover) {
    .process-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        border-color: rgba(0, 0, 0, 0.08);
        background: var(--primary);
        /* Swap background to dark */
    }

    .process-card:hover .process-title {
        color: var(--white);
    }

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

    .process-card:hover .process-link {
        color: var(--white);
    }

    .process-card:hover .process-icon {
        background: var(--white);
        color: var(--primary);
        transform: translateX(-50%) rotateY(180deg);
    }
}

.process-card.active-start-anim {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.08);
    background: var(--primary);
}

.process-card.active-start-anim .process-title {
    color: var(--white);
}

.process-card.active-start-anim .process-text {
    color: var(--white);
}

.process-card.active-start-anim .process-link {
    color: var(--white);
}

.process-icon {
    width: 70px;
    height: 70px;
    background: var(--accent);
    /* Dark blue background */
    border-radius: 12px;
    /* Rounded corners */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #dcdcdc;
    /* Medium grey icon color */

    /* Absolute positioning to float at top center */
    position: absolute;
    top: -35px;
    /* Half height to center on border */
    left: 50%;
    transform: translateX(-50%);

    box-shadow: 0 5px 15px rgba(60, 60, 60, 0.3);
    /* Shadow for depth */
    transition: transform 0.6s ease;
}

.process-card.active-start-anim .process-icon {
    transform: translateX(-50%) rotateY(180deg);
    background: var(--white);
    color: var(--primary);
}



.process-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--primary);
    text-align: center;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.process-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-light);
    margin-bottom: 25px;
    flex-grow: 1;
    transition: color 0.3s ease;
}

.process-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition), color 0.3s ease;
    margin-top: auto;
}

.process-link:hover {
    color: var(--primary);
    gap: 12px;
}

/* Contact Section */
.contact-section {
    padding: 40px 0 100px;
    scroll-margin-top: 95px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-intro {
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: var(--text-light);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 40px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-right: 20px;
    flex-shrink: 0;
    text-decoration: none;
    transition: var(--transition);
}

.contact-icon:hover {
    background: var(--accent);
    color: var(--white);
    transform: translateY(-2px);
}

.item-content h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--primary);
}

.item-content p {
    color: var(--text-light);
    line-height: 1.5;
}

.contact-form-block {
    background: var(--white);
    margin-top: 50px;
}

.contact-form {
    background: var(--white);
    padding: 40px;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

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

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.file-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px 15px;
    background: #f8f9fa;
    border: 1px dashed #ccc;
    border-radius: 4px;
    width: 100%;
    color: var(--text-light);
    font-size: 0.9rem;
    transition: var(--transition);
}

.file-label:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0, 0, 0, 0.05);
}

.file-label input[type="file"] {
    display: none;
}

/* Footer */
.main-footer {
    background: var(--primary);
    color: var(--white);
    padding: 80px 0 30px;
}


.footer-logo {
    width: 120px;
    height: auto;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-hours h4 {
    margin-bottom: 25px;
    font-size: 1.2rem;
    color: var(--white);
}

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

.hours-list li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    color: #bdc3c7;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.hours-list li:last-child {
    border-bottom: none;
}

.footer-contact-info {
    text-align: right;
}

.footer-contact-info h4 {
    margin-bottom: 20px;
    font-size: 1.2rem;
    color: var(--white);
}

.footer-address {
    margin-bottom: 25px;
    color: #bdc3c7;
    font-size: 1rem;
    line-height: 1.6;
}

.footer-address i {
    color: #bdc3c7;
    margin-right: 10px;
}

.footer-social-icons {
    display: inline-flex;
    gap: 15px;
}

.social-btn {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    transition: var(--transition);
    font-size: 1.2rem;
}

.social-btn:hover {
    transform: translateY(-3px);
}

.social-btn:hover:has(.fa-phone),
.social-btn[href^="tel"]:hover {
    background: var(--white);
    color: var(--primary);
}

.social-btn:hover:has(.fa-envelope),
.social-btn[href^="mailto"]:hover {
    background: #007BFF;
    color: var(--white);
}

.social-btn:hover:has(.fa-whatsapp),
.social-btn[href*="wa.me"]:hover {
    background: #25D366;
    color: var(--white);
}

.social-btn:hover:has(.fa-instagram),
.social-btn[href*="instagram"]:hover {
    background: #E1306C;
    color: var(--white);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    text-align: center;
    color: #bdc3c7;
    font-size: 0.9rem;
}

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

    .testimonials-section {
        padding-top: 50px;
        padding-bottom: 0px;
    }

    .stats-section {
        padding: 60px 0;
        /* Increased by 50% from 40px */
    }

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

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

@media (max-width: 768px) {
    body {
        padding-top: 60px;
    }

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

    .service-card {
        aspect-ratio: 4/1;
    }

    .header-left {
        display: none;
    }

    .header-right {
        display: flex;
        /* Show right section */
        justify-content: flex-end;
        align-items: center;
        /* Ensure vertical center */
        width: auto;
    }

    .mobile-hide-our {
        display: none;
    }

    .header-center {
        text-align: left;
        flex: 1;
    }

    .logo-img {
        height: 50px;
        /* Smaller logo on mobile */
    }

    .main-header.scrolled .logo-img {
        height: 45px;
    }

    .contact-info {
        gap: 15px;
    }

    .phone-number {
        display: none;
        /* Hide phone number on mobile */
    }

    .mobile-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 24px;
        /* Match icon height exactly */
        cursor: pointer;
        margin-left: 20px;
        z-index: 2001;
        align-self: center;
        /* Revert to center */
        margin-top: 0;
        /* Remove top margin */
        /* Align with social icons */
    }

    .mobile-toggle span {
        display: block;
        height: 3px;
        width: 100%;
        background-color: var(--primary);
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    .mobile-toggle.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        background-color: var(--white);
        /* White when menu is open */
    }

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

    .mobile-toggle.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background-color: var(--white);
        /* White when menu is open */
    }

    /* Mobile Menu Overlay */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--primary);
        z-index: 2000;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 40px 20px 60px;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }

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

    .mobile-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .mobile-nav-link {
        font-size: 1.5rem;
        color: var(--white);
        text-decoration: none;
        font-weight: 600;
        transition: opacity 0.3s;
    }

    .mobile-menu-logo {
        width: 120px;
        height: auto;
        filter: brightness(0) invert(1);
        margin-top: 20px;
    }

    .mobile-menu-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .mobile-social-icons {
        display: flex;
        gap: 20px;
    }

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

    .mobile-contact-text a {
        color: var(--white);
        text-decoration: none;
        font-weight: 700;
        font-size: 1.2rem;
    }

    .mobile-nav-link:hover {
        opacity: 0.8;
    }

    /* Hide desktop 'Get a quote' button on tablet/mobile */
    .nav-list .btn-quote {
        display: none;
    }

    .mobile-btn-quote {
        background-color: var(--white);
        color: var(--primary);
        /* Dark grey text */
        padding: 15px 30px;
        border-radius: 4px;
        /* Standard border radius */
        text-decoration: none;
        font-weight: 700;
        font-size: 1.5rem;
        /* Bigger font size */
        transition: transform 0.3s;
    }

    .mobile-btn-quote:hover {
        background-color: #dcdcdc;
        /* Light grey background */
        color: #000000;
        /* Black text */
        transform: scale(1.05);
    }

    .hero-title {
        font-size: 2.5rem;
        /* Adjusted per request logic if needed, or kept similar */
    }

    .hero-subtitle {
        font-size: 0.75rem;
        /* Slight increase from 0.7rem */
        letter-spacing: 1px;
    }

    .mobile-br {
        display: block;
    }

    /* Hide desktop breaks if any conflict, or just ensure mobile-br is hidden on desktop */

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

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

    .service-card {
        aspect-ratio: 1/1 !important;
        height: auto;
    }

    .stat-item:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
    }

    .detail-content {
        grid-template-columns: 1fr;
    }

    .detail-image {
        display: none;
    }

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

    .detail-text .btn {
        align-self: center;
        margin-top: 20px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        /* Significantly reduced to remove gap */
    }

    .contact-info-block .section-header {
        text-align: center !important;
        /* Force center on mobile */
    }

    .contact-intro {
        margin-bottom: 0px;
        /* Significantly reduced from 20px */
        text-align: center;
        padding: 0 20px;
    }

    .contact-form-block {
        margin-top: 10px;
    }

    /* reduce top padding if any */
    .contact-form {
        padding: 20px;
        /* Reduced from 40px */
    }

    /* Hide Contact Details on Mobile */
    .contact-details {
        display: none;
    }

    /* Mobile Footer Adjustments */
    .footer-hours {
        display: none;
    }

    .main-footer {
        padding: 40px 0 20px;
        /* Reduced from 80px 0 30px */
    }

    .desktop-br {
        display: none;
    }

    .footer-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
        /* Reduced from 40px */
        text-align: center;
        margin-bottom: 30px;
    }

    .footer-logo {
        height: auto;
        width: 140px;
        /* Increased from 110px */
        max-width: 100%;
        object-fit: contain;
    }

    .footer-about,
    .footer-contact-info {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .footer-about p {
        margin-top: 20px;
        margin-bottom: 0;
        max-width: 300px;
        /* Narrower text */
        margin-left: auto;
        margin-right: auto;
    }

    .footer-social-icons {
        justify-content: center;
        margin-top: 15px;
        /* Reduced from 20px */
        margin-left: 0;
    }

    .mobile-hide-rights {
        display: none;
    }

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

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

    .about-stat {
        align-items: center;
        text-align: center;
    }

    .about-stats {
        justify-content: center;
    }



    .about-image {
        order: -1;
    }

    .testimonials-grid,
    .process-grid {
        grid-template-columns: 1fr;
        gap: 60px;
        /* Increased spacing from 40px */
    }

    .process-card {
        width: 65%;
        margin: 0 auto;
    }

    /* Process Card Mobile Animation */
    .process-card {
        padding: 50px 30px 20px;
        /* Reduced bottom padding initially */
        min-height: auto;
        transition: all 0.5s ease;
    }

    .process-text,
    .process-link {
        max-height: 0;
        opacity: 0;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        overflow: hidden;
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }

    .process-card.active-start-anim {
        padding-bottom: 40px;
        /* Restore padding when expanded */
    }

    .process-card.active-start-anim .process-text {
        max-height: 200px;
        opacity: 1;
        margin-bottom: 25px !important;
        pointer-events: auto;
    }

    .process-card.active-start-anim .process-link {
        max-height: 50px;
        opacity: 1;
        margin-top: auto !important;
        pointer-events: auto;
    }

    /* Mobile Testimonial Carousel */
    .testimonials-grid {
        position: relative;
        min-height: 400px;
        /* Increased to prevent cropping */
        overflow: hidden;
        /* Hide slides moving out */
    }

    .testimonial-card {
        display: none;
        position: absolute;
        /* Stack them */
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    }

    .testimonial-card.active-slide {
        display: block;
        opacity: 1;
        animation: slideInFromRight 0.5s forwards;
    }

    .testimonial-card.prev-slide {
        display: block;
        opacity: 0;
        animation: slideOutToLeft 0.5s forwards;
    }

    @keyframes slideInFromRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }

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

    @keyframes slideOutToLeft {
        from {
            transform: translateX(0);
            opacity: 1;
        }

        to {
            transform: translateX(-100%);
            opacity: 0;
        }
    }

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

    .about-content {
        padding: 40px 20px;
        order: 2;
        display: block;
        /* Ensure it behaves as a block for correct width calculation */
        margin-right: 0;
    }

    .about-image {
        order: 1;
        min-height: 60vh;
        padding-bottom: 50px;
        /* Give space for overlap */
    }

    .about-text-bg {
        width: 85%;
        left: auto;
        border-radius: 4px;
        padding: 40px 30px;
        margin-top: -220px;
        z-index: 10;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        box-shadow: none;
    }

    .about-text-bg::after {
        display: none;
    }
}

.contact-link-text {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

.contact-link-text:hover {
    color: var(--accent);
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--accent);
    color: var(--white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
}

/* Services Page Specific Styles */
.page-title-section {
    padding: 135px 0 15px;
    background: var(--primary);
    color: var(--white);
    text-align: center;
    margin-top: -95px;
    /* Offset fixed header */
}

.page-title {
    font-size: 3rem;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.page-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}



.services-list-section {
    padding: 80px 0;
    background: var(--white);
}

.service-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 100px;
}

.service-row.reverse {
    flex-direction: row-reverse;
}

.service-row:last-child {
    margin-bottom: 0;
}

.service-text-col {
    flex: 1;
}

.service-text-col h2 {
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 25px;
    text-transform: uppercase;
}

.service-text-col p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-light);
    margin-bottom: 30px;
}

.service-img-col {
    flex: 1;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.service-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.service-img-col:hover .service-img {
    transform: scale(1.03);
}

@media (max-width: 992px) {
    .page-title {
        font-size: 2.5rem;
    }

    .service-row {
        gap: 40px;
        margin-bottom: 80px;
    }
}

/* Default state for titles */
.mobile-service-title {
    display: none;
}

@media (max-width: 768px) {
    .page-title-section {
        padding: 100px 0 30px;
        /* Use padding for spacing instead of margin */
        margin-top: -60px;
    }

    .services-list-section {
        padding-top: 0;
        /* Remove top padding on mobile */
    }

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

    .page-subtitle {
        margin-bottom: 0;
        /* Remove margin to prevent collapse/white gap */
    }

    .service-row {
        flex-direction: column;
        gap: 0;
        margin-bottom: 0;
    }

    .service-row.reverse {
        flex-direction: column;
    }

    .service-text-col {
        display: none;
        order: 2;
        padding: 0 10px;
        /* Add a little padding to text on mobile */
    }

    .service-img-col {
        order: 1;
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
        max-height: none;
        border-radius: 0;
        position: relative;
    }

    .service-img {
        width: 100%;
        height: 25vh;
        object-fit: cover;
    }

    .desktop-service-title {
        display: none;
    }

    .mobile-service-title {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 40px 20px 20px 20px;
        /* Extra top padding for gradient feathering */
        margin: 0;
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--white);
        z-index: 2;
        background: linear-gradient(to top, rgba(35, 35, 35, 0.95) 0%, rgba(35, 35, 35, 0.8) 60%, transparent 100%);
        text-transform: uppercase;
        font-family: 'Outfit', sans-serif;
        transition: all 0.3s ease;
    }

    .mobile-service-title.inverted {
        color: var(--primary);
        background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 60%, transparent 100%);
    }

    .service-text-col h2 {
        /* Keep any remaining styles for inheritance if needed, but main H2 is hidden */
        font-size: 1.8rem;
        margin-bottom: 15px;
    }
}

/* Products Page Styles */
.products-section {
    padding: 45px 0 30px;
    background: var(--light-bg);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.product-card {
    background: var(--white);
    border-radius: 8px;
    /* overflow: hidden; Removed to allow image extrusion */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 25px;
    z-index: 1;
    /* Establish stacking context */
    position: relative;
    width: 350px;
    /* Fixed width for desktop */
    margin: 0 auto;
    /* Center in grid cell */
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.product-img-container {
    width: 100%;
    height: 250px;
    background: #f4f4f4;
    /* Slightly darker than previous #f9f9f9 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 8px 8px 0 0;
    /* Apply radius here since parent overflow is visible */
    position: relative;
    z-index: 2;
    /* Ensure container is above content if needed, though image inside needs to be higher */
}

.product-img-container img {
    /* Removed specific sizing rules for general img tag to avoid conflicts, targeting classes instead */
    display: block;
}

.product-content {
    padding: 40px 20px 20px 20px;
    width: 100%;
}

.product-content h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 15px;
    padding: 10px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-desc {
    color: var(--text-light);
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.btn-product {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--white);
    padding: 12px 28px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    font-size: 0.9rem;
    gap: 10px;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn-product i {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-product:hover {
    background: #dcdcdc;
    color: var(--primary);
    border-color: transparent;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.btn-product:hover i {
    transform: translateX(4px);
}

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

    .product-card {
        width: 320px;
        /* Fixed width for tablet (iPad mini size approx half available width) */
    }

    .product-img-container {
        height: 220px;
    }

    .product-img-default {
        top: 63%;
    }
}

@media (max-width: 576px) {
    .products-grid {
        display: flex;
        /* Changed from grid to flex column for easier centering control */
        flex-direction: column;
        align-items: center;
        /* Center items horizontally */
        gap: 30px;
    }

    .product-card {
        width: 250px;
        /* Increased mobile width per request */
        max-width: none;
        margin: 0 auto;
    }

    .product-img-container {
        height: 170px;
        /* Decreased height */
        padding: 10px;
    }

    .product-content {
        padding: 30px 10px 15px 10px;
        /* Decreased top padding */
    }

    .product-content h3 {
        font-size: 1.1rem;
        margin-bottom: 5px;
    }

    .product-desc {
        font-size: 0.8rem;
        margin-bottom: 15px;
        line-height: 1.3;
    }

    .btn-product {
        padding: 12px 20px;
        font-size: 0.8rem;
        width: auto;
    }

    /* Small corner image on mobile */
    .product-img-hover {
        opacity: 0 !important;
        /* Default hidden */
        top: auto !important;
        left: auto !important;
        bottom: 5px;
        right: 10px;
        width: 60px !important;
        transform: none !important;
        z-index: 5;
        transition: all 0.3s ease;
        /* Animate the expansion */
    }

    /* Show miniature when focused (scroll logic) */
    .product-card.focused .product-img-hover {
        opacity: 1 !important;
    }

    .product-card.focused .product-img-container {
        background: #e6e6e6 !important;
        transition: background-color 0.3s ease;
    }

    /* Enlarge default image when focused */
    .product-card.focused .product-img-default {
        width: 75%;
        /* Slightly bigger than 70% */
        transition: width 0.3s ease;
    }

    /* Restore full hover image on interaction */
    .product-card:hover .product-img-hover {
        opacity: 1 !important;
        /* Ensure visible on tap */
        width: 80% !important;
        top: 50% !important;
        left: 50% !important;
        bottom: auto !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Removed persistent default image rule so it fades out like desktop */


}

/* Product Image Hover Effects */
.product-img-container {
    position: relative;
    /* Ensure other styles for centering are maintained or overridden safely */
}

/* Base style for both images */
.product-img-default,
.product-img-hover {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.4s ease;
    max-width: none;
    height: auto;
    object-fit: contain;
}

.product-img-default {
    top: 60%;
    /* Push down to extrude */
    width: 70%;
}

@media (max-width: 992px) {
    .product-img-default {
        top: 63%;
    }
}

.product-img-hover {
    top: 50%;
    /* Centered in container */
    width: 80%;
    /* Standard size fit for container */
}

/* Initial states */
.product-img-default {
    opacity: 1;
    z-index: 1;
    /* Lower z-index so hover can be on top */
}

.product-img-hover {
    opacity: 0;
    z-index: 3;
    /* Higher z-index to overlay */
}

/* .product-img-container::after removed per request */

/* Hover states */
.product-card:hover .product-img-default {
    opacity: 0;
    /* Fade out default image */
}

.product-card:hover .product-img-hover {
    opacity: 1;
    /* Full opacity for hover image */
}

/* Overlay trigger removed */

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Prevent body scroll interaction */
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;

    /* Flex centering */
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal.show {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: #fff;
    margin: 0;
    /* Flexbox handles centering */
    width: 100%;
    max-width: 800px;
    /* Smaller width as requested */
    max-height: 85vh;
    /* Fits on screen */
    border-radius: 8px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
    position: relative;
    transform: translateY(20px);
    /* Start slightly lower */
    transition: transform 0.3s ease;
    overflow: hidden;
    /* Clips children for border-radius */
    display: flex;
    flex-direction: column;
}

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

.modal-header {
    background: var(--primary);
    color: var(--white);
    padding: 15px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    /* Prevents shrinking */
}

.modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.close-modal {
    color: var(--white);
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s;
    line-height: 1;
    padding: 0;
}

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

.modal-body {
    padding: 0;
    /* Remove padding here so sticky header works nicely */
    overflow-y: auto;
    flex: 1;
    /* Takes all available remaining height */
}

/* Specs Table Styling */
.specs-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    font-size: 0.9rem;
}

.specs-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.specs-table thead tr th {
    background-color: #333;
    /* Darker header like reference image */
    color: #fff;
    text-align: left;
    padding: 15px 20px;
}

.specs-table th,
.specs-table td {
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.specs-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}

.specs-table tbody tr:nth-of-type(even) {
    background-color: #f8f9fa;
}

.specs-table tbody tr:last-of-type {
    border-bottom: none;
}

/* Row Hover Animation */
.specs-table tbody tr:hover {
    background-color: #e6e6e6;
    /* More visible grey */
    transform: scale(1.01);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 5;
    position: relative;
    cursor: default;
}

.specs-table th {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.specs-table td:first-child {
    text-align: left;
    font-weight: 700;
    color: #333;
}

/* Enquire Button inside Modal */
.modal-footer {
    padding: 15px 25px;
    background: #f9f9f9;
    text-align: right;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
    /* Prevents shrinking */
    z-index: 20;
}

/* Sticky First Column for Mobile Table Scrolling */
@media (max-width: 768px) {

    .specs-table th:first-child,
    .specs-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 5;
        border-right: 2px solid #e0e0e0;
        /* Visual separation */
    }

    .specs-table th:first-child {
        z-index: 15;
        /* Stays on top of everything */
    }

    /* Ensure backgrounds are solid so content doesn't show through */
    .specs-table tbody tr td:first-child {
        background-color: #fff;
    }

    .specs-table tbody tr:nth-of-type(even) td:first-child {
        background-color: #f8f9fa;
    }

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

/* Projects Page Styles */
.projects-section {
    padding: 80px 0;
    background: var(--white);
}

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

.project-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.project-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.project-card:hover .project-img {
    transform: scale(1.05);
}

.project-info {
    padding: 25px;
}

.project-info h3 {
    font-size: 1.4rem;
    color: var(--primary);
    margin-bottom: 10px;
    font-weight: 700;
}

.project-info p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .project-img {
        height: 150px;
    }
}

/* Product Name Responsive Text */
.mobile-product-text {
    display: none;
}

@media (max-width: 576px) {
    .desktop-product-text {
        display: none;
    }

    .mobile-product-text {
        display: inline;
    }
}

/* Project Lightbox Styles */
.project-lightbox {
    display: none;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
    align-items: center;
    justify-content: center;
}

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

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: var(--white);
    font-size: 50px;
    font-weight: 300;
    cursor: pointer;
    z-index: 10001;
    transition: color 0.3s ease;
    line-height: 1;
}

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

.lightbox-content-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image-container {
    flex-grow: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

#lightboxImg {
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;
    transform: translateY(30px);
}

.project-lightbox.active #lightboxImg {
    transform: translateY(0);
}

/* Fade Animation */
.lightbox-fade-out {
    opacity: 0 !important;
    transform: scale(0.98) !important;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--white);
    font-size: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10001;
}

.lightbox-prev {
    left: 40px;
}

.lightbox-next {
    right: 40px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: var(--accent-red);
}

.lightbox-prev:active,
.lightbox-next:active {
    transform: translateY(-50%) scale(0.95);
}

@media (max-width: 768px) {
    .lightbox-close {
        top: 20px;
        right: 25px;
        font-size: 40px;
    }

    .lightbox-content-wrapper {
        width: 100%;
        height: 100%;
    }

    .lightbox-prev,
    .lightbox-next {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .lightbox-prev {
        left: 15px;
    }

    .lightbox-next {
        right: 15px;
    }

    .lightbox-image-container {
        padding: 60px 10px;
    }
}

/* Mobile Sticky Footer for Services */
.mobile-sticky-footer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30vh;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.15);
    z-index: 990;
    padding: 20px 20px 15px 20px;
    border-top: 1px solid #eee;
    transition: transform 0.3s ease;
    transform: translateY(110%);
    overflow: hidden;
    /* Prevent footer scroll, handle inner content */
}

.mobile-sticky-footer .sticky-footer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-sticky-footer.active {
    transform: translateY(0);
    display: block;
}

.mobile-sticky-footer .desktop-service-title {
    display: block;
    font-size: 1.3rem;
    /* Slightly smaller for mobile footer */
    margin: 0 0 8px 0;
    color: var(--primary);
    text-transform: uppercase;
    font-weight: 700;
    flex-shrink: 0;
    padding-top: 5px;
}

.mobile-sticky-footer p {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.4;
    margin-bottom: 10px;
    flex: 1;
    /* Take remaining space */
    overflow-y: auto;
    /* Scroll text if needed */
    padding-right: 5px;
    /* Space for scrollbar */
}

.mobile-sticky-footer .btn {
    display: inline-block;
    width: auto;
    align-self: flex-start;
    flex-shrink: 0;
    margin-top: auto;
}

@media (max-width: 768px) {
    .mobile-sticky-footer {
        display: block;
        /* Logic handles active class for visibility */
    }
}