/*==================================================
    SS ONE
    CARDS.CSS
==================================================*/

/*==============================
FEATURES
==============================*/

.features{

    padding:110px 0;

    background:#ffffff;

}

.features-grid{

    display:grid;

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

    gap:30px;

}

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

.feature-card{

    background:#fff;

    border:1px solid #edf2f7;

    border-radius:20px;

    padding:35px;

    transition:.35s ease;

    position:relative;

    overflow:hidden;

}

.feature-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,var(--primary),var(--secondary));

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.feature-card:hover::before{

    transform:scaleX(1);

}

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

.feature-icon{

    width:72px;

    height:72px;

    border-radius:18px;

    background:#eef5ff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-bottom:24px;

    transition:.35s;

}

.feature-card:hover .feature-icon{

    background:var(--primary);

    color:#fff;

}

/*==============================
TEXT
==============================*/

.feature-card h3{

    margin-bottom:18px;

    color:var(--primary);

}

.feature-card p{

    line-height:1.8;

}

/*==============================
MODULES
==============================*/

.modules{

    padding:110px 0;

    background:#f8fbff;

}

.modules-grid{

    display:grid;

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

    gap:24px;

}

/*==============================
MODULE ITEM
==============================*/

.module-item{

    background:#fff;

    border-radius:18px;

    padding:28px;

    text-align:center;

    border:1px solid #edf2f7;

    transition:.35s;

}

.module-item:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(0,0,0,.08);

}

.module-icon{

    width:70px;

    height:70px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:linear-gradient(135deg,var(--primary),#3b6ba5);

    color:#fff;

    font-size:30px;

}

.module-item h4{

    margin-bottom:12px;

    color:var(--primary);

    font-size:20px;

}

.module-item p{

    font-size:15px;

    line-height:1.7;

}

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

.module-item:hover{

    border-color:var(--secondary);

}

/*==============================
SECTION SPACING
==============================*/

.features .section-header,
.modules .section-header{

    margin-bottom:70px;

}