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

@layer components {
  .h1Bold {
    @apply text-[30px] lg:text-[45px] leading-[38px] lg:leading-[60px] font-bold;
  }

  .h3Bold {
    @apply text-[24px] leading-[29px] font-semibold;
  }

  .h3normal {
    @apply text-[16px] lg:text-[24px] leading-[20px] lg:leading-[29px] font-medium;
  }

  .h4Large {
    @apply text-[16px] lg:text-[20px] leading-[20px] lg:leading-[24px] font-semibold;
  }

  .h4Bold {
    @apply text-[16px] leading-[25px] font-semibold text-[#222D43];
  }

  .h4sm {
    @apply text-[16px] leading-[20px] font-semibold tracking-[0.05em];
  }

  .h4smThin {
    @apply text-[12px] md:text-[16px] leading-[16px] md:leading-[20px] font-normal;
  }

  .h4Normal {
    @apply text-[16px] leading-[25px] text-[#222D43];
  }

  .h5Thin {
    @apply text-[14px] leading-[17px] font-normal;
  }

  .h5Bold {
    @apply text-[14px] leading-[20px] font-semibold text-[#222D43];
  }

  .commonFlex {
    @apply flex items-center justify-center;
  }

  .spaceBetween {
    @apply flex items-center justify-between;
  }

  .flexStart {
    @apply flex items-center justify-start;
  }

  .flexItemEnd {
    @apply flex items-end justify-center;
  }

  .flexItemStart {
    @apply flex items-start justify-center;
  }
  .flexItemStartStart {
    @apply flex items-start justify-start;
  }

  .pSmall {
    @apply text-[8px] leading-[10px] font-medium tracking-[0.2em] text-[#888888];
  }

  .h6bold {
    @apply text-[12px] leading-[15px] font-semibold text-[#222222];
  }

  .h5normal {
    @apply text-[12px] leading-[17px] font-medium;
  }

  .h6Bold {
    @apply text-[10px] leading-[12px] font-semibold tracking-[0.2em];
  }

  .h5LargeBold {
    @apply text-[14px] leading-[20px] font-semibold tracking-[0.1em];
  }
}

.iti__selected-flag {
  background-color: transparent !important;
}

.commonGradient {
  background: linear-gradient(90deg, #222d43 0%, #454663 56.77%, #6c6083 100%);
}

.offerShadow {
  box-shadow: 0px 3px 25px rgba(59, 74, 116, 0.15);
}

.bestSeller {
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.043);
}

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: 'Montserrat';
  src: local('Montserrat Thin'), local('Montserrat-Thin'),
    url('./src/assets/fonts/static/Montserrat-Medium.ttf') format('ttf');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

* {
  font-family: 'Montserrat';
}

.slick-dots li img:nth-child(1) {
  display: block;
}

.slick-dots li img:nth-child(2) {
  display: none;
}

.slick-dots li.slick-active img:nth-child(1) {
  display: none;
}

.slick-dots li.slick-active img:nth-child(2) {
  display: block;
}

.slick-dots {
  display: flex;
  position: absolute;
  bottom: 0;
  gap: 16px;
  left: 50%;
}

/* vertical slider */
.progress {
  width: 4px;
  height: 80px;
  background: #e0e0e0;
}

.progress-bar {
  background: #f7991a;
}

.progressbar-active {
  animation-name: progress;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}

.img-slider-div {
  margin-bottom: 100px;
}

.check-img img {
  object-fit: contain;
}

.ellispsiss {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellispsissm {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 992px) {
  #nav-extend {
    display: none !important;
  }
}

@media (min-width: 300px) and (max-width: 640px) {
  .slick-nav > div {
    height: 100% !important;
  }

  .slick-track {
    height: 100% !important;
  }

  .draggable {
    height: 100% !important;
  }

  .progress {
    width: 4px;
    height: 70px;
    background: #e0e0e0;
  }
}

@media (min-width: 300px) and (max-width: 992px) {
  .progress {
    width: 4px;
    height: 70px;
    background: #e0e0e0;
  }
}