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




 @layer base {
  

  li {
    @apply p-4;
  }
}
/* 
.active {
  background-color: gray ;
} */

.alice-carousel {
  position: relative;
}

.alice-carousel__prev-btn-item {
  position: absolute;
  top: 190px;
  left: 0px;
  font-size: 3rem;
}

.alice-carousel__next-btn-item {
  font-size: 3rem;
  position: absolute;
  top: 190px;
  right: 0px;
  font-size: 3rem;
}

#splide01 .splide__slide {
  padding: 0px;
  margin: 0px;
  width: 100px;
  height: 100px;
}

#splide01 img {
  padding: 0px;
  margin: 0px;
  border: 0px;
  width: 100px;
  height: 94px;
  object-fit: cover;
  object-position: center;
  /* z-index: -10; */
}

#splide02 img {
  padding: 0px;
  margin: 0 auto;
  border: 0px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* object-position: center; */
  /* z-index: -10; */
}


@layer components {
  .custom-container {
    @apply mx-auto max-w-[95%] sm:max-w-[90%];
  }

  .none {
    @apply flex-none;
  }

  /* nav__link hover pseudo el for home-page */
  .navv__link {
    @apply text-white relative;
  }

  .navv__link::after {
    @apply content-[''] bg-slate-50 absolute bottom-0 left-1/2 -translate-x-1/2 top-[149%] w-[0%] h-[2px] transition-['width'] duration-[0.3s] ease-out;
  }
  .navv__link:hover::after {
    @apply w-4/5;
  }
  /* nav__link hover pseudo el for shopping-page */
  .navv__link--shop {
    @apply text-primary-darkGray relative;
  }

  /* .nav__link {
    @apply text-primary-black relative;
  } */

  .navv__link--shop::after {
    @apply content-[''] bg-primary-darkGray absolute bottom-0 left-2/3 -translate-x-1/2 top-[149%] w-[0%] h-[2px] transition-['width'] duration-[0.3s] ease-out;
  }
  .navv__link--shop:hover::after {
    @apply w-1/2;
  }

  /* nav__link hover pseudo el for shopping-page heading */
  .headingg-collection {
    @apply relative  w-max;
  }

  .headingg-collection::after {
    @apply content-[''] bg-primary-black absolute bottom-0 left-1/2  top-[118%] xs:top-[105%] -translate-x-1/2 w-[70%] h-[2px] xs:h-[1px] sm:h-[1.5px] transition-['width'] duration-[0.3s] ease-out;
  }

  .categoryy__figcaption {
  @apply absolute z-30 -bottom-9 left-3 max-w-[24ch] text-primary-white text-2xl sm:text-xl font-primary font-normal min-w-min leading-5 sm:leading-none;
}


  /* product name figcaption  */
  .product__figcaption {
    @apply absolute z-20 bottom-1 left-3 max-w-[18ch] text-primary-white text-sm font-[300];
  }
}


@layer base {
  .font-primary {
    font-family: "ProximaNova Condensed Bold", sans-serif;
  }




}


@keyframes fadeIn {
  0%{
      opacity: 0;
  }
  100%{
      opacity: 1;
  }
}