/* =================================== */
/* 1. GLOBAL VARIABLES & THEMES        */
/* =================================== */

/* Custom properties for color themes (Dark Theme Defaults) */
:root {
    /* ------------------------------------------------------------- */
    /* 🌟 FIX: Declare the color scheme as 'dark' or 'light dark'. 
       'dark' tells the browser that this page handles dark mode, 
       so DO NOT apply its own algorithmic darkening.
       'light dark' means you support both and let the browser decide.
       Since your defaults are dark, we use 'dark' to prevent inversion.
    */
    color-scheme: dark;
    /* ------------------------------------------------------------- */
    --primary-color: #007bff; /* A nice blue for buttons/links */
    --secondary-color: #28a745; /* A complementary color */

    --background-color: #121212;
    --text-color: #e0e0e0;
    --card-background: #1e1e1e;
    --border-color: #333333;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --hover-background: #252525;
}

/* Light Theme (Overrides for users who prefer light mode) */
@media (prefers-color-scheme: light) {
    :root {
        /* This override is still necessary if you want to support users 
           with light mode enabled on their system. */
        --background-color: #f8f9fa;
        --text-color: #212529;
        --card-background: #ffffff;
        --border-color: #dddddd;
        --shadow-color: rgba(0, 0, 0, 0.1);
        --hover-background: #f1f1f1;
    }
}

/* =================================== */
/* 2. BASE STYLES & TYPOGRAPHY         */
/* =================================== */

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

body {
    font-family: Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s; /* Smooth theme transition */
    cursor: auto;
}

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

h1, h2, h3 {
    color: var(--text-color);
    margin-bottom: 0.5em;
}

/* H2 Centering (For section headings) */
h2 {
    text-align: center;
    margin: 0 auto 40px auto;
    font-size: 2.2em;
    border-bottom: 2px solid var(--primary-color);
    max-width: 400px;
    padding-bottom: 5px;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s;
}

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

/* Cursor Rule */
a, .button, .clickable-image {
    cursor: url('images/hammer.cur') 10 10, pointer;
}

/* --- Buttons --- */
.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.1s;
    text-align: center;
}

.button:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
}

.inquire-button {
    background-color: var(--secondary-color);
}

.inquire-button:hover {
    background-color: #228b3f;
}

/* =================================== */
/* 3. LAYOUT SECTIONS                  */
/* =================================== */

/* --- Header & Navigation --- */
header {
    background-color: var(--card-background);
    box-shadow: 0 2px 4px var(--shadow-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.logo a {
    color: var(--text-color);
}

nav h1 {
    font-size: 1.5em;
    margin-bottom: 0;
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: var(--text-color);
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
}

nav ul li a:hover {
    background-color: var(--hover-background);
    color: var(--primary-color);
}

/* --- Hero Section --- */
.hero {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--card-background), var(--background-color));
}

.hero-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.hero-video-column {
    text-align: center;
}

.hero-video-column video {
    width: 100%;
    /* Reduced max-width from 450px to 350px */
    max-width: 350px;
    border-radius: 12px;
    box-shadow: 0 4px 15px var(--shadow-color);
}

.video-caption {
    margin-top: 10px;
    font-size: 0.9em;
    color: var(--text-color);
}

/* --- LOGO STYLES --- */

/* Container to center the logo */
.brand-identity {
    display: flex;
    flex-direction: column; /* Set to column to center the logo alone */
    align-items: center; /* Centers the logo horizontally */
    gap: 15px;
    margin: 0 0 15px 0;
    padding: 0;
}

/* Styling for the Logo Image */
.logo-image {
    /* *** LOGO SIZE SET TO 700PX *** */
    width: 700px;
    height: auto;
    margin-bottom: 0;
}

/* The .logo-caption rule has been REMOVED */
/* --- END LOGO STYLES --- */

.hero-text-column h2 {
    font-size: 3em;
    line-height: 1.1;
    text-align: left;
    border-bottom: none;
    /* Adjusted margin to account for new logo placement */
    margin: 5px 0 20px 0;
    max-width: none;
}

.hero-text-column p {
    margin-top: 0;
}

/* --- Project Grid --- */
#projects {
    padding: 40px 20px;
}

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

.project-card {
    background-color: var(--card-background);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px var(--shadow-color);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px var(--shadow-color);
}

.project-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.project-card p {
    margin-bottom: 10px;
    font-size: 0.9em;
    flex-grow: 1;
}

