/* Global Styles */
:root {
    --lime: #ec5e2a;
    /* Brand Orange */
    --lime-hover: #d44d1e;
    --brand-blue: #3498db;
    --dark: #0A0A0A;
    --dark-secondary: #3498db;
    --gray-light: #F4F4F4;
    --gray-text: #666666;
    --white: #FFFFFF;
    --font-main: 'Outfit', sans-serif;
    --border-radius: 12px;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-main);
}

body {
    background-color: var(--white);
    color: var(--dark);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Utilities */
.btn-primary {
    background-color: var(--white);
    color: var(--dark);
    padding: 14px 32px;
    /* Slightly larger for professional feel */
    border-radius: 8px;
    /* Professional rounded rectangle */
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* Add depth */
}

.btn-primary:hover {
    background-color: var(--lime);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(236, 94, 42, 0.4);
    /* Lime glow */
}

.btn-lime {
    background-color: var(--lime);
    color: var(--dark);
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    cursor: pointer;
}

.btn-lime:hover {
    background-color: var(--lime-hover);
    transform: translateY(-2px);
}

.btn-hero-cta {
    background: linear-gradient(135deg, var(--lime), #d44d1e);
    /* Gradient for depth */
    color: var(--white);
    padding: 16px 36px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    box-shadow: 0 10px 25px rgba(236, 94, 42, 0.4);
    /* Strong Brand Glow */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.btn-hero-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-20deg) translateX(-150%);
    transition: 0.5s;
    z-index: -1;
}

.btn-hero-cta:hover {
    transform: translateY(-4px) scale(1.05);
    /* Clickable lift effect */
    box-shadow: 0 15px 35px rgba(236, 94, 42, 0.6);
    /* Intensified Glow */
}

.btn-hero-cta:hover::before {
    transform: skewX(-20deg) translateX(150%);
    /* Shine effect */
}

.btn-hero-cta i {
    transition: transform 0.3s ease;
}

.btn-hero-cta:hover i {
    transform: translateX(5px);
}

.small-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--gray-text);
}

.highlight {
    font-style: italic;
    color: var(--dark);
    font-weight: 400;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 30px;
    /* Fixed padding for better control */
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: transparent;
    /* Completely transparent by default */
    color: var(--white);
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    /* Prevent squashing */
}

.logo img {
    height: 55px;
    /* Slightly reduced base size */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: height 0.3s ease;
}

.nav-links {
    display: flex;
    gap: 15px;
    /* Significantly reduced gap from 40px */
    background: rgba(255, 255, 255, 0.1);
    /* Lighter background for cleaner look */
    padding: 10px 25px;
    /* Reduced padding */
    border-radius: 50px;
    backdrop-filter: blur(20px);
    /* Stronger blur */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Subtle border */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    /* Shadow for depth */
}

.nav-links li {
    position: relative;
    flex-shrink: 0;
}

.nav-links a {
    color: var(--white);
    font-size: 0.95rem;
    /* Slightly smaller font */
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    /* Reduced padding */
    border-radius: 20px;
    transition: all 0.3s ease;
    white-space: nowrap;
    /* Prevent wrapping */
}

/* Laptop Optimization (1366px - 1600px) */
@media screen and (max-width: 1600px) {
    .navbar {
        padding: 15px 20px;
        /* Minimal padding */
    }

    .nav-links {
        gap: 10px;
        /* Tighter gap */
        padding: 8px 20px;
        /* Minimal container padding */
        width: auto;
    }

    .nav-links a {
        font-size: 0.9rem;
        /* Smaller font */
        padding: 6px 10px;
        /* Tighter item padding */
    }

    .logo img {
        height: 45px;
        /* Balanced size */
    }

    .contact-btn {
        padding: 12px 20px;
        /* Smaller button */
        font-size: 0.9rem;
    }
}

/* Tablet Optimization (968px - 1200px) */
@media screen and (max-width: 1200px) {
    .nav-links {
        gap: 15px;
        padding: 12px 20px;
    }

    .nav-links a {
        font-size: 0.85rem;
        padding: 6px 10px;
    }
}

.nav-links a.active,
.nav-links a:hover {
    opacity: 1;
    color: var(--dark);
    /* Dark text for contrast against white light */
    background: rgba(255, 255, 255, 0.9);
    /* White light highlight */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
    /* Glow effect */
}

.contact-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    background: var(--white);
    color: var(--lime-hover);
    padding: 15px 30px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid var(--white);
    transition: var(--transition);
    white-space: nowrap;
    /* Prevent text wrapping */
    flex-shrink: 0;
    /* Prevent button from disappearing */
}

.contact-btn:hover {
    background: #ec5e2a;
    color: var(--white);
    border-color: #ec5e2a;
    box-shadow: 0 0 20px rgba(236, 94, 42, 0.4);
    transform: translateY(-2px);
}

/* Dropdown Menu Styles */
.nav-links li {
    position: relative;
    display: flex;
    align-items: center;
}



.nav-links .dropdown>a {
    gap: 8px;
    display: flex;
    align-items: center;
}

.dropdown-icon {
    font-size: 0.7em;
    transition: transform 0.3s ease;
}

.nav-links .dropdown:hover .dropdown-icon {
    transform: rotate(180deg);
}

/* Bridge to prevent menu closing when moving cursor */
.nav-links .dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 25px;
}

/* Scrolled Navbar State */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 15px 5%;
    /* Slightly more compact */
}

/* Text Turns Black */
.navbar.scrolled .nav-links a {
    color: var(--dark);
    background: transparent;
    /* Reset highlight bg */
    box-shadow: none;
}

.navbar.scrolled .nav-links a.active,
.navbar.scrolled .nav-links a:hover {
    color: var(--lime);
    background: rgba(0, 0, 0, 0.05);
    /* Subtle dark bg on hover */
    box-shadow: none;
}

/* Adjust Dropdown Icon */
.navbar.scrolled .dropdown-icon {
    color: var(--dark);
}

.navbar.scrolled .nav-links .dropdown:hover .dropdown-icon {
    color: var(--lime);
}

/* Invert Logo - Removed as per user request to keep original logo */
.navbar.scrolled .logo img {
    filter: none;
}

/* Adjust Button for White BG */
.navbar.scrolled .contact-btn {
    background: var(--lime);
    color: var(--white);
    border-color: var(--lime);
}

.navbar.scrolled .contact-btn:hover {
    background: var(--lime-hover);
    border-color: var(--lime-hover);
    color: var(--white);
}

/* Hamburger - Hidden on Desktop by Default */
.hamburger {
    display: none;
}

/* Adjust Hamburger for Mobile */
.navbar.scrolled .hamburger .bar {
    background-color: var(--dark);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #ffffff;
    min-width: 280px;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Arrow indicator */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #ffffff;
}

.nav-links .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-links .dropdown-menu li {
    width: 100%;
    margin: 0;
}

/* Override existing nav a styles for dropdown items */
.nav-links .dropdown-menu a {
    color: var(--dark) !important;
    padding: 10px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 8px;
    background: transparent !important;
    box-shadow: none !important;
    display: block;
    width: 100%;
    text-align: left;
    opacity: 1;
    text-shadow: none;
    letter-spacing: 0;
}

.nav-links .dropdown-menu a:hover {
    background: var(--gray-light) !important;
    color: var(--lime) !important;
    transform: translateX(5px);
    box-shadow: none !important;
}

/* Nested Dropdown Styles (Added) */
.dropdown-sub {
    position: relative;
    width: 100%;
}

.dropdown-sub-menu {
    position: absolute;
    top: -10px;
    /* Align slightly higher to match mouse connection */
    left: 100%;
    /* Position to the right */
    width: 260px;
    background: #ffffff;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin-left: 5px;
    /* Gap from parent */
    transform: translateX(10px);
}

.dropdown-sub:hover>.dropdown-sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Submenu Arrow indicator */
.dropdown-sub-menu::before {
    content: '';
    position: absolute;
    top: 22px;
    left: -6px;
    transform: rotate(45deg);
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Flex helper for items with arrows */
.d-flex-between {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.dropdown-sub-icon {
    font-size: 0.8em;
    opacity: 0.5;
    transition: transform 0.3s ease;
}

.dropdown-sub:hover>a .dropdown-sub-icon {
    transform: translateX(3px);
    opacity: 1;
    color: var(--lime);
}

/* Reuse existing link styles for subitems */
.dropdown-sub-menu li {
    width: 100%;
}

.dropdown-sub-menu a {
    color: var(--dark) !important;
    padding: 10px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 8px;
    background: transparent !important;
    display: block;
    width: 100%;
    text-align: left;
}

.dropdown-sub-menu a:hover {
    background: var(--gray-light) !important;
    color: var(--lime) !important;
    transform: translateX(5px);
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 850px;
    /* Slightly taller */
    /* background: removed in favor of slider */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding-bottom: 100px;
    overflow: hidden;
    /* Ensure slides don't spill */
}

.hero-bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out, transform 6s ease;
    transform: scale(1);
    z-index: 0;
}

.hero-bg.active {
    opacity: 1;
    transform: scale(1.05);
    /* Slow zoom effect */
}

.hero-overlay {
    /* unchanged */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
    z-index: 1;
}


.hero-content {
    /* unchanged */
    position: relative;
    z-index: 2;
    max-width: 1000px;
    /* Increased max-width for bigger text */
    margin-top: -40px;
    /* Adjusted alignment */
}

/* Increased Typography */
.hero-title {
    font-size: 5.5rem;
    /* Increased size */
    line-height: 1.1;
    margin-bottom: 25px;
    font-weight: 700;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.hero-subtitle {
    font-size: 1.3rem;
    /* Increased size */
    max-width: 800px;
    /* Wider reading area */
    margin: 0 auto 50px;
    opacity: 1;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    position: relative;
    flex-wrap: wrap;
    margin-top: 60px;
    /* Push down significantly */
    margin-bottom: 40px;
    /* Space for the bottom trust element */
}

/* New Trust Bar Styles */
/* New Trust Bar Styles */
.hero-trust-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    opacity: 1;
    animation: fadeUp 1s ease-out 0.5s backwards;
    flex-wrap: wrap;
    /* Ensure responsiveness */
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 24px;
    border-radius: 50px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    cursor: default;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.trust-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.trust-item i {
    color: var(--lime);
    font-size: 1.2rem;
    background: rgba(255, 255, 255, 0.1);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.trust-item span {
    color: var(--white);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.text-slider {
    position: relative;
    min-height: 250px;
    /* Reserve space for text to avoid layout jumps */
}

.text-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
    pointer-events: none;
    /* Prevent clicking hidden slides */
}

.text-slide.active {
    opacity: 1;
    transform: translateY(0);
    position: relative;
    /* Take up space */
    pointer-events: auto;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
    /* Slightly darker top for navbar contrast */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    /* Wider content area */
    margin-top: 250px;
    /* Adjusted to add more space from top */
}

.hero-title {
    font-size: 4.5rem;
    /* Larger title */
    line-height: 1.1;
    margin-bottom: 25px;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    /* Better readability */
}

.hero-subtitle {
    font-size: 1.5rem;
    max-width: 800px;
    margin: 0 auto 50px;
    opacity: 0.95;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    /* Adjusted gap */
    position: relative;
    flex-wrap: wrap;
    /* Ensure responsiveness */
}

/* Stat Badges */
.stat-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    background: rgba(20, 20, 20, 0.7);
    /* Deep, clear glass */
    padding: 14px 24px;
    border-radius: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    min-width: 250px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.stat-badge:hover {
    background: rgba(20, 20, 20, 0.9);
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* Shine effect on hover */
.stat-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: skewX(-25deg);
    transition: 0.5s;
    pointer-events: none;
}

.stat-badge:hover::after {
    left: 150%;
    transition: 0.7s;
}

/* Icon Container */
.stat-badge .icon-circle {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--brand-blue), #2980b9) !important;
    /* Force gradient override */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--white);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

/* Pulse animation for icon background */
.stat-badge .icon-circle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    background: inherit;
    z-index: -1;
    opacity: 0.5;
    transform: scale(0.9);
    transition: all 0.5s ease;
}

.stat-badge .icon-circle::before {
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.4);
        opacity: 0;
    }

    100% {
        transform: scale(0.9);
        opacity: 0;
    }
}

/* Text Styling */
.stat-badge .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-badge .text span {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
}

.stat-badge .text strong {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 0.3px;
}

/* Specific Icon Animations */
.stat-badge i {
    transition: transform 0.3s ease;
}

/* Water Icon Animation */
@keyframes wave-flow {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    25% {
        transform: translateY(-3px) rotate(-5deg);
    }

    75% {
        transform: translateY(2px) rotate(5deg);
    }
}

.stat-badge .fa-water {
    animation: wave-flow 1.5s ease-in-out infinite;
    color: #4fc3f7;
    /* Light blue */
}

/* Bolt Icon Animation */
@keyframes bolt-flash {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        text-shadow: none;
    }

    10% {
        opacity: 0.8;
        transform: scale(1.1);
        text-shadow: 0 0 10px #fff, 0 0 20px #ffd700;
    }

    20% {
        opacity: 1;
        transform: scale(1);
    }

    30% {
        opacity: 0.8;
        transform: scale(1.1);
        text-shadow: 0 0 10px #fff, 0 0 20px #ffd700;
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }
}

.stat-badge .fa-bolt {
    animation: bolt-flash 1.2s ease-in-out infinite;
    color: #ffd700;
    /* Gold */
}

/* Features Banner */
.features-banner-wrapper {
    position: relative;
    z-index: 20;
    padding: 0 5%;
    margin-top: -60px;
    /* Overlap hero section */
}

.features-banner {
    background: var(--white);
    border-bottom: 4px solid var(--lime);
    /* The green line from the image */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    /* Slight rounding */
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    /* Responsive wrap */
    gap: 30px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    /* Distribute space */
    min-width: 250px;
    justify-content: center;
    /* Center content in item */
}

.f-icon {
    width: 65px;
    height: 65px;
    background: #1a1a1a;
    /* Dark circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.6rem;
    flex-shrink: 0;
    transition: var(--transition);
}

.f-icon:hover {
    background: var(--lime);
    transform: rotate(360deg);
    /* Playful interaction */
}

.f-icon i {
    stroke-width: 2px;
    /* Thicker icons */
}

.f-text h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--dark);
    text-transform: capitalize;
}

.f-text p {
    font-size: 0.9rem;
    color: var(--gray-text);
    margin: 0;
    font-weight: 500;
}

.hero-cards {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 10;
    width: 90%;
    max-width: 1200px;
}

.card {
    background: var(--white);
    color: var(--dark);
    padding: 25px;
    border-radius: 12px;
    /* Sharper, professional corners */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Clean border */
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

.card-content h3 {
    font-size: 1rem;
    margin-bottom: 5px;
}

.card-content p {
    font-size: 0.8rem;
    color: var(--gray-text);
}

.images-stack {
    display: flex;
}

.images-stack img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid var(--white);
    margin-left: -10px;
}

.images-stack img:first-child {
    margin-left: 0;
}

.center-card {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.center-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.center-card p {
    margin: 0;
}

.card-icon-arrow {
    width: 40px;
    height: 40px;
    border: 1px solid #eee;
    border-radius: 8px;
    /* Squared arrow container */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    transition: var(--transition);
}

.card:hover .card-icon-arrow {
    background: var(--dark);
    color: var(--white);
    border-color: var(--dark);
}

/* Intro Text */
/* About Us Section (New) */
.about-us-section {
    padding: 100px 5%;
    position: relative;
    background-color: var(--white);
    overflow: hidden;
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    /* Generous gap */
    align-items: center;
}

.about-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-content .small-label {
    text-align: left;
    color: var(--lime);
    margin-bottom: 20px;
}

.about-content h2 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 30px;
    color: var(--dark);
}

.about-desc {
    font-size: 1.1rem;
    color: var(--gray-text);
    line-height: 1.7;
    margin-bottom: 25px;
}

.about-features {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.about-features li {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark);
}

.about-features li i {
    color: var(--lime);
    font-size: 1.2rem;
    background: rgba(237, 94, 42, 0.1);
    width: 44px;
    /* Larger icon circle */
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
}

.about-features li:hover i {
    background: var(--lime);
    color: var(--white);
    transform: rotate(360deg);
}

/* Image Side & Graphics */
.about-image-wrapper {
    position: relative;
    padding-left: 20px;
    z-index: 1;
}

.image-box {
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    transform: rotate(3deg);
    /* Stylish tilt */
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    border: 5px solid var(--white);
}

.about-container:hover .image-box {
    transform: rotate(0deg) scale(1.02);
}

.image-box img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

.about-container:hover .image-box img {
    transform: scale(1.1);
}

/* Floating Badge */
.experience-badge {
    position: absolute;
    bottom: -30px;
    left: 0px;
    background: var(--white);
    padding: 24px 35px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 170px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 2;
    animation: floatBadge 4s ease-in-out infinite;
}

.experience-badge .badge-num {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--lime);
    line-height: 1;
    margin-bottom: 5px;
    font-family: var(--font-main);
}

.experience-badge .badge-txt {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dark);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes floatBadge {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .about-container {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }

    .about-content .small-label {
        text-align: center;
        margin: 0 auto 15px;
    }

    .about-features {
        align-items: center;
    }

    .about-image-wrapper {
        padding-left: 0;
        max-width: 600px;
        margin: 0 auto;
    }

    .experience-badge {
        left: 50%;
        transform: translateX(-50%);
        bottom: -25px;
        /* Disable float animation on mobile if distracting, or keep it */
        animation: floatBadge 4s ease-in-out infinite;
    }

    .image-box {
        transform: rotate(0);
    }
}

/* Stats Visuals */
.stats-visuals {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    padding: 50px 5%;
    align-items: center;
}

.left-image img {
    border-radius: 20px;
    height: 300px;
    object-fit: cover;
    width: 100%;
}

.stats-center {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 0 20px;
}

.stat-item h3 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.stat-desc {
    font-size: 0.9rem;
    color: var(--gray-text);
    margin-top: 20px;
}

.stat-desc p {
    margin-bottom: 20px;
}

.right-images {
    display: flex;
    gap: 20px;
}

.round-img {
    border-radius: 100px 100px 0 0;
    /* Arch shape */
    overflow: hidden;
    height: 200px;
    flex: 1;
}

.round-img:last-child {
    border-radius: 100px 100px 100px 100px;
    /* Capsule */
}

.round-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Accordion Section */
.accordion-section {
    padding: 100px 5%;
    background: #FAFAFA;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 2.5rem;
    line-height: 1.2;
}

.accordion-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
}

.accordion-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 600px;
}

.accordion-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.float-badge {
    position: absolute;
    background: var(--white);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.b1 {
    top: 20px;
    left: 20px;
}

.b2 {
    bottom: 30px;
    left: 20px;
}

.b3 {
    bottom: 30px;
    right: 20px;
}

.accordion-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.accordion-item {
    background: var(--white);
    padding: 20px;
    border-radius: 15px;
    transition: var(--transition);
    cursor: pointer;
}

.accordion-item.active {
    background: var(--lime);
}

.acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.acc-header .num {
    font-weight: 700;
    margin-right: 20px;
    font-size: 1.1rem;
}

.acc-header h3 {
    flex: 1;
    font-size: 1.1rem;
    font-weight: 600;
}

.acc-header .icon {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.accordion-item.active .icon {
    background: var(--dark);
    color: var(--white);
    border: none;
}

.acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-item.active .acc-body {
    max-height: 200px;
    margin-top: 15px;
}

.acc-body p {
    font-size: 0.9rem;
    padding-left: 35px;
    /* Indent to align with text */
}

/* Commitment Section */
.commitment-section {
    padding: 100px 5%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    background-color: #F0F4FF;
    /* Very light blue tint */
}

.commitment-image img {
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 10, 50, 0.1);
}

.commitment-content h2 {
    font-size: 2.5rem;
    margin: 10px 0 20px;
}

.commitment-content .desc {
    color: var(--gray-text);
    margin-bottom: 30px;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-weight: 600;
}

.check-list li i {
    color: var(--lime);
    font-size: 1.2rem;
    background: var(--dark);
    border-radius: 50%;
}

/* Projects Section */
.projects-section {
    padding: 100px 5%;
}

.projects-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
    align-items: flex-end;
}

.projects-header h2 {
    font-size: 3.5rem;
    margin-top: 10px;
    line-height: 1.1;
    font-weight: 700;
}

.projects-header .header-desc {
    max-width: 400px;
    text-align: right;
}

.projects-header .header-desc p {
    color: var(--gray-text);
    margin-bottom: 30px;
    font-size: 1.1rem;
}

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

.project-card {
    position: relative;
    border-radius: 100px;
    /* Pill shape */
    overflow: hidden;
    height: 500px;
    /* Taller */
    transition: var(--transition);
}

.project-card:hover {
    transform: translateY(-10px);
}

.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-card:hover img {
    transform: scale(1.1);
}

.p-info {
    position: absolute;
    bottom: 40px;
    left: 30px;
    color: var(--white);
    z-index: 2;
}

.p-info span {
    background: var(--lime);
    color: var(--dark);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-block;
}

.p-info h3 {
    font-size: 1.5rem;
    line-height: 1.2;
}

.project-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

/* Testimonials */
.testimonials-section {
    padding: 100px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimonials-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.testimonials-section .sub-desc {
    max-width: 600px;
    color: var(--gray-text);
    margin: 0 auto 40px;
}

.avatars-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
}

.avatars-row img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    opacity: 0.5;
    transition: var(--transition);
    cursor: pointer;
}

.avatars-row img.active,
.avatars-row img:hover {
    opacity: 1;
    transform: scale(1.1);
    border: 2px solid var(--lime);
}

.testimonial-card-large {
    display: flex;
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
    max-width: 900px;
    width: 100%;
}

.t-image {
    width: 40%;
}

.t-image img {
    height: 100%;
    object-fit: cover;
}

