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

@layer utilities {
  @font-face {
    font-family: "PPNeueBit";
    src: url("/assets/fonts/PPNeueBit-Bold.otf") format("woff2");
    /* Add other font formats if necessary */
  }

  .nav-mobile-menu {
    visibility: hidden;
    opacity: 0;
    background: black;
    width: 0px;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    top: 0;
    padding-top: 20px;
    left: 0;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    z-index: 999;
    color: #fff;
  }

  .active.nav-mobile-menu {
    visibility: visible;
    opacity: 1;
    width: 100%;
  }

  .border-shad {
    box-shadow: 0px 20px 40px 0px rgba(212, 217, 232, 0.1),
      0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  }

  .border-gradient-left {
    border-image: linear-gradient(to right, white, rgb(41, 41, 41), black);
    border-image-slice: 1;
  }

  .border-gradient-right {
    border-image: linear-gradient(to right, black, rgb(41, 41, 41), white);
    border-image-slice: 1;
  }

  .animate-delay-100 {
    animation-delay: 2s;
  }

  .animate-delay-200 {
    animation-delay: 4s;
  }

  .animate-delay-300 {
    animation-delay: 6s;
  }

  .animate-delay-400 {
    animation-delay: 8s;
  }

  .animate-delay-500 {
    animation-delay: 10s;
  }

  .duration-45s {
    animation-duration: 45s;
  }

  .duration-65s {
    animation-duration: 65s;
  }

  .swiper {
    display: none !important;
  }

  @media only screen and (max-width: 768px) {
    /* Add your CSS styles for mobile devices here */
    .swiper {
      display: block !important;
    }
  }
}