/* =========================================================
   WHY PEOPLE CHOOSE CLICK2CLAIMHELP
   PREMIUM IMAGE + CONTENT SECTION
========================================================= */

.why-choose-section {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 700px;

    padding: 85px 20px;

    overflow: hidden;

    background: #ffffff;
}


/* =========================================================
   RIGHT SIDE BACKGROUND IMAGE
========================================================= */

.why-choose-section::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    background-image:
        url("/assets/couple-benefits.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-position:
        right center;
}


/* =========================================================
   WHITE LEFT → IMAGE RIGHT GRADIENT
========================================================= */

.why-choose-section::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(90deg,

            #ffffff 0%,
            #ffffff 23%,

            rgba(255, 255, 255, 0.99) 32%,

            rgba(255, 255, 255, 0.94) 41%,

            rgba(255, 255, 255, 0.78) 50%,

            rgba(255, 255, 255, 0.48) 59%,

            rgba(255, 255, 255, 0.14) 70%,

            rgba(255, 255, 255, 0) 82%);
}


/* =========================================================
   CONTAINER
========================================================= */

.why-choose-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1180px;

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.why-choose-heading {
    max-width: 680px;

    margin: 0 0 38px;

    text-align: left;
}


.why-choose-heading>span {
    display: inline-flex;
    align-items: center;

    position: relative;

    margin-bottom: 14px;
    padding: 7px 12px;

    border-radius: 999px;

    background:
        rgba(239, 246, 255, 0.95);

    border:
        1px solid rgba(191, 219, 254, 0.8);

    color: #1d4ed8;

    font-size: 10.5px;
    font-weight: 800;

    letter-spacing: 0.12em;

    box-shadow:
        0 5px 15px rgba(37, 99, 235, 0.06);
}


/* Small blue dot */

.why-choose-heading>span::before {
    content: "";

    width: 6px;
    height: 6px;

    margin-right: 8px;

    border-radius: 50%;

    background: #2563eb;

    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.08);
}


.why-choose-heading h2 {
    max-width: 650px;

    margin: 0;

    color: #0f172a;

    font-size:
        clamp(32px, 4vw, 48px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -0.045em;
}


.why-choose-heading h2::after {
    content: "";

    display: block;

    width: 42px;
    height: 4px;

    margin-top: 18px;

    border-radius: 999px;

    background:
        linear-gradient(90deg,
            #2563eb,
            #60a5fa);
}


.why-choose-heading p {
    max-width: 560px;

    margin: 18px 0 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   STATS GRID
   COMPACT PROFESSIONAL CARDS
========================================================= */

.stats-grid {
    width: 100%;
    max-width: 590px;

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 10px;

    margin-top: 30px;
}


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

.stat-card {
    position: relative;

    min-height: 100px;

    padding: 17px 14px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: left;

    background:
        rgba(255, 255, 255, 0.91);

    border:
        1px solid rgba(226, 232, 240, 0.92);

    border-radius: 15px;

    box-shadow:
        0 6px 20px rgba(15, 23, 42, 0.055);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    overflow: hidden;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}


/* Top accent */

.stat-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(90deg,
            #2563eb,
            rgba(37, 99, 235, 0.05));
}


.stat-card:nth-child(3)::before,
.stat-card:nth-child(5)::before {
    background:
        linear-gradient(90deg,
            #dc2626,
            rgba(220, 38, 38, 0.05));
}


/* =========================================================
   DESKTOP CARD POSITION
========================================================= */

.stat-card:nth-child(1),
.stat-card:nth-child(2),
.stat-card:nth-child(3) {
    grid-column: span 2;
}


.stat-card:nth-child(4) {
    grid-column: 2 / span 2;
}


.stat-card:nth-child(5) {
    grid-column: 4 / span 2;
}


/* =========================================================
   HOVER
========================================================= */

.stat-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(147, 197, 253, 0.9);

    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.09);
}


/* =========================================================
   NUMBER
========================================================= */

.stat-number {
    margin-bottom: 6px;

    color: #1d4ed8;

    font-size: 35px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -0.045em;
}


.stat-card:nth-child(3) .stat-number,
.stat-card:nth-child(5) .stat-number {
    color: #dc2626;
}


.stat-text {
    letter-spacing: -0.03em;
}


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

.stat-card h3 {
    margin: 0;

    color: #0f172a;

    font-size: 15.5px;

    line-height: 1.35;

    font-weight: 800;
}


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

.stat-card p {
    max-width: 150px;

    margin: 3px 0 0;

    color: #8da4c5;

    font-size: 12px;

    line-height: 1.45;

    font-weight: 500;
}


