@layer base {
    * {
        scrollbar-width: thin;
    }
    body {
        @apply font-base dark:bg-bodybg bg-bgcolor selection:bg-primary selection:text-white;
    }
    .page-wraper {
        @apply dark:bg-bodybg bg-bgcolor;
    }
    section {
        @apply relative;
    }
    h1, .h1, h2, .h2, h3, .h3 {
        @apply font-(weight:--font-heading-weight) dark:text-white [text-transform:var(--font-heading-transform)] text-heading font-heading;
    }
    h4, .h4, h5, .h5, h6, .h6 {
        @apply font-(weight:--font-heading-weight) dark:text-white [text-transform:var(--font-heading-transform)] text-heading font-heading;
    }
    p {
        @apply  dark:text-bodytext text-textlight font-normal;
    }
    /* .dark p {
        @apply text-textlight;
    } */
    .noice-overlay {
        @apply relative z-1 after:content-[''] after:absolute after:top-0 after:left-0 after:size-full after:bg-repeat after:bg-[100%] after:bg-noise after:-z-2 after:pointer-events-none;
    }
    .light .text-primary {
        color: var(--text-primary)!important;
    }
    h1 {
      @apply sm:text-5xl text-3xl leading-[1.3];
    }
    h2 {
      @apply sm:text-4xl text-2xxl leading-[1.3];
    }
    h3 {
      @apply sm:text-3xl text-2xl leading-[1.3];
    }
    h4 {
      font-size: var(--text-2xl);
    }
    h5 {
      font-size: var(--text-xl);
    }
    h6 {
      font-size: var(--text-lg);
    }
}
@layer utilities {
    .content-counter::after {
      content: "0" counter(counter-item);
    }
  }
a{
    @apply duration-500;
}


textarea ,
input {
  @apply outline-0 outline-none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

.theme-btn .active {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 40px;
  height: 40px;
  background: #ffffff;
  border-radius: 50px;
  z-index: 1;
  transition: 0.5s;
}
html.dark .theme-btn {
  @apply bg-white;
}
html.light .theme-btn {
  @apply bg-secondary;
}
html.light .theme-btn .active {
  @apply bg-white left-1/2;
}
html.dark .theme-btn .active {
  left: 11%;
  background: var(--color-dark);
}

/* POINTER */
#pointer-ring {
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: block;
  border: 1px solid var(--primary) !important;
  position: fixed;
  border-radius: 100px;
  z-index: 999999;
  pointer-events: none;
  transition: width 0.3s, height 0.3s;
}
#pointer-ring.active {
  width: 60px;
  height: 60px;
  opacity: 0.5;
  background-color: rgba(255,255,255,0.2);
  border: 0 !important;
}
.link-hover {
  @apply relative hover:after:w-full hover:after:left-0 hover:after:right-auto;
}
.link-hover::after {
  @apply content-[''] absolute h-1 bg-primary bottom-0 right-0 w-0 duration-500 ;
}

.svg-currentcolor path {
  stroke: currentColor;
}
.stackCard2 ,
.stackCard {
  transform-origin: 50% -115%;
}
#videoContainer iframe,
#videoContainer video {
    width: 100%;
    height: 676px;
    border: none;
    border-radius: 8px;
}

.anime-row .num-circle {
  transition: .3s all;
}
.anime-row.active .num-circle {
  background-color: var(--primary);
  color: #000;
}
/* Scroll Top */
#scrollProgress.active {
  opacity: 1;
  pointer-events: auto;
}

.dzSubscribeMsg .alert-success ,
.dzFormMsg .alert-success {
  @apply text-green-900 bg-green-200 p-20 mb-10;
}
