/* --- GLOBAL STYLES --- */
/* A foundational reset to ensure consistent box-sizing and remove default browser margins/paddings. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base body styles: Defines default font family, text color, and line height for the entire document. */
body {
    font-family: Poppins,sans-serif;
    color: #555; /* Primary paragraph text color; set to a dark grey for readability. */
    background-color: #fff; /* Overall background color of the website. */
    line-height: 1.6; /* Standard line height for improved readability. */
}

/* Headings (h1, h2, h3): Sets a default color and font weight for all main heading elements. */
h1,h2,h3 {
    color: #000305; /* Default dark color for headings, chosen for strong contrast. */
    font-weight: 600; /* Medium-bold weight for visual emphasis. */
}

/* Links (Anchor tags): Defines default styling for all hypertext links. */
a {
    text-decoration: none; /* Removes default underlines from links. */
    color: #00008b; /* Lighter pastel blue for general links, complementing the theme. */
}

/* Reusable Section Heading: A utility class for consistent styling of main section titles (h2). */
.section-heading {
    font-size: 2.2rem; /* Large font size for prominent section titles. */
    margin-bottom: 40px; /* Generous spacing below the heading. */
    text-align: center; /* Centers the heading text. */
    color: #00008b; /* A dark pastel blue for section titles, ensuring visibility. */
}

/* --- HEADER (Main Navigation Bar) --- */
/* Styles for the persistent header bar at the top of every page, containing the logo and navigation. */
.main-header {
    background: linear-gradient(90deg,#fff,#00008b); /* Global Header Background: White to Blue Gradient. */
    display: flex; /* Utilizes Flexbox for layout control of its direct children. */
    justify-content: space-between; /* Distributes space between logo and navigation. */
    align-items: center; /* Vertically aligns items in the header. */
    padding: 15px 30px; /* Internal spacing within the header. */
    position: sticky; /* Makes the header sticky at the top on scroll. */
    top: 0; /* Ensures it sticks to the very top. */
    z-index: 999; /* Ensures the header stays above other content when scrolling. */
    box-shadow: 0 2px 10px rgba(0,0,0,.1); /* Subtle shadow for depth. */
}

/* Logo Container: Houses the company logo. */
.logo {
    display: flex; /* Uses Flexbox to align logo and potential mobile toggle. */
    align-items: center; /* Vertically aligns items within the logo container. */
}

/* Logo Image: Styles for the actual logo image. */
.logo img {
    height: 96px; /* Fixed height for consistent logo display (enlarged). */
}

/* Primary Navigation Links: Styles for "Home", "About", "Services", "Projects", "Contact" text in the header. */
.navbar a {
    color: #fff; /* Text color for navigation links; set to white for contrast against the header background. */
    margin-left: 25px; /* Spacing between individual navigation links. */
    font-weight: 500; /* Medium font weight for readability. */
    transition: color .3s; /* Smooth transition for color changes on hover. */
    padding: 5px 0; /* Adds vertical padding for a larger clickable/hover area. */
}

/* Navigation Links Hover State: Defines the color change when hovering over menu items. */
.navbar a:hover {
    color: #000; /* Color of navigation links when hovered; set to black for strong visual feedback. */
}

/* Mobile Menu Toggle Button: Styles for the hamburger icon, hidden on large screens by default. */
.menu-toggle {
    display: none; /* Controls visibility; hidden on desktop, shown on mobile via media queries. */
    background: 0 0; /* Transparent background for the button itself. */
    border: none; /* Removes default button border. */
    cursor: pointer; /* Changes cursor to pointer to indicate clickability. */
    padding: 10px; /* Padding around the hamburger icon. */
    position: relative; /* Needed for positioning the bars relative to the button. */
    z-index: 1001; /* Ensures it's always on top, especially when mobile menu is open. */
    margin-left: 20px; /* Spacing between the logo and the hamburger icon. */
}

/* Hamburger Icon Bars: Styling for the three horizontal lines of the hamburger icon. */
.hamburger-icon { /* Styles for the middle bar */
    width: 30px; /* Fixed width of the bars. */
    height: 3px; /* Fixed height (thickness) of the bars. */
    background-color: #00008b; /* Color of the hamburger icon bars. */
    transition: .3s ease-in-out; /* Smooth transition for animation. */
    display: block; /* Ensures the bar is a block element. */
    position: relative; /* Essential for positioning pseudo-elements relative to this bar. */
}

/* Hamburger Icon Top/Bottom Bars: Uses pseudo-elements for the top and bottom bars. */
.hamburger-icon::before,
.hamburger-icon::after {
    content:''; /* Required for pseudo-elements to render. */
    display: block; /* Ensure these are also block elements. */
    width: 30px; /* Fixed width of the bars. */
    height: 3px; /* Fixed height (thickness) of the bars. */
    background-color: #00008b; /* Color of the hamburger icon bars. */
    position: absolute; /* Positions them absolutely within the parent .hamburger-icon. */
    left: 0; /* Ensures consistent horizontal positioning from the left edge. */
    transition: inherit; /* Inherits transition properties from the parent .hamburger-icon for smooth animation. */
}

.hamburger-icon::before {
    top:-10px; /* Positions the top bar above the middle. */
}

.hamburger-icon::after {
    top:10px; /* Positions the bottom bar below the middle. */
}

/* Hamburger Icon Active State Animation: Transforms the hamburger icon into an 'X' when the mobile menu is open. */
.menu-toggle.active .hamburger-icon {
    background:0 0; /* Hides the middle bar when the toggle is active. */
}

.menu-toggle.active .hamburger-icon::before {
    transform:translateY(10px) rotate(45deg); /* Rotates and moves the top bar. */
}

.menu-toggle.active .hamburger-icon::after {
    transform:translateY(-10px) rotate(-45deg); /* Rotates and moves the bottom bar. */
}

/* --- HERO SECTION --- */
/* The main banner section at the top of each page, designed for impactful visuals. */
.hero-enhanced {
    background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)); /* Default overlay for text readability; applied if no video is present or as a fallback. */
    height:100vh; /* Ensures the hero section takes the full viewport height. */
    display:flex; /* Utilizes Flexbox to center content vertically and horizontally. */
    justify-content:center;
    align-items:center;
    text-align:center;
    position:relative; /* Crucial for absolutely positioning the video and overlay within it. */
    overflow:hidden; /* Prevents video content from spilling outside the section's bounds. */
    background-size: cover;
}

/* HERO BACKGROUND VIDEO - Styles for the actual video element */
.hero-background-video {
    position:absolute;
    top:0;
    left:0;
    width:100%; /* Ensures video always fills the width */
    height:100%; /* Ensures video always fills the height */
    object-fit:cover; /* Ensures video covers area while maintaining aspect ratio */
    z-index:-1; /* Place video behind content */
}

/* HERO OVERLAY - Dark overlay on top of video for text readability */
.hero-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.4); /* Dark overlay matching the previous gradient's overlay */
    z-index:0; /* Below text, above video */
}


/* HERO GLASS EFFECT BOX - Now fully transparent */
.hero-glass {
    background:0 0; /* Makes the content box fully transparent. */
    padding:60px 30px; /* Internal spacing within the content box. */
    border-radius:20px; /* Rounded corners for the content box. */
    max-width:850px; /* Limits the maximum width for readability. */
    position:relative; /* Ensures this content layer is positioned correctly above others. */
    z-index:1; /* Places the main content above the video and overlay. */
}

