.service-counts {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 3%;
    padding-bottom: 3%;
    background: rgba(240, 240, 243, 1);

}

.single-service {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 3%;
    padding-bottom: 3%;
    border-radius: 50px;
    background: linear-gradient(180deg, #F0F0F3 0%, #FFFFFF 100%);
    box-shadow: 10px 10px 30px 0px rgba(174, 174, 192, 0.4);
    display: flex;
    margin-bottom: 2%;
}

.text-service {
    width: 80%;

}

.service-heads {
    font-family: Quicksand;
    font-weight: 700;
    font-size: 24px;
    margin: 0;
    color: var(--Color-Text-1, rgba(29, 36, 43, 1));

}

.subhead-service {
    font-family: Quicksand;
    font-weight: 600;
    font-size: 20px;
    color: var(--Color-Text-2, rgba(51, 51, 51, 1));
}

.main-text-service {
    font-family: Quicksand;
    font-weight: 500;
    font-size: 18px;
    color: var(--Color-Text-2, rgba(51, 51, 51, 1));


}

.count-services {
    width: 20%;
}




@keyframes appear {
    from {
        opacity: 0;
        scale: 0.4;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

.single-service {
    animation: appear 5s linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

.work-log {
    display: flex;
    padding-right: 5%;
}

.left-image-laptop {
    width: 40%;

}

.laptop {
    width: 100%;
}

.experience-division {
    width: 60%;
}

.experience-division {
    padding-left: 2%;
}

.single-experience {
    padding-left: 2%;
    padding-top: 2%;
    padding-right: 2%;
    background: rgba(240, 240, 243, 1);
    box-shadow: 10px 10px 30px 0px rgba(174, 174, 192, 0.4);
    border-radius: 8px;
    margin-bottom: 3%;

}



.hybrid-head {
    margin: 0;
    font-family: Quicksand;
    font-weight: 600;
    font-size: 20px;
    color: var(--Color-Text-1, rgba(29, 36, 43, 1));
}

.hybrid-text {
    font-family: Quicksand;
    font-weight: 500;
    font-size: 18px;
    color: var(--Color-Text-2, rgba(51, 51, 51, 1));
}

.single-line {
    width: 100%;
}


.experience-division {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.single-experience {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;

}

.single-experience:hover {
    transform: translateY(-5px) scale(1.03);
    transition: transform 0.3s ease-in-out;
}


@media(max-width:768px) {
    .service-heads {
        font-size: 22px;

    }

    .subhead-service {
        font-size: 18px;
    }

    .main-text-service {
        font-size: 16px;
        line-height: 22px;
    }

    .bigger-text {
        font-size: 5rem !important;
    }

    .hybrid-head {
        font-size: 18px;
    }

    .hybrid-text {
        font-size: 16px;
        line-height: 22px;
    }


}


@media(max-width:425px) {
    .single-service {
        display: block;
        padding: 8%;
    }

    .service-heads,
    .subhead-service,
    .main-text-service {
        text-align: center;
    }

    .text-service,
    .count-services {
        width: 100%;
    }

    .service-heads {
        font-size: 18px;
    }

    .subhead-service {
        font-size: 16px;
    }

    .main-text-service {
        font-size: 14px;
    }

    .bigger-text {
        font-size: 4rem !important;
    }

    .work-log {
        display: block;
        padding: 0px;
    }

    .left-image-laptop {
        width: 100%;
    }

    .experience-division {
        width: 100%;
    }

    .experience-division {
        padding: 0%;
    }

    .single-experience {
        margin: 3%;
    }

    .hybrid-text {
        font-size: 14px;
    }

    .single-experience {
        padding-left: 5%;
        padding-top: 5%;
        padding-right: 5%;
    }



}