.services {
    background-color: var(--sec-bag);
    position: relative;
}

.tns-outer {
    position: relative;
}

.services_content {
    margin-top: 2rem;
    background: var(--opacity1);
    color: var(--sec-bag);
    padding-block: 8rem;
    padding-inline: 3rem;
}

.tns-controls {
    display: none;
}

.tns-nav {
    position: absolute;
    left: 50%;
    bottom: -40px;
    z-index: 2;
    transform: translate(-50%, 0);
    display: flex;
    border-radius: 1px;
}

.tns-nav>[aria-controls] {
    width: 9px;
    height: 9px;
    padding: 0;
    margin: 0 5px;
    border-radius: 50%;
    background: var(--paragraph-color);
    border: 0;
}

.tns-nav>.tns-nav-active {
    background: var(--color-primary);
}

.services .col-lg-4 {
    margin-bottom: 2.5rem;
}

.services h3 {
    margin-bottom: 3rem;
    font-size: 4rem;
    letter-spacing: 1.2px;
    color: var(--black_100);
    font-family: var(--heading-font);
    font-weight: 800;
}

.services_card {
    position: relative;
    padding: 3.5rem 2.5rem;
    display: flex;
    align-items: center;
    text-align: left;
    height: 100%;
    background-color: var(--white);
    transition: all 0.5s linear;
    height: 100%;
    border-right: 2px solid #0000000d;
    border-radius: 3px;
    overflow: hidden;
}

.services_card:last-child {
    border-right: none;
}

.services_card::after {
    content: '';
    background: linear-gradient(50deg, var(--color-primary), var(--color-pink));
    width: 0%;
    height: 3.5px;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 0.5s linear;
}

.services_card:hover::after {
    width: 100%;
}

.services_card .icon i {
    font-size: 3.4rem;
    color: var(--main-color);
}

.services_card .content {
    display: flex;
    flex-direction: column;
}

.services_card .content h4 {
    font-weight: 700;
    color: var(--black_100);
    margin-bottom: .5rem;
    font-size: 1.65rem;
    text-transform: capitalize;
}

.services_card .content p {
    font-size: 1.5rem;
    color: var(--paragraph-color);
}


/* =========== responsive ======== */

@media screen and (max-width: 1399px) {
    .services_card .content p {
        font-size: 1.3rem;
    }
    .about .about-content h2 {
        font-size: 2rem;
    }
    .about .about-content h2:last-of-type {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 1199px) {
    .services .col-lg-4 {
        width: 50%;
    }
    .about .about-content h2 {
        font-size: 1.75rem;
    }
}

@media screen and (max-width: 991px) {
    .services_card {
        padding: 3.5rem 1.3rem;
    }
}

@media screen and (max-width: 767px) {
    .services .container {
        width: 90%;
        max-width: 90%;
    }
    .services_content {
        padding-block: 1rem;
    }
    .services_card {
        padding: 3.5rem 1.6rem;
    }
}

@media screen and (max-width: 500px) {
    .services .container {
        width: 100%;
        max-width: 100%;
    }
    .services .col-lg-4 {
        width: 100%;
    }
    .services_card {
        padding: 3.5rem 0.5rem;
    }
    .services_content {
        padding-inline: 2rem;
    }
    .services h3 {
        font-size: 3rem;
    }
}

.icon {
    padding-inline-end: 1rem;
    opacity: .85;
    margin-bottom: .5rem;
}