:root {
    --theme-blue: #333; /* Default menu text color */
    --accent-blue: #21479e; /* UPDATED: The new blue color */
    --footer-bg-blue: #2B438D; /* Dark blue from footer screenshot */
    --red-button: #E83F41; /* Red from contact form screenshot */
}

/* Smooth scroll behavior for anchor links */
html {
    scroll-behavior: smooth;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    line-height: 1.6; 
    color: #333; 
    background-color: #f9f9f9; 
    font-size: 16px; /* Base font size for rem units (mobile first) */
    transition: overflow 0.3s ease; /* Smooth transition for body overflow */
}
body.menu-open {
    overflow: hidden; /* Prevent scrolling when mobile menu is open */
}

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

/* Announcement Bar Styling */
.announcement-bar {
    background-color: var(--accent-blue);
    color: white;
    text-align: center;
    padding: 10px 0; /* Slightly more vertical space for mobile */
    font-size: 0.95rem; /* ~15.2px for mobile */
    font-weight: 500;
    overflow: hidden; 
    height: auto; /* Allow height to adapt to content */
    position: relative; 
}
.announcement-bar span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the text */
    white-space: nowrap; 
    opacity: 0; 
    transition: opacity 0.8s ease-in-out; /* Fade transition */
}

header { background: #ffffff; color: #333; padding: 1rem 0; border-bottom: 1px solid #eaeaea; position: sticky; top: 0; z-index: 1000; }
header .container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0 20px; /* Consistent padding */
}

/* Updated Logo Styling */
.logo { 
    display: flex;
    align-items: center;
    height: 70px; 
    flex-shrink: 0; /* Prevent logo from shrinking */
    margin: auto; /* Attempt to center logo between hamburger and right edge on mobile */
}
.logo img {
    height: 100%;
    width: auto;
    min-width: 100px; 
    min-height: 60px; 
    background-color: transparent; /* Ensures main logo background is transparent */
}

/* Desktop Navigation - Hidden on Mobile */
header nav {
    display: none; /* Hidden by default for mobile */
}
header nav ul { /* Specific to desktop nav */
    list-style: none; 
    display: flex; 
    align-items: center; 
    flex-wrap: nowrap; 
    justify-content: flex-end; 
    margin: 0;
    padding: 0;
}
header nav ul li { 
    margin-left: 25px; 
    margin-bottom: 0; 
}
header nav a { /* Specific to desktop nav */
    text-decoration: none; 
    color: var(--theme-blue); 
    font-weight: 500; 
    transition: color 0.3s ease; 
    display: inline-flex;
    align-items: center;
    font-size: 1.05rem; 
    padding: 0; 
}
header nav a:hover { /* Specific to desktop nav */
    color: var(--accent-blue); 
}


/* --- Active Navigation Link Style --- */
/* This style will be applied by JavaScript to the link of the current page */
header nav a.active,
.mobile-nav-links a.active {
    color: var(--accent-blue); /* The accent blue color you already have */
    font-weight: 600; /* Make it slightly bolder to stand out */
}

/* Hamburger Menu Button - Shown on Mobile */
.hamburger-menu {
    display: block; /* Show hamburger by default for mobile */
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--theme-blue);
    padding: 0;
    line-height: 1;
    z-index: 1001; /* Ensure it's above other elements */
    flex-shrink: 0; /* Prevent it from shrinking */
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: -100%; /* Start off-screen to the left */
    width: 100%; /* Full width on smaller mobiles */
    max-width: 320px; /* Max width for sidebar on larger mobiles/tablets */
    height: 100%;
    background-color: #ffffff;
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    z-index: 1050; /* Higher z-index to cover content */
    transition: left 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    padding: 20px; /* Padding for the entire overlay content */
}
.mobile-nav-overlay.open {
    left: 0; /* Slide into view */
}

.mobile-nav-header {
    display: grid;
    grid-template-columns: auto 1fr auto; /* X | Logo | Empty for balance */
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px; /* Space before menu links */
    border-bottom: 1px solid #eee; /* Separator line */
    justify-items: center; /* Center items within their grid cells */
}
.mobile-nav-header .close-menu {
    grid-column: 1; /* First column for 'X' */
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--theme-blue);
    padding: 0;
    justify-self: start; /* Align 'X' to the start */
}
.mobile-nav-header .mobile-logo {
    grid-column: 2; /* Second column for logo */
    height: 50px; /* Adjust logo size within mobile menu */
}
.mobile-nav-header .mobile-logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
    background-color: transparent; /* FIX: Make mobile menu logo background transparent */
}
.mobile-nav-header .mobile-header-right {
    grid-column: 3; /* Third column for balance */
    width: 50px; /* Match width of close button for visual balance */
}

