@keyframes slideInLeft-img {
    0% {
        transform: translateX(-100%); /* Start from the left */
        opacity: 0;
    }
    100% {
        transform: translateX(0); /* End at original position */
        opacity: 1;
    }
}

@keyframes slideInRight-img {
    0% {
        transform: translateX(100%); /* Start from the right */
        opacity: 0;
    }
    100% {
        transform: translateX(0); /* End at original position */
        opacity: 1;
    }
}

.start-hidden-img {
    opacity: 0;
    transform: translateX(0); /* Ensure initial state */
}

.slide-in-left-img {
    animation: slideInLeft-img 0.8s ease forwards;
}

.slide-in-right-img {
    animation: slideInRight-img 0.8s ease forwards;
}



/* Start hidden state for all elements */
.invisible-init {
    opacity: 0;
    transform: translateY(-40px); /* Elements are initially shifted up */
}

/* Slide-in from the top for form in section8-left */
.top-slide-in {
    animation: topSlideIn 1s forwards;
}

/* Keyframes for sliding in from the top */
@keyframes topSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-40px); /* Slide in from above */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Element reaches its original position */
    }
}

/* Fade-in from the right for other elements (section8-right) */
.right-fade-in {
    animation: rightFadeIn 1s forwards;
}

/* Keyframes for fade-in from the right */
@keyframes rightFadeIn {
    0% {
        opacity: 0;
        transform: translateX(40px); /* Slide in from the right */
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Additional animation for buttons and inputs to give a slight scaling effect */
input, textarea, button {
    transition: transform 0.3s ease-in-out;
}

input:focus, textarea:focus, button:hover {
    transform: scale(1.07); /* Slight scaling effect on focus/hover */
}


/* first */
/* Start hidden state for all elements */
/* Start hidden state for all elements */
.invisible-init-left {
    opacity: 0;
    transform: translateX(-100%); /* Elements are initially off-screen to the left */
}

.invisible-init-bottom {
    opacity: 0;
    transform: translateY(50px); /* Elements are initially shifted down */
}

/* Slide-in from the left for the images */
.slide-in-left {
    animation: slideInLeft 1s ease-out forwards;
}

/* Keyframes for sliding in from the left for images */
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%); /* Start off-screen to the left */
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* Move to the original position */
    }
}

/* Slide-in from the bottom for the text */
.slide-in-bottom {
    animation: slideInBottom 1s ease-out forwards;
}

/* Keyframes for sliding in from the bottom for text */
@keyframes slideInBottom {
    0% {
        opacity: 0;
        transform: translateY(50px); /* Start 50px below */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Move to the original position */
    }
}

/* Typewriter effect for text */
@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Apply typewriter effect to specific text elements */
.typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 0.1em solid #fff;
    animation: typewriter 3s steps(40) 1s 1 normal both;
}

/* Fade-in effect for content */
.fade-in {
    animation: fadeIn 2s ease-out forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* first */