/* ===================================
   Comprehensive Scrollbar Fix for HAD Website
   Desktop Analysis Results - Targeted Container Fixes
   =================================== */

/* 
   DESKTOP ANALYSIS FINDINGS:
   1. Homepage (body5) - ✅ WORKING CORRECTLY 
   2. About/Contact pages (body1) - ❌ CONTAINER OVERFLOW ISSUES
   
   PROBLEMATIC ELEMENTS IDENTIFIED:
   - .container.header1-bg (height: 171px, needs: 628px)
   - .container in hero sections (height: 340px, needs: 377px) 
   - .container in content sections (constrained heights causing overflow)
*/

/* CRITICAL FIX: Remove forced overflow from problem containers */
.container.header1-bg,
.hero1-single-slider .container,
.contact-page-sec .container,
.inner-hero .container {
    overflow: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* MOBILE MENU FIX: Remove scrollbars from offcanvas overlay */
.vl-offcanvas {
    overflow: hidden !important;
}

/* BODY CLASS CONSISTENCY: Extend homepage fix to other pages */
@media screen and (min-width: 769px) {
    body.body1,
    body.body2 {
        overflow-x: initial !important;
    }
}

@media screen and (max-width: 768px) {
    body.body1,
    body.body2,
    body.body5 {
        overflow-x: hidden !important;
    }
}

/* HEADER SECTION FIXES: Remove height constraints from headers */
.vl-header-area1,
.vl-header-area5 {
    overflow: visible !important;
}

.vl-header-area1 .container {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
}

/* HERO SECTION FIXES: Allow natural height */
.inner-hero,
.hero5 {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* GENERAL CONTAINER FIXES: Prevent Bootstrap containers from creating scrollbars */
.container[style*="height"],
.container[style*="max-height"] {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* CONTENT SECTION FIXES: Remove overflow from content containers */
.contact-page-sec,
.about-page-sec,
.service-page-sec {
    overflow: visible !important;
}

.contact-page-sec .container,
.about-page-sec .container,
.service-page-sec .container {
    overflow: visible !important;
    height: auto !important;
}