body{
    overflow-x: hidden;
}

.progress-bar {
    width: 0%;
    transition: width 2s ease-out;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.7);
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateX(20px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes zoomIn {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes fadeInDelay {
    0% { opacity: 0; transform: translateX(10px); }
    50% { opacity: 0; }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes section-animation-right {
    0% { opacity: 0; transform: translateX(60px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes section-animation-left {
    0% { opacity: 0; transform: translateX(-60px); }
    100% { opacity: 1; transform: translateX(0); }
}

.animate-fadeIn {
    animation: fadeIn 1s ease-out forwards;
}

.animate-zoomIn {
    animation: zoomIn 1s ease-out forwards 0.5s;
}

.animate-fadeInDelay {
    animation: fadeInDelay .7s ease-out forwards 0.5s;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
}

.delay-500 {
    animation-delay: 0.5s;
}

.delay-600 {
    animation-delay: 0.6s;
}

@media (max-width: 768px) {
    #experience .absolute,
    #experience .relative .absolute {
        display: none;
    }

    #experience .flex {
        flex-direction: column;
        align-items: stretch;
        opacity: 1;
        transform: translateX(0.7);
    }

    #experience .flex .w-5/12 {
        width: 100%;
    }

    #experience .flex .opacity-0 {
        opacity: 1;
        transform: none;
    }
}

section[data-animate] {
    opacity: 0;
    transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out;
}


section[data-animate="left"].visible {
    opacity: 1;
    animation: section-animation-right 1s ease-out forwards;
}

section[data-animate="right"].visible {
    opacity: 1;
    animation: section-animation-left 1s ease-out forwards;
}

#experience div.visible[data-animate="right"] {
    opacity: 1;
    animation: section-animation-left 1.5s ease-out forwards;
}

#experience div.visible[data-animate="left"] {
    opacity: 1;
    animation: section-animation-right 1.5s ease-out forwards;
}