/* General Resets & Typography */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: #333;
    line-height: 1.6;
}

/* Color Variables */
:root {
    --navy-blue: #0A192F;
    --bright-orange: #ac8a00;
    --light-grey: #F4F6F8;
    --white: #FFFFFF;
}

/* Header & Nav */
.sticky-header {
    position: sticky;
    top: 0;
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    z-index: 1000;
}

.logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--navy-blue);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
}

.nav-links a {
    text-decoration: none;
    color: var(--navy-blue);
    font-weight: 600;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--bright-orange);
}

/* Buttons */
.btn-primary {
    display: inline-block;
    background-color: var(--bright-orange);
    color: var(--white);
    padding: 12px 24px;
    text-decoration: none;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-primary:hover {
    background-color: #E0693D;
}

/* Hero Section */
.hero {
    /* Fallback color if the image fails to load */
    background-color: var(--navy-blue);
    
    /* Linear gradient creates a dark overlay, followed by the background image */
    background: linear-gradient(
        rgba(10, 25, 47, 0.6), /* Dark navy blue with 60% opacity */
        rgba(10, 25, 47, 0.8)  /* Dark navy blue with 80% opacity */
    ), 
    /* Replace the URL below with your actual image path */
    url('https://images.unsplash.com/photo-1494412574643-ff11b0a5c1c3?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat;
    
    color: var(--white);
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}

.hero-content h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 20px;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* About Section */
.about {
    display: flex;
    padding: 80px 50px;
    gap: 40px;
    align-items: center;
}

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

.image-placeholder {
    background-color: #ddd;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #666;
}

.about-right h2 {
    color: var(--navy-blue);
    margin-bottom: 20px;
    font-size: 32px;
}

.trust-badges {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    font-weight: 600;
    color: var(--navy-blue);
}

/* Features Section */
.features {
    background-color: var(--light-grey);
    padding: 80px 50px;
    text-align: center;
}

.features h2 {
    color: var(--navy-blue);
    margin-bottom: 40px;
    font-size: 32px;
}

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

/* Stacking 4th item or adjusting grid for responsiveness */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
    .about {
        flex-direction: column;
    }
    .catalogue-container {
        flex-direction: column;
    }
    .footer-columns {
        flex-direction: column;
    }
}

.feature-item {
    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.feature-item .icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.feature-item h3 {
    margin-bottom: 10px;
    color: var(--navy-blue);
}

/* Catalogue Section */
.catalogue {
    padding: 80px 50px;
}

.catalogue-container {
    display: flex;
    gap: 40px;
    align-items: center;
    background-color: var(--light-grey);
    padding: 40px;
    border-radius: 8px;
}

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

.catalogue-right h2 {
    color: var(--navy-blue);
    margin-bottom: 10px;
}

.catalogue-right p {
    margin-bottom: 20px;
}

.input-group {
    margin-bottom: 15px;
    text-align: left;
}

.input-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}

.input-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.hidden {
    display: none;
}

#successMessage {
    margin-top: 20px;
    padding: 15px;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
}

.download-link {
    color: var(--navy-blue);
    font-weight: bold;
}

/* Footer Section */
footer {
    background-color: var(--navy-blue);
    color: var(--white);
    padding: 60px 50px 20px;
}

.footer-columns {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col h3 {
    margin-bottom: 20px;
    color: var(--bright-orange);
}

.footer-col ul {
    list-style: none;
}

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

.footer-col a {
    color: var(--white);
    text-decoration: none;
}

.footer-col a:hover {
    text-decoration: underline;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    font-size: 14px;
}






/* =========================================
   Mobile Optimization (max-width: 768px)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Header & Navigation Adjustments */
    .sticky-header {
        flex-direction: column;
        padding: 15px 20px;
        text-align: center;
    }
    
    .nav-links {
        margin-top: 15px;
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 2. Hero Section Typography */
    .hero-content h1 {
        font-size: 32px; /* Reduced from 48px to fit mobile screens */
    }
    
    .hero-content p {
        font-size: 16px;
    }

    /* 3. Global Section Padding */
    .about, .features, .catalogue, footer {
        padding: 50px 20px; /* Reduced side padding for mobile */
    }

    /* 4. Stacking Layouts (About, Catalogue, Footer) */
    /* This forces the 50/50 split screens and 3-column footer to stack vertically */
    .about, 
    .catalogue-container, 
    .footer-columns {
        flex-direction: column;
        text-align: center;
    }

    .about-left, .about-right, 
    .catalogue-left, .catalogue-right {
        width: 100%;
    }

    /* Adjust Trust Badges to wrap nicely on mobile */
    .trust-badges {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 5. Features Grid */
    /* Stacking into a single column on mobile */
    .features-grid {
        grid-template-columns: 1fr; 
        gap: 20px;
    }

    /* Footer adjustments for better mobile spacing */
    .footer-columns {
        gap: 30px;
    }
}





/* 1. Updated Container */
.image-placeholder {
    /* Removed the grey background and fixed height so the image dictates the size */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden; /* Ensures the image doesn't break outside the rounded corners */
}

/* 2. New Styles for the Catalogue Image */
.image-placeholder img {
    width: 100%; /* Ensures it fills the column on all screen sizes */
    height: auto; /* Maintains the original aspect ratio so it doesn't squish */
    max-height: 450px; /* Prevents the image from becoming overwhelmingly huge on large screens */
    object-fit: contain; /* Ensures the whole catalogue mockup is visible without cropping */
    display: block; 
    border-radius: 8px; /* Matches the container's rounded corners */
    
    /* Optional: Adds a subtle shadow to make the catalogue pop off the page */
    filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.15));
}



