/* --- 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: #64b5f6; /* 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: #1e88e5; /* 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,#006996); /* 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: 60px; /* Fixed height for consistent logo display. */
}

/* 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: #1e88e5; /* 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: #1e88e5; /* 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. */
}

/* 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:#2196f3; /* Primary blue background for action buttons. */
    color:#fff; /* White text for strong contrast. */
    border:2px solid #2196f3; /* Matching border color. */
}

/* PRIMARY CTA BUTTONS HOVER - Styles when hovering over the primary CTA button */
.cta-button:hover {
    background:#1976d2; /* Darker blue on hover for visual feedback. */
    border-color:#1976d2; /* 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 #64b5f6; /* 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:#2196f3; /* 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:#64b5f6; /* 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 #64b5f6; /* 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:#1e88e5; /* 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:#64b5f6; /* 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:#2196f3; /* 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:#1e88e5; /* 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 #bbdefb; /* 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(100, 181, 246, 0.2); /* 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,#006996); /* 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:#2196f3; /* 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:#e3f2fd; /* Light blue background on hover. */
    color:#1976d2; /* 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 #64b5f6; /* 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:#42a5f5; /* Blue border on focus. */
    box-shadow:0 0 0 3px rgba(66,165,245,.2); /* 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:#2196f3; /* 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 #64b5f6; /* 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:#1e88e5; /* 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,#bbdefb,#90caf9); /* 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:#1e88e5
    }

    /* 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 --- */
/* These rules provide unique color overrides for the main H1 heading in the hero section of each page. */
/* This allows for theme customization based on the specific page content. */

/* H1 on Home page hero: Keeps white text as per design choice for homepage. */
.home-page .hero-glass h1 {
    color:#fff
}
/* Paragraph on Home page hero: Keeps white text for consistency with H1. */
.home-page .hero-glass p {
    color:#fff
}


/* H1 on About page hero: Example of a distinct blue for About page's H1. */
.about-page .hero-glass h1 {
    color:#fff
}
/* Paragraph on About page hero: Example of default dark text for About page's P. */
.about-page .hero-glass p {
    color:#fff
}

/* H1 on Services page hero: Example of a specific blue for Services page's H1. */
.services-page .hero-glass h1 {
    color:#fff
}
/* Paragraph on Services page hero: Example of default dark text for Services page's P. */
.services-page .hero-glass p {
    color:#fff
}

/* H1 on Projects page hero: Explicitly set to white for visibility over background image. */
.projects-page .hero-glass h1 {
    color:#fff
}
/* Paragraph on Projects page hero: Explicitly set to white for consistency. */
.projects-page .hero-glass p {
    color:#fff
}

/* H1 on Contact page hero: Explicitly set to a very light blue/white for visibility. */
.contact-page .hero-glass h1 {
    color:#e0f2f7
}
/* Paragraph on Contact page hero: Explicitly set to a very light blue/white for consistency. */
.contact-page .hero-glass p {
    color:#e1f7f7
}

/* --- END PAGE-SPECIFIC H1 COLORS --- */

/* --- PAGE-SPECIFIC HERO IMAGE POSITIONING --- */
/* Allows precise control over the background-position of the hero image for each page. */
/* This is essential for ensuring key parts of the image (e.g., faces, primary subjects) are visible despite 'background-size: cover;'. */

/* Projects Page Hero Image Position: Customized position for the projects hero image. */
/* Adjust this value (e.g., 'top center', 'bottom center', '50% 70%') to optimize image display. */
.projects-page .hero-enhanced {
    background-position:50% 70%
}

/* About Page Hero Image Position: Default centered position for about page hero. */
.about-page .hero-enhanced {
    background-position:center center
}

/* Services Page Hero Image Position: Default centered position for services page hero. */
.services-page .hero-enhanced {
    background: center center
}

/* Contact Page Hero Image Position: Customized position for the contact page hero image. */
.contact-page .hero-enhanced {
    background-position:40% 70%
}

/* Home Page Hero Image Position: Default centered position for homepage hero, can be overridden if needed. */
.home-page .hero-enhanced {
    background: center center
}

/* --- END PAGE-SPECIFIC HERO IMAGE POSITIONING --- */

/* --- PAGE-SPECIFIC HEADER BACKGROUNDS --- */
/* Customizes the background color/gradient of the main header bar for each individual page. */
/* REMOVED PAGE-SPECIFIC HEADERS TO USE GLOBAL DEFAULT */

/* Header Background for Home Page: Example of a custom gradient. */
/* .home-page .main-header { */
/* background: linear-gradient(90deg, #BBDEFB, #90CAF9); */
/* } */

/* Header Background for About Page: Example of a custom gradient. */
/* .about-page .main-header { */
/* background: linear-gradient(90deg, #E8F5E9, #C8E6C9); */
/* } */

/* Header Background for Services Page: Example of a custom gradient. */
/* .services-page .main-header { */
/* background: linear-gradient(90deg, #F3E5F5, #E1BEE7); */
/* } */

/* Header Background for Projects Page: Example of a custom gradient. */
/* .projects-page .main-header { */
/* background: linear-gradient(90deg, #FFFDE7, #FFF9C4); */
/* } */

/* Header Background for Contact Page: Example of a solid color. */
/* .contact-page .main-header { */
/* background: #F5F5F5; */
/* } */

/* --- END PAGE-SPECIFIC HEADER BACKGROUNDS --- */

/* --- PAGE-SPECIFIC CTA BANNER BACKGROUNDS --- */
/* Customizes the background color/gradient of the Call-to-Action banner for each individual page. */
/* REMOVED PAGE-SPECIFIC CTA BANNERS TO USE GLOBAL DEFAULT */

/* CTA Banner Background for Home Page: Example of a custom gradient. */
/* .home-page .cta-banner { */
/* background: linear-gradient(120deg, #64B5F6, #90CAF9); */
/* } */

/* CTA Banner Background for About Page: Example of a custom gradient. */
/* .about-page .cta-banner { */
/* background: linear-gradient(120deg, #42A5F5, #2196F3); */
/* } */

/* CTA Banner Background for Services Page: Example of a custom gradient. */
/* .services-page .cta-banner { */
/* background: linear-gradient(120deg, #90CAF9, #64B5F6); */
/* } */

/* CTA Banner Background for Projects Page: Example of a custom gradient. */
/* .projects-page .cta-banner { */
/* background: linear-gradient(120deg, #1E88E5, #1976D2); */
/* } */

/* CTA Banner Background for Contact Page: Example of a custom gradient. */
/* .contact-page .cta-banner { */
/* background: linear-gradient(120deg, #BBDEFB, #90CAF9); */
/* } */

/* --- END PAGE-SPECIFIC CTA BANNER BACKGROUNDS --- */