/* Variables */
:root {
    --primary-green: #1c6c4d;
    --primary-beige: #fbfbf3;
    --secondary-beige: #e8e8d0;
    --text-dark: #2c3e50;
    --text-light: #ffffff;
    --accent-gold: #d4af37;
    --font-main: 'Outfit', sans-serif;
    --transition-speed: 0.3s;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    color: var(--text-dark);
    background-color: var(--primary-beige);
    line-height: 1.6;
    overflow-x: hidden;
}

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

ul {
    list-style: none;
}

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

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

.section {
    padding: 80px 0;
}

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

    .section-title {
        font-size: 2rem;
        margin-bottom: 40px;
    }
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 60px;
    color: var(--primary-green);
    position: relative;
    font-weight: 700;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--accent-gold);
    margin: 15px auto 0;
}

.btn-primary {
    display: inline-block;
    background-color: var(--primary-green);
    color: var(--text-light);
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
}

.btn-primary:hover {
    background-color: #145239;
    transform: translateY(-2px);
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(245, 245, 220, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 15px 0;
    padding: 15px 0;
    transition: padding var(--transition-speed), background-color var(--transition-speed), transform 0.3s ease-in-out;
    /* Added transform transition */
}

/* .header.scrolled is handled by JS for padding change in original design,
   but we can keep the class if we want, or revert to the JS style manipulation.
   The original JS manipulated style directly. I updated JS to use class.
   I should update style.css to support the class based approach but with original look. */
.header.scrolled {
    padding: 10px 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

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

.logo img {
    height: 50px;
    width: auto;
}

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

.nav-list a {
    font-weight: 500;
    color: var(--primary-green);
    font-size: 1rem;
}

.nav-list a:hover {
    color: var(--accent-gold);
}

.btn-nav {
    border: 2px solid var(--primary-green);
    padding: 8px 20px;
    border-radius: 4px;
}

.btn-nav:hover {
    background-color: var(--primary-green);
    color: var(--text-light) !important;
}

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

.mobile-menu-btn span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #2dd4a4;
    /* Light Green for visibility on dark hero */
    transition: var(--transition-speed);
}

/* Hero Section */
.hero {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.hero-slider {
    height: 100%;
    position: relative;
}

.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;
    /* Smoother fade */
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide.active {
    opacity: 1;
    z-index: 1;
}

.slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Slightly darker overlay for better text contrast */
}

.slide-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--text-light);
    max-width: 800px;
    padding: 0 20px;
    /* Remove animation here, handle via active state for re-triggering if needed, 
       but simple fade is requested. We can keep fadeInUp for initial load or slide change */
}

.slide.active .slide-content {
    animation: fadeInUp 1s ease-out 0.5s both;
}

.slide-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--accent-gold);
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.3s both;
}

.slide-content h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.slide-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.slider-controls {
    position: absolute;
    bottom: 30px;
    right: 50px;
    z-index: 10;
    display: flex;
    gap: 10px;
}

.slider-controls button {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--text-light);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition-speed);
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-controls button:hover {
    background: var(--primary-green);
    border-color: var(--primary-green);
}

/* Services Section */
.services {
    background-color: var(--secondary-beige);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Reduced min-width */
    gap: 30px;
}

.service-card {
    background: var(--text-light);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.service-image {
    height: 200px;
    overflow: hidden;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

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

.service-info {
    padding: 25px;
}

.service-info h3 {
    color: var(--primary-green);
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.service-info p {
    color: #666;
    font-size: 0.95rem;
}

/* Clients Section */
.clients {
    background-color: var(--secondary-beige);
}

.clients-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    align-items: center;
    justify-items: center;
}

@media (max-width: 1024px) {
    .clients-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 40px;
        align-items: center;
        justify-items: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .clients-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

.clients-grid img {
    width: 140px;
    /* Fixed width for uniformity */
    height: 80px;
    /* Fixed height for uniformity */
    object-fit: contain;
    /* Scale within box */
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all var(--transition-speed);
}

.clients-grid img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Promise & Contact Section */
.promise-contact {
    background: linear-gradient(rgba(28, 108, 77, 0.9), rgba(15, 61, 43, 0.95)), url('../images/production-bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--primary-beige);
    padding: 100px 0;
}

.promise-contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.promise-column h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: var(--accent-gold);
}

.promise-column p {
    font-size: 1.2rem;
    line-height: 1.8;
    opacity: 0.9;
}

.contact-column h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    color: var(--primary-beige);
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 40px;
    border-radius: 10px;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--primary-green);
    font-weight: 500;
}

.contact-form label {
    color: var(--primary-beige);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: var(--font-main);
    font-size: 1rem;
    transition: border-color var(--transition-speed);
}

.contact-form input,
.contact-form textarea {
    background: rgba(255, 255, 255, 0.9);
    border: none;
}

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

.contact-form input:focus,
.contact-form textarea:focus {
    background: #fff;
}

.btn-submit {
    width: 100%;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .promise-contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* Footer */
.footer {
    background: #e8e8d0;
    /* Beige base */
    color: #1c6c4d;
    /* Dark green text */
    padding: 80px 0 30px;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Fallback pattern or gradient if image fails */
    background: radial-gradient(circle at 50% 50%, rgba(28, 108, 77, 0.05) 2px, transparent 2px);
    background-size: 20px 20px;
    opacity: 0.5;
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 1;
}

.footer-logo img {
    height: 80px;
    width: auto;
    /* Ensure no unwanted background or filters */
    background: transparent;
}

.footer-address {
    text-align: center;
    font-size: 1rem;
    line-height: 1.6;
    opacity: 1;
    font-weight: 500;
}

.footer-links {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    /* Allow wrapping */
    justify-content: center;
}

.footer-links a {
    color: #1c6c4d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: #d4af37;
    text-decoration: none;
}

.footer-copy {
    font-size: 0.85rem;
    border-top: 1px solid rgba(28, 108, 77, 0.1);
    padding-top: 30px;
    width: 100%;
    text-align: center;
    color: rgba(28, 108, 77, 0.7);
}

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

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

/* Responsive */
@media (max-width: 768px) {
    .header-container {
        padding: 0 20px;
    }

    .mobile-menu-btn {
        display: flex;
        z-index: 1001;
    }

    .nav-list {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background-color: #0d2e23;
        /* Darker Green Background */
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        /* Left Align */
        padding-left: 40px;
        /* Add padding */
        transition: right var(--transition-speed);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    }

    .nav-list a {
        color: var(--primary-beige);
        /* Beige Text */
        font-size: 1.2rem;
    }

    .nav-list .btn-nav {
        border-color: var(--primary-beige);
        color: var(--primary-beige);
        margin-top: 20px;
    }

    .nav-list .btn-nav:hover {
        background-color: var(--primary-beige);
        color: var(--primary-green) !important;
    }

    .nav-list.active {
        right: 0;
    }

    .slide-content h1 {
        font-size: 2.5rem;
    }

    .slider-controls {
        right: 50%;
        transform: translateX(50%);
        bottom: 20px;
    }
}