.card-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    justify-content: center;
}


/* --- Products Section --- */
#products {
    padding: 40px 20px;
    background-color: var(--hover-background);
}

.product-list {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    padding-top: 20px;

    max-width: 1100px;
    margin: 0 auto;
}

.product-item {
    background-color: var(--card-background);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px var(--shadow-color);
    transition: transform 0.3s;
    text-align: center;
    max-width: 350px;
    min-width: 280px;
}

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

.product-item-image {
    height: 250px;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.product-link {
    margin-top: 10px;
}


/* --- Testimonials Section --- */
#testimonials {
    padding: 40px 20px;
}

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

.testimonial-card {
    background-color: var(--card-background);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px var(--shadow-color);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-card p {
    flex-grow: 1;
    margin-bottom: 15px;
}


/* --- Contact & CTA Sections --- */
#contact {
    padding: 40px 20px;
    text-align: center;
    background-color: var(--hover-background);
}

.contact-details {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    font-size: 1.1em;
}

.contact-details li {
    margin: 10px 0;
}

.cta-section {
    padding: 50px 20px;
    text-align: center;
    background-color: var(--primary-color);
    color: white;
}

.cta-section h2, .cta-section p {
    color: white;
}

.cta-button {
    background-color: white;
    color: var(--primary-color);
    margin-top: 20px;
}

.cta-button:hover {
    background-color: #f1f1f1;
    color: var(--secondary-color);
}

/* =================================== */
/* 4. UTILITIES & MODALS               */
/* =================================== */

/* --- Modal Styles --- */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
    padding-top: 60px;
}

.modal-content {
    background-color: var(--card-background);
    margin: 5% auto;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    width: 90%;
    max-width: 900px;
    position: relative;
    box-shadow: 0 4px 20px var(--shadow-color);
}

.close-button {
    color: #aaaaaa;
    float: right;
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    z-index: 2001;
}

.close-button:hover,
.close-button:focus {
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
}

/* Modal Gallery Images (Projects/Products) */
.gallery-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding-top: 20px;
}

.gallery-photo {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.2s;
}

.gallery-photo:hover {
    transform: scale(1.02);
}

/* --- Scrollable Testimonial Gallery (Slider) --- */
.scrolling-wrapper {
    overflow: hidden;
    white-space: nowrap;
    margin-top: 20px;
    border-radius: 8px;
}

.image-track {
    display: flex;
    transition: transform 0.3s ease-out;
}

.scroll-photo {
    flex: 0 0 100%; /* Take up the full width of the wrapper at each stop */
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    border-radius: 8px;
    margin-right: 15px;
}

/* The input range slider styling */
.carousel-slider {
    width: 100%;
    margin: 20px 0;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    background: var(--border-color);
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
}

.carousel-slider:hover {
    opacity: 1;
}

.carousel-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
}

.carousel-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
}

/* =================================== */
/* 5. FOOTER                           */
/* =================================== */

footer {
    text-align: center;
    padding: 20px;
    background-color: var(--card-background);
    border-top: 1px solid var(--border-color);
    font-size: 0.9em;
}

/* =================================== */
/* 6. MEDIA QUERIES (RESPONSIVENESS)   */
/* =================================== */

@media (max-width: 900px) {
    .hero-content-grid {
        /* Stack columns vertically */
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    /* On smaller screens, the logo must be prevented from getting too wide,
       so we cap it at 100% of its container. */
    .logo-image {
        width: 100%;
        max-width: 300px; /* A reasonable max size for mobile */
    }

    .hero-text-column h2 {
        /* Center text when on mobile */
        text-align: center;
        margin-top: 20px;
    }

    nav {
        flex-direction: column;
        padding: 10px 20px;
    }

    nav h1 { /* Targeting h1 directly since you don't use .logo class */
        margin-bottom: 10px;
    }

    nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 10px;
    }

    nav ul li {
        margin: 5px 10px;
    }

    /* Ensure brand identity still centers the logo on mobile */
    .brand-identity {
        flex-direction: column;
        gap: 5px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 10px;
    }

    h2 {
        font-size: 1.8em;
    }

    .project-grid, .testimonial-grid {
        gap: 20px;
    }

    .project-card, .product-item, .testimonial-card {
        padding: 15px;
    }

    .card-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .button {
        width: 100%;
    }
}