.t-content {
    width: 60%;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.quote-icon {
    font-size: 2rem;
    color: #ddd;
    margin-bottom: 20px;
}

.t-content h3 {
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 30px;
}

.t-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.t-author img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

.t-author div {
    display: flex;
    flex-direction: column;
}

.t-author span {
    font-size: 0.8rem;
    color: var(--gray-text);
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.dot {
    width: 12px;
    height: 12px;
    background: #e0e0e0;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--lime);
    transform: scale(1.2);
}

.dot:hover {
    background: var(--dark);
}

/* Footer */
.main-footer {
    background: #0a0f14;
    /* Much darker, richer background */
    color: #e0e0e0;
    padding: 80px 5% 30px;
    font-size: 0.95rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 60px;
    margin-bottom: 20px;
    /* Reduced from 60px */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 20px;
    /* Reduced from 60px */
}

.footer-logo-col p {
    margin-top: 25px;
    opacity: 0.7;
    line-height: 1.8;
    max-width: 300px;
}

.footer-col h4 {
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.footer-links-list {
    list-style: none;
    padding: 0;
}

.footer-links-list li {
    margin-bottom: 15px;
}

.footer-links-list a {
    color: var(--gray-text);
    /* Lighter gray for links */
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-links-list a:hover {
    color: var(--lime);
    transform: translateX(5px);
}

.contact-info-list li {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    color: #bbb;
}

.contact-info-list i {
    color: var(--lime);
    font-size: 1.2rem;
    margin-top: 5px;
}

.footer-newsletter p {
    margin-bottom: 20px;
    color: #999;
}

.footer-newsletter-form {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    /* very subtle input bg */
    border-radius: 8px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-newsletter-form input {
    background: transparent;
    border: none;
    padding: 12px 15px;
    color: var(--white);
    flex: 1;
    outline: none;
}

.footer-newsletter-form button {
    background: var(--lime);
    color: var(--dark);
    border: none;
    padding: 0 20px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.footer-newsletter-form button:hover {
    background: var(--white);
}

.footer-bottom {
    display: flex;
    justify-content: flex-start;
    /* Moved to start */
    gap: 40px;
    /* Added gap */
    align-items: center;
    padding-top: 15px;
    /* Reduced from 30px */
    font-size: 0.85rem;
    color: #666;
}

.footer-socials {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--white);
    transition: var(--transition);
}

.social-icon:hover {
    background: var(--lime);
    color: var(--dark);
    transform: translateY(-3px);
}

/* Responsive Footer */
@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

/* Professional Grid Layout (Matches Mockup) */
.professional-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr 1fr;
    gap: 60px;
    padding: 100px 5% 40px;
    align-items: start;
    background: #FAFAFA;
}

.grid-col {
    display: flex;
    flex-direction: column;
}

/* Col 1: Stats */
.stats-col {
    gap: 60px;
}

.stat-block h3 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
}

.stat-block p {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--dark);
}

.why-choose-box h4 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.why-choose-box p {
    color: var(--gray-text);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Col 2: Products */
.products-col {
    position: relative;
}

.products-header-group {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
}

.products-col h2 {
    font-size: 3rem;
    line-height: 1.1;
    font-weight: 700;
}

.circle-btn-lime {
    background: var(--lime);
    color: var(--dark);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    line-height: 1.2;
    transition: var(--transition);
    flex-shrink: 0;
}

.circle-btn-lime:hover {
    transform: scale(1.1) rotate(10deg);
}

.product-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.prod-item {
    background: var(--white);
    padding: 25px;
    border-radius: 15px;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
}

.prod-item.active {
    background: var(--lime);
    box-shadow: 0 10px 30px rgba(197, 255, 74, 0.3);
}

.prod-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.prod-header h4 {
    font-size: 1.1rem;
    font-weight: 600;
    flex: 1;
}

.prod-header .num {
    font-weight: 700;
    margin-right: 15px;
    opacity: 0.5;
}

.prod-header .icon {
    width: 30px;
    height: 30px;
    background: var(--dark);
    color: var(--lime);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.prod-item.active .prod-header .icon {
    opacity: 1;
    transform: translateX(0);
}

.prod-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.prod-item.active .prod-body {
    max-height: 200px;
    margin-top: 15px;
}

.prod-body p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--dark);
}

/* Col 3: Commitment */
.commitment-col {
    padding-left: 20px;
}

.commitment-col h2 {
    font-size: 3rem;
    line-height: 1.1;
    margin: 10px 0 30px;
}

.commitment-col p.desc {
    color: var(--gray-text);
    margin-bottom: 30px;
}

.commitment-img-card {
    border-radius: 30px;
    overflow: hidden;
    height: 300px;
    width: 100%;
}

.commitment-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Products We Offer Section */
.products-offer-section {
    padding: 40px 5% 100px;
    background-color: #f9f9f9;
    /* Light contrast bg */
}

.header-center {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.header-center h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.header-center .sub-desc {
    color: var(--gray-text);
    font-size: 1.1rem;
}

.offer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.offer-card {
    background: var(--white);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.offer-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.offer-card.popular {
    border: 2px solid var(--lime);
    transform: scale(1.05);
    z-index: 2;
}

.offer-card.popular:hover {
    transform: scale(1.05) translateY(-10px);
}

.offer-card .tag {
    position: absolute;
    top: 20px;
    right: -35px;
    background: var(--lime);
    color: var(--dark);
    padding: 5px 40px;
    transform: rotate(45deg);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.offer-header {
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.offer-header h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.offer-header .type {
    color: var(--lime);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.offer-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.offer-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    flex: 1;
}

.offer-features li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    color: var(--gray-text);
    font-size: 0.95rem;
}

.offer-features li i {
    color: var(--lime);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.offer-btn {
    display: block;
    text-align: center;
    background: var(--dark);
    color: var(--white);
    padding: 15px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.offer-btn:hover {
    background: var(--lime);
    color: var(--dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(197, 255, 74, 0.4);
}

/* Update Responsive for Grid */
@media (max-width: 1200px) {
    .professional-grid {
        grid-template-columns: 1fr 1fr;
    }

    .commitment-col {
        grid-column: span 2;
        padding-left: 0;
        margin-top: 50px;
    }
}

@media (max-width: 768px) {
    .professional-grid {
        grid-template-columns: 1fr;
        padding: 60px 5% 30px;
        gap: 40px;
    }

    .commitment-col {
        grid-column: span 1;
    }

    .circle-btn-lime {
        width: 80px;
        height: 80px;
        font-size: 0.8rem;
    }
}

/* Responsive */
@media (max-width: 1024px) {

    .stats-visuals,
    .accordion-container,
    .commitment-section,
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .hero-title {
        font-size: 3rem;
    }

}

/* Product Showcase (ZigZag) */
.product-showcase {
    padding: 80px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.zigzag-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 100px;
}

.zigzag-row.reverse {
    flex-direction: row-reverse;
    margin-bottom: 0;
}

/* Residential Case Studies Page Styles */

/* Header */
.case-studies-header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/irish_solar_home.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding: 0 20px;
    margin-top: 80px;
    /* Offset for fixed navbar */
}

.case-studies-header .header-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.case-studies-header .header-content p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.9;
}

/* Intro Section */
.cs-intro-container {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto 80px;
    padding: 60px 20px;
}

.cs-intro-text {
    flex: 1;
}

.cs-intro-image {
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.cs-intro-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.cs-intro-image:hover img {
    transform: scale(1.05);
}

.cs-features-list {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

.cs-features-list li {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cs-features-list li i {
    color: var(--lime);
    font-size: 1.2rem;
}

/* Case Studies Grid */
.case-studies-grid-section {
    background-color: #f8f9fa;
    padding: 80px 20px;
}

.case-studies-grid-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 60px;
    text-align: center;
}

.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.cs-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.cs-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.cs-card-img {
    height: 240px;
    position: relative;
    overflow: hidden;
}

.cs-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.cs-card:hover .cs-card-img img {
    transform: scale(1.1);
}

.cs-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--lime);
    color: var(--dark);
    padding: 6px 16px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.8rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.cs-card-content {
    padding: 30px;
}

.cs-card-content h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.cs-card-content .location {
    color: var(--gray-text);
    font-size: 0.95rem;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cs-card-content .location i {
    color: var(--lime);
}

.cs-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #eee;
}

.spec-item {
    display: flex;
    flex-direction: column;
}

.spec-item .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #aaa;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 4px;
}

.spec-item .value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dark);
}

.cs-result {
    background: rgba(197, 255, 74, 0.15);
    /* Light lime bg */
    padding: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.cs-result i {
    color: #7ab317;
    /* Darker lime for icon visibility */
    font-size: 1.2rem;
}

.cs-result span {
    font-size: 0.9rem;
    color: var(--dark);
}

.cs-quote {
    font-style: italic;
    color: var(--gray-text);
    font-size: 0.95rem;
    border-left: 3px solid var(--lime);
    padding-left: 15px;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 900px) {
    .cs-intro-container {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .cs-features-list li {
        justify-content: center;
    }

    .case-studies-header {
        height: 300px;
    }

    .case-studies-header .header-content h1 {
        font-size: 2.5rem;
    }
}

.zigzag-image {
    flex: 1;
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.zigzag-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.image-label {
    background: var(--lime);
    color: var(--white);
    text-align: center;
    padding: 15px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.zigzag-content {
    flex: 1;
}

.zigzag-content h2 {
    font-size: 2.2rem;
    color: var(--gray-text);
    /* Based on image sample, headings looked dark grey */
    margin-bottom: 20px;
    color: #444;
}

.zigzag-content p {
    color: var(--gray-text);
    line-height: 1.6;
    margin-bottom: 30px;
    font-size: 1.05rem;
}

.zigzag-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-blue);
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: var(--transition);
}

.zigzag-link:hover {
    color: var(--lime-hover);
    gap: 12px;
}

@media (max-width: 900px) {

    .zigzag-row,
    .zigzag-row.reverse {
        flex-direction: column;
        gap: 30px;
        text-align: left;
    }

    .zigzag-image img {
        height: 300px;
    }
}

/* Components / Products Section (New) */
.components-section {
    padding: 100px 5%;
    background: var(--white);
}

.components-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

/* Brands Grid */
.brands-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.brand-item {
    background: var(--white);
    border: 1px solid #eee;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 15px;
    /* Increased padding */
    transition: var(--transition);
    cursor: pointer;
}

.brand-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    /* Optional: make them grayscale initially like many brand grids */
    opacity: 0.7;
    transition: var(--transition);
}

.brand-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

.brand-item.active,
.brand-item:hover {
    border-color: var(--brand-blue);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transform: translateY(-5px);
}

.brand-item.active img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* Product Highlight Slider */
.product-highlight-slider {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.highlight-shape-bg {
    position: absolute;
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, #00C6FF, #0072FF);
    /* Cyan/Blue gradient */
    border-radius: 40px;
    transform: rotate(45deg);
    z-index: 1;
    box-shadow: 0 20px 40px rgba(0, 114, 255, 0.3);
}

.highlight-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.highlight-content .product-img {
    max-height: 280px;
    width: auto;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.2));
    transition: transform 0.5s ease;
}

.highlight-content:hover .product-img {
    transform: scale(1.05);
}

.slider-controls {
    margin-top: 30px;
    display: flex;
    gap: 20px;
}

.s-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background: var(--white);
    color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

.s-btn:hover {
    background: var(--lime);
    color: var(--white);
    transform: scale(1.1);
}

/* Responsive */
@media (max-width: 900px) {
    .components-container {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .product-highlight-slider {
        order: -1;
    }
}

/* Smart Solutions Section (Inspiration Recreate) */
.smart-solutions-section {

    padding: 100px 5%;
    overflow: hidden;
}

.solutions-container {
    display: grid;
    grid-template-columns: 350px 1fr 1.2fr;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    min-height: 600px;
}

/* Column 1: Info */
.sol-info-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    padding-top: 20px;
}

.sol-subtitle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-text);
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.sol-subtitle::before,
.sol-subtitle::after {
    content: '';
    display: block;
    height: 1px;
    width: 20px;
    background: var(--dark);
}

.sol-info-col h2 {
    font-size: 3.5rem;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 40px;
    color: var(--dark);
}

.btn-all-services {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ed5e2a;
    /* Zolar Lime */
    color: var(--dark);
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    align-self: flex-start;
    transition: var(--transition);
}

.btn-all-services i {
    background: var(--dark);
    color: #ed5e2a;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transform: rotate(-45deg);
    transition: var(--transition);
}

.btn-all-services:hover {
    background: var(--dark);
    color: #ed5e2a;
}

.btn-all-services:hover i {
    background: #ed5e2a;
    color: var(--dark);
}

.sol-deco-img {
    margin-top: auto;
    max-width: 250px;
}

/* Column 2: List */
.sol-list-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.sol-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    border-radius: 8px;
    /* Slightly squarer than others */
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sol-item-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sol-item-content i {
    font-size: 1.5rem;
    width: 30px;
    text-align: center;
    color: var(--dark);
    transition: var(--transition);
}

.sol-item-content span {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark);
    transition: var(--transition);
    cursor: pointer;
}

.sol-item-content:hover span {
    color: #ec5e2a;
}

.sol-arrow {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

/* Active State */
.sol-item.active {
    background: var(--dark);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.sol-item.active .sol-item-content i,
.sol-item.active .sol-item-content span {
    color: var(--white);
}

.sol-item.active .sol-arrow {
    background: #ed5e2a;
    opacity: 1;
    transform: translateX(0);
}

/* Column 3: Preview Image */
.sol-preview-col {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 600px;
}

.sol-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.intro-card {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background: var(--white);
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    max-width: 300px;
}

.play-icon {
    width: 50px;
    height: 50px;
    background: #d4eebc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    flex-shrink: 0;
    cursor: pointer;
    transition: var(--transition);
}

.play-icon:hover {
    background: #ed5e2a;
    transform: scale(1.1);
}

.intro-text h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.intro-text p {
    font-size: 0.75rem;
    color: var(--gray-text);
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 1100px) {
    .solutions-container {
        grid-template-columns: 1fr 1fr;
    }

    .sol-preview-col {
        grid-column: span 2;
        height: 400px;
    }

    .sol-deco-img {
        display: none;
    }
}

@media (max-width: 768px) {
    .solutions-container {
        grid-template-columns: 1fr;
    }

    .sol-preview-col {
        grid-column: span 1;
    }

    .sol-info-col h2 {
        font-size: 2.5rem;
    }
}

/* Features & Testimonial Split Section (New) */
.features-split-section {
    padding: 100px 5%;
    background-color: #ffffff;
    /* Clean white bg */
    overflow: hidden;
}

.features-split-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    /* Image side slightly smaller */
    gap: 80px;
    align-items: center;
}

/* Left Column: Image Card */
.feat-image-col {
    position: relative;
}

.testimonial-image-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    height: 500px;
    /* Fixed height for consistency */
}

.testimonial-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.testimonial-image-card:hover img {
    transform: scale(1.05);
}

.testi-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.6) 70%, transparent);
    padding: 40px 30px 30px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.testi-overlay .quote-icon {
    font-size: 2rem;
    color: var(--white);
    opacity: 0.8;
}

.testi-overlay p {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.9;
    font-style: italic;
}

.testi-overlay .author {
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 15px;
    text-align: right;
}

.testi-overlay .author strong {
    display: block;
    font-size: 1.1rem;
    color: var(--white);
}

.testi-overlay .author span {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Pagination Dots below image */
.feat-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
}

.feat-slider-dots .f-dot {
    width: 10px;
    height: 10px;
    background: #000;
    transform: rotate(45deg);
    /* Diamond shape like in design */
    opacity: 0.2;
    transition: all 0.3s ease;
    cursor: pointer;
}

.feat-slider-dots .f-dot.active {
    background: #CAE28E;
    /* Lime Green */
    opacity: 1;
    transform: rotate(45deg) scale(1.2);
}


/* Right Column: Content */
.feat-content-col {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.feat-label {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gray-text);
    letter-spacing: 1px;
}

.feat-label .deco-line {
    height: 1px;
    width: 30px;
    background: #ccc;
    position: relative;
    display: inline-block;
}

/* Optional diamond ends on lines */
.feat-label .deco-line::before {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: #ccc;
    transform: rotate(45deg);
    top: -2px;
}

.feat-label .deco-line:first-child::before {
    right: -2px;
}

.feat-label .deco-line:last-child::before {
    left: -2px;
}


.feat-content-col h2 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--dark);
    margin-bottom: 20px;
}

.feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 30px;
    margin-bottom: 30px;
}

.feat-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.feat-icon-check {
    width: 24px;
    height: 24px;
    background: transparent;
    border: 2px solid #ed5e2a;
    /* Lime border circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--dark);
    font-size: 0.7rem;
    margin-top: 2px;
}

.feat-text h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--dark);
}

.feat-text p {
    font-size: 0.9rem;
    color: var(--gray-text);
    line-height: 1.5;
}

/* Know More Button */
.btn-know-more {
    align-self: flex-start;
    background-color: #057dbe;
    /* The specific lime from the design */
    color: var(--white);
    padding: 12px 20px 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    transition: var(--transition);
}

.btn-know-more .btn-icon {
    width: 32px;
    height: 32px;
    background: #ed5e2a;
    border-radius: 50%;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.btn-know-more:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(187, 113, 10, 0.4);
}

.btn-know-more:hover .btn-icon {
    transform: rotate(45deg);
}

/* Responsive */
@media (max-width: 992px) {
    .features-split-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .testimonial-image-card {
        height: 400px;
    }

    .feat-content-col h2 {
        font-size: 2.2rem;
    }

    .feat-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background-color: #25D366;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transition: all 0.3s ease;
    text-decoration: none;
}

.whatsapp-float:hover {
    background-color: var(--lime);
    color: #fff;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 20px rgba(237, 94, 42, 0.4);
}

/* Blog Section Styles */
.blog-section {
    padding: 100px 5%;
    background-color: var(--gray-light);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto 0;
}

.blog-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.blog-img-wrapper {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.blog-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-img-wrapper img {
    transform: scale(1.1);
}

.blog-date {
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--lime);
    color: var(--white);
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    border-top-right-radius: 12px;
}

.blog-date .day {
    font-size: 1.4rem;
    font-weight: 700;
}

.blog-date .month {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 500;
}

.blog-content {
    padding: 25px;
}

.blog-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 0.85rem;
    color: var(--gray-text);
}

.blog-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.blog-meta i {
    color: var(--lime);
}

.blog-card h3 {
    margin-bottom: 12px;
    line-height: 1.4;
}

.blog-card h3 a {
    color: var(--dark);
    font-size: 1.25rem;
    font-weight: 700;
    transition: var(--transition);
}

.blog-card h3 a:hover {
    color: var(--lime);
}

.blog-card p {
    color: var(--gray-text);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dark);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    transition: var(--transition);
}

.read-more-link i {
    color: var(--lime);
    transition: transform 0.3s ease;
}

.read-more-link:hover {
    color: var(--lime);
}

.read-more-link:hover i {
    transform: translateX(5px);
}

/* Responsive Blog */
@media (max-width: 900px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================= 
   Page Specific Styles - Moved from HTML 
   ========================================= */

/* --- Animations --- */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Common Page Header --- */
.page-header {
    background-size: cover;
    background-position: center;
    height: 400px;
    /* Default height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    /* Offset for fixed top-bar (50px) + fixed navbar */
    margin-top: 130px;
    position: relative;
    overflow: hidden;
}

/* Mobile: top-bar hidden, only navbar offset needed */
@media (max-width: 992px) {
    .page-header {
        margin-top: 80px;
    }
}

.page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to top, #fff, transparent);
}

.page-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    animation: fadeInDown 0.8s ease-out;
}

.page-header p {
    font-size: 1.3rem;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.95;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

/* Page Specific Header Backgrounds */
.page-header--why-us {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../images/hero_installation.png');
}

.page-header--company {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/hero_family.png');
}

.page-header--work {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../images/worker_roof.png');
}

.page-header--products {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/service_pv.png');
    height: 480px;
    /* Taller for products page */
}

.page-header--products::after {
    height: 80px;
    /* Taller gradient for products page */
}

/* --- Product Page Header Custom Layout --- */
.product-page-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    padding: 0 50px;
    position: relative;
    z-index: 2;
    gap: 40px;
    text-align: left;
}

.product-page-header .header-content h1 {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: left;
    margin-bottom: 0;
    flex: 1;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    animation: fadeInLeft 0.8s ease-out;
}

/* Specific styling to match the visual of "Our Products & Services" */
.product-page-header .header-content h1 span {
    display: block;
    /* If we want to stack text */
}

.product-page-header .header-content p {
    font-size: 1.25rem;
    max-width: 500px;
    text-align: left;
    margin: 0;
    flex: 1;
    color: var(--white);
    opacity: 0.95;
    line-height: 1.8;
    padding-left: 30px;
    border-left: 3px solid var(--lime);
    animation: fadeInRight 0.8s ease-out 0.2s backwards;
    background: rgba(0, 0, 0, 0.3);
    /* Subtle backing for readability */
    padding: 20px 30px;
    /* Inner spacing */
    border-radius: 0 12px 12px 0;
    /* Rounded right */
    backdrop-filter: blur(5px);
}

/* Animations */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mobile Responsiveness for Product Header */
@media (max-width: 992px) {
    .product-page-header .header-content {
        flex-direction: column;
        text-align: center;
        padding: 0 20px;
        gap: 20px;
        margin-top: 20px;
    }

    .product-page-header .header-content h1 {
        font-size: 3rem;
        text-align: center;
    }

    .product-page-header .header-content p {
        text-align: center;
        padding: 15px;
        border-left: none;
        border-top: 3px solid var(--lime);
        /* Move border to top */
        border-radius: 12px;
        margin: 0 auto;
    }
}

/* --- Common Content Section --- */
.content-section {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* --- Why Us Page Styles --- */
.why-choose-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.why-choose-intro h2 {
    font-size: 2.8rem;
    margin-bottom: 20px;
    color: var(--dark);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 100px;
}

.feature-card {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    border-bottom: 4px solid transparent;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    border-bottom-color: var(--lime);
}

.feature-card i {
    font-size: 2.5rem;
    color: var(--lime);
    margin-bottom: 25px;
    background: rgba(236, 94, 42, 0.1);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--dark);
}

.feature-card p {
    color: var(--gray-text);
    line-height: 1.7;
}

/* Timeline */
.timeline-section {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
}

.timeline-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
    color: var(--dark);
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: #e9ecef;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    border-radius: 2px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    margin-bottom: 30px;
}

.timeline-item.left {
    left: 0;
    text-align: right;
}

.timeline-item.right {
    left: 50%;
}

.timeline-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: white;
    border: 4px solid var(--lime);
    top: 25px;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 0 4px rgba(236, 94, 42, 0.2);
}

