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

.services-section {
    padding: 50px 0;
    /* background: linear-gradient(135deg, #081C15 0%, #1B4332 45%, #2D6A4F 100%); */
    background: linear-gradient(135deg,
            #071B2F 0%,
            #0B2E59 55%,
            #123E73 100%);
    position: relative;
    overflow: hidden;
}

.services-section::before {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    top: -180px;
    right: -150px;
}

.services-section::after {
    content: '';
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(245, 158, 11, .08);
    bottom: -120px;
    left: -120px;
}


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

.service-card {

    height: 100%;

    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(18px);

    border-radius: 24px;

    overflow: hidden;

    transition: .4s;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);

}

.service-card:hover {

    transform: translateY(-10px);

    border-color: #F59E0B;

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

}


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

.service-img {

    height: 260px;

    overflow: hidden;

    position: relative;

}

.service-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .6s;

}

.service-card:hover img {

    transform: scale(1.08);

}

.service-img::after {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(to top,
            rgba(0, 0, 0, .35),
            transparent);

}


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

.service-content {

    padding: 30px;

}

.service-content h3 {

    color: var(--white);

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 15px;

    font-family: 'Outfit', sans-serif;

}

.service-content p {

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

    line-height: 30px;

    margin-bottom: 25px;

}


/*=========================
BUTTON
==========================*/

.service-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 28px;

    border-radius: 50px;

    background: #F59E0B;

    color: var(--white);

    text-decoration: none;

    font-weight: 600;

    transition: .35s;

}

.service-btn:hover {

    background: #fff;

    color: #0B3D2E;

}


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

@media(max-width:991px) {

    .service-img {

        height: 220px;

    }

    .service-content {

        padding: 25px;

    }

    .service-content h3 {

        font-size: 24px;

    }

}


@media(max-width:767px) {

    .services-section {

        padding: 70px 0;

    }

    .service-card {

        /* display: flex; */

        align-items: center;

        flex-direction: row;

        border-radius: 20px;

    }

    .service-img {

        /* width: 42%; */

        height: 180px;

        flex-shrink: 0;

    }

    .service-content {

        /* width: 58%; */

        padding: 20px 12px;

    }

    .service-content h3 {

        font-size: 20px;

        margin-bottom: 10px;

    }

    .service-content p {

        font-size: 14px;

        line-height: 24px;

        margin-bottom: 15px;

    }

    .service-btn {

        padding: 10px 10px;

        font-size: 14px;

    }

}