html,
body {
  padding: 0;
  margin: 0;
  background: #fff;
  color: #444;
  font-family: var(--default-font);
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 150%;
  height: 100%;
}

@media (min-width: 1024px) {
  html,
  body {
    font-size: 16px;
  }
}

.noUi-tooltip {
  font-size: 0.5rem !important;
}

.pagination-button-disabled {
  border: 1px solid #b8c0cc !important;
  color: #a0abbb !important;
}

.pagination-button-active {
  border: 1px solid #b8c0cc !important;
  background-color: #3056d3 !important;
  color: white !important;
}

.stop-scrolling {
  height: 100% !important;

  overflow: hidden !important;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

textarea:focus,
input:focus {
  outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.custom-scroll::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color: #a0abbb;
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

.rc-tooltip {
  z-index: 9999;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.force-scrollbar::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

.force-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

.select {
  /** for the dropdown indicator */
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
}

h1 {
  font-size: 24px;
  font-weight: 700;
}

h2 {
  font-size: 20px;
  font-weight: 600;
}

h3 {
  font-size: 18px;
  font-weight: 600;
}

h4 {
  font-size: 16px;
  font-weight: 600;
}

#bannerdiv .swiper-slide {
  width: 100% !important;
}

.swiper:not(.swiper-auto-width) .swiper-slide {
  width: auto !important;
}

.swiper-slide.checkout-coupons {
  width: 100% !important;
}

.swiper-slide:not(.swiper-slide-active) {
  margin-top: 0 !important;
}

.swiper-wrapper {
  display: flex;
  align-items: flex-start;
}

.swiper-container {
  overflow: hidden;
}

@keyframes shimmer {
  0% {
    background-color: white;
  }

  100% {
    background-color: #ebf1f9;
  }
}

.collection-slick-slider.slick-slider.center.slick-initialized .slick-list {
  padding: 0 !important;
}

.collection-slick-slider .slick-slide {
  width: 11rem !important;
}

.collection-slick-slider .slick-slide > div {
  padding: 8px 0;
}

.collection-slick-slider .slick-arrow {
  display: none !important;
}

.collection-slick-slider .slick-list .slick-track {
  width: 880px !important;
}

.shimmer-animation {
  animation: shimmer 0.5s linear infinite alternate;
}

.initial-child-container {
  align-items: center;
}

.selected-filter::before {
  content: '';
  background: #3056d3;
  display: flex;
  position: absolute;
  width: 3px;
  top: 0;
  height: 66px;
  left: 0;
}

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

@layer components {
  .container-align {
    @apply container max-w-[1280px] px-4 md:px-14 lg:px-12;
  }
}

@keyframes moveUp {
  0% {
    bottom: 0;
  }
  100% {
    bottom: 4rem;
  }
}

.animate-move-up {
  animation: moveUp 2s ease forwards;
}

.pdp-image-slider.swiper:not(.swiper-auto-width) .swiper-slide {
  width: inherit !important;
}

:root {
  --angle: 45deg;
  --opacity: 0.5;
}

@property --opacity {
  syntax: '<number>';
  initial-value: 0.5;
  inherits: false;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes opacityChange {
  to {
    --opacity: 1;
  }
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

.moving-border-outer {
  box-shadow: 0.84px 0 16.88px 0 #00d19233;
  background: conic-gradient(
    from var(--angle) at 50% 50%,
    #fff 0deg,
    #06ca8d 360deg
  );
  height: 32px;
  width: 56px;
  position: absolute;
  inset: 2px;
  border-radius: 4px;
  animation: rotate 1s ease-in infinite, opacityChange 3s infinite alternate;
}

.moving-border-inner {
  box-shadow: 0.84px 0 16.88px 0 #00d19233;
  position: absolute;
  inset: 4px;
  border-radius: 4px;
  background: linear-gradient(82.26deg, #0a845e -4.64%, #023525 253.64%);
}

.moving-border-outer-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  pointer-events: none;
  background: conic-gradient(
    from var(--angle) at 50% 50%,
    #bfd4ff 0deg,
    #e5efff 120deg,
    #2f63d9 240deg,
    #7fa9ff 360deg
  );
  animation: rotate 1s linear infinite;
  padding: 2.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.moving-border-inner-box {
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  z-index: 10;
  background: linear-gradient(180deg, #e8f0ff 0%, #f3f7ff 100%);
}

@keyframes rotateText {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-100%);
  }
  45% {
    transform: translateY(-100%);
  }
  50% {
    transform: translateY(-200%);
  }
  70% {
    transform: translateY(-200%);
  }
  75% {
    transform: translateY(-300%);
  }
  95% {
    transform: translateY(-300%);
  }
  100% {
    transform: translateY(-400%);
  }
}

.animate-rotate-text {
  animation: rotateText 8s infinite;
}

.bulletdiv .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  opacity: 1;
  border-radius: 9999px;
  margin-right: 6px;
  transition: all 0.2s ease;
  background: #adafb1;
}

.bulletdiv .swiper-pagination-bullet-active {
  width: 18px;
  height: 6px;
  background: #7f8fd4;
}
.inner-curve {
  --r: 0.63rem; /* control the rounded part */
  --s: 0.81rem; /* control the size of the cut */
  --a: 47deg; /* control the depth of the curvature */
  --p: 50%; /* control the position */
  height: 8rem;
  width: 49%;
  aspect-ratio: 2/3;
  background: linear-gradient(89.17deg, #415dbb 0.21%, #1d2a55 132.85%);
  border-radius: var(--r);
  --_m: , #000 calc(100% - 1px), #0000;
  --_r: var(--r) at calc(100% - var(--r));
  --_d: (var(--s) + var(--r)) * cos(var(--a));
  mask: radial-gradient(var(--_r) calc(var(--p) + var(--_d)) var(--_m)),
    radial-gradient(var(--_r) calc(var(--p) - var(--_d)) var(--_m)),
    radial-gradient(
        var(--s) at calc(100% + sin(var(--a)) * var(--s)) var(--p),
        #0000 100%,
        #000 calc(100% + 1px)
      )
      calc(var(--r) * (sin(var(--a)) - 1)) 0 no-repeat,
    linear-gradient(
      #000 calc(var(--p) - var(--_d)),
      #0000 0 calc(var(--p) + var(--_d)),
      #000 0
    );
}

.outer-curve {
  width: 49%;
  height: 8rem;
  background: #8095db1a;
  clip-path: polygon(
    4.734% 0.521%,
    95.266% 0.521%,
    95.266% 0.521%,
    95.986% 0.623%,
    96.669% 0.919%,
    97.306% 1.393%,
    97.887% 2.028%,
    98.404% 2.809%,
    98.848% 3.719%,
    99.209% 4.743%,
    99.478% 5.864%,
    99.646% 7.066%,
    99.704% 8.333%,
    99.704% 91.667%,
    99.704% 91.667%,
    99.646% 92.934%,
    99.478% 94.136%,
    99.209% 95.257%,
    98.848% 96.281%,
    98.404% 97.191%,
    97.887% 97.972%,
    97.306% 98.607%,
    96.669% 99.081%,
    95.986% 99.377%,
    95.266% 99.479%,
    4.734% 99.479%,
    4.734% 99.479%,
    4.014% 99.377%,
    3.331% 99.081%,
    2.694% 98.607%,
    2.113% 97.972%,
    1.596% 97.191%,
    1.152% 96.281%,
    0.791% 95.257%,
    0.522% 94.136%,
    0.354% 92.934%,
    0.296% 91.667%,
    0.296% 67.44%,
    0.296% 67.44%,
    0.317% 66.542%,
    0.379% 65.657%,
    0.482% 64.787%,
    0.625% 63.939%,
    0.805% 63.114%,
    1.023% 62.318%,
    1.278% 61.555%,
    1.568% 60.828%,
    1.892% 60.142%,
    2.25% 59.501%,
    2.25% 59.501%,
    3.007% 58.027%,
    3.599% 56.401%,
    4.028% 54.659%,
    4.291% 52.838%,
    4.389% 50.976%,
    4.322% 49.11%,
    4.089% 47.277%,
    3.689% 45.513%,
    3.124% 43.857%,
    2.391% 42.345%,
    2.198% 42.006%,
    2.198% 42.006%,
    1.849% 41.345%,
    1.532% 40.642%,
    1.25% 39.9%,
    1.002% 39.124%,
    0.79% 38.317%,
    0.615% 37.483%,
    0.477% 36.627%,
    0.377% 35.752%,
    0.316% 34.861%,
    0.296% 33.959%,
    0.296% 8.333%,
    0.296% 8.333%,
    0.354% 7.066%,
    0.522% 5.864%,
    0.791% 4.743%,
    1.152% 3.719%,
    1.596% 2.809%,
    2.113% 2.028%,
    2.694% 1.393%,
    3.331% 0.919%,
    4.014% 0.623%,
    4.734% 0.521%
  );
}