/* ==========================================
   WHY WIO
========================================== */

#features{

    padding:140px 0;

    background:#ffffff;

}

#features .container{

    max-width:1400px;

    margin:auto;

}

/* ==========================================
   HEADING
========================================== */

.section-heading{

    text-align:center;

    margin-bottom:80px;

}

.section-label{

    color:#2563eb;

    font-size:20px;

    font-weight:700;

    letter-spacing:.5px;

}

.section-divider{

    width:46px;

    height:4px;

    border-radius:100px;

    background:#dbeafe;

    margin:18px auto 30px;

}

.section-heading h2{

    font-size:72px;

    font-weight:800;

    line-height:1.15;

    color:#111827;

    margin-bottom:28px;

    letter-spacing:-2px;

}

.section-heading p{

    max-width:760px;

    margin:auto;

    font-size:28px;

    line-height:1.8;

    color:#6b7280;

}

/* ==========================================
   GRID
========================================== */

.features-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:34px;

}

/* ==========================================
   CARD
========================================== */

.feature-card{

    background:#ffffff;

    border:1px solid #edf2f7;

    border-radius:26px;

    padding:55px;

    transition:.35s;

    box-shadow:
        0 10px 45px rgba(0,0,0,.04);

}

.feature-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.08);

}

/* ==========================================
   ICON
========================================== */

.feature-icon{

    width:120px;

    height:120px;

    border-radius:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 35px;

}

.feature-icon i{

    font-size:56px;

}

/* Blue */

.feature-icon.blue{

    background:#eff6ff;

}

.feature-icon.blue i{

    color:#2563eb;

}

/* Purple */

.feature-icon.purple{

    background:#f5f3ff;

}

.feature-icon.purple i{

    color:#7c3aed;

}

/* Green */

.feature-icon.green{

    background:#ecfdf5;

}

.feature-icon.green i{

    color:#10b981;

}

/* ==========================================
   TITLE
========================================== */

.feature-card h3{

    text-align:center;

    font-size:54px;

    font-weight:700;

    color:#111827;

    margin-bottom:22px;

}

/* ==========================================
   DESCRIPTION
========================================== */

.feature-card p{

    text-align:center;

    color:#6b7280;

    font-size:25px;

    line-height:1.8;

    margin-bottom:40px;

}

/* ==========================================
   DIVIDER
========================================== */

.feature-card hr{

    border:none;

    height:1px;

    background:#e5e7eb;

    margin-bottom:35px;

}

/* ==========================================
   LIST
========================================== */

.feature-card ul{

    list-style:none;

}

.feature-card li{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:22px;

    font-size:23px;

    color:#374151;

}

.feature-card li i{

    font-size:24px;

}

/* Colors */

.feature-card:nth-child(1) li i{

    color:#2563eb;

}

.feature-card:nth-child(2) li i{

    color:#7c3aed;

}

.feature-card:nth-child(3) li i{

    color:#10b981;

}

/* ==========================================
   BOTTOM BORDER
========================================== */

.feature-card:nth-child(1){

    border-bottom:6px solid #dbeafe;

}

.feature-card:nth-child(2){

    border-bottom:6px solid #ede9fe;

}

.feature-card:nth-child(3){

    border-bottom:6px solid #d1fae5;

}

/* ==========================================
   FOOTER
========================================== */

.features-footer{

    margin-top:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    font-size:30px;

}

.features-footer i{

    color:#2563eb;

}

.features-footer strong{

    color:#2563eb;

}

.features-footer span{

    color:#6b7280;

}