html {
  scroll-behavior: smooth !important;
}

svg .p-1 {
  stroke-dashoffset: 251.1354370117px;
  stroke-dasharray: 251.1354370117px;
  fill: transparent;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}

svg.active .p-1 {
  stroke-dashoffset: 0;
  fill: rgb(255, 255, 255);
}

svg .p-2 {
  stroke-dashoffset: 251.1354370117px;
  stroke-dasharray: 251.1354370117px;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s;
}

svg.active .p-2 {
  stroke-dashoffset: 0;
}

svg .p-3 {
  stroke-dashoffset: 52.736328125px;
  stroke-dasharray: 52.736328125px;
  fill: transparent;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s;
}

svg.active .p-3 {
  stroke-dashoffset: 0;
  fill: rgb(255, 255, 255);
}

svg .p-4 {
  stroke-dashoffset: 52.736328125px;
  stroke-dasharray: 52.736328125px;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
}

svg.active .p-4 {
  stroke-dashoffset: 0;
}

svg .p-5 {
  stroke-dashoffset: 107.3387832642px;
  stroke-dasharray: 107.3387832642px;
  fill: transparent;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .p-5 {
  stroke-dashoffset: 0;
  fill: rgb(255, 255, 255);
}

svg .p-6 {
  stroke-dashoffset: 107.3387832642px;
  stroke-dasharray: 107.3387832642px;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .p-6 {
  stroke-dashoffset: 0;
}

svg .p-7 {
  stroke-dashoffset: 60.9439430237px;
  stroke-dasharray: 60.9439430237px;
  fill: transparent;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s;
}

svg.active .p-7 {
  stroke-dashoffset: 0;
  fill: rgb(255, 255, 255);
}

svg .p-8 {
  stroke-dashoffset: 60.9439430237px;
  stroke-dasharray: 60.9439430237px;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s;
}

svg.active .p-8 {
  stroke-dashoffset: 0;
}

svg .p-9 {
  stroke-dashoffset: 58.1695213318px;
  stroke-dasharray: 58.1695213318px;
  fill: transparent;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}

svg.active .p-9 {
  stroke-dashoffset: 0;
  fill: rgb(255, 255, 255);
}

svg .p-10 {
  stroke-dashoffset: 58.1695213318px;
  stroke-dasharray: 58.1695213318px;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}

svg.active .p-10 {
  stroke-dashoffset: 0;
}

svg .p-11 {
  stroke-dashoffset: 128.008026123px;
  stroke-dasharray: 128.008026123px;
  fill: transparent;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

svg.active .p-11 {
  stroke-dashoffset: 0;
  fill: rgb(255, 255, 255);
}

svg .p-12 {
  stroke-dashoffset: 128.008026123px;
  stroke-dasharray: 128.008026123px;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
}

svg.active .p-12 {
  stroke-dashoffset: 0;
}

svg .p-13 {
  stroke-dashoffset: 205.4279937744px;
  stroke-dasharray: 205.4279937744px;
  fill: transparent;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s;
}

svg.active .p-13 {
  stroke-dashoffset: 0;
  fill: rgb(255, 255, 255);
}

svg .p-14 {
  stroke-dashoffset: 205.4279937744px;
  stroke-dasharray: 205.4279937744px;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
}

svg.active .p-14 {
  stroke-dashoffset: 0;
}

svg .p-15 {
  stroke-dashoffset: 571.6356811523px;
  stroke-dasharray: 571.6356811523px;
  fill: transparent;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s;
}

svg.active .p-15 {
  stroke-dashoffset: 0;
  fill: rgb(255, 255, 255);
}

svg .p-16 {
  stroke-dashoffset: 571.6356811523px;
  stroke-dasharray: 571.6356811523px;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
}

svg.active .p-16 {
  stroke-dashoffset: 0;
}

svg .p-17 {
  stroke-dashoffset: 483.7097473145px;
  stroke-dasharray: 483.7097473145px;
  fill: transparent;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
}

svg.active .p-17 {
  stroke-dashoffset: 0;
  fill: rgb(255, 255, 255);
}

svg .p-18 {
  stroke-dashoffset: 483.7097473145px;
  stroke-dasharray: 483.7097473145px;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4s;
}

svg.active .p-18 {
  stroke-dashoffset: 0;
}

svg .p-19 {
  stroke-dashoffset: 133.6063537598px;
  stroke-dasharray: 133.6063537598px;
  fill: transparent;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6s;
}

svg.active .p-19 {
  stroke-dashoffset: 0;
  fill: rgb(255, 255, 255);
}

svg .p-20 {
  stroke-dashoffset: 133.6063537598px;
  stroke-dasharray: 133.6063537598px;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8s;
}

svg.active .p-20 {
  stroke-dashoffset: 0;
}

svg .p-21 {
  stroke-dashoffset: 73.7939071655px;
  stroke-dasharray: 73.7939071655px;
  fill: transparent;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 4s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 4s;
}

svg.active .p-21 {
  stroke-dashoffset: 0;
  fill: rgb(255, 255, 255);
}

svg .p-22 {
  stroke-dashoffset: 268.519744873px;
  stroke-dasharray: 268.519744873px;
  fill: transparent;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 4.2s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 4.2s;
}

svg.active .p-22 {
  stroke-dashoffset: 0;
  fill: url("#paint10_linear_170_550");
}

svg .p-23 {
  stroke-dashoffset: 133.5672302246px;
  stroke-dasharray: 133.5672302246px;
  fill: transparent;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 4.4s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 4.4s;
}

svg.active .p-23 {
  stroke-dashoffset: 0;
  fill: rgb(255, 255, 255);
}

svg .p-24 {
  stroke-dashoffset: 133.5672302246px;
  stroke-dasharray: 133.5672302246px;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 4.6s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 4.6s;
}

svg.active .p-24 {
  stroke-dashoffset: 0;
}

svg .p-25 {
  stroke-dashoffset: 78.2857131958px;
  stroke-dasharray: 78.2857131958px;
  fill: transparent;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 4.8s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 4.8s;
}

svg.active .p-25 {
  stroke-dashoffset: 0;
  fill: rgb(255, 255, 255);
}

svg .p-26 {
  stroke-dashoffset: 78.2857131958px;
  stroke-dasharray: 78.2857131958px;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 5s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 5s;
}

svg.active .p-26 {
  stroke-dashoffset: 0;
}

*::-moz-selection {
  background-color: #5bc1f0 !important;
  color: black;
}

*::selection {
  background-color: #5bc1f0 !important;
  color: black;
}
*:focus-visible {
  background-image: none !important;
  background-color: rgb(19.1899441341, 149.6815642458, 209.8100558659) !important;
  color: #f0f0f0;
  position: relative;
  overflow: hidden;
}
*:focus-visible::after {
  content: "";
  position: absolute;
}

.fadeOut {
  animation: fadeOut 1s ease both;
}

@keyframes fadeOut {
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
[tabindex] {
  cursor: pointer;
}

@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
h1 {
  font-family: "koho";
  text-transform: uppercase;
  font-size: 3.25rem !important; /* 36px */
  line-height: 3.5rem !important; /* 40px */
  margin-bottom: 30px !important;
}
@media (max-width: 767px) {
  h1 {
    font-size: 2.5rem !important;
  }
}

h2 {
  font-family: "koho";
}

.pointed {
  background: linear-gradient(145deg, #ffffff, #e6e6e6);
}

.pulse-point-wave {
  border: 3px solid #5bc1f0;
  transition: all 0.3s;
}
.pulse-point-wave:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #5bc1f0;
  border-radius: 50%;
  animation: 2s point1 infinite;
}
.pulse-point-wave:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #5bc1f0;
  border-radius: 50%;
  animation: 2s point2 infinite;
  animation-delay: 0.2s;
}

@keyframes point1 {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes point2 {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.8);
    opacity: 0;
  }
}
.selected-ux::before {
  content: "";
  position: absolute;
  top: 20px;
  display: inline-block;
  left: -20px;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 100%;
  background-color: black;
}

#cursor {
  pointer-events: none;
  position: fixed;
  display: block;
  height: 100vh;
  width: 100vw;
  border-radius: 50%;
  transform-origin: center center;
  perspective: none;
  top: 0;
  left: 0;
  z-index: 1000;
  mix-blend-mode: color-burn;
  transform: translate(-15px, -85px);
}
#cursor .trail {
  /* className for the trail elements */
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #5bc1f0;
  transform-origin: center center;
  transition: transform cubic-bezier(0.22, 0.23, 0.29, 1.78) 0.3s, background-color ease 0.3s;
}
#cursor .trail-hover {
  background-color: rgb(34.9284916201, 171.8022346369, 234.8715083799);
  transform: scale(2) !important;
}

.move-front {
  z-index: 10;
  transform: scale(1);
  animation: swipIn 0.5s cubic-bezier(0.22, 0.23, 0.29, 1.3);
}

@keyframes swipIn {
  10% {
    transform: translate(50%);
  }
  100% {
    transform: translate(0);
  }
}
.work-card-ui::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;
  background-image: url("../img/uiworkcard.svg");
}

@media (max-width: 767px) {
  .work-card-ui::after {
    background-size: cover;
  }
}
.works {
  position: relative;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
}
.works.show {
  position: fixed !important;
  overflow-y: auto;
  left: 0px !important;
  top: 0px !important;
  z-index: 1 !important;
  height: 100% !important;
  width: 100% !important;
  padding: 0px;
}/*# sourceMappingURL=style.css.map */