/* hero-name */
.hero-name {
  font-weight: 800;
  transform: scaleY(1.5);
  text-align: center;
  text-wrap-mode: nowrap;
  overflow: hidden;
}
/* hero-name */
/*
*/
/*
*/
/* wrapper */
.wrapper,
.wide-wrapper {
  margin-inline: auto;
  width: 100%;
  max-width: 1536px;
  padding-inline: 1rem;
}

@media (width >= 768px) {
  .wrapper {
    padding-inline: 2rem;
  }
}

@media (width >= 1024px) {
  .wrapper {
    padding-inline: 4rem;
  }
}

@media (width >= 1536px) {
  .wrapper {
    padding-inline: 6rem;
  }
}
/* wrapper */
/*
*/
/*
*/
/* fill-text */
.fill-text,
.client-fill-text {
  position: relative;
  display: inline;
  color: var(--text-primary);
  -webkit-text-fill-color: rgb(0 0 0 / 20%);
  background-clip: "text";
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 100%;
  will-change: background-size;
}

.dark .fill-text,
.dark .client-fill-text {
  -webkit-text-fill-color: rgb(255 255 255 / 20%);
}
/* fill-text */
/*
*/
/*
*/
/* overlay */
.overlay {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 0, 0, 1) 65%
  );
}
/* overlay */
/*
*/
/*
*/
/* sub-text */
.sub-text {
  transform: translateY(100%);
  animation-delay: 500ms;
}
/* sub-text */
/*
*/
/*
*/
/* separator */
.separator {
  transform: scaleX(0);
  border: 1px solid var(--text-primary);
}
/* separator */
/*
*/
/*
*/
/* titles */
.section-title {
  margin-bottom: 12rem;
}
.section-title span {
  text-transform: uppercase;
  position: relative;
  padding-left: 22px;
  margin-bottom: 32px;
  display: block;
  color: var(--text-primary);
  width: fit-content;
  font-size: 1.25rem;
  font-family: var(--poppins);
}
.section-title span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-color: var(--text-primary);
  border-radius: 50%;
}
.section-title h1 {
  font-size: clamp(90px, 12vw, 12vw);
  line-height: clamp(80px, 9.5vw, 9.5vw);
  font-weight: 600;
  letter-spacing: -0.025rem;
}

.about-content-title {
  font-size: 3.75rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-align: center;
  line-height: 1;
}

@media (width >= 1024px) {
  .about-content-title {
    font-size: 4.5rem;
    text-align: start;
  }
}

@media (width >= 1536px) {
  .about-content-title {
    font-size: 6rem;
  }
}
/* titles */
/*
*/
/*
*/
/* about-content */
.about-content {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 4rem;
}

@media (width >= 1024px) {
  .about-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8rem;
  }
}
/* about-content */
/*
*/
/*
*/
/* buttons */
.button-outline,
.button-primary {
  height: 5rem;
  padding-inline: 2rem;
  transition: var(--duration);
  border-radius: 200px;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 4px;
}

.button-primary {
  background-color: var(--bg-primary-inverse);
  color: var(--text-primary-inverse);
}

.button-primary svg {
  stroke: var(--text-primary-inverse);
}

.button-outline {
  color: var(--text-primary);
  border: 2px solid var(--bg-primary-inverse);
  stroke: var(--text-primary);
}

.button-outline:hover {
  background-color: var(--bg-primary-inverse);
  color: var(--text-primary-inverse);
  stroke: var(--text-primary-inverse);
}

.service-button:hover svg {
  transform: rotate(90deg);
}

/* buttons */
/*
*/
/*
*/
/* arrow */
.arrow,
.client-arrow {
  display: none;
}
@media (width >= 1024px) {
  .arrow,
  .client-arrow {
    display: flex;
    justify-items: center;
    align-items: center;
  }
}
.arrow img,
.client-arrow img {
  opacity: 0.2;
}
.dark .arrow img,
.dark .client-arrow img {
  opacity: 0.1;
}
.arrow.left img,
.client-arrow img {
  transform: rotate(45deg);
}
.arrow.right img {
  transform: rotate(-45deg);
}
.arrow img,
.client-arrow img {
  width: 80px;
  height: 80px;
}
.arrow img:first-child,
.client-arrow img:first-child {
  display: none;
}
.dark .arrow img:first-child,
.dark .client-arrow img:first-child {
  display: inline;
}
.dark .arrow img:last-child,
.dark .client-arrow img:last-child {
  display: none;
}
/* arrow */
/*
*/
/*
*/
/* count-title */
.count-title {
  transition: var(--duration);
  display: none;
  opacity: 0.5;
  color: var(--text-primary);
}

.group:has(.count-title):hover .count-title {
  opacity: 1;
}

.count-title.active {
  opacity: 1;
}
@media (width >= 1024px) {
  .count-title {
    display: flex;
    justify-items: center;
    align-items: center;
  }
}
/* count-title */
/*
*/
/*
*/
/* circular-text */
text {
  font-family: var(--font-saira);
  letter-spacing: 6px;
  font-variant-ligatures: none;
  animation: rotate 25s linear infinite;
  transform-origin: center center;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.textcircle {
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
  transform-origin: center center;
}
/* circular-text */
/*
*/
/*
*/
/* slider */
@keyframes scrollX {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.animate-scroll {
  animation: scrollX linear infinite;
}

@keyframes scrollXReversed {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.animate-scroll-reverse {
  animation: scrollXReversed linear infinite;
}
/* slider */
/*
/*
*/
/* preloader */
.preloader {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
.preloader span {
  font-size: clamp(50px, 9vw, 9vw);
  font-family: var(--font-saira);
  text-transform: uppercase;
  letter-spacing: 5px;
  mix-blend-mode: difference;
}
.preloader::before {
  content: "";
  width: 100px;
  height: 100%;
  background-color: white;
  position: absolute;
  left: 0;
  top: 0;
  animation: left-to-right 2s infinite alternate linear;
}
@keyframes left-to-right {
  to {
    left: calc(100% - 100px);
  }
}
/* preloader */