:root {
    /* "Wood & Walnut" Premium Palette */

    /* Backgrounds */
    --bg-main: #f0d08b;
    /* Golden Oak (Base) */
    --bg-hero: #f1f1f1;
    /* Deep Golden Oak (Hero) */
    --bg-secondary: rgb(255 237 182 / 60%);
    /* Pale Wood (Sections) */

    /* Text Colors */
    --text-primary: #4E342E;
    /* Dark Walnut (Main Text) */
    --text-secondary: #3E2723;
    /* Darker Brown (Body Text for contrast) */
    --text-hero: #3E2723;
    /* Dark Brown (Hero Text - changed from white) */

    /* Accents */
    --accent-gold: #4E342E;
    /* Dark Walnut (Primary Brand Color) */
    --accent-gold-hover: #3E2723;
    /* Even Darker Walnut (Hover) */
    --accent-light: #F5E6D3;
    /* Light Cream (Text on dark buttons) */

    /* Structural */
    --header-height: 90px;
    --container-width: 1100px;
    --border-radius: 4px;
    /* Slightly sharper for a "carpentered" look */

    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Shadows */
    --shadow-soft: 0 10px 30px rgba(62, 39, 35, 0.1);
    /* Brown-tinted shadow */
    --shadow-hover: 0 15px 35px rgba(62, 39, 35, 0.2);
}

/* Base Reset & Setup */
/* Base Reset & Setup */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Montserrat:wght@400;700;900&display=swap');

body {
    font-family: var(--font-body);
    color: var(--text-primary);
    background-color: var(--bg-main);
    line-height: 1.7;
    overflow-x: hidden;
    margin: 0;
}

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

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

h1 {
    font-size: 3.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2.5rem;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 3rem;
}

h3 {
    font-size: 1.5rem;
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

p {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

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

.section {
    padding: 1rem 0;
}

/* Header */
header {
    /* background: rgba(216, 164, 115, 0.95); */
    background: url('../assets/img/back2800x150.webp') center/cover no-repeat;
    /* Wood tone transparency */
    /* backdrop-filter: blur(10px); */
    border-bottom: 1px solid rgba(78, 52, 46, 0.1);
    height: var(--header-height);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03);
    border-bottom: 4px solid #5c3c00;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 10px;
}

.logo {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.logo img {
    height: 48px;
    width: 48px;
}

/* Desktop Nav */
.desktop-nav ul {
    display: flex;
    gap: 3rem;
    align-items: center;
}

.desktop-nav a {
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-primary);
    position: relative;
}

.desktop-nav a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-gold);
    transition: width 0.3s ease;
}

.desktop-nav a:hover::after,
.desktop-nav a.active::after {
    width: 100%;
}

/* Base styles for Mobile Nav Overlay (hidden by default on desktop) */
#nav-overlay {
    display: none;
}

.lang-switch {
    border: 1px solid var(--text-secondary);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* Rotating Animation */
.rotate-infinite {
    animation: rotate 12s linear infinite;
}

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

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

/* Hero Section - Redesigned */
.hero {
    background-color: var(--bg-hero);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding-top: var(--header-height);
    padding-bottom: 0;
    overflow: hidden;
    min-height: 600px;
}

/* Hero for inner pages - less content, can be shorter */
.hero.hero-inner {
    min-height: auto;
    padding-top: var(--header-height);
    padding-bottom: 0;
}

/* Portfolio card styles */
.portfolio-card {
    display: block;
    text-decoration: none;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease;
}

.portfolio-card:hover {
    transform: translateY(-12px);
}

.portfolio-card>div {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.5s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.portfolio-card:hover>div {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.portfolio-card img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), filter 0.5s ease;
}

.portfolio-card:hover img {
    transform: scale(1.15);
    filter: brightness(0.85) saturate(1.1);
}

/* Portfolio card overlay */
.portfolio-card .card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3rem 4rem 2rem 2rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
    transition: padding 0.4s ease, background 0.4s ease;
}

