@charset "UTF-8";
.display-xl {
  font-size: 140px;
}
@media (max-width: 1400px) {
  .display-xl {
    font-size: calc(140px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 1200px) {
  .display-xl {
    font-size: calc(140px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 992px) {
  .display-xl {
    font-size: calc(140px * 0.9);
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  .display-xl {
    font-size: calc(140px * 0.75);
    line-height: 1.3;
  }
}
@media (max-width: 576px) {
  .display-xl {
    font-size: calc(140px * 0.6);
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  .display-xl {
    font-size: calc(140px * 0.6);
    line-height: 1.3;
  }
}

.display-lg {
  font-size: 50px;
}
@media (max-width: 1400px) {
  .display-lg {
    font-size: calc(50px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 1200px) {
  .display-lg {
    font-size: calc(50px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 992px) {
  .display-lg {
    font-size: calc(50px * 0.9);
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  .display-lg {
    font-size: calc(50px * 0.75);
    line-height: 1.3;
  }
}
@media (max-width: 576px) {
  .display-lg {
    font-size: calc(50px * 0.6);
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  .display-lg {
    font-size: calc(50px * 0.6);
    line-height: 1.3;
  }
}

.display-md {
  font-size: 40px;
}
@media (max-width: 1400px) {
  .display-md {
    font-size: calc(40px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 1200px) {
  .display-md {
    font-size: calc(40px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 992px) {
  .display-md {
    font-size: calc(40px * 0.9);
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  .display-md {
    font-size: calc(40px * 0.75);
    line-height: 1.3;
  }
}
@media (max-width: 576px) {
  .display-md {
    font-size: calc(40px * 0.6);
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  .display-md {
    font-size: calc(40px * 0.6);
    line-height: 1.3;
  }
}

.display-sm {
  font-size: 30px;
}
@media (max-width: 1400px) {
  .display-sm {
    font-size: calc(30px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 1200px) {
  .display-sm {
    font-size: calc(30px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 992px) {
  .display-sm {
    font-size: calc(30px * 0.9);
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  .display-sm {
    font-size: calc(30px * 0.75);
    line-height: 1.3;
  }
}
@media (max-width: 576px) {
  .display-sm {
    font-size: calc(30px * 0.6);
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  .display-sm {
    font-size: calc(30px * 0.6);
    line-height: 1.3;
  }
}

.display-xs {
  font-size: 28px;
}
@media (max-width: 1400px) {
  .display-xs {
    font-size: calc(28px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 1200px) {
  .display-xs {
    font-size: calc(28px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 992px) {
  .display-xs {
    font-size: calc(28px * 0.9);
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  .display-xs {
    font-size: calc(28px * 0.75);
    line-height: 1.3;
  }
}
@media (max-width: 576px) {
  .display-xs {
    font-size: calc(28px * 0.6);
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  .display-xs {
    font-size: calc(28px * 0.6);
    line-height: 1.3;
  }
}

.text-xl {
  font-size: 26px;
}
@media (max-width: 1400px) {
  .text-xl {
    font-size: calc(26px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 1200px) {
  .text-xl {
    font-size: calc(26px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 992px) {
  .text-xl {
    font-size: calc(26px * 0.9);
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  .text-xl {
    font-size: calc(26px * 0.75);
    line-height: 1.3;
  }
}
@media (max-width: 576px) {
  .text-xl {
    font-size: calc(26px * 0.6);
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  .text-xl {
    font-size: calc(26px * 0.6);
    line-height: 1.3;
  }
}

.text-lg {
  font-size: 24px;
}
@media (max-width: 1400px) {
  .text-lg {
    font-size: calc(24px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 1200px) {
  .text-lg {
    font-size: calc(24px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 992px) {
  .text-lg {
    font-size: calc(24px * 0.9);
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  .text-lg {
    font-size: calc(24px * 0.75);
    line-height: 1.3;
  }
}
@media (max-width: 576px) {
  .text-lg {
    font-size: calc(24px * 0.6);
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  .text-lg {
    font-size: calc(24px * 0.6);
    line-height: 1.3;
  }
}

.text-md {
  font-size: 22px;
}
@media (max-width: 1400px) {
  .text-md {
    font-size: calc(22px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 1200px) {
  .text-md {
    font-size: calc(22px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 992px) {
  .text-md {
    font-size: calc(22px * 0.9);
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  .text-md {
    font-size: calc(22px * 0.75);
    line-height: 1.3;
  }
}
@media (max-width: 576px) {
  .text-md {
    font-size: calc(22px * 0.6);
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  .text-md {
    font-size: calc(22px * 0.6);
    line-height: 1.3;
  }
}

.text-sm {
  font-size: 20px;
}
@media (max-width: 1400px) {
  .text-sm {
    font-size: calc(20px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 1200px) {
  .text-sm {
    font-size: calc(20px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 992px) {
  .text-sm {
    font-size: calc(20px * 0.9);
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  .text-sm {
    font-size: calc(20px * 0.75);
    line-height: 1.3;
  }
}
@media (max-width: 576px) {
  .text-sm {
    font-size: calc(20px * 0.6);
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  .text-sm {
    font-size: calc(20px * 0.6);
    line-height: 1.3;
  }
}

.text-xs {
  font-size: 18px;
}
@media (max-width: 1400px) {
  .text-xs {
    font-size: calc(18px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 1200px) {
  .text-xs {
    font-size: calc(18px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 992px) {
  .text-xs {
    font-size: calc(18px * 0.9);
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  .text-xs {
    font-size: calc(18px * 0.75);
    line-height: 1.3;
  }
}
@media (max-width: 576px) {
  .text-xs {
    font-size: calc(18px * 0.6);
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  .text-xs {
    font-size: calc(18px * 0.6);
    line-height: 1.3;
  }
}

.body-lg {
  font-size: 16px;
}
@media (max-width: 1400px) {
  .body-lg {
    font-size: calc(16px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 1200px) {
  .body-lg {
    font-size: calc(16px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 992px) {
  .body-lg {
    font-size: calc(16px * 0.9);
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  .body-lg {
    font-size: calc(16px * 0.75);
    line-height: 1.3;
  }
}
@media (max-width: 576px) {
  .body-lg {
    font-size: calc(16px * 0.6);
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  .body-lg {
    font-size: calc(16px * 0.6);
    line-height: 1.3;
  }
}

.body-sm {
  font-size: 14px;
}
@media (max-width: 1400px) {
  .body-sm {
    font-size: calc(14px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 1200px) {
  .body-sm {
    font-size: calc(14px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 992px) {
  .body-sm {
    font-size: calc(14px * 0.9);
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  .body-sm {
    font-size: calc(14px * 0.75);
    line-height: 1.3;
  }
}
@media (max-width: 576px) {
  .body-sm {
    font-size: calc(14px * 0.6);
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  .body-sm {
    font-size: calc(14px * 0.6);
    line-height: 1.3;
  }
}

.body-xs {
  font-size: 12px;
}
@media (max-width: 1400px) {
  .body-xs {
    font-size: calc(12px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 1200px) {
  .body-xs {
    font-size: calc(12px * 1);
    line-height: 1.3;
  }
}
@media (max-width: 992px) {
  .body-xs {
    font-size: calc(12px * 0.9);
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  .body-xs {
    font-size: calc(12px * 0.75);
    line-height: 1.3;
  }
}
@media (max-width: 576px) {
  .body-xs {
    font-size: calc(12px * 0.6);
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  .body-xs {
    font-size: calc(12px * 0.6);
    line-height: 1.3;
  }
}

.imbue-font {
  font-family: "Imbue", serif;
}

.ls-1 {
  letter-spacing: 1px;
}

.ls-2 {
  letter-spacing: 2px;
}

.bg-black-color {
  background-color: #111111;
}

.color-black {
  color: #111111;
}

.bg-yellow-color {
  background-color: #F2FF00;
}

.color-yellow {
  color: #F2FF00;
}

.bg-white-color {
  background-color: #FFFFFF;
}

.color-white {
  color: #FFFFFF;
}

.banner-sec {
  height: 100dvh;
}
.banner-sec .logo-wrap {
  max-width: 240px;
  width: 100%;
}
@media (max-width: 992px) {
  .banner-sec .logo-wrap {
    max-width: 120px;
  }
}
@media (max-width: 768px) {
  .banner-sec .logo-wrap {
    max-width: 120px;
  }
}

#videoBanner {
  -o-object-fit: cover;
     object-fit: cover;
}

#soundToggle {
  z-index: 10;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  padding: 8px 12px;
  font-size: 18px;
}

* {
  -webkit-font-smoothing: antialiased;
}

.info-sec.info-h-full {
  height: 100dvh;
}
@media (max-width: 768px) {
  .info-sec.info-h-full {
    height: auto;
  }
}
.info-sec .logo-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.info-sec .logo-wrap {
  /* max-width: 366px;
  @include respond(xxl) {
      max-width: 240px;
  }
  @include respond(lg) {
      max-width: 240px;
  }
  @include respond(md) {
      max-width: 120px;
  } */
}

.marquee-container {
  position: relative;
  overflow: hidden;
}
.marquee-container .marquee-wrap {
  display: flex;
  align-items: center;
  will-change: transform;
  transform: translate3d(0, 0, 0); /* 🔥 FORCE GPU */
  backface-visibility: hidden; /* 🔥 iOS fix */
  white-space: nowrap; /* ✅ prevent wrapping */
}
.marquee-container .marquee-wrap .marquee-item {
  margin-right: 120px;
  display: flex; /* 🔥 more stable than inline-flex */
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* 🔥 VERY IMPORTANT */
  white-space: nowrap;
  transform: translateZ(0);
  transition: transform 0.3s, background 0.3s;
}

.product-card-wrap {
  border: 1px solid #111111;
  border-right: 0px;
  cursor: pointer;
}
.product-card-wrap .product-img-wrap {
  height: 440px;
  width: auto;
  overflow: hidden;
}
.product-card-wrap .product-img-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.5s;
}
.product-card-wrap:hover .product-img-wrap img {
  transform: scale(1.1);
}

.next-anim {
  display: inline-block;
  position: relative;
  overflow: visible;
  cursor: pointer;
}
.next-anim img {
  transition: opacity 0.3s ease;
  position: relative;
}
.next-anim img:hover {
  animation: arrow-move 0.6s ease forwards;
}

/* Keyframes */
@keyframes arrow-move {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  40% {
    transform: translate(10px, -10px); /* move to top-right */
    opacity: 0; /* fade out */
  }
  41% {
    transform: translate(-10px, 10px); /* jump to bottom-left */
    opacity: 0;
  }
  100% {
    transform: translate(0, 0); /* return to original */
    opacity: 1; /* fade in */
  }
}
.produc-banner-sec {
  height: 100dvh;
  background-size: cover;
  background-position: center;
  position: relative;
}
@media (max-width: 768px) {
  .produc-banner-sec {
    background-position: 60%;
  }
}
.produc-banner-sec .produc-list-wrap {
  max-height: 70dvh;
  overflow: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  position: relative;
  z-index: 1;
}
.produc-banner-sec .produc-list-wrap::-webkit-scrollbar {
  display: none;
}
.produc-banner-sec .product-list-item {
  width: 100%;
  height: auto;
  margin-bottom: 35px;
  cursor: pointer;
}
.produc-banner-sec .product-list-item:hover .product-list-title p, .produc-banner-sec .product-list-item.active .product-list-title p {
  color: #F2FF00;
}
.produc-banner-sec .product-list-item:hover .product-list-desc, .produc-banner-sec .product-list-item.active .product-list-desc {
  display: flex;
}
.produc-banner-sec .product-list-item .product-list-desc {
  max-width: 500px;
  width: 100%;
  display: none;
}
.produc-banner-sec .product-preview-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.produc-banner-sec .product-preview-wrap .product-preview-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.3s ease;
}
@media (max-width: 768px) {
  .produc-banner-sec .product-preview-wrap .product-preview-img {
    -o-object-position: 60%;
       object-position: 60%;
  }
}

.slide-item {
  min-width: 300px; /* ensures Slick can calculate boundaries */
}

/* 
  (IMAGE) PARAMS
  =================
  @mixin imgGlitch($name, $intensity, $width, $height, $top, $left)
  =================
  1. Namespace
  2. Intensity
  3. Width (px)
  4. Height (px)
  5. Top (px, abs pos)
  6. Left (px, abs pos)
*/
.glitch-image {
  overflow: hidden;
  width: 640px;
  height: 360px;
  position: relative;
}
.glitch-image.size-md {
  width: 310px;
  height: 240px;
}
.glitch-image.size-sm {
  width: 106px;
  height: 157px;
}
.glitch-image:hover {
  cursor: pointer;
}
@keyframes example-three-anim-1 {
  0% {
    clip: rect(131px, 640px, 104px, 0);
  }
  4% {
    clip: rect(249px, 640px, 10px, 0);
  }
  8% {
    clip: rect(222px, 640px, 100px, 0);
  }
  12% {
    clip: rect(63px, 640px, 3px, 0);
  }
  16% {
    clip: rect(152px, 640px, 61px, 0);
  }
  20% {
    clip: rect(122px, 640px, 208px, 0);
  }
  24% {
    clip: rect(250px, 640px, 104px, 0);
  }
  28% {
    clip: rect(271px, 640px, 135px, 0);
  }
  32% {
    clip: rect(136px, 640px, 242px, 0);
  }
  36% {
    clip: rect(59px, 640px, 152px, 0);
  }
  40% {
    clip: rect(21px, 640px, 108px, 0);
  }
  44% {
    clip: rect(111px, 640px, 197px, 0);
  }
  48% {
    clip: rect(133px, 640px, 320px, 0);
  }
  52% {
    clip: rect(155px, 640px, 44px, 0);
  }
  56% {
    clip: rect(19px, 640px, 172px, 0);
  }
  60% {
    clip: rect(206px, 640px, 255px, 0);
  }
  64% {
    clip: rect(274px, 640px, 316px, 0);
  }
  68% {
    clip: rect(51px, 640px, 298px, 0);
  }
  72% {
    clip: rect(122px, 640px, 251px, 0);
  }
  76% {
    clip: rect(246px, 640px, 144px, 0);
  }
  80% {
    clip: rect(201px, 640px, 54px, 0);
  }
  84% {
    clip: rect(288px, 640px, 270px, 0);
  }
  88% {
    clip: rect(131px, 640px, 88px, 0);
  }
  92% {
    clip: rect(290px, 640px, 119px, 0);
  }
  96% {
    clip: rect(214px, 640px, 224px, 0);
  }
  100% {
    clip: rect(54px, 640px, 41px, 0);
  }
}
@keyframes example-three-anim-2 {
  0% {
    clip: rect(318px, 640px, 199px, 0);
  }
  4% {
    clip: rect(5px, 640px, 189px, 0);
  }
  8% {
    clip: rect(7px, 640px, 156px, 0);
  }
  12% {
    clip: rect(183px, 640px, 296px, 0);
  }
  16% {
    clip: rect(66px, 640px, 298px, 0);
  }
  20% {
    clip: rect(314px, 640px, 253px, 0);
  }
  24% {
    clip: rect(92px, 640px, 72px, 0);
  }
  28% {
    clip: rect(112px, 640px, 286px, 0);
  }
  32% {
    clip: rect(60px, 640px, 36px, 0);
  }
  36% {
    clip: rect(146px, 640px, 292px, 0);
  }
  40% {
    clip: rect(306px, 640px, 233px, 0);
  }
  44% {
    clip: rect(126px, 640px, 22px, 0);
  }
  48% {
    clip: rect(8px, 640px, 188px, 0);
  }
  52% {
    clip: rect(230px, 640px, 261px, 0);
  }
  56% {
    clip: rect(124px, 640px, 210px, 0);
  }
  60% {
    clip: rect(301px, 640px, 113px, 0);
  }
  64% {
    clip: rect(247px, 640px, 255px, 0);
  }
  68% {
    clip: rect(280px, 640px, 293px, 0);
  }
  72% {
    clip: rect(238px, 640px, 231px, 0);
  }
  76% {
    clip: rect(271px, 640px, 175px, 0);
  }
  80% {
    clip: rect(73px, 640px, 189px, 0);
  }
  84% {
    clip: rect(320px, 640px, 133px, 0);
  }
  88% {
    clip: rect(24px, 640px, 265px, 0);
  }
  92% {
    clip: rect(28px, 640px, 75px, 0);
  }
  96% {
    clip: rect(68px, 640px, 84px, 0);
  }
  100% {
    clip: rect(159px, 640px, 85px, 0);
  }
}
.glitch-image:hover > img {
  position: absolute;
  top: 0px;
  left: 0px;
}
.glitch-image:hover > img:nth-child(2),
.glitch-image:hover > img:nth-child(3) {
  clip: rect(0, 0, 0, 0);
}
.glitch-image:hover > img:nth-child(2) {
  left: 2px;
  animation: example-three-anim-1 2s infinite linear alternate-reverse;
}
.glitch-image:hover > img:nth-child(3) {
  left: -2px;
  animation: example-three-anim-2 3s infinite linear alternate-reverse;
}

.form-wrap .form-control {
  box-shadow: none; /* remove default focus shadow */
  border-radius: 0;
}
.form-wrap .form-control:focus {
  box-shadow: none; /* remove default Bootstrap focus */
  border-color: #111111; /* dark border when focused */
}
.form-wrap .form-control:focus + label {
  color: #111111;
}
.form-wrap .form-control.error {
  border-color: #FF0000 !important;
}
.form-wrap .form-floating .form-control {
  padding: 44px 0 20px 2px;
}
.form-wrap .form-floating > label { /* label color */
  transition: all 0.2s ease-in-out;
}
.form-wrap label {
  font-weight: 500;
  color: #111111;
  background: transparent;
}
.form-wrap .btn img {
  width: 130px;
}

.form-wrap .form-control:focus {
  border-color: #111111; /* dark border on focus */
}

section {
  padding: 50px 0;
}/*# sourceMappingURL=index.css.map */