/* Utility for mobile links */
.mobile-only {
    display: none !important;
}

/* Fix for horizontal scroll/white gap */
html,
body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

/* Prevent scrolling when mobile menu is open */
body.no-scroll {
    overflow: hidden !important;
    height: 100vh;
    width: 100%;
    position: fixed;
}

@media (max-width: 968px) {
    .mobile-only {
        display: block !important;
    }

    /* Ensure container fits */
    .hero-content,
    .hero-actions {
        max-width: 100vw;
        overflow-x: hidden;
        /* safety */
    }


    /* Navbar Mobile Styles */
    .navbar {
        justify-content: space-between;
        padding: 15px 5%;
        background: transparent !important;
        /* Completely transparent by default */
        position: sticky;
        top: 0;
        z-index: 1002;
        transition: background-color 0.3s ease;
    }

    /* Add Dark Background on Scroll (needs JS class) */
    .navbar.scrolled {
        background: rgba(10, 10, 10, 0.95) !important;
        backdrop-filter: blur(10px);
    }

    /* Mobile navbar starts with just logo - clean initial state */
    .navbar:not(.scrolled) {
        background: transparent !important;
    }

    .logo {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: transparent !important;
    }

    .logo a {
        background: transparent !important;
    }

    .logo img {
        height: 40px;
        width: auto;
        object-fit: contain;
        background: transparent !important;
    }

    .hamburger {
        display: block !important;
        cursor: pointer;
        z-index: 1002;
        position: relative;
        width: 30px;
        height: 30px;
        padding: 5px;
        background: transparent !important;
        border-radius: 5px;
        transition: all 0.3s ease;
    }

    .hamburger:hover {
        background: transparent !important;
    }

    .hamburger .bar {
        display: block !important;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        transition: all 0.3s ease-in-out;
        background-color: var(--dark) !important;
        border-radius: 2px;
    }

    /* When navbar is scrolled, use white bars */
    .navbar.scrolled .hamburger .bar {
        background-color: var(--white) !important;
    }

    /* When navbar is transparent, use dark bars for visibility */
    .navbar:not(.scrolled) .hamburger .bar {
        background-color: var(--dark) !important;
    }

    /* Mobile Menu Container - White Drawer Design */
    .nav-links {
        position: fixed;
        left: -100%;
        top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        /* Force remove all spacing */
        gap: 0;
        flex-direction: column;
        background-color: #ffffff;
        /* White Panel */
        width: 100%;
        height: 100vh;
        text-align: left;
        /* Align text left for list view */
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        z-index: 1005;
        overflow-y: auto;
        padding-bottom: 50px !important;

        /* Reset Desktop Styles */
        border-radius: 0;
        border: none;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        backdrop-filter: none;
    }

    .nav-links.active {
        left: 0;
    }

    /* Mobile Nav Header (Logo + Close) */
    .mobile-nav-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        /* Reduced padding to close gap */
        border-bottom: 1px solid #f0f0f0;
        background: #ffffff;
        position: sticky;
        top: 0;
        z-index: 10;
        margin: 0 !important;
    }

    .mobile-nav-header .header-content {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }

    /* Page Header Mobile Styles */
    /* Page Header Mobile Styles */
    .page-header .header-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 20px;
        width: 100%;
        max-width: 100%;
        gap: 20px;
        position: relative;
        z-index: 2;
    }

    .page-header {
        height: auto;
        min-height: 500px;
        /* Ensure height on mobile */
        padding-top: 100px;
        padding-bottom: 50px;
        display: flex;
        align-items: center;
    }

    .page-header .header-content h1 {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .page-header .header-content p {
        font-size: 1rem;
        line-height: 1.6;
        max-width: 100%;
        padding: 0 10px;
    }

    .mobile-drawer-logo {
        height: 35px;
        width: auto;
        object-fit: contain;
    }

    .close-menu-btn {
        font-size: 24px;
        color: #666;
        cursor: pointer;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: backround 0.3s;
    }

    .close-menu-btn:hover {
        background: #f5f5f5;
        color: #ec5e2a;
    }

    /* List Items */
    .nav-links li {
        display: block;
        margin: 0;
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    }

    /* Main Links */
    .nav-links li a {
        font-size: 1.1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #1e293b !important;
        /* Dark text */
        width: 100%;
        padding: 18px 25px;
        border-radius: 0;
        font-weight: 500;
        transition: all 0.3s ease;
        background: transparent !important;
    }

    .nav-links li a:hover,
    .nav-links li a.active {
        background: #fcfcfc !important;
        color: #ec5e2a !important;
        padding-left: 30px;
    }

    /* Custom Mobile Extras Styling */
    .custom-mobile-item {
        margin: 0 !important;
        padding: 10px 25px !important;
        border-bottom: none !important;
    }

    .mobile-phone {
        font-size: 1.1rem !important;
        color: #64748b !important;
        font-weight: 600;
        padding: 0 !important;
    }

    /* Mobile Button Group - Layout Only (No Box Highlighting) */
    .mobile-btn-group {
        display: flex;
        flex-direction: column !important;
        /* Stack vertically */
        gap: 12px;
        justify-content: center;
        padding: 10px 0;
        background: transparent;
        /* No background */
        border: none;
        /* No border */
        margin: 5px 0;
        box-shadow: none;
        /* No shadow */
    }

    /* Reset Styles for buttons inside the group to ensure clean stacking */
    .mobile-btn-group a {
        margin: 0 !important;
        width: 100% !important;
        justify-content: center;
    }

    /* Specific Style for Brochure (Secondary) inside Box */
    .mobile-btn-group .btn-glass-dl {
        background: #ffffff !important;
        color: #1e293b !important;
        border: 1px solid #e2e8f0 !important;
        height: 45px;
        font-weight: 600;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    }

    /* Specific Style for Finance (Tertiary/Dark) inside Box - Adjusted to match Brochure as per request */
    .mobile-btn-group .btn-gradient-fin {
        background: #ffffff !important;
        color: #1e293b !important;
        /* Matches Brochure text */
        border: 1px solid #e2e8f0 !important;
        /* Matches Brochure border */
        height: 45px;
        font-weight: 600;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    }

    .mobile-btn-group .top-btn {
        width: 100%;
        justify-content: center;
        margin: 5px 0;
        height: 50px;
        font-size: 1rem;
        border-radius: 8px;
    }

    /* Mobile Quote Button with Pulse */
    .mobile-quote-btn {
        display: flex !important;
        justify-content: center !important;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 15px 20px !important;
        background: #ec5e2a !important;
        /* Brand Orange */
        background: linear-gradient(135deg, #ec5e2a 0%, #d44d1e 100%) !important;
        color: #fff !important;
        border-radius: 50px !important;
        font-weight: 700 !important;
        text-align: center;
        margin-top: 5px;
        box-shadow: 0 4px 15px rgba(236, 94, 42, 0.4);
        border: none !important;
    }

    .mobile-quote-btn i {
        font-size: 1.1rem;
    }

    /* Pulse Animation */
    @keyframes pulse-glow {
        0% {
            box-shadow: 0 0 0 0 rgba(236, 94, 42, 0.7);
            transform: scale(1);
        }

        70% {
            box-shadow: 0 0 0 10px rgba(236, 94, 42, 0);
            transform: scale(1.02);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(236, 94, 42, 0);
            transform: scale(1);
        }
    }

    .pulse-animation {
        animation: pulse-glow 2s infinite;
    }


    /* Mobile Dropdowns */
    .nav-links .dropdown .dropdown-menu {
        position: static !important;
        width: 100% !important;
        background: #f8fafc !important;
        /* Light gray background for nested */
        display: none !important;
        box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.03) !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        max-height: none !important;
        overflow: visible !important;
        height: auto !important;
    }

    .nav-links .dropdown.active .dropdown-menu {
        display: block !important;
    }

    /* Dropdown Link Styles */
    .nav-links .dropdown-menu li a {
        color: #475569 !important;
        /* Softer dark */
        font-size: 1rem !important;
        padding: 14px 25px 14px 40px !important;
        /* Indent */
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    }

    .nav-links .dropdown-menu li a:hover {
        background: #f1f5f9 !important;
        color: #ec5e2a !important;
        padding-left: 45px !important;
    }

    /* Double Nested (Sub-menu) */
    .dropdown-sub-menu {
        position: static !important;
        width: 100% !important;
        display: none !important;
        padding-left: 0 !important;
        background: #f1f5f9 !important;
        /* Slightly darker gray */
        box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.03) !important;
        border: none !important;
        margin: 0 !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        transform: none !important;
    }

    .nav-links .dropdown-sub.active .dropdown-sub-menu {
        display: block !important;
    }

    .nav-links .dropdown-sub-menu li a {
        padding-left: 60px !important;
        /* Deeper indent */
        color: #64748b !important;
    }

    .nav-links .dropdown-sub-menu li a:hover {
        padding-left: 65px !important;
        color: #ec5e2a !important;
    }

    /* Rotate Chevrons */
    .dropdown-icon,
    .dropdown-sub-icon {
        color: #94a3b8;
        font-size: 0.8rem;
    }

    .nav-links .dropdown.active>a .dropdown-icon {
        transform: rotate(180deg);
        color: #ec5e2a;
    }

    .nav-links .dropdown-sub.active>a .dropdown-sub-icon {
        transform: rotate(90deg);
        color: #ec5e2a;
    }

    /* Hide Desktop Hover logic */
    .nav-links .dropdown:hover .dropdown-menu {
        display: none;
    }

    .contact-btn {
        display: none;
    }

    /* Hero Section Mobile */
    .hero,
    .hero-section {
        min-height: 100vh;
        height: auto;
        padding-top: 120px;
        /* Space for navbar */
        padding-bottom: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .hero-content {
        margin-top: 0;
        width: 100%;
        padding: 0 15px;
        text-align: center;
    }

    .text-slider {
        position: relative;
        height: auto;
        min-height: 300px;
        /* Ensure space for tallest slide */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .text-slide {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease;
        transform: none !important;
        /* Disable transform animation on mobile to simplify */
    }

    .text-slide.active {
        position: relative;
        /* Use relative to take up space naturally */
        opacity: 1;
        visibility: visible;
    }

    .hero-title {
        font-size: 2rem;
        /* Reduced to fit better */
        line-height: 1.2;
        margin-bottom: 15px;
        word-break: break-word;
        /* Important for "Thermodynamic" */
    }

    .hero-subtitle {
        font-size: 1rem;
        padding: 0 10px;
        line-height: 1.5;
        margin-bottom: 30px;
    }

    .hero-actions {
        flex-direction: column;
        gap: 15px;
        margin-top: 20px;
    }

    /* Fix for Buttons on Thermodynamic Page */
    .btn-modern-primary,
    .btn-modern-outline {
        display: flex;
        width: 100%;
        max-width: 320px;
        margin: 10px auto;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 15px 20px;
        box-sizing: border-box;
    }

    .stat-badge {
        width: 100%;
        max-width: 320px;
        padding: 12px 20px;
    }

    .hero-trust-bar {
        flex-direction: column;
        gap: 10px;
        margin-top: 30px;
    }

    /* Features Banner */
    .features-banner-wrapper {
        margin-top: 0;
        /* Remove negative margin on mobile */
        padding: 20px 5%;
        background: var(--white);
        /* Ensure background helps visibility */
    }

    .features-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        padding: 20px;
        box-shadow: none;
        /* Simplify shadow on mobile */
        border-bottom: none;
    }

    .feature-item {
        width: 100%;
        justify-content: flex-start;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
    }

    .feature-item:last-child {
        border-bottom: none;
    }

    /* Professional Grid */
    .professional-grid {
        grid-template-columns: 1fr;
    }

    .grid-col {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        padding: 40px 20px;
    }

    .products-header-group {
        text-align: center;
        margin-bottom: 30px;
    }

    .products-header-group h2 {
        font-size: 2.5rem;
    }

    .circle-btn-lime {
        position: static;
        margin: 20px auto;
    }

    /* Offer Grid */
    .offer-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .offer-card.popular {
        transform: none;
    }

    /* Components Section */
    .components-container {
        grid-template-columns: 1fr;
    }

    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Solution Section */
    .smart-solutions-section {
        height: auto;
    }

    .solutions-container {
        grid-template-columns: 1fr;
        height: auto;
    }

    .sol-list-col {
        height: auto;
        overflow: visible;
    }

    .sol-preview-col {
        display: none;
        /* Hide on mobile to save space */
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-links-list,
    .contact-info-list {
        align-items: center;
    }

    .footer-newsletter-form {
        flex-direction: column;
    }

    .footer-newsletter-form button {
        width: 100%;
    }

    /* Footer Bottom */
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
    }

    /* Testimonial Section Mobile */
    .testimonial-card-large {
        flex-direction: column;
        height: auto;
        max-width: 500px;
        margin: 0 auto;
    }

    .t-image {
        width: 100%;
        height: 250px;
    }

    .t-content {
        width: 100%;
        padding: 30px 20px;
    }

    .avatars-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Feature Split Section Padding */
    .features-split-section {
        padding: 60px 5%;
    }

    /* Financing Page Mobile Styles */
    .finance-body {
        padding: 30px 20px !important;
    }

    .finance-intro-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .finance-logo-box {
        max-width: 250px;
        margin: 0 auto;
    }

    .finance-intro-text {
        text-align: center;
    }

    .finance-features-grid {
        grid-template-columns: 1fr !important;
    }

    .finance-check-section {
        padding: 30px 20px !important;
    }

    .finance-check-section .check-list {
        grid-template-columns: 1fr !important;
    }

    .cta-section {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {

    /* Extra Polish for Small Screens */
    .offer-card {
        padding: 25px 20px;
    }

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

    .logo img {
        height: 35px;
    }

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

    .footer-newsletter-form {
        flex-direction: column;
        gap: 10px;
    }

    .footer-newsletter-form button {
        width: 100%;
        margin-left: 0;
    }
}

@media (min-width: 969px) {
    .hamburger {
        display: none;
    }
}

/* Hot Water Page Responsive Fixes */
@media (max-width: 968px) {

    .detail-row,
    .detail-row.reverse {
        flex-direction: column-reverse !important;
        /* Image on top */
        gap: 40px !important;
        align-items: center !important;
        margin-bottom: 40px !important;
    }

    /* Reset min-widths from inline styles to prevent overflow */
    .detail-text,
    .detail-image {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
    }

    .detail-text {
        text-align: center;
        /* Center text on mobile */
    }

    .detail-text .btn-primary {
        width: 100%;
        justify-content: center;
    }

    /* Ensure images scale and decorations don't cause scroll */
    .detail-image {
        padding: 20px;
        /* Give some breathing room for the decorative circle */
    }

    .detail-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 400px;
        /* Don't get too huge on tablets */
        margin: 0 auto;
    }

    /* Auto-fit naturally handles grid, but let's ensure gap */
    .commercial-grid {
        gap: 20px !important;
    }

    /* Adjust decorative circles position for mobile to avoid overflow */
    .detail-image>div:first-child {
        /* Target the absolute decoration div */
        right: -10px !important;
        top: -10px !important;
        width: 100px !important;
        height: 100px !important;
    }

}

/* Commercial PV Mobile Fix */
@media (max-width: 968px) {
    .commercial-content-row {
        gap: 30px !important;
        flex-direction: column !important;
        display: flex !important;
    }

    .commercial-text-col {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 15px !important;
        margin: 0 !important;
    }

    .commercial-image-col {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        padding: 0 15px !important;
        margin: 0 !important;
    }

    .commercial-image-col .image-wrapper {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto 30px auto !important;
        display: block !important;
    }

    .commercial-image-col .image-wrapper img {
        width: 100% !important;
        height: auto !important;
    }
}