@font-face {
  font-family: 'OpenSauceSans';
  src: url('/src/assets/font/OpenSauceSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'OpenSauceSans';
  src: url('/src/assets/font/OpenSauceSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'OpenSauceSans';
  src: url('/src/assets/font/OpenSauceSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,500&display=swap');


:root {
  --font-family: "OpenSauceSans", sans-serif;
  --font-family-2: "Inter", sans-serif;
  --black: #000000;
  --black-9: rgba(0,0,0,0.9);
  --black-8: rgba(0,0,0,0.8);
  --black-7: rgba(0,0,0,0.7);
  --black-6: rgba(0,0,0,0.6);
  --black-5: rgba(0,0,0,0.5);
  --black-4: rgba(0,0,0,0.4);
  --black-3: rgba(0,0,0,0.3);
  --black-2: rgba(0,0,0,0.2);
  --black-1: rgba(0,0,0,0.1);
  --white: #DEE5E3;
  --white-9: rgba(220, 229, 224, 0.9);
  --white-8: rgba(220, 229, 224, 0.8);
  --white-7: rgba(220, 229, 224, 0.7);
  --white-6: rgba(220, 229, 224, 0.6);
  --white-5: rgba(220, 229, 224, 0.5);
  --white-4: rgba(220, 229, 224, 0.4);
  --white-3: rgba(220, 229, 224, 0.3);
  --white-2: rgba(220, 229, 224, 0.2);
  --white-1: rgba(220, 229, 224, 0.1);
  --btn-radius: 100px;
  --bg-transition-fade: all 1.5s ease;
  --border-radius: 2rem;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-rendering: geometricPrecision; 
}
html,
body {
  height: 100%;
  scroll-behavior: smooth;

}
body {
  font-family: var(--font-family);
  background-color: var(--white);
  transition: background-color 1.5s ease;
  position: relative;
  overflow-x: hidden;
}


.inter {
  font-family: var(--font-family-2) !important;
}
.divider {
  width: 100%;
  padding: 0 4rem;
}
.divider .line {
  background-color: pink;
  max-width: 1600px;
  width: 100%;
  height: 1px;
  margin: auto;
  position: relative;
  padding: 0 4rem;
}
.color-dark .divider .line {
  background-color: var(--white-1);
}
.color-light .divider .line {
  background-color: var(--black-1);
}

.trusted {
  width: 100%;
}
.trusted .slider {
  position: relative;
  margin-top: 2rem;
}
.trusted .slider .cards {
  width: 100%;
  display: flex;
  gap: 1rem;
  overflow: hidden;
}
.trusted .slider .cards .card {
  height: 80px;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  animation: scroll 210s linear infinite;
  z-index: 1;
}
.trusted .slider .overlay {
  width: 200px;
  height: 100px;
  z-index: 2;
  position: absolute;
}
.color-light .trusted .slider .overlay {
  background: linear-gradient(90deg, var(--white) 0%, var(--white-1) 100%);
  transition: var(--bg-transition-fade);
}
.color-dark .trusted .slider .overlay {
  background: linear-gradient(90deg, var(--black) 0%, var(--black-1) 100%);
  transition: var(--bg-transition-fade);
}
.trusted .slider .overlay.right {
  rotate: 180deg;
  right: 0;
  top: 0;
}

@keyframes scroll {
  0% {transform: translateX(0);}
  20% {transform: translatex(-1000%)}
}





a, a:hover { text-decoration: none; }
a:hover { cursor: pointer !important; }
a { cursor: pointer;}
canvas {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  z-index: 1;
  bottom: -20%;
}
ul, li { list-style: none; }


.radius { border-radius: var(--btn-radius); }
.radius-20 { border-radius: 20px; }
.radius-40 { border-radius: 40px; }




.sticky-container { 
  height: 3000px !important;
}
.vertical-section{
  height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
}
main.hr-scroll {
  overflow-x: hidden;
  display: flex;
  position: sticky;
  top:0;
}
main.hr-scroll section {
  min-height: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4ch;
  margin: 10rem 4rem;
}

.content.visible {
  display: flex;
  flex-direction: row;
}



/* Swiper */

.swiper-pagination-bullets {
  display: none !important
}
.work .card h4 a {
  color: var(--white) !important;
}
.work .card img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/12;
  object-fit: cover;
  border-radius: var(--border-radius);
  background-color: lightgray;
}
.work .card:nth-child(2),
.work .card:nth-child(4) {
  margin-top: 8rem;
}

.work .cards {
  display: grid;
  display: grid;
  gap: 0 4rem ;
  grid-template-columns: repeat(2, 1fr);
  flex-direction: row;
  flex-wrap: wrap;
}
@media only screen and (max-width: 1080px) {
  .work .cards {
    display: grid;
    display: grid;
    gap: 4rem ;
    grid-template-columns: repeat(1, 1fr);
    flex-direction: row;
    flex-wrap: wrap;
  }
  .work .cards .card {
    margin-top: 2rem;
  }
}

.work .card .image-tilt { 
  position: relative;
}
.work .card .image-tilt .tags {
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  padding: 1.4rem;
}
.work .card .image-tilt .tags ul {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.work .card .image-tilt .tags ul li {
  padding: 0.4rem 0.8rem;
  border-radius: var(--borderRadiusC);
  font-size: 0.8rem;
}
/* .work .card .image-tilt .tags ul.dark li{
  background-color: var(--black-1);
  backdrop-filter: blur(10px);
  color: var(--black);
} */
.work .card .image-tilt .tags ul.light li{
  background-color: var(--black-5);
  backdrop-filter: blur(10px);
  color: var(--white);
}
.work .card .image-tilt video {
  pointer-events: unset;
}
.work .card .image-tilt video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/12;
  object-fit: cover;
  border-radius: var(--border-radius);
  background-color: lightgray;
}
.viewAllWork a:hover .our-work-rotate {
  scale: 1.2;
  transform:rotate(-360deg);
  transition: transform 8s linear, scale 1s ease;
}
.viewAllWork a:hover .our-work-rotate .base {
  opacity: 1;
}
.viewAllWork a:hover .our-work-rotate .base {
  opacity: 1;
}
.viewAllWork a .symbol {
  position: absolute;
  left: 0;
}
.viewAllWork a {
  position: relative;
}
.viewAllWork a .symbol .inner {
  scale: 0;
  transform-origin: center center;
}
.viewAllWork a:hover .symbol .inner {
  opacity: 1;
  scale: 1;
  rotate: 360deg;
  transform-origin: center center;
}

.color-light .viewAllWork svg .fill {
  fill: var(--black);
}
.color-dark .viewAllWork svg .fill {
  fill: var(--white);
}
.color-light .viewAllWork svg .fill.invert {
  fill: var(--white);
}
.color-dark .viewAllWork svg .fill.invert {
  fill: var(--black);
}
.color-light .viewAllWork svg .stroke {
  stroke: var(--black);
}
.color-dark .viewAllWork svg .stroke {
  stroke: var(--white);
}

a.h4-link:hover {
  color: #fff !important;
}
.h4-link .underline {
  width: calc(100%);
  background-image: linear-gradient(transparent calc(100% - 2px), white 2px);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 1s;
}
.h4-link:hover .underline {
  background-size: 100% 100%;
}




.flex { display: flex; }
.f-wrap { flex-wrap: wrap;}
.f-column {flex-direction: column;}
.f-row {flex-direction: row;}
.f-align-center { align-items: center; }

.t-center { text-align: center; }
.t-left { text-align: left; }
.t-right { text-align: right; }

.thin { font-weight: 300; }
.regular { font-weight: 400; }
.medium { font-weight: 500; }
.semibold { font-weight: 600; }
.bold { font-weight: 700; }

.g-1 { gap: 1rem; }
.g-2 { gap: 2rem; }
.g-3 { gap: 3rem; }
.g-4 { gap: 4rem; }
.g-5 { gap: 5rem; }
.g-6 { gap: 6rem; }
.g-7 { gap: 7rem; }
.g-8 { gap: 8rem; }

.opacity-1 { opacity: 1;}
.opacity-09 { opacity: 0.9; }
.opacity-08 { opacity: 0.8; }
.opacity-07 { opacity: 0.7; }
.opacity-06 { opacity: 0.6; }
.opacity-05 { opacity: 0.5; }

.space-between { justify-content: space-between; }
.align-center { align-items: center; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.absolute { position: absolute; }
.z-100 {
  z-index: 100;
}
/*
.fade {
  transform: translateY(-80px);
  opacity: 0;
  transition: transform 2s ease;
}
.fade.in {
  transform: translateY(0);
  opacity: 1;
  transition: transform 2s ease;
}
.fade.in.delay-1 { transition-delay: 200ms; }
.fade.in.delay-2 { transition-delay: 300ms; }
.fade.in.delay-3 { transition-delay: 400ms; }
.fade.in.delay-4 { transition-delay: 500ms; }
.fade.in.delay-5 { transition-delay: 600ms; }
*/

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;

}
.scrolling-wrapper .card {
  display: inline-block;
}

.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.scrolling-wrapper-flexbox .card {
  flex: 0 0 auto;
}
.scrolling-wrapper {
  -webkit-overflow-scrolling: touch;
}
.scrolling-wrapper, .scrolling-wrapper::-webkit-scrollbar {
    display: none;
}




.color-dark ::selection {
  background-color: var(--white);
  color: var(--black);
}
.color-light ::selection {
  background-color: var(--black);
  color: var(--white);
}

::-webkit-scrollbar { width: 4px;}
::-webkit-scrollbar-track { background: var(--black);}
::-webkit-scrollbar-thumb { background: var(--white); border-radius: 4px; }

.navigation a.Logo {
  display: flex;
  height: 32px;
  align-items: center;
  gap: 4px;
}
.navigation .logoName {transition: all 400ms ease;}
.navigation .logoName.hidden {
  transform: translateX(-40px);
  opacity: 0;
  transition: all 400ms ease;
}
.navigation .logoSymbol {transition: all 400ms ease;}
.navigation .logoSymbol.scale {
  transform: scale(1.5);
  transition: all 400ms ease;
  rotate: 180deg;
}
.top-bar {
  position: absolute;
  z-index: 9999;
  width: 100%;
  padding-top: 4.38rem;
  padding-bottom: 2rem;
  transition: all 800ms ease;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
@media only screen and (max-width:560px) {
  .top-bar { padding: 2rem 0;}
  .servicesBlocks .card .logoSymbol { right: 2rem; }
  .servicesBlocks .card .icon {
    width: 80px;
    height: 80px;
    transform-origin: top left;
    transform: scale(0.6);
  }
  .servicesBlocks .column { gap: 1rem; }
  .gradientBlur { 
    /* display: none; */
  }
}
.top-bar.fixed {
  position: fixed;
}
.color-dark .top-bar {
  background: var(--black-7) !important;
  transition: var(--bg-transition-fade);
}
.color-light .top-bar {
  background: var(--white-7) !important;
  transition: var(--bg-transition-fade);
}
.color-light .top-bar .navigation .right a {
  color: var(--black);
  transition: var(--bg-transition-fade);
}
.color-light .top-bar .left svg path {
  fill: var(--black);
  transition: var(--bg-transition-fade);
}
.top-bar.panel {
  min-height: unset;
}
.top-bar.move-in {
  transition: all 1s ease;
  transform: translateY(0px);
}
.top-bar.move-out {
  transition: all 1s ease;
  transform: translateY(-100px);
}
.top-bar.compact {
  padding: 1.5rem 0;
  transition: all 800ms ease;
  /*border-bottom: 1px solid;*/
}
.color-dark .top-bar.compact {
  border-color: var(--white-1);
  transition: var(--bg-transition-fade);
}
.color-light .top-bar.compact {
  border-color: var(--black-1);
  transition: var(--bg-transition-fade);
}
.top-bar .content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-between;
  padding: 0 4rem;
}
@media only screen and (max-width:560px) {
  .top-bar .content { padding: 0 2rem; }
}
.top-bar .left {
  display: inline-block;
}

.top-bar .navigation .right ul.mobile {
  display: none;
}
@media only screen and (max-width: 1080px) {
  .top-bar .navigation .right ul.desktop {
    display: none;
  }
  .top-bar .navigation .right ul.mobile {
    display: block;
  }
}
.top-bar .navigation .right ul {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3rem;
  width: 100%;
}
.top-bar .navigation .right ul li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.top-bar .navigation .right ul li a {
  color: var(--white);
  font-family: var(--font-family);
  font-size: 1.3125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.25rem;
  position: relative;
  transition: color 800ms ease;
}
.top-bar .navigation .right ul li a::after {
  content: '';
  width: 0%;
  position: absolute;
  bottom: -1rem;
  opacity: 0.6;
  left: 0;
  height: 1px;
  transition: all 800ms ease;
}
.color-light .top-bar .navigation .right ul li a:hover {
  color: var(--black-7);
  transition: color 800ms ease;
}
.color-dark .top-bar .navigation .right ul li a:hover {
  color: var(--white-7);
  transition: color 800ms ease;
}
.color-dark .top-bar .navigation .right ul li a::after {
  background-color: var(--white);
}
.color-light .top-bar .navigation .right ul li a::after {
  background-color: var(--black);
}
.top-bar .navigation .right ul li a:hover::after {
  width: 100%;
  transition: all 800ms ease;
}
a.numbers {
  margin-right: 26px;
}
a.numbers span {
  border-radius: 100px;
  min-width: 26px;
  height: 26px;
  display: inline-block;
  font-size: 14px;
  line-height: 26px;
  text-align: center;
  margin-top: -4px;
  position: absolute;
  margin-left: 8px;
  padding: 0px 6px;
  transition: var(--bg-transition-fade);
}
a.numbers span {
  background: var(--white-1);
  color: var(--white);
  transition: var(--bg-transition-fade);
}
.numbers span {
  background: var(--black-1);
  color: var(--black);
  transition: var(--bg-transition-fade);
}
a.numbers:hover span {
  background: var(--white);
  color: var(--black);
  transition: var(--bg-transition-fade);
}
a.numbers:hover span {
  background: var(--black);
  color: var(--white);
  transition: var(--bg-transition-fade);
}
a.hand {
  display: inline-flex;
  margin-left: 35px;
}
a.hand span.wave {
  position: absolute;
  left: -35px;

  animation-name: wave-animation;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  transform-origin: 70% 70%;
  display: inline-block;
}
@keyframes wave-animation {
0% { transform: rotate( 0.0deg) }
10% { transform: rotate(14.0deg) }
20% { transform: rotate(-8.0deg) }
30% { transform: rotate(14.0deg) }
40% { transform: rotate(-4.0deg) }
50% { transform: rotate(10.0deg) }
60% { transform: rotate( 0.0deg) } 
100% { transform: rotate( 0.0deg) }
}
.header {
  display: flex;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width:560px) {
  .header .textGroup {
    margin-top: 6rem;
  }
}
.header .textGroup {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 65%;
}
.header .object {
  position: absolute;

  width: 100%;
  height: 100%;
}

.content {
  max-width: 1600px;
  width: 100%;
  margin: auto;
  position: relative;
  padding: 0 4rem;
}
@media only screen and (max-width: 1560px) {
  .content {
    padding: 0 8rem;
  }
}
@media only screen and (max-width: 1080px) {
  .content {
    padding: 0 4rem;
  }
}
@media only screen and (max-width: 560px) {
  .content {
    padding: 0 2rem;
  }
}
.content.fluid {
  max-width: 100%;
}
h1 {
  font-family: var(--font-family);
  font-size: 72px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -3px;
  display: inline-block;
  z-index: 2;
  position: relative;
  margin: 0;
}
h2 {
  font-family: var(--font-family);
  font-size: 72px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -3px;
  display: inline-block;
  z-index: 2;
  position: relative;
  margin: 0;
}
h3 {
  font-family: var(--font-family);
  font-size: 56px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -3px;
  display: inline-block;
  z-index: 2;
  position: relative;
  margin: 0;
}
h4 {
  font-family: var(--font-family);
  font-size: 44px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -1.4px;
  display: inline-block;
  z-index: 2;
  position: relative;
  margin: 0;
}
h5 {
  font-family: var(--font-family);
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -1px;
  display: inline-block;
  z-index: 2;
  position: relative;
  margin: 0;
}
p {
  color: #fff;
  font-family: var(--font-family);
  font-size: 1.3125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.25rem;
  z-index: 2;
  position: relative;
  opacity: 0.8;
  margin: 0;
}
p.large {
  font-size: 1.6rem;
  line-height: 2.5rem;
}
p.small {
  font-size: 1.2rem;
  line-height: 1.9rem;
}

@media only screen and (max-width: 1080px) {
  h1 {
    font-size: 72px;
    letter-spacing: -1.2px;
  }
  h2 {
    font-size: 52px;
    letter-spacing: -1.2px;
  }
  h3 {
    font-size: 44px;
    letter-spacing: -1.2px;
  }
  h4 {
    font-size: 36px;
    letter-spacing: -1.2px;
  }
  h5 {
    font-size: 24px;
    letter-spacing: -1.2px;
  }
}

@media only screen and (max-width: 560px) {
  h1 {
    font-size: 46px;
    letter-spacing: -1.2px;
  }
  h2 {
    font-size: 40px;
    letter-spacing: -1.2px;
  }
  h3 {
    font-size: 36px;
    letter-spacing: -1.2px;
  }
  h4 {
    font-size: 30px;
    letter-spacing: -1.2px;
  }
  h5 {
    font-size: 24px;
    letter-spacing: -1.2px;
  }
  p.large {
    font-size: 1rem;
    line-height: 2.0rem;
  }
  p.small {
    font-size: 0.8rem;
    line-height: 1.4rem;
  }
}

.panel {
  justify-content: space-around;
  align-items: center;
  font-family: sans-serif;
}
.panel-h {
  width: 100%;
  min-height: 100%;
  position: relative;
}
/* @media only screen and (max-width:560px) {
  min-height: auto;
} */
.color-light {
  background-color: var(--white);
  color: var(--black) !important;
}
.color-dark {
  background-color: var(--black);
  color: var(--white) !important;
}
.color-dark p {
  color: var(--white);
}
.color-light p {
  color: var(--black);
}


/* pre-defined transitions */

.ease { transition: ease; }
.ease-100 { transition: 100ms ease; }
.ease-200 { transition: 200ms ease; }
.ease-300 { transition: 300ms ease; }
.ease-400 { transition: 400ms ease; }
.ease-500 { transition: 500ms ease; }
.ease-600 { transition: 600ms ease; }
.ease-700 { transition: 700ms ease; }
.ease-800 { transition: 800ms ease; }
.ease-900 { transition: 900ms ease; }
.ease-1000 { transition: 1000ms ease; }
.a-border-color { transition-property: border-color;}
.a-color { transition-property: color;}
.a-1500ms { transition-duration: 1.5s; }


/* pre-defined paddings */

.p-20 { padding: 20rem 0; }
.p-18 { padding: 18rem 0; }
.p-16 { padding: 16rem 0; }
.p-14 { padding: 14rem 0; }
.p-12 { padding: 12rem 0; }
.p-10 { padding: 10rem 0; }
.p-8 { padding: 8rem 0; }
.p-6 { padding: 6rem 0; }
.p-4 { padding: 4rem 0; }

.p-top-12 { padding-top: 12rem; }
.p-top-10 { padding-top: 10rem; }
.p-top-8 { padding-top: 8rem; }
.p-top-6 { padding-top: 6rem; }
.p-top-4 { padding-top: 4rem; }
.p-top-2 { padding-top: 2rem; }
.p-top-1 { padding-top: 1rem; }

.p-bottom-12 { padding-bottom: 12rem; }
.p-bottom-10 { padding-bottom: 10rem; }
.p-bottom-8 { padding-bottom: 8rem; }
.p-bottom-6 { padding-bottom: 6rem; }
.p-bottom-4 { padding-bottom: 4rem; }
.p-bottom-2 { padding-bottom: 2rem; }
.p-bottom-1 { padding-bottom: 1rem; }

.m-top-12 { margin-top: 12rem; }
.m-top-10 { margin-top: 10rem; }
.m-top-8 { margin-top: 8rem; }
.m-top-6 { margin-top: 6rem; }
.m-top-4 { margin-top: 4rem; }
.m-top-3 { margin-top: 3rem; }
.m-top-2 { margin-top: 2rem; }
.m-top-1 { margin-top: 1rem; }
.m-top-05 { margin-top: 0.5rem; }

.m-bottom-12 { margin-bottom: 12rem; }
.m-bottom-10 { margin-bottom: 10rem; }
.m-bottom-8 { margin-bottom: 8rem; }
.m-bottom-6 { margin-bottom: 6rem; }
.m-bottom-4 { margin-bottom: 4rem; }
.m-bottom-2 { margin-bottom: 2rem; }
.m-bottom-1 { margin-bottom: 1rem; }

.servicesBlocks {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 950px) {
  .servicesBlocks {
    grid-template-columns: repeat(1, 1fr);
  }
}
.servicesBlocks .column {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.servicesBlocks .card {
  position: relative;
  border-radius: var(--border-radius);
  height: fit-content;
  padding: 3.75rem;
  overflow: hidden;
  border: 2px solid transparent;

  gap: 2.5rem;
  display: flex;
  align-items: start;
  flex-direction: column;

  cursor: pointer;
  transition: all 1s ease;
}

@media only screen and (max-width:560px) {
  .servicesBlocks .card {
    border: 2px solid black;
    padding: 3rem;
    gap: 1rem;
  }
  .servicesBlocks {
    gap: 1rem;
  }
}

.servicesBlocks .card .icon {
  z-index: 2;
}
.servicesBlocks .card .gradientBlur {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  transform: rotate(45deg);
  transition: all 1s ease;
}
.servicesBlocks .card:hover .gradientBlur {
  transform: rotate(225deg);
  transition: all 1s ease;
}
.servicesBlocks .card .gradientBlur::before, .servicesBlocks .card .gradientBlur::after {
  content: "";
  width: 200%;
  position: absolute;
  height: 400%;
  filter: blur(150px);
}
.servicesBlocks .card .gradientBlur::before {
  left: -100%;
  top: -100%;
  transition: var(--bg-transition-fade)
}
.servicesBlocks .card .gradientBlur::after {
  right: -150%;
  top: -150%;
  transition: var(--bg-transition-fade)
}
.color-light .servicesBlocks .card .gradientBlur::before { background-color: #fff; }
.color-light .servicesBlocks .card .gradientBlur::after { background-color: var(--white); }
.color-dark .servicesBlocks .card .gradientBlur::before { background-color: rgba(255, 255, 255, 0.15); }
.color-dark .servicesBlocks .card .gradientBlur::after { background-color: var(--black); }


.textGroup.center {
  text-align: center;
}
.textGroup.mw {
  margin: auto;
}
.mw-800 { max-width: 800px; }
.mw-1000 { max-width: 1000px; }
.gap-4 { gap: 4rem; }

.servicesBlocks .card .textGroup {
  display: flex;
  flex-direction: column;
  text-wrap: wrap;
  gap: 1.2rem;
}
.servicesBlocks .card .textGroup .details { 
  max-height: 0; 
  opacity: 0;
  margin-top: -1.5rem;
  transition: all 600ms ease;
}
.servicesBlocks .card.selection .textGroup .details { 
  overflow-y: hidden;
	max-height: 300px;
  opacity: 1;
  margin-top: 0;
	transition: all 600ms ease;
}
.color-light .servicesBlocks .card.selection { border-color: var(--black); }
.color-dark .servicesBlocks .card.selection { border-color: var(--white); }


.color-light .linkUnderlineVisible a { color: var(--black); }
.color-dark .linkUnderlineVisible a { color: var(--white); }

.servicesBlocks .card.selection .logoSymbol { transform: rotate(225deg); transition: transform 600ms ease;}

.color-light .servicesBlocks .card.selection .logoSymbol svg path { fill: var(--black); }
.color-dark .servicesBlocks .card.selection .logoSymbol svg path { fill: var(--white); }

.servicesBlocks .card .logoSymbol {
  width: 32px;
  height: 32px;
  position: absolute;
  right: 3.75rem;
  transition: transform 600ms ease
}
.color-light .servicesBlocks .card .logoSymbol svg path {
  fill: var(--black-2);
  transition: fill 500ms ease;
}
.color-dark .servicesBlocks .card .logoSymbol svg path {
  fill: var(--white-2);
  transition: fill 500ms ease;
}
.color-light .servicesBlocks .card:hover .logoSymbol svg path {
  fill: var(--black);
  transition: fill 500ms ease;
}
.color-dark .servicesBlocks .card:hover .logoSymbol svg path {
  fill: var(--white);
  transition: fill 500ms ease;
}
.linkUnderlineVisible {
  padding-bottom: 1rem;
}
.linkUnderlineVisible a {
  color: var(--black);
  font-family: var(--font-family);
  font-size: 1.3125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.25rem;
  position: relative;
}
.linkUnderlineVisible a::after {
  content: '';
  width: 100%;
  height: 2px;
  opacity: 0.1;
  position: absolute;
  bottom: -20px;
  z-index: 1;
  left: 0;
}
.linkUnderlineVisible a::before {
  content: '';
  width: 0%;
  height: 2px;
  position: absolute;
  bottom: -20px;
  z-index: 2;
  left: 0;
  transition: width 1s ease;
}
.linkUnderlineVisible a:hover {
 color: #fff;
}
.linkUnderlineVisible a:hover::before {
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: -20px;
  z-index: 2;
  left: 0;
  transition: width 1s ease;
}
.color-dark .linkUnderlineVisible a::after{
  background-color: var(--white);
}
.color-dark .linkUnderlineVisible a::before{
  background-color: var(--white);
}
.color-dark .linkUnderlineVisible a:hover::before{
  background-color: var(--white);
}
.color-light .linkUnderlineVisible a::after{
  background-color: var(--black);
}
.color-light .linkUnderlineVisible a::before{
  background-color: var(--black);
}
.color-light .linkUnderlineVisible a:hover::before{
  background-color: var(--black);
}



/* Animated icons */
.servicesBlocks .card .icon { position: relative; }
.servicesBlocks .card .icon svg {
  overflow: visible;

}
.ic-ease {
  transition: all 1.0s ease;
}
@media only screen and (max-width: 560px) {
  /* .ic-ease { transition: none; } */
}

.element-blur-icon {
  filter: blur(20px);
}

.servicesBlocks .card:hover .icon.product-design svg .dynamic-island {
  x:10px;
  width: 48px;
  height: 16px;
  rx: 8px;
}
.servicesBlocks .card:hover .icon.product-design svg .rotate {
  transform: rotate(30deg);
  x: 60px;
  y: -28px;
}
.servicesBlocks .card .product-design-symbol {
  top: 45px;
  left: 21px;
  position: absolute;
}
.servicesBlocks .card:hover .product-design-symbol {
  transform: rotate(360deg) scale(1.3);
}

/* E-commerce design */
@keyframes pulse {
	0% {
		transform: scale(1);
    transform-origin: center center;
	}

	70% {
		transform: scale(1.2);
    transform-origin: center center;
	}

	100% {
		transform: scale(1);
    transform-origin: center center;
	}
}
.servicesBlocks .card:hover .e-commerce-design .pulse {
  transform: scale(1);
	animation: pulse 2s infinite;
  transform-origin: center center;
}
.servicesBlocks .card .e-commerce-design.heart{
  position: absolute;
  left: 38px;
  top: 58px;
}
.servicesBlocks .card:hover .e-commerce-design .bag {
  transform: translateY(-10px);
}

/* Website */
.servicesBlocks .card:hover .website .move{
  transform-origin: center center;
  transform: translateY(50px) rotate(-90deg);
  width: 96px;
}
.servicesBlocks .card:hover .website .line-1 {
  height: 22px;
  width: 76px;
}
.servicesBlocks .card:hover .website .line-2 {
  width: 76px;
  height: 22px;
  x:10px;
  y: 57px;
}
.servicesBlocks .card:hover .website .line-2s {
  width: 76px;
  height: 22px;
  x:10px;
  y: 58px;
}
.servicesBlocks .card:hover .website .line-3 {
  width: 76px;
  height: 22px;
  x:10px;
  y: 84px;
} 
.servicesBlocks .card:hover .website .line-3s {
  width: 76px;
  height: 22px;
  x:10px;
  y: 85px;
} 


/* Prototype */
.servicesBlocks .card:hover .prototype .zap {
  transform-origin: center center; 
  animation: zap 1s;
}
.servicesBlocks .card:hover .prototype .square {
  width: 80px;
  height: 56px;
  y: 60px;
}
@keyframes zap {
  0% {transform: scale(1);} 
  10%, 20% {transform: scale(0.9) rotate(-3deg);} 
  30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} 
  40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} 
  100% {transform: scale(1) rotate(0);} 
} 


/* Support */
.servicesBlocks .card:hover .support {
  transform: translateY(-20px) translateX(20px);
}
.servicesBlocks .card:hover .support .circle {
  transform: translateY(20px) translateX(-20px);
}
.servicesBlocks .card:hover .support .rocket {
  animation: rocket 600ms infinite;
  transform-origin: center center;
}
@keyframes rocket {
  20% { transform: rotate(2deg); }
  40% { transform: rotate(-2deg); } 
  60% { transform: rotate(2deg); } 
  80% { transform: rotate(-2deg); } 
  100% { transform: rotate(2deg); } 
}
.color-dark .support .black-svg {
  fill: var(--white);
}

.btn {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: var(--btn-radius);
  font-family: var(--font-family);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 2.25rem;
  transition: transform 1s ease;
}
.btn:hover {
  transform: scale(1.1);
  transition: transform 1s ease;
}
.btn.large {
  padding: 1.2rem 2.25rem;
}
.color-dark .btn.white {
  background-color: var(--white);
  color: var(--black);
  transition: var(--bg-transition-fade);
}
.color-light .btn.white {
  background-color: var(--black);
  color: var(--white);
  transition: var(--bg-transition-fade);
}


.office {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scroll-img-w-text {
  position: relative;
  overflow: hidden;

}
.scroll-img-w-text .img-container {
  aspect-ratio: 16/8;
}

.scroll-img-w-text .zoomer .img-container {
  position: sticky;
  z-index: 1;
  margin: 0 auto;
  overflow: hidden;

}
@media only screen and (max-width: 1800px) {
  .scroll-img-w-text .zoomer .img-container { top: 44px; border-radius: var(--border-radius); }
}
.scroll-img-w-text .zoomer {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
}
.scroll-img-w-text .zoomer .img-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(100% - 8rem);
  overflow: hidden;
  z-index: -1;
  border-radius: 2rem;
}
.scroll-img-w-text .zoomer .img-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;

  height: auto;
  transition: transform 0.2s ease-in-out;
}
.scroll-img-w-text .zoomer .text-container {
  margin-left: var(--grid-padding);
  padding-bottom: var(--grid-padding);
  width: 100%;
}






[data-cursor] {
  border-radius: 50%;
}
@media only screen and (max-width: 560px) {
  [data-cursor] {
    display: none;
  }
}


[data-cursor="0"] {
  height: 5px;
  width: 5px;
  z-index: 9999;
  transition: background-color 1500ms ease;
}

[data-cursor="1"] {
  height: 50px;
  width: 50px;
  transition: all 0.15s ease, left 0.3s linear, top 0.3s linear, border-color 1500ms ease;;
  z-index: 9999;
}
.color-dark [data-cursor="0"] {
  background-color: var(--white);
}
.color-light [data-cursor="0"] {
  background-color: var(--black);
}
.color-dark [data-cursor="1"] {
  border: 2px solid var(--white);
}
.color-light [data-cursor="1"] {
  border: 2px solid var(--black);
}
.cursor-hover--a [data-cursor="0"] {
  width: 10px;
  height: 10px;
  mix-blend-mode: difference;
}
.cursor-hover--a [data-cursor="1"] {
  height: 120px;
  width: 120px;
  mix-blend-mode: difference;
}

.cursor-hover--card [data-cursor="0"] {
  width: 10px;
  height: 10px;
  mix-blend-mode: difference;
}
.cursor-hover--card [data-cursor="1"] {
  height: 120px;
  width: 120px;
  mix-blend-mode: difference;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.principles .card {
  width: 100%;
  border-bottom: 1px solid;
  border-right: 1px solid;
  padding: 3rem;
  transition: border-color 1500ms ease;
}
.principles .card:nth-child(1),
.principles .card:nth-child(4) {
  border-left: 1px solid;
}
.principles .card:nth-child(-n + 3) {
  border-top: 1px solid;
}


:root { --borderRadiusC: 20px; }

.principles .card:nth-child(1) { border-radius: var(--borderRadiusC) 0 0 0; }
.principles .card:nth-child(3) { border-radius: 0 var(--borderRadiusC) var(--borderRadiusC) 0; }
.principles .card:nth-child(4) { border-radius: 0 0 0 var(--borderRadiusC); }
.principles .card:nth-child(5) { border-radius: 0 0 var(--borderRadiusC) 0; }

@media only screen and (max-width: 1180px) {
  .cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .principles .card:nth-child(3) {
    border-top: 0px solid;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
  }
  .principles .card:nth-child(4) {
    border-top: 0px solid;
    border-bottom: 1px solid;
    border-left: 0px solid;
    border-right: 1px solid;
  }
  .principles .card:nth-child(5) {
    border-top: 0px solid;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
  }


  .principles .card:nth-child(1) { border-radius: var(--borderRadiusC) 0 0 0; }
  .principles .card:nth-child(2) { border-radius: 0 var(--borderRadiusC) 0 0; }
  .principles .card:nth-child(3) { border-radius: 0; }
  .principles .card:nth-child(4) { border-radius: 0 0 var(--borderRadiusC) 0; }
  .principles .card:nth-child(5) { border-radius: 0 0 var(--borderRadiusC) var(--borderRadiusC); }
}
@media only screen and (max-width: 880px) {
  .cards {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin-bottom: -1px;
  }
  .principles .card:nth-child(-n + 5) {
    border: 1px solid;
    border-bottom: 0;
  }
  .principles .card:last-child {
    border: 1px solid;
  }
  .principles .card:nth-child(1) { border-radius: var(--borderRadiusC) var(--borderRadiusC) 0 0; }
  .principles .card:nth-child(2) { border-radius: 0; }
  .principles .card:nth-child(3) { border-radius: 0; }
  .principles .card:nth-child(4) { border-radius: 0; }
  .principles .card:nth-child(5) { border-radius: 0 0 var(--borderRadiusC) var(--borderRadiusC); }
}

.color-dark .principles .card { border-color: var(--white-1); transition: border-color 1500ms ease;}
.color-light .principles .card { border-color: var(--black-1); transition: border-color 1500ms ease;}

.color-dark .principles .card .icon svg path { fill: var(--white); transition: fill 1500ms ease }
.color-light .principles .card .icon svg path { fill: var(--black); transition: fill 1500ms ease }


.pathLine400 {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: dash 2s ease-out forwards;
}
.pathLine50 {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: dash 2s ease-out forwards;
}

.d5 {
  animation-delay: 1.25s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
.footer {
  width: 100%;
  height: 100vh;
  padding-top: 2rem;
  color: var(--white);
  bottom: 0;

  background-color: #0d0d0d;
  position: sticky;
  z-index: 1;
  
}
@media only screen and (max-width: 880px) {
  .contacts { width: 100% !important;}
  .footer {
    padding-bottom: 0;
  }
  .footer .footerNav {
    display: none;
  }
  .footer .copyrights {
    border-top: 1px solid yellow;
    padding-top: 4rem;
    padding-bottom: 4rem ;
    flex-direction: column;
  }
  .footer .copyrights .year {
    margin-top: 1rem;
  }
}
@media only screen and (max-width: 560px) {
  .footer {
    
  }
  .clutch {
    margin-left: 0 !important;
    padding: 20px;
    height: unset !important;
    width: 100%;
    margin: auto;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    margin-top: 3rem;
  }
}
.relative { 
  position: relative;
}
.testimonials {
  overflow: hidden;
}
.color-dark .testimonials .card { background-color: #222; transition: background-color 1500ms ease }
.color-light .testimonials .card { background-color: #fff; transition: background-color 1500ms ease }
.color-dark .testimonials .card svg .color { fill: var(--white); transition: fill 1500ms ease }
.color-light .testimonials .card svg .color { fill: var(--black); transition: fill 1500ms ease }

.testimonials .card {
  border-radius: 20px;
  padding: 5rem;
  box-shadow: 0 10px 4px 0 rgba(0,0,0,0.05);
}
.testimonials .photo {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  overflow: hidden;
  margin-right: 1.5rem;
}
.social {
  display: flex;
  gap: 0.5rem;
  flex-direction: row;
  flex-wrap: wrap;
}
.socialBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  border-radius: 100px;
}
.socialBtn svg {
  z-index: 1;
  transition: all 500ms ease;
}
.socialBtn svg path {
  transition: all 500ms ease;
}
.socialBtn::after {
  content: "";
  width: 0;
  height: 0;
  background: white;
  position: absolute;
  border-radius: 100%;
  z-index: 0;
  transition: all 500ms ease;
}
.socialBtn:hover::after {
  width: 100%;
  height: 100%;
  transition: all 500ms ease;
}
.socialBtn:hover svg path {
  fill: var(--black);
  transition: all 500ms ease;
}
.footerLink {
  color: var(--white);
  font-family: var(--font-family);
  font-size: 1.3125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.25rem;
  width: fit-content;
  position: relative;
}
.location {
  color: var(--white);
  font-family: var(--font-family);
  font-size: 1.3125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.25rem;
  width: fit-content;
  position: relative;
  gap: 0 !important;
}
.linkUnderline::before {
  content: '';
  width: 0%;
  height: 1px;
  position: absolute;
  bottom: -1rem;
  z-index: 2;
  left: 0;
  transition: width 1s ease;
}
.linkUnderline.sm::before {
  bottom: -0rem;
}
.footerLink:hover {
 color: #fff;
}
.linkUnderline:hover::before {
  width: 100%;
  transition: width 1s ease;
}
.color-dark .linkUnderline::before{
  background-color: var(--white);
}
.color-dark .linkUnderline:hover::before{
  background-color: var(--white);
}
.color-light .linkUnderline::before{
  background-color: var(--black);
}
.color-light .linkUnderline:hover::before{
  background-color: var(--black);
}
.location, .contact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.contacts {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 70%;
}
.footer .left {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}
.footer .clutch {
  height: 58px;
  display: flex;
  align-items: center;
  margin-left: 2.5rem;
}
.footerNav {
  width: 40%;
}
.footerNav ul {
  width: 100%; 
}
.footer .copyrights {
  opacity: 0.6;
}
.footer .copyrights .made span {
  opacity: 0.4;
  text-decoration: line-through;
}
.footer .copyrights .year {
  opacity: 0.6;
}
.footer .line {
  width: 100%;
  height: 1px;
  background-color: var(--white);
  opacity: 0.1;
}

@media only screen and (max-width: 560px) {
  .footer .f-row {
    flex-direction: column;
  }
  
}

.bottomSection .cta {
  z-index: 2;
  border-radius: 0 0 3rem 3rem;
  padding: 340px 0;
  margin-bottom: -40px;

}

.color-dark .bottomSection .cta {
  background-color: var(--black);
  transition: var(--bg-transition-fade)
}
.color-light .bottomSection .cta {
  background-color: var(--white);
  transition: var(--bg-transition-fade)
}

.clientLogos {
  margin-top: 8rem;
  border: 1px solid;
  border-radius: 20px;
  overflow: hidden;
}
.clientLogos .logo {
  min-width: 180px;
  height: 180px;
  width: 100%;
  border-right: 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 calc(25% - 40px);
  box-sizing: border-box;
  margin-right: -1px;
}
.clientLogos .logo:nth-child(-n + 4) {
  border-bottom: 1px solid;
}

@media (max-width: 1350px) {
  .clientLogos .logo {
    flex: 1 1 calc(50% - 80px);
  }
  .clientLogos .logo:nth-child(-n + 6) {
    border-bottom: 1px solid;
  }
}

@media (max-width: 780px) {
  .clientLogos .logo {
    flex: 1 1 calc(50% - 80px);
  }
  .clientLogos .logo:nth-child(-n + 7) {
    border-bottom: 1px solid;
  }
}

.color-dark .clientLogos,
.color-dark .clientLogos .logo {
  transition: border 1.5s ease;
  border-color: var(--white-1);
}
.color-light .clientLogos,
.color-light .clientLogos .logo {
  transition: border 1.5s ease;
  border-color: var(--black-1);
}
.color-dark .clientLogos .logo svg path {
  fill: var(--white);
  transition: fill 1.5s ease;
}
.color-light .clientLogos .logo svg path {
  fill: var(--black);
  transition: fill 1.5s ease;
}

/* .about .scrollPhoto {
  padding: 2rem;
} */

.cards .card.sx {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about .cards .card .icon {
  margin-bottom: 1rem;
}
.about .cards .card h5 {
  font-weight: 400;
  font-size: 28px;
  line-height: 35px;
  letter-spacing: -0.04em;
}

.swiper-container::part(container) {
  overflow: visible;
}
.swiper-slide {
  width: 100%;
  height: 100%;
}
.swiper-pagination-bullets {
  display: none !important
}
.swiper-slide.card h4 a {
  color: var(--white) !important;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/12;
  object-fit: cover;
  border-radius: var(--border-radius);
  background-color: lightgray;
}



.team {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.team .members {
  display: flex;
  gap: 0rem;
  align-items: center;
}
.color-dark .team .members .member img { box-shadow: 0px 0px 0px 3px var(--black); transition: var(--bg-transition-fade); }
.color-light .team .members .member img { box-shadow: 0px 0px 0px 3px var(--white); transition: var(--bg-transition-fade); }
.team .member {
  display: flex;
  align-items: center;
  justify-content: center;
}

.member:nth-child(1) img,
.member:nth-child(5) img {
  width: 38px;
  height: 38px;
  z-index: 2;
  overflow: hidden;
  border-radius: 100%;

}
.member:nth-child(2) img,
.member:nth-child(4) img {
  width: 44px;
  height: 44px;
  margin-left: -8px;
  margin-right: -8px;
  z-index: 3;
  overflow: hidden;
  border-radius: 100%;
  transition: all 500ms ease !important;

}
.member:nth-child(3) img {
  width: 52px;
  height: 52px;
  z-index: 4;
  overflow: hidden;
  border-radius: 100%;

}
.available {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 2rem 0 4rem 0;
  color: #30D045;
  font-size: 0.8rem;
  text-transform: uppercase;

}
.available span {
  width: 8px;
  height: 8px;
  background-color: #30D045;
  border-radius: 100px;
  display: block;
  animation: pulse 1400ms infinite linear;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0px #30D04501;
  }
  50% {
    box-shadow: 0 0 0 7px #30D04530;
  }
  100% {
    box-shadow: 0 0 0 14px #30D04500;
  }
}

.team:hover .member:nth-child(2) img,
.team:hover .member:nth-child(4) img {
  margin-left: -2px;
  margin-right: -2px;
  transition: all 500ms ease;
}
.teamButton:hover + .team .members .member:nth-child(2) img {
  margin-left: -2px;
  margin-right: -2px;
  transition: all 500ms ease;
}


/* FAQ cards */

.faq .content {
  max-width: 900px;
}
.faq .head {
  max-width: 680px;
  text-align: center;
  margin:auto
}
.faqCards {
  padding-top: 4rem;
}
.faqCards .card {
  padding: 2rem 0;
  border-bottom: 1px solid;
}
.color-dark .faqCards .card {
  border-color: var(--white-1);
}
.color-light .faqCards .card {
  border-color: var(--black-1);
}
.faqCards .card:last-child {
  border-bottom: 0;
}
.faqCards .card .head { max-width: 900px;}
.faqCards .card .head a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
}
.faqCards .card .head h5 {
  text-align: left;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.8px;
  transition: opacity 500ms ease;
}
.faqCards .card:hover .head h5 {
  opacity: 0.7;
  transition: opacity 500ms ease;
}
.faqCards .card svg .iconxxms {
  transition: transform 500ms ease;
  transform-origin: center;
}
.faqCards .card.selection svg .iconxxms {
  transform: rotate(90deg);
  transition: transform 500ms ease;
  transform-origin: center;
}
.faqCards .card .cardContent {
  overflow-y: hidden;
	max-height: 0;
  opacity: 0;
	transition: all 600ms ease;
}
.faqCards .card.selection .cardContent {
  overflow-y: hidden;
  max-height: 800px;
  opacity: 1;
  margin-top: 1rem;
	transition: all 600ms ease;
}


/* Pricing cards */

.pricing .pricingCards {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 2.5rem;
  margin-top: 6rem;
}
.pricing .pricingCards .col {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4rem;
}
.pricing .pricingCards .col:first-child,
.pricing .pricingCards .col:last-child {
  padding-top: 4rem;
}
.pricing .pricingCards .col .card {
  padding: 3rem;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--border-radius);
  overflow: hidden;
}
.pricing .pricingCards .col .card.default {
  background: linear-gradient(180deg, rgba(51, 51, 51, 0.20) 0%, rgba(51, 51, 51, 0.00) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.00) 100%);
  transition: all 500ms ease;
}
.backgroundFDC {
  transition: opacity 500ms ease-out;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: ;
  background: linear-gradient(180deg, rgba(51, 51, 51, 0.20) 0%, rgba(51, 51, 51, 0.00) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.00) 100%);
}

.pricing .pricingCards .col .card:hover .backgroundFDC {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.pricing .head {
  display: flex;
  flex-direction: column;
}
.pricing .label {
  width: fit-content;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(51, 51, 51, 0.20) 0%, rgba(51, 51, 51, 0.00) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.00) 100%);
  border-radius: 12px;
  font-family: 'OpenSauceSans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: var(--white);
  position: relative;
  margin-bottom: 2rem;
}
.pricing .label .doubleBG {
  border-radius: 11px;
}
.pricing .head .price {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}
.pricing .head .price h4 {
  font-family: 'Open Sauce Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 60px;
  letter-spacing: -0.04em;
  color: var(--white);
}
.pricing .head .price p {
  font-family: 'Open Sauce Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.02em;
  color: var(--white-6);
  padding-bottom: 0.5rem;
}
.pricing .description {
  font-family: 'Open Sauce Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.02em;
  color: var(--white-6);
}
.pricing .listItems ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 2rem 0;
}
.pricing .listItems ul li {
  display: inline-flex;
  flex-direction: row;
  align-items: center;

  gap: 0.75rem;
}
.pricing .listItems ul li .icon {
  width: 18px;
  height: 18px;
}
.pricing .listItems ul li p.small {
  font-family: var(--font-family-2) !important;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--white-8);
  
  transition: all 500ms ease;
}
.pricing .listItems ul li:hover p.small {
  color: var(--white);
  opacity: 1;
  transition: all 500ms ease;
}
.pricing .listItems ul li svg .circle,
.pricing .listItems ul li svg .check {
  transition: all 500ms ease;
}

