/**
 * ============================================
 * FULL WIDTH WEBSITE - EDGE TO EDGE
 * HVAC247PRO - Make entire website full screen
 * ============================================
 */

/* ============================================
   REMOVE ALL MAX-WIDTH RESTRICTIONS
   ============================================ */

/* Force body and html to full width */
html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   MAIN CONTAINERS - FULL WIDTH
   ============================================ */

/* Remove max-width from all main containers */
main,
.main-wrapper,
.page-wrapper,
.site-wrapper,
.container,
#root,
#app {
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================
   ALL SECTIONS - FULL WIDTH
   ============================================ */

/* Make all sections span full viewport width */
section,
.section,
.hero,
.hero-section,
.services-section,
.about-section,
.testimonials-section,
.why-choose-section,
.contact-section,
.partners-section,
.cta-section,
.stats-section,
.trust-section,
.blog-section,
.faq-section,
footer,
.footer {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* ============================================
   CONTENT CONTAINERS - CENTERED WITH PADDING
   Keep content readable with max-width inside sections
   ============================================ */

/* Content containers inside sections */
.hero-container,
.services-container,
.about-container,
.testimonials-container,
.why-choose-container,
.contact-container,
.partners-container,
.stats-container,
.section-content,
.container-inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================
   HEADER & NAVBAR - FULL WIDTH
   ============================================ */

/* Top bar full width */
.top-bar,
header .top-bar {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* Navbar full width */
.navbar,
nav,
header nav,
.main-nav {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* Navbar container - centered content */
.navbar-container,
.nav-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    width: 100% !important;
}

/* ============================================
   HERO SECTION - FULL WIDTH BACKGROUND
   ============================================ */

.hero,
.hero-section {
    width: 100vw !important;
    background-size: cover !important;
    background-position: center !important;
}

.hero-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 80px 40px !important;
}

/* ============================================
   FOOTER - FULL WIDTH
   ============================================ */

footer,
.footer,
.site-footer {
    width: 100vw !important;
    max-width: 100vw !important;
}

.footer-container,
.footer-content {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

/* ============================================
   BACKGROUND COLORS - EDGE TO EDGE
   Ensure background colors span full width
   ============================================ */

section[style*="background"],
.section[style*="background"],
div[style*="background-color"],
div[style*="background:"] {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* ============================================
   RESPONSIVE PADDING
   Adjust padding for different screen sizes
   ============================================ */

/* Large Desktop */
@media screen and (min-width: 1920px) {
    .navbar-container,
    .hero-container,
    .services-container,
    .about-container,
    .testimonials-container,
    .why-choose-container,
    .contact-container,
    .partners-container,
    .stats-container,
    .footer-container {
        padding: 0 80px !important;
    }
}

/* Desktop */
@media screen and (min-width: 1400px) and (max-width: 1919px) {
    .navbar-container,
    .hero-container,
    .services-container,
    .about-container,
    .testimonials-container,
    .why-choose-container,
    .contact-container,
    .partners-container,
    .stats-container,
    .footer-container {
        padding: 0 60px !important;
    }
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1399px) {
    .navbar-container,
    .hero-container,
    .services-container,
    .about-container,
    .testimonials-container,
    .why-choose-container,
    .contact-container,
    .partners-container,
    .stats-container,
    .footer-container {
        padding: 0 40px !important;
    }
}

/* Mobile */
@media screen and (max-width: 767px) {
    .navbar-container,
    .hero-container,
    .services-container,
    .about-container,
    .testimonials-container,
    .why-choose-container,
    .contact-container,
    .partners-container,
    .stats-container,
    .footer-container {
        padding: 0 20px !important;
    }
}

/* ============================================
   PREVENT HORIZONTAL SCROLL
   ============================================ */

html {
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
    position: relative !important;
}

/* ============================================
   IMAGES AND MEDIA - RESPONSIVE
   Prevent images from breaking full-width layout
   ============================================ */

img,
video,
iframe {
    max-width: 100% !important;
    height: auto !important;
}

/* ============================================
   SAMSUNG Z-FOLD SPECIFIC - UNFOLDED (OPEN)
   Z-Fold unfolded width: ~904px (884-924px range)
   ============================================ */

@media screen and (min-width: 884px) and (max-width: 924px) {
    /* All sections full width on Z-Fold open */
    section,
    .section,
    .hero,
    .services-section,
    .about-section,
    .testimonials-section,
    .why-choose-section,
    .contact-section,
    .partners-section,
    footer {
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
    }

    /* Content containers - optimized for Z-Fold */
    .navbar-container,
    .hero-container,
    .services-container,
    .about-container,
    .testimonials-container,
    .why-choose-container,
    .contact-container,
    .partners-container,
    .stats-container,
    .footer-container {
        max-width: 100% !important;
        padding: 0 30px !important;
        margin: 0 auto !important;
    }

    /* Services grid - 2 columns on Z-Fold */
    .services-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* Ensure navbar is full width */
    .navbar,
    .top-bar {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 50% !important;
        margin-left: -50vw !important;
    }
}

/* ============================================
   4K SCREENS - ULTRA WIDE
   ============================================ */

@media screen and (min-width: 2560px) {
    .navbar-container,
    .hero-container,
    .services-container,
    .about-container,
    .testimonials-container,
    .why-choose-container,
    .contact-container,
    .partners-container,
    .stats-container,
    .footer-container {
        max-width: 2000px !important;
        padding: 0 120px !important;
    }

    /* Services grid - 4 columns on 4K */
    .services-container {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ============================================
   8K SCREENS - EXTREME WIDE
   ============================================ */

@media screen and (min-width: 3840px) {
    .navbar-container,
    .hero-container,
    .services-container,
    .about-container,
    .testimonials-container,
    .why-choose-container,
    .contact-container,
    .partners-container,
    .stats-container,
    .footer-container {
        max-width: 3000px !important;
        padding: 0 200px !important;
    }

    /* Services grid - 5 columns on 8K */
    .services-container {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* ============================================
   SMALL PHONES - 320px and up
   ============================================ */

@media screen and (max-width: 480px) {
    .navbar-container,
    .hero-container,
    .services-container,
    .about-container,
    .testimonials-container,
    .why-choose-container,
    .contact-container,
    .partners-container,
    .stats-container,
    .footer-container {
        padding: 0 15px !important;
    }

    /* Services grid - 1 column on small phones */
    .services-container {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/* ============================================
   END OF FULL WIDTH WEBSITE FIX
   ============================================ */