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

@font-face {
  font-family: 'Covered by your grace';
  src: url(./assets/fonts/CoveredByYourGrace.ttf) format('truetype');
  font-weight: normal;
  font-size: normal;
}

@font-face {
  font-family: 'ITC Avant Garde Std Bold';
  src: url(./assets/fonts/ITCAvantGardeStd-Bold.woff);
  font-weight: bold;
  font-size: normal;
}

:root {
  font-size: 16px;
}

::-webkit-scrollbar {
  width: 5px;
  display: block;
}

::-webkit-scrollbar-track {
  border-radius: 100vh;
  background: #d5d5d5;
}

::-webkit-scrollbar-thumb {
  background: #b880f2;
  border-radius: 24px;
}

html {
  scrollbar-color: #b880f2 #d5d5d5;
}

.hero-swiper-container,
.testimonials-swiper-container,
.comp-swiper-container {
  overflow: hidden;
}

.swiper-slide {
  height: auto;
}

.swiper-pagination {
  width: fit-content !important;
  position: unset !important;
}

.swiper-pagination-bullet {
  transition: all 0.2s ease-in-out !important;

  opacity: 1 !important;

  background-color: #d5d5d5;

  border-radius: 25px;
}

.hero-swiper-pagination .swiper-pagination-bullet {
  background-color: white;
}

.hero-swiper-pagination .swiper-pagination-bullet-active {
  width: 35px;
}

.swiper-pagination-bullet-active {
  background-color: #b880f2 !important;
}

.line-through {
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;

  line-height: 1 !important;

  position: relative;
  white-space: nowrap; /* would center line-through in the middle of the wrapped lines */
}

.line-through:after {
  border-top: 0.0625rem solid #000;
  position: absolute;
  content: '';
  right: 0;
  top: 0.45rem;
  left: 0;
}

@media (min-width: 640px) {
  .line-through {
    line-height: 140%;
  }

  .line-through:after {
    top: 50%;
  }
}