.pricing .listItems ul li:hover svg .circle {
  opacity: 1;
  transition: all 500ms ease;
}
.pricing .listItems ul li:hover svg .check {
  fill: var(--black);
  transition: all 500ms ease;
}


.ctbtn {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
font-family: var(--font-family-2);
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 26px;
/* identical to box height, or 144% */
letter-spacing: -0.02em;

}
.ctbtn .buttonElements {
  height: 32px;
  display: flex;
  transition: all 500ms ease;
}
.ctbtn .buttonElements .hidden {
  width: 0px;
  overflow: hidden;
  padding-left: 0;
  transition: all 500ms ease;
  opacity: 0;
}
.ctbtn:hover .buttonElements .hidden {
  width: 51px;
  margin-left: 7px;
  margin-right: 8px;
  opacity: 1;
  transition: all 500ms ease;
}
.nocode {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.nocode .text {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.nocode .tlb {
  opacity: 0.6;
}
.nocode .price {
  font-family: var(--font-family);
  font-weight: 500;
  opacity: 1;
}
.btn.custom {
  width: 100%;
  border-radius: 12px;
  text-align: center;
  font-size: 18px;
  line-height: 26px;
}
.toggle-button {
  position: relative;
  min-width: 60px;
  height: 30px;
  background: var(--white-1);
  border-radius: 30px;
  border: none;
  cursor: pointer;
  outline: none;
  transition: background 0.3s ease;
}

.toggle-button::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 20px;
  height: 20px;
  background: var(--white);
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.toggle-button.active {
  background: #7733FF;
  transition: transform 0.3s ease;
}
.toggle-button.active::before {
  background: var(--white);
  transition: transform 0.3s ease;
}

.toggle-button.active::before {
  transform: translateX(30px);
}
.pricing .pricingCards .col .card.default {

}
.pricing .pricingCards .col .card.default.enabled .backgroundFD {
  opacity: 1;
  transition: opacity 500ms ease-in;

}
.pricing .cta {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  padding: 2rem 0;
}
.pricing .cta .text {
  display: flex;
  gap: 0;
  flex-direction: column;
}
.pricing .cta p {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: var(--white-6);
}
.pricing .cta a {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: var(--white);
  position: relative;
}
.pricing .cta a::before {
  bottom: -0.5rem;
}
.relative {
  position: relative;
}

.backgroundFD {
  transition: opacity 500ms ease-out;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: color;
  background: linear-gradient(180deg, rgba(119, 51, 255, 0.20) 0%, rgba(119, 51, 255, 0.00) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.00) 100%);
}

.doubleBG {
  position: absolute;
  width: calc(100% - 0px);
  height: calc(100% - 0px);
  top: 0px;
  left: 0px;
  border-radius: calc(var(--border-radius) - 1px);
  border: 1px solid #ffffff70;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.starsBG {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}
.star1 {
  animation: blink 4s infinite;
  animation-delay: 0s;
}
.star2 {
  animation: blink 4s infinite;
  animation-delay: 2s;
}
.star3 {
  animation: blink 4s infinite;
  animation-delay: 4s;
}
.star4 {
  animation: blink 4s infinite;
  animation-delay: 6s;
}
.star5 {
  animation: blink 4s infinite;
  animation-delay: 8s;
}
.star6 {
  animation: blink 4s infinite;
  animation-delay: 10s;
}
.star7 {
  animation: blink 4s infinite;
  animation-delay: 12s;
}
.star8 {
  animation: blink 4s infinite;
  animation-delay: 14s;
}
.star9 {
  animation: blink 4s infinite;
  animation-delay: 16s;
}
.star10 {
  animation: blink 4s infinite;
  animation-delay: 18s;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.spots {
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
}
.spots .bubble {
  width: 0.5rem;
  height: 0.5rem;
  opacity: 0;
  background: #30D045;
  border-radius: 50%;
  filter: drop-shadow(0px 4px 8px rgba(48, 208, 69, 0.25));
  animation: blink2 4s infinite;

}
.spots .value {
  color: #FFF;
  font-family: var(--font-family);
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.375rem; /* 137.5% */
  letter-spacing: -0.02rem;
}

@keyframes blink2 {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  16%, 85% {
    opacity: 1; 
  }
  86% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/* Blurred bottom on scroll */

.blurredScrollBottom {
  bottom: 0;
  flex: none;
  height: 80px;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  z-index: 9999;
  rotate:180deg;
}
.blurredScrollBottom .blurredB1 {
  -webkit-backdrop-filter: blur(20px);
  -webkit-mask: linear-gradient(0deg,rgba(0,0,0,0) 76%,rgba(0,0,0,1) 100%) add;
  backdrop-filter: blur(10px);
  background-color: #ffffff03;
  flex: none;
  inset: 0;
  mask: linear-gradient(0deg,rgba(0,0,0,0) 76%,rgba(0,0,0,1) 100%) add;
  overflow: hidden;
  position: absolute

}
.blurredScrollBottom .blurredB2 {
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask: linear-gradient(0deg,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 75%) add;
  backdrop-filter: blur(5px);
  background-color: #ffffff03;
  flex: none;
  inset: 0;
  mask: linear-gradient(0deg,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 75%) add;
  overflow: hidden;
  position: absolute
}
.blurredScrollBottom .blurredB3 {
  -webkit-backdrop-filter: blur(3px);
  -webkit-mask: linear-gradient(0deg,rgba(0,0,0,0) 25%,rgba(0,0,0,1) 50%) add;
  backdrop-filter: blur(3px);
  background-color: #ffffff03;
  flex: none;
  inset: 0;
  mask: linear-gradient(0deg,rgba(0,0,0,0) 25%,rgba(0,0,0,1) 50%) add;
  overflow: hidden;
  position: absolute
}
.blurredScrollBottom .blurredB4 {
  -webkit-backdrop-filter: blur(1px);
  -webkit-mask: linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 25%) add;
  backdrop-filter: blur(1px);
  background-color: #ffffff03;
  flex: none;
  inset: 0;
  mask: linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 25%) add;
  overflow: hidden;
  position: absolute
}