.timeline-item.right::after {
    left: -10px;
}

.timeline-content {
    padding: 25px;
    background-color: white;
    position: relative;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.timeline-content:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
}

.timeline-year {
    font-size: 2rem;
    font-weight: 800;
    color: #e3e3e3;
    position: absolute;
    top: 10px;
    right: 20px;
    line-height: 1;
    z-index: 0;
}

.timeline-item.left .timeline-year {
    left: 20px;
    right: auto;
}

.timeline-body {
    position: relative;
    z-index: 1;
}

.timeline-body h4 {
    color: var(--lime);
    margin-bottom: 10px;
    font-size: 1.3rem;
    margin-top: 25px;
}

.timeline-body p {
    margin: 0;
    color: #555;
    font-size: 1.05rem;
}

/* Did You Know Parallax */
.did-you-know-section {
    background-image: url('../images/hero_new.png');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    padding: 100px 20px;
    position: relative;
    margin-top: 80px;
    color: white;
    text-align: center;
    border-radius: 30px;
    margin-bottom: 40px;
    overflow: hidden;
}

.did-you-know-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.9), rgba(236, 94, 42, 0.8));
}

.did-you-know-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.did-you-know-content i {
    font-size: 4rem;
    margin-bottom: 30px;
    color: #fff;
}

.did-you-know-content h3 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.did-you-know-content p {
    font-size: 1.25rem;
    line-height: 1.8;
    opacity: 0.95;
}

/* --- Our Company Page Styles --- */
.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 100px;
    margin-top: -60px;
    position: relative;
    z-index: 2;
}

.mv-card {
    background: white;
    padding: 50px 40px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mv-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--lime);
}

.mv-card:nth-child(2)::before {
    background: var(--brand-blue);
}

.mv-card:hover {
    transform: translateY(-10px);
}

.mv-icon {
    font-size: 3rem;
    margin-bottom: 25px;
    display: inline-block;
    padding: 20px;
    border-radius: 50%;
    background: rgba(236, 94, 42, 0.1);
    color: var(--lime);
}

.mv-card:nth-child(2) .mv-icon {
    background: rgba(52, 152, 219, 0.1);
    color: var(--brand-blue);
}

.mv-card h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--dark);
}

.mv-card p {
    color: var(--gray-text);
    line-height: 1.7;
    font-size: 1.1rem;
}

.story-block {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}

.story-block.reverse {
    flex-direction: row-reverse;
}

.story-text {
    flex: 1;
}

.story-image {
    flex: 1;
}

.story-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.story-image img:hover {
    transform: scale(1.02);
}

.story-text h2 {
    font-size: 2.5rem;
    margin-bottom: 25px;
    color: var(--dark);
    position: relative;
}

.story-text h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--lime);
    margin-top: 10px;
    border-radius: 2px;
}

.story-text p {
    margin-bottom: 20px;
    color: var(--gray-text);
    line-height: 1.8;
    font-size: 1.05rem;
}

.quote-box {
    background: #fdfdfd;
    border-left: 5px solid var(--lime);
    padding: 40px;
    margin: 40px 0;
    position: relative;
    border-radius: 0 20px 20px 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}

.quote-box i {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 2rem;
    color: rgba(236, 94, 42, 0.2);
}

.quote-text {
    font-size: 1.4rem;
    font-style: italic;
    color: #333;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    padding-left: 20px;
}

.quote-author {
    display: block;
    margin-top: 20px;
    font-weight: 700;
    color: var(--lime);
    padding-left: 20px;
}

.dyk-banner {
    background-color: #f0f7e6;
    border-radius: 20px;
    padding: 50px;
    text-align: center;
    margin-top: 60px;
}

.dyk-banner h3 {
    color: var(--lime);
    font-size: 2rem;
    margin-bottom: 15px;
}

.dyk-banner p {
    font-size: 1.1rem;
    color: var(--gray-text);
    max-width: 800px;
    margin: 0 auto;
}

/* --- How We Work Styles --- */
.process-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
}

.process-intro h2 {
    font-size: 2.8rem;
    margin-bottom: 20px;
    color: var(--dark);
}

.process-intro p {
    font-size: 1.1rem;
    color: var(--gray-text);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 100px;
    position: relative;
}

.process-grid::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #eee;
    z-index: 0;
    display: none;
    /* Can be enabled for wide screens if needed/checked */
}

.process-card {
    background: white;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
    border-top: 5px solid var(--lime);
}

.process-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.step-num {
    width: 60px;
    height: 60px;
    background: var(--lime);
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -70px auto 30px;
    border: 5px solid white;
    box-shadow: 0 5px 15px rgba(236, 94, 42, 0.4);
}

.process-card:nth-child(even) .step-num {
    background: var(--brand-blue);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

.process-card:nth-child(even) {
    border-top-color: var(--brand-blue);
}

.process-card h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--dark);
}

.process-card p {
    color: var(--gray-text);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.process-icon {
    font-size: 2.5rem;
    color: #ddd;
    margin-bottom: 15px;
    display: block;
}

.process-card:hover .process-icon {
    color: var(--lime);
}

.process-card:nth-child(even):hover .process-icon {
    color: var(--brand-blue);
}

.install-list {
    text-align: left;
    margin-top: 15px;
    padding-left: 0;
    list-style: none;
}

.install-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #777;
}

.install-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--brand-blue);
    font-size: 0.8rem;
}

.cta-box {
    background: linear-gradient(135deg, var(--lime), #d94e1f);
    border-radius: 20px;
    padding: 60px;
    text-align: center;
    color: white;
    margin-bottom: 40px;
}

.cta-box h3 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.cta-box p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-btn {
    background: white;
    color: var(--lime);
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.cta-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    background: #fff;
    color: #bf3f15;
}

/* --- Our Products Styles --- */
.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-bottom: 120px;
    align-items: center;
}

.mission-text h2 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--dark);
    line-height: 1.2;
}

.mission-text p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 30px;
    line-height: 1.8;
}

.mission-icons {
    display: flex;
    gap: 30px;
}

/* m-icon-box already defined somewhat, but ensuring consistency */
.m-icon-box {
    flex: 1;
    text-align: center;
    padding: 30px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.m-icon-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.m-icon-box i {
    font-size: 2.5rem;
    color: var(--lime);
    margin-bottom: 20px;
}

.m-icon-box h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 50px;
    margin-bottom: 50px;
}

.product-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.02);
    position: relative;
    border-top: none;
    /* Override if process-card conflict */
}

.product-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

.p-image {
    height: 300px;
    overflow: hidden;
    position: relative;
}

.p-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.product-card:hover .p-image img {
    transform: scale(1.1);
}

.p-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 700;
    color: var(--lime);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.p-content {
    padding: 40px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.p-content h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--dark);
}

.p-content p {
    font-size: 1.05rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 30px;
    flex-grow: 1;
}

.p-btn {
    align-self: flex-start;
    background: var(--dark);
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.p-btn:hover {
    background: var(--lime);
    transform: translateX(5px);
}

/* Trust Section */
.trust-section {
    background: #f9f9f9;
    padding: 100px 5%;
    border-radius: 30px;
    text-align: center;
    margin-bottom: 80px;
}

.trust-section .quote-icon {
    font-size: 4rem;
    color: #ff9f43;
    margin-bottom: 20px;
}

.trust-section h2 {
    font-size: 2.5rem;
    color: #1a1a1a;
    margin-bottom: 60px;
}

.reviews-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.google-summary {
    flex: 1;
    min-width: 250px;
    text-align: center;
    padding: 20px;
}

.google-summary h3 {
    font-size: 1.2rem;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.stars {
    color: #f1c40f;
    font-size: 2rem;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 5px;
}

.review-card {
    flex: 1;
    min-width: 300px;
    max-width: 350px;
    background: white;
    padding: 30px;
    border-radius: 15px;
    text-align: left;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
}

.reviewer-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.reviewer-avatar {
    width: 45px;
    height: 45px;
    background: #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 1.2rem;
}

.reviewer-info h4 {
    font-size: 1rem;
    margin: 0;
    color: #333;
}

.reviewer-info span {
    font-size: 0.8rem;
    color: #999;
}

.g-icon {
    margin-left: auto;
    width: 24px;
}

.review-text {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.read-more {
    color: #999;
    font-size: 0.85rem;
    text-decoration: none;
}

/* --- Responsive Adjustments --- */
@media (max-width: 900px) {
    .page-header h1 {
        font-size: 2.8rem;
    }

    .mission-grid,
    .mv-grid,
    .story-block,
    .story-block.reverse {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .reviews-container {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .timeline::after {
        left: 31px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    .timeline-item::after {
        left: 21px;
    }

    .left::after,
    .right::after {
        left: 21px;
    }

    .left {
        text-align: left;
    }

    .right {
        left: 0%;
    }

    .left .timeline-year {
        right: 20px;
        left: auto;
    }

    .process-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

.intro-text {
    font-size: 1.1rem;
    color: #555;
}

.highlight-text {
    font-weight: 500;
    color: var(--lime);
}

.link-bold-primary {
    color: var(--lime);
    font-weight: 600;
}

.section-intro {
    text-align: center;
    margin-bottom: 60px;
}

/* ========================================= 
   Grants, Contact, Quote Styles 
   ========================================= */

:root {
    /* Ensure light-mint is available */
    --light-mint: #f0f7e6;
    /* Based on dyk-banner color which looked minty */
}

/* --- Grants Page Styles --- */
.page-header--grants {
    background-color: var(--light-mint);
    padding: 120px 5% 60px;
    text-align: center;
    background-image: none;
    /* Override default image */
    height: auto;
    /* Override fixed height */
    color: var(--dark);
    /* Override white text */
}

.page-header--grants h1 {
    font-size: 3rem;
    color: var(--dark);
    margin-bottom: 10px;
    text-shadow: none;
    /* Remove shadow */
}

.content-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 5%;
}

.grant-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}

.grant-amount {
    font-size: 2.5rem;
    color: var(--lime);
    font-weight: 700;
    margin: 20px 0;
}

.highlight-box {
    background-color: var(--light-mint);
    padding: 30px;
    border-radius: 15px;
    border-left: 5px solid var(--lime);
    margin: 30px 0;
}

.highlight-box h3 {
    color: var(--dark);
    margin-top: 0;
}

.step-list {
    list-style: none;
    padding: 0;
}

.step-list li {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.step-num {
    background: var(--dark);
    color: var(--lime);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}

.cta-section {
    text-align: center;
    margin-top: 60px;
    background: var(--dark);
    color: white;
    padding: 60px;
    border-radius: 20px;
}

.cta-section h2 {
    color: white;
    margin-bottom: 20px;
}

/* --- Contact Page Styles --- */
.page-header--contact {
    background-color: var(--light-mint);
    padding: 120px 5% 60px;
    text-align: center;
    background-image: none;
    height: auto;
    color: var(--dark);
}

.page-header--contact h1 {
    font-size: 3rem;
    color: var(--dark);
    margin-bottom: 10px;
    text-shadow: none;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 5%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-info h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.info-item .icon {
    background-color: var(--lime);
    color: var(--dark);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    margin-right: 20px;
    flex-shrink: 0;
}

.info-item h4 {
    margin: 0 0 5px;
    font-size: 1.1rem;
}

.info-item p {
    margin: 0;
    color: #555;
    line-height: 1.6;
}

.contact-form {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Common Form Styles */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
}

.form-group textarea {
    height: 120px;
    resize: vertical;
}

.btn-submit {
    background-color: var(--lime);
    color: var(--dark);
    border: none;
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(197, 255, 74, 0.4);
}

/* --- Get Quote Page Styles --- */
.page-header--quote {
    background-color: var(--dark);
    padding: 120px 5% 60px;
    text-align: center;
    color: white;
    background-image: none;
    height: auto;
}

.page-header--quote h1 {
    font-size: 3rem;
    color: var(--lime);
    margin-bottom: 10px;
    text-shadow: none;
}

.quote-container {
    max-width: 800px;
    margin: -50px auto 80px;
    background: white;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    position: relative;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Quote specific form overrides */
.quote-container .form-group input,
.quote-container .form-group textarea,
.quote-container .form-group select {
    padding: 15px;
    background: #FAFAFA;
}

.quote-container .btn-submit {
    padding: 18px 40px;
    font-size: 1.1rem;
    margin-top: 10px;
}

/* Responsive for these pages */
@media (max-width: 768px) {
    .contact-container {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .quote-container {
        padding: 30px;
        margin-top: -30px;
    }
}

.cta-section p {
    margin-bottom: 30px;
    opacity: 0.8;
}

.contact-info>p {
    margin-bottom: 40px;
    color: #666;
}

.contact-btn-outline {
    background: transparent;
    border: 1px solid white;
    color: white;
}

.small-label-light {
    color: #ccc;
}

.footer-no-margin {
    margin-top: 0;
}

/* ========================================= 
   Index Page CSS Cleanup 
   ========================================= */
.hero-bg-1 {
    background-image: url('../images/hero_installation.png');
}

.hero-bg-2 {
    background-image: url('../images/hero_new.png');
}

.hero-bg-3 {
    background-image: url('../images/hero_family.png');
}

.commitment-col .desc {
    margin-top: 30px;
}

.why-choose-box .small-label {
    margin-bottom: 20px;
}

.why-choose-box img {
    border-radius: 20px;
    height: 180px;
    object-fit: cover;
    width: 100%;
    margin-top: 20px;
}

.circle-btn-lime i {
    margin-top: 5px;
}

.footer-logo-col img {
    height: 60px;
}


/* --- Premium Top Bar Styles (Added Globally) --- */
.top-bar {
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.top-bar-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

/* Left Side: Contact */
.top-bar-left {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #94a3b8;
    font-size: 13px;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-item i {
    color: var(--lime);
    font-size: 14px;
    animation: pulse-soft 2s infinite;
}

.contact-item strong {
    color: white;
    font-weight: 700;
    font-size: 14px;
}

/* Right Side: Actions */
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
}

/* Separator Line */
.top-sep {
    height: 20px;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}

/* Social Icons (Circles) */
.social-icons-top {
    display: flex;
    gap: 8px;
}

.social-icons-top a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.social-icons-top a:hover {
    background: var(--lime);
    color: white;
    transform: translateY(-2px);
    border-color: var(--lime);
}

/* Action Buttons (Floating Pills) */
.top-btn-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.top-btn {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    border: none;
}

.btn-glass-dl {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-glass-dl:hover {
    background: white;
    color: var(--dark);
    border-color: white;
    border-color: white;
}

.btn-gradient-fin {
    background: linear-gradient(135deg, var(--lime) 0%, #ff8c5a 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(236, 94, 42, 0.3);
}

.btn-gradient-fin:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(236, 94, 42, 0.5);
}

@keyframes pulse-soft {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 0.8;
        transform: scale(1);
    }
}

/* Desktop Adjustments for Navbar */
@media (min-width: 993px) {
    .navbar {
        top: 50px !important;
        /* Matches top-bar height */
        transition: top 0.3s ease;
    }
}

/* Mobile Adjustments */
@media (max-width: 992px) {
    .top-bar {
        display: none;
    }

    .navbar {
        top: 0 !important;
    }
}

/* =========================================
   How We Work Page Specific Styles
   ========================================= */

.page-how-we-work {
    --primary: #ec5e2a;
    --primary-glow: rgba(236, 94, 42, 0.4);
    --secondary: #3498db;
    --local-dark: #0f172a;
    --darker: #020617;
    --light: #f8fafc;
    --glass: rgba(255, 255, 255, 0.95);
    --glass-card: rgba(255, 255, 255, 0.7);
    --border: rgba(255, 255, 255, 0.2);

    background-color: var(--light);
    overflow-x: hidden;
}

/* Hero Section Override */
.page-how-we-work .page-header {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../images/worker_roof.png');
    background-size: cover;
    background-position: center;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: 0;
    position: relative;
    overflow: hidden;
}

.page-how-we-work .page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to top, #fff, transparent);
}

.page-how-we-work .header-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    animation: fadeInDown 0.8s ease-out;
    background: none;
    -webkit-text-fill-color: white;
}

.page-how-we-work .header-content p {
    font-size: 1.3rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.95;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
    font-weight: 400;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Intro Section */
.page-how-we-work .intro-section {
    text-align: center;
    padding: 100px 20px;
    max-width: 800px;
    margin: 0 auto;
}

.page-how-we-work .intro-section h2 {
    font-size: 3rem;
    color: var(--local-dark);
    margin-bottom: 30px;
    line-height: 1.2;
}

.page-how-we-work .intro-section p {
    font-size: 1.25rem;
    color: #64748b;
    line-height: 1.8;
}

/* The Journey Timeline */
.journey-section {
    padding: 50px 0 150px;
    position: relative;
    overflow: hidden;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.15;
    animation: blobFloat 10s infinite alternate;
}

.blob-1 {
    top: 10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: var(--primary);
}

.blob-2 {
    bottom: 20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: var(--secondary);
    animation-delay: -5s;
}

@keyframes blobFloat {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(30px, 50px);
    }
}

.journey-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 0 20px;
}

.journey-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 150px;
    position: relative;
}

.journey-step:last-child {
    margin-bottom: 0;
}

.step-content {
    width: 45%;
    padding: 50px;
    background: var(--glass);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.step-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: var(--primary);
}

.journey-step:nth-child(even) .step-content::before {
    background: var(--secondary);
}

.step-content:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.step-number {
    font-size: 8rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.03);
    position: absolute;
    top: -20px;
    right: 20px;
    line-height: 1;
    user-select: none;
}

.step-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    background: linear-gradient(135deg, #fff, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--primary);
    box-shadow: 0 10px 25px rgba(236, 94, 42, 0.2);
    margin-bottom: 30px;
}

.journey-step:nth-child(even) .step-icon-wrapper {
    color: var(--secondary);
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.2);
}

.step-content h3 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--local-dark);
}

.step-content p {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.7;
}

.step-visual {
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.pulse-circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236, 94, 42, 0.05), transparent 70%);
    position: absolute;
    animation: pulse 3s infinite;
}

.journey-step:nth-child(even) .pulse-circle {
    background: radial-gradient(circle, rgba(52, 152, 219, 0.05), transparent 70%);
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(0.9);
        opacity: 0.5;
    }
}

.visual-card {
    background: linear-gradient(135deg, var(--local-dark), #1e293b);
    padding: 40px;
    border-radius: 30px;
    color: white;
    text-align: center;
    width: 80%;
    transform: rotate(-3deg);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s ease;
}

.journey-step:hover .visual-card {
    transform: rotate(0deg) scale(1.05);
}

.journey-step:nth-child(even) .visual-card {
    transform: rotate(3deg);
    background: linear-gradient(135deg, #1e293b, var(--local-dark));
}

.journey-step:nth-child(even):hover .visual-card {
    transform: rotate(0deg) scale(1.05);
}

.visual-card i {
    font-size: 4rem;
    margin-bottom: 20px;
    background: linear-gradient(to bottom, var(--primary), #feb47b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.journey-step:nth-child(even) .visual-card i {
    background: linear-gradient(to bottom, var(--secondary), #a0c4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.journey-step:nth-child(even) {
    flex-direction: row-reverse;
}

/* CTA Floating Bar */
.cta-wrapper {
    padding: 0 20px 100px;
    position: relative;
    z-index: 2;
}

.cta-floating-card {
    background: linear-gradient(rgba(236, 94, 42, 0.9), rgba(236, 94, 42, 0.9));
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
    color: white;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.cta-floating-card h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.cta-floating-card p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 40px;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}

.cta-btn-white {
    background: white;
    color: var(--primary);
    padding: 20px 50px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.cta-btn-white:hover {
    transform: scale(1.1);
    color: #FF512F;
}

/* Scroll Animations */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 900px) {
    .page-how-we-work .page-header h1 {
        font-size: 3.5rem;
    }

    .journey-step,
    .journey-step:nth-child(even) {
        flex-direction: column;
        margin-bottom: 80px;
    }

    .step-content,
    .step-visual {
        width: 100%;
    }

    .step-visual {
        margin-top: 40px;
    }

    .cta-floating-card {
        padding: 40px 20px;
    }

    .cta-floating-card h2 {
        font-size: 2.5rem;
    }
}

/* =========================================
   Our Products Page Styles
   ========================================= */

:root {
    --primary: #ec5e2a;
    --secondary: #3498db;
    --dark: #1a1a1a;
    --light: #f8f9fa;
}

.page-header {
    position: relative;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: 0;
    overflow: hidden;
}

.header-bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.header-content {
    position: relative;
    z-index: 1;
}

.header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out, transform 6s ease;
    transform: scale(1);
}

.header-bg.active {
    opacity: 1;
    transform: scale(1.05);
}

.header-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
}

.page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, #fff, transparent);
    z-index: 2;
}

.header-content h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    animation: fadeInDown 0.8s ease-out;
}

.header-content p {
    font-size: 1.4rem;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.95;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-section {
    padding: 100px 5%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Mission Section */
.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-bottom: 120px;
    align-items: center;
}

.mission-text h2 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--dark);
    line-height: 1.2;
}

.mission-text p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 30px;
    line-height: 1.8;
}

.mission-icons {
    display: flex;
    gap: 30px;
}

.m-icon-box {
    flex: 1;
    text-align: center;
    padding: 30px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.m-icon-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.m-icon-box i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 20px;
}

.m-icon-box h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 50px;
    margin-bottom: 50px;
}

.product-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.02);
    position: relative;
}

.product-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

.p-image {
    height: 300px;
    overflow: hidden;
    position: relative;
}

.p-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.product-card:hover .p-image img {
    transform: scale(1.1);
}

.p-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 700;
    color: var(--primary);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.p-content {
    padding: 40px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.p-content h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--dark);
}

.p-content p {
    font-size: 1.05rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 30px;
    flex-grow: 1;
}

