/*
==========================================================
    SEAN B SHOP MARKETPLACE
    File: assets/css/pages/services.css

    Professional Services Page
==========================================================
*/


/*==========================================================
    PAGE
==========================================================*/

.services-page{

    background:#f6f7fb;

    padding-top:110px;

    color:#1e293b;

}


.services-page *{

    box-sizing:border-box;

}



/*==========================================================
    HERO
==========================================================*/


.services-hero{

    background:
    linear-gradient(
        135deg,
        #0b1f3a,
        #164b8a
    );

    padding:75px 0;

    color:#ffffff;

}



.services-hero-content{

    max-width:720px;

}



.services-hero h1{

    color:#ffffff;

    font-size:2.5rem;

    font-weight:800;

    margin-bottom:15px;

    line-height:1.2;

}



.services-hero p{

    color:#f8fafc;

    font-size:1rem;

    line-height:1.7;

    max-width:600px;

    margin-bottom:30px;

}



/* BUTTON */


.service-btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:46px;

    padding:0 28px;

    background:#e60023;

    color:#ffffff;

    border-radius:10px;

    font-weight:700;

    transition:.3s;

}



.service-btn-primary:hover{

    background:#c9001c;

    transform:translateY(-2px);

}




/*==========================================================
    SECTION HEADER
==========================================================*/


.section-header{

    text-align:center;

    margin-bottom:40px;

}



.section-header h2{

    font-size:1.8rem;

    font-weight:800;

    color:#0b1f3a;

    margin-bottom:8px;

}



.section-header p{

    color:#64748b;

    font-size:.95rem;

}





/*==========================================================
    SERVICES SECTION
==========================================================*/


.services-section{

    padding:60px 0;

}



.services-grid{

    display:grid;

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

    gap:22px;

}





/*==========================================================
    SERVICE CARD
==========================================================*/


.service-card{

    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

    border:1px solid #e5e7eb;

    transition:.3s ease;

    padding-bottom:22px;

}



.service-card:hover{

    transform:translateY(-7px);

    box-shadow:
    0 15px 35px rgba(0,0,0,.12);

}




/*==========================================================
    SERVICE IMAGE
==========================================================*/


.service-image{

    width:100%;

    height:190px;

    overflow:hidden;

    background:#f1f5f9;

}



.service-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}



.service-card:hover .service-image img{

    transform:scale(1.08);

}




/*==========================================================
    SERVICE CONTENT
==========================================================*/


.service-card h3{

    color:#0b1f3a;

    font-size:1.05rem;

    font-weight:800;

    margin:18px 18px 10px;

}



.service-card p{

    color:#64748b;

    font-size:.88rem;

    line-height:1.6;

    margin:0 18px;

    min-height:55px;

}



.service-card a{

    display:inline-flex;

    margin:18px;

    color:#e60023;

    font-size:.85rem;

    font-weight:700;

}




/*==========================================================
    SERVICE BENEFITS SECTION
==========================================================*/

.service-benefits{

    background:#f6f7fb;

    padding:70px 0;

}



/*==========================================================
    BENEFIT GRID
==========================================================*/


.benefit-grid{

    display:grid;

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

    gap:25px;

}



/*==========================================================
    BENEFIT CARD
==========================================================*/


.benefit-card{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:18px;

    padding:25px 20px;

    text-align:center;

    transition:.3s ease;

    overflow:hidden;

}



.benefit-card:hover{

    transform:translateY(-6px);

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

}



/*==========================================================
    BENEFIT IMAGE
==========================================================*/


.benefit-image{

    width:80px;

    height:80px;

    margin:0 auto 18px;

    border-radius:50%;

    overflow:hidden;

    background:#f1f5f9;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #e5e7eb;

}



.benefit-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s ease;

}



.benefit-card:hover .benefit-image img{

    transform:scale(1.08);

}



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


.benefit-card h3{

    color:#0b1f3a;

    font-size:1.05rem;

    font-weight:800;

    margin:10px 0;

}



.benefit-card p{

    color:#64748b;

    font-size:.88rem;

    line-height:1.6;

    margin:0;

}



/*==========================================================
    RESPONSIVE
==========================================================*/


@media(max-width:992px){


    .benefit-grid{

        grid-template-columns:1fr;

        gap:20px;

    }


}


@media(max-width:480px){


    .service-benefits{

        padding:45px 0;

    }


    .benefit-card{

        padding:22px 15px;

    }


    .benefit-image{

        width:70px;

        height:70px;

    }


}




/*==========================================================
    CTA
==========================================================*/


.services-contact{

    padding:70px 0;

}



.services-cta{

    background:

    linear-gradient(
        135deg,
        #0b1f3a,
        #214b88
    );

    padding:45px;

    border-radius:20px;

    text-align:center;

    color:#ffffff;

}



.services-cta h2{

    color:#ffffff;

    font-size:2rem;

    margin-bottom:15px;

}



.services-cta p{

    color:#f1f5f9;

    margin-bottom:25px;

}





/*==========================================================
    RESPONSIVE
==========================================================*/


@media(max-width:1200px){


.services-grid{

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

}


}



@media(max-width:992px){


.services-page{

    padding-top:90px;

}



.services-grid{

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

}



.benefit-grid{

    grid-template-columns:1fr;

}



.services-hero h1{

    font-size:2rem;

}



}



@media(max-width:576px){


.services-page{

    padding-top:80px;

}



.services-hero{

    padding:45px 0;

}



.services-hero h1{

    font-size:1.7rem;

}



.services-grid{

    grid-template-columns:1fr;

}



.service-image{

    height:160px;

}



.services-cta{

    padding:30px 20px;

}



.services-cta h2{

    font-size:1.4rem;

}



}