/*=========================================================
    PROJECT : Hope & Harmony Spectrum Inc.
    FILE    : services.css
    PURPOSE : Services Section
=========================================================*/

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

.services{

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(12,59,125,.75),
            rgba(12,59,125,.75)
        ),
        url("../images/services-bg.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

.services-header{

    max-width:720px;

    margin:0 auto 60px;

    text-align:center;

}

.services-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    background:var(--white);

    padding:40px 30px;

    border-radius:24px;

    box-shadow:var(--shadow-sm);

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease,
    border .35s ease;
    border:1px solid transparent;

}

.service-card:hover{

    transform:translateY(-12px);

    border-color:var(--secondary-color);

    box-shadow:var(--shadow-lg);

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fcfc 100%
    );

}

.service-icon{

    width:75px;

    height:75px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:rgba(71,166,169,.12);

    margin-bottom:25px;

    transition:var(--transition);

}

.service-icon i{

    font-size:2rem;

    color:var(--primary-color);

}

.service-card h3{

    margin-bottom:18px;

}

.service-card p{

    margin-bottom:25px;

}

.service-card a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary-color);

    font-weight:700;

    transition:var(--transition);
    .service-card:hover a{

    color:var(--secondary-color);

}

}

.service-card a:hover{

    color:var(--secondary-color);

}

.service-card a i{

    transition:var(--transition);

}

.service-card:hover a i{

    transform:translateX(6px);

}
/*=========================================================
                FEATURED SERVICE
=========================================================*/

.featured-service{

    position:relative;

    border:2px solid var(--accent-color);

}

.featured-badge{

    position:absolute;

    top:20px;

    right:20px;

    background:var(--accent-color);

    color:var(--dark-blue);

    padding:6px 14px;

    border-radius:50px;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:.5px;

}
.service-card:hover .service-icon{

    transform:rotate(8deg) scale(1.08);

    background:var(--primary-color);

}

.service-card:hover .service-icon i{

    color:var(--white);

}
.service-card{

    animation:slideUp .8s ease both;

}
.services{

    position:relative;

    overflow:hidden;

    background:var(--off-white);

}

.services-shape{

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(39,93,169,.05);

    border-radius:50%;

    top:-120px;

    right:-120px;

    filter:blur(40px);

}
/*=========================================================
                SERVICES HERO
=========================================================*/

.services-hero{
    padding:120px 0;
    background:#f8fbff;
}

.services-hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.services-content h1{
    font-size:3rem;
    line-height:1.2;
    margin:20px 0;
    color:var(--dark-color);
}

.services-content p{
    font-size:1.1rem;
    line-height:1.9;
    color:#666;
    margin-bottom:35px;
}

.hero-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.services-image img{
    width:100%;
    display:block;
    border-radius:24px;
    box-shadow:0 20px 60px rgba(0,0,0,.12);
}

@media(max-width:991px){

.services-hero-grid{
    grid-template-columns:1fr;
    text-align:center;
}

.services-content{
    order:2;
}

.services-image{
    order:1;
}

.hero-buttons{
    justify-content:center;
}

.services-content h1{
    font-size:2.3rem;
}

}