/* -------- ANIMATION FadeIn -------- */

.slide-right {
    animation: 1s slide-right;
  }
  @keyframes slide-right {
    from {
      margin-left: -100%;
    }
    to {
      margin-left: 0%;
    }
  }

/* -------- ANIMATION FadeInUp -------- */

@keyframes fadeInUp {
    from {
        transform: translate3d(0, 150px, 0)
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
}

/* ______ Animation fadeInUpLate ______ */

.animated-late {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-delay: 0.3s;
}

/* ______ Animation fadeInUpLater ______ */

.animated-later {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-delay: 0.6s;
}

/* ______ Animation List-Two ______ */

.animated-ListTwo {
    animation-delay: 0.15s;
}

/* ______ Animation List-Three ______ */

.animated-ListThree {
    animation-delay: 0.3s;
}

/* ______ Animation List-Four ______ */

.animated-ListFour {
    animation-delay: 0.45s;
}

/* ______ Animation List-Five ______ */

.animated-ListFive {
    animation-delay: 0.6s;
}

/* ______ Animation List-Six ______ */

.animated-ListSix {
    animation-delay: 0.75s;
}

/* ______ Animation List-Seven ______ */

.animated-ListSeven {
    animation-delay: 0.9s;
}

/* ______ Animation List-Eight ______ */

.animated-ListEight {
    /* animation-duration: 1s;
    animation-fill-mode: both; */
    animation-delay: 1.1s;
}

/* ______ Animation List-Nine ______ */

.animated-ListNine {
    /* animation-duration: 1s;
    animation-fill-mode: both; */
    animation-delay: 1.4s;
}




@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

.scroll-container {
    height: 100vh;
    min-height: 450px;
}

/**Styling scrollable elements*/

.js-scroll {
    opacity: 0;
}

.js-scroll.scrolled {
    opacity: 1;
}

.scrolled.fade-in-bottom {
    animation: fade-in-bottom 1s ease-in-out both;
}

@keyframes fade-in-bottom {
    0% {
        transform: translateY(150px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}