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

.services-section{

    position:relative;

    padding:120px 0;

    background:#FFFFFF;

    overflow:hidden;

}

.services-section::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(0,194,255,.10),
    transparent 70%);

    top:-200px;

    right:-200px;

    z-index:0;

}

.services-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(29,78,216,.08),
    transparent 70%);

    bottom:-180px;

    left:-180px;

    z-index:0;

}

.services-section .container{

    position:relative;

    z-index:2;

}

/*=========================================================
                    SECTION HEADING
=========================================================*/

.section-heading{

    max-width:760px;

    margin:auto;

    text-align:center;

    margin-bottom:70px;

}

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(29,78,216,.08);

    color:#1D4ED8;

    font-size:.95rem;

    font-weight:700;

    margin-bottom:22px;

}

.section-badge i{

    color:#00C2FF;

}

.section-title{

    font-size:3rem;

    font-weight:800;

    color:#0B132B;

    margin-bottom:20px;

    line-height:1.2;

}

.section-title span {
    background: linear-gradient(
        90deg,
        #1D4ED8,
        #00C2FF
    );

    /* Standard */
    background-clip: text;
    color: transparent;

    /* Chrome, Edge, Safari */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-description{

    max-width:650px;

    margin:auto;

    font-size:1.05rem;

    color:#64748B;

    line-height:1.8;

}

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

.services-grid{

    display:grid;

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

    gap:30px;

}

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

.service-card{

    position:relative;

    background:#FFFFFF;

    padding:40px 30px;

    border-radius:24px;

    overflow:hidden;

    border:1px solid rgba(226,232,240,.9);

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

    transition:all .4s ease;

    cursor:pointer;

}

/* Top Gradient */

.service-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        #1D4ED8,
        #00C2FF
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.service-card:hover::before{

    transform:scaleX(1);

}

.service-card:hover{

    transform:translateY(-12px);

    border-color:#00C2FF;

    box-shadow:
        0 25px 60px rgba(29,78,216,.15);

}

/*=========================================================
                    SERVICE ICON
=========================================================*/

.service-icon{

    width:78px;

    height:78px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:22px;

    margin-bottom:25px;

    background:linear-gradient(
        135deg,
        #1D4ED8,
        #00C2FF
    );

    color:#FFFFFF;

    font-size:30px;

    transition:.4s;

}

.service-card:hover .service-icon{

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

}

/*=========================================================
                    TITLE
=========================================================*/

.service-card h4{

    font-size:1.35rem;

    font-weight:700;

    color:#0B132B;

    margin-bottom:16px;

    transition:.3s;

}

.service-card:hover h4{

    color:#1D4ED8;

}

/*=========================================================
                    DESCRIPTION
=========================================================*/

.service-card p{

    color:#64748B;

    font-size:.98rem;

    line-height:1.8;

    margin-bottom:22px;

}

/*=========================================================
                    CARD ARROW
=========================================================*/

.service-card{

    display:flex;

    flex-direction:column;

}

.service-card .service-arrow{

    margin-top:auto;

    display:flex;

    justify-content:flex-end;

}

.service-card .service-arrow i{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#F1F5F9;

    color:#1D4ED8;

    transition:.35s ease;

}

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

    background:linear-gradient(
        135deg,
        #1D4ED8,
        #00C2FF
    );

    color:#FFFFFF;

    transform:translateX(6px);

}

/*=========================================================
                VIEW ALL BUTTON
=========================================================*/

.services-button{

    margin-top:70px;

    text-align:center;

}

.services-button .btn-primary-custom{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 34px;

    border-radius:50px;

}

.services-button .btn-primary-custom i{

    transition:.35s;

}

.services-button .btn-primary-custom:hover i{

    transform:translateX(8px);

}

/*=========================================================
                DECORATIVE CIRCLES
=========================================================*/

.service-card::after{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(0,194,255,.12),
        transparent 70%);

    right:-70px;

    bottom:-70px;

    opacity:0;

    transition:.5s;

}

.service-card:hover::after{

    opacity:1;

}

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

@media(max-width:1200px){

    .services-grid{

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

    }

}

@media(max-width:768px){

    .services-section{

        padding:90px 0;

    }

    .section-title{

        font-size:2.2rem;

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    .service-card{

        padding:35px 25px;

    }

}

@media(max-width:576px){

    .section-title{

        font-size:1.9rem;

    }

    .section-description{

        font-size:1rem;

    }

    .service-icon{

        width:65px;

        height:65px;

        font-size:24px;

    }

}