/* service.css */
/*====================================================*/
.service-box {
    width: 100%;

    opacity: 0; /* Initially hide the service-box */
    transform: translateY(50px); /* Move the service-box down */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.service-row {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 70px;


}

.service-image {
    width: 722.422px;
    height: 730.1px;
}

.service-text {
    flex-shrink: 0;
    color: #000;

    opacity: 0; /* Initially hide the service-text */
    animation: fadeInUp 1s forwards; /* Apply animation to the text */
    animation-delay: 1s; /* Increase the text animation delay */
}

.service-hint {
    width: 464px;
    font-size: 18px;
    font-weight: 600;
    font-style: normal;
    margin-bottom: 15px;
}

.service-title {
    width: 464px;
    margin-bottom: 25px;
    font-weight: 700;
    line-height: normal;
    font-size: 42px;
}

.service-description {
    width: 464px;
    font-size: 18px;
    text-align: justify;
    margin-bottom: 25px;

    margin-top: 10px;
    line-height: 25px;
    font-weight: 600;
}

.service-ul {
    width: 464px;
    font-size: 18px;
    text-align: justify;

    margin-bottom: 25px;
    margin-top: 10px;
    line-height: 25px;
    font-weight: 600;
}

/*====================================================*/
/* Add animation for the service-box */
@keyframes slideInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Add animation for fading in the text */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animation to the service-box when it becomes visible */
.service-box.animate {
    animation: slideInFromBottom 1s forwards;
}