.p-btn {
    align-self: flex-start;
    background: var(--dark);
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.p-btn:hover {
    background: var(--primary);
    transform: translateX(5px);
}

/* Trust / Testimonials Section (Revised to Match Image) */
.trust-section {
    background: #fff;
    padding: 40px 0;
    text-align: left;
    overflow: hidden;
    margin-bottom: 0;
    /* Prevent spill */
}

.trust-header {
    max-width: 1400px;
    margin: 0 auto 40px;
    padding: 0 5%;
}

.quote-icon {
    color: #ec5e2a;
    font-size: 2.5rem;
    display: block;
    margin-bottom: 15px;
}

.trust-header h2 {
    font-size: 2.2rem;
    color: #1a1a1a;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.reviews-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

/* Fixed Summary Card Left */
.google-summary-fixed {
    flex: 0 0 200px;
    text-align: center;
    padding-top: 20px;
}

.google-summary-fixed h3 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    color: #000;
}

.summary-stars {
    color: #fbc02d;
    font-size: 1.6rem;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    gap: 4px;
}

.summary-text {
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 15px;
    font-weight: 500;
}

.summary-text strong {
    font-weight: 800;
}

/* Slider Area Right */
.reviews-slider-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    /* Padding to allow shadows to show */
    padding: 10px 0 20px 0;
    margin-top: -10px;
    /* Align slightly better */
}

.reviews-track {
    display: flex;
    gap: 20px;
    width: max-content;
    /* Transition set by JS */
}

.review-card {
    background: #f8f9fa;
    /* Light grey bg as per image */
    border-radius: 16px;
    padding: 25px;
    width: 350px;
    /* Fixed rough width */
    flex-shrink: 0;
    /* No visible shadow in the flat design image but let's add subtle */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
}

.review-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.r-avatar {
    width: 42px;
    height: 42px;
    background-color: #5e35b1;
    /* Deep purple */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Different colors for avatars */
.r-avatar.purple {
    background-color: #5e35b1;
}

.r-avatar.blue {
    background-color: #1976d2;
}

.r-avatar.orange {
    background-color: #e64a19;
}

.r-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 250px;
}

.r-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #202124;
    line-height: 1.2;
}

.r-time {
    font-size: 0.8rem;
    color: #5f6368;
    margin-top: 2px;
}

.g-logo-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.r-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
}

.r-stars {
    color: #fbc02d;
    /* Google Yellow */
    font-size: 1rem;
    display: flex;
    gap: 2px;
}

.verified-check {
    color: #1a73e8;
    /* Google Blue */
    font-size: 1rem;
}

.r-text {
    font-size: 0.95rem;
    color: #3c4043;
    line-height: 1.5;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

.r-read-more {
    font-size: 0.9rem;
    color: #5f6368;
    text-decoration: none;
    font-weight: 500;
}

/* FAQ Section Styles */
/* FAQ Section Styles (Premium) */
.faq-section {
    background: linear-gradient(to bottom, #fff9f5, #fff);
    /* Subtle gradient fade */
    padding: 120px 5%;
    position: relative;
    overflow: hidden;
}

/* Background blob decoration */
.faq-section::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: rgba(236, 94, 42, 0.05);
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
}

.faq-container {
    max-width: 900px;
    /* Slightly narrower for readability */
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.faq-heading {
    text-align: center;
    margin-bottom: 70px;
}

.faq-heading h2 {
    font-size: 2.8rem;
    color: #1a1a1a;
    margin-bottom: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    position: relative;
    display: inline-block;
}

/* Highlight underline for heading */
.faq-heading h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: #ec5e2a;
    margin: 10px auto 0;
    border-radius: 2px;
}

.faq-heading p {
    color: #64748b;
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.faq-item {
    background: white;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02), 0 10px 15px rgba(0, 0, 0, 0.03);
    /* Soft double shadow */
    border: 1px solid rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.faq-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    border-color: rgba(236, 94, 42, 0.2);
}

.faq-item.active {
    box-shadow: 0 15px 35px rgba(236, 94, 42, 0.08);
    /* Glow effect */
    border-color: rgba(236, 94, 42, 0.3);
}

.faq-question {
    padding: 25px 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: transparent;
    user-select: none;
}

.faq-question h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #334155;
    margin: 0;
    transition: color 0.3s ease;
}

.faq-item.active .faq-question h3 {
    color: #ec5e2a;
    /* Brand highlight color */
}

/* Icon Container */
.faq-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    flex-shrink: 0;
    margin-left: 20px;
}

.faq-item:hover .faq-icon {
    background: #fff0eb;
    color: #ec5e2a;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
    background: #ec5e2a;
    color: white;
    box-shadow: 0 4px 10px rgba(236, 94, 42, 0.3);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1), padding 0.4s ease, opacity 0.4s ease;
    opacity: 0;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    /* Usually enough for short answers */
    opacity: 1;
}

.faq-answer p {
    padding: 0 35px 30px;
    color: #475569;
    line-height: 1.8;
    margin: 0;
    font-size: 1.05rem;
}

@media (max-width: 968px) {
    .trust-section {
        text-align: center;
    }

    .trust-header {
        text-align: center;
    }

    .reviews-layout {
        flex-direction: column;
        align-items: center;
    }

    .reviews-slider-container {
        width: 100%;
        /* On mobile, center current item */
    }
}

.page-how-we-work .header-content {
    margin-top: 120px;
}

/* =========================================
   Solar Panel Financing Page Styles
   ========================================= */
/* Premium Financing Page Styles */
:root {
    --fin-primary: #ec5e2a;
    --fin-secondary: #3498db;
    --fin-dark: #0f172a;
    --fin-light: #f8fafc;
    --fin-text: #334155;
    --fin-border: #e2e8f0;
    --fin-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.financing-page-body {
    background-color: #fcfcfc;
}

/* Hero Section */
.financing-hero {
    position: relative;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.5)), url('../images/hero_installation.png');
    background-size: cover;
    background-position: center center;
    padding: 240px 0 160px;
    text-align: center;
    color: white;
    margin-bottom: 0;
    z-index: 10;
}

/* Bottom Fade Effect */
.financing-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to top, #fcfcfc, transparent);
    z-index: 1;
    pointer-events: none;
}

.financing-hero .container {
    position: relative;
    z-index: 2;
}

/* Matching Index Hero Fonts */
.financing-hero h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 25px;
    font-weight: 700;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    letter-spacing: normal;
    background: none;
    -webkit-text-fill-color: initial;
    color: white;
}

.financing-hero p {
    font-size: 1.3rem;
    max-width: 800px;
    margin: 0 auto;
    opacity: 1;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
    font-weight: 400;
}

/* Main Container */
.financing-content {
    max-width: 1100px;
    margin: -60px auto 80px;
    padding: 0 20px;
    position: relative;
    z-index: 20;
}

/* Premium Card Container */
.finance-card {
    background: white;
    border-radius: 24px;
    box-shadow: var(--fin-shadow);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* Header Strip */
.finance-header-strip {
    background: linear-gradient(135deg, var(--fin-primary), #d44d1e);
    padding: 25px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}

.finance-header-strip h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.finance-header-strip h2 i {
    opacity: 0.8;
}

.finance-body {
    padding: 60px 60px;
}

/* Intro Section with Logo */
.finance-intro-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 50px;
    align-items: start;
    margin-bottom: 70px;
}

.finance-logo-box {
    background: #fff;
    padding: 40px 30px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fin-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    text-align: center;
}

.finance-logo-box img {
    max-width: 100%;
    height: auto;
}

.finance-intro-text h3 {
    font-size: 2rem;
    color: var(--fin-dark);
    margin-bottom: 20px;
    font-weight: 700;
}

.finance-intro-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--fin-text);
    margin-bottom: 20px;
}

.finance-intro-text strong {
    color: var(--fin-primary);
    font-weight: 600;
}

/* Features Section */
.finance-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 70px;
}

.finance-feature-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 30px;
    background: #f8fafc;
    border-radius: 16px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.finance-feature-item:hover {
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-color: var(--fin-border);
    transform: translateY(-5px);
}

.feature-icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(52, 152, 219, 0.1);
    color: var(--fin-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.finance-feature-item h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--fin-dark);
    margin: 0;
}

.finance-feature-item p {
    font-size: 0.95rem;
    color: var(--fin-text);
    line-height: 1.5;
    margin: 0;
}

/* Criteria Section */
.finance-check-section {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 20px;
    padding: 50px;
    margin-bottom: 70px;
}

.check-header {
    text-align: center;
    margin-bottom: 40px;
}

.check-header h3 {
    font-size: 1.8rem;
    color: var(--fin-dark);
    margin-bottom: 10px;
}

.check-header p {
    color: #64748b;
}

.finance-check-section .check-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}

.finance-check-section .check-list li {
    background: white;
    padding: 18px 25px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--fin-text);
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease;
}

.finance-check-section .check-list li:hover {
    transform: scale(1.02);
}

.finance-check-section .check-list li i {
    color: #10b981;
    font-size: 1.2rem;
}

/* Note Section */
.finance-note-card {
    background: #fff9f5;
    border-left: 5px solid var(--fin-primary);
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 60px;
}

.finance-note-card p {
    color: #475569;
    margin-bottom: 10px;
    font-size: 1rem;
}

.finance-note-card p:last-child {
    margin-bottom: 0;
}

.finance-note-card strong {
    color: var(--fin-dark);
}

/* CTA Grid */
.cta-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.cta-panel {
    background: white;
    border-radius: 20px;
    padding: 50px 30px;
    text-align: center;
    border: 2px solid var(--fin-light);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cta-panel:hover {
    border-color: var(--fin-secondary);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(52, 152, 219, 0.15);
}

.cta-panel.primary {
    background: linear-gradient(to bottom, #fff, #fff9f5);
}

.cta-panel.primary:hover {
    border-color: var(--fin-primary);
    box-shadow: 0 20px 40px rgba(236, 94, 42, 0.15);
}

.cta-icon-float {
    font-size: 3rem;
    margin-bottom: 25px;
    display: inline-block;
    background: white;
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    color: var(--fin-secondary);
}

.cta-panel.primary .cta-icon-float {
    color: var(--fin-primary);
}

.cta-panel h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--fin-dark);
    margin-bottom: 30px;
}

.btn-finance-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    background: var(--fin-secondary);
    color: white;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

.btn-finance-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.5);
    background: #2980b9;
}

.cta-panel.primary .btn-finance-cta {
    background: var(--fin-primary);
    box-shadow: 0 4px 15px rgba(236, 94, 42, 0.4);
}

.cta-panel.primary .btn-finance-cta:hover {
    background: #d44d1e;
    box-shadow: 0 8px 25px rgba(236, 94, 42, 0.5);
}

/* Responsive */
@media (max-width: 900px) {
    .finance-intro-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .finance-logo-box {
        justify-content: center;
        margin: 0 auto;
        max-width: 400px;
    }

    .finance-features-grid {
        grid-template-columns: 1fr;
    }

    .check-list {
        grid-template-columns: 1fr;
    }

    .cta-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .financing-hero {
        padding: 180px 0 80px;
    }

    .financing-hero h1 {
        font-size: 2.8rem;
    }

    .finance-body {
        padding: 40px 25px;
    }

    .finance-header-strip {
        padding: 20px;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* --- Thermodynamic Solar Panels Page Styles (Moved) --- */

/* --- Premium Master Template Styles --- */
.thermodynamic-page {
    --primary: #ec5e2a;
    --primary-dark: #d34d1b;
    --secondary: #3498db;
    --dark: #0f172a;
    --gray-light: #f8fafc;
    --white: #ffffff;
    --gradient-accent: linear-gradient(135deg, #ec5e2a 0%, #ff8c5a 100%);
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.thermodynamic-page {
    font-family: 'Outfit', sans-serif;
    overflow-x: hidden;
    background-color: var(--white);
    color: #334155;
}

/* --- Animations --- */
.thermodynamic-page .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.thermodynamic-page .reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- Hero Section (Parallax & Glass) --- */
.thermodynamic-page .hero-section {
    position: relative;
    height: 92vh;
    min-height: 650px;
    display: flex;
    align-items: center;
    color: white;
    overflow: hidden;
}

/* Bottom White Fade Effect */
.thermodynamic-page .hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to top, #ffffff, transparent);
    z-index: 5;
    pointer-events: none;
}

.thermodynamic-page .hero-bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.thermodynamic-page .hero-bg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.1) translateX(50px);
    /* Start slightly zoomed and offset */
    transition: opacity 1.5s ease-in-out, transform 8s linear;
}

.thermodynamic-page .hero-bg-slide.active {
    opacity: 1;
    transform: scale(1) translateX(0);
    /* Pan to center */
}

.thermodynamic-page .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.6) 50%, rgba(15, 23, 42, 0.2) 100%);
    z-index: 1;
}

.thermodynamic-page .hero-content {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    width: 100%;
}

/* Glass Badge */
.thermodynamic-page .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 8px 20px;
    border-radius: 50px;
    color: #ff8c5a;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.85rem;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.thermodynamic-page .hero-badge i {
    font-size: 1rem;
}

.thermodynamic-page .hero-title {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 25px;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    color: #ffffff;
    -webkit-text-fill-color: initial;
    background: none;
}

.thermodynamic-page .hero-subtitle {
    font-size: 1.5rem;
    max-width: 800px;
    margin-bottom: 45px;
    /* Kept left aligned margin */
    opacity: 0.95;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.6;
    color: #ffffff;
    font-weight: 400;
}

/* Modern Buttons */
.thermodynamic-page .btn-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.thermodynamic-page .btn-modern-primary {
    background: var(--gradient-accent);
    color: white;
    padding: 18px 40px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 25px -5px rgba(236, 94, 42, 0.4);
    position: relative;
    overflow: hidden;
    border: none;
}

.thermodynamic-page .btn-modern-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.thermodynamic-page .btn-modern-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 30px -5px rgba(236, 94, 42, 0.5);
}

.thermodynamic-page .btn-modern-primary:hover::after {
    opacity: 1;
}

.thermodynamic-page .btn-modern-outline {
    background: transparent;
    color: white;
    padding: 18px 40px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.thermodynamic-page .btn-modern-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
    transform: translateY(-2px);
}

/* --- Section Titles --- */
.thermodynamic-page .section-header-modern {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 80px;
}

.thermodynamic-page .sub-tag {
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.thermodynamic-page .sub-tag::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--primary);
    margin: 8px auto 0;
    border-radius: 2px;
}

.thermodynamic-page .section-headline {
    font-size: 3rem;
    color: var(--dark);
    font-weight: 800;
    line-height: 1.2;
}

/* --- Features Cards (Hover Lift) --- */
.thermodynamic-page .features-section {
    padding: 120px 5%;
    background: radial-gradient(circle at 10% 20%, rgb(248, 250, 252) 0%, rgb(255, 255, 255) 90%);
}

.thermodynamic-page .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.thermodynamic-page .feature-box {
    background: white;
    padding: 50px 40px;
    border-radius: 24px;
    box-shadow: var(--shadow-sm);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.thermodynamic-page .feature-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.thermodynamic-page .feature-box:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.thermodynamic-page .feature-box:hover::before {
    transform: scaleX(1);
}

.thermodynamic-page .f-icon {
    width: 70px;
    height: 70px;
    background: #fff0eb;
    color: var(--primary);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 30px;
    transition: transform 0.3s ease;
}

.thermodynamic-page .feature-box:hover .f-icon {
    transform: rotateY(180deg);
    /* Playful interaction */
    background: var(--primary);
    color: white;
}

.thermodynamic-page .feature-box h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--dark);
    font-weight: 700;
}

.thermodynamic-page .feature-box p {
    color: #64748b;
    line-height: 1.7;
    font-size: 1.05rem;
}

/* --- Dark Process Section --- */
.thermodynamic-page .process-section {
    background: #0f172a;
    color: white;
    padding: 140px 5%;
    position: relative;
}

/* Background Pattern */
.thermodynamic-page .process-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#334155 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.1;
}

.thermodynamic-page .step-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.thermodynamic-page .process-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 120px;
}

.thermodynamic-page .process-step:last-child {
    margin-bottom: 0;
}

.thermodynamic-page .process-step.reverse {
    direction: rtl;
}

.thermodynamic-page .process-step.reverse .step-text {
    direction: ltr;
}

.thermodynamic-page .step-image-container {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.thermodynamic-page .step-image-container img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.7s ease;
}

.thermodynamic-page .step-image-container:hover img {
    transform: scale(1.05);
}

.thermodynamic-page .step-text {
    text-align: left;
}

.thermodynamic-page .step-index {
    font-size: 6rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.05);
    line-height: 0.8;
    margin-bottom: -20px;
    position: relative;
    z-index: 0;
    display: block;
}

.thermodynamic-page .step-text h3 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    color: white;
}

.thermodynamic-page .step-text p {
    font-size: 1.15rem;
    color: #94a3b8;
    line-height: 1.8;
}

/* --- Comparison Table (Card Style) --- */
.thermodynamic-page .comparison-section {
    padding: 140px 5%;
    background: #f1f5f9;
}

.thermodynamic-page .comp-card {
    background: white;
    border-radius: 30px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    max-width: 1100px;
    margin: 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.thermodynamic-page .comp-table {
    width: 100%;
    border-collapse: collapse;
}

.thermodynamic-page .comp-table th {
    padding: 30px;
    font-size: 1.3rem;
    color: var(--dark);
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

.thermodynamic-page .comp-table th.brand-col {
    background: var(--primary);
    color: white;
    position: relative;
    width: 35%;
}

/* Little triangle to point down from brand header */
.thermodynamic-page .comp-table th.brand-col::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: var(--primary) transparent transparent;
    z-index: 2;
}

.thermodynamic-page .comp-table td {
    padding: 25px 30px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
    color: #64748b;
    font-size: 1.1rem;
}

.thermodynamic-page .comp-table tr:hover td {
    background: #f8fafc;
}

.thermodynamic-page .comp-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--dark);
    width: 25%;
}

.thermodynamic-page .comp-table td.brand-cell {
    background: #fff7f3;
    /* Light orange tint */
    color: var(--dark);
    font-weight: 600;
    border-left: 1px solid #ffe4db;
    border-right: 1px solid #ffe4db;
}

/* --- FAQ Accordion Modern --- */
.thermodynamic-page .faq-page-section {
    padding: 120px 5%;
    background: white;
}

.thermodynamic-page .faq-grid {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    gap: 20px;
}

.thermodynamic-page .faq-card {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.thermodynamic-page .faq-card.active {
    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(236, 94, 42, 0.1);
}

.thermodynamic-page .faq-header {
    padding: 25px 30px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
}

.thermodynamic-page .faq-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--dark);
}

.thermodynamic-page .faq-toggle {
    width: 32px;
    height: 32px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.3s ease;
}

.thermodynamic-page .faq-card.active .faq-toggle {
    background: var(--primary);
    color: white;
    transform: rotate(180deg);
}

.faq-.thermodynamic-page {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: #f8fafc;
}

.thermodynamic-page .faq-content {
    padding: 0 30px 25px;
    color: #475569;
    line-height: 1.7;
}

