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

.services-section{
    position: relative;
    padding: 80px 0;
    background: #ffffff;
    overflow: hidden;
}

.services-section::before{
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    top: -180px;
    right: -180px;
    border-radius: 50%;
    background: rgba(30,139,255,.05);
    filter: blur(80px);
}

.services-section .container{
    position: relative;
    z-index: 2;
}

/*======================================
Section Header
======================================*/

.section-header{
    max-width: 760px;
    margin: auto;
}

/*======================================
Featured Service
======================================*/

.featured-service{

    position: relative;

    height: 100%;

    padding: 45px;

    border-radius: 30px;

    overflow: hidden;

    background: linear-gradient(
        135deg,
        #0D0A63 0%,
        #1627A6 100%
    );

    color: #fff;

    box-shadow: 0 25px 60px rgba(13,10,99,.18);

    transition: .4s ease;

}

.featured-service:hover{

    transform: translateY(-8px);

}

.featured-service::before{

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    right: -90px;

    top: -90px;

    border-radius: 50%;

    background: rgba(255,255,255,.06);

}

.featured-service::after{

    content: "";

    position: absolute;

    width: 160px;

    height: 160px;

    left: -60px;

    bottom: -60px;

    border-radius: 50%;

    background: rgba(95,213,208,.10);

}

.featured-service>*{

    position: relative;

    z-index: 2;

}

/*======================================
Featured Icon
======================================*/

.service-icon{

    width: 75px;

    height: 75px;

    border-radius: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255,255,255,.12);

    backdrop-filter: blur(10px);

    margin-bottom: 25px;

}

.service-icon i{

    font-size: 2rem;

    color: #fff;

}

/*======================================
Tag
======================================*/

.service-tag{

    display: inline-block;

    padding: 8px 16px;

    border-radius: 50px;

    background: rgba(255,255,255,.12);

    color: #fff;

    font-size: .8rem;

    font-weight: 600;

    letter-spacing: 1px;

    margin-bottom: 20px;

}

/*======================================
Texts
======================================*/

.featured-service h3{

    font-size: 2rem;

    font-weight: 700;

    margin-bottom: 20px;

}

.featured-service p{

    color: rgba(255,255,255,.82);

    line-height: 1.9;

    margin-bottom: 30px;

}

/*======================================
List
======================================*/

.service-list{

    padding: 0;

    margin: 0 0 35px;

    list-style: none;

}

.service-list li{

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 14px;

    color: rgba(255,255,255,.92);

}

.service-list i{

    color: #5FD5D0;

}

/*======================================
Read More
======================================*/

.service-link{

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    font-weight: 600;

    text-decoration: none;

    transition: .3s;

}

.service-link:hover{

    gap: 16px;

    color: #5FD5D0;

}

/*======================================
Right Cards
======================================*/

.service-card{

    height: 100%;

    background: #fff;

    padding: 35px 28px;

    border-radius: 24px;

    border: 1px solid rgba(13,10,99,.06);

    box-shadow: 0 15px 40px rgba(15,23,42,.05);

    transition: .35s;

}

.service-card:hover{

    transform: translateY(-8px);

    box-shadow: 0 25px 60px rgba(15,23,42,.10);

}

.service-card i{

    width: 70px;

    height: 70px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.7rem;

    margin-bottom: 25px;

    background: linear-gradient(
        135deg,
        #0D0A63,
        #1E8BFF
    );

    color: #fff;

    transition: .35s;

}

.service-card:hover i{

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

}

.service-card h5{

    color: #24324B;

    font-weight: 700;

    margin-bottom: 15px;

}

.service-card p{

    margin: 0;

    color: #6B7280;

    line-height: 1.8;

    font-size: .95rem;

}

/*======================================
Button
======================================*/

.services-section .btn{

    border-radius: 50px;

    padding: 14px 34px;

    font-weight: 600;

}

/*======================================
Responsive
======================================*/

@media (max-width:991px){

    .services-section{

        padding: 70px 0;

    }

    .featured-service{

        padding: 35px;

        margin-bottom: 10px;

    }

}

@media (max-width:767px){

    .featured-service{

        padding: 30px;

    }

    .featured-service h3{

        font-size: 1.7rem;

    }

    .service-card{

        padding: 28px;

    }

    .service-icon{

        width: 65px;

        height: 65px;

    }

}

@media (max-width:576px){

    .services-section{

        padding: 60px 0;

    }

    .featured-service{

        border-radius: 24px;

        padding: 25px;

    }

    .service-card{

        border-radius: 20px;

        padding: 24px;

    }

    .service-card i{

        width: 60px;

        height: 60px;

        font-size: 1.4rem;

    }

}