/* ======================================================
   SEAN B SOLUTIONS
   FEATURES SECTION
   /assets/css/home/features.css

   Professional Feature Cards

   Includes:
   - Feature Header
   - Feature Grid
   - Feature Cards
   - Icons
   - Hover Effects
   - Responsive Layout
====================================================== */


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


.features{

    position:relative;

    padding:100px 0;

    background:#fff;

    overflow:hidden;

}



/* ======================================================
   FEATURES HEADER
====================================================== */
.features-header{
    max-width:760px;
    margin:0 auto 70px;
    text-align:center;
}

.feature-card{
    background:#fff;
    padding:40px 30px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s ease;
    border:1px solid rgba(0,0,0,.05);
}

.feature-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 55px rgba(0,0,0,.12);
}

.featured{
    background:linear-gradient(135deg,#0b1f3a,#153b67);
    color:#fff;
}

.feature-icon{
    width:70px;
    height:70px;
    margin:0 auto 20px;
    border-radius:50%;
    background:#e60000;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
}

.featured .feature-icon{
    background:#fff;
    color:#e60000;
}

.feature-number{
    font-size:2.3rem;
    font-weight:700;
    color:#e60000;
    margin-bottom:10px;
}

.featured .feature-number{
    color:#fff;
}

.feature-card h3{
    margin:15px 0;
    font-size:1.3rem;
}

.feature-card p{
    color:#666;
    line-height:1.8;
}

.featured p{
    color:rgba(255,255,255,.9);
}


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


.features-grid{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:30px;

}



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


.feature-card{

    position:relative;

    padding:35px;

    background:#fff;

    border-radius:28px;

    border:

    1px solid rgba(0,0,0,.06);

    box-shadow:

    0 15px 45px rgba(0,0,0,.06);

    transition:

    .4s ease;

    overflow:hidden;

}



.feature-card::before{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    right:-40px;

    top:-40px;

    border-radius:50%;

    background:

    rgba(230,0,0,.06);

    transition:.4s ease;

}



.feature-card:hover{

    transform:

    translateY(-12px);

    box-shadow:

    0 30px 70px rgba(0,0,0,.12);

}



.feature-card:hover::before{

    transform:

    scale(1.4);

}



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


.feature-icon{

    position:relative;

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:

    linear-gradient(
    135deg,
    rgba(230,0,0,.15),
    rgba(230,0,0,.05)
    );

    color:

    var(--secondary,#e60000);

    font-size:1.8rem;

    margin-bottom:25px;

}



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


.feature-card h3{

    margin-bottom:15px;

    font-size:1.3rem;

}



.feature-card p{

    color:

    var(--text-light,#64748b);

    line-height:1.8;

    margin-bottom:20px;

}



/* ======================================================
   FEATURE LINK
====================================================== */


.feature-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-weight:700;

    color:

    var(--primary,#0b1f3a);

}



.feature-link i{

    transition:.3s ease;

}



.feature-link:hover{

    color:

    var(--secondary,#e6000);

}



.feature-link:hover i{

    transform:

    translateX(5px);

}



/* ======================================================
   FEATURE BADGE
====================================================== */


.feature-badge{

    position:absolute;

    top:25px;

    right:25px;

    padding:

    6px 14px;

    border-radius:50px;

    background:

    rgba(230,0,0,.1);

    color:

    var(--secondary,#e60000);

    font-size:.75rem;

    font-weight:700;

    text-transform:uppercase;

}



/* ======================================================
   FEATURE DARK VERSION
====================================================== */


.feature-card.dark{

    background:

    var(--primary,#0b1f3a);

}



.feature-card.dark h3{

    color:#fff;

}



.feature-card.dark p{

    color:

    rgba(255,255,255,.75);

}



.feature-card.dark .feature-link{

    color:#fff;

}



.feature-card.dark .feature-icon{

    background:

    rgba(255,255,255,.1);

    color:#fff;

}



/* ======================================================
   FEATURE STATS ROW
====================================================== */


.features-stats{

    margin-top:80px;

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:25px;

}



.feature-stat{

    text-align:center;

}



.feature-stat strong{

    display:block;

    font-size:2.5rem;

    color:

    var(--secondary,#e60000);

    font-weight:900;

}



.feature-stat span{

    color:

    var(--text-light,#64748b);

    font-size:.9rem;

}



/* ======================================================
   BACKGROUND DECORATIONS
====================================================== */


.features::before{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    left:-150px;

    top:20%;

    border-radius:50%;

    background:

    rgba(11,31,58,.05);

}



.features::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    right:-180px;

    bottom:10%;

    border-radius:50%;

    background:

    rgba(230,0,0,.05);

}



/* ======================================================
   ANIMATION
====================================================== */


.feature-card{

    animation:

    fadeUp .7s ease both;

}



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

    animation-delay:.15s;

}



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

    animation-delay:.3s;

}



.feature-card:nth-child(4){

    animation-delay:.45s;

}



.feature-card:nth-child(5){

    animation-delay:.6s;

}



.feature-card:nth-child(6){

    animation-delay:.75s;

}



/* ======================================================
   TABLETS
====================================================== */


@media(max-width:992px){


.features-grid{

    grid-template-columns:

    repeat(2,1fr);

}



.features-stats{

    grid-template-columns:

    repeat(2,1fr);

}



}



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


@media(max-width:768px){


.features{

    padding:70px 0;

}



.features-grid{

    grid-template-columns:1fr;

}



.feature-card{

    padding:30px;

}



.features-stats{

    grid-template-columns:1fr;

}



}