/* HERO GLASS H1 - Main title inside the hero glass box (e.g., "93 Million Energy Solutions") */
.hero-glass h1 {
    font-size:3.2rem;
    margin-bottom:15px;
    color:#fff; /* Default color for H1 in hero section (will be overridden by page-specific rules) */
    transition:transform .3s ease-out,text-shadow .3s ease-out; /* Smooth transition for hover effects. */
}

/* HERO GLASS PARAGRAPH - Description text inside the hero glass box (e.g., "Redefining Green Energy...") */
.hero-glass p {
    font-size:1.25rem;
    margin-bottom:30px;
    line-height:1.5;
    color:#fff; /* Color of paragraph text inside the hero glass box. */
    transition:transform .3s ease-out,text-shadow .3s ease-out; /* Smooth transition for hover effects. */
}

/* HERO TEXT HOVER EFFECTS (for H1 and P within hero section) */
.hero-glass h1:hover {
    transform:scale(1.02); /* Scales up the H1 text by 2% on hover. */
    text-shadow:0 0 15px rgba(255,255,255,.6); /* Adds a subtle white glow. */
    cursor:pointer; /* Changes mouse cursor to a pointer to indicate interactivity. */
}

.hero-glass p:hover {
    transform:scale(1.01); /* Scales up the paragraph text by 1% on hover. */
    text-shadow:0 0 10px rgba(255,255,255,.5); /* Adds a subtle white glow. */
    cursor:pointer; /* Changes mouse cursor to a pointer. */
}

/* CTA BUTTONS GROUP - Container for the call-to-action buttons in the hero */
.cta-buttons-group {
    display:flex;
    gap:20px; /* Spacing between buttons. */
    flex-wrap:wrap; /* Allows buttons to wrap onto the next line on smaller screens. */
    justify-content:center; /* Centers buttons horizontally. */
    position:relative; /* Ensure buttons are above video and overlay */
    z-index:1; /* Place content above overlay */
}

/* PRIMARY CTA BUTTONS - Styles for buttons like "Request a Free Quote" */
.cta-button,.cta-button-alt { /* Common styles for both button types */
    display:inline-block;
    padding:14px 28px; /* Internal spacing within the button. */
    border-radius:30px; /* Highly rounded corners for a modern look. */
    font-weight:700; /* Bold text for emphasis. */
    transition:.3s; /* Smooth transitions for all property changes. */
    text-align:center;
    min-width:180px; /* Ensures buttons maintain a minimum width. */
}

.cta-button {
    background:#00008b; /* Primary blue background for action buttons. */
    color:#fff; /* White text for strong contrast. */
    border:2px solid #00008b; /* Matching border color. */
}

/* PRIMARY CTA BUTTONS HOVER - Styles when hovering over the primary CTA button */
.cta-button:hover {
    background:#1414b3; /* Darker blue on hover for visual feedback. */
    border-color:#1414b3; /* Matching darker border on hover. */
    transform:translateY(-2px); /* Subtle lift effect. */
}

/* SECONDARY CTA BUTTON (ON HERO ONLY) - e.g., "View Projects" button on the Home page hero */
.hero-enhanced .cta-button-alt {
    background:0 0; /* Transparent background for the secondary button. */
    color:#fff; /* White text for the secondary button. */
    border:2px solid #fff; /* Border color of the secondary button. */
}

/* SECONDARY CTA BUTTON HOVER (ON HERO ONLY) - Hover styles for the hero's secondary button */
.hero-enhanced .cta-button-alt:hover {
    background:rgba(255,255,255,.2); /* Slight translucent white background on hover. */
    border-color:#fff; /* Border remains white. */
    transform:translateY(-2px); /* Subtle lift effect. */
}


/* --- "WHY CHOOSE US" SECTION --- */
/* Highlights the company's unique selling propositions. */
.why-us {
    padding:80px 20px; /* Consistent internal spacing for the section. */
    text-align:center; /* Centers content within the section. */
    background-color:#f8f8f8; /* Light, cool background color for visual separation. */
}

/* WHY COLUMNS - Container utilizing Flexbox for responsive layout of "Why Us" boxes. */
.why-columns {
    display:flex;
    justify-content:center; /* Centers boxes horizontally. */
    gap:30px; /* Spacing between the boxes. */
    flex-wrap:wrap; /* Allows boxes to wrap to the next line on smaller screens. */
    margin-top:30px; /* Spacing above the boxes. */
}

/* WHY BOX - Individual card representing a core value or reason to choose the company. */
.why-box {
    background:#fff; /* White background for the card. */
    padding:30px; /* Internal spacing within the card. */
    border-radius:12px; /* Rounded corners. */
    box-shadow:0 6px 20px rgba(0,0,0,.06); /* Subtle shadow for depth. */
    transition:transform .3s,box-shadow .3s; /* Smooth transitions for hover effects. */
    border:1px solid #00008b; /* Light blue border for visual theme consistency. */
}

/* WHY BOX HOVER - Animation when hovering over a "Why Us" box. */
.why-box:hover {
    transform:translateY(-8px); /* Lifts the box slightly. */
    box-shadow:0 10px 25px rgba(0,0,0,.12); /* More pronounced shadow on hover. */
}

/* WHY BOX HEADING - Title within each "Why Us" box (e.g., "Expertise"). */
.why-box h3 {
    margin-bottom:15px; /* Spacing below the heading. */
    color:#00008b; /* Blue text color for the heading. */
    font-size:1.4rem; /* Font size for emphasis. */
}

/* WHY BOX HEADING ICONS - Color of the Font Awesome icons within "Why Us" box headings. */
.service-card h3 .fab,.service-card h3 .far,.service-card h3 .fas,.why-box h3 .fab,.why-box h3 .far,.why-box h3 .fas {
    margin-right:8px; /* Spacing between the icon and the heading text. */
    color:#00008b; /* Blue color for the icons. */
}

/* --- SERVICE / TESTIMONIAL / NUMBERS CARDS --- */
/* Common container styles for sections featuring service cards, testimonials, or numerical highlights. */
.services-summary {
    padding:80px 30px; /* Consistent internal spacing for these sections. */
    text-align:center; /* Centers content within these sections. */
    /* Background colors for specific instances of this section are often applied inline in HTML. */
}

/* SERVICE BOXES - Container utilizing Flexbox for responsive layout of various cards. */
.service-boxes {
    display:flex;
    flex-wrap:wrap; /* Allows cards to wrap onto the next line on smaller screens. */
    justify-content:center; /* Centers cards horizontally. */
    gap:30px; /* Spacing between the cards. */
}

/* SERVICE CARD - Individual display unit for services, testimonials, or numerical data. */
.service-card {
    background:#fff; /* Background color of the service/testimonial/number card. */
    padding:30px; /* Internal spacing. */
    border-radius:12px; /* Rounded corners. */
    box-shadow:0 8px 20px rgba(0,0,0,.05); /* Subtle shadow. */
    width:300px; /* Fixed width for consistency. */
    transition:.3s; /* Smooth transitions for hover effects. */
    text-align:left; /* Aligns text to the left within the card. */
    display:flex; /* Uses Flexbox for internal layout. */
    flex-direction:column; /* Stacks content vertically. */
    justify-content:space-between; /* Distributes space between top and bottom content. */
    border:1px solid #00008b; /* Light blue border for visual theme consistency. */
}