/* Styling for the About Section Image */
.about-left .image-placeholder img {
    width: 100%;
    height: 100%;
    max-height: 500px;
    object-fit: cover; /* This ensures the photo fills the space perfectly without distorting */
    border-radius: 8px;
    display: block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}





/* Products Section */
.products {
    background-color: var(--white); /* Contrasts with the grey Features section */
    padding: 80px 50px;
    text-align: center;
}

.section-header {
    margin-bottom: 50px;
}

.section-header h2 {
    color: var(--navy-blue);
    font-size: 32px;
    margin-bottom: 10px;
}

.section-header p {
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* 4 Columns for Desktop */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* Product Card Styling */
.product-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}

/* Hover Effect - Makes the card lift up slightly */
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.15);
}

.product-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.product-info {
    padding: 20px;
}

.product-info h3 {
    color: var(--navy-blue);
    font-size: 18px;
    margin-bottom: 10px;
}

.product-info p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}



/* =========================================
   Mobile Optimization for Products Section
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Reduce overall section padding for smaller screens */
    .products {
        padding: 50px 20px; 
    }

    /* 2. Scale down the section header for readability */
    .section-header h2 {
        font-size: 28px; 
        margin-bottom: 15px;
    }

    .section-header p {
        font-size: 15px;
        padding: 0 10px;
    }

    /* 3. Force the 4-column grid to stack into a single column */
    .products-grid {
        grid-template-columns: 1fr; 
        gap: 20px;
    }

    /* 4. Adjust the product image height slightly for mobile */
    .product-card img {
        height: 250px; 
    }
}


/* Logo Image Styling */
.logo img {
    max-height: 60px; /* Adjust this number up or down depending on how tall your logo is */
    width: auto;      /* Keeps the original proportions intact */
    display: block;
}




/* Update the main About container to stretch both columns equally */
.about {
    display: flex;
    padding: 80px 50px;
    gap: 40px;
    align-items: stretch; /* Changed from 'center' to 'stretch' */
}

/* Ensure the left column and placeholder take up the full height */
.about-left {
    flex: 1;
    display: flex;
}

.about-left .image-placeholder {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}

/* Let the image grow to fill the container without distorting */
.about-left .image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Removed max-height so it can match the long text */
}



/* Updated Trust Badges for better wrapping and UI */
.trust-badges {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap; /* This is the magic rule that fixes the mobile breaking! */
    gap: 12px;
    font-weight: 600;
    color: var(--navy-blue);
}

/* Styling each badge individually */
.trust-badges span {
    background-color: var(--light-grey);
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap; /* Keeps the icon and text on the same line inside the badge */
}



/* Center the badges on mobile screens */
    .trust-badges {
        justify-content: center;
    }






/* Logo Wrapper & Alignment */
.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 12px; /* Controls the space between the image and the text */
    text-decoration: none; /* Prevents the text from having a standard link underline */
}

/* Logo Image Sizing */
.logo-wrapper img {
    max-height: 40px; 
    width: auto;      
    display: block;
}

/* Company Name Text Styling */
.company-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--navy-blue);
}




/* Scale down the logo text slightly for mobile screens */
    .company-name {
        font-size: 20px;
    }




/* Social Media Icons Styling */
.socials {
    display: flex;
    gap: 15px; /* Adds perfect spacing between the logos */
    margin-top: 15px;
}

.socials a {
    color: var(--white); /* Ensures the icons match your footer text */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Hover Effect: Changes color to Bright Orange and lifts slightly */
.socials a:hover {
    color: var(--bright-orange);
    transform: translateY(-3px);
}


/* Center the social media icons horizontally on mobile */
    .socials {
        justify-content: center;
    }



@media (max-width: 768px) {
    /* ... your other mobile rules ... */

    /* Centers the flexbox logo wrapper */
    .logo-wrapper {
        justify-content: center;
    }

    /* Centers the social media icons in the footer */
    .socials {
        justify-content: center;
    }
}





/* =========================================
   1. Desktop View (Default)
   ========================================= */
.about {
    display: flex;
    padding: 80px 50px;
    gap: 40px;
    align-items: stretch; /* Forces the left column to match the text column's height */
}

.about-left {
    flex: 1;
    display: flex;
    flex-direction: column; /* Allows the inner placeholder to grow vertically */
}

.about-left .image-placeholder {
    flex: 1; /* Pushes the container to fill the full available height */
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: transparent; /* Ensures no leftover gray background is visible */
}

.about-left .image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Smart crop to ensure the image fills the space without distorting */
    display: block;
}

/* =========================================
   2. Mobile View Optimization
   ========================================= */
@media (max-width: 768px) {
    .about {
        flex-direction: column;
        padding: 50px 20px;
    }

    .about-left {
        /* Gives the image a fixed, visually appealing height on mobile so it doesn't stretch awkwardly or disappear */
        height: 350px; 
        width: 100%;
    }
}




/* =========================================================
   1. DESKTOP VIEW (3-Column Centered Layout)
   ========================================================= */
.products-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers the cards horizontally */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto; /* Centers the container on desktop screens */
    padding: 0 20px;
}

.product-card {
    flex: 1 1 300px; /* Allows cards to grow equally while keeping a reasonable base width */
    max-width: 360px; /* Keeps 3 cards nicely sized on wide screens */
    box-sizing: border-box;
}

.product-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    border-radius: 8px 8px 0 0;
}


/* =========================================================
   2. MOBILE VIEW (Stacked Single Column Layout)
   ========================================================= */
@media (max-width: 768px) {
    .products-grid {
        display: flex;
        flex-direction: column; /* Stacks all 3 cards vertically */
        align-items: center; /* Centers cards on small screens */
        gap: 20px;
        padding: 0 15px;
    }

    .product-card {
        width: 100%;
        max-width: 100%; /* Spans full width on mobile */
    }
}