/* =========================================================
   BOTTOM TRUST POINTS
========================================================= */

.why-choose-bottom {
    width: 100%;
    max-width: 690px;

    margin-top: 20px;

    padding-top: 16px;

    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 9px 18px;

    border-top:
        1px solid rgba(226, 232, 240, 0.85);
}


.bottom-item {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #475569;

    font-size: 11px;

    font-weight: 600;
}


.check-icon {
    width: 16px;
    height: 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: none;

    border-radius: 50%;

    background: #ecfdf5;

    border:
        1px solid #a7f3d0;

    color: #059669;

    font-size: 10px;

    font-weight: 900;
}


/* =========================================================
   IMAGE VISUAL DEPTH
========================================================= */

.why-choose-section {
    box-shadow:
        inset 0 1px 0 rgba(226, 232, 240, 0.6);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .why-choose-section {
        min-height: auto;

        padding: 75px 30px;
    }


    .why-choose-section::before {
        background-position:
            85% center;
    }


    .why-choose-section::after {
        background:
            linear-gradient(90deg,
                #ffffff 0%,
                #ffffff 30%,
                rgba(255, 255, 255, .96) 44%,
                rgba(255, 255, 255, .72) 60%,
                rgba(255, 255, 255, .20) 78%,
                transparent 100%);
    }


    .why-choose-heading {
        max-width: 620px;
    }


    .stats-grid {
        max-width: 650px;
    }
}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 800px) {

    .why-choose-section {
        padding: 65px 24px;
    }


    .why-choose-section::before {
        background-position:
            80% top;
    }


    .why-choose-section::after {
        background:
            linear-gradient(180deg,

                rgba(255, 255, 255, .92) 0%,
                rgba(255, 255, 255, .97) 30%,
                rgba(255, 255, 255, .99) 52%,
                #ffffff 70%);
    }


    .why-choose-heading {
        max-width: 650px;

        margin-bottom: 30px;
    }


    .why-choose-heading h2 {
        font-size: 40px;
    }


    .stats-grid {
        max-width: 650px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .why-choose-section {
        padding:
            55px 16px 50px;
    }


    /* Image becomes soft background */

    .why-choose-section::before {
        background-position:
            72% top;

        background-size:
            auto 65%;
    }


    .why-choose-section::after {
        background:
            linear-gradient(180deg,

                rgba(255, 255, 255, .95) 0%,
                rgba(255, 255, 255, .97) 28%,
                rgba(255, 255, 255, .985) 45%,
                #ffffff 62%);
    }


    .why-choose-heading {
        margin-bottom: 25px;

        text-align: left;
    }


    .why-choose-heading>span {
        margin-bottom: 12px;

        font-size: 13px;
    }


    .why-choose-heading h2 {
        max-width: 100%;

        font-size: 37px;

        letter-spacing: -0.035em;
    }


    .why-choose-heading h2::after {
        width: 34px;
        height: 3px;

        margin-top: 14px;
    }


    .why-choose-heading p {
        margin-top: 15px;

        font-size: 16px;

        line-height: 1.65;
    }


    /* =====================================================
       MOBILE STATS
    ===================================================== */

    .stats-grid {
        width: 100%;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;

        margin-top: 24px;
    }


    .stat-card:nth-child(1),
    .stat-card:nth-child(2),
    .stat-card:nth-child(3),
    .stat-card:nth-child(4) {
        grid-column: auto;
    }


    .stat-card:nth-child(5) {
        grid-column: 1 / -1;
    }


    .stat-card {
        min-height: 112px;

        padding: 13px 12px;

        border-radius: 13px;
    }


    .stat-number {
        margin-bottom: 5px;

        font-size: 30px;
    }


    .stat-card h3 {
        font-size: 14.5px;
    }


    .stat-card p {
        max-width: 135px;

        font-size: 11.8px;
    }


    /* =====================================================
       BOTTOM TRUST
    ===================================================== */

    .why-choose-bottom {
        max-width: 100%;

        margin-top: 18px;

        padding-top: 15px;

        gap: 9px 13px;
    }


    .bottom-item {
        font-size: 12px;
    }


    .check-icon {
        width: 15px;
        height: 15px;

        font-size: 12px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .why-choose-section {
        padding-left: 14px;
        padding-right: 14px;
    }


    .why-choose-heading h2 {
        font-size: 35px;
    }


    .stat-card {
        min-height: 105px;

        padding:
            11px 10px;
    }


    .stat-number {
        font-size: 28px;
    }


    .stat-card h3 {
        font-size: 11.5px;
    }


    .stat-card p {
        font-size: 10px;
    }
}