/* ====================================
   HERO SECTION - CENTER FIX
   Force center alignment on ALL devices
   Last Updated: 2026-06-16 v2.0
   ==================================== */

/* ====================================
   1. HERO CONTAINER - ULTRA FORCE CENTER
   ==================================== */

.hero-container,
div.hero-container,
.hero-slide .hero-container,
.hero-slider-wrapper .hero-slide .hero-container {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* CRITICAL FIX: Perfect horizontal and vertical centering */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    max-width: 1320px !important;
    padding: 0 15px !important;
}

/* Remove any left/right positioning */
.hero-container * {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ====================================
   2. HERO HEADING (H1) - ULTRA CENTER
   ==================================== */

.hero-container h1,
.hero-slide-content h1,
.hero-container2 h1,
.hero-container4 h1,
div.hero-container h1,
.hero-container > h1 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ====================================
   3. HERO PARAGRAPH - ULTRA CENTER
   ==================================== */

.hero-container-para2,
.hero-container .hero-container-para2,
div.hero-container-para2,
p.hero-container-para2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 850px !important;
    width: 100% !important;
    display: block !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.hero-container-para1,
.hero-container .hero-container-para1 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* ====================================
   4. BUTTONS CONTAINER - ULTRA CENTER
   ==================================== */

.hero-container-button-video,
div.hero-container-button-video,
.hero-container .hero-container-button-video,
.hero-slide .hero-container .hero-container-button-video {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    margin: 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    padding: 0 15px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    text-align: center !important;
}

.hero-container-button-video a,
.hero-container-button-video .get-a-quote-btn,
.hero-container-button-video .our-services-btn {
    margin: 0 auto !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ====================================
   5. MOBILE RESPONSIVE - ULTRA CENTER
   ==================================== */

@media (max-width: 768px) {
    .hero-container,
    div.hero-container {
        text-align: center !important;
        padding: 30px 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hero-container h1,
    div.hero-container h1 {
        text-align: center !important;
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin: 0 auto 15px auto !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .hero-container-para2,
    .hero-container .hero-container-para2 {
        text-align: center !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin: 0 auto 20px auto !important;
        padding: 0 15px !important;
        width: 100% !important;
    }

    .hero-container-button-video,
    div.hero-container-button-video {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 15px !important;
        margin: 0 auto !important;
    }

    .hero-container-button-video a,
    .hero-container-button-video .get-a-quote-btn {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        display: flex !important;
    }

    .hero-container-button-video a span {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ====================================
   6. TABLET RESPONSIVE - ULTRA CENTER
   ==================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    .hero-container,
    div.hero-container {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hero-container h1 {
        text-align: center !important;
        font-size: 42px !important;
        line-height: 1.2 !important;
        margin: 0 auto 15px auto !important;
    }

    .hero-container-para2 {
        text-align: center !important;
        font-size: 20px !important;
        margin: 0 auto 20px auto !important;
    }

    .hero-container-button-video {
        justify-content: center !important;
        gap: 15px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }
}

/* ====================================
   7. DESKTOP - ULTRA CENTER (LARGE SCREENS)
   ==================================== */

@media (min-width: 1025px) {
    .hero-container,
    div.hero-container,
    .hero-slide .hero-container {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 15px !important;
        /* DESKTOP SPECIFIC: Perfect centering with translate */
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 1320px !important;
    }

    .hero-container h1 {
        text-align: center !important;
        font-size: 70px !important;
        line-height: 1.2 !important;
        margin: 0 auto 20px auto !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 1200px !important;
    }

    .hero-container-para2 {
        text-align: center !important;
        font-size: 22px !important;
        line-height: 1.4 !important;
        margin: 0 auto 30px auto !important;
        max-width: 850px !important;
    }

    .hero-container-button-video {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
        margin: 0 auto !important;
        flex-wrap: wrap !important;
    }

    .hero-container-button-video a {
        margin: 0 !important;
    }
}

/* ====================================
   8. FORCE CENTER ON ALL HERO VARIANTS
   ==================================== */

.hero-container,
.hero-container2,
.hero-container3,
.hero-container4,
.hero-slide-content {
    text-align: center !important;
}

.hero-container *,
.hero-container2 *,
.hero-container4 * {
    text-align: center !important;
}

/* ====================================
   END OF HERO SECTION CENTER FIX v2.0
   ==================================== */