html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'SatoshiBlack';
    src: url('assets/fonts/Satoshi-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'SatoshiBold';
    src: url('../assets/fonts/Satoshi-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SatoshiLight';
    src: url('../assets/fonts/Satoshi-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SatoshiMedium';
    src: url('../assets/fonts/Satoshi-Medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SatoshiRegular';
    src: url('../assets/fonts/Satoshi-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: 'SatoshiBlack', sans-serif;
}

header li {
    font-family: 'SatoshiLight', sans-serif;
}

.button-black {
    background-color: #011423;
    color: white; /* Default text color */
    padding: 0.5rem 1.8rem;
    border-radius: 5rem;
    border: 1px solid transparent; /* Border will be transparent by default */
    transition: all 0.1s ease-in-out; /* Smooth transition for background, border, and text color */
}

    .button-black:hover {
        background-color: rgba(255, 255, 255, 0); /* Transparent background on hover */
        border: 1px solid #011423; /* Black border on hover */
        color: #011423; /* Change text color to black on hover */
    }

a {
    direction: none;
    font-family: 'SatoshiLight', sans-serif;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: white; /* or your preferred background */
    z-index: 1000;
    transition: top 0.3s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-hidden {
    top: -100px; /* hide above the viewport */
}

#avid-lionz-icon {
    display: none;
}

.strongP {
    color: #656565;
    margin-bottom: 0.3rem;
}

.lightP {
    color: #6E6E6E;
}
/* scrol in  animation */

/* @keyframes fadeInLeft {
    0% {
      opacity: 0;
      transform: translateX(-30px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes fadeInRight {
    0% {
      opacity: 0;
      transform: translateX(30px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .animate-fade-in-left {
    animation: fadeInLeft 1s ease-out both;
  }
  .animate-fade-in-right {
    animation: fadeInRight 1s ease-out both;
  }
   */
@media (max-width: 860px) {
    #logo {
        display: none;
    }

    #avid-lionz-icon {
        display: block;
    }
}

@media (max-width: 767px) {
    #logo {
        display: block;
    }

    #avid-lionz-icon {
        display: none;
    }

    .costume-text {
        justify-content: center;
    }
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: '' !important;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: '' !important;
}

.swiper-button-next svg,
.swiper-button-prev svg {
    width: 24px !important;
    height: 24px !important;
}

.swiper-button-next,
.swiper-button-prev {
    position: relative !important;
}

.swiper-slide.swiper-slide-active {
    --tw-border-opacity: 1 !important;
    border-color: rgb(79 70 229 / var(--tw-border-opacity)) !important;
}

    .swiper-slide.swiper-slide-active > .swiper-slide-active\:text-indigo-600 {
        --tw-text-opacity: 1;
        color: rgb(79 70 229 / var(--tw-text-opacity));
    }

    .swiper-slide.swiper-slide-active > .flex .grid .swiper-slide-active\:text-indigo-600 {
        --tw-text-opacity: 1;
        color: rgb(79 70 229 / var(--tw-text-opacity));
    }

scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}