/* --- Footer Visual Separation --- */
.thermodynamic-page .footer-separator {
    height: 100px;
    background: linear-gradient(to bottom, white, #f8f9fa);
}

@media (max-width: 992px) {
    .thermodynamic-page .hero-title {
        font-size: 3.5rem;
    }

    .thermodynamic-page .process-step,
    .thermodynamic-page .process-step.reverse {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 80px;
        direction: ltr;
    }

    .thermodynamic-page .process-step.reverse .step-text {
        direction: ltr;
    }

    .thermodynamic-page .step-image-container::before {
        display: none;
    }

    .thermodynamic-page .comp-table {
        display: block;
        overflow-x: auto;
    }

    /* Make CTA stack */
    .thermodynamic-page .btn-group {
        justify-content: flex-start;
    }
}

/* --- Stats Counter Section --- */
.thermodynamic-page .stats-section {
    padding: 80px 5%;
    background: linear-gradient(135deg, var(--dark), #1e293b);
    color: white;
    position: relative;
    overflow: hidden;
}

.thermodynamic-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.thermodynamic-page .stat-item h3 {
    font-size: 4rem;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(to bottom, #ffffff, #94a3b8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.thermodynamic-page .stat-item p {
    font-size: 1.1rem;
    color: #cbd5e1;
    margin-top: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Testimonials (Glass Style) --- */
.thermodynamic-page .testimonials-page-section {
    padding: 120px 5%;
    background: #fff;
    background-image: radial-gradient(#ec5e2a 0.5px, transparent 0.5px), radial-gradient(#ec5e2a 0.5px, #fff 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    background-color: #fff9f6;
    /* Very light tint */
}

.thermodynamic-page .testi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

.thermodynamic-page .testi-card-glass {
    background: rgba(255, 255, 255, 0.8);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;
}

.thermodynamic-page .testi-card-glass:hover {
    transform: translateY(-10px);
    background: white;
    box-shadow: 0 20px 50px rgba(236, 94, 42, 0.1);
}

.thermodynamic-page .t-stars {
    color: #f1c40f;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.thermodynamic-page .t-text {
    font-size: 1.1rem;
    color: #475569;
    font-style: italic;
    margin-bottom: 25px;
    line-height: 1.6;
}

.thermodynamic-page .t-author strong {
    display: block;
    color: var(--dark);
    font-size: 1.1rem;
}

.thermodynamic-page .t-author span {
    font-size: 0.9rem;
    color: #94a3b8;
}

.thermodynamic-page .t-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.thermodynamic-page .t-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.thermodynamic-page .t-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.thermodynamic-page .t-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* --- Trust Strip --- */
.thermodynamic-page .trust-strip {
    background: white;
    padding: 40px 0;
    border-bottom: 1px solid #f1f5f9;
}

.thermodynamic-page .trust-grid {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.thermodynamic-page .trust-item {
    display: flex;
    align-items: center;
    gap: 15px;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.thermodynamic-page .trust-item:hover {
    opacity: 1;
}

.thermodynamic-page .trust-icon-box {
    width: 50px;
    height: 50px;
    background: #fff0eb;
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.thermodynamic-page .trust-text h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--dark);
    font-weight: 700;
}

.thermodynamic-page .trust-text span {
    font-size: 0.85rem;
    color: #64748b;
}

/* --- Final CTA Section --- */
.thermodynamic-page .final-cta-section {
    padding: 100px 5%;
    background: var(--gradient-accent);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.thermodynamic-page .final-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
}

.thermodynamic-page .cta-container {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.thermodynamic-page .cta-headline {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.1;
}

.thermodynamic-page .cta-sub {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.95;
    font-weight: 400;
}

.thermodynamic-page .btn-white-pulse {
    background: white;
    color: var(--primary);
    padding: 20px 50px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: softPulse 2s infinite;
}

.thermodynamic-page .btn-white-pulse:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

@keyframes softPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}


/* --- Premium Top Bar Styles --- */
.thermodynamic-page .top-bar {
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.thermodynamic-page .top-bar-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

/* Left Side: Contact */
.thermodynamic-page .top-bar-left {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #94a3b8;
    font-size: 13px;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.thermodynamic-page .contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.thermodynamic-page .contact-item i {
    color: var(--primary);
    font-size: 14px;
    animation: pulse-soft 2s infinite;
}

.thermodynamic-page .contact-item strong {
    color: white;
    font-weight: 700;
    font-size: 14px;
}

/* Right Side: Actions */
.thermodynamic-page .top-bar-right {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
}

/* Separator Line */
.thermodynamic-page .top-sep {
    height: 20px;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}

/* Social Icons (Circles) */
.thermodynamic-page .social-icons-top {
    display: flex;
    gap: 8px;
}

.thermodynamic-page .social-icons-top a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.thermodynamic-page .social-icons-top a:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
    border-color: var(--primary);
}

/* Action Buttons (Floating Pills) */
.thermodynamic-page .top-btn-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.thermodynamic-page .top-btn {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    border: none;
}

.thermodynamic-page .btn-glass-dl {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.thermodynamic-page .btn-glass-dl:hover {
    background: white;
    color: var(--dark);
    border-color: white;
}

.thermodynamic-page .btn-gradient-fin {
    background: linear-gradient(135deg, var(--primary) 0%, #ff8c5a 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(236, 94, 42, 0.3);
}

.thermodynamic-page .btn-gradient-fin:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(236, 94, 42, 0.5);
}

@keyframes pulse-soft {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 0.8;
        transform: scale(1);
    }
}

/* Desktop Adjustments for Navbar */
@media (min-width: 993px) {
    .thermodynamic-page .navbar {
        top: 50px !important;
        /* Matches top-bar height */
        transition: top 0.3s ease;
    }
}

/* Mobile Adjustments */
@media (max-width: 992px) {
    .thermodynamic-page .top-bar {
        display: none;
    }

    .thermodynamic-page .navbar {
        top: 0 !important;
    }
}

/* Why Us Page Specific Styles */
.why-us-page {
    --primary: #ec5e2a;
    --secondary: #3498db;
    --dark: #1a1a1a;
    --light: #f8f9fa;
}

.why-us-page .page-header {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../images/hero_installation.png');
    background-size: cover;
    background-position: center;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: 0;
    position: relative;
    overflow: hidden;
}

.why-us-page .header-content {
    margin-top: 120px;
}

.why-us-page .page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to top, #fff, transparent);
}

.why-us-page .page-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    animation: fadeInDownWhyUs 0.8s ease-out;
}

.why-us-page .page-header p {
    font-size: 1.3rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.95;
    animation: fadeInUpWhyUs 0.8s ease-out 0.2s backwards;
}

@keyframes fadeInDownWhyUs {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUpWhyUs {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.why-us-page .content-section {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Why Choose Cards */
.why-us-page .why-choose-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.why-us-page .why-choose-intro h2 {
    font-size: 2.8rem;
    margin-bottom: 20px;
    color: var(--dark);
}

.why-us-page .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 100px;
}

.why-us-page .feature-card {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    border-bottom: 4px solid transparent;
}

.why-us-page .feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    border-bottom-color: var(--primary);
}

.why-us-page .feature-card i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 25px;
    background: rgba(236, 94, 42, 0.1);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.why-us-page .feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--dark);
}

.why-us-page .feature-card p {
    color: #666;
    line-height: 1.7;
}

/* Timeline Styling */
.why-us-page .timeline-section {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
}

.why-us-page .timeline-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
    color: var(--dark);
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.why-us-page .timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* The vertical line */
.why-us-page .timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: #e9ecef;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    border-radius: 2px;
}

.why-us-page .timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    margin-bottom: 30px;
}

/* Left side */
.why-us-page .left {
    left: 0;
    text-align: right;
}

/* Right side */
.why-us-page .right {
    left: 50%;
}

/* The circles on the line */
.why-us-page .timeline-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: white;
    border: 4px solid var(--primary);
    top: 25px;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 0 4px rgba(236, 94, 42, 0.2);
}

.why-us-page .right::after {
    left: -10px;
}

/* Content box */
.why-us-page .timeline-content {
    padding: 25px;
    background-color: white;
    position: relative;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.why-us-page .timeline-content:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
}

.why-us-page .timeline-year {
    font-size: 2rem;
    font-weight: 800;
    color: #e3e3e3;
    position: absolute;
    top: 10px;
    right: 20px;
    line-height: 1;
    z-index: 0;
}

.why-us-page .left .timeline-year {
    left: 20px;
    right: auto;
}

.why-us-page .timeline-body {
    position: relative;
    z-index: 1;
}

.why-us-page .timeline-body h4 {
    color: var(--primary);
    margin-bottom: 10px;
    font-size: 1.3rem;
    margin-top: 25px;
    /* Space for the big year background */
}

.why-us-page .timeline-body p {
    margin: 0;
    color: #555;
    font-size: 1.05rem;
}

/* Did You Know Section with Parallax */
.why-us-page .did-you-know-section {
    background-image: url('../images/hero_new.png');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    padding: 100px 20px;
    position: relative;
    margin-top: 80px;
    color: white;
    text-align: center;
    border-radius: 30px;
    margin-bottom: 40px;
    overflow: hidden;
}

.why-us-page .did-you-know-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.9), rgba(236, 94, 42, 0.8));
}

.why-us-page .did-you-know-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.why-us-page .did-you-know-content i {
    font-size: 4rem;
    margin-bottom: 30px;
    color: #fff;
}

.why-us-page .did-you-know-content h3 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.why-us-page .did-you-know-content p {
    font-size: 1.25rem;
    line-height: 1.8;
    opacity: 0.95;
}

/* Responsive */
@media (max-width: 768px) {
    .why-us-page .timeline::after {
        left: 31px;
    }

    .why-us-page .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    .why-us-page .timeline-item::after {
        left: 21px;
    }

    .why-us-page .left::after,
    .why-us-page .right::after {
        left: 21px;
    }

    .why-us-page .left {
        text-align: left;
    }

    .why-us-page .right {
        left: 0%;
    }

    .why-us-page .left .timeline-year {
        right: 20px;
        left: auto;
    }

    .why-us-page .page-header h1 {
        font-size: 2.5rem;
    }
}

/* =========================================
   Our Company Page Styles
   ========================================= */

/* Page Specific Styles */
.page-header {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/hero_family.png');
    background-size: cover;
    background-position: center;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: 0;
    position: relative;
    overflow: hidden;
}

.page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to top, #fff, transparent);
}

.header-content {
    margin-top: 120px;
}

.page-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    animation: fadeInDown 0.8s ease-out;
}

.page-header p {
    font-size: 1.3rem;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.95;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-section {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Mission & Vision Cards */
.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 100px;
    margin-top: -60px;
    /* Overlap header */
    position: relative;
    z-index: 2;
}

.mv-card {
    background: white;
    padding: 50px 40px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mv-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--lime);
}

.mv-card:nth-child(2)::before {
    background: var(--brand-blue);
}

.mv-card:hover {
    transform: translateY(-10px);
}

.mv-icon {
    font-size: 3rem;
    margin-bottom: 25px;
    display: inline-block;
    padding: 20px;
    border-radius: 50%;
    background: rgba(236, 94, 42, 0.1);
    color: var(--lime);
}

.mv-card:nth-child(2) .mv-icon {
    background: rgba(52, 152, 219, 0.1);
    color: var(--brand-blue);
}

.mv-card h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #1a1a1a;
}

.mv-card p {
    color: #666;
    line-height: 1.7;
    font-size: 1.1rem;
}

/* Story Section (ZigZag) */
.story-block {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}

.story-block.reverse {
    flex-direction: row-reverse;
}

.story-text {
    flex: 1;
}

.story-image {
    flex: 1;
}

.story-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.story-image img:hover {
    transform: scale(1.02);
}

.story-text h2 {
    font-size: 2.5rem;
    margin-bottom: 25px;
    color: #1a1a1a;
    position: relative;
}

.story-text h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--lime);
    margin-top: 10px;
    border-radius: 2px;
}

.story-text p {
    margin-bottom: 20px;
    color: #555;
    line-height: 1.8;
    font-size: 1.05rem;
}

/* Blockquote */
.quote-box {
    background: #fdfdfd;
    border-left: 5px solid var(--lime);
    padding: 40px;
    margin: 40px 0;
    position: relative;
    border-radius: 0 20px 20px 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}

.quote-box i {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 2rem;
    color: rgba(236, 94, 42, 0.2);
}

.quote-text {
    font-size: 1.4rem;
    font-style: italic;
    color: #333;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    padding-left: 20px;
}

.quote-author {
    display: block;
    margin-top: 20px;
    font-weight: 700;
    color: var(--lime);
    padding-left: 20px;
}

/* Did You Know Banner */
.dyk-banner {
    background-color: #f0f7e6;
    border-radius: 20px;
    padding: 50px;
    text-align: center;
    margin-top: 60px;
}

.dyk-banner h3 {
    color: var(--lime);
    font-size: 2rem;
    margin-bottom: 15px;
}

.dyk-banner p {
    font-size: 1.1rem;
    color: #555;
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .mv-grid {
        grid-template-columns: 1fr;
        margin-top: 40px;
    }

    .story-block,
    .story-block.reverse {
        flex-direction: column;
    }

    .page-header h1 {
        font-size: 2.5rem;
    }
}

/* =========================================
   Brochures Page Styles
   ========================================= */

.brochures-section {
    padding: 80px 20px;
    background-color: var(--gray-light);
    min-height: 60vh;
}

.brochure-grid-container {
    max-width: 1200px;
    margin: 0 auto;
}

.brochure-grid-header {
    text-align: center;
    margin-bottom: 60px;
}

.brochure-grid-header h2 {
    font-size: 2.5rem;
    color: var(--dark);
    margin-bottom: 15px;
}

.brochure-grid-header p {
    color: var(--gray-text);
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
}

.brochure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.brochure-card {
    background: var(--white);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.brochure-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: rgba(236, 94, 42, 0.2);
}

.brochure-icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(236, 94, 42, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.brochure-card:hover .brochure-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    background: rgba(236, 94, 42, 0.2);
}

.brochure-icon-wrapper i {
    font-size: 2.5rem;
    color: var(--lime);
}

.brochure-info h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 10px;
    line-height: 1.4;
    min-height: 54px;
    /* Ensure alignment for multi-line titles */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.brochure-info p {
    color: var(--gray-text);
    font-size: 0.9rem;
    margin-bottom: 25px;
}

.brochure-actions {
    display: flex;
    gap: 15px;
    width: 100%;
}

.btn-brochure {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.btn-view {
    background-color: var(--gray-light);
    color: var(--dark);
    border: 1px solid transparent;
}

.btn-view:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
}

.btn-download {
    background-color: var(--lime);
    color: var(--white);
    border: 1px solid transparent;
}

.btn-download:hover {
    background-color: var(--lime-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(236, 94, 42, 0.3);
}

/* Modal for PDF Preview (Optional) */
.pdf-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
}

.pdf-modal-content {
    background-color: #fefefe;
    margin: auto;
    width: 90%;
    height: 90%;
    border-radius: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.close-modal {
    color: #fff;
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.close-modal:hover {
    color: var(--lime);
}

#pdf-preview-frame {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}

@media screen and (max-width: 768px) {
    .brochure-grid {
        grid-template-columns: 1fr;
    }

    .pdf-modal-content {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .close-modal {
        top: 10px;
        right: 20px;
        color: #000;
        z-index: 2001;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Mist Effect Helper */
.hero-mist {
    position: relative;
    overflow: hidden;
    /* Ensure fade stays contained */
}

.hero-mist::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, var(--gray-light) 20%, rgba(244, 244, 244, 0.8) 60%, transparent 100%);
    z-index: 2;
    pointer-events: none;
    display: block;
}


/* Solar Comparison Section (New) */
:root {
    --success-green: #2ecc71;
    --success-dark: #27ae60;
}

.solar-comparison-section {
    padding: 80px 20px;
    background: linear-gradient(to bottom, #ffffff, #f9f9f9);
    overflow: hidden;
}

.comp-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

/* --- Part 1: Why Install Solar (Infographic Rebuild) --- */
.why-solar-box {
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.ws-header {
    text-align: center;
    padding: 40px 20px 20px;
    background: linear-gradient(to right, rgba(46, 204, 113, 0.1), rgba(236, 94, 42, 0.1));
}

.ws-header h2 {
    font-size: 2.5rem;
    color: var(--dark);
    margin-bottom: 15px;
    line-height: 1.2;
}

/* Enhanced Badge Style */
.ws-header .year-badge {
    background: linear-gradient(135deg, var(--success-green), var(--success-dark));
    color: white;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 1rem;
    vertical-align: middle;
    margin-left: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
    display: inline-block;
    animation: badgePulse 3s infinite;
}

@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(46, 204, 113, 0.6);
    }
}

.ws-header p {
    font-size: 1.1rem;
    color: var(--gray-text);
    max-width: 700px;
    margin: 0 auto;
}

.ws-stats-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.8);
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;
}

.ws-stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #f8f9fa;
    padding: 15px 25px;
    border-radius: 12px;
    flex: 1;
    min-width: 250px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    animation: fadeUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

/* Stagger stats entry */
.ws-stat-item:nth-child(1) {
    animation-delay: 0.2s;
}

.ws-stat-item:nth-child(2) {
    animation-delay: 0.4s;
}

.ws-stat-item:nth-child(3) {
    animation-delay: 0.6s;
}

.ws-stat-icon {
    font-size: 2rem;
    color: var(--success-green);
}

.ws-stat-text h4 {
    font-size: 1.3rem;
    color: var(--success-green);
    font-weight: 700;
    margin: 0;
}

.ws-stat-text p {
    font-size: 0.9rem;
    color: var(--gray-text);
    margin: 0;
    line-height: 1.3;
}

.ws-comparison-body {
    display: flex;
    flex-wrap: wrap;
}

.ws-col {
    flex: 1;
    min-width: 300px;
    padding: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    opacity: 0;
    /* for animation */
    animation: fadeUp 1s ease-out forwards;
    animation-delay: 0.8s;
}

.ws-col.with-solar {
    background: rgba(46, 204, 113, 0.05);
    /* Green tint */
    border-right: 1px solid #eee;
}

.ws-col.without-solar {
    background: rgba(236, 94, 42, 0.05);
    /* Orange tint */
    animation-delay: 1s;
    /* Enters slightly later */
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ws-col-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.ws-col-header i {
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
}

.with-solar .ws-col-header i {
    background: var(--success-green);
}

.without-solar .ws-col-header i {
    background: var(--lime);
}

.ws-col-header h3 {
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
    color: var(--dark);
}

.ws-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
}

.ws-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease;
}

.ws-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    /* Interactive lift */
}

.ws-item i {
    font-size: 1.4rem;
    margin-top: 2px;
}

.with-solar .ws-item i {
    color: var(--success-green);
}

.without-solar .ws-item i {
    color: var(--lime);
}

.ws-item-content strong {
    display: block;
    font-size: 1.1rem;
    color: var(--dark);
    margin-bottom: 4px;
}

.ws-item-content span {
    font-size: 0.95rem;
    color: var(--gray-text);
}

.ws-cta-box {
    text-align: center;
    padding: 50px 20px;
    background: white;
    border-top: 1px solid #eee;
}

.ws-cta-box h3 {
    margin-bottom: 25px;
    font-size: 1.8rem;
    color: var(--dark);
}

/* Enhanced Quote Button */
.btn-solar-cta {
    background: linear-gradient(135deg, var(--success-green), var(--success-dark)) !important;
    /* Force BG */
    color: #fff !important;
    /* Force white text */
    padding: 18px 45px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.2rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(46, 204, 113, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-solar-cta:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 40px rgba(46, 204, 113, 0.6);
    background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
}

/* --- Part 2: Bill Comparison Animation --- */
.bill-diff-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
    background: var(--white);
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.bill-text {
    flex: 1;
    min-width: 300px;
}

.bill-text .small-label {
    color: var(--lime);
    margin-bottom: 10px;
    display: block;
    font-weight: 700;
    letter-spacing: 1px;
}

.bill-text h2 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 25px;
    color: var(--dark);
    font-weight: 800;
}

.bill-text h2 span {
    color: var(--lime);
}

.bill-text p {
    font-size: 1.1rem;
    color: var(--gray-text);
    margin-bottom: 30px;
    line-height: 1.7;
}

.bill-visuals {
    flex: 1.2;
    min-width: 350px;
    display: flex;
    justify-content: center;
    gap: 30px;
    position: relative;
    padding: 20px;
}