/* SERVICE CARD HOVER - Animation when hovering over a service card. */
.service-card:hover {
    transform:translateY(-8px); /* Lifts the card slightly. */
    box-shadow:0 12px 28px rgba(0,0,0,.1); /* More pronounced shadow on hover. */
}

/* SERVICE CARD HEADING - Title within the service card (e.g., "Design & Engineering"). */
.service-card h3 {
    color:#00008b; /* Blue text color for the heading. */
    margin-bottom:15px; /* Spacing below the heading. */
    font-size:1.3rem; /* Font size for emphasis. */
    font-weight:600; /* Medium-bold weight. */
}

/* SERVICE CARD HEADING ICONS - Color of Font Awesome icons within service card headings. */
.service-card h3 .fab,.service-card h3 .far,.service-card h3 .fas {
    margin-right:8px; /* Spacing between the icon and the heading text. */
    color:#00008b; /* Blue color for the icons. */
}

/* SERVICE CARD PARAGRAPH - Description text within service cards. */
.service-card p {
    font-size:.95rem; /* Slightly smaller font size for body text. */
    line-height:1.6; /* Standard line height. */
}

/* TESTIMONIAL CARD NAME - Styles for the bolded name in testimonial cards. */
.service-card strong {
    display:block; /* Ensures the name appears on its own line. */
    margin-top:20px; /* Spacing above the name. */
    color:#00008b; /* Blue text color for the name. */
    font-weight:700; /* Bold font weight. */
}

/* COUNTER BOX NUMBERS - The large numbers in the "Solar in Numbers" section. */
.counter-box h3 {
    font-size:2.5rem; /* Large font size for prominent numbers. */
    margin-bottom:10px; /* Spacing below the number. */
    color:#00008b; /* Blue text color for the numbers. */
}

/* COUNTER BOX DESCRIPTION - The text below the numbers (e.g., "Solar Installed"). */
.counter-box p {
    font-size:1rem; /* Standard font size. */
    color:#666; /* Dark grey text color for readability. */
}

/* --- "OUR KEY CLIENTS" SECTION --- */
/* New section added to showcase client partnerships. */
.clients-section {
    padding:80px 20px; /* Consistent internal spacing. */
    text-align:center; /* Centers content within the section. */
    background-color:#f8f8f8; /* Light background for clients section. */
}

/* Clients Intro Paragraph: Introductory text for the clients section. */
.clients-intro {
    font-size:1.1rem; /* Readable font size. */
    margin-bottom:50px; /* Generous spacing between intro text and logo grid. */
    color:#777; /* Softer text color. */
    max-width:700px; /* Limits width for readability. */
    margin-left:auto; /* Centers the paragraph. */
    margin-right:auto;
}

/* Client Logos Grid: Responsive Flexbox container for client logos. */
.client-logos-grid {
    display:flex; /* Enable Flexbox */
    flex-wrap:wrap; /* Allow items to wrap to the next line */
    justify-content:center; /* Center items horizontally within the container */
    align-items:flex-start; /* Align items to the start of the cross-axis (top) */
    gap:30px; /* Space between logo boxes */
    padding:20px 0; /* Add some vertical padding above/below the grid */
    max-width:1000px; /* Max width for the grid */
    margin:0 auto /* Center the grid itself if max-width is applied */
}

/* Client Logo Box: Individual container for each client logo. */
.client-logo-box {
    background:#fff; /* Background color of each logo box. */
    padding:15px; /* Adjust padding to make space for the image. */
    border-radius:12px; /* Rounded corners. */
    box-shadow:0 4px 15px rgba(0,0,0,.05); /* Subtle shadow. */
    transition:transform .3s,box-shadow .3s; /* Smooth transitions for hover effects. */
    
    /* Fixed dimensions for uniform presentation of logos. */
    width:200px; 
    height:120px; 
    flex-shrink:0; /* Ensures boxes don't shrink below their defined size on small screens. */

    display:flex; /* Use flexbox for centering image within its box. */
    justify-content:center; /* Center image horizontally. */
    align-items:center; /* Center image vertically. */
    
    border:1px solid #e6e6f5; /* Light blue border for logo boxes. */
    overflow:hidden; /* Ensure image doesn't spill out if larger. */
}

/* Client Logo Box Hover State: Animation when hovering over a client logo box. */
.client-logo-box:hover {
    transform:translateY(-15px) scale(1.05); /* Lifts and slightly scales the box on hover. */
    box-shadow:0 8px 25px rgba(0, 0, 139, 0.28); /* More pronounced shadow on hover (note: RGB values suggest red, consider blue for theme). */
}

/* Client Logo Image: Styles for the actual logo image within its box. */
.client-logo-box img {
    max-width:100%; /* Image can take up to 100% width of its parent box. */
    max-height:100%; /* Image can take up to 100% height of its parent box. */
    object-fit:contain; /* Scales the image down to fit the box while maintaining aspect ratio. */
    display:block; /* Removes any extra space below the image. */
    /* filter and opacity are commented out in your original, leaving them as is */
}

