/*==================================================
WHY US
==================================================*/

.why-us{

    padding:100px 0;

    /*background:#F7F9FC;*/
    background:#FFF;

    position:relative;

    overflow:hidden;

}

.section-badge{

    display:inline-block;

    padding:8px 20px;

    border-radius:50px;

    background:rgba(15,76,129,.1);

    color:var(--primary);

    font-weight:600;

}

.section-title h2{

    font-size:clamp(2rem,4vw,3rem);

    font-weight:800;

    color:#1E293B;

}

.section-title h2 span{

    color:var(--primary);

}

.section-title p{

    max-width:700px;

    margin:auto;

    color:#64748B;

    margin-top:20px;

    line-height:1.8;

}

/*.feature-card {

    background:#fff;

    border-radius:22px;

    padding:35px;

    height:100%;

    position:relative;

    overflow:hidden;

    transition:.35s;

    border:1px solid rgba(15,76,129,.08);

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}*/

.feature-card{

    background:#fff;

    border-radius:24px;

    padding:38px;

    position:relative;

    overflow:hidden;

    height:100%;

    transition:.35s;

    border:1px solid rgba(15,76,129,.08);

    box-shadow:0 10px 35px rgba(0,0,0,.06);

}

/*.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,.12);

}*/

/*.feature-card:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 60px rgba(0,0,0,.12);

}*/

.feature-card:hover{

    transform:translateY(-12px);

    box-shadow:

        0 20px 50px rgba(15,76,129,.12),

        0 8px 20px rgba(0,0,0,.08);

}

/*.feature-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#0F4C81,#15A362);

    transform:scaleX(0);

    transition:.35s;

}*/

/*.feature-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:var(--accent);

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

}*/

/*.feature-card:hover::before{

    transform:scaleX(1);

}*/

.feature-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:var(--accent);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.feature-card:hover::before{

    transform:scaleX(1);

}

.feature-card:hover{

    transform:translateY(-12px);

    box-shadow:

        0 25px 60px rgba(15,76,129,.12),

        0 10px 25px rgba(0,0,0,.08);
}

/*.feature-number{

    position:absolute;

    top:20px;

    right:20px;

    font-size:3rem;

    font-weight:800;

    color:rgba(15,76,129,.06);

    user-select:none;

}*/

.feature-number{

    position:absolute;

    right:22px;

    top:18px;

    font-size:58px;

    font-weight:800;

    color:rgba(0,0,0,.05);

    user-select:none;

}

/*.feature-icon{

    width:72px;

    height:72px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

}*/

/*.feature-icon{

    width:74px;

    height:74px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    transition:.35s;

}*/

.feature-icon{

    width:78px;

    height:78px;

    border-radius:22px;

    background:rgba(255,255,255,.8);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

    transition:.35s;

    border:1px solid rgba(0,0,0,.05);

}

/*.feature-icon i{

    font-size:30px;

    color:var(--accent);

    transition:.35s;

}

.feature-card:hover .feature-icon{

    transform:rotate(-8deg) scale(1.08);

}

.feature-card:hover .feature-icon i{

    transform:scale(1.15) rotate(-8deg);

}*/

.feature-icon i{

    font-size:34px;

    color:var(--accent);

    transition:.35s;

}

.feature-card:hover .feature-icon{

    transform:rotate(-8deg);

}

.feature-card:hover .feature-icon i{

    transform:scale(1.15);

}


/*.feature-card h4{

    font-weight:700;

    margin-bottom:15px;

}*/
.feature-card h4{

    font-weight:700;

    margin-bottom:15px;

    color:#1E293B;

}

/*.feature-card p{

    color:#64748B;

    line-height:1.8;

    margin-bottom:0;

}*/

.feature-card p{

    color:#64748B;

    line-height:1.8;

    margin-bottom:25px;

}

/*.feature-blob{

    position:absolute;

    width:180px;

    height:180px;

    right:-70px;

    top:-70px;

    background:radial-gradient(
        rgba(21,163,98,.18),
        transparent 70%
    );

    border-radius:50%;

    transition:.5s;

}

.feature-card:hover .feature-blob{

    transform:scale(1.4);

}*/

.feature-blob{

    position:absolute;

    width:170px;

    height:170px;

    right:-80px;

    top:-80px;

    background:radial-gradient(
        var(--accent),
        transparent 70%
    );

    opacity:.08;

    border-radius:50%;

    transition:.5s;

}

.feature-card:hover .feature-blob{

    transform:scale(1.4);

}


.feature-card:hover .feature-icon{

    transform:rotate(-8deg) scale(1.08);

}

/*.feature-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:20px;

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.feature-link i{

    transition:.35s;

}

.feature-card:hover .feature-link{

    color:#15A362;

}

.feature-card:hover .feature-link i{

    transform:translateX(6px);

}*/

.feature-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:var(--accent);

    font-weight:600;

    transition:.3s;

}

.feature-link i{

    transition:.3s;

}

.feature-card:hover .feature-link i{

    transform:translateX(8px);

}

.feature-card:hover .feature-link{

    color:#15A362;

}

/*==============================
Mobile
==============================*/

@media(max-width:768px){

    .why-us{

        padding:70px 0;

    }

    .feature-card{

        padding:25px;

    }

    .feature-number{

        font-size:2.2rem;

    }

}

/*=====================================
ACCENT COLOR
======================================*/

.accent-primary{
    --accent:#0F4C81;
}

.accent-success{
    --accent:#15A362;
}

.accent-warning{
    --accent:#F59E0B;
}

.accent-info{
    --accent:#06B6D4;
}

.accent-purple{
    --accent:#8B5CF6;
}

.accent-danger{
    --accent:#EF4444;
}


.feature-blob{

    position:absolute;

    width:180px;

    height:180px;

    right:-70px;

    top:-70px;

    border-radius:50%;

    background:radial-gradient(
        var(--accent),
        transparent 70%
    );

    opacity:.08;

    transition:.45s;

}

.feature-card:hover .feature-blob{

    transform:scale(1.4);

}

.feature-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:20px;

    color:var(--accent);

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.feature-link i{

    transition:.35s;

}

.feature-card:hover .feature-link i{

    transform:translateX(6px);

}