.mt-73 {
        margin-top: 73px !important;
    }

    @media only screen and (min-width: 1200px) and (max-width: 1399px),
    only screen and (min-width: 992px) and (max-width: 1199px) {
        .fz-200 {
            font-size: 74px;
        }
    }

    /* .service-banner {
        position: relative;
        height: 92vh;
        min-height: 700px;
        overflow: hidden;
        background: url("<?= base_url(); ?>public/frontend/assets/home/service-page-bg.jpeg") center center/cover no-repeat;
    } */
 

    .service-banner .overlay {
        position: absolute;
        inset: 0;

        background:
            linear-gradient(90deg,
                rgba(8, 8, 8, .82) 0%,
                rgba(15, 15, 15, .60) 35%,
                rgba(15, 15, 15, .20) 60%,
                rgba(15, 15, 15, .15) 100%);
    }

    .service-banner .container {
        position: relative;
        z-index: 2;
    }

    .hero-tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;

        color: #fff;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;

        margin-bottom: 35px;
    }

    .hero-tag svg {
        fill: none;
        stroke: #fff;
    }

    .hero-title {

        font-size: 110px;
        font-weight: 700;
        line-height: .95;

        color: #fff;

        margin-bottom: 35px;

        letter-spacing: -4px;

        overflow-wrap: break-word;
        word-break: break-word;

    }

    .hero-text {

        max-width: 520px;

        color: #e8e8e8;

        font-size: 28px;

        line-height: 1.5;

        font-weight: 300;
    }

    .service-banner::after {

        content: "";

        position: absolute;

        left: 0;

        bottom: 0;

        width: 100%;

        height: 180px;

        background: linear-gradient(180deg,
                rgba(0, 0, 0, 0),
                rgba(0, 0, 0, .55));

    }

    /*==========================
    RESPONSIVE — additive only.
    Everything above (desktop / base) and the three original
    breakpoints below (1400 / 992 / 576) are unchanged. New
    tiers for very small phones and short landscape screens
    are appended after them.
    ==========================*/

    @media(max-width:1400px) {

        .hero-title {

            font-size: 95px;

        }

        .hero-text {

            font-size: 23px;

        }

    }

    @media(max-width:992px) {

        .service-banner {

            height: auto;
            min-height: 700px;
            padding: 140px 0 100px;

        }

        .hero-title {

            font-size: 70px;

        }

        .hero-text {

            font-size: 18px;

        }

    }

    @media(max-width:576px) {

        .service-banner {

            height: auto;
            min-height: 0;
            padding: 130px 0 90px;

        }

        .hero-title {

            font-size: 52px;

            letter-spacing: -2px;

        }

        .hero-tag {

            font-size: 12px;

        }

        .hero-text {

            font-size: 16px;

            max-width: 100%;
            padding-right: 90px;

        }

    }

    /* Very small phones — new tier so the hero doesn't stay
       oversized/cramped below ~400px */
    @media(max-width:400px) {

        .service-banner {

            height: auto;
            min-height: 0;
            padding: 120px 0 80px;

        }

        .hero-tag {

            font-size: 11px;
            letter-spacing: 1.5px;
            gap: 6px;
            margin-bottom: 22px;

        }

        .hero-title {

            font-size: 40px;

            letter-spacing: -1px;

            margin-bottom: 20px;

        }

        .hero-text {

            font-size: 14px;

            line-height: 1.6;

            padding-right: 80px;

        }

    }

    /* Short / landscape phones — keep the hero from eating the
       whole viewport height when width > height on a phone */
    @media(max-height:500px) and (orientation:landscape) {

        .service-banner {

            height: auto;
            min-height: 420px;
            padding: 60px 0;

        }

        .hero-title {

            font-size: 48px;

            margin-bottom: 16px;

        }

        .hero-tag {

            margin-bottom: 16px;

        }

        .hero-text {

            font-size: 15px;

        }

    }

    /* ---------------------------------------------------------
       SERVICE CARDS (below the banner) — fix content/image
       collision on mobile. Types 2/3/4 stack a separately
       absolute-positioned <img> and content block inside the
       card; on desktop the card's fixed height keeps them
       apart, but on mobile the content is often taller than
       that height, so the image (pinned to the bottom) slides
       up and covers the text. Below this width we drop the
       absolute layering and let image + content stack normally
       in document flow instead. Card-1 (the full-bleed photo
       background type) doesn't have this problem — it's a
       single background-image with one overlay block — so it's
       left untouched and just gets a guaranteed min-height.
    --------------------------------------------------------- */

    @media(max-width:767.98px) {

        .sec-2-services .at-service-card:not(.bg-cover) {

            position: relative;
            height: auto;
            min-height: 0;
            display: block;

        }

        .sec-2-services .at-service-card:not(.bg-cover) > a[class*="p-absolute"] {

            position: static !important;
            top: auto !important;
            bottom: auto !important;
            left: auto !important;
            right: auto !important;
            transform: none !important;
            margin: 0 !important;
            display: block;

        }

        .sec-2-services .at-service-card:not(.bg-cover) img.img-cover {

            width: 100%;
            height: 220px;
            object-fit: cover;
            display: block;

        }

        .sec-2-services .at-service-card:not(.bg-cover) .at-service-card-content {

            position: static !important;
            top: auto !important;
            bottom: auto !important;
            left: auto !important;
            right: auto !important;
            transform: none !important;
            margin: 0 !important;
            padding: 22px 20px;

        }

        .sec-2-services .at-service-card:not(.bg-cover) .at-service-card-content.text-white {

            background: #121212;

        }

        .sec-2-services .at-service-card.bg-cover {

            min-height: 280px;

        }

    }