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

body {
  @apply tracking-[-1px] bg-woodsmokeBlack;
}

@font-face {
  font-family: "DMSansBlack";
  src: url("../fonts/DMSans-Black.ttf");
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "DMSansBold";
  src: url("../fonts/DMSans-Bold.ttf");
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "DMSansSemiBold";
  src: url("../fonts/DMSans-SemiBold.ttf");
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "DMSansMedium";
  src: url("../fonts/DMSans-Medium.ttf");
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "DMSansRegular";
  src: url("../fonts/DMSans-Regular.ttf");
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "DMSansLight";
  src: url("../fonts/DMSans-Light.ttf");
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "InterBlack";
  src: url("../fonts/Inter-Black.ttf");
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "InterBold";
  src: url("../fonts/Inter-Bold.ttf");
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "InterSemiBold";
  src: url("../fonts/Inter-SemiBold.ttf");
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "InterMedium";
  src: url("../fonts/Inter-Medium.ttf");
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "InterRegular";
  src: url("../fonts/Inter-Regular.ttf");
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "InterLight";
  src: url("../fonts/Inter-Light.ttf");
  font-display: swap;
  font-style: normal;
}

.perspective {
  perspective: 1000px;
}

.transform-style {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.floor-btn {
  background-color: #fdf1f1;
  color: #04383a;
}

.floor-btn.active {
  background-color: #d1f67d;
  color: #039e84;
}

.no-transition {
  transition: none !important;
}

.swiper-news {
  @apply !overflow-visible;
}

.swiper-news .swiper-slide {
  @apply transition-opacity duration-500 ease-in-out opacity-70;
}

.swiper-news .swiper-slide-active {
  @apply opacity-100 !z-50;
}

/* Custom Pagination Styles */

.swiper-product-pagination .swiper-pagination-bullet,
.swiper-banner-pagination .swiper-pagination-bullet,
.swiper-promo-pagination .swiper-pagination-bullet,
.swiper-news-pagination .swiper-pagination-bullet {
  @apply w-[20px] h-[8px] rounded-full bg-[#F5F5F5] opacity-100 !m-0 cursor-pointer transition-all duration-300 ease-in-out;
}

.swiper-product-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.swiper-banner-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.swiper-promo-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.swiper-news-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  @apply w-[20px] h-[13px] bg-veroneseGreen border-4 border-mindaroGreen rounded-full;
}

#news-info-container.fade-out {
  @apply opacity-0;
}

.active-tab {
  @apply bg-veroneseGreen;
}

.inactive-tab {
  @apply bg-transparent;
}

@layer base {
  /* Highlight About Us Page */
  p strong {
    @apply text-mindaroGreen font-DMSansRegular;
  }
}