/* Phone Cards */
.bill-card {
    background: white;
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    width: 280px;
    padding: 30px;
    text-align: center;
    border: 8px solid #f8f8f8;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Card 1: With Solar */
.bill-card.solar-card {
    border-color: rgba(46, 204, 113, 0.3);
    z-index: 2;
    transform: scale(1.05);
    animation: pulseObj 4s infinite ease-in-out;
}

@keyframes pulseObj {

    0%,
    100% {
        transform: scale(1.05);
        box-shadow: 0 20px 50px rgba(46, 204, 113, 0.2);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 35px 70px rgba(46, 204, 113, 0.4);
    }
}

/* Card 2: Without Solar */
.bill-card.no-solar-card {
    border-color: rgba(236, 94, 42, 0.1);
    transform: scale(0.95);
    opacity: 0.9;
    filter: grayscale(0.2);
}

.bc-header {
    border-bottom: 2px solid #f9f9f9;
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bc-header-icon {
    font-size: 1.5rem;
    color: #ddd;
}

.solar-card .bc-header-icon {
    color: var(--success-green);
}

.no-solar-card .bc-header-icon {
    color: var(--lime);
}

.bc-label {
    font-size: 0.85rem;
    color: var(--gray-text);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.bc-amount {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 5px;
    line-height: 1;
}

.solar-card .bc-amount {
    color: var(--success-green);
}

.no-solar-card .bc-amount {
    color: var(--lime);
}

.bc-note {
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 25px;
    font-style: italic;
}

/* Chart Styles Key Fix */
.bc-graph {
    display: flex;
    justify-content: space-around;
    /* Distribute groups evenly */
    align-items: flex-end;
    /* Align groups to bottom */
    height: 120px;
    /* Fixed height for the chart area */
    padding-top: 20px;
    border-top: 1px dashed #eee;
    margin-top: auto;
    /* Push to bottom of card if needed */
}

.bc-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    /* Push content (bar + text) to bottom */
    gap: 8px;
    height: 100%;
    /* Take full height of .bc-graph */
    width: 30%;
    /* Assign width for click/hover area */
}

/* The actual colored bar */
.bc-bar {
    width: 20px;
    background: #eee;
    /* Fallback */
    border-radius: 6px 6px 0 0;
    position: relative;
    /* Height is set inline in HTML, but we need it to originate from bottom */
    transform-origin: bottom;
    animation: growBar 1.5s ease-out forwards;
}

@keyframes growBar {
    from {
        transform: scaleY(0);
        opacity: 0;
    }

    to {
        transform: scaleY(1);
        opacity: 0.8;
    }
}

.bc-month {
    font-size: 0.75rem;
    color: #bbb;
    text-transform: uppercase;
    font-weight: 600;
}

/* Colors for bars */
.solar-card .bc-bar {
    background: linear-gradient(to top, var(--success-green), #58d68d);
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.4);
}

.no-solar-card .bc-bar {
    background: linear-gradient(to top, var(--lime), #f39c12);
    opacity: 0.8;
}

/* Responsive adjustments */
@media screen and (max-width: 968px) {
    .ws-comparison-body {
        flex-direction: column;
    }

    .ws-col {
        border-right: none;
        border-bottom: 1px solid #eee;
    }

    .bill-diff-wrapper {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }

    .bill-visuals {
        margin-top: 30px;
        transform: scale(0.85);
        width: 100%;
        gap: 15px;
    }

    .bill-card {
        width: 250px;
        padding: 20px;
    }

    .ws-stats-row {
        gap: 15px;
    }

    .ws-stat-item {
        padding: 15px;
        min-width: 100%;
    }
}

:root {
    --success-green: #2ecc71;
    /* Warning/Orange already in vars maybe, but defining local use vars */
}

.solar-comparison-section {
    padding: 80px 20px;
    background: linear-gradient(to bottom, #ffffff, #f9f9f9);
    overflow: hidden;
}

.comp-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

/* --- Part 1: Why Install Solar (Infographic Rebuild) --- */
.why-solar-box {
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.ws-header {
    text-align: center;
    padding: 40px 20px 20px;
    background: linear-gradient(to right, rgba(46, 204, 113, 0.1), rgba(236, 94, 42, 0.1));
}

.ws-header h2 {
    font-size: 2.5rem;
    color: var(--dark);
    margin-bottom: 15px;
    line-height: 1.2;
}

.ws-header .year-badge {
    background: var(--success-green);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 1rem;
    vertical-align: middle;
    margin-left: 10px;
    font-weight: 700;
}

.ws-header p {
    font-size: 1.1rem;
    color: var(--gray-text);
    max-width: 700px;
    margin: 0 auto;
}

.ws-stats-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.8);
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;
}

.ws-stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #f8f9fa;
    padding: 15px 25px;
    border-radius: 12px;
    flex: 1;
    min-width: 250px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.ws-stat-icon {
    font-size: 2rem;
    color: var(--success-green);
}

.ws-stat-text h4 {
    font-size: 1.3rem;
    color: var(--success-green);
    font-weight: 700;
    margin: 0;
}

.ws-stat-text p {
    font-size: 0.9rem;
    color: var(--gray-text);
    margin: 0;
    line-height: 1.3;
}

.ws-comparison-body {
    display: flex;
    flex-wrap: wrap;
}

/* Make columns equal height */
.ws-col {
    flex: 1;
    min-width: 300px;
    padding: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.ws-col.with-solar {
    background: rgba(46, 204, 113, 0.05);
    /* Green tint */
    border-right: 1px solid #eee;
}

.ws-col.without-solar {
    background: rgba(236, 94, 42, 0.05);
    /* Orange tint */
}

.ws-col-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.ws-col-header i {
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
}

.with-solar .ws-col-header i {
    background: var(--success-green);
}

.without-solar .ws-col-header i {
    background: var(--lime);
}

.ws-col-header h3 {
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
    color: var(--dark);
}

.ws-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
    /* Push CTA down if needed */
}

.ws-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease;
}

.ws-item:hover {
    transform: translateY(-2px);
}

.ws-item i {
    font-size: 1.4rem;
    margin-top: 2px;
}

.with-solar .ws-item i {
    color: var(--success-green);
}

.without-solar .ws-item i {
    color: var(--lime);
}

.ws-item-content strong {
    display: block;
    font-size: 1.1rem;
    color: var(--dark);
    margin-bottom: 4px;
}

.ws-item-content span {
    font-size: 0.95rem;
    color: var(--gray-text);
}

.ws-cta-box {
    text-align: center;
    padding: 50px 20px;
    background: white;
    border-top: 1px solid #eee;
}

.ws-cta-box h3 {
    margin-bottom: 25px;
    font-size: 1.8rem;
    color: var(--dark);
}

.btn-solar-cta {
    background: linear-gradient(135deg, var(--success-green), #27ae60);
    color: white;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    border: none;
    box-shadow: 0 10px 25px rgba(46, 204, 113, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.btn-solar-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(46, 204, 113, 0.5);
    background: linear-gradient(135deg, #2ecc71, #219150);
}

/* --- Part 2: Bill Comparison Animation --- */
.bill-diff-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
    background: var(--white);
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.bill-text {
    flex: 1;
    min-width: 300px;
}

.bill-text .small-label {
    color: var(--lime);
    margin-bottom: 10px;
    display: block;
}

.bill-text h2 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 25px;
    color: var(--dark);
    font-weight: 800;
}

.bill-text h2 span {
    color: var(--lime);
}

/* Brand Highlight */

.bill-text p {
    font-size: 1.1rem;
    color: var(--gray-text);
    margin-bottom: 30px;
    line-height: 1.7;
}

.bill-visuals {
    flex: 1.2;
    min-width: 350px;
    display: flex;
    justify-content: center;
    gap: 30px;
    position: relative;
    padding: 20px;
}

/* Phone Cards */
.bill-card {
    background: white;
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    width: 280px;
    padding: 30px;
    text-align: center;
    border: 8px solid #f8f8f8;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Card 1: With Solar */
.bill-card.solar-card {
    border-color: rgba(46, 204, 113, 0.3);
    z-index: 2;
    transform: scale(1.05);
    animation: pulseObj 4s infinite ease-in-out;
}

@keyframes pulseObj {

    0%,
    100% {
        transform: scale(1.05);
        box-shadow: 0 20px 50px rgba(46, 204, 113, 0.2);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 30px 60px rgba(46, 204, 113, 0.35);
    }
}

/* Card 2: Without Solar */
.bill-card.no-solar-card {
    border-color: rgba(236, 94, 42, 0.1);
    transform: scale(0.95);
    opacity: 0.9;
    filter: grayscale(0.2);
}

.bc-header {
    border-bottom: 2px solid #f9f9f9;
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bc-header-icon {
    font-size: 1.5rem;
    color: #ddd;
}

.solar-card .bc-header-icon {
    color: var(--success-green);
}

.no-solar-card .bc-header-icon {
    color: var(--lime);
}


.bc-label {
    font-size: 0.85rem;
    color: var(--gray-text);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.bc-amount {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 5px;
    line-height: 1;
}

.solar-card .bc-amount {
    color: var(--success-green);
}

.no-solar-card .bc-amount {
    color: var(--lime);
}

.bc-note {
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 25px;
    font-style: italic;
}

/* Visual Bar Graph simulation */
.bc-graph {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 100px;
    padding-top: 20px;
    border-top: 1px dashed #eee;
}

.bc-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.bc-bar {
    width: 24px;
    border-radius: 6px 6px 0 0;
    transition: height 1s ease;
}

.bc-month {
    font-size: 0.7rem;
    color: #bbb;
    text-transform: uppercase;
}

/* Colors for bars */
.solar-card .bc-bar {
    background: var(--success-green);
    opacity: 0.7;
}

.no-solar-card .bc-bar {
    background: var(--lime);
    opacity: 0.7;
}

/* Responsive adjustments */
@media screen and (max-width: 968px) {
    .ws-comparison-body {
        flex-direction: column;
    }

    .ws-col {
        border-right: none;
        border-bottom: 1px solid #eee;
    }

    .bill-diff-wrapper {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }

    .bill-visuals {
        margin-top: 30px;
        transform: scale(0.85);
        width: 100%;
        gap: 15px;
    }

    .bill-card {
        width: 250px;
        padding: 20px;
    }

    .ws-stats-row {
        gap: 15px;
    }

    .ws-stat-item {
        padding: 15px;
        min-width: 100%;
    }
}

/* Expert CTA Section */
.expert-cta-section {
    position: relative;
    padding: 60px 20px;
    margin: 0 auto;
    max-width: 1400px;
}

/* The tilted background container */
.expert-cta-bg-wrapper {
    background-color: #ec5e2a;
    /* User requested color */
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 20%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 20%);
    /* Pattern simulation using repeating gradients */
    background-image:
        linear-gradient(135deg, #d44d1e 25%, transparent 25%),
        linear-gradient(225deg, #d44d1e 25%, transparent 25%),
        linear-gradient(45deg, #d44d1e 25%, transparent 25%),
        linear-gradient(315deg, #d44d1e 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 40px 40px;
    background-repeat: repeat;
    /* Cleaner solid background to ensure text readability if pattern is too complex, 
       but let's try a simple SVG-like pattern via CSS if possible or just the color. 
       Let's stick to the color with a subtle noise for texture to keep it clean.
       Actually, let's use the requested color + a subtle gradient to give it the "premium" depth. */
    background: linear-gradient(135deg, #ec5e2a, #d44d1e);

    border-radius: 50px;
    /* Large rounded corners */
    transform: rotate(-2deg);
    /* The tilt */
    padding: 60px 40px;
    box-shadow: 0 20px 50px rgba(46, 204, 113, 0.3);
    overflow: hidden;
    position: relative;
    width: 95%;
    margin: 0 auto;
}

/* Pattern overlay */
.expert-cta-bg-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0 L15 5 L10 10 L5 5 Z' fill='%23000000' fill-opacity='0.05'/%3E%3C/svg%3E");
    background-size: 60px 60px;
    opacity: 0.5;
    pointer-events: none;
}

/* Counter-rotate content to keep it straight */
.expert-cta-content-inner {
    transform: rotate(2deg);
    text-align: center;
    position: relative;
    z-index: 2;
}

.expert-cta-content-inner h2 {
    font-size: 2.5rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: var(--white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    display: inline-block;
}

/* Yellow underline for 'Experts Now' roughly */
.expert-cta-content-inner h2::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    background: #f1c40f;
    margin: 10px auto 0;
    border-radius: 2px;
}

.expert-cta-content-inner p {
    font-size: 1rem;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.6;
    color: var(--white);
    opacity: 0.95;
    font-weight: 500;
}

/* The White Pill Box */
.expert-cta-box {
    background: var(--white);
    border-radius: 100px;
    /* Full pill shape */
    padding: 15px 40px;
    /* Slimmer vertical padding */
    display: inline-flex;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
}

.expert-cta-box:hover {
    transform: none;
    /* remove lift on box itself */
}

/* Phone Group */
.cta-phone-group {
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
    background: transparent !important;
}

.cta-phone-icon-circle {
    /* Image icon replacement style */
    font-size: 2.5rem;
    color: #3498db;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    /* Simulate the circular icon in image if needed, but plain icon is fine */
}

.cta-phone-text {
    display: flex;
    flex-direction: column;
    background: transparent !important;
}

.cta-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    background: transparent !important;
}

.cta-number {
    font-size: 1.8rem;
    font-weight: 800;
    color: #2980b9;
    line-height: 1;
    text-decoration: none;
    background: transparent !important;
}

/* Divider */
.cta-divider {
    font-weight: 700;
    color: #3498db;
    font-size: 0.9rem;
    text-transform: uppercase;
    margin: 0 10px;
}

/* Button */
.cta-request-btn {
    background: #f1c40f;
    /* Bright Yellow */
    color: var(--dark);
    /* Dark text on yellow */
    font-weight: 800;
    padding: 14px 30px;
    border-radius: 50px;
    text-transform: uppercase;
    font-size: 0.9rem;
    box-shadow: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    letter-spacing: 0.5px;
}

.cta-request-btn:hover {
    background: #f39c12;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(241, 196, 15, 0.4);
}

/* Responsive */
@media screen and (max-width: 968px) {
    .expert-cta-bg-wrapper {
        transform: rotate(0);
        width: 100%;
        border-radius: 20px;
        padding: 40px 20px;
    }

    .expert-cta-content-inner {
        transform: rotate(0);
    }

    .expert-cta-box {
        flex-direction: column;
        border-radius: 20px;
        padding: 30px 20px;
        width: 100%;
        gap: 20px;
    }

    .cta-divider {
        display: block;
        /* Keep displayed or hide? Image shows horizontal layout. On mobile vertical is better. */
        margin: 10px 0;
        opacity: 0.5;
    }

    .expert-cta-content-inner h2 {
        font-size: 1.8rem;
    }
}

/* Have Query Contact Section */
.query-section {
    position: relative;
    padding: 80px 20px;
    background-color: #f7fbfd;
    /* Very light blue tinge */
    overflow: hidden;
}

.query-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 2;
}

/* Left Column: Info */
.query-info {
    flex: 1;
    max-width: 500px;
}

.query-heading h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    color: #0c6ba1;
    /* Specific blue from image */
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.query-heading-line {
    width: 80px;
    height: 4px;
    background-color: #a4c9e1;
    /* Light blue divider */
    margin-bottom: 25px;
    border-radius: 2px;
}

.query-desc {
    color: var(--gray-text);
    margin-bottom: 40px;
    font-size: 1.05rem;
    line-height: 1.6;
}

.query-contact-cards {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.q-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.q-icon {
    width: 50px;
    height: 50px;
    background-color: #0c6ba1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.q-card:hover .q-icon {
    transform: scale(1.1) rotate(10deg);
}

.q-text h4 {
    color: var(--dark);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.q-text a {
    color: #0c6ba1;
    font-size: 1.5rem;
    font-weight: 800;
    text-decoration: none;
    transition: color 0.3s ease;
}

.q-text a.q-email {
    font-size: 1.25rem;
    /* Slightly smaller for email */
}

.q-text a:hover {
    color: var(--lime);
}

/* Right Column: Form */
.query-form-wrapper {
    flex: 1;
    max-width: 550px;
    position: relative;
}

/* Background Shape behind form */
.query-form-bg-shape {
    position: absolute;
    top: -40px;
    right: -80px;
    width: 100%;
    height: 120%;
    background: #e1f5fe;
    /* Light cyan/blue */
    border-radius: 80px 40px 100px 40px;
    transform: rotate(-10deg);
    z-index: -1;
    opacity: 0.6;
}

.query-form-card {
    background: var(--white);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    position: relative;
}

.q-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.q-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.q-form-group label {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 8px;
    font-weight: 500;
}

.q-form-group label span {
    color: #e74c3c;
}

.q-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #eee;
    background: #fdfdfd;
    border-radius: 25px;
    /* Pill inputs */
    font-size: 0.95rem;
    transition: all 0.3s ease;
    outline: none;
}

.q-input:focus {
    border-color: #0c6ba1;
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(12, 107, 161, 0.1);
}

.q-checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

.q-checkbox-group label {
    font-size: 0.85rem;
    color: #888;
    cursor: pointer;
}

.q-submit-btn {
    background-color: #0ea5e9;
    /* Bright yellow */
    color: #333;
    /* Dark text */
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    padding: 14px 40px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    /* Center button */
    transition: all 0.3s ease;

}

.q-submit-btn:hover {
    background-color: #ec5e2a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 204, 0, 0.4);
}

/* Need Help Bottom Banner */
.need-help-banner {
    background: #0ea5e9;
    /* Cyan blue like image */
    background: linear-gradient(90deg, #0284c7 0%, #0ea5e9 100%);
    padding: 25px 20px;
    margin-top: 50px;
    /* Space from form if separate, but user might want it connected. I'll make it separate block below section */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--white);
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    top: 30px;
    /* Pull it up into the section slightly or padding? */
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.3);
}

.nh-title {
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    font-family: inherit;
}

.nh-actions {
    display: flex;
    gap: 15px;
}

.nh-btn {
    padding: 10px 24px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.nh-btn-outline {
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: var(--white);
}

.nh-btn-outline:hover {
    background: var(--white);
    color: #0284c7;
}

.nh-btn-yellow {
    background: #0ea5e9;
    color: #ffffff;
    border: 2px solid #a4c9e1;
}

.nh-btn-yellow:hover {
    background: var(--white);
    border-color: #a4c9e1;
}

/* Responsive */
@media screen and (max-width: 968px) {
    .query-container {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .query-heading h2 {
        font-size: 2rem;
    }

    .query-heading-line {
        margin: 0 auto 25px;
    }

    .q-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    .query-form-bg-shape {
        display: none;
        /* Hide complex shape on mobile */
    }

    .need-help-banner {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        margin-top: 40px;
    }

    .nh-actions {
        flex-direction: column;
        width: 100%;
    }

    .nh-btn {
        width: 100%;
        text-align: center;
    }
}

/* Thermodynamic Page Header Alignment Fix */
.thermodynamic-page .hero-section {
    padding-top: 180px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}

.thermodynamic-page .hero-content {
    margin-top: 0 !important;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 50px;
}

/* =========================================
   Domestic PV Page Styles
   ========================================= */
.domestic-hero {
    position: relative;
    height: 90vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

/* Feature Cards */
.feature-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-bottom: 5px solid var(--lime);
}

.feature-card i {
    font-size: 3rem;
    color: var(--lime);
    margin-bottom: 25px;
    background: rgba(236, 94, 42, 0.1);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.feature-card:hover i {
    background: var(--lime);
    color: var(--white);
    transform: rotateY(360deg);
}

.feature-card h3 {
    margin-bottom: 15px;
    font-size: 1.4rem;
    font-weight: 700;
}

/* Grant Items */
.grant-box-container {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.grant-item {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    flex: 1;
    min-width: 250px;
    max-width: 350px;
    position: relative;
    overflow: hidden;
}

.grant-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.grant-item.highlight-grant {
    background: linear-gradient(135deg, var(--brand-blue), #2980b9);
    color: var(--white);
    border: none;
}

.grant-item .amount {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--lime);
    line-height: 1;
}

.grant-item.highlight-grant .amount {
    color: var(--white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Utilities for Domestic PV */
.section-padding {
    padding: 100px 0;
}

.check-list {
    margin-top: 30px;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
}

.check-list li i {
    color: var(--lime);
    font-size: 1.2rem;
}

.bg-light-gray {
    background-color: #f8f9fa;
}

.bg-dark-section {
    background-color: #1a1a1a;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

/* Image styling */
.img-rounded-shadow {
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.img-rounded-shadow:hover {
    transform: scale(1.02);
}


/* Domestic PV Header Background Override */
.page-header.domestic-header-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/Domestic PV.png');
}


/* =========================================
   Domestic PV Premium Upgrades (Step 88)
   ========================================= */

/* Premium Feature Cards */
.feature-card.premium {
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    /* Softer, deeper shadow */
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: #fff;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy transition */
}

.feature-card.premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--lime), #f1c40f);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.feature-card.premium:hover::before {
    transform: scaleX(1);
}

.feature-card.premium:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 60px rgba(236, 94, 42, 0.15);
    /* Orange glow on hover */
}

/* Pro Tip Badge for Cards */
.pro-tip-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e1f5fe;
    color: var(--brand-blue);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Glass Panel for Dark Section */
.glass-panel-dark {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.glass-panel-dark:hover {
    transform: scale(1.02);
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Grant Card Upgrades */
.grant-item.premium-grant {
    border: 1px solid #eee;
    padding-top: 50px;
    /* Space for badge */
}

.grant-badge {
    position: absolute;
    top: 15px;
    right: 20px;
    background: #f1c40f;
    color: var(--dark);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Floating Image Animation */
.img-float-anim {
    animation: floatUpDown 4s ease-in-out infinite;
}

@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Section Title Highlight */
.section-title.modern {
    position: relative;
    display: inline-block;
    margin-bottom: 40px;
}

.section-title.modern::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--lime);
    border-radius: 2px;
}


/* Fix for Clean Export Guarantee Section (White Boxes on Dark Background) */
/* Ensure check-list items do not have white backgrounds unless intended */
.bg-dark-section .check-list li {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9);
    padding: 0;
    box-shadow: none;
    border: none;
}

/* Fix for Left Aligned Section Titles */
.section-title.modern.left-align {
    text-align: left;
}

.section-title.modern.left-align::after {
    left: 0;
    transform: none;
    width: 80px;
    /* Slightly longer for emphasis */
}

/* One Tree Section Fixes */
.one-tree-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    align-items: center;
    text-align: left;
}

@media (max-width: 968px) {
    .one-tree-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}


/* Redesigned One Tree Section */
.bg-nature-green {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    position: relative;
    overflow: hidden;
}

.bg-nature-green::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iMiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC4xIi8+PC9zdmc+');
    opacity: 0.3;
}

.tree-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    position: relative;
    z-index: 1;
}

.tree-visual {
    flex: 0 0 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 300px;
    height: 300px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
}

.tree-visual i {
    font-size: 8rem;
    color: white;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
}

.tree-text {
    flex: 1;
}

.tree-text h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.2;
}

.tree-text p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 35px;
}

.btn-white-outline {
    display: inline-block;
    padding: 15px 40px;
    border: 2px solid white;
    background: transparent;
    color: white;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-white-outline:hover {
    background: white;
    color: #27ae60;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

@media (max-width: 968px) {
    .tree-content-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .tree-visual {
        width: 200px;
        height: 200px;
        flex: 0 0 200px;
    }

    .tree-visual i {
        font-size: 5rem;
    }
}


/* Photovoltaic Page Specific & Missing Utilities */
.page-hero {
    position: relative;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-size: cover;
    margin-top: 130px;
    /* Match fixed top-bar + navbar offset */
    color: var(--white);
    text-align: center;
}

@media (max-width: 992px) {
    .page-hero {
        margin-top: 80px;
        /* Mobile navbar only */
    }
}

.page-hero .hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.page-hero .hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.modern-left-align {
    font-size: 2.2rem;
    color: var(--dark);
    font-weight: 700;
    margin-bottom: 15px;
}

.title-underline-left {
    width: 60px;
    height: 4px;
    background-color: var(--lime);
    margin: 0 0 25px 0;
    border-radius: 2px;
}

.btn-secondary {
    background-color: var(--brand-blue);
    color: var(--white);
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(41, 128, 185, 0.3);
    color: var(--white);
}

/* Feature Box Enhancements */
.feature-box {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.custom-list {
    list-style: none;
    padding: 0;
}

.custom-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
}

.reverse-mobile {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .reverse-mobile {
        flex-direction: column-reverse;
    }

    .reverse-mobile img {
        margin-bottom: 20px;
    }
}

/* ========================================= */
/*      Specific Styles for PV Panels Page   */
/* ========================================= */

/* Utility Spacing & Layout */
.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-40 {
    margin-top: 40px;
}

.p-40 {
    padding: 40px;
}

.gap-20 {
    gap: 20px;
}

.section-padding {
    padding: 80px 0;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-white {
    color: var(--white);
}

.text-primary {
    color: var(--lime);
}

.text-secondary {
    color: var(--brand-blue);
}

.bg-light {
    background-color: #f9f9f9;
}

.bg-dark {
    background-color: var(--dark);
}

.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

.rounded-lg {
    border-radius: 16px;
}

.shadow-lg {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Buttons */
.btn-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Info Card (Dark Glassy Look) */
.info-card {
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    border: 1px solid #333;
    position: relative;
    overflow: hidden;
}

.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--lime);
}

/* FAQ Item */
.faq-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 12px;
    transition: all 0.3s ease;
    height: 100%;
}

.faq-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
    border-color: var(--lime);
}

.faq-item h4 {
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.faq-item p {
    font-size: 0.95rem;
    color: #000000;
    line-height: 1.6;
}

/* CTA Section */
.cta-section {
    position: relative;
    overflow: hidden;
}

/* Premium List Styling */
.custom-list li i {
    font-size: 1.2rem;
    min-width: 25px;
}

/* ========================================= */
/*      Premium Redesign - PV Page           */
/* ========================================= */

/* Grids */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* Benefit Cards */
.benefit-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.benefit-card .icon-circle {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--lime), #ff8c00);
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    box-shadow: 0 10px 20px rgba(236, 94, 42, 0.3);
}

.benefit-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--dark);
}

.benefit-card p {
    font-size: 0.95rem;
    color: #666;
}

/* Modern Heading */
.modern-heading {
    font-size: 2.5rem;
    color: var(--dark);
    font-weight: 700;
    margin-bottom: 10px;
}

.heading-line {
    width: 80px;
    height: 4px;
    background: var(--lime);
    margin-bottom: 25px;
    border-radius: 2px;
}

.heading-line.center-line {
    margin: 0 auto 25px auto;
}

/* Commercial Section (Split) */
.commercial-section {
    position: relative;
    overflow: hidden;
}

.commercial-content {
    padding: 80px;
}

.section-badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(236, 94, 42, 0.1);
    color: var(--lime);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.section-badge.badge-lime {
    background: var(--lime);
    color: #fff;
}

.stats-row {
    display: flex;
    gap: 40px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-num {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--lime);
    line-height: 1;
}

.stat-num small {
    font-size: 1rem;
    color: #999;
}

.stat-label {
    font-size: 0.9rem;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 5px;
}

/* Accordion Fake (Static List) */
.accordion-fake {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.acc-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1rem;
    color: #eee;
}

.acc-item i {
    color: var(--lime);
}

/* Glass Card (Conservation) */
.glass-card {
    background: rgba(255, 255, 255, 0.9);
    padding: 60px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.logo-wall {
    display: flex;
    justify-content: center;
    gap: 40px;
    opacity: 0.6;
    margin-top: 30px;
}

.bg-light-gray {
    background-color: #f8f9fa;
}

.text-lime {
    color: var(--lime);
}

.text-green {
    color: #2ecc71;
}

.btn-glass-outline {
    border: 2px solid #fff;
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    display: inline-block;
    transition: all 0.3s;
}

.btn-glass-outline:hover {
    background: #fff;
    color: var(--primary);
}

.btn-white {
    background: #fff;
    color: var(--primary);
    padding: 14px 34px;
    font-weight: 700;
    border-radius: 50px;
    display: inline-block;
    transition: all 0.3s;
}

.btn-white:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
}

.text-gray {
    color: #555;
}

.text-gray-light {
    color: #ccc;
}

/* Animation Utilities */
.animate-up {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
    /* Start hidden */
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

/* Image Hover Effects */
.image-stack img {
    transition: transform 0.5s ease;
}

.image-stack:hover img {
    transform: scale(1.02);
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* ========================================= */
/*      Grid System (Bootstrap-like)         */
/* ========================================= */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
}

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.no-gutters>.col,
.no-gutters>[class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.col-12,
.col-md-4,
.col-md-6,
.col-md-8,
.col-md-10,
.col-md-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-md-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .d-flex {
        display: flex !important;
    }

    .justify-content-center {
        justify-content: center !important;
    }

    .justify-content-between {
        justify-content: space-between !important;
    }

    .align-items-center {
        align-items: center !important;
    }

    .flex-column {
        flex-direction: column !important;
    }
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* Spacing Utilities */
.p-0 {
    padding: 0 !important;
}

.p-60 {
    padding: 60px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.gap-20 {
    gap: 20px;
}

.gap-40 {
    gap: 40px;
}

/* ========================================= */
/*      Premium Floating Pill Navbar         */
/* ========================================= */

.navbar-premium {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: transparent;
    transition: all 0.3s ease;
}

.navbar-premium .logo {
    flex: 1;
}

/* The Center Pill */
.navbar-premium .nav-center-pill {
    flex: 2;
    display: flex;
    justify-content: center;
}

.navbar-premium .nav-links {
    display: flex;
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(15px);
    padding: 0 10px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin: 0;
    /* Override default */
}

.navbar-premium .nav-links li {
    margin: 0;
}

.navbar-premium .nav-links a {
    color: #eee;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 14px 20px;
    border-radius: 30px;
    transition: all 0.3s;
    background: transparent;
    /* Override default */
    box-shadow: none;
}

.navbar-premium .nav-links a:hover,
.navbar-premium .nav-links a.active {
    color: #fff;
    background: transparent;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transform: none;
    /* remove default lift */
}

/* Right Side Button */
.navbar-premium .nav-right-btn {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.navbar-premium .btn-quote-white {
    background: #fff;
    color: var(--lime);
    font-weight: 700;
    padding: 12px 30px;
    border-radius: 50px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.navbar-premium .btn-quote-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    background: #f8f8f8;
}

/* Hero Bottom Fade (Gradient to White) */
.hero-bottom-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to top, #fff 10%, rgba(255, 255, 255, 0) 100%);
    z-index: 5;
    pointer-events: none;
}

/* Simple Centered Hero Text for this style */
.hero-simple-center {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding-top: 15vh;
    /* Push down to center visually */
}

.hero-simple-center h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.hero-simple-center p {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Sticky State for Premium Nav */
.navbar-premium.scrolled {
    background: rgba(255, 255, 255, 0.95);
    padding: 15px 5%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.navbar-premium.scrolled .nav-links {
    background: #f4f4f4;
    border-color: #ddd;
    box-shadow: none;
}

.navbar-premium.scrolled .nav-links a {
    color: #333;
}

.navbar-premium.scrolled .nav-links a:hover {
    color: var(--lime);
}

.navbar-premium.scrolled .btn-quote-white {
    background: var(--lime);
    color: #fff;
}

/* Hide Top Bar if needed */
.top-bar.hidden {
    display: none;
}

/* Premium Header Responsive Adjustments */
@media (max-width: 968px) {
    .navbar-premium {
        top: 0 !important;
        /* Stick to top on mobile */
        padding: 15px 20px;
        background: rgba(255, 255, 255, 0.95);
        /* Solid bg on mobile */
    }

    .navbar-premium .nav-center-pill {
        display: none;
        /* Hide pill menu on mobile */
    }

    .navbar-premium .logo img {
        height: 40px;
    }

    .navbar-premium .btn-quote-white {
        display: none;
        /* Hide desktop quote btn */
    }

    /* Show Hamburger */
    .navbar-premium .hamburger {
        display: block;
        margin-left: auto;
    }

    .navbar-premium .hamburger .bar {
        background-color: #333;
    }

    /* Hide Top Bar on Mobile if crowded */
    .top-bar {
        display: none;
    }
}

/* Thermodynamic Solar Block Page Styles */
.page-header {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    position: relative;
    /* Ensure background image is set via inline style or separate rule */
}

.header-content {
    max-width: 800px;
    padding: 20px;
    z-index: 2;
    position: relative;
}

/* Intro Section */
.intro-section {
    padding: 80px 20px;
    background: var(--white);
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.intro-text {
    /* reuse generic if possible, or define here */
}

.intro-image-wrapper {
    position: relative;
}

.intro-circle-deco {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: var(--lime);
    border-radius: 50%;
    opacity: 0.1;
    z-index: 0;
}

.intro-image-wrapper img {
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    border: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
}

/* Install Options */
.install-options {
    padding: 80px 20px;
    background: var(--gray-light);
}

.install-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    text-align: left;
}

.option-card {
    background: var(--white);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.option-card:hover {
    transform: translateY(-5px);
}

.icon-box {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.icon-box.blue {
    background: rgba(52, 152, 219, 0.1);
    color: var(--brand-blue);
}

.icon-box.green {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
}

/* Benefits Grid */
.benefits-section {
    padding: 100px 20px;
    background: var(--dark);
    color: var(--white);
}

.benefits-grid-block {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.benefit-item-block {
    background: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.benefit-item-block:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
}

.benefit-item-block i {
    font-size: 2rem;
    color: var(--lime);
    margin-bottom: 20px;
}

.benefit-item-block p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
}

/* Truth Section */
.truth-section {
    padding: 100px 20px;
    background: var(--white);
}

.truth-box {
    background: var(--gray-light);
    padding: 40px;
    border-radius: 20px;
    border-left: 5px solid var(--lime);
}

.truth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin-top: 60px;
}

.stat-box-block {
    background: var(--dark);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

/* CTA */
.cta-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, var(--lime), #d44d1e);
    text-align: center;
    color: var(--white);
}

.cta-section .container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-section .btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* Responsive Fixes for Block Page */
@media (max-width: 900px) {

    .intro-grid,
    .truth-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .intro-image-wrapper {
        order: -1;
    }

    .page-header h1 {
        font-size: 2.5rem;
    }
}

/* Detailed Typography & Components for Thermodynamic Page */
.page-header .small-label {
    color: var(--lime);
    margin-bottom: 10px;
}

.page-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.page-header .hero-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

.intro-text h2 {
    font-size: 2.5rem;
    margin-bottom: 25px;
    color: var(--dark);
}

.intro-text h2 span.highlight {
    color: var(--lime);
}

.intro-text p {
    margin-bottom: 20px;
    color: var(--gray-text);
    font-size: 1.1rem;
    line-height: 1.8;
}

.intro-text p:last-of-type {
    margin-bottom: 30px;
}

.install-options h2 {
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: var(--dark);
}

.benefits-section .header-center {
    text-align: center;
    margin-bottom: 60px;
}

.benefits-section .header-center .small-label {
    color: var(--lime);
}

.benefits-section .header-center h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.benefits-section .header-center p {
    max-width: 600px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.7);
}

.truth-section h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: var(--dark);
}

.truth-section h2 span.highlight {
    color: var(--lime);
}

.truth-box p,
.truth-section p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
}

.truth-section h3 {
    color: var(--dark);
}

.truth-box h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.truth-grid>div>h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.cta-section h2 {
    font-size: 2.8rem;
    margin-bottom: 20px;
    font-weight: 700;
    text-align: center;
    width: 100%;
}

.cta-section p {
    font-size: 1.25rem;
    margin-bottom: 40px;
    opacity: 0.95;
    text-align: center;
    width: 100%;
}

.cta-section .btn-group {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.cta-section .btn-primary.btn-white {
    background: white;
    color: var(--lime);
    border: 2px solid white;
}

.cta-section .btn-primary.btn-outline {
    background: transparent;
    border: 2px solid white;
    color: white;
}

.cta-section .btn-primary.btn-white:hover {
    background: var(--dark);
    color: white;
    border-color: var(--dark);
}

.cta-section .btn-primary.btn-outline:hover {
    background: white;
    color: var(--lime);
}

/* Option Cards Typography */
.option-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.option-card p {
    color: var(--gray-text);
}

/* Benefit Items Typography */
.benefit-item-block h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: var(--lime);
}

/* Stat Box Typography */
.stat-box-block i {
    font-size: 4rem;
    color: var(--lime);
    margin-bottom: 20px;
    display: block;
}

.stat-box-block h4 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1;
}

.stat-box-block span {
    font-size: 1.2rem;
    opacity: 0.8;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* --- Residential Solar PV Grant Page Styles --- */

/* Page Header */
.page-header {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/hero_installation.png');
    /* Fallback */
    background-size: cover;
    background-position: center;
    padding: 180px 5% 100px;
    /* Reduced padding compared to home hero */
    text-align: center;
    color: var(--white);
    position: relative;
    margin-top: 0;
}

.grant-page-header {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/hero_installation.png');
    background-size: cover;
    background-position: center;
}

.page-header .header-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.page-header .header-content p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.9;
}

/* Intro Section */
.grant-intro-container {
    display: flex;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 5%;
    align-items: center;
}

.grant-intro-content {
    flex: 1;
}

.section-label {
    display: inline-block;
    color: var(--lime);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.grant-intro-content h2 {
    font-size: 2.5rem;
    color: var(--dark);
    margin-bottom: 20px;
    line-height: 1.2;
}

.grant-intro-content p {
    color: var(--gray-text);
    margin-bottom: 20px;
    line-height: 1.7;
}

.grant-intro-image {
    flex: 1;
    position: relative;
}

.grant-intro-image img {
    width: 100%;
    border-radius: var(--border-radius);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.info-box-blue {
    background: rgba(52, 152, 219, 0.1);
    border-left: 4px solid var(--brand-blue);
    padding: 20px;
    border-radius: 8px;
    margin-top: 30px;
}

.info-box-blue h3 {
    color: var(--brand-blue);
    font-size: 1.1rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-box-blue p {
    margin-bottom: 0;
    font-size: 0.95rem;
}

/* Grant Amounts */
.grant-amounts-section {
    background: var(--gray-light);
    padding: 80px 5%;
    text-align: center;
}

.centered-title {
    max-width: 800px;
    margin: 0 auto 50px;
}

.centered-title h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--dark);
}

.grant-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto 50px;
}

.grant-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.grant-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.grant-card.featured {
    border: 2px solid var(--lime);
    background: #fff9f5;
    transform: scale(1.05);
    z-index: 2;
}

.grant-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
}

.gc-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--lime);
    color: var(--white);
    padding: 5px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(236, 94, 42, 0.4);
}

.gc-icon {
    font-size: 2.5rem;
    color: var(--lime);
    margin-bottom: 20px;
}

.grant-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--dark);
}

.gc-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 5px;
}

.gc-meta {
    color: var(--gray-text);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.definition-box {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    padding: 25px;
    border-radius: 12px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 4px solid var(--lime);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.definition-box h4 {
    color: var(--dark);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.definition-box h4 i {
    color: var(--lime);
}

.definition-box p {
    font-size: 0.95rem;
    color: var(--gray-text);
}

/* Eligibility & Process */
.eligibility-process-section {
    padding: 100px 5%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
}

.eligibility-col,
.process-col {
    flex: 1;
}

.eligibility-col h3,
.process-col h3 {
    font-size: 2rem;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--dark);
}

.eligibility-col h3 i,
.process-col h3 i {
    color: var(--lime);
}

.check-list-modern {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.check-list-modern li {
    background: var(--white);
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
}

.check-list-modern li i {
    font-size: 1.5rem;
    color: var(--lime);
    background: rgba(236, 94, 42, 0.1);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.check-list-modern li span {
    color: var(--gray-text);
    font-size: 0.95rem;
    line-height: 1.5;
}

.check-list-modern li span strong {
    color: var(--dark);
    display: block;
    margin-bottom: 4px;
    font-size: 1.05rem;
}

/* Vertical Process Timeline */
.process-timeline-vertical {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    padding-left: 30px;
}

.process-timeline-vertical::before {
    content: '';
    position: absolute;
    left: 15px;
    /* Half of pt-number width roughly */
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: #eee;
    z-index: 0;
}

.pt-item {
    position: relative;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    z-index: 1;
}

.pt-number {
    width: 32px;
    height: 32px;
    background: var(--brand-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 5px;
    /* Align with title */
    box-shadow: 0 0 0 5px var(--white);
    /* Mask the line */
}

.pt-content {
    background: var(--gray-light);
    padding: 15px 20px;
    border-radius: 8px;
    flex: 1;
}

.pt-content h4 {
    margin-bottom: 5px;
    font-size: 1.05rem;
    color: var(--dark);
}

.pt-content p {
    font-size: 0.9rem;
    color: var(--gray-text);
    margin-bottom: 0;
}

/* Benefits */
.grant-benefits-section {
    padding: 80px 5%;
    text-align: center;
    background: var(--white);
}

.grant-benefits-section h2 {
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.benefits-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.benefit-card-simple {
    padding: 30px;
    border-radius: 12px;
    transition: var(--transition);
    border: 1px solid #eee;
}

.benefit-card-simple:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.benefit-card-simple i {
    font-size: 2.5rem;
    color: var(--lime);
    margin-bottom: 20px;
}

.benefit-card-simple h4 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: var(--dark);
}

.benefit-card-simple p {
    color: var(--gray-text);
    font-size: 0.95rem;
}

/* CTA */
.grant-cta-section {
    padding: 80px 5%;
    /* background: linear-gradient(135deg, #111, #222); */
    color: var(--white);
    text-align: center;
}

.cta-content-box {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    border-radius: 20px;
    position: relative;
    z-index: 1;
}

.cta-content-box h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.cta-content-box p {
    color: #ccc;
    font-size: 1.1rem;
    margin-bottom: 40px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.one-tree-note {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.1);
    padding: 15px 30px;
    border-radius: 50px;
    backdrop-filter: blur(5px);
}

.one-tree-note i {
    color: var(--lime);
    font-size: 1.5rem;
}

.one-tree-note p {
    color: var(--white);
    margin: 0;
    font-size: 0.9rem;
    text-align: left;
}

/* Responsive */
@media (max-width: 900px) {
    .page-header {
        padding: 150px 5% 60px;
    }

    .page-header .header-content h1 {
        font-size: 2.5rem;
    }

    .grant-intro-container {
        flex-direction: column;
        gap: 40px;
    }

    .grant-cards-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .eligibility-process-section {
        flex-direction: column;
    }

    .cta-buttons {
        flex-direction: column;
    }
}

/* Non-Domestic Microgen Grant Page Styles */

/* Page Header - Adjusted for fixed elements */
.page-header.grant-ndmg-header {
    background: url('../images/Commercial PV.png') no-repeat center center/cover;
    height: 450px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    margin-top: 0;
    /* Reset margin */
    padding-top: 130px;
    /* Account for Top Bar (50px) + Navbar (80px) */
}

/* Mobile Header Adjustment */
@media (max-width: 968px) {
    .page-header.grant-ndmg-header {
        padding-top: 100px;
        /* Navbar only on mobile */
    }
}

.page-header.grant-ndmg-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Overlay */
}

.page-header.grant-ndmg-header .header-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 20px;
    animation: fadeInUp 1s ease-out;
}

.page-header.grant-ndmg-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.page-header.grant-ndmg-header p {
    font-size: 1.25rem;
    font-weight: 500;
    opacity: 0.9;
}

/* Intro Section */
.grant-intro-container {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

.grant-intro-text {
    flex: 1;
}

.grant-intro-text .section-label {
    color: var(--lime);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 10px;
}

.grant-intro-text h2 {
    font-size: 2.5rem;
    color: var(--dark);
    margin-bottom: 20px;
    line-height: 1.2;
}

.grant-intro-text p {
    font-size: 1.1rem;
    color: var(--gray-text);
    margin-bottom: 20px;
    line-height: 1.7;
}

.grant-intro-image {
    flex: 1;
    position: relative;
}

.grant-intro-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.grant-intro-image:hover img {
    transform: translateY(-5px);
}

/* Highlight Box */
.grant-highlight-box {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.gh-item {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    border-left: 4px solid var(--lime);
    flex: 1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.gh-label {
    display: block;
    font-size: 0.9rem;
    color: var(--gray-text);
    margin-bottom: 5px;
    font-weight: 600;
}

.gh-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark);
}

/* Eligibility Section */
.eligibility-section {
    background: #f9f9f9;
    padding: 80px 20px;
    margin-top: 60px;
}

.eligibility-section h2 {
    font-size: 2.5rem;
    color: var(--dark);
    margin-bottom: 50px;
}

.eligibility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.eligibility-card {
    background: var(--white);
    padding: 30px 20px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.eligibility-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.eligibility-card i {
    font-size: 2.5rem;
    color: var(--lime);
    margin-bottom: 20px;
    background: rgba(236, 94, 42, 0.1);
    width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.eligibility-card h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: var(--dark);
}

.eligibility-card p {
    font-size: 0.95rem;
    color: var(--gray-text);
}

/* Steps Section - Redesigned to match Visual Reference */
.grant-steps-section {
    padding: 100px 20px;
    max-width: 800px;
    /* Constrain width more for the centered look */
    margin: 0 auto;
    position: relative;
}

.gs-content h2 {
    font-size: 2.8rem;
    color: var(--dark);
    margin-bottom: 20px;
    text-align: center;
    font-weight: 700;
}

.gs-content>p {
    text-align: center;
    margin-bottom: 80px;
    /* More space before first card */
    font-size: 1.1rem;
    color: var(--gray-text);
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.steps-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 60px;
    /* Large gap between cards */
    padding-top: 20px;
    position: relative;
}

/* Optional: Subtle connecting line */
.steps-list::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: #f0f0f0;
    z-index: 0;
}

.steps-list li {
    position: relative;
    background: var(--white);
    padding: 50px 40px 40px;
    /* More top padding for the badge overlap */
    border-radius: 24px;
    /* More rounded */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
    /* Very soft, deep shadow */
    border: 1px solid rgba(255, 255, 255, 0.8);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
    /* Sit above the connecting line */
}

.steps-list li:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 70px rgba(236, 94, 42, 0.12);
}

/* Step Number Badge */
.step-num {
    position: absolute;
    top: -30px;
    /* Float higher */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--lime), #d44d1e);
    /* Gradient pop */
    color: var(--white);
    font-size: 1.4rem;
    font-weight: 800;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 6px solid var(--white);
    /* Thicker white ring */
    box-shadow: 0 10px 25px rgba(236, 94, 42, 0.3);
    z-index: 2;
}

.step-info h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: var(--dark);
    font-weight: 700;
}

.step-info p {
    font-size: 1.1rem;
    color: var(--gray-text);
    margin: 0;
    line-height: 1.6;
}

/* Responsive Adjustments */
@media screen and (max-width: 900px) {
    .page-header.grant-ndmg-header h1 {
        font-size: 2.5rem;
    }

    .grant-intro-container {
        flex-direction: column;
        text-align: center;
    }

    .grant-highlight-box {
        justify-content: center;
    }

    .grant-intro-image {
        order: -1;
    }

    .grant-steps-section {
        padding: 60px 20px;
    }

    .steps-list {
        gap: 50px;
    }

    .steps-list li {
        padding: 40px 20px 30px;
    }
}

/* Commercial PV Page Styles */
.lead-text {
    font-size: 1.25rem;
    color: var(--dark);
    line-height: 1.7;
    margin-bottom: 25px;
    font-weight: 500;
}

.highlight-block {
    position: relative;
    overflow: hidden;
}

.highlight-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(236, 94, 42, 0.05), transparent);
    z-index: 0;
}