.mobile-nav-overlay .mobile-nav-links ul {
    list-style: none;
    display: flex;
    flex-direction: column;
}
.mobile-nav-overlay .mobile-nav-links li {
        margin-bottom: 15px; /* Spacing between menu items */
}
.mobile-nav-overlay .mobile-nav-links a {
    text-decoration: none;
    color: #333; /* Dark color to match screenshot */
    font-weight: 500; /* Adjusted to Medium */
    font-size: 1.5rem; /* Adjusted size for mobile menu */
    letter-spacing: 0.02em; /* Retained letter spacing */
    line-height: 1.3; /* Adjusted line height for readability */
    padding: 5px 0; /* Generous padding for touch */
    display: block; /* Make links block level for full clickable area */
}
.mobile-nav-overlay .mobile-nav-links a:hover {
    color: var(--accent-blue);
}

/* "Let's Talk" Button Styling (retained as general .action-button) */
.action-button {
    background-color: var(--accent-blue);
    color: white !important; 
    padding: 10px 15px; 
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    font-size: 1rem; 
}
.action-button:hover {
    box-shadow: 0 0 10px rgba(32, 51, 176, 0.6); 
}


/* Image Placeholder Styling (applies if image fails to load) */
img {
    background-color: #e0e0e0; 
    display: block; 
    text-align: center;
    color: #888; 
    font-size: 0.9em;
    font-family: sans-serif;
    object-fit: contain;
    padding: 5px; 
    min-width: 50px; 
    min-height: 50px;
}

/* Slider styles */
.slider-container { position: relative; width: 100%; max-height: 650px; overflow: hidden; }
.slider { display: flex; width: 300%; transition: transform 0.6s ease-in-out; }
.slide { width: 100%; position: relative; }
.slide img { 
    width: 100%; 
    height: 650px; 
    object-fit: cover; 
    display: block; 
}