/* --- CALL TO ACTION BANNER --- */
/* A prominent section encouraging user interaction, often at the bottom of pages. */
.cta-banner {
    padding:80px 20px; /* Internal spacing. */
    background:linear-gradient(120deg,#fff,#00008b); /* Background gradient for the CTA banner. */
    text-align:center; /* Centers all content within the banner. */
    color:#fff; /* Text color for content within the banner. */
}

/* CTA Banner Heading: Styles for the main title within the CTA banner. */
.cta-banner h2 {
    font-size:2.5rem; /* Large font size for impact. */
    margin-bottom:15px; /* Spacing below the heading. */
    color:#fff; /* White text color for contrast. */
}

/* CTA Banner Paragraph: Descriptive text within the CTA banner. */
.cta-banner p {
    font-size:1.15rem; /* Readable font size. */
    margin-bottom:30px; /* Spacing below the paragraph. */
    line-height:1.5; /* Standard line height. */
}

/* CTA Button Alternate: Styles for buttons within the CTA banner. */
.cta-button-alt {
    background:#fff; /* White background for the button. */
    color:#00008b; /* Blue text color for the button. */
    border:2px solid #fff; /* White border. */
    padding:14px 28px; /* Internal spacing. */
    border-radius:30px; /* Rounded corners. */
    font-weight:700; /* Bold text. */
    transition:.3s; /* Smooth transitions for hover effects. */
}

/* CTA Button Alternate Hover State: Styles when hovering over the CTA button. */
.cta-button-alt:hover {
    background:#e6e6f5; /* Light blue background on hover. */
    color:#1414b3; /* Darker blue text on hover. */
    transform:translateY(-2px); /* Subtle lift effect. */
}

/* --- FOOTER --- */
/* Standard website footer, typically found at the very bottom of every page. */
footer {
    background:#333; /* Dark grey background for strong contrast. */
    color:silver; /* Light grey text color for readability. */
    padding:30px; /* Internal spacing. */
    font-size:.9rem; /* Slightly smaller font size. */
    text-align: center;
}

/* --- WHATSAPP FLOATING BUTTON --- */
/* A fixed position button providing quick access to WhatsApp chat. */
.whatsapp-float {
    position:fixed; /* Fixes the button relative to the viewport. */
    bottom:25px; /* Distance from the bottom of the viewport. */
    right:25px; /* Distance from the right of the viewport. */
    background:#25d366; /* WhatsApp's brand green for immediate recognition. */
    color:#fff; /* White text for visibility. */
    padding:14px 20px; /* Internal spacing. */
    border-radius:50px; /* Highly rounded for a pill shape. */
    font-weight:700; /* Bold text. */
    box-shadow:0 4px 10px rgba(0,0,0,.15); /* Subtle shadow for depth. */
    z-index:1000; /* Ensures it stays above other content. */
    transition:background .3s,transform .3s,color .3s,box-shadow .3s; /* Smooth transitions for hover effects. */
    display:flex; /* Uses Flexbox for icon and text alignment. */
    align-items:center; /* Vertically aligns icon and text. */
    gap:8px; /* Spacing between icon and text. */
    border:1px solid #25d366; /* Light blue border, potentially from previous experimentation. */
}

/* WHATSAPP FLOATING BUTTON HOVER State: Animation when hovering over the WhatsApp button. */
.whatsapp-float:hover {
    background:#026c1c; /* Darker green background on hover. */
    color:#fff; /* Text remains white. */
    transform:translateY(-3px); /* Subtle lift effect. */
    box-shadow:0 6px 12px rgba(0,0,0,.25); /* More pronounced shadow. */
}

/* --- CONTACT PAGE SPECIFIC STYLES --- */
/* Styles unique to the contact form and contact information sections. */

/* Contact Form Container: Styles the form's overall layout and positioning. */
.contact-form {
    margin-top:30px; /* Spacing above the form. */
    width:100%; /* Takes full width of its parent. */
    max-width:500px; /* Limits maximum width for better readability. */
    margin-left:auto; /* Centers the form horizontally. */
    margin-right:auto
}

/* Contact Form Input Fields: Styles for text, email, and textarea input elements. */
.contact-form input[type=email],.contact-form input[type=text],.contact-form textarea {
    width:100%; /* Takes full width of its container. */
    padding:12px 15px; /* Internal spacing. */
    margin-bottom:20px; /* Spacing below each field. */
    border:1px solid #00008b; /* Light blue border for theme consistency. */
    border-radius:8px; /* Slightly rounded corners. */
    font-size:1rem; /* Standard font size. */
    color:#333; /* Dark text color for input content. */
    background-color:#fcfcfc; /* Very light background for input fields. */
    transition:border-color .3s,box-shadow .3s; /* Smooth transitions for focus states. */
}

/* Contact Form Input Focus State: Styles when an input field is active/focused. */
.contact-form input[type=email]:focus,.contact-form input[type=text]:focus,.contact-form textarea:focus {
    outline:0; /* Removes default browser outline. */
    border-color:#00008b; /* Blue border on focus. */
    box-shadow:0 0 0 3px rgba(0,0,139,.28); /* Soft blue glow effect on focus. */
}

/* Contact Form Textarea: Specific height and resize options for the message box. */
.contact-form textarea {
    min-height:120px; /* Minimum height for the textarea. */
    resize:vertical; /* Allows vertical resizing by the user. */
}

/* Contact Form Submit Button: Styles for the "Send Message" button. */
.contact-form .cta-button { /* Reuses existing .cta-button styles for consistency. */
    width:auto;
    min-width:180px;
    display:block; /* Makes it a block element to allow centering. */
    margin:0 auto
}

/* Contact Information Section: Displays office location, email, phone, and business hours. */
.contact-info-section {
    padding:60px 20px; /* Internal spacing. */
    background-color:#f8fdfb; /* Light background for visual separation. */
    text-align:center /* Centers content. */
}

/* Contact Info Text: General paragraph text in contact info. */
.contact-info-section p {
    font-size:1.1rem; /* Readable font size. */
    margin-bottom:10px
}

/* Contact Info Strong Text: Styles for bolded labels like "Email:", "Office:", "Phone:". */
.contact-info-section p strong,.project-info p strong {
    color:#00008b; /* Blue text color for emphasis. */
}

/* --- PROJECTS GALLERY PAGE STYLES --- */
/* Styles specifically for the project grid on the projects page. */
.projects-gallery {
    background-color:#fcfcfc; /* Light background for the gallery section. */
}

/* GALLERY GRID - Main container for all individual project cards, arranged in a responsive grid. */
.gallery-grid {
    display:grid; /* Enables CSS Grid layout. */
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); /* Creates responsive columns that fit within min/max constraints. */
    gap:30px; /* Spacing between grid items. */
    max-width:1200px; /* Limits the maximum width of the grid. */
    margin:0 auto; /* Centers the grid horizontally. */
    padding-top:20px; /* Spacing above the grid. */
}

/* PROJECT CARD - Individual box for each project in the gallery. */
.project-card {
    background:#fff; /* Background color of the project card. */
    border-radius:12px; /* Rounded corners. */
    overflow:hidden; /* Ensures image corners are rounded correctly. */
    box-shadow:0 8px 20px rgba(0,0,0,.06); /* Subtle shadow. */
    transition:transform .3s,box-shadow .3s; /* Smooth transitions for hover effects. */
    display:flex; /* Uses Flexbox for internal layout. */
    flex-direction:column; /* Stacks content vertically. */
    height:100%; /* Ensures cards maintain uniform height in a row. */
    border:1px solid #00008b; /* Light blue border for theme consistency. */
}

/* PROJECT CARD HOVER - Animation when hovering over a project card. */
.project-card:hover {
    transform:translateY(-8px); /* Lifts the card slightly. */
    box-shadow:0 12px 28px rgba(0,0,0,.12); /* More pronounced shadow on hover. */
}

/* PROJECT CARD IMAGE - The image within each project card. */
.project-card img {
    width:100%; /* Ensures image fills the card's width. */
    height:220px; /* Fixed height for consistent card appearance. */
    object-fit:cover; /* Scales image to cover the area, potentially cropping. */
    display:block; /* Ensures proper rendering. */
    transition:transform .3s; /* Smooth transition for hover effect on image. */
}

/* PROJECT CARD IMAGE HOVER - Subtle zoom effect when hovering over the card. */
.project-card:hover img {
    transform:scale(1.05); /* Slightly zooms the image. */
}

/* PROJECT INFO - The text area below the image in a project card. */
.project-info {
    padding:20px; /* Internal spacing. */
    flex-grow:1; /* Allows this section to take up available vertical space. */
    display:flex; /* Uses Flexbox for internal layout. */
    flex-direction:column; /* Stacks content vertically. */
    justify-content:space-between; /* Distributes space between title and details. */
}

/* PROJECT INFO HEADING - Title of the project (e.g., "Commercial Rooftop Solar") */
.project-info h3 {
    font-size:1.3rem; /* Font size for emphasis. */
    color:#00008b; /* Blue text color. */
    margin-bottom:10px; /* Spacing below the heading. */
}

/* PROJECT INFO PARAGRAPH - Description text in project cards. */
.project-info p {
    font-size:.9rem; /* Slightly smaller font size for body text. */
    color:#666; /* Dark grey text color for readability. */
    line-height:1.5; /* Standard line height. */
    margin-bottom:8px; /* Spacing below each line. */
}


