@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes marquee {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
:root {
  --primary: #1bb85d;
  --primary2: #accbb2;
  --primary3: linear-gradient(to right, #d340f0, #3e56ec);
}

.project {
  font-family: "century-gothic", sans-serif;
  position: relative;
  color: #fff;
  padding-bottom: 60px;
  background-color: #c1d5c5;
}
.project img {
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: bottom;
  height: auto;
}
.project h1 {
  position: absolute;
  top: -10px;
  font-size: 0;
}
.project .buyNow {
  --theme: var(--primary);
}
.project .buyNow .selectarea__filter-item--active {
  -webkit-box-shadow: inset 0 0 30px #fffc61;
          box-shadow: inset 0 0 30px #fffc61;
  background: #1bb85d;
}
.project .buyNow .hatch__buyNowBtn-buynow {
  --buyBtn: var(--primary3);
}
.project .buyNow .hatch__buyNowBtn-buynow:hover {
  -webkit-filter: drop-shadow(0 0 10px #d340f0);
          filter: drop-shadow(0 0 10px #d340f0);
}
.project .buyNow .tab__flexBox-icon {
  display: none;
}
.project .buyNow .tab__flexBoxInside {
  background: linear-gradient(45deg, #3ba065 0%, #c4e393 50%, #3ba065 100%) padding-box, linear-gradient(70deg, #c1d5c5) border-box;
  border: 3px solid transparent;
}
.project .buyNow .tab__flexBoxInside::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://storage-asset.msi.com/event/2026/my/may-ximum-power-sale/images/buynow-00.jpg) bottom center no-repeat;
  background-size: cover;
  mix-blend-mode: color-dodge;
  opacity: 0.4;
}
.project .buyNow .tab__flexBox.select .tab__flexBoxInside {
  background: linear-gradient(45deg, #3ba065 0%, #c4e393 50%, #3ba065 100%) padding-box, linear-gradient(70deg, #fffb70 0%, #fff 50%, #fffb70 100%) border-box;
}
.project .common__box {
  position: relative;
  z-index: 2;
  padding: 5px;
  margin: 25px auto;
}
.project .common__titleBox {
  text-align: center;
}
.project .common__titleBox img {
  margin-top: 10px;
}
@media (min-width: 996px) {
  .project .common__titleBox img {
    width: 70%;
  }
}
.project .common-container {
  width: 100%;
  margin: 0 auto;
  max-width: 1330px;
}
.project .common-container-topsp {
  margin-top: 45px;
}
@media (min-width: 996px) {
  .project .common-container-topsp {
    margin-top: 60px;
  }
}
.project .common-title {
  position: relative;
  font-size: 24px;
  text-align: center;
  color: #000;
}
@media (min-width: 996px) {
  .project .common-title {
    font-size: 40px;
  }
}
.project .kv {
  position: relative;
  z-index: 3;
}
.project .kv img {
  width: 100%;
  vertical-align: bottom;
}
.project .kv-img {
  position: relative;
  z-index: 0;
}
.project .dealer {
  padding: 50px;
}
.project .fa-map-marker {
  display: inline-block;
  -webkit-mask: url("https://storage-asset.msi.com/event/2025/MY/my-malaysia-fiesta/images/location.svg") center center no-repeat;
          mask: url("https://storage-asset.msi.com/event/2025/MY/my-malaysia-fiesta/images/location.svg") center center no-repeat;
  -webkit-mask-size: cover;
          mask-size: cover;
  background: -webkit-gradient(linear, left top, right top, from(#3d7c1f), color-stop(#7ae000), to(#1bb85d));
  background: linear-gradient(to right, #3d7c1f, #7ae000, #1bb85d);
  width: 30px;
  height: 30px;
}
.project .fa-map-marker:hover {
  background: #ff2fd8;
}
.project .mainBody {
  position: relative;
  padding-top: 45px;
}
.project .popup {
  position: fixed;
  z-index: 100;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
}
.project .popup__inner {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 90%;
  margin: 0 auto;
  max-width: 1000px;
  height: auto;
  background: #fff;
  color: #222;
  -webkit-box-shadow: #ccc 0 0 30px;
          box-shadow: #ccc 0 0 30px;
}
.project .popup__header {
  position: sticky;
  top: 0;
  background: -webkit-gradient(linear, left top, right top, from(#1bb85d), color-stop(#c1d5c5), to(#7c3aed));
  background: linear-gradient(to right, #1bb85d, #c1d5c5, #7c3aed);
  padding: 10px;
  text-align: center;
  font-size: 24px;
  color: #ffffff;
  text-shadow: rgba(193, 213, 197, 0.9) 1px 1px 3px;
}
@media (min-width: 996px) {
  .project .popup__header {
    font-size: 30px;
  }
}
.project .popup__content {
  height: 80vh;
  overflow-y: auto;
  padding: 25px;
}
@media (min-width: 996px) {
  .project .popup__content {
    padding: 50px;
  }
}
.project .popup-close {
  position: sticky;
  top: 0;
  left: 100%;
}
.project .popup-close::before {
  font-family: "msi-icons" !important;
  content: "\ea02";
  color: #fff;
  font-size: 20px;
  position: absolute;
  left: 100%;
  width: 25px;
  height: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: linear-gradient(135deg, #1bb85d 0%, #9a0d52 100%);
  cursor: pointer;
}
@media (min-width: 996px) {
  .project .popup-close::before {
    width: 50px;
    height: 50px;
    font-size: 30px;
  }
}
.project .popup-close:hover::before {
  background: linear-gradient(135deg, #ff2fd8 0%, #1bb85d 100%);
}
.project .popupBox {
  position: fixed;
  z-index: 100;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
}
.project .popupBox__area {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 90%;
  margin: 0 auto;
  max-width: 1000px;
  height: auto;
  background: #111;
  color: #fff;
  padding: 25px;
}
@media (min-width: 996px) {
  .project .popupBox__area {
    padding: 50px;
  }
}
.project .popupBox__area-close {
  position: sticky;
  top: 0;
  left: 100%;
}
.project .popupBox__area-close::before {
  font-family: "msi-icons" !important;
  content: "\ea02";
  color: #fff;
  font-size: 20px;
  position: absolute;
  top: -55px;
  left: calc(100% + 5px);
  width: 25px;
  height: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
@media (min-width: 996px) {
  .project .popupBox__area-close::before {
    width: 50px;
    height: 50px;
    font-size: 30px;
  }
}
.project .popupBox__area-close:hover::before {
  background: rgba(255, 255, 255, 0.5);
}
.project .popupBox__area-title {
  text-align: center;
  font-size: var(--title-lg);
  font-weight: bold;
  padding-bottom: 20px;
}
.project .popupBox__content {
  height: 80vh;
  overflow-y: auto;
}
.project .tcBox {
  font-size: 17px;
  line-height: 1.8;
}
.project .tcBox .title {
  margin: 20px 0 10px;
  position: relative;
}
.project .tcBox .title span {
  display: inline-block;
  position: relative;
  z-index: 2;
  background: #fff;
  padding-right: 5px;
}
.project .tcBox .title::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  top: 50%;
  background: -webkit-gradient(linear, right top, left top, from(#1bb85d), to(#1bb85d));
  background: linear-gradient(to left, #1bb85d, #1bb85d);
}
.project .tcBox h4 {
  padding: 15px 0;
}
.project .tcBox ol {
  margin-left: 25px;
}
.project .tcBox ol li {
  list-style: lower-roman;
}
.project .tcBox table {
  width: 100%;
  border-collapse: collapse;
}
.project .tcBox table td {
  border: rgba(27, 184, 93, 0.45) 1px solid;
  padding: 5px 10px;
  text-align: center;
  font-size: 15px;
  font-family: var(--MSIBodyFont);
}
.project .tcBox table th {
  background: -webkit-gradient(linear, right top, left top, from(#10182b), to(#0d3d14));
  background: linear-gradient(to left, #10182b, #0d3d14);
  padding: 15px;
  text-align: center;
  color: #fff;
  border-right: #fff 1px solid;
}
.project .tcBox table tr:nth-of-type(1) th:nth-of-type(1) {
  width: 60%;
}
.project .tcBox table tr:nth-of-type(1) th:nth-of-type(2) {
  width: 20%;
}
.project .tcBox table tr:nth-of-type(1) th:nth-of-type(3) {
  width: 20%;
}
.project .tcBox ul {
  margin-left: 20px;
}
.project .tcBox ul li {
  list-style: disc;
  padding: 5px 0;
}
.project .tcBox ul.terms__numLi li {
  list-style-type: decimal;
}
.project .terms-title {
  font-weight: bold;
  font-size: 20px;
  padding-bottom: 15px;
  margin-top: 25px;
  color: #c1d5c5;
  border-bottom: 2px solid rgba(27, 184, 93, 0.35);
}
.project .textBar {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 5px;
  background: #1bb85d;
  color: #ffffff;
  padding: 10px;
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 500;
}
.project .textBar span {
  margin-right: 60px;
  -webkit-animation: marquee 40s linear infinite;
          animation: marquee 40s linear infinite;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 200px;
          flex: 0 0 200px;
}
@media (min-width: 996px) {
  .project .textBar span {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 500px;
            flex: 0 0 500px;
  }
}
.project .wtb {
  padding: 45px 0 0;
}
.project .wtb__box {
  color: #222;
}
.project .wtb__box .toggleBox {
  display: none;
}
.project .wtb__box-content {
  border: #eee 1px solid;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: rgba(255, 255, 255, 0.8);
}
.project .wtb__box-content li {
  position: relative;
  padding: 10px;
  border-left: #eee 1px solid;
}
.project .wtb__box-content li:nth-child(1) {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
  border: none;
}
.project .wtb__box-content li:nth-child(2) {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20%;
          flex: 0 0 20%;
}
.project .wtb__box-content li:nth-child(3) {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  padding-right: 40px;
}
.project .wtb__box-content li:nth-child(3) .fa-map-marker {
  position: absolute;
  top: 50%;
  right: 5px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.project .wtb__box-info {
  position: relative;
  background: rgba(255, 255, 255, 0.6);
  border: rgba(27, 184, 93, 0.55) 1px solid;
  border-radius: 10px;
  padding: 15px;
  margin-top: 3px;
  cursor: pointer;
}
.project .wtb__box-info::after {
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-family: "msi-icons" !important;
  content: "\ea11";
}
.project .wtb__box-info:hover {
  background: white;
}
.project .wtb__box-MainTitle {
  background: linear-gradient(45deg, #3ba065 0%, #c4e393 50%, #3ba065 100%) padding-box, linear-gradient(70deg, #e6faea) border-box;
  color: #000;
  font-weight: bold;
  padding: 15px;
  text-align: center;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  overflow: hidden;
}
.project .wtb__box-MainTitle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://storage-asset.msi.com/event/2026/my/may-ximum-power-sale/images/buynow-00.jpg) center repeat;
  background-size: revert-layer;
  mix-blend-mode: color-dodge;
  opacity: 0.4;
}
.project .wtb__box-subtitle {
  border-radius: 10px;
  background: -webkit-gradient(linear, left top, right top, from(#0d3d14), color-stop(#3d7c1f), to(#1bb85d));
  background: linear-gradient(to right, #0d3d14, #3d7c1f, #1bb85d);
  padding: 1px;
  margin-top: 3px;
}
.project .wtb__box-subtitle p {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.project .wtb__box-title {
  margin-top: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-shadow: inset 0 0 30px #fffc61;
          box-shadow: inset 0 0 30px #fffc61;
  background: #1bb85d;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  font-weight: bold;
}
.project .wtb__box-title li {
  padding: 10px;
  border-left: #eee 1px solid;
}
.project .wtb__box-title li:nth-child(1) {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
  border: none;
}
.project .wtb__box-title li:nth-child(2) {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20%;
          flex: 0 0 20%;
}
.project .wtb__box-title li:nth-child(3) {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
}
.project .wtb__table {
  margin-bottom: 15px;
}
@media (min-width: 996px) {
  .project .wtb__table {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -5px 15px;
  }
}
@media (min-width: 996px) {
  .project .wtb__table .wtb__box-subtitle {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin: 5px;
  }
}

.floating-bubbles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  mix-blend-mode: color-dodge;
}

.floating-bubble {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
}

@-webkit-keyframes bubble-float {
  0%, 100% {
    -webkit-transform: translate(-50%, -50%) translate(0, 0);
            transform: translate(-50%, -50%) translate(0, 0);
  }
  25% {
    -webkit-transform: translate(-50%, -50%) translate(var(--float-x, 0), calc(var(--float-y, 0) * -0.5));
            transform: translate(-50%, -50%) translate(var(--float-x, 0), calc(var(--float-y, 0) * -0.5));
  }
  50% {
    -webkit-transform: translate(-50%, -50%) translate(calc(var(--float-x, 0) * 0.5), var(--float-y, 0));
            transform: translate(-50%, -50%) translate(calc(var(--float-x, 0) * 0.5), var(--float-y, 0));
  }
  75% {
    -webkit-transform: translate(-50%, -50%) translate(calc(var(--float-x, 0) * -0.3), calc(var(--float-y, 0) * 0.3));
            transform: translate(-50%, -50%) translate(calc(var(--float-x, 0) * -0.3), calc(var(--float-y, 0) * 0.3));
  }
}

@keyframes bubble-float {
  0%, 100% {
    -webkit-transform: translate(-50%, -50%) translate(0, 0);
            transform: translate(-50%, -50%) translate(0, 0);
  }
  25% {
    -webkit-transform: translate(-50%, -50%) translate(var(--float-x, 0), calc(var(--float-y, 0) * -0.5));
            transform: translate(-50%, -50%) translate(var(--float-x, 0), calc(var(--float-y, 0) * -0.5));
  }
  50% {
    -webkit-transform: translate(-50%, -50%) translate(calc(var(--float-x, 0) * 0.5), var(--float-y, 0));
            transform: translate(-50%, -50%) translate(calc(var(--float-x, 0) * 0.5), var(--float-y, 0));
  }
  75% {
    -webkit-transform: translate(-50%, -50%) translate(calc(var(--float-x, 0) * -0.3), calc(var(--float-y, 0) * 0.3));
            transform: translate(-50%, -50%) translate(calc(var(--float-x, 0) * -0.3), calc(var(--float-y, 0) * 0.3));
  }
}
@-webkit-keyframes bubble-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: var(--bubble-opacity, 1);
  }
}
@keyframes bubble-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: var(--bubble-opacity, 1);
  }
}
@-webkit-keyframes bubble-fade-out {
  0% {
    opacity: var(--bubble-opacity, 1);
    -webkit-transform: var(--fade-out-transform, translate(-50%, -50%));
            transform: var(--fade-out-transform, translate(-50%, -50%));
  }
  100% {
    opacity: 0;
    -webkit-transform: var(--fade-out-transform, translate(-50%, -50%));
            transform: var(--fade-out-transform, translate(-50%, -50%));
  }
}
@keyframes bubble-fade-out {
  0% {
    opacity: var(--bubble-opacity, 1);
    -webkit-transform: var(--fade-out-transform, translate(-50%, -50%));
            transform: var(--fade-out-transform, translate(-50%, -50%));
  }
  100% {
    opacity: 0;
    -webkit-transform: var(--fade-out-transform, translate(-50%, -50%));
            transform: var(--fade-out-transform, translate(-50%, -50%));
  }
}
.bubble-visible {
  opacity: var(--bubble-opacity, 1);
}/*# sourceMappingURL=main.css.map */