.text-char {
    display: block;
    position: absolute;
    top: 0;
    left: calc(50% - 180px / 2);
    height: calc(180px / 2);
    width: 180px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 16px;
    transform-origin: bottom center;
    transform: rotate(var(--char-rotate));
    color: var(--color-secondary);
    padding-top: 8px;
  }
.steps {
  position: absolute;
  width: 100%;
  height: 100%;
} 
.text__char {
    display: block;
    position: absolute;
    top: 0;
    left: calc(50% - 180px / 2);
    height: calc(180px / 2);
    width: 180px;
    font-weight: 400;
    font-size: 16px;
    transform-origin: bottom center;
    transform: rotate(var(--char-rotate));
    color: var(--color-dark);
    padding-top: 8px;
    text-transform: uppercase;
  }
.light .word-rotate-box.style-1 .text-char {
  color: var(--color-secondary);
}
.word-rotate-box.style-1 .text-char {
    display: block;
    position: absolute;
    top: 0px;
    left: calc(50% - 100px);
    height: calc(100px);
    width: 200px;
    font-weight: 400;
    font-size: 18px;
    transform-origin: center bottom;
    transform: rotate(var(--char-rotate));
    color: var(--color-white);
    padding-top: 8px;
    text-transform: none;
}

.letter {
  opacity: 0.1;
  display: inline-block;
}
.dark .pxl-heading-scroll-effect {
  --heading-color-1: rgba(255, 255, 255, 0.2);
}
.light .pxl-heading-scroll-effect {
  --heading-color-1: rgba(0, 0, 0, 0.2);
}
.pxl-heading-scroll-effect .heading-text div {
  background-clip: text;
  color: transparent;
  background: linear-gradient(to right, var(--pxl-heading) 50%, var(--heading-color-1) 50%) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 200% 100%;
  background-position-x: 100%;
  transition: background-size cubic-bezier(0.1, 0.5, 0.5, 1) 0.75s;
}
.dark .pxl-heading-scroll-effect .heading-text div {
  --pxl-heading: white;
}
.light .pxl-heading-scroll-effect .heading-text div {
  --pxl-heading: black;
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.arrow.rotate {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}
.gl-star-rating--stars span {
  --gl-star-size: 20px;
}

.word-box {
  display: inline-block;
  white-space: nowrap;
}
#videoContainer iframe {
  @apply max-md:h-400;
}

/* Card Active */
.info-card.hover-active.active {
  @apply bg-card;
}
.info-card.hover-active.active .content{
  @apply border-white/30;
}
.info-card.hover-active.active .content p,
.info-card.hover-active.active span {
  @apply text-white;
}
.fancybox.hover-active.active {
  @apply dark:bg-[#0E0E0E] bg-secondary before:bg-[url('../images/background/bg4-light.svg')];
}
.fancybox.hover-active.active h4,
.fancybox.hover-active.active h5 {
  @apply text-white;
}
.fancybox.hover-active.active:before {
  @apply rotate-360;
}
.headline {
  opacity: 0;
  will-change: opacity, transform;
}
.line-mask {
  display: block;
  overflow: hidden;
}

.line {
  display: inline-block;
}
.typewrite .pxl-item--text:not(.is-active) {
  @apply animate-wordRotateOut left-1/2 top-1/2;
  transform: translate(-50%, -50%)
}
.typewrite .pxl-item--text.is-active {
  @apply animate-wordRotateIn relative opacity-100;
}


.dz-hover-item {
  position: relative;
}
 
.dz-hover-img canvas {
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  position: absolute;
}
 
.dz-hover-img.right canvas {
  right: 0;
  left: auto;
}

.banner-tabs .tab-title.active{
  @apply dark:text-white text-black;
}

.banner-subtitle .line{
	@apply max-xl:!text-center;
}

.pxl-animated {
  animation-duration: var(--pxl-animation-duration, 1.25s);
}
.pxl-border-animated.pxl-animated .pxl-border-anm {
  transform: scale(1)!important;
}
.pxl-border-animated .pxl-border-anm.bt {
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 0;
}
.pxl-border-anm.bw-yes {
  border-width: var(--bd-width);
}
.pxl-border-animated .pxl-border-anm {
  position: absolute;
  transition: transform 1.5s cubic-bezier(.77,0,.175,1);
}
.pxl-border-animated .pxl-border-anm.br {
  top: 0;
  right: 0;
  transform: scaleY(0);
  transform-origin: 100% 0;
}
.pxl-border-animated .pxl-border-anm.bb {
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: 0 100%;
}
.pxl-border-animated .pxl-border-anm.bl {
  top: 0;
  left: 0;
  transform: scaleY(0);
  transform-origin: 0 0;
}

.service-card-box.active .number {
  @apply text-primary;
}
.circle .step.active {
  @apply !bg-primary !text-white scale-180;
}

.tags-area .tags-wrapper {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    margin-top: -300px;
    height: 400px;
}
.tags-area .tags-wrapper > * {
    position: absolute;
    display: inline-block;
    margin-bottom: 0;
    left: 0;
    top: 0;
    user-select: none;
    pointer-events: auto;
    transition: none;
}
.tags-area .tags-box {
    height: 54px;
    padding: 10px 20px;
    background-color: white;
    display: inline-flex;
    font-size: 1.25rem;
    font-weight: 500;
    color: #1a1a1a;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    transform: translate(-50%, -50%) rotate(0rad);
}

.text-highlight {
  @apply bg-gradient-to-r from-[#2DA7FF] to-[#45D675] bg-[264.53deg] text-transparent bg-clip-text relative after:content-[''] after:absolute after:left-0 after:bottom-3 after:w-full after:h-1 after:bg-gradient-to-r after:from-[#2DA7FF] after:to-[#45D675];
}


.blog-content p{
  @apply xl:text-2xl sm:text-xl text-lg font-light sm:mb-30 mb-10;
}
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6{
  @apply mb-10;
}
.blog-content li p{
  @apply mb-0;
}
 
.post-swiper {
  @apply before:absolute before:left-0 before:pointer-events-none before:right-0 before:bottom-0 before:h-200 before:z-2 before:bg-gradient-to-b before:from-transparent before:to-black before:opacity-50;
}
.post-swiper .swiper-pagination-bullet {
  @apply size-10 bg-white;
}
.light .footer-style-2 h4 {
  color: #fff !important;
}
.light .footer-style-2 ul li a:not(:hover) {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* biram */
.style-2 .text-char {
    @apply block absolute transform-none top-0 left-1/2 h-[calc(155px_/_2)] w-0 font-medium text-sm origin-[bottom_center] rotate-[var(--char-rotate)] text-secondary  pt-8 uppercase;
}
.skrollable .counter {
	@apply absolute top-1/2 left-1/2 -translate-1/2 text-secondary text-6xl font-extrabold uppercase;
}
.style-3 .text-char{
	@apply text-white;
}
.icon-full svg {
  @apply size-full;
}

.service-slider-card:hover .icon-full svg path {
  fill : var(--primary);
}

.footer-style-6 .widget h4 {
  @apply !text-white;
}