.highlight-block h4,
.highlight-block p {
    position: relative;
    z-index: 1;
}

.btn-glow {
    background: linear-gradient(135deg, var(--lime) 0%, #ff7e5f 100%);
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 10px 20px rgba(236, 94, 42, 0.4);
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
    border: none;
}

.btn-glow:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(236, 94, 42, 0.6);
    color: #fff;
}

.sidebar-box {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%) !important;
}

.img-overlay-info {
    backdrop-filter: blur(5px);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent) !important;
}

.conservation-box {
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(46, 204, 113, 0.3);
}

.conservation-box::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: 0;
}

.conservation-box>* {
    position: relative;
    z-index: 1;
}

/* Page Header - Consistent across subpages */
.page-header {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../images/hero_new.png');
    background-size: cover;
    background-position: center;
    color: var(--white);
    padding: 120px 5% 60px;
    /* Adjusted padding for original sleek feel */
    text-align: center;
    margin-bottom: 0;
    position: relative;
    /* Removed clip-path as per user request */
}

.page-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    animation: fadeUp 0.8s ease-out;
}

.page-header p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.95;
    font-weight: 400;
    animation: fadeUp 0.8s ease-out 0.2s backwards;
}

/* Case Study Styles */
.case-study-section {
    padding: 80px 5%;
}

.video-showcase {
    max-width: 1200px;
    margin: 0 auto 80px;
    border-radius: 20px;
    background: #000;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    border: 4px solid var(--white);
    /* Premium border */
}

.video-showcase video {
    width: 100%;
    display: block;
    border-radius: 16px;
}

.video-overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    color: var(--white);
    pointer-events: none;
}

.video-overlay-text h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.video-overlay-text p {
    font-size: 1.1rem;
    max-width: 800px;
    opacity: 0.9;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Case Study Grid */
.case-study-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.case-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.case-card:hover {
    transform: translateY(-10px);
}

.case-img {
    height: 250px;
    overflow: hidden;
    position: relative;
}

.case-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.case-card:hover .case-img img {
    transform: scale(1.1);
}

.case-content {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.case-content h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--dark);
    font-weight: 700;
}

