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

.services-banner{

    background:
    linear-gradient(
    rgba(255,66,84,0.88),
    rgba(255,66,84,0.88)
    ),
    url('../images/services-page-banner.png');

    background-size: cover;
    background-position: center;

    padding: 140px 0;

    text-align: center;
}

.services-banner-content h1{
    color: #ffffff;
    margin-bottom: 15px;
}

.services-banner-content p{
    color: #ffffff;
    max-width: 700px;
    margin: auto;
}

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

.service-section{
    padding: 100px 0;
}

.service-section:nth-child(even){
    background: #f8f9fa;
}

/* ====================================
   SERVICE ROW
==================================== */

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

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

.service-image{
    overflow: hidden;
    border-radius: 20px;
}

.service-image img{
    width: 100%;
    display: block;

    border-radius: 20px;

    transition: .5s ease;
}

.service-image:hover img{
    transform: scale(1.08);
}

/* ====================================
   SERVICE LABEL
==================================== */

.service-label{

    display: inline-block;
    background: rgba(255,66,84,0.10);
    color: #ff4254;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 30px;
    margin-bottom: 20px;
	scroll-margin-top: 160px;
}

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

.service-content h2{
    margin-bottom: 25px;
}

.service-content p{
    margin-bottom: 25px;
    color: #555555;
}

/* ====================================
   FEATURE LIST
==================================== */

.service-content ul{
    padding: 0;
    margin: 0;
}

.service-content ul li{

    list-style: none;

    margin-bottom: 15px;

    position: relative;

    padding-left: 30px;

    color: #444444;
}

.service-content ul li::before{

    content: '\f058';

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    position: absolute;

    left: 0;
    top: 0;

    color: #ff4254;
}

/* ====================================
   ALTERNATE SECTION
==================================== */

.alternate{
    background: #f8f9fa;
}

/* ====================================
   CARD EFFECT
==================================== */

.service-content{

    animation: fadeUp .8s ease;
}

.service-image{

    animation: fadeUp .8s ease;
}

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

.cta-section{

    background:
    linear-gradient(
    rgba(255,66,84,.92),
    rgba(255,66,84,.92)
    ),
    url('../images/cta-bg.jpg');

    background-size: cover;
    background-position: center;

    padding: 120px 0;

    text-align: center;
}

.cta-content{
    max-width: 800px;
    margin: auto;
}

.cta-content h2{
    color: #ffffff;
    margin-bottom: 20px;
}

.cta-content p{
    color: #ffffff;
    margin-bottom: 35px;
}

.cta-content .btn-primary{
    background: #ffffff;
    color: #ff4254;
}

.cta-content .btn-primary:hover{
    background: #222222;
    color: #ffffff;
}

/* ====================================
   HOVER EFFECT
==================================== */

.service-content h2,
.service-content p,
.service-content li{
    transition: .3s;
}

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

@keyframes fadeUp{

    from{
        opacity: 0;
        transform: translateY(30px);
    }

    to{
        opacity: 1;
        transform: translateY(0);
    }

}

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

@media(max-width:768px){

    .client-card{
        width:100%;
    }

    .clients-banner{
        padding:100px 0;
    }

}