@font-face {
  font-family: "Super Bubble-Regular";
  src: url("fonts/Super\ Bubble.ttf") format("truetype");
}

@font-face {
  font-family: "Asul-Bold";
  src: url("fonts/Asul-Bold.ttf") format("truetype");
}

.AXO {
  background-color: #ffffff;
  overflow: hidden;
  width: 100vw;
  min-height: 191.458vw;
  position: relative;
}

.AXO .BGCOLOR {
  position: absolute;
  width: 100.73%;
  height: 99.89%;
  top: 0;
  left: 0;
}

.AXO .FOOTER {
  position: absolute;
  top: 173.385vw;
  left: -0.052vw;
  width: 100.625vw;
  height: 18.073vw;
  background-color: transparent;
}

.AXO .img {
  position: absolute;
  width: 100%;
  height: 88.76%;
  top: 11.24%;
  left: 0;
}

.AXO .xfooter {
  position: absolute;
  width: auto;
  height: 26.12%;
  top: 43.99%;
  left: 87.78%;
  cursor: pointer;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.AXO .xfooter:hover { filter: brightness(0.85); }
.AXO .xfooter:active { filter: brightness(0.7); }

.AXO .tfooter {
  position: absolute;
  width: 5.59%;
  height: 31.12%;
  top: 41.79%;
  left: 7.78%;
  cursor: pointer;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.AXO .tfooter:hover { filter: brightness(0.85); }
.AXO .tfooter:active { filter: brightness(0.7); }

.AXO .FOOTERLOGO {
  position: absolute;
  width: 25.78%;
  height: 83.57%;
  top: 0;
  left: 36.75%;
}

.AXO .GALLERY {
  position: absolute;
  top: 120.313vw;
  left: -0.104vw;
  width: 100vw;
  height: 56.25vw;
}

.AXO .GALLERYBG {
  position: absolute;
  width: 101.35%;
  height: 90.00%;
  top: 0;
  left: 0;
}

.carousel {
  position: absolute;
  left: 9.17%;
  top: 38.33%;
  width: 81.66%;
  height: 42.31%;
  overflow: hidden;
  border-radius: 1vw;
}

.carousel .track {
  display: flex;
  height: 100%;
  will-change: transform;
}

.carousel .slide {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  overflow: hidden;
  padding: 0 0.6vw;
  box-sizing: border-box;
}

.carousel .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0.8vw;
  box-shadow: 0 0.4vw 1.2vw rgba(0,0,0,0.15);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.carousel:hover .slide img {
  filter: brightness(0.98);
}
.carousel .slide:hover img {
  transform: scale(1.02);
  filter: brightness(0.97);
}

.AXO .ABOUTPAGE {
  position: absolute;
  top: 64.063vw;
  left: -0.104vw;
  width: 100vw;
  height: 56.25vw;
  overflow: hidden;
}

.AXO .BG {
  position: absolute;
  width: 119.06%;
  height: 89.91%;
  top: 10.9%;
  left: 0;
}

.AXO .FRONT {
  position: absolute;
  width: 100.00%;
  height: 44.91%;
  top: 55.09%;
  left: 0;
}

.AXO .ABOUT {
  position: absolute;
  width: 100.00%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  overflow: hidden;
}

.AXO .TEXT-ABOUT {
  margin-left: -0.1%;
  width: 100vw;
  margin-right: 0.1%;
  flex: 1;
  position: relative;
}

.AXO .envelope {
  position: absolute;
  width: 37.60%;
  height: 80.00%;
  top: 14.44%;
  left: 23.07%;
}

.AXO .dear-kaspa-my-name {
  position: absolute;
  width: 24.11%;
  height: 17.69%;
  top: 18.20%;
  left: 27.32%;
  transform: rotate(-2.90deg);
  font-family: "Asul-Bold", Helvetica;
  font-weight: 700;
  color: #792c38;
  font-size: 1.042vw;
  letter-spacing: 0;
  line-height: normal;
}

.AXO .text-wrapper {
  font-family: "Asul-Bold", Helvetica;
  font-weight: 700;
  color: #792c38;
  font-size: 1.25vw;
  letter-spacing: 0;
}

.AXO .span { font-size: 1.042vw; }

.AXO .i-want-you-to-know {
  position: absolute;
  width: 25.04%;
  height: 20.01%;
  top: 38.81%;
  left: 27.98%;
  transform: rotate(-3.51deg);
  font-family: "Asul-Bold", Helvetica;
  font-weight: 700;
  color: #792b38;
  font-size: 1.042vw;
  letter-spacing: 0;
  line-height: normal;
}

.AXO .axoabout {
  position: absolute;
  width: 26.88%;
  height: 44.44%;
  top: 50.00%;
  left: 61.15%;
}

.AXO .KAJRON {
  position: absolute;
  top: 56.25vw;
  left: -0.052vw;
  width: 298.021vw;
  height: 7.813vw;
}
.AXO .KAJRON-2 {
  position: absolute;
  width: 33.54%;
  height: 100%;
  top: 0;
  left: 0;
}
.AXO .EXPLORING-NEW-WATERS {
  position: absolute;
  top: 1.406vw;
  left: 2.083vw;
  width: 295.938vw;
  font-family: "Super Bubble-Regular", Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 4.167vw;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  width: max-content;
  animation: axo-marquee 30s linear infinite;
}
.AXO .text-wrapper-2 { color: #ffffff; }
.AXO .text-wrapper-3 { color: #b24052; }
@keyframes axo-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.AXO .LANDING {
  position: absolute;
  top: 0.104vw;
  left: -0.052vw;
  width: 100.052vw;
  height: 57.188vw;
}
.AXO .div {
  position: absolute;
  width: 99.95%;
  height: 98.36%;
  top: 0;
  left: 0;
}
.AXO .colorfill {
  position: absolute;
  width: 104.17%;
  height: 185.19%;
  top: 0;
  left: 0;
  z-index: -1;
}
.AXO .b-glandingpage {
  position: absolute;
  width: 100%;
  height: 85.65%;
  top: 14.35%;
  left: 0;
}
.AXO .COMPUTER {
  position: absolute;
  top: 0;
  left: 0.052vw;
  width: 100vw;
  height: 56.25vw;
  overflow: hidden;
}
.AXO .COMP {
  position: absolute;
  width: 34.95%;
  height: 54.72%;
  top: 27.59%;
  left: 41.56%;
}
.AXO .HEADER {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.AXO .COMPSCREEN {
  position: absolute;
  width: 18.80%;
  height: 33.15%;
  top: 35.09%;
  left: 55.10%;
  z-index: 5;
}

.AXO .axolanding {
  position: absolute;
  width: 27.71%;
  height: 42.69%;
  top: 38.61%;
  left: 23.44%;
}
.AXO .text-wrapper-4 {
  position: absolute;
  width: 18.84%;
  height: 10.47%;
  top: 15.67%;
  left: 50.41%;
  transform: rotate(-2.19deg);
  -webkit-text-stroke: 0.417vw #b24052;
  font-family: "Super Bubble-Regular", Helvetica;
  font-weight: 400;
  color: #fcd7dd;
  font-size: 5vw;
  letter-spacing: 0;
  line-height: normal;
}

.AXO .header {
  position: fixed;
  top: 0.8vw;
  left: 21.25vw;
  width: 57.344vw;
  height: 8.177vw;
  background-color: transparent;
  z-index: 9999;
}

.AXO .xheader {
  position: absolute;
  width: auto;
  height: 32.58%;
  top: 34.21%;
  left: 85.92%;
  cursor: pointer;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.AXO .xheader:hover { filter: brightness(0.85); }
.AXO .xheader:active { filter: brightness(0.7); }

.AXO .theader {
  position: absolute;
  height: 10vw;
  width: 6.36%;
  height: 37.58%;
  top: 31.21%;
  left: 79.92%;
  cursor: pointer;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.AXO .theader:hover { filter: brightness(0.85); }
.AXO .theader:active { filter: brightness(0.7); }

.AXO .text-wrapper-5,
.AXO .text-wrapper-6,
.AXO .text-wrapper-7 {
  position: absolute;
  transform: rotate(0.12deg);
  font-family: "Super Bubble-Regular", Helvetica;
  font-weight: 400;
  color: #d66d7d;
  font-size: 2.083vw;
  letter-spacing: 0;
  line-height: normal;
  cursor: pointer;
  transition: color 0.2s ease, filter 0.2s ease;
}
.AXO .text-wrapper-5 { width: 16.15%; height: 30.57%; top: 34.41%; left: 24.89%; }
.AXO .text-wrapper-6 { width: 9.44%;  height: 30.57%; top: 34.41%; left: 10.18%; }
.AXO .text-wrapper-7 { width: 18.07%; height: 30.57%; top: 34.41%; left: 59.95%; }
.AXO .text-wrapper-5:hover,
.AXO .text-wrapper-6:hover,
.AXO .text-wrapper-7:hover {
  color: #b24052;
  filter: brightness(0.95);
}

.AXO { padding-top: calc(8.177vw + 1.2vw); }