.system-hero{
    padding:140px 0 90px;
    background:#fff;
}

.hero-badge{
    display:inline-block;
    background:#0d6efd;
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    margin-bottom:20px;
    font-size:.9rem;
}

.system-hero h1{
    font-size:3rem;
    font-weight:700;
    margin-bottom:25px;
}

.system-hero p{
    font-size:1.15rem;
    line-height:1.9;
    color:#666;
}

.system-hero img{
    max-width:100%;
}

@media(max-width:992px){

.system-hero{

text-align:center;

padding:110px 0 70px;

}

.system-hero h1{

font-size:2.2rem;

}

}
.system-features{
    background:#fff;
}


.feature-card{

    height:100%;

    min-height:260px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:35px;

    border-radius:18px;

    background:#fff;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

}


.feature-card:hover{

transform:translateY(-8px);

}

.feature-icon{

    width:70px;
    height:70px;

    border-radius:50%;
    background:#0d6efd;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 25px;

    overflow:hidden;
}

.feature-icon i{

    color:#fff !important;

    font-size:24px;

    line-height:70px;

    display:block;

    position:static;

    transform:none;

    margin:0;
    padding:0;
}


.feature-card h4{

font-weight:700;

margin-bottom:15px;

}


.feature-card p{

color:#666;

line-height:1.8;

}

.feature-icon i{

    color:#fff !important;

}
@media (max-width:768px){

.feature-icon i{

    transform:translateY(2px);

}

}

.workflow-step{

padding:20px;

}

.workflow-number{

width:70px;
height:70px;

margin:auto;

border-radius:50%;

background:#0d6efd;

color:#fff;

display:flex;
align-items:center;
justify-content:center;

font-size:26px;
font-weight:700;

}

/*==================================================
Modules
==================================================*/

.system-modules{

    background:#f8fbff;

}

.section-badge{

    display:inline-block;

    padding:8px 20px;

    background:#e8f1ff;

    color:#0d6efd;

    border-radius:50px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:15px;

}

.system-modules h2{

    font-size:2.5rem;

    font-weight:700;

    color:#1d3557;

    margin-bottom:15px;

}

.section-description{

    max-width:700px;

    margin:0 auto 40px;

    color:#666;

    line-height:1.9;

}

.module-card{

    height:100%;

    padding:35px;

    background:#fff;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    transition:.35s;

}

.module-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.module-icon{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0d6efd;

    color:#fff;

    border-radius:16px;

    font-size:27px;

    margin-bottom:25px;

}

.module-card h4{

    font-weight:700;

    color:#1d3557;

    margin-bottom:15px;

}

.module-card p{

    color:#666;

    line-height:1.8;

    margin:0;

}

@media(max-width:767px){

.system-modules{

    padding-top:60px !important;

    padding-bottom:60px !important;

}

.system-modules h2{

    font-size:2rem;

}

.module-card{

    padding:28px;

}

}