.case-content p {
    color: var(--gray-text);
    margin-bottom: 25px;
    font-size: 1rem;
    line-height: 1.6;
    flex: 1;
}

.case-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--lime);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    margin-top: auto;
}

.case-link i {
    transition: transform 0.3s ease;
}

.case-link:hover i {
    transform: translateX(5px);
}

/* Split Page Layout (Get Quote) */
.split-page-layout {
    display: flex;
    min-height: 100vh;
    padding-top: 160px;
    /* Increased spacing as requested */
    position: relative;
    background: var(--white);
}

.split-left {
    flex: 1;
    position: relative;
    background-color: var(--dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    color: var(--white);
    overflow: hidden;
}

.split-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/hero_installation.png');
    /* Default */
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    z-index: 1;
}

.split-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}

.split-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.split-content p.lead {
    font-size: 1.2rem;
    opacity: 0.95;
    margin-bottom: 40px;
    line-height: 1.6;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.benefit-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.1);
    padding: 15px 25px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
    cursor: default;
}

.benefit-item:hover {
    transform: translateX(10px);
    background: rgba(255, 255, 255, 0.15);
}

.benefit-item i {
    color: var(--lime);
    font-size: 1.2rem;
}

.benefit-item span {
    font-weight: 500;
    font-size: 1.05rem;
}

/* Right Side (Form) */
.split-right {
    flex: 1;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--gray-light);
    overflow-y: auto;
}

.quote-form-card {
    background: var(--white);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    /* Stronger shadow */
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    position: relative;
}

.form-header {
    text-align: center;
    margin-bottom: 30px;
}

.form-header h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--dark);
}

.form-header p {
    color: var(--gray-text);
}

.quote-form .form-row {
    display: flex;
    gap: 20px;
}

.quote-form .form-group {
    margin-bottom: 20px;
    flex: 1;
}

.quote-form .form-group label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: block;
    color: var(--dark);
}

.quote-form input,
.quote-form select,
.quote-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #fcfcfc;
    color: var(--dark);
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
    border-color: var(--lime);
    background: var(--white);
    outline: none;
    box-shadow: 0 0 0 4px rgba(236, 94, 42, 0.1);
}

.quote-form .btn-submit {
    width: 100%;
    padding: 18px;
    font-size: 1.1rem;
    margin-top: 10px;
    justify-content: center;
}

/* Responsive Split */
/* Responsive Split - Mobile (Form First) */
@media (max-width: 992px) {
    .split-page-layout {
        flex-direction: column-reverse;
        /* Form appears first (on top) */
        padding-top: 0;
        /* Removing parent padding to eliminate white strip */
    }

    .top-bar {
        display: none;
        /* Hide top bar on mobile to save space */
    }

    .split-right {
        /* Form Section (Now Top) */
        padding: 120px 20px 40px;
        /* Add padding-top here to account for fixed navbar */
        background: #f8fafc;
        /* Ensure clean background */
    }

    .split-left {
        /* Visual/Text Section (Now Bottom) */
        padding: 60px 20px;
        min-height: auto;
        text-align: center;
    }

    .split-content h1 {
        font-size: 2.2rem;
    }

    .benefit-item {
        justify-content: center;
        /* Center on mobile */
        text-align: left;
    }

    .quote-form-card {
        padding: 30px 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        margin-top: 0;
    }

    .quote-form .form-row {
        flex-direction: column;
        gap: 0;
    }
}

/* =========================================
   Energy Saving Tips Section
   ========================================= */
.energy-tips-section {
    padding: 100px 5%;
    background-color: #f8fafc;
    /* Very light slate/gray */
    position: relative;
    overflow: hidden;
}

.energy-tips-section .header-center {
    margin-bottom: 70px;
}

.tips-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

@media (max-width: 968px) {
    .tips-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}

.tips-column {
    background: white;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tips-column:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.tips-col-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 2px solid #f1f5f9;
}

.tips-col-header .icon-box {
    width: 60px;
    height: 60px;
    background: #fff0eb;
    /* Light orange tint */
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ec5e2a;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.tips-col-header h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: #1e293b;
}

.tips-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tip-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.tip-icon {
    margin-top: 3px;
    color: #ec5e2a;
    font-size: 1.1rem;
    flex-shrink: 0;
    background: rgba(236, 94, 42, 0.1);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tip-item p {
    font-size: 1rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

.tip-item strong {
    color: #334155;
    font-weight: 600;
}

/* Legal Pages Styles */
.legal-section {
    padding: 80px 20px;
    background-color: #f9f9f9;
}

.legal-container {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 60px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.legal-content h2,
.legal-content h3 {
    margin-top: 30px;
    margin-bottom: 20px;
    color: var(--dark);
    font-weight: 700;
}

.legal-content h2 {
    font-size: 2rem;
    border-bottom: 2px solid var(--lime);
    padding-bottom: 10px;
    display: inline-block;
}

.legal-content p {
    margin-bottom: 20px;
    color: #555;
    line-height: 1.8;
    font-size: 1.05rem;
}

.legal-content ul {
    margin-bottom: 20px;
    padding-left: 20px;
    list-style-type: disc;
}

.legal-content li {
    margin-bottom: 10px;
    color: #555;
    line-height: 1.6;
}

.legal-content a {
    color: var(--lime);
    font-weight: 600;
    text-decoration: underline;
}

.legal-content a:hover {
    color: var(--lime-hover);
    text-decoration: none;
}

/* Popup Modal Styles */
/* Popup Modal Styles */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: none;
    /* Hidden by default */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.popup-overlay.show {
    display: flex;
    opacity: 1;
}

.popup-content {
    background: var(--white);
    width: 90%;
    max-width: 850px;
    border-radius: 12px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    display: flex;
    overflow: hidden;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.popup-overlay.show .popup-content {
    transform: scale(1);
}

.popup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: #ccc;
    cursor: pointer;
    z-index: 20;
    transition: var(--transition);
}

.popup-close:hover {
    color: var(--dark);
    transform: rotate(90deg);
}

/* Left Side - Brand Blue */
.popup-left-new {
    flex: 1;
    background-color: var(--brand-blue);
    /* Site Brand Blue */
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    position: relative;
}

/* Vertical separator line */
.popup-left-new::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 80%;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
    display: none;
    /* Removed as per image cleanliness */
}

.popup-left-new h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 40px;
}

.popup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    width: 100%;
}

.popup-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.popup-grid-item .icon-wrapper {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin-bottom: 5px;
}

/* Specific tweaks for icons to match line art look */
.popup-grid-item .icon-wrapper i {
    stroke-width: 2px;
}

.popup-grid-item h3 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Right Side - Form */
.popup-right-new {
    flex: 1.2;
    padding: 40px 50px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.popup-right-new h2 {
    color: var(--lime);
    /* Brand Orange */
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
}

.popup-form-new {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group-new input {
    width: 100%;
    padding: 12px 20px;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 50px;
    /* Pill shape */
    font-size: 0.95rem;
    color: #666;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.form-group-new input:focus {
    border-color: var(--lime);
    box-shadow: 0 4px 12px rgba(236, 94, 42, 0.1);
}

.form-group-new input::placeholder {
    color: #aaa;
}

.checkbox-group-new {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.85rem;
    color: #666;
    margin: 5px 0 15px 10px;
}

.checkbox-group-new input {
    margin-top: 3px;
    accent-color: var(--lime);
}

.btn-submit-popup {
    background: var(--lime);
    /* Brand Orange */
    color: var(--white);
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    padding: 15px;
    border-radius: 50px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(236, 94, 42, 0.4);
}

.btn-submit-popup:hover {
    background: var(--lime-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(236, 94, 42, 0.5);
}

/* Responsive Popup */
@media (max-width: 900px) {
    .popup-content {
        flex-direction: column;
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
    }

    .popup-left-new {
        padding: 30px;
    }

    .popup-right-new {
        padding: 30px;
    }

    .popup-right-new h2,
    .popup-left-new h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    .popup-grid-item .icon-wrapper {
        font-size: 2rem;
        width: 40px;
        height: 40px;
    }
}

/* Zappi / Car Charger Page Fixes */
.bg-dark-section {
    background-color: #1a1a1a;
    color: var(--white);
    position: relative;
}

.check-list li {
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title.text-white {
    color: var(--white) !important;
}

/* Feature Cards for Charger Modes */
.feature-card.premium {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.feature-card.premium:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(236, 94, 42, 0.15);
    border-color: rgba(236, 94, 42, 0.3);
}

.feature-card.premium h3 {
    margin: 15px 0;
    font-size: 1.3rem;
    color: var(--dark);
}

.feature-card.premium p {
    font-size: 0.95rem;
}

/* Ensure table text is visible inside dark section (where table bg is white) */
.specs-table td {
    color: #333;
}

/* Components Section (Products We Offer) */
.components-section {
    padding: 80px 5%;
    background-color: #F4F4F4;
}

.components-container {
    display: flex;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    flex: 1;
}

.brand-item {
    background: #FFFFFF;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.brand-item:hover,
.brand-item.active {
    border-color: #ec5e2a;
    box-shadow: 0 8px 25px rgba(236, 94, 42, 0.15);
    transform: translateY(-3px);
}

.brand-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.brand-item:hover img,
.brand-item.active img {
    filter: grayscale(0%);
    opacity: 1;
}

.product-highlight-slider {
    flex: 1;
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.highlight-shape-bg {
    position: absolute;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(236, 94, 42, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.highlight-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.highlight-content .product-img {
    max-width: 100%;
    max-height: 350px;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
    animation: fadeScale 0.4s ease-out;
}

@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 968px) {
    .components-container {
        flex-direction: column-reverse;
    }

    .product-highlight-slider {
        height: 300px;
        width: 100%;
    }
}

@media (max-width: 500px) {
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================
   Solar Comparison Section (New)
   ========================================= */
.solar-comparison-section {
    padding: 80px 5%;
    background: #fdfdfd;
}

.comp-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Why Solar Box */
.why-solar-box {
    background: var(--white);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.ws-header {
    text-align: center;
    margin-bottom: 40px;
}

.ws-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.ws-header .year-badge {
    background: var(--lime);
    color: var(--white);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    vertical-align: middle;
    margin-left: 10px;
    font-weight: 600;
}

.ws-stats-row {
    display: flex;
    justify-content: space-around;
    padding: 30px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.ws-stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ws-stat-icon {
    font-size: 2rem;
    color: var(--lime);
    background: rgba(46, 204, 113, 0.1);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.ws-stat-text h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 2px;
}

.ws-stat-text p {
    font-size: 0.9rem;
    color: var(--gray-text);
    margin: 0;
}

.ws-comparison-body {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

.ws-col {
    flex: 1;
    padding: 30px;
    border-radius: 16px;
    transition: transform 0.3s ease;
}

.ws-col:hover {
    transform: translateY(-5px);
}

.ws-col.with-solar {
    background: rgba(46, 204, 113, 0.05);
    /* Light green tint */
    border: 1px solid rgba(46, 204, 113, 0.1);
}

.ws-col.without-solar {
    background: rgba(231, 76, 60, 0.05);
    /* Light red tint */
    border: 1px solid rgba(231, 76, 60, 0.1);
}

.ws-col-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}

.ws-col-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ws-col.with-solar .ws-col-header {
    color: #27ae60;
}

.ws-col.without-solar .ws-col-header {
    color: #c0392b;
}

.ws-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.ws-item i {
    margin-top: 3px;
    font-size: 1.1rem;
}

.ws-col.with-solar .ws-item i {
    color: #27ae60;
}

.ws-col.without-solar .ws-item i {
    color: #c0392b;
}

.ws-item-content strong {
    display: block;
    color: var(--dark);
    margin-bottom: 4px;
    font-size: 1.05rem;
}

.ws-item-content span {
    font-size: 0.9rem;
    color: var(--gray-text);
    line-height: 1.5;
}

.ws-cta-box {
    text-align: center;
}

.ws-cta-box h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.btn-solar-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--lime);
    color: white;
    padding: 15px 40px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.btn-solar-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(236, 94, 42, 0.3);
    color: white;
}

/* Bill Comparison Animation Section */
.bill-diff-section {
    padding: 60px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
    border-radius: 30px;
    margin-top: 30px;
    border: 1px solid #e1f5fe;
}

.bill-diff-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
}

.bill-text {
    flex: 1;
}

.bill-text h2 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 800;
    color: var(--dark);
}

.bill-text h2 span {
    color: #e74c3c;
    /* Red for Stop Overpaying */
}

.bill-visuals {
    flex: 1.2;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    padding: 20px;
}

.bill-card {
    background: white;
    padding: 25px 30px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    width: 280px;
    /* Fixed width */
    position: relative;
    transition: transform 0.4s ease;
}

.bill-card:hover {
    transform: translateY(-10px);
}

.solar-card {
    transform: scale(1.05);
    z-index: 2;
    border: 2px solid #2ecc71;
    box-shadow: 0 25px 70px rgba(46, 204, 113, 0.15);
}

.no-solar-card {
    transform: scale(0.95);
    opacity: 0.9;
    z-index: 1;
    border: 1px solid #eee;
    margin-top: 40px;
    /* Staggered */
}

.bc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
}

.bc-header-icon {
    font-size: 1.2rem;
}

.solar-card .bc-header-icon {
    color: #2ecc71;
}

.no-solar-card .bc-header-icon {
    color: #e74c3c;
}

.bc-menu span {
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #ccc;
    border-radius: 50%;
    margin-left: 3px;
}

.bc-content {
    text-align: center;
}

.bc-label {
    font-size: 0.8rem;
    color: var(--gray-text);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 5px;
}

.bc-amount {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 5px;
}

.solar-card .bc-amount {
    color: #2ecc71;
}

.no-solar-card .bc-amount {
    color: #e74c3c;
}

.bc-note {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 25px;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
}

.solar-card .bc-note {
    background: #e8f8f5;
    color: #2ecc71;
}

.no-solar-card .bc-note {
    background: #fdedec;
    color: #e74c3c;
}

.bc-graph {
    display: flex;
    justify-content: center;
    gap: 15px;
    align-items: flex-end;
    height: 80px;
    padding-top: 10px;
    border-top: 1px solid #f9f9f9;
}

.bc-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    width: 30px;
    justify-content: flex-end;
}

.bc-bar {
    width: 100%;
    border-radius: 4px;
    position: relative;
}

.solar-card .bc-bar {
    background: #2ecc71;
    opacity: 0.8;
}

.no-solar-card .bc-bar {
    background: #e74c3c;
    opacity: 0.8;
}

.bc-month {
    font-size: 0.65rem;
    color: #aaa;
    text-transform: uppercase;
    font-weight: 600;
}

@media (max-width: 992px) {
    .bill-diff-section {
        padding: 30px 10px;
        /* Reduced vertical and minimal horizontal padding */
        border-radius: 12px;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        /* Hard stop for overflow */
        margin-top: 20px;
    }

    .bill-diff-wrapper {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        width: 100%;
        margin: 0;
    }

    .bill-text {
        width: 100%;
        box-sizing: border-box;
        padding: 0 5px;
        /* Tiny buffer */
    }

    .bill-text h2 {
        font-size: 1.6rem;
        /* Ideally small to fit all phones */
        line-height: 1.2;
        margin-bottom: 10px;
        word-wrap: break-word;
        /* Safety */
        overflow-wrap: break-word;
        /* Safety */
    }

    .bill-text p {
        font-size: 0.9rem;
        padding: 0;
        margin-bottom: 20px;
        line-height: 1.5;
    }

    .bill-visuals {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 15px;
        /* Tighter gap */
        margin: 0;
        padding: 10px 0;
        /* Space for shadows */
    }

    .bill-card {
        width: 100%;
        max-width: 100%;
        /* Allow full width of parent (container padding handles edges) */
        padding: 20px 15px;
        margin: 0;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        /* Lighter shadow */
        box-sizing: border-box;
        border-radius: 16px;
    }

    .bill-card .bc-amount {
        font-size: 1.8rem;
        /* Scaled down from 2.2rem */
    }

    .solar-card {
        order: 1;
        transform: none !important;
        /* Force reset */
        z-index: 2;
        border: 2px solid #2ecc71;
    }

    .no-solar-card {
        order: 2;
        transform: none !important;
        /* Force reset */
        margin-top: 0;
        border: 1px solid #eee;
    }

    /* Comparison Table Responsive */
    .ws-comparison-body,
    .ws-stats-row {
        flex-direction: column;
        gap: 15px;
    }

    .ws-header h2 {
        font-size: 1.6rem;
    }
}

/* Commercial PV Layout Fix */
.commercial-content-row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.commercial-text-col {
    flex: 1;
    min-width: 320px;
}

.commercial-image-col {
    flex: 0 0 400px;
    max-width: 100%;
}

/* New Case Studies Premium Styles */
.section-header-center {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.badge-pill {
    display: inline-block;
    background: rgba(236, 94, 42, 0.1);
    color: var(--lime);
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.section-header-center h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.case-studies-grid-section {
    padding: 80px 5%;
    background: #fdfdfd;
}

.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.cs-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

.cs-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.cs-card-img {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.cs-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.cs-card:hover .cs-card-img img {
    transform: scale(1.1);
}

.cs-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--dark);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.thermo-badge {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
}

.cs-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, transparent 50%);
    opacity: 0.6;
}

.cs-year {
    position: absolute;
    bottom: 15px;
    right: 15px;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    opacity: 0.9;
}

.cs-card-content {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cs-head {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.cs-head h3 {
    font-size: 1.4rem;
    margin-bottom: 5px;
    color: var(--dark);
}

.cs-head .location {
    color: #777;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cs-specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.spec-box {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.spec-box i {
    color: var(--lime);
    font-size: 1rem;
    margin-bottom: 2px;
}

.spec-box span {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--dark);
    line-height: 1.2;
}

.spec-box small {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
}

.cs-result-box {
    background: linear-gradient(135deg, #ec5e2a 0%, #ff7e5f 100%);
    border-radius: 12px;
    padding: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(236, 94, 42, 0.2);
}

.thermo-result {
    background: linear-gradient(135deg, #3498db 0%, #5dade2 100%);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2);
}

.result-icon {
    background: rgba(255, 255, 255, 0.2);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2rem;
}

.result-text {
    display: flex;
    flex-direction: column;
}

.result-text .label {
    font-size: 0.75rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.result-text .value {
    font-size: 1.2rem;
    font-weight: 700;
}

.cs-quote {
    margin-top: auto;
    font-style: italic;
    color: #555;
    position: relative;
    padding-left: 15px;
    border-left: 3px solid var(--lime);
    font-size: 0.95rem;
}

/* More Studies List */
.more-studies-section {
    margin-top: 50px;
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.03);
}

.more-studies-section h3 {
    margin-bottom: 30px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dark);
}

.more-studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.ms-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #fcfcfc;
    border-radius: 12px;
    border: 1px solid #edf2f7;
    transition: all 0.3s ease;
}

.ms-item:hover {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transform: translateX(5px);
    border-color: var(--lime);
}

.ms-icon {
    width: 40px;
    height: 40px;
    background: rgba(236, 94, 42, 0.1);
    color: var(--lime);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ms-icon.thermo-icon {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
}

.ms-info h4 {
    font-size: 1rem;
    margin-bottom: 2px;
}

.ms-info span {
    font-size: 0.8rem;
    color: #888;
}

/* PDF Download Section */
.cs-pdf-download-area {
    margin-top: 60px;
}

.pdf-download-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.pdf-download-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: url('../images/lvp_logo.png') no-repeat center right;
    background-size: contain;
    opacity: 0.05;
    pointer-events: none;
}

.pdf-content-left {
    display: flex;
    align-items: center;
    gap: 25px;
}

.pdf-icon-circle {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--lime);
    flex-shrink: 0;
}

.pdf-text h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: #fff;
}

.pdf-text p {
    color: #ccc;
    font-size: 1rem;
    max-width: 500px;
}

.btn-pdf {
    background: var(--lime) !important;
    border: none;
    font-size: 1.1rem;
    padding: 16px 36px;
    color: #fff !important;
}

.btn-pdf:hover {
    background: var(--lime-hover) !important;
    transform: translateY(-3px);
}

@media (max-width: 900px) {
    .pdf-download-card {
        flex-direction: column;
        text-align: center;
    }

    .pdf-content-left {
        flex-direction: column;
    }

    .cs-card-img {
        height: 200px;
    }
}

/* Updated Case Study Card Layout */
.cs-card-img {
    position: relative;
    height: 350px;
    /* Increased height for vertical PDF thumbs */
    overflow: hidden;
    background: #f4f4f4;
}

.cs-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    /* Focus on the top of the document */
    transition: transform 0.6s ease;
}

.cs-desc {
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    flex-grow: 1;
}

.cs-specs-mini {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 12px 0;
    margin-bottom: 20px;
    font-size: 0.85rem;
    color: #444;
    font-weight: 500;
}

.cs-specs-mini span i {
    color: var(--lime);
    margin-right: 5px;
}

.cs-actions {
    margin-top: auto;
}

.btn-card-pdf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 2px solid var(--lime);
    color: var(--lime) !important;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    background: transparent;
}

.btn-card-pdf:hover {
    background: var(--lime);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(236, 94, 42, 0.2);
}

/* Premium Text-Only CTA Section */
.premium-text-cta {
    margin-top: 100px;
    background: linear-gradient(135deg, #ec5e2a 0%, #c54113 100%);
    border-radius: 24px;
    padding: 80px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 25px 50px -12px rgba(236, 94, 42, 0.4);
}

.premium-text-cta::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.premium-text-cta::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -50px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.cta-content-inner {
    position: relative;
    z-index: 2;
    max-width: 750px;
    margin: 0 auto;
}

.premium-text-cta h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 25px;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.premium-text-cta p {
    font-size: 1.2rem;
    opacity: 0.95;
    margin-bottom: 40px;
    line-height: 1.6;
    font-weight: 300;
}

.cta-btn-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-white-solid {
    background: #fff;
    color: #ec5e2a;
    padding: 18px 45px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.btn-white-solid:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.btn-white-outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.btn-white-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    transform: translateY(-4px);
}

@media (max-width: 768px) {
    .premium-text-cta {
        padding: 50px 20px;
        border-radius: 16px;
    }

    .premium-text-cta h2 {
        font-size: 2rem;
    }

    .cta-btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-white-solid,
    .btn-white-outline {
        width: 100%;
        justify-content: center;
    }
}