/* Mobile menu animation */
.mobile__menu{
    opacity: 0;
    transform: translateX(100%);
    animation: fadeSlideRight 0.4s forwards;
}
@keyframes fadeSlideRight {
    0%{
        opacity: 0;
        transform: translateX(100%);
        right: -100%;
    }
    100%{
        opacity: 1;
        transform: translateX(0);
        right: 0;
    }
}

.about{
    opacity: 0;
    transform: translateX(100%);
    animation: fadeSlideRight 0.5s forwards;
}
@keyframes fadeSlideRight {
    0%{
        opacity: 0;
        transform: translateX(100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

.services{
    opacity: 0;
    transform: translateX(100%);
    animation: fadeSlideRight 0.6s forwards;
}
@keyframes fadeSlideRight {
    0%{
        opacity: 0;
        transform: translateX(100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

.skills{
    opacity: 0;
    transform: translateX(100%);
    animation: fadeSlideRight 0.7s forwards;
}
@keyframes fadeSlideRight {
    0%{
        opacity: 0;
        transform: translateX(100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
.projects{
    opacity: 0;
    transform: translateX(100%);
    animation: fadeSlideRight 0.8s forwards;
}
@keyframes fadeSlideRight {
    0%{
        opacity: 0;
        transform: translateX(100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}