@tailwind base;
@tailwind components;
@tailwind utilities;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    overflow-x: hidden;
}
html {
    scroll-behavior: smooth;
}
::-webkit-scrollbar {
    display: none;
}

.scrolled {
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(30px);
}

.jumbotron {
    background-size: 100%;
    background-image: url("./../assets/img/backgrounds/jumbotron-bg.png");
}

.marquee-w {
    position: absolute;
    display: block;
    width: 100%;
    height: 14rem;
    left: 50%;
    transform: translate(-50%, -100%);
    overflow: hidden;
}
.marquee {
    position: absolute;
    display: block;
    margin: auto auto;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}
.marquee span{
    display: inline-block;
    color: white;
    white-space: nowrap;
    font-size: 10rem;
    animation: marquee 40s linear infinite;
    animation-delay: -40s;
}
.marquee span:nth-child(2) {
    animation: marquee2 40s linear infinite;
    animation-delay: -20s;
}
@keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translate(-100%);
    }
}
@keyframes marquee2 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%);
    }
} 
.font-sora {
    font-family: 'Sora';
}
.font-bebas {
    font-family: 'Bebas Neue', cursive;
}
.font-inter {
    font-family: 'Inter', sans-serif;
}
.header-img:hover .card {
    opacity: 1;
    display: block;
    transform: translate(5%, -100px);
}

.header-img:hover .card.left {
    opacity: 1;
    display: block;
    transform: translate(-55%, -100px);
}


.infinite-carousel-container {
    background-image: url("./../assets/img/backgrounds/bg-running.png");
}


.carousel-slide-track {
    animation: scroll 20s linear infinite;
}

.carousel-slide-track-2 {
    animation: scroll-2 20s linear infinite;
}


@keyframes scroll {
    0% {
        transform: translateX(-25vw);
    }
    50% {
        transform: translateX(25vw);
    }
    100% {
        transform: translateX(-25vw);
    }
}

@keyframes scroll-2 {
    0% {
        transform: translateX(25vw);
    }
    50% {
        transform: translateX(-25vw);
    }
    100% {
        transform: translateX(25vw);
    }
}

.article-fade {
    opacity: 0;
    display: none;
    position: fixed;
}
#content {
    display: none;
}

#preloader.hide {
    animation: slide-up 1s ease-out forwards, mask-fade 1s ease-in-out 0.3s forwards;
  }
  
  @keyframes slide-up {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-100%);
    }
  }
  
  @keyframes mask-fade {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

.about-us-description {
    background-image: url("./../assets/img/backgrounds/about-img.png");
}


.about-zaidan:hover img {
    filter: drop-shadow(0px 0px 10rem #C8B5FD);
}

.about-alva:hover img {
    filter: drop-shadow(0px 0px 10rem #6EE7B7);
}

.about-syafiq:hover img {
    filter: drop-shadow(0px 0px 10rem #F9A8D4);
}

.about-fajar:hover img {
    filter: drop-shadow(0px 0px 10rem #FCD34D);
}