/* --- RESPONSIVE ADJUSTMENTS --- */
/* Media queries to ensure the website adapts gracefully to different screen sizes. */

/* Media Query for larger tablets and smaller desktops (max-width: 992px) */
@media (max-width:992px){
    /* Hero Section adjustments for medium screens. */
    .hero-glass h1 {
        font-size:2.8rem
    }
    .hero-glass p {
        font-size:1.1rem
    }
    .section-heading {
        font-size:1.8rem;
        margin-bottom:30px
    }
}

/* Media Query for most tablets and larger phones (max-width: 768px) */
@media (max-width:768px){
    /* HEADER - Stacking logo and navigation for mobile */
    .main-header {
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        padding:15px 20px
    }

    .logo {
        width:auto;
        display:flex;
        align-items:center;
        gap:15px
    }

    .menu-toggle {
        display:block; /* Shows the hamburger icon */
    }

    /* MOBILE NAVIGATION BAR - How the nav appears when hamburger is clicked. */
    .navbar {
        position:absolute;
        top:90px; /* Positions below the header */
        left:0;
        width:100%;
        background:linear-gradient(90deg,#e6e6f5,#cfcff0); /* Background matches the header */
        flex-direction:column; /* Stacks navigation links vertically. */
        padding:20px 0; /* Vertical spacing within the mobile menu. */
        box-shadow:0 5px 10px rgba(0,0,0,.1);
        display:none; /* Hidden by default until activated. */
        opacity:0; /* Starts transparent for animation. */
        transform:translateY(-20px);
        transition:opacity .3s ease-out,transform .3s ease-out; /* Smooth slide-in/fade-in animation. */
        z-index:998
    }

    /* MOBILE NAVIGATION BAR ACTIVE - How the nav appears when active (toggled) */
    .navbar.active {
        display:flex; /* Makes the navigation menu visible. */
        opacity:1; /* Fully opaque. */
        transform:translateY(0)
    }

    /* MOBILE NAVIGATION LINKS - Styles for individual links within the mobile menu. */
    .navbar a {
        margin:10px 0;
        font-size:1.1rem; /* Slightly larger text for easier tapping. */
        padding:8px 20px; /* Adds touch target area. */
        width:100%; /* Ensures links take full width for easier tapping. */
        text-align:center;
        color:#00008b
    }

    /* MOBILE NAVIGATION LINKS HOVER - Styles when hovering mobile nav links. */
    .navbar a:hover {
        background-color:rgba(0,0,0,.05)
    }

    /* HERO GLASS BOX (MOBILE) - Adjustments for smaller screens. */
    .hero-glass {
        padding:40px 20px;
        max-width:90%
    }
    .hero-glass h1 {
        font-size:2.2rem
    }
    .hero-glass p {
        font-size:1rem
    }

    /* CTA BUTTONS GROUP (MOBILE) - Buttons stack on mobile */
    .cta-buttons-group {
        flex-direction:column; /* Stacks buttons vertically. */
        gap:10px; /* Reduced spacing between stacked buttons. */
        align-items:center /* Center buttons horizontally within the column flex container. */
    }
    .cta-button,.cta-button-alt {
        width:100%; /* Buttons take full available width. */
        max-width:250px
    }

    /* WHY US / SERVICE BOXES (MOBILE) - Boxes stack vertically on mobile */
    .why-columns,.service-boxes {
        flex-direction:column;
        align-items:center; /* Ensures cards stretch to equal height within their row. */
        gap:20px
    }

    .why-box,.service-card {
        width:90%;
        max-width:350px;
        padding:25px
    }

    /* Client logos on smaller screens: Adjust fixed sizes for uniformity */
    .client-logo-box {
        width:150px; /* Smaller fixed width for tablets */
        height:90px; /* Smaller fixed height for tablets */
        padding:10px /* Adjust padding for smaller size */
    }

    /* CTA BANNER (MOBILE) - Adjustments for smaller screens */
    .cta-banner h2 {
        font-size:2rem
    }
    .cta-banner p {
        font-size:1rem
    }

    /* WHATSAPP FLOAT (MOBILE) - Adjustments for smaller screens */
    .whatsapp-float {
        bottom:15px;
        right:15px;
        padding:10px 15px;
        font-size:.85rem
    }

    /* CONTACT FORM (MOBILE) - Adjustments for smaller screens */
    .contact-form {
        max-width:90%
    }

    /* PROJECTS GALLERY (MOBILE) - Projects stack on mobile */
    .gallery-grid {
        grid-template-columns:1fr;
        padding-left:20px;
        padding-right:20px
    }

    .project-card {
        width:100%;
        max-width:400px;
        margin:0 auto
    }

    .project-card img {
        height:180px
    }
}

/* Media Query for small phones (max-width: 480px) */
@media (max-width:480px){
    /* Hero Section adjustments for very small screens */
    .hero-glass h1 {
        font-size:1.8rem
    }
    .hero-glass p {
        font-size:.9rem
    }
    .section-heading {
        font-size:1.6rem
    }
    /* Project Card Image adjustment for very small screens */
    .project-card img {
        height:150px
    }
    /* Project Info text adjustments for very small screens */
    .project-info {
        padding:15px
    }
    .project-info h3 {
        font-size:1.2rem
    }
    .project-info p {
        font-size:.85rem
    }

    /* Client logos on very small screens: Further adjust fixed sizes */
    .client-logo-box {
        width:120px; /* Even smaller fixed width for mobile */
        height:70px; /* Even smaller fixed height for mobile */
        padding:8px /* Adjust padding for smaller size */
    }
}

/* --- PAGE-SPECIFIC H1 COLORS --- */
.home-page .hero-glass h1 { color:#fff }
.home-page .hero-glass p { color:#fff }

.about-page .hero-glass h1 { color:#fff }
.about-page .hero-glass p { color:#fff }

.services-page .hero-glass h1 { color:#fff }
.services-page .hero-glass p { color:#fff }

.projects-page .hero-glass h1 { color:#fff }
.projects-page .hero-glass p { color:#fff }

.contact-page .hero-glass h1 { color:#d9d9f5 }
.contact-page .hero-glass p { color:#dadaf7 }

/* --- PAGE-SPECIFIC HERO IMAGE POSITIONING --- */
.projects-page .hero-enhanced { background-position:50% 70% }
.about-page .hero-enhanced { background-position:center center }
.services-page .hero-enhanced { background-position:center center }
.contact-page .hero-enhanced { background-position:40% 70% }
.home-page .hero-enhanced { background-position:center center }

/* --- ABOUT PAGE: CONTACT STRIP (SunCraft addition, same visual language as .contact-info-section) --- */
.about-contact-strip {
    padding:60px 20px;
    background-color:#f8fdfb;
    text-align:center;
}
.about-contact-strip p {
    font-size:1.1rem;
    margin-bottom:10px;
}
.about-contact-strip p strong {
    color:#00008b;
}

/* ============================================================
   SUNCRAFT ADDITIONS — Leadership, Careers & Application pages
   New sections not present in the original reference site.
   Uses the same visual language (cards, shadows, radii, spacing)
   and the site's Dark Blue theme colour throughout.
   ============================================================ */

/* --- LEADERSHIP (About page) --- */
.leadership-section {
    padding:80px 20px;
    text-align:center;
    background-color:#f8f8f8;
}
.leadership-grid {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:30px;
    margin-top:30px;
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
}
.leadership-card {
    background:#fff;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
    border:1px solid #00008b;
    width:460px;
    max-width:100%;
    padding:30px;
    text-align:left;
    display:flex;
    flex-direction:column;
    transition:transform .3s,box-shadow .3s;
}
.leadership-card:hover {
    transform:translateY(-6px);
    box-shadow:0 12px 28px rgba(0,0,0,.1);
}
.leadership-photo {
    width:220px;
    height:220px;
    border-radius:12px;
    object-fit:cover;
    display:block;
    margin:0 auto 18px;
    border:3px solid #00008b;
}
.leadership-card h3 {
    text-align:center;
    color:#00008b;
    font-size:1.3rem;
    margin-bottom:4px;
}
.leadership-card .leadership-title {
    display:block;
    text-align:center;
    color:#666;
    font-weight:500;
    margin-bottom:16px;
    font-size:.95rem;
}
.leadership-card p {
    font-size:.92rem;
    color:#555;
    line-height:1.6;
    margin-bottom:12px;
}
.leadership-card p:last-child { margin-bottom:0; }

/* --- CONTACT PAGE SOCIAL ICONS --- */
.contact-social {
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:30px;
}
.contact-social a {
    display:flex;
    align-items:center;
    justify-content:center;
    width:54px;
    height:54px;
    border-radius:50%;
    background:#00008b;
    color:#fff;
    font-size:1.3rem;
    transition:transform .3s,background .3s;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.contact-social a:hover {
    background:#1414b3;
    transform:translateY(-4px);
    color:#fff;
}
.contact-social a.social-whatsapp { background:#25d366; }
.contact-social a.social-whatsapp:hover { background:#1da851; }
.contact-social a.social-instagram { background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4); }
.contact-social a.social-email { background:#00008b; }

/* --- CAREER PAGE: hero --- */
.career-hero {
    position:relative;
    min-height:70vh;
    display:flex;
    align-items:center;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    overflow:hidden;
    padding:60px 20px;
}
.career-hero-overlay {
    position:absolute; inset:0;
    background:linear-gradient(100deg,rgba(0,0,20,.82),rgba(0,0,139,.55));
}
.career-hero-content {
    position:relative;
    z-index:1;
    max-width:760px;
    margin:0 auto;
    text-align:center;
    color:#fff;
}
.career-hero-content h1 {
    color:#fff;
    font-size:2.8rem;
    margin-bottom:18px;
    line-height:1.2;
}
.career-hero-content h1 span { color:#9fa8ff; }
.career-hero-content p {
    color:#dfe3ff;
    font-size:1.1rem;
    margin:0 auto 28px;
    max-width:600px;
}
.eyebrow {
    display:inline-block;
    letter-spacing:1.5px;
    font-size:.8rem;
    font-weight:700;
    color:#9fa8ff;
    margin-bottom:14px;
    text-transform:uppercase;
}
.eyebrow.dark { color:#00008b; }

/* --- CAREER INTRO --- */
.career-intro { padding:80px 20px; background:#fff; }
.career-intro-grid {
    max-width:1100px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:50px;
    align-items:center;
}
.career-intro-grid h2 { font-size:1.9rem; margin-bottom:16px; }
.career-intro-grid p { color:#555; margin-bottom:14px; }
.career-stats {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}
.career-stats > div {
    background:#f8f8f8;
    border:1px solid #00008b;
    border-radius:12px;
    padding:22px;
    text-align:center;
}
.career-stats strong {
    display:block;
    font-size:1.6rem;
    color:#00008b;
    margin-bottom:6px;
}
.career-stats span { font-size:.9rem; color:#666; }

/* --- SECTION HEADING WRAP (career values / openings) --- */
.section-heading-wrap {
    max-width:700px;
    margin:0 auto 40px;
    text-align:center;
}
.section-heading-wrap .section-heading { margin-bottom:14px; }
.section-heading-wrap p { color:#666; margin:0 auto; }

/* --- CAREER VALUES --- */
.career-values { padding:80px 20px; background:#f8f8f8; }
.career-value-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:26px;
    max-width:1100px;
    margin:0 auto;
}
.career-value-grid article {
    background:#fff;
    border:1px solid #00008b;
    border-radius:12px;
    padding:28px 22px;
    text-align:center;
    box-shadow:0 6px 20px rgba(0,0,0,.05);
    transition:transform .3s,box-shadow .3s;
}
.career-value-grid article:hover {
    transform:translateY(-6px);
    box-shadow:0 10px 25px rgba(0,0,0,.1);
}
.career-value-grid i {
    font-size:1.8rem;
    color:#00008b;
    margin-bottom:14px;
    display:block;
}
.career-value-grid h3 { font-size:1.15rem; margin-bottom:10px; color:#00008b; }
.career-value-grid p { font-size:.92rem; color:#555; margin:0; }

/* --- OPENINGS / JOB LISTINGS --- */
.openings-section { padding:80px 20px; background:#fff; }
.job-filter {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin-bottom:40px;
}
.job-filter-btn {
    background:#fff;
    border:2px solid #00008b;
    color:#00008b;
    padding:9px 20px;
    border-radius:30px;
    font-weight:600;
    font-size:.9rem;
    cursor:pointer;
    transition:.3s;
    font-family:inherit;
}
.job-filter-btn:hover { background:#e6e6f5; }
.job-filter-btn.active { background:#00008b; color:#fff; }
.job-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:26px;
    max-width:1200px;
    margin:0 auto;
}
.job-card {
    background:#fff;
    border:1px solid #00008b;
    border-radius:12px;
    padding:26px;
    text-align:left;
    box-shadow:0 6px 20px rgba(0,0,0,.05);
    transition:transform .3s,box-shadow .3s;
    display:flex;
    flex-direction:column;
}
.job-card:hover {
    transform:translateY(-6px);
    box-shadow:0 10px 25px rgba(0,0,0,.1);
}
.job-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:.82rem;
    color:#666;
    margin-bottom:12px;
}
.job-tag {
    background:#e6e6f5;
    color:#00008b;
    font-weight:700;
    padding:4px 12px;
    border-radius:30px;
    font-size:.78rem;
}
.job-card h3 { font-size:1.2rem; margin-bottom:8px; color:#00008b; }
.job-card > p { font-size:.88rem; color:#666; margin-bottom:14px; }
.job-card > p i { color:#00008b; margin-right:4px; }
.job-card ul { margin:0 0 18px; padding-left:20px; flex-grow:1; }
.job-card li { font-size:.88rem; color:#555; margin-bottom:8px; line-height:1.5; }
.job-apply {
    font-weight:700;
    color:#00008b;
    font-size:.92rem;
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.job-apply i { font-size:.8rem; transition:transform .2s; }
.job-apply:hover i { transform:translateX(4px); }

/* --- CAREER CTA STRIP --- */
.career-cta {
    background:linear-gradient(120deg,#fff,#00008b);
    padding:70px 20px;
    text-align:center;
    color:#fff;
}
.career-cta h2 { color:#fff; font-size:2rem; margin-bottom:10px; }
.career-cta p { color:#e3e3ff; max-width:600px; margin:0 auto 26px; }
.career-cta .cta-button {
    background:#fff;
    color:#00008b;
    border-color:#fff;
}
.career-cta .cta-button:hover {
    background:#e6e6f5;
    border-color:#e6e6f5;
}

/* --- APPLICATION PAGE --- */
.application-hero {
    background:linear-gradient(120deg,#00008b,#1414b3);
    padding:70px 20px 50px;
    text-align:center;
    color:#fff;
}
.application-hero h1 { color:#fff; font-size:2.3rem; margin-bottom:12px; }
.application-hero p { color:#dfe3ff; max-width:560px; margin:0 auto; }
.application-hero .eyebrow.dark { color:#9fa8ff; }

.application-section { padding:60px 20px 90px; background:#f8f8f8; }
.application-layout {
    max-width:1150px;
    margin:0 auto;
    display:grid;
    grid-template-columns:.85fr 2fr;
    gap:30px;
    align-items:start;
}
.application-side-card {
    background:#00008b;
    color:#fff;
    border-radius:12px;
    padding:32px 26px;
    position:sticky;
    top:100px;
}
.side-icon {
    width:54px;
    height:54px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
    margin-bottom:18px;
}
.application-side-card h2 { color:#fff; font-size:1.3rem; margin-bottom:12px; }
.application-side-card p { color:#dfe3ff; font-size:.92rem; margin-bottom:20px; }
.side-points {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:24px;
}
.side-points span {
    font-size:.88rem;
    color:#e6e6ff;
    display:flex;
    align-items:center;
    gap:8px;
}
.side-points i { color:#9fa8ff; }
.text-link {
    color:#9fa8ff;
    font-weight:700;
    font-size:.9rem;
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.text-link i { font-size:.78rem; transition:transform .2s; }
.text-link:hover i { transform:translateX(4px); }

.application-card {
    background:#fff;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
    padding:36px;
}
.form-header { margin-bottom:26px; }
.form-header h2 { font-size:1.5rem; margin-bottom:8px; }
.form-header p { color:#666; margin:0; font-size:.92rem; }

.form-section-title {
    display:flex;
    align-items:center;
    gap:12px;
    margin:32px 0 18px;
}
.form-section-title:first-of-type { margin-top:0; }
.form-section-title span {
    width:30px;
    height:30px;
    border-radius:50%;
    background:#00008b;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.8rem;
    font-weight:700;
    flex-shrink:0;
}
.form-section-title h3 { font-size:1.05rem; color:#00008b; margin:0; }

.form-grid {
    display:grid;
    gap:18px;
    margin-bottom:6px;
}
.form-grid.two { grid-template-columns:1fr 1fr; }
.career-form label {
    display:block;
    font-size:.9rem;
    font-weight:600;
    color:#333;
    margin-bottom:18px;
}
.career-form label.full-label { grid-column:1/-1; }
.career-form input[type=text],
.career-form input[type=email],
.career-form input[type=tel],
.career-form input[type=url],
.career-form select,
.career-form textarea {
    width:100%;
    margin-top:7px;
    padding:12px 14px;
    border:1px solid #00008b;
    border-radius:8px;
    font-size:.95rem;
    font-family:inherit;
    color:#333;
    background:#fcfcfc;
}
.career-form select { appearance:auto; }
.career-form input:focus,
.career-form select:focus,
.career-form textarea:focus {
    outline:0;
    border-color:#1414b3;
    box-shadow:0 0 0 3px rgba(0,0,139,.18);
}
.career-form textarea { resize:vertical; }

.upload-box {
    display:block;
    border:2px dashed #00008b;
    border-radius:10px;
    padding:26px;
    text-align:center;
    cursor:pointer;
    margin-bottom:20px;
    background:#fcfcfc;
    transition:background .2s;
}
.upload-box:hover { background:#e6e6f5; }
.upload-box input[type=file] { display:none; }
.upload-icon {
    display:block;
    font-size:1.8rem;
    color:#00008b;
    margin-bottom:8px;
}
.upload-box strong { display:block; color:#00008b; margin-bottom:4px; font-size:.95rem; }
.upload-box small { display:block; color:#888; font-size:.8rem; margin-bottom:8px; }
.upload-box em { display:block; font-style:normal; color:#555; font-size:.85rem; }

.consent {
    display:flex !important;
    align-items:flex-start;
    gap:10px;
    font-size:.85rem !important;
    font-weight:400 !important;
    color:#555;
}
.consent input { width:auto !important; margin-top:3px; }

.application-submit {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.form-note {
    text-align:center;
    font-size:.8rem;
    color:#888;
    margin:16px 0 0;
}
.form-success {
    display:none;
    margin-top:18px;
    padding:14px 16px;
    border-radius:8px;
    background:#e6f6ea;
    border:1px solid #bfe3c8;
    color:#1d5c30;
    font-size:.92rem;
    text-align:center;
}
.form-success.is-visible { display:block; }
.form-success.is-error {
    background:#fdecec;
    border-color:#f3bcbc;
    color:#8a2323;
}

@media (max-width:900px){
    .career-intro-grid { grid-template-columns:1fr; }
    .career-value-grid { grid-template-columns:repeat(2,1fr); }
    .application-layout { grid-template-columns:1fr; }
    .application-side-card { position:static; }
}
@media (max-width:600px){
    .career-value-grid { grid-template-columns:1fr; }
    .form-grid.two { grid-template-columns:1fr; }
    .career-stats { grid-template-columns:1fr 1fr; }
    .career-hero-content h1 { font-size:2.1rem; }
    .leadership-card { width:100%; }
}

/* ============================================================
   SITE-WIDE FOOTER (replaces the plain copyright-only footer)
   Appears identically on every page: brand+social, quick links,
   contact details, then a bottom bar with policy links + copyright.
   ============================================================ */
footer.site-footer {
    background:#fff;
    color:#555;
    padding:0;
    text-align:left;
    font-size:.95rem;
}
.footer-top {
    max-width:1200px;
    margin:0 auto;
    padding:60px 30px 40px;
    display:grid;
    grid-template-columns:1.3fr 1fr 1.1fr;
    gap:40px;
    border-top:3px solid #00008b;
}
.footer-logo {
    height:64px;
    margin-bottom:16px;
    display:block;
}
.footer-brand p {
    font-size:.92rem;
    color:#666;
    line-height:1.6;
    max-width:320px;
    margin-bottom:20px;
}
.footer-social {
    display:flex;
    gap:12px;
}
.footer-social a {
    width:38px;
    height:38px;
    border-radius:50%;
    background:#00008b;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    transition:background .3s,transform .3s;
}
.footer-social a:hover {
    background:#1414b3;
    transform:translateY(-3px);
    color:#fff;
}
.footer-social a.social-whatsapp { background:#25d366; }
.footer-social a.social-whatsapp:hover { background:#1da851; }
.footer-social a.social-instagram { background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4); }

.footer-links h3,
.footer-contact h3 {
    font-size:1.15rem;
    color:#000305;
    margin-bottom:10px;
}
.footer-links h3::after,
.footer-contact h3::after {
    content:"";
    display:block;
    width:36px;
    height:3px;
    background:#00008b;
    margin-top:8px;
}
.footer-links {
    display:flex;
    flex-direction:column;
    gap:12px;
    padding-top:6px;
}
.footer-links a {
    color:#555;
    font-size:.95rem;
    transition:color .2s;
}
.footer-links a:hover { color:#00008b; }

.footer-contact {
    padding-top:6px;
}
.footer-contact p {
    margin-bottom:14px;
    font-size:.92rem;
    color:#555;
    line-height:1.6;
}
.footer-contact a { color:#555; }
.footer-contact a:hover { color:#00008b; }

.footer-bottom {
    border-top:1px solid #eee;
    padding:20px 30px;
    max-width:1200px;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    font-size:.85rem;
    color:#777;
}
.footer-bottom-links a { color:#777; }
.footer-bottom-links a:hover { color:#00008b; }
.footer-bottom-links span { margin:0 8px; color:#ccc; }

@media (max-width:900px){
    .footer-top { grid-template-columns:1fr 1fr; }
    .footer-brand { grid-column:1 / -1; }
}
@media (max-width:600px){
    .footer-top { grid-template-columns:1fr; padding:44px 22px 30px; }
    .footer-bottom { flex-direction:column; text-align:center; padding:18px 22px; }
}

/* ============================================================
   UPDATED CLIENTS + LEADERSHIP + GMAIL
   ============================================================ */
.clients-cities-section {
    padding: 78px 20px;
    text-align: center;
    background: #f8faff;
}
.client-cities {
    max-width: 1000px;
    margin: 30px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.client-city {
    background: #fff;
    border: 1px solid #e5eaf6;
    border-radius: 14px;
    padding: 24px 15px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #00008b;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.client-city:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,.10);
}
.our-clients-section {
    padding: 78px 20px;
    text-align: center;
    background: #fff;
}
.our-client-logos {
    max-width: 760px;
    margin: 30px auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    align-items: center;
}
.our-client-logo {
    min-height: 145px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e5eaf6;
    border-radius: 16px;
    box-shadow: 0 7px 22px rgba(0,0,0,.07);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.our-client-logo:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0,0,0,.11);
}
.our-client-logo img {
    width: 100%;
    max-width: 300px;
    height: 95px;
    object-fit: contain;
}

/* Leadership: first person's image left/detail right; second detail left/image right. */
.leadership-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 1120px;
}
.leadership-card.leadership-row {
    width: 100%;
    max-width: 1120px;
    padding: 28px;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 34px;
    align-items: center;
    text-align: left;
}
.leadership-card.leadership-row-reverse {
    grid-template-columns: 1fr 300px;
}
.leadership-row-reverse .leadership-media {
    order: 2;
}
.leadership-row-reverse .leadership-content {
    order: 1;
}
.leadership-media {
    display: flex;
    justify-content: center;
    align-items: center;
}
.leadership-card .leadership-photo {
    width: 260px;
    height: 260px;
    margin: 0;
}
.leadership-content h3 {
    text-align: left;
    margin-bottom: 4px;
}
.leadership-content .leadership-title {
    text-align: left;
}
.leadership-content p {
    text-align: left;
}
.gmail-footer-link {
    padding: 0 !important;
    background: #fff !important;
    overflow: hidden;
}
.gmail-footer-link img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}
@media (max-width: 900px) {
    .client-cities { grid-template-columns: repeat(2, 1fr); }
    .leadership-card.leadership-row,
    .leadership-card.leadership-row-reverse {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .leadership-row-reverse .leadership-media,
    .leadership-row-reverse .leadership-content {
        order: initial;
    }
    .leadership-content h3,
    .leadership-content .leadership-title,
    .leadership-content p { text-align: center; }
}
@media (max-width: 600px) {
    .client-cities,
    .our-client-logos { grid-template-columns: 1fr; }
    .client-city { padding: 20px 15px; }
    .our-client-logo { min-height: 125px; }
    .leadership-card.leadership-row { padding: 20px; }
    .leadership-card .leadership-photo {
        width: 210px;
        height: 210px;
    }
}

/* --- CLIENTS, TESTIMONIALS & ESTIMATOR --- */
.testimonials-section .section-intro{max-width:720px;margin:-18px auto 34px;text-align:center;color:#666;line-height:1.7}
.testimonial-grid{max-width:1150px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testimonial-card{background:#fff;border:1px solid #e8e8e8;border-radius:18px;padding:30px;box-shadow:0 10px 28px rgba(0,0,0,.06);position:relative;min-height:280px;display:flex;flex-direction:column}
.testimonial-card .quote-mark{font-size:48px;line-height:.7;color:#0b55c8;font-family:Georgia,serif;font-weight:700;margin-bottom:16px}
.testimonial-card p{font-size:15px;line-height:1.8;color:#4f4f4f;margin:0 0 24px}
.testimonial-person{margin-top:auto;border-top:1px solid #eee;padding-top:15px;display:flex;flex-direction:column;gap:3px}.testimonial-person strong{color:#161616}.testimonial-person span{color:#777;font-size:13px}
.our-client-logos{align-items:stretch}.our-client-logo{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.our-client-logo img{max-height:70px;max-width:190px}.our-client-logo span{font-weight:700;color:#222;font-size:15px}

/* FINAL REQUESTED UPDATES */
.gmail-icon{width:25px;height:25px;object-fit:contain;display:block}
.contact-social a.gmail-footer-link,.footer-social a.gmail-footer-link{background:#fff!important;padding:0!important;display:flex;align-items:center;justify-content:center}
.contact-social a.gmail-footer-link:hover,.footer-social a.gmail-footer-link:hover{background:#fff!important}
.our-client-logo{background:#fff;overflow:hidden}
.our-client-logo img{background:#fff;border-radius:8px}
.pm-surya-project{grid-column:1 / -1}
.pm-surya-project img{width:100%;aspect-ratio:16/9;object-fit:cover}
.scx{padding:78px 20px;background:linear-gradient(180deg,#f5f9ff,#fff);border-top:1px solid #edf1f5}
.scx-title{text-align:center;max-width:760px;margin:0 auto 34px}.scx-title b{color:#f5a400;letter-spacing:1.2px}.scx-title h2{font-size:38px;color:#07377f;margin:8px 0}.scx-title p{color:#66758a;line-height:1.7}
.scx-form{max-width:920px;margin:auto;background:#fff;padding:30px;border-radius:20px;box-shadow:0 15px 45px rgba(6,58,125,.12);color:#17315e;border:1px solid #dce9f8}.scx-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.scx-field label{display:block;font-weight:700;font-size:13px;margin-bottom:7px}.scx-field input,.scx-field select{width:100%;box-sizing:border-box;padding:12px;border:1px solid #cad9ee;border-radius:10px;font:inherit}.scx-btn{border:0;border-radius:10px;padding:13px 20px;background:#0754c8;color:white;font-weight:700;cursor:pointer;margin-top:18px}.scx-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(7,84,200,.18)}.scx-result{display:none;margin-top:17px;padding:17px;border-radius:12px;background:#edf5ff;border-left:4px solid #0754c8;line-height:1.7}.scx-result b{color:#07377f}
@media(max-width:800px){.scx-fields{grid-template-columns:1fr}.scx-title h2{font-size:30px}.pm-surya-project{grid-column:auto}}