.slider-controls { position: absolute; top: 50%; left: 15px; right: 15px; transform: translateY(-50%); display: flex; justify-content: space-between; }
.control-btn { background-color: rgba(255, 255, 255, 0.7); border: none; padding: 10px 15px; cursor: pointer; border-radius: 50%; font-size: 1.5rem; line-height: 1; transition: background-color 0.3s; }
.control-btn:hover { background-color: white; }
.slider-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; }
.dot { height: 12px; width: 12px; margin: 0 5px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; display: inline-block; cursor: pointer; transition: background-color 0.3s ease; }
.dot.active { background-color: #ffffff; }

/* --- Call to Action Banner --- */
.cta-banner {
    background-color: var(--accent-blue);
    color: white;
    padding: 50px 20px; /* Generous padding */
    text-align: center;
}
.cta-banner h2 {
    font-size: 1.875rem; /* 30px - mobile first */
    font-weight: 400; /* Regular */
    color: white; /* Title is white on blue background */
    margin-bottom: 20px;
    line-height: 1.2;
}
.cta-banner p.description {
    font-size: 1.05rem; /* Mobile-first paragraph size */
    max-width: 700px;
    margin: 0 auto 15px auto; /* Center and add space below first paragraph */
    line-height: 1.6;
}
.cta-banner p.description + p.description { /* Style for second paragraph if present */
    margin-top: 0; /* No extra top margin if it's the second paragraph */
    margin-bottom: 30px; /* Space before buttons */
}
.cta-banner .button-group {
    display: flex;
    flex-direction: column; /* Stack buttons on mobile */
    gap: 15px;
    align-items: center; /* Center buttons */
    margin-top: 30px;
}
.cta-banner .button-group a {
    font-weight: 600;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem; /* Base button text size */
    min-width: 220px; /* Ensure buttons have minimum width */
    text-align: center;
}
.cta-banner .button-group .button-primary {
    background-color: white;
    color: var(--accent-blue);
    border: 2px solid white;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.cta-banner .button-group .button-primary:hover {
    background-color: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue); 
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}
.cta-banner .button-group .button-secondary {
    background-color: var(--accent-blue);
    color: white;
    border: 2px solid white;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.cta-banner .button-group .button-secondary:hover {
    background-color: white;
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/* --- Our Services Section --- */
.our-services-section {
    padding: 60px 0;
    text-align: center;
    background-color: #f0f2f5; /* Light grey background for the section */
}
.our-services-section h2 {
    font-size: 1.875rem; /* 30px - mobile first */
    font-weight: 400; /* Regular */
    color: var(--accent-blue); /* Blue heading */
    margin-bottom: 10px;
}
.our-services-section .subtitle {
    font-size: 1rem; /* Adjusted to Regular */
    font-weight: 400;
    color: #666;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.services-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 25px; /* Spacing between cards */
    max-width: 1000px; /* Max width for the grid itself */
    margin: 0 auto; /* Center the grid */
}
.service-card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden; /* Ensures image rounded corners */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.service-card img {
    width: 100%;
    height: 350px; /* Increased fixed height for service images (mobile) */
    object-fit: cover; /* Cover the area */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    flex-shrink: 0; /* Prevent image from shrinking */
}
.service-card h3 {
    flex-grow: 1; /* Allow title area to take remaining space */
    display: flex; /* Use flexbox to vertically center text */
    align-items: center; /* Vertically center */
    justify-content: center; /* Horizontally center */
    font-size: 1.15rem; /* SMALLER Mobile service title font size */
    font-weight: 600; /* Adjusted to SemiBold */
    color: var(--accent-blue);
    padding: 15px; /* Generous padding for visual separation */
    margin: 0; /* Remove default margin */
    line-height: 1.3;
    background-color: white; /* Explicit white background for the title area */
    flex-shrink: 0; /* Prevent title from shrinking */
}

/* --- Reason to Trust Section --- */
.reason-to-trust-section {
    padding: 80px 0; /* More padding */
    text-align: center;
    background-color: #ffffff; /* White background */
}
.reason-to-trust-section h2 {
    font-size: 1.875rem; /* 30px - mobile first */
    font-weight: 400; /* Regular */
    color: var(--accent-blue);
    margin-bottom: 10px;
}
.reason-to-trust-section .subtitle {
    font-size: 1rem; /* Adjusted to Regular */
    font-weight: 400;
    color: #666;
    margin-bottom: 50px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.reason-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}
.reason-card {
    background-color: #f9f9f9; /* Light grey for reason cards */
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Ensure cards fill grid height */
}
.reason-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.reason-card .icon {
    width: 60px; /* Fixed size for icon image container */
    height: 60px;
    margin: 0 auto 15px auto; /* Center image */
    display: flex;
    align-items: center;
    justify-content: center;
}
.reason-card .icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block; /* Remove extra space below image */
    background-color: transparent; /* Ensure icon image background is transparent */
    min-width: auto; /* Override general img min-width */
    min-height: auto; /* Override general img min-height */
    padding: 0;
}
.reason-card h3 {
    font-size: 1.3rem;
    font-weight: 600; /* Adjusted to SemiBold */
    color: var(--theme-blue);
    margin-bottom: 10px;
}
.reason-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

/* --- From Idea to Reality Section --- */
/* UPDATED: Styles now match the "Formula Modulation" section from services.css */
.idea-to-reality-section {
    background-color: var(--accent-blue);
    color: white;
    padding: 80px 20px;
    text-align: center;
}
.idea-to-reality-section h2 {
    font-size: 1.875rem;
    font-weight: 400;
    color: white;
    margin-bottom: 10px;
    line-height: 1.2;
}
.idea-to-reality-section .subtitle {
    font-size: 1rem;
    font-weight: 400;
    max-width: 700px;
    margin: 0 auto 50px auto;
    line-height: 1.6;
    color: white; /* Ensure subtitle is white */
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Mobile: 2 columns */
    gap: 50px 20px; /* Matched gap: 50px vertical, 20px horizontal */
    max-width: 1200px; /* Matched max-width */
    margin: 0 auto;
}
.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.step-item .step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px; /* Matched margin */
    flex-shrink: 0; 
}
.step-item .step-number img {
    width: 80px; /* Matched icon size */
    height: 80px; /* Matched icon size */
    object-fit: contain;
    display: block;
    background-color: transparent;
    min-width: auto;
    min-height: auto;
    padding: 0;
}
.step-item .step-label { /* This is for "STEP 1", "STEP 2", etc. */
    font-size: 1rem; /* Matched font size */
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.5px; /* Matched letter spacing */
    text-transform: uppercase; /* Matched uppercase text */
    color: white;
}
.step-item h3 { /* This is for "Requirement Discussion", etc. */
    font-size: 1rem; /* Matched font size */
    font-weight: 400; /* Matched REGULAR font weight */
    line-height: 1.4;
    color: white;
    margin: 0;
}


/* --- Responsive Media Queries (Adjusted for 7 items) --- */
@media (min-width: 768px) {
    .idea-to-reality-section {
        padding: 80px 0;
    }
    .steps-grid { 
        /* Kept at 4 columns for tablet, which works well for 7 items */
        grid-template-columns: repeat(4, 1fr); 
        gap: 50px 20px; 
    }
}
@media (min-width: 1024px) {
    .steps-grid { 
        /* Kept at 7 columns for desktop to fit all items in one row */
        grid-template-columns: repeat(7, 1fr); 
        gap: 40px 15px; /* Slightly adjusted gap for 7 items */
    }
    .idea-to-reality-section h2 {
        font-size: 2.75rem;
    }
}

/* --- Product Categories Section --- */
.product-categories-section {
    padding: 80px 0;
    text-align: center;
    background-color: #ffffff; /* Explicitly white background */
}
.product-categories-section h2 {
    font-size: 1.875rem; /* 30px - mobile first */
    font-weight: 400; /* Regular */
    color: var(--accent-blue);
    margin-bottom: 10px;
}
.product-categories-section .subtitle {
    font-size: 1rem; /* Adjusted to Regular */
    font-weight: 400;
    color: #666;
    margin-bottom: 50px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.category-content {
    display: flex;
    flex-direction: column; /* Stack on mobile */
    align-items: center;
    gap: 20px; /* Reduced gap */
    max-width: 1000px;
    margin: 0 auto;
}
.category-content ol {
    list-style: none; /* Remove default list style */
    padding-left: 0;
    text-align: left; /* Align list items left */
    counter-reset: item; /* Reset counter for proper numbering */
}
.category-content ol li {
    font-size: 1.2rem; /* Big text size for categories */
    font-weight: 500; /* Adjusted to Medium */
    color: #333; /* Black color for links */
    margin-bottom: 12px; /* Adjusted gap */
    position: relative; 
    padding-left: 30px; 
    transition: color 0.3s ease; /* Smooth transition for hover */
}
.category-content ol li:hover {
    color: var(--accent-blue); /* Blue on hover */
}
.category-content ol li::before {
    content: counter(item) ". "; /* Custom number with dot */
    counter-increment: item;
    position: absolute;
    left: 0;
    font-weight: 700; /* Bold number */
    color: var(--accent-blue); /* Blue number */
}
.category-content .category-image {
    flex-shrink: 0;
    width: 100%; /* Full width on mobile */
    max-width: 450px; /* Max width for image */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.category-content .category-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Contact Form Section --- */
.contact-form-section {
    background-color: #f8f8f8; /* Light grey */
    padding: 80px 0;
    text-align: center;
}
.contact-form-section .contact-card-wrapper { /* New wrapper for the card effect */
    background-color: #ffffff; /* White background for the card */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Card shadow */
    max-width: 1000px; /* Max width of the card */
    margin: 0 auto; /* Center the card */
    padding: 40px 20px; /* Internal padding for the card */
}
.contact-form-section h2 {
    font-size: 1.875rem; /* 30px - mobile first */
    font-weight: 400; /* Regular */
    color: var(--accent-blue); /* Accent blue color */
    margin-bottom: 20px; /* Kept for space before form */
}
/* Removed description paragraphs from here */
.contact-form-section form {
    max-width: 900px; /* Increased max-width for form */
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr; /* Stack inputs on mobile */
    gap: 20px;
    padding: 0 20px;
    margin-top: 30px; /* Space between title and form fields */
}
.contact-form-section .form-group {
    text-align: left;
}
.contact-form-section label {
    display: block;
    font-size: 1rem;
    font-weight: 500; /* Adjusted to Medium */
    color: #333;
    margin-bottom: 8px;
}

/* NEW RULE: This adds the red asterisk to the required labels */
.contact-form-section label::after {
    content: ' *';
    color: var(--red-button);
    font-weight: bold;
}

.contact-form-section input[type="text"],
.contact-form-section input[type="tel"],
.contact-form-section input[type="email"],
.contact-form-section textarea {
    width: 100%;
    padding: 12px 0; /* Padding only bottom */
    border: none; /* Remove all borders */
    border-bottom: 1px solid #ccc; /* Add bottom border as underline */
    background-color: transparent; /* Ensure transparent background */
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: #333;
    transition: border-color 0.3s ease;
    border-radius: 0; /* Remove border-radius to ensure clean underline */
}
.contact-form-section input::placeholder,
.contact-form-section textarea::placeholder {
    color: #888; /* Placeholder text color */
    font-weight: 400; /* Regular weight for placeholders */
}
.contact-form-section input:focus,
.contact-form-section textarea:focus {
    border-color: var(--accent-blue);
    outline: none;
}
.contact-form-section textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-form-section .query-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    justify-content: flex-start; /* Align buttons to the left */
}
.contact-form-section .query-option-button {
    background-color: #f0f2f5;
    color: #555;
    border: 1px solid #aaa; /* Slightly darker border for contrast */
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 500; /* Adjusted to Medium */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
}
.contact-form-section .query-option-button.selected {
    background-color: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}
.contact-form-section button[type="submit"] {
    background-color: var(--accent-blue); /* Blue background */
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 8px; /* Slightly more rounded button */
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    margin-top: 20px;
    width: auto; /* Allow button to size based on content/padding */
    justify-self: center; /* Center the button in its grid cell */
}
.contact-form-section button[type="submit"]:hover {
    background-color: #1A288E; /* Slightly darker blue on hover */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* --- Footer Section --- */
footer {
    background-color: var(--footer-bg-blue); /* Dark blue footer background */
    color: white;
    padding: 60px 0 20px 0; /* Top padding and bottom padding for copyright */
    min-height: 350px; /* Min height for mobile footer */
    position: relative;
}
footer .container {
    display: grid;
    grid-template-columns: 1fr; /* Stack columns on mobile */
    gap: 40px 30px; /* Gap between stacked columns */
    text-align: center; /* Center content on mobile */
}
footer h3 {
    font-size: 1.5rem; /* Footer heading size */
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    line-height: 1.2;
}
footer h4 { /* Sub-headings in contact info */
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 10px;
    line-height: 1.2;
}
footer p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 10px;
}
footer a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}
footer a:hover {
    color: #aed9d9; /* Lighter blue on hover */
}
footer ul {
    list-style: none;
    padding: 0;
}
footer ul li {
    margin-bottom: 10px;
}
footer ul li a {
    font-size: 0.95rem;
}
footer .contact-info p {
    margin-bottom: 5px;
}
footer .social-icons {
    display: none; /* HIDDEN: Social icons are now hidden */
}
footer .footer-logo-container {
    margin-top: 40px; /* Space above footer logo */
    text-align: center;
}
footer .footer-logo-container img {
    max-height: 100px; /* NEW: Adjust footer logo size for desktop */
    width: auto;
    display: inline-block; /* Center image */
    background-color: transparent;
}
footer .copyright {
    text-align: center;
    margin-top: 40px; /* Space above copyright */
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1); /* Separator line */
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

/* --- Media Queries for Responsive Typography and Layout Adjustments --- */
@media (min-width: 768px) {
    .announcement-bar {
        font-size: 1rem; /* ~16px */
        padding: 8px 0;
        height: 35px; /* Restore fixed height for consistent animation */
    }
    .hamburger-menu { display: none; }
    header nav { display: flex; }
    .logo { margin: 0; }
    header .container { justify-content: space-between; }
    header nav ul { flex-wrap: nowrap; }
    header nav ul li { margin-left: 25px; margin-bottom: 0; }
    header nav a { font-size: 1.05rem; padding: 0; }
    .action-button { font-size: 1.1rem; padding: 10px 20px; }
    .cta-banner h2 { font-size: 2.25rem; }
    .cta-banner p.description { font-size: 1.15rem; }
    .cta-banner .button-group { flex-direction: row; justify-content: center; }
    .cta-banner .button-group a { min-width: 250px; font-size: 1.1rem; }
    .our-services-section h2, .reason-to-trust-section h2, .product-categories-section h2 { font-size: 2.25rem; }
    .our-services-section .subtitle, .reason-to-trust-section .subtitle, .product-categories-section .subtitle { font-size: 1.15rem; }
    .services-grid { grid-template-columns: 1fr 1fr; }
    .service-card img { height: 300px; }
    .service-card h3 { font-size: 1.25rem; }
    .reason-grid { grid-template-columns: 1fr 1fr; }
    .reason-card h3 { font-size: 1.45rem; }
    .reason-card p { font-size: 1rem; }
    .idea-to-reality-section h2 { font-size: 2.25rem; }
    .idea-to-reality-section .subtitle { font-size: 1.15rem; }
    .steps-grid { grid-template-columns: repeat(4, 1fr); gap: 20px 15px; }
    .step-item .step-number img { width: 90px; height: 90px; }
    .step-item h3 { font-size: 1.25rem; }
    .category-content { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 30px; }
    .category-content ol { flex: 1; max-width: 50%; }
    .category-content ol li { font-size: 1.3rem; }
    .category-content .category-image { flex: 1; max-width: 45%; }
    .contact-form-section .contact-card-wrapper { padding: 50px 40px; }
    .contact-form-section h2 { font-size: 2.25rem; }
    .contact-form-section form { grid-template-columns: 1fr 1fr; }
    .contact-form-section .form-group:nth-of-type(4), .contact-form-section .form-group:nth-of-type(5) { grid-column: 1 / -1; }
    .contact-form-section button[type="submit"] { max-width: 300px; }
    .contact-form-section .query-option-button { font-size: 1rem; }
    footer { min-height: 400px; }
    footer .container { grid-template-columns: repeat(2, 1fr); text-align: left; }
    footer .social-icons { display: none; }
    footer .footer-logo-container { max-height: 80px; grid-column: 1 / -1; margin-top: 20px; text-align: center; }
    footer .copyright { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    .announcement-bar { font-size: 1.1rem; }
    header nav a { font-size: 1.1rem; }
    .action-button { font-size: 1.15rem; }
    .cta-banner h2 { font-size: 2.75rem; }
    .cta-banner p.description { font-size: 1.25rem; }
    .cta-banner .button-group { gap: 25px; }
    .cta-banner .button-group a { min-width: 280px; font-size: 1.15rem; }
    .our-services-section h2, .reason-to-trust-section h2, .product-categories-section h2 { font-size: 2.75rem; line-height: 1.1; }
    .our-services-section .subtitle, .reason-to-trust-section .subtitle, .product-categories-section .subtitle { font-size: 1.25rem; }
    .services-grid { grid-template-columns: repeat(4, 1fr); }
    .service-card img { height: 270px; }
    .service-card h3 { font-size: 1.35rem; }
    .reason-grid { grid-template-columns: repeat(3, 1fr); }
    .reason-card h3 { font-size: 1.55rem; }
    .reason-card p { font-size: 1.05rem; }
    .idea-to-reality-section h2 { font-size: 2.75rem; }
    .idea-to-reality-section .subtitle { font-size: 1.25rem; }
    .steps-grid { grid-template-columns: repeat(7, 1fr); gap: 20px 10px; }
    .step-item .step-number img { width: 100px; height: 100px; }
    .step-item h3 { font-size: 1.35rem; }
    .category-content ol li { font-size: 1.4rem; }
    .category-content .category-image { max-width: 400px; }
    .contact-form-section .contact-card-wrapper { padding: 60px; }
    .contact-form-section h2 { font-size: 2.75rem; }
    .contact-form-section form { grid-template-columns: repeat(3, 1fr); }
    .contact-form-section button[type="submit"] { max-width: 350px; }
    footer { min-height: 500px; }
    footer .container { grid-template-columns: repeat(4, 1fr); }
    footer .footer-col { text-align: left; }
    footer .social-icons { display: none; }
    footer .footer-logo-container { max-height: 100px; grid-column: span 1; order: 5; margin-top: 0; text-align: left; }
    footer .copyright { grid-column: 1 / -1; order: 6; }
}