/* ===============================
   GLOBAL RESPONSIVE FIXES
================================ */
img {
    max-width: 100%;
    height: auto;
}

.section .custom-text-background {
    white-space: normal !important;
    line-height: 1.1;
}

/* Remove the forced HUGE font sizes applied inline */
h1,
h2,
h3,
p,
a,
strong {
    font-size: inherit !important;
}

/* ===============================
   HERO SECTION FIXES
================================ */
@media (max-width: 991px) {
    .custom-text-background {
        font-size: 36px !important;
        text-align: center !important;
        float: none !important;
    }

    .section.section-height-3 {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    img.appear-animation.d-none.d-md-block {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .custom-text-background {
        font-size: 28px !important;
    }
}

/* ===============================
   SERVICES / BLOG / TEAM
================================ */
@media (max-width: 768px) {

    .service-card,
    .col-md-6,
    .col-lg-4 {
        width: 100% !important;
        margin-bottom: 25px;
    }
}

.section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

@media(max-width:768px) {
    .section {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }
}

/* ===============================
   TEAM / BLOG / CONTACT
================================ */
@media(max-width:768px) {

    .contact-form-wrapper,
    .blog-item,
    .team-member {
        margin-bottom: 30px !important;
    }

    h2,
    .section-title,
    .elementor-heading-title {
        font-size: 28px !important;
        text-align: center;
    }

    .shape-divider {
        height: 120px !important;
    }
}

/* Footer icons spacing */
.footer-contact li,
.footer-contact a {
    display: flex;
    align-items: center;
}

/* Buttons full width on mobile */
@media(max-width:768px) {

    .btn,
    .button {
        width: 100%;
        text-align: center;
    }
}

/* ===============================
   HERO SECTION – WASTE WATER PAGE
   (Fix huge title on mobile)
================================= */
@media (max-width: 991px) {
    img.appear-animation.d-none.d-md-block {
        display: block !important;
    }
}

/*
This is the hero <section> you pasted:
<section class="section section-height-3 section-with-shape-divider position-relative border-0 m-0" ...>
*/
@media (max-width: 991.98px) {

    /* Shrink base font-size for the whole hero.
       Because the H1 uses 7.75em, lowering this
       makes the text smaller without touching inline styles. */
    .section.section-height-3.section-with-shape-divider.position-relative.border-0.m-0 {
        font-size: 7px;
        /* tablet size (7 * 7.75 ≈ 54px) */
    }

    /* Allow wrapping & center the heading */
    .section.section-height-3 .custom-text-background {
        white-space: normal !important;
        text-align: center !important;
        float: none !important;
        display: block;
        background-color: transparent !important;
        font-size: 7.75em !important;
        padding: 9rem 1rem 0;
        text-shadow: 1px -1px 6px #ffffff;
        line-height: 2rem !important;
        color: #0a76bc !important;
    }

    /* Hide the empty strong/p/a block that has big font-size & adds space */
    .section.section-height-3 .pb-5.pb-xl-0.mb-5>strong,
    .section.section-height-3 .pb-5.pb-xl-0.mb-5>p,
    .section.section-height-3 .pb-5.pb-xl-0.mb-5>a {
        display: none !important;
    }

    /* Optional: hide the top-right hero image on tablet+mobile */
    /* img.img-fluid.position-absolute.top-0.right-0.appear-animation {
        display: none !important;
    } */
}

/* Extra shrink for small phones */
@media (max-width: 575.98px) {
    .section.section-height-3.section-with-shape-divider.position-relative.border-0.m-0 {
        font-size: 4px;
        /* 4 * 7.75 ≈ 31px – nice mobile size */
    }
}

/* ===== (optional) GENERAL TWEAKS FOR THIS HERO ===== */

@media (max-width: 991.98px) {
    .section.section-height-3 {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .section.section-height-3 .container.pb-5.pb-xl-0.mt-md-3.mb-5 {
        padding-bottom: 30px !important;
        margin-bottom: 30px !important;
        background: #ffffff61;
        top: -60px;
    }
}

/* Fix padding for Waste Water Treatment Experts title */
#hero-waste-water-title,
.section.section-height-3 .custom-text-background {
    padding-bottom: 56px !important;
}

/* Resize header logo */
.header-logo img {
    width: 200px !important;
    height: auto !important;
    max-width: none !important;
}

/* Increase form placeholder font size */
.form-style-4 .form-control::placeholder {
    font-size: 16px !important;
    /* Adjust size as needed, default is usually smaller */
}