@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');

*,
.ebatc2-counter-section *,
.ebatc2-counter-section *::before,
.ebatc2-counter-section *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.ebatc2-counter-section {
    --ebatc2-bg-color: #FFFAF3;
    --ebatc2-overlay: rgba(173, 211, 248, 0.863);
    --ebatc2-title: #2A9658;
    --ebatc2-title-highlight: #06266B;
    --ebatc2-text: #000;
    --ebatc2-underline: #06266B;
    --ebatc2-circle-border: #06266B;
    --ebatc2-circle-bg: rgba(37, 99, 235, .10);
    --ebatc2-number: #06266B;
    --ebatc2-count-title: #06266B;

    --ebatc2-padding-top: 5rem;
    --ebatc2-padding-bottom: 5rem;
}


.ebatc2-counter-section.en {direction: ltr;}
.ebatc2-counter-section {
    font-family: "El Messiri", sans-serif;
    background:
        linear-gradient(var(--ebatc2-bg-color), var(--ebatc2-overlay)),
        url("/imgs/logo.webp") center / contain;
 background-repeat: no-repeat;
            background-attachment: fixed;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 2.6rem;

            width: 100%;
            padding-top: var(--ebatc2-padding-top);
            padding-bottom: var(--ebatc2-padding-bottom);
    }

    .ebatc2-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.2rem;
    }

    .ebatc2-title {
        font-size: clamp(1.7rem, 5vw, 2.8rem);
        font-weight: bold;
        color: var(--ebatc2-title);
    }

    .ebatc2-title-highlight {
        color: var(--ebatc2-title-highlight);
    }

    .ebatc2-underline {
        width: 3rem;
        height: .2rem;
        border-radius: .2rem;
        background-color: var(--ebatc2-underline);
        position: relative;
    }

    .ebatc2-header p {
        color: var(--ebatc2-text);
        font-size: clamp(.9rem, 3vw, 1.05rem);
        max-width: 38rem;
        line-height: 1.8;
    }

    .ebatc2-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        width: 100%;
        max-width: 90rem;
        padding-block: 1.4rem;
        padding-inline: 1rem;
    }

    .ebatc2-main-title {
        color: var(--ebatc2-title);
        font-size: clamp(1.4rem, 4vw, 2.4rem);
        font-weight: 700;
        text-align: center;
    }

    .ebatc2-row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: center;
        gap: 1.8rem;
        width: 100%;
    }

    .ebatc2-counter-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .8rem;
    }

    .ebatc2-count-circle {
        width: clamp(7rem, 16vw, 10rem);
        height: clamp(7rem, 16vw, 10rem);
        border-radius: 1.2rem;
        border: .0625rem solid var(--ebatc2-circle-border);

        background: var(--ebatc2-circle-bg);
        box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .08);

        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .35s cubic-bezier(.4, 0, .2, 1);
    }

    .ebatc2-count-circle:hover {
        transform: translateY(-.3rem);
        box-shadow: 0 .8rem 2rem rgba(37, 99, 235, .15);
    }

    .ebatc2-count-number {
        color: var(--ebatc2-number);
        font-weight: 700;
        font-size: clamp(1.5rem, 4.5vw, 2.6rem);
    }

    .ebatc2-count-title {
        color: var(--ebatc2-count-title);
        font-weight: 600;
        font-size: clamp(.95rem, 1.5vw, 1.15rem);
    }

    /* 3. Breakpoints */
    @media (min-width: 481px) {
        .ebatc2-row {
            gap: 2.2rem;
        }

        .ebatc2-header {
            gap: 1.4rem;
        }
    }

    @media (min-width: 601px) {
        .ebatc2-container {
            padding-block: 1.8rem;
        }
    }

    @media (min-width: 769px) {
        .ebatc2-row {
            gap: 2.6rem;
        }

        .ebatc2-counter-section {
            gap: 3rem;
        }
    }

    @media (min-width: 1025px) {
        .ebatc2-container {
            padding-block: 2.2rem;
        }

        .ebatc2-row {
            gap: 3.2rem;
        }
    }

    @media (min-width: 1281px) {
        .ebatc2-row {
            gap: 3.8rem;
        }
    }

    @media (min-width: 1441px) {
        .ebatc2-container {
            padding-block: 2.8rem;
        }
    }

    @media (min-width: 1921px) {
        .ebatc2-row {
            gap: 4.4rem;
        }

        .ebatc2-container {
            max-width: 100rem;
        }
    }