/*=========================================================
    OUR IMPACT SECTION
=========================================================*/

.counter-section{
    position:relative;
    padding:90px 0 220px;
    background:transparent;
}

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

/*=========================================================
    IMPACT WRAPPER
=========================================================*/

.impact-wrapper{

    position:relative;
    overflow:hidden;

    padding:90px 60px 80px;

    border-radius:40px;

    background:
        radial-gradient(circle at top left,
        rgba(47,109,246,.08),
        transparent 45%),

        radial-gradient(circle at bottom right,
        rgba(255,193,7,.06),
        transparent 45%),

        linear-gradient(
            180deg,
            #f8fbff 0%,
            #eef5ff 55%,
            #e7f0ff 100%
        );

    border:1px solid rgba(47,109,246,.08);

    box-shadow:
        0 25px 70px rgba(17,62,120,.08);

}

/* Decorative Shapes */

.impact-wrapper::before{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    top:-140px;
    left:-140px;

    border-radius:50%;

    background:rgba(47,109,246,.08);

    filter:blur(35px);

}

.impact-wrapper::after{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    bottom:-120px;
    right:-120px;

    border-radius:50%;

    background:rgba(255,193,7,.10);

    filter:blur(35px);

}

.counter-heading,
.counter-grid{

    position:relative;
    z-index:2;

}

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

.counter-heading{

    text-align:center;
    max-width:760px;
    margin:0 auto 80px;

}

.counter-heading span{

    display:inline-block;

    padding:8px 22px;

    border-radius:50px;

    background:#e9f4ff;

    color:#2f6df6;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;

    text-transform:uppercase;

}

.counter-heading h2{

    margin:0;

    font-size:44px;

    font-weight:800;

    color:#12355b;

    line-height:1.2;

}

/*=========================================================
    GRID
=========================================================*/

.counter-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:40px;

}

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

.counter-card{

    display:flex;

    align-items:center;

    gap:18px;

    padding:15px 20px;

    border-right:1px solid rgba(0,0,0,.08);

    transition:.35s ease;

}

.counter-card:last-child{

    border-right:none;

}

.counter-card:hover{

    transform:translateY(-6px);

}

/*=========================================================
    ICON
=========================================================*/

.counter-icon{

    width:65px;
    height:65px;

    border-radius:50%;

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

    flex-shrink:0;

    font-size:26px;

}

/*=========================================================
    ICON COLORS
=========================================================*/

.counter-card:nth-child(1) .counter-icon{

    background:#e8f1ff;
    color:#2f6df6;

}

.counter-card:nth-child(2) .counter-icon{

    background:#fff5df;
    color:#f4a300;

}

.counter-card:nth-child(3) .counter-icon{

    background:#f5eaff;
    color:#8e44ad;

}

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

.counter{

    margin:0 0 8px;

    font-size:40px;

    font-weight:800;

    line-height:1;

}

.counter-card:nth-child(1) .counter{

    color:#2f6df6;

}

.counter-card:nth-child(2) .counter{

    color:#f4a300;

}

.counter-card:nth-child(3) .counter{

    color:#8e44ad;

}

/*=========================================================
    CONTENT
=========================================================*/

.counter-content h4{

    margin:0 0 6px;

    font-size:20px;

    font-weight:700;

    color:#12355b;

    line-height:1.3;

}

.counter-content p{

    margin:0;

    font-size:15px;

    color:#6b7280;

    line-height:1.6;

}

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

@media (max-width:991px){

    .impact-wrapper{

        padding:70px 40px;

    }

    .counter-grid{

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

        gap:30px;

    }

    .counter-card{

        border-right:none;

    }

    .counter-heading h2{

        font-size:36px;

    }

}

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

@media (max-width:768px){

    .counter-section{

        padding:70px 0 180px;

    }

    .impact-wrapper{

        padding:50px 25px;

        border-radius:25px;

    }

    .counter-grid{

        grid-template-columns:1fr;

        gap:10px;

    }

    .counter-card{

        justify-content:flex-start;

        padding:20px 0;

        border-right:none;

        border-bottom:1px solid rgba(0,0,0,.08);

    }

    .counter-card:last-child{

        border-bottom:none;

    }

    .counter-heading{

        margin-bottom:50px;

    }

    .counter-heading h2{

        font-size:32px;

    }

}