/* ========================================
   MASTER HEADER FIX - SINGLE SOURCE OF TRUTH
   All header styling controlled from this file only
   ======================================== */

/* ========================================
   1. RESET - Remove all default spacing
   ======================================== */
html {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 95px !important; /* Space for fixed header */
    overflow-x: hidden !important;
}

/* Remove any spacing before first element */
body > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ========================================
   HOME PAGE - Hero Slider Fix
   Ensure hero slider doesn't overlap header
   ======================================== */
.hero-slider-wrapper,
.hero-slide {
    position: relative !important;
    z-index: 1 !important; /* Keep below header (header z-index: 999999) */
    margin-top: 0 !important;
}

/* Ensure all home page sections stay below header */
.why-choose-us-container,
.clean-energy-section,
.service-solutions-section,
.our-expert-container,
.how-it-works-section,
.projects-container,
.testimonial-container {
    position: relative !important;
    z-index: 1 !important;
}

/* ========================================
   2. HEADER - Fixed 80px height on all pages
   ======================================== */
header.top-navbar,
.top-navbar,
body > header,
body header:first-of-type {
    /* Position - NUCLEAR: Must stay on top of EVERYTHING including hero slider */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999999 !important; /* MAXIMUM priority - higher than hero slider */

    /* Size */
    width: 100% !important;
    height: 95px !important;
    min-height: 95px !important;
    max-height: 95px !important;

    /* Spacing */
    margin: 0 !important;
    padding: 8px 20px !important;

    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 25px !important;
    flex-wrap: nowrap !important;

    /* Appearance - SOLID WHITE BACKGROUND */
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    box-sizing: border-box !important;

    /* Prevent any transparency */
    opacity: 1 !important;
    visibility: visible !important;
}

/* ========================================
   3. LOGO SECTION - Left side
   ======================================== */
.top-navbar > a:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

/* Logo Image - INCREASED SIZE TO 85px - MAXIMUM VISIBILITY */
.header-logo,
.top-navbar img,
header.top-navbar img,
.top-navbar > a > img {
    display: block !important;
    height: 85px !important;
    width: auto !important;
    position: relative !important;
    z-index: 99999999 !important; /* MAXIMUM - Always on top */
    background: transparent !important;
}

/* Logo Link Container - Ensure fully visible */
.top-navbar > a:first-child,
header.top-navbar > a:first-child {
    position: relative !important;
    z-index: 99999999 !important;
    display: flex !important;
    align-items: center !important;
}

/* Company Name - INCREASED SIZE */
.company-name,
.top-navbar > a span,
.top-navbar > a:first-child > span {
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    position: relative !important;
    z-index: 99999999 !important;
}

/* Desktop Navigation - Always visible */
.desktop-nav {
    z-index: 99999999 !important;
    position: relative !important;
}

/* ========================================
   4. DESKTOP NAVIGATION - Center/Right
   ======================================== */
.desktop-nav {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    z-index: 999999 !important;
}

.desktop-nav .menu {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 2px !important;
    align-items: center !important;
}

