.section {
    opacity: 0;
}

.left h1 {
    transform: translateX(-100%);
    transition: transform 1s ease-in-out;
    transition-delay: 0s;
}

.left h2 {
    transform: translateX(-100%);
    transition: transform 1s ease-in-out;
    transition-delay: 0.5s; /* delay of 0.5s */
}

.left .social-icons {
    transform: translateX(-100%);
    transition: transform 1s ease-in-out;
    transition-delay: 1s; /* delay of 1s */
}

.left p {
    transform: translateX(-100%);
    transition: transform 1s ease-in-out;
    transition-delay: 1.5s; /* delay of 1.5s */
    text-align: center;
}

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

@keyframes slideIn {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

h1,
h2 {
    animation: fadeIn 1s ease-in-out;
}

p {
    animation: slideIn 5s ease-in-out;
}

.right img {
    transform: translateY(-100%);
    transition: transform 2s ease-in-out; /* Adjust the transition duration as desired */
}

.profile-container:hover .right img {
    transform: translateY(0) rotateY(-20deg);
    /* Add any other hover styles you want */
}