/* =========================================================
       BASE / DESKTOP STYLES — kept EXACTLY as the original
       fixed-pixel design. Nothing in this unscoped section
       has been changed, so desktop appearance is untouched.
    ========================================================= */

    .why-us-section {
        background-size: cover;
        padding: 90px 0;
        position: relative;
    }

    .why-us-section:before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, .82);
    }

    .why-us-section .container {
        position: relative;
        z-index: 2;
    }

    .top-heading {
        margin-bottom: 50px;
    }

    .top-heading h2 {
        font-size: 48px;
        font-weight: 700;
        line-height: 1.2;
        max-width: 850px;
    }

    .line {
        width: 70px;
        height: 4px;
        display: block;
        margin-top: 20px;
        background: #c79a35;
    }

    .black-card {
        background: #111;
        color: #fff;
        border-radius: 18px;
        padding: 35px;
        position: relative;
        min-height: 650px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    }

    .black-card h3 {
        color: #fff;
        margin-bottom: 25px;
        font-size: 28px;
        font-weight: 700;
    }

    .icon-list,
    .service-list {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .icon-list li,
    .service-list li {
        margin-bottom: 14px;
        position: relative;
        padding-left: 25px;
    }

    /* .icon-list li:before,
    .service-list li:before {
        content: "✓";
        color: #d5a437;
        position: absolute;
        left: 0;
    } */

    .detective-img {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 220px;
    }

    .white-card,
    .right-top-card,
    .small-card {
        background: #fff;
        border-radius: 18px;
        padding: 30px;
        height: 100%;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
    }

    .icon-box {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 2px solid #1e597f;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        font-size: 24px;
    }

    .white-card h4,
    .right-top-card h4 {
        font-weight: 700;
        margin-bottom: 20px;
    }

    .white-card p {
        color: #666;
        line-height: 1.8;
    }

    .white-card hr {
        margin: 25px 0;
    }

    .white-card li,
    .right-top-card li,
    .small-card li {
        margin-bottom: 12px;
    }

    .stats-box {
        margin-top: 40px;
        background: #fff;
        border-radius: 18px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 25px 15px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
    }

    .stat {
        flex: 1;
        text-align: center;
        border-right: 1px solid #eee;
    }

    .stat:last-child {
        border: none;
    }

    .stat h3 {
        color: #1e597f;
        font-size: 34px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .stat p {
        color: #666;
        margin: 0;
    }

    .icon-list li {
        display: flex;
        align-items: center;
        margin-bottom: 18px;
        padding-left: 0;
        font-size: 15px;
    }

    .icon-list li span {
        width: 28px;
        height: 28px;
        background: #1e597f;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        font-size: 13px;
        flex-shrink: 0;
    }

    .service-list li {
        display: flex;
        align-items: center;
        margin-bottom: 14px;
        padding-left: 0;
    }

    .service-list li span {
        width: 24px;
        height: 24px;
        border: 1px solid #1e597f;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1e597f;
        margin-right: 10px;
        font-weight: bold;
        font-size: 14px;
    }

    .process-list {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .process-list li {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        font-size: 14px;
    }

    .process-list li span {
        width: 24px;
        height: 24px;
        background: #1e597f;
        border-radius: 50%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        font-size: 12px;
        font-weight: 700;
    }

    .city-list {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .city-list li {
        margin-bottom: 10px;
        font-size: 14px;
    }

    .city-list i {
        color: #1e597f;
        margin-right: 8px;
    }

    .icon-box {
        width: 58px;
        height: 58px;
        border: 2px solid #1e597f;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: #1e597f;
        margin-bottom: 20px;
        background: #fff9ee;
    }

    /* =========================================================
       RESPONSIVE OVERRIDES — everything below only fires under
       a max-width query, so desktop (992px and up) is completely
       unaffected. This replaces/extends the original single
       991px breakpoint with proper coverage down to small phones.
    ========================================================= */

    /* Tablet landscape / small laptop, ≤991.98px
       (this is the original breakpoint — kept, with two gaps fixed:
       .right-top-card's fixed 326px height, and no h2 line-height
       adjustment for the smaller size) */
    @media (max-width: 991.98px) {

        .top-heading h2 {
            font-size: 34px;
        }

        .black-card {
            min-height: auto;
            margin-bottom: 25px;
        }

        .detective-img {
            width: 150px;
        }

        .right-top-card {
            height: auto !important;
        }

        .stats-box {
            display: block;
        }

        .stat {
            border: none;
            padding: 20px 0;
        }
    }

    /* Tablet portrait / large phone, ≤767.98px:
       the process/city two-up columns get too narrow side by side,
       so stack them full width */
    @media (max-width: 767.98px) {

        .row.mt-3 > .col-6 {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .small-card {
            margin-bottom: 16px;
        }

        .small-card:last-child {
            margin-bottom: 0;
        }
    }

    /* Small phones, ≤575.98px */
    @media (max-width: 575.98px) {

        .why-us-section {
            padding: 45px 0;
        }

        .top-heading {
            margin-bottom: 28px;
        }

        .top-heading h2 {
            font-size: 26px;
            line-height: 1.3;
        }

        .black-card,
        .white-card,
        .right-top-card {
            padding: 20px;
            border-radius: 14px;
        }

        .black-card h3 {
            font-size: 22px;
        }

        .icon-box {
            width: 50px;
            height: 50px;
            font-size: 18px;
            margin-bottom: 16px;
        }

        .stats-box {
            padding: 16px 10px;
            border-radius: 14px;
        }

        .stat h3 {
            font-size: 24px;
        }

        .detective-img {
            display: none;
        }
    }

    /* Very small phones, ≤360px */
    @media (max-width: 360px) {

        .top-heading h2 {
            font-size: 22px;
        }

        .black-card,
        .white-card,
        .right-top-card,
        .small-card {
            padding: 16px;
        }
    }


  /*==========================
SERVICE SECTION — BASE / DESKTOP
(unchanged from the original fixed-pixel design; all
responsiveness is added below inside max-width media queries)
==========================*/

    .service-small-title {

        display: block;
        color: #1e597f;
        font-size: 15px;
        letter-spacing: 3px;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 12px;

    }

    .service-main-title {

        font-size: 52px;
        font-weight: 700;
        color: #111;
        line-height: 1.2;
        margin-bottom: 18px;

    }

    .service-title-line {

        width: 70px;
        height: 4px;
        background: #1e597f;
        margin: auto;
        border-radius: 20px;

    }


    /*==========================
CARD
==========================*/

    .aid-service-card {

        position: relative;

        height: 100%;

        min-height: 420px;

        background: #121212;

        border-radius: 18px;

        overflow: hidden;

        border: 1px solid rgba(255, 255, 255, .08);

        transition: .45s;

    }

    .aid-service-bg {

        position: absolute;

        inset: 0;

        background: url("../images/service-bg.jpg") center center;

        background-size: cover;

        opacity: .06;

        transition: .6s;

    }

    .aid-service-card::after {

        content: "";

        position: absolute;

        inset: 0;

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

    }

    .aid-service-inner {

        position: relative;

        z-index: 5;

        padding: 45px 30px 20px;

        text-align: center;

    }

    .aid-service-icon {

        width: 90px;

        height: 90px;

        margin: auto auto 35px;

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .aid-service-icon img {

        width: 62px;

        max-width: 100%;

        height: auto;

        transition: .4s;

    }

    .aid-service-icon i {

        color: #1e597f;

        font-size: 60px;

    }

    .aid-service-inner h3 {

        color: #fff;

        font-size: 30px;

        line-height: 38px;

        font-weight: 600;

        margin-bottom: 22px;

        word-wrap: break-word;

    }

    .aid-service-inner p {

        color: #d7d7d7;

        font-size: 17px;

        line-height: 31px;

        margin: 0;

    }

    .aid-service-bottom {

        position: absolute;

        bottom: 28px;

        left: 30px;

        right: 30px;

        z-index: 5;

    }

    .aid-service-bottom a {

        display: flex;

        justify-content: space-between;

        align-items: center;

        color: #1e597f;

        text-decoration: none;

        font-size: 15px;

        letter-spacing: 1px;

        font-weight: 700;

    }

    .aid-service-bottom span {

        transition: .35s;

    }

    .aid-service-card:hover {

        transform: translateY(-12px);

        border-color: #1e597f;

        box-shadow: 0 20px 45px rgba(0, 0, 0, .28);

    }

    .aid-service-card:hover .aid-service-bg {

        transform: scale(1.08);

        opacity: .12;

    }

    .aid-service-card:hover .aid-service-icon img {

        transform: scale(1.12);

    }

    .aid-service-card:hover .aid-service-bottom span {

        transform: translate(6px, -6px);

    }

    .aid-service-card:hover h3 {

        color: #1e597f;

    }

    /* subtle top glow */

    .aid-service-card::before {

        content: "";

        position: absolute;

        top: -70px;

        left: -70px;

        width: 180px;

        height: 180px;

        background: radial-gradient(circle,
                rgba(200, 157, 77, .18),
                transparent 70%);

        transition: .5s;

    }

    .aid-service-card:hover::before {

        transform: scale(1.3);

    }


    /*==========================
RESPONSIVE — additive only, base/desktop rules above
are untouched at 1200px and up
==========================*/

    /* Small laptop / large tablet — original breakpoint, kept */
    @media(max-width:1199px) {

        .service-main-title {

            font-size: 42px;

        }

    }

    /* Tablet landscape — original breakpoint, kept */
    @media(max-width:991px) {

        .service-main-title {

            font-size: 36px;

        }

        .aid-service-card {

            min-height: 390px;

        }

    }

    /* Tablet portrait / large phone — original breakpoint, kept,
       plus fixes so the absolutely-positioned "LEARN MORE" link
       can't overlap shorter/longer description text once card
       height stops being fixed */
    @media(max-width:767px) {

        .service-main-title {

            font-size: 30px;

        }

        .aid-service-card {

            min-height: auto;
            height: auto;
            display: flex;
            flex-direction: column;

        }

        .aid-service-inner {

            padding: 35px 24px 15px;

        }

        .aid-service-bottom {

            position: static;
            margin-top: 18px;
            padding: 0 24px 22px;

        }
    }

    /* Small phones — new tier for full responsiveness */
    @media(max-width:575.98px) {

        .service-main-title {

            font-size: 24px;

        }

        .service-small-title {

            font-size: 13px;
            letter-spacing: 2px;

        }

        .aid-service-inner {

            padding: 28px 20px 12px;

        }

        .aid-service-icon {

            width: 70px;
            height: 70px;
            margin-bottom: 22px;

        }

        .aid-service-icon img {

            width: 48px;

        }

        .aid-service-icon i {

            font-size: 44px;

        }

        .aid-service-inner h3 {

            font-size: 22px;
            line-height: 28px;
            margin-bottom: 14px;

        }

        .aid-service-inner p {

            font-size: 15px;
            line-height: 26px;

        }

        .aid-service-bottom {

            padding: 0 20px 18px;

        }

        .aid-service-bottom a {

            font-size: 13px;

        }
    }

    /* Very small phones */
    @media(max-width:360px) {

        .service-main-title {

            font-size: 20px;

        }

        .aid-service-inner {

            padding: 22px 16px 10px;

        }

        .aid-service-icon {

            width: 60px;
            height: 60px;
            margin-bottom: 16px;

        }

        .aid-service-icon img {

            width: 40px;

        }

        .aid-service-icon i {

            font-size: 36px;

        }

        .aid-service-inner h3 {

            font-size: 19px;
            line-height: 25px;

        }
    }