.desktop-nav .menu > li {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================
   5. MENU ITEMS - Uniform styling
   ======================================== */
.desktop-nav .menu > li > a {
    display: inline-block !important;
    padding: 12px 12px !important;
    color: #333 !important;
    text-decoration: none !important;
    font-family: Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

/* Hide all menu icons */
.menu-icon {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* Hover effect */
.desktop-nav .menu > li > a:hover {
    background: #f8f9fa !important;
    color: #34530a !important;
}

/* Active/Current page - BIGGER SIZE */
.desktop-nav .menu > li.active > a,
.desktop-nav .menu > li.contact-special.active > a {
    color: #34530a !important;
    font-size: 17px !important;
    font-weight: bold !important;
    transform: scale(1.1) !important;
}

/* ========================================
   6. DROPDOWN MENUS
   ======================================== */
.desktop-nav .submenu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: white !important;
    border: 2px solid #34530a !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(52, 83, 10, 0.15) !important;
    min-width: 200px !important;
    max-width: 300px !important;
    padding: 8px !important;
    list-style: none !important;
    margin: 8px 0 0 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
    z-index: 9999999 !important;
    display: block !important;
}

.desktop-nav .dropdown:hover > .submenu,
.desktop-nav .has-mega-menu:hover > .submenu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.desktop-nav .submenu li a {
    display: block !important;
    padding: 10px 12px !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

.desktop-nav .submenu li a:hover {
    background: #34530a !important;
    color: white !important;
}

/* ========================================
   7. LANGUAGE SELECTOR & GET A QUOTE BUTTON
   ======================================== */
.language-selector-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 10px !important;
    flex-shrink: 0 !important;
}

#custom_language_selector {
    height: 34px !important;
    padding: 6px 26px 6px 10px !important;
    border: 2px solid #34530a !important;
    border-radius: 18px !important;
    background: white !important;
    color: #34530a !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    min-width: 130px !important;
}

.get-a-quote-btn {
    display: inline-flex !important;
    align-items: center !important;
    height: 34px !important;
    padding: 6px 16px !important;
    margin-left: 5px !important;
    font-size: 13px !important;
    border-radius: 18px !important;
    flex-shrink: 0 !important;
}

/* ========================================
   8. MOBILE MENU - Hidden on desktop
   ======================================== */
.menu-toggle {
    display: none !important;
}

.mobile-nav {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 320px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    background: white !important;
    box-shadow: -5px 0 20px rgba(0,0,0,0.2) !important;
    transition: right 0.3s ease !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
}

.mobile-nav.active {
    right: 0 !important;
}

.mobile-backdrop {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-backdrop.active {
    display: block !important;
    opacity: 1;
}

@media (max-width: 1024px) {
    /* CRITICAL: Force hide desktop navigation */
    .desktop-nav,
    nav.desktop-nav,
    .top-navbar .desktop-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* CRITICAL: Show hamburger menu button */
    .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 45px !important;
        height: 45px !important;
        background: transparent !important;
        border: 2px solid #34530a !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        padding: 8px !important;
        flex-shrink: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .menu-toggle svg {
        width: 28px !important;
        height: 28px !important;
    }

    /* Show mobile navigation */
    .mobile-nav {
        display: block !important;
    }

    /* Hide language selector and quote button on mobile (they're in mobile menu) */
    .language-selector-wrapper,
    .desktop-get-a-quote-btn {
        display: none !important;
    }
}

/* ========================================
   9. PAGE CONTENT - Proper spacing below header
   ======================================== */
/* Common page section (green breadcrumb on ALL non-home pages) - INCREASE HEIGHT */
.common-page-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
}

.common-page-container {
    padding: 35px 20px !important;
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Increase heading size in green banner */
.common-page-container h1 {
    font-size: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* Hero sections on homepage */
.hero-slider-wrapper,
.hero-slider-container2,
.banner-section {
    margin-top: 0 !important;
}

/* All page content stays below header */
main,
section,
.content-wrapper {
    position: relative !important;
    z-index: 1 !important;
}

/* ========================================
   10. RESPONSIVE - Mobile & Tablet
   ======================================== */
@media (max-width: 768px) {
    body {
        padding-top: 60px !important;
    }

    .top-navbar {
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        padding: 10px 15px !important;
    }

    .header-logo {
        height: 40px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    body {
        padding-top: 70px !important;
    }

    .top-navbar {
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
    }

    .header-logo {
        height: 45px !important;
    }
}

/* ========================================
   11. FORCE OVERRIDES - Maximum Priority
   ======================================== */
/* Ensure header is always on top */
header.top-navbar {
    z-index: 999999 !important;
}

/* Ensure no other element interferes */
body > * {
    position: relative !important;
}

body > header.top-navbar {
    position: fixed !important;
}

/* Remove any conflicting transforms or positions */
html, body {
    transform: none !important;
}

/* ========================================
   12. BLOG/NEWS PAGE - CENTER CONTENT
   ======================================== */
/* Center the news/blog page content horizontally */
.latest-news-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.latest-news-container h2 {
    text-align: center !important;
    margin-bottom: 40px !important;
}

/* Center the masonry grid */
.masonry-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 30px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* Blog cards */
.latest-news-grid-card {
    flex: 0 1 calc(33.333% - 20px) !important;
    max-width: 380px !important;
    margin: 0 !important;
}

/* Responsive for blog grid */
@media (max-width: 1024px) {
    .latest-news-grid-card {
        flex: 0 1 calc(50% - 20px) !important;
    }
}

@media (max-width: 768px) {
    .latest-news-grid-card {
        flex: 0 1 100% !important;
    }

    .latest-news-container {
        padding: 30px 15px !important;
    }
}

/* ========================================
   12B. CONTACT PAGE - Remove extra center icon
   ======================================== */
/* Hide any duplicate or extra floating icons on contact page */
body:has(.modern-contact-wrapper) .floating-btn:not(.whatsapp-btn):not(.call-btn) {
    display: none !important;
}

/* Hide extra icons in center */
.modern-contact-wrapper .floating-btn,
.modern-contact-container .floating-btn {
    display: none !important;
}

/* Only show the fixed right-side buttons */
body > .floating-btn.whatsapp-btn,
body > .floating-btn.call-btn {
    display: block !important;
}

/* ========================================
   13. FLOATING BUTTONS - WhatsApp, Call & Back to Top
   ======================================== */

/* WhatsApp Button - Fixed to right side, fully visible */
.whatsapp-btn,
.floating-btn.whatsapp-btn,
a[href*="wa.me"] {
    position: fixed !important;
    right: 20px !important;
    bottom: 150px !important;
    left: auto !important;
    z-index: 99999 !important;
    width: 55px !important;
    height: 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background-color: #25D366 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    font-size: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* Call Button - Fixed to right side, fully visible, HIDE TEXT COMPLETELY */
.call-btn,
.floating-btn.call-btn {
    position: fixed !important;
    right: 20px !important;
    bottom: 85px !important;
    left: auto !important;
    z-index: 99999 !important;
    width: 55px !important;
    height: 55px !important;
    display: block !important;
    border-radius: 50% !important;
    background-color: #0d6efd !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    padding: 0 !important;
    text-decoration: none !important;
}

/* Hide all text/number inside call button */
.call-btn *:not(img),
.call-btn::before,
.call-btn::after {
    display: none !important;
}

/* Show only image in call button */
.call-btn img {
    display: block !important;
    margin: 0 auto !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* ========================================
   BUTTON STYLING - GREEN BACKGROUND
   ======================================== */
/* Force all "Get A Quote" buttons to have GREEN background */
.get-a-quote-btn-bg,
a.get-a-quote-btn-bg,
.get-a-quote-btn {
    background: #34530a !important;
    background-color: #34530a !important;
    color: #ffffff !important;
}

.get-a-quote-btn-bg:hover,
a.get-a-quote-btn-bg:hover,
.get-a-quote-btn:hover {
    background: #5ab348 !important;
    background-color: #5ab348 !important;
    color: #ffffff !important;
}

.get-a-quote-btn-bg:hover::before,
.get-a-quote-btn-bg:hover::after {
    background: #5ab348 !important;
}

/* ========================================
   HOME PAGE FIX - Hero Slider BELOW Header
   ======================================== */

/* HOME PAGE: Hero slider must stay BELOW header */
.hero-slider-wrapper {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.hero-slide {
    position: relative !important;
    z-index: 1 !important;
}

/* All home page sections stay below header */
.why-choose-us-container,
.clean-energy-section,
.service-solutions-section,
.our-expert-container,
.how-it-works-section,
.projects-container,
.testimonial-container {
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure NO negative margins pushing content up */
body > *:first-child,
.hero-slider-wrapper:first-child {
    margin-top: 0 !important;
}

/* Back to Top Button - Fixed to right side, fully visible */
.scroll-to-top-button,
button.scroll-to-top-button {
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;
    left: auto !important;
    z-index: 99999 !important;
    width: 55px !important;
    height: 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background-color: #34530a !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
}

/* Make button images fully visible at ORIGINAL size */
.whatsapp-btn img,
.call-btn img,
.scroll-to-top-button img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
    display: block !important;
    margin: auto !important;
}

/* Hover effect for buttons */
.whatsapp-btn:hover,
.call-btn:hover,
.scroll-to-top-button:hover {
    transform: scale(1.15) !important;
    transition: transform 0.3s ease !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
}

/* Mobile responsive for buttons - smaller size */
@media (max-width: 768px) {
    .whatsapp-btn {
        right: 15px !important;
        bottom: 130px !important;
        width: 50px !important;
        height: 50px !important;
    }

    .call-btn {
        right: 15px !important;
        bottom: 75px !important;
        width: 50px !important;
        height: 50px !important;
    }

    .scroll-to-top-button {
        right: 15px !important;
        bottom: 15px !important;
        width: 50px !important;
        height: 50px !important;
    }

    .whatsapp-btn img,
    .call-btn img,
    .scroll-to-top-button img {
        width: 24px !important;
        height: 24px !important;
    }
}