.portfolio-card:hover .card-overlay {
    padding-bottom: 2.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.65) 60%, transparent 100%);
}

.portfolio-card .card-overlay h3 {
    color: white;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    transform: translateY(0);
    transition: transform 0.4s ease;
}

.portfolio-card:hover .card-overlay h3 {
    transform: translateY(-6px);
}

.portfolio-card .card-overlay p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0.6rem 0 0;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.3px;
    opacity: 0.9;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: translateY(0);
}

.portfolio-card:hover .card-overlay p {
    opacity: 1;
    transform: translateY(-4px);
}

/* Arrow icon on hover */
.portfolio-card .card-overlay::after {
    content: '→';
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    color: white;
    font-size: 1.8rem;
    font-weight: 300;
    opacity: 0;
    transform: translateX(-15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.portfolio-card:hover .card-overlay::after {
    opacity: 1;
    transform: translateX(0);
}


.hero-corner-image {
    position: absolute;
    top: 50%;
    /* Centered vertically */
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 600px;
    width: 80%;
    height: auto;
    z-index: 1;
    opacity: 0.8;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 2;
    background-color: rgb(255 237 182 / 60%);
    backdrop-filter: blur(0px);
    /* Blur background behind it */
    padding: 6rem;
    border-radius: var(--border-radius);
    /* Full width/height adjustments */
    width: 100%;
    height: 100%;
    max-width: none;
    /* Override global container max-width */
    /* Center content within the full-size container */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Add a subtle decorative pattern via CSS gradients */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    /* Lighten center */
    pointer-events: none;
}

.hero h1 {
    color: var(--text-hero);
    max-width: 800px;
}

.hero p {
    color: var(--text-hero);
    font-size: 1.4rem;
    max-width: 600px;
    margin: 0 auto 3rem auto;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 40px;
    background-color: var(--accent-gold);
    color: var(--accent-light);
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(62, 39, 35, 0.3);
    background-color: var(--accent-gold-hover);
}

/* Cards (Process & Testimonials) */
.process-grid,
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.step-card {
    background: #FAF3E0;
    /* Very light parchment/cream for contrast */
    padding: 3rem 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.step-card h3 {
    color: var(--accent-gold);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

/* Material Cards with Background Images */
.material-card {
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 0;
    overflow: hidden;
    min-height: 250px;
}

.material-card .material-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 237, 182, 0.7);
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background 0.3s ease;
}

.material-card:hover .material-overlay {
    background: rgba(255, 237, 182, 0.6);
}

.material-card h3 {
    color: var(--text-primary);
}

.material-card p {
    color: var(--text-primary);
}

/* Testimonials Slider */
.testimonials-slider {
    overflow: hidden;
    position: relative;
}

.testimonials-track {
    display: flex;
    transition: transform 1s ease-in-out;
}

.testimonial-slide {
    min-width: 33.333%;
    padding: 0 0.75rem;
    box-sizing: border-box;
}

.testimonial-slide .step-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stars {
    color: #f5a623;
    font-size: 1.3rem;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.testimonial-text {
    font-style: italic;
    margin-bottom: 1rem;
    line-height: 1.6;
    flex-grow: 1;
}

.testimonial-author {
    font-weight: bold;
    opacity: 0.8;
    margin: 0;
}

.testimonial-date {
    font-size: 0.85rem;
    opacity: 0.5;
    margin-top: 0.5rem;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1.5rem;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background 0.3s;
}

.slider-dot.active {
    background: var(--accent-gold);
}

@media (max-width: 992px) {
    .testimonial-slide {
        min-width: 50%;
    }
}

@media (max-width: 576px) {
    .testimonial-slide {
        min-width: 100%;
    }
}

/* Footer */
footer {
    background-color: var(--text-primary);
    /* Dark footer */
    color: var(--bg-main);
    padding: 5rem 0 2rem 0;
}

footer h3 {
    color: var(--bg-main);
    /* Light text on dark footer */
}

footer p,
footer a {
    color: rgba(255, 255, 255, 0.7);
}

footer a:hover {
    color: var(--bg-secondary);
}

/* Forms */
input,
textarea,
select {
    width: 100%;
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-gold);
}

/* Mobile Menu & Burger */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    z-index: 2000;
}

.mobile-menu-btn span {
    display: block;
    width: 30px;
    height: 2px;
    background-color: var(--text-primary);
    transition: 0.3s;
}

/* Mobile Nav Overlay */
.mobile-logo-container {
    display: none;
    /* Hidden by default */
}

/* Close Button in Mobile Menu */
.menu-close-btn {
    display: none;
    /* Only visible in mobile menu */
    position: absolute;
    top: 30px;
    right: 30px;
    background: none;
    border: none;
    font-size: 3rem;
    color: var(--text-hero);
    cursor: pointer;
}

@media (max-width: 768px) {

    /* Hero responsive adjustments */
    .hero {
        min-height: auto;
        padding-top: var(--header-height);
        padding-bottom: 0;
    }

    .hero .container {
        padding: 2rem 1rem;
    }

    .hero h1 {
        font-size: 1.8rem;
        line-height: 1.3;
    }

    .hero p {
        font-size: 0.95rem;
    }

    /* Stack buttons vertically on mobile */
    .hero .container>div[style*="flex-wrap"] {
        flex-direction: column;
        gap: 0.8rem;
    }

    .hero .btn {
        width: 100%;
        justify-content: center;
        padding: 0.9rem 1.5rem;
        font-size: 0.9rem;
    }

    /* Adjust Typography */
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

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

    /* Header stays on top */
    header {
        z-index: 2000;
        /* Ensure header is above the mobile menu */
    }

    .desktop-nav {
        display: none;
    }

    /* Mobile Nav Overlay */
    #nav-overlay {
        position: fixed;
        /* Start from just below the header */
        top: 35px;
        left: 0;
        width: 100vw;
        height: 100vh;
        /* Full height */
        background-color: var(--bg-main);
        /* Light background */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        /* Align from top */
        padding-top: calc(var(--header-height) + 2rem);
        /* Offset by header height */
        z-index: 1500;
        /* Below header (2000) but above content */

        /* Animation State: Hidden (Up) */
        transform: translateY(-100%);
        opacity: 0;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s;
    }

    #nav-overlay.open {
        /* Animation State: Visible (Down) */
        transform: translateY(0);
        opacity: 1;
    }

    /* Inner Container for Menu Items */
    #nav-overlay ul {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        text-align: center;
        list-style: none;
        /* Reset list style */
        padding: 0;
        /* Reset padding */
    }

    #nav-overlay a {
        text-decoration: none;
        /* Reset text decoration */
        font-size: 1.5rem;
        color: var(--text-primary);
        /* Dark text */
        font-family: var(--font-heading);
        font-weight: 700;
        transition: color 0.3s ease;
    }

    #nav-overlay a:hover {
        color: var(--accent-gold);
    }

    #nav-overlay a.active {
        color: var(--accent-gold);
    }

    .lang-switch {
        border-color: var(--text-primary);
    }

    /* Logo inside Mobile Menu */
    .mobile-logo-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 3rem;
    }

    .mobile-logo-container img {
        width: 80px;
        height: 80px;
        margin-bottom: 1rem;
    }

    .mobile-logo-text {
        color: var(--text-primary);
        /* Dark text */
        font-family: var(--font-heading);
        font-size: 1.5rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    /* Close button inside menu is redundant if header is visible, 
       but we keep it just in case, though the user asked to "leave header". 
       Usually if header is visible, the burger button turns into X.
       Let's hide the internal close button to reduce clutter. */
    .menu-close-btn {
        display: none;
    }
}

/* Brands Section Styling */
.brands-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin: 2rem 0;
}

.brand-tag {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(78, 52, 46, 0.1);
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: var(--shadow-soft);
    cursor: default;
}

.brand-tag:hover {
    background: var(--bg-main);
    transform: translateY(-5px) scale(1.05);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent-gold);
    color: var(--text-secondary);
}