.elementor-26 .elementor-element.elementor-element-125ded1{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-26 .elementor-element.elementor-element-4bc949e{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-26 .elementor-element.elementor-element-81bddf7{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-26 .elementor-element.elementor-element-1c5e40b{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-26 .elementor-element.elementor-element-ef992b8{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-26 .elementor-element.elementor-element-d8c27ba{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-e226a60 *//* ==========================================================
   MOONPLAS SALES PAGE
   SEC 1 — CLEAN LUXURY HERO
========================================================== */

.mpx-hero{
  --purple:#672172;
  --purple2:#8b3198;
  --purple3:#ad61b7;
  --dark:#27112d;
  --muted:#786c7b;
  --cream:#fbf9fc;

  position:relative;
  overflow:hidden;
  padding:92px 24px 0;

  background:
    linear-gradient(
      118deg,
      #ffffff 0%,
      #fcf9fd 44%,
      #f2e8f5 100%
    );

  font-family:'Poppins',sans-serif;
  color:var(--dark);
}


/* ==========================================================
   BACKGROUND
========================================================== */

.mpx-hero::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:43%;
  height:100%;

  background:
    linear-gradient(
      150deg,
      rgba(132,48,147,.09),
      rgba(132,48,147,.02)
    );

  clip-path:
    polygon(
      19% 0,
      100% 0,
      100% 100%,
      0 100%
    );
}


.mpx-hero__bg-text{
  position:absolute;
  right:-25px;
  top:33px;

  color:
    rgba(86,29,98,.035);

  font-size:150px;
  line-height:1;
  font-weight:700;
  letter-spacing:-9px;

  pointer-events:none;
}


.mpx-hero__glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(80px);
}


.mpx-hero__glow--1{
  width:380px;
  height:380px;

  right:11%;
  top:80px;

  background:
    rgba(183,111,197,.22);
}


.mpx-hero__glow--2{
  width:250px;
  height:250px;

  left:-100px;
  bottom:30px;

  background:
    rgba(214,174,223,.18);
}


/* ==========================================================
   CONTAINER
========================================================== */

.mpx-hero__container{
  position:relative;
  z-index:3;

  max-width:1280px;
  min-height:660px;

  margin:0 auto;

  display:grid;
  grid-template-columns:1fr .92fr;

  align-items:center;

  gap:80px;
}


/* ==========================================================
   LEFT CONTENT
========================================================== */

.mpx-hero__content{
  max-width:680px;
  padding-bottom:70px;
}


.mpx-hero__eyebrow{
  display:flex;
  align-items:center;

  gap:11px;

  margin-bottom:22px;

  color:#886c8d;

  font-size:10px;
  line-height:1;

  font-weight:600;
  letter-spacing:2.2px;
}


.mpx-hero__eyebrow span{
  width:35px;
  height:1px;

  background:#7a2988;
}


/* ==========================================================
   MAIN TITLE
========================================================== */

.mpx-hero h1{
  max-width:680px;

  margin:0;

  color:#25102b;

  font-size:66px;
  line-height:1.02;

  /* EDITED - LEBIH TEBAL */
  font-weight:700;

  letter-spacing:-3.1px;
}


.mpx-hero h1 span{
  display:block;

  margin-top:8px;

  color:#853494;

  /* EDITED */
  font-weight:700;
}


/* ==========================================================
   LEAD
========================================================== */

.mpx-hero__lead{
  max-width:590px;

  margin:27px 0 0;

  color:#786c7b;

  font-size:14px;
  line-height:1.9;

  font-weight:400;
}


/* ==========================================================
   BENEFIT LINE
========================================================== */

.mpx-hero__benefit-line{
  display:flex;
  flex-wrap:wrap;

  align-items:center;

  gap:11px;

  margin-top:25px;

  color:#513756;

  font-size:11px;
  font-weight:600;
}


.mpx-hero__benefit-line i{
  width:4px;
  height:4px;

  border-radius:50%;

  background:#a75ab1;
}


/* ==========================================================
   OFFER
========================================================== */

.mpx-hero__offer{
  max-width:390px;

  margin-top:33px;
  padding-top:23px;

  border-top:
    1px solid
    rgba(65,26,72,.1);
}


.mpx-hero__offer-label{
  margin-bottom:7px;

  color:#a28aa6;

  font-size:8px;

  font-weight:700;

  letter-spacing:1.7px;
}


.mpx-hero__price-row{
  display:flex;

  align-items:flex-end;

  gap:23px;
}


.mpx-hero__from{
  display:block;

  margin-bottom:0;

  color:#796d7b;

  font-size:10px;
}


.mpx-hero__price-row strong{
  color:#4f1a59;

  font-size:38px;
  line-height:1;

  font-weight:600;

  letter-spacing:-1.5px;
}


.mpx-hero__pack{
  padding-left:22px;

  border-left:
    1px solid
    rgba(72,31,80,.12);

  color:#5e4962;

  font-size:11px;
  line-height:1.45;

  font-weight:600;
}


.mpx-hero__pack span{
  display:block;

  color:#a18da5;

  font-size:9px;

  font-weight:500;
}


/* ==========================================================
   CTA
========================================================== */

.mpx-hero__actions{
  display:flex;

  align-items:center;

  gap:24px;

  margin-top:28px;
}


.mpx-hero__buy{
  min-height:57px;

  display:inline-flex;

  align-items:center;

  gap:22px;

  padding:
    0 13px
    0 25px;

  border-radius:100px;

  background:#54185f;

  color:#fff;

  text-decoration:none;

  box-shadow:
    0 15px 30px
    rgba(84,24,95,.2);

  transition:.28s ease;
}


.mpx-hero__buy span{
  font-size:12px;
  font-weight:600;
}


.mpx-hero__buy i{
  width:37px;
  height:37px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    rgba(255,255,255,.13);

  font-size:17px;

  font-style:normal;
}


.mpx-hero__buy:hover{
  transform:
    translateY(-3px);

  background:#6e217b;

  box-shadow:
    0 20px 35px
    rgba(84,24,95,.28);
}


.mpx-hero__learn{
  color:#604b64;

  font-size:11px;

  font-weight:600;

  text-decoration:none;

  border-bottom:
    1px solid
    rgba(96,75,100,.4);

  padding-bottom:3px;
}


.mpx-hero__learn:hover{
  color:#792888;
}


/* ==========================================================
   MICRO TEXT
========================================================== */

.mpx-hero__micro{
  display:flex;

  align-items:center;

  gap:10px;

  margin-top:21px;

  color:#9b8c9e;

  font-size:9px;

  font-weight:500;

  letter-spacing:.6px;
}


.mpx-hero__micro i{
  width:3px;
  height:3px;

  border-radius:50%;

  background:#aa78b1;
}


/* ==========================================================
   PRODUCT VISUAL
========================================================== */

.mpx-hero__visual{
  position:relative;

  min-height:600px;

  display:flex;

  align-items:center;

  justify-content:center;
}


.mpx-hero__visual-circle{
  position:absolute;

  width:450px;
  height:450px;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 36% 31%,

      #ffffff 0%,

      #f9f1fb 28%,

      #e6c9ec 61%,

      rgba(196,137,208,.3) 74%,

      transparent 75%
    );
}


.mpx-hero__visual-circle::before{
  content:"";

  position:absolute;

  inset:32px;

  border:
    1px solid
    rgba(121,47,135,.08);

  border-radius:50%;
}


.mpx-hero__product{
  position:relative;

  z-index:5;

  width:
    min(100%,500px);

  max-height:565px;

  object-fit:contain;

  filter:
    drop-shadow(
      0 37px 30px
      rgba(60,19,68,.2)
    );

  transition:.4s ease;
}


.mpx-hero__visual:hover
.mpx-hero__product{
  transform:
    translateY(-6px);
}


/* ==========================================================
   DECORATIVE BERRIES
========================================================== */

.mpx-hero__berry{
  position:absolute;

  z-index:2;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 32% 28%,

      #c973d5,

      #71207e 68%,

      #411049 100%
    );

  box-shadow:
    inset -5px -7px 13px
    rgba(27,6,32,.22),

    0 12px 23px
    rgba(78,23,89,.15);
}


.mpx-hero__berry--1{
  width:32px;
  height:32px;

  top:105px;
  left:55px;
}


.mpx-hero__berry--2{
  width:18px;
  height:18px;

  top:175px;
  right:35px;
}


.mpx-hero__berry--3{
  width:24px;
  height:24px;

  bottom:125px;
  left:35px;
}


/* ==========================================================
   VISUAL LABEL
========================================================== */

.mpx-hero__product-label{
  position:absolute;

  z-index:6;

  top:98px;
  right:0;

  width:95px;
  height:95px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  border-radius:50%;

  background:#fff;

  color:#745079;

  box-shadow:
    0 15px 35px
    rgba(64,19,73,.1);

  font-size:8px;

  line-height:1.25;

  font-weight:600;

  letter-spacing:1px;
}


.mpx-hero__product-label span{
  color:#55205e;

  font-size:11px;

  font-weight:700;

  letter-spacing:.3px;
}


.mpx-hero__visual-tag{
  position:absolute;

  z-index:6;

  right:8px;
  bottom:110px;

  padding:
    13px 17px;

  border:
    1px solid
    rgba(89,32,101,.1);

  border-radius:14px;

  background:
    rgba(255,255,255,.82);

  box-shadow:
    0 14px 32px
    rgba(63,20,71,.08);

  backdrop-filter:
    blur(12px);
}


.mpx-hero__visual-tag span{
  display:block;

  margin-bottom:2px;

  color:#a288a6;

  font-size:7px;

  font-weight:700;

  letter-spacing:1px;
}


.mpx-hero__visual-tag strong{
  color:#4b2552;

  font-size:10px;

  font-weight:600;
}


/* ==========================================================
   BOTTOM BAR
========================================================== */

.mpx-hero__bottom{
  position:relative;

  z-index:5;

  margin:
    0 -24px;

  border-top:
    1px solid
    rgba(73,30,82,.07);

  background:
    rgba(255,255,255,.7);

  backdrop-filter:
    blur(12px);
}


.mpx-hero__bottom-inner{
  max-width:1280px;

  margin:
    0 auto;

  min-height:74px;

  display:flex;

  align-items:center;
}


.mpx-hero__bottom-item{
  min-width:170px;

  display:flex;

  align-items:center;

  gap:11px;

  padding:
    0 28px;

  border-right:
    1px solid
    rgba(72,30,81,.07);
}


.mpx-hero__bottom-item:first-child{
  padding-left:0;
}


.mpx-hero__bottom-item span{
  color:#b397b7;

  font-size:9px;

  font-weight:600;
}


.mpx-hero__bottom-item strong{
  color:#4a304f;

  font-size:11px;

  font-weight:600;
}


.mpx-hero__bottom-tagline{
  margin-left:auto;

  color:#9b7ca0;

  font-size:9px;

  font-weight:600;

  letter-spacing:1.8px;
}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1050px){

  .mpx-hero{
    padding-top:75px;
  }


  .mpx-hero__container{
    gap:40px;
  }


  .mpx-hero h1{
    font-size:53px;

    /*
     * Kekal bold pada tablet.
     */
    font-weight:700;
  }


  .mpx-hero__visual-circle{
    width:390px;
    height:390px;
  }


  .mpx-hero__bottom-item{
    min-width:140px;
  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:767px){

  .mpx-hero{
    padding:
      55px 18px 0;
  }


  .mpx-hero::before{
    top:auto;
    bottom:0;

    width:100%;
    height:43%;

    clip-path:none;
  }


  .mpx-hero__bg-text{
    top:auto;

    right:-10px;

    bottom:155px;

    font-size:75px;
  }


  .mpx-hero__container{
    min-height:auto;

    grid-template-columns:1fr;

    gap:24px;
  }


  .mpx-hero__content{
    padding-bottom:15px;

    text-align:center;
  }


  .mpx-hero__eyebrow{
    justify-content:center;

    font-size:9px;

    letter-spacing:1.5px;
  }


  .mpx-hero h1{
    max-width:550px;

    margin-left:auto;
    margin-right:auto;

    font-size:43px;

    line-height:1.05;

    font-weight:700;

    letter-spacing:-1.8px;
  }


  .mpx-hero h1 span{
    font-weight:700;
  }


  .mpx-hero__lead{
    margin-left:auto;
    margin-right:auto;

    font-size:13px;

    line-height:1.8;
  }


  .mpx-hero__benefit-line{
    justify-content:center;

    font-size:10px;
  }


  .mpx-hero__offer{
    margin-left:auto;
    margin-right:auto;
  }


  .mpx-hero__price-row{
    justify-content:center;

    text-align:left;
  }


  .mpx-hero__actions{
    flex-direction:column;

    gap:16px;
  }


  .mpx-hero__buy{
    width:100%;

    max-width:330px;

    justify-content:space-between;
  }


  .mpx-hero__micro{
    justify-content:center;
  }


  .mpx-hero__visual{
    min-height:460px;
  }


  .mpx-hero__visual-circle{
    width:340px;
    height:340px;
  }


  .mpx-hero__product{
    width:100%;

    max-width:390px;

    max-height:430px;
  }


  .mpx-hero__product-label{
    width:76px;
    height:76px;

    top:46px;
    right:2px;
  }


  .mpx-hero__visual-tag{
    right:0;
    bottom:62px;
  }


  .mpx-hero__berry--1{
    top:75px;
    left:15px;
  }


  .mpx-hero__berry--2{
    top:135px;
    right:20px;
  }


  .mpx-hero__berry--3{
    bottom:80px;
    left:20px;
  }


  .mpx-hero__bottom{
    margin:
      0 -18px;
  }


  .mpx-hero__bottom-inner{
    display:grid;

    grid-template-columns:
      repeat(3,1fr);

    min-height:auto;
  }


  .mpx-hero__bottom-item{
    min-width:0;

    justify-content:center;

    padding:
      18px 8px;
  }


  .mpx-hero__bottom-item:first-child{
    padding-left:8px;
  }


  .mpx-hero__bottom-tagline{
    grid-column:
      1 / -1;

    width:100%;

    margin:0;

    padding:12px;

    border-top:
      1px solid
      rgba(72,30,81,.07);

    text-align:center;
  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media(max-width:430px){

  .mpx-hero h1{
    font-size:37px;

    font-weight:700;

    letter-spacing:-1.4px;
  }


  .mpx-hero__lead{
    font-size:12px;
  }


  .mpx-hero__benefit-line{
    gap:7px;
  }


  .mpx-hero__price-row strong{
    font-size:34px;
  }


  .mpx-hero__visual{
    min-height:420px;
  }


  .mpx-hero__visual-circle{
    width:300px;
    height:300px;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3ce3eb4 *//* ==========================================================
   MOONPLAS
   COENZYME Q10 — SOFT LIGHT PREMIUM VERSION
   GRID / PETAK BACKGROUND REMOVED
========================================================== */

.mp-q10x{
  position:relative;
  overflow:hidden;

  padding:120px 24px 0;

  background:
    radial-gradient(
      circle at 52% 42%,
      rgba(174,112,190,.16),
      transparent 31%
    ),
    radial-gradient(
      circle at 88% 18%,
      rgba(221,190,229,.32),
      transparent 26%
    ),
    linear-gradient(
      128deg,
      #fdfbfe 0%,
      #f8f1fa 48%,
      #efe2f2 100%
    );

  font-family:'Poppins',sans-serif;
  color:#3c2341;

  isolation:isolate;
}


/* ==========================================================
   CLEAN BACKGROUND — NO GRID / NO PETAK
========================================================== */

.mp-q10x::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:-5;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(196,151,207,.10) 0%,
      transparent 28%
    ),
    radial-gradient(
      circle at 86% 72%,
      rgba(187,133,200,.08) 0%,
      transparent 30%
    );

  mask-image:none;
  -webkit-mask-image:none;
}


/* ==========================================================
   BIG Q10 BACKGROUND
========================================================== */

.mp-q10x__bgword{
  position:absolute;

  z-index:-3;

  left:50%;
  top:45%;

  transform:translate(-50%,-50%);

  color:rgba(104,42,116,.045);

  font-size:360px;
  line-height:.8;

  font-weight:800;
  letter-spacing:-28px;

  pointer-events:none;
  user-select:none;
}


/* ==========================================================
   GLOW
========================================================== */

.mp-q10x__glow{
  position:absolute;

  border-radius:50%;

  filter:blur(110px);

  pointer-events:none;
}


.mp-q10x__glow--1{
  width:450px;
  height:450px;

  left:35%;
  top:130px;

  background:rgba(189,126,203,.17);
}


.mp-q10x__glow--2{
  width:320px;
  height:320px;

  right:-80px;
  bottom:100px;

  background:rgba(217,174,226,.24);
}


/* ==========================================================
   WRAP
========================================================== */

.mp-q10x__wrap{
  position:relative;

  z-index:3;

  max-width:1320px;
  min-height:670px;

  margin:0 auto;

  display:grid;

  grid-template-columns:
    .92fr
    1.08fr
    .88fr;

  align-items:center;

  gap:45px;
}


/* ==========================================================
   LEFT CONTENT
========================================================== */

.mp-q10x__copy{
  position:relative;
}


.mp-q10x__kicker{
  display:flex;

  align-items:center;

  gap:11px;

  margin-bottom:20px;

  color:#9a5aa6;

  font-size:8px;
  font-weight:700;

  letter-spacing:1.9px;
}


.mp-q10x__kicker span{
  width:35px;
  height:1px;

  background:#b777c2;
}


/* ==========================================================
   TITLE
========================================================== */

.mp-q10x__copy h2{
  margin:0;

  color:#38213d;

  font-size:54px;

  line-height:1.03;

  font-weight:700;

  letter-spacing:-2.5px;
}


.mp-q10x__copy h2 em{
  display:block;

  margin-top:6px;

  color:#8d469b;

  font-style:normal;

  font-weight:700;
}


/* ==========================================================
   LEAD
========================================================== */

.mp-q10x__lead{
  max-width:430px;

  margin:24px 0 0;

  color:rgba(60,35,65,.68);

  font-size:11px;

  line-height:1.9;
}


/* ==========================================================
   QUICK Q10
========================================================== */

.mp-q10x__quick{
  display:flex;

  align-items:center;

  gap:13px;

  margin-top:25px;
}


.mp-q10x__quick-icon{
  width:46px;
  height:46px;

  display:grid;

  place-items:center;

  border-radius:50%;

  border:1px solid rgba(145,76,157,.20);

  background:rgba(255,255,255,.62);

  color:#8d469b;

  font-size:11px;

  font-weight:700;

  box-shadow:
    0 10px 30px
    rgba(111,57,122,.08);
}


.mp-q10x__quick span{
  display:block;

  margin-bottom:3px;

  color:rgba(68,39,74,.48);

  font-size:7px;

  letter-spacing:1.5px;

  font-weight:700;
}


.mp-q10x__quick strong{
  color:#3c2341;

  font-size:13px;

  font-weight:600;
}


/* ==========================================================
   READY TO SIP FEATURE
========================================================== */

.mp-q10x__sip{
  position:relative;

  margin-top:26px;

  display:grid;

  grid-template-columns:48px 1fr;

  gap:16px;

  max-width:420px;

  padding:17px 18px;

  border:1px solid rgba(117,61,129,.10);

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.82),
      rgba(247,237,249,.62)
    );

  backdrop-filter:blur(12px);

  box-shadow:
    0 16px 45px
    rgba(79,40,87,.055);
}


.mp-q10x__sip-no{
  width:42px;
  height:42px;

  display:grid;

  place-items:center;

  border-radius:12px;

  background:rgba(156,85,170,.09);

  color:#8e4c9b;

  font-size:9px;

  font-weight:700;
}


.mp-q10x__sip-content > span{
  display:block;

  margin-bottom:4px;

  color:#9960a4;

  font-size:7px;

  font-weight:700;

  letter-spacing:1.3px;
}


.mp-q10x__sip-content strong{
  display:block;

  color:#3d2442;

  font-size:14px;

  font-weight:600;
}


.mp-q10x__sip-content p{
  margin:5px 0 0;

  color:rgba(60,35,65,.57);

  font-size:8px;

  line-height:1.7;
}


/* ==========================================================
   CTA
========================================================== */

.mp-q10x__cta{
  min-height:52px;

  margin-top:27px;

  display:inline-flex;

  align-items:center;

  gap:18px;

  padding:
    0 10px
    0 20px;

  border:1px solid rgba(117,61,129,.12);

  border-radius:100px;

  background:#ffffff;

  color:#5e2969;

  text-decoration:none;

  box-shadow:
    0 12px 35px
    rgba(85,43,95,.09);

  transition:.25s ease;
}


.mp-q10x__cta > span{
  font-size:9px;

  font-weight:700;
}


.mp-q10x__cta i{
  width:33px;
  height:33px;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #8c4599,
      #6d2d78
    );

  color:#fff;

  font-size:14px;

  font-style:normal;
}


.mp-q10x__cta:hover{
  transform:translateY(-3px);

  background:#f8effa;

  box-shadow:
    0 16px 40px
    rgba(85,43,95,.14);
}


/* ==========================================================
   CENTER STAGE
========================================================== */

.mp-q10x__stage{
  position:relative;

  min-height:660px;

  display:flex;

  align-items:center;

  justify-content:center;
}


/* ==========================================================
   HALO
========================================================== */

.mp-q10x__halo{
  position:absolute;

  width:350px;
  height:350px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(186,115,201,.20),
      rgba(218,180,226,.12) 48%,
      transparent 72%
    );

  filter:blur(5px);

  animation:
    q10Halo
    4s
    ease-in-out
    infinite;
}


@keyframes q10Halo{

  0%,
  100%{
    transform:scale(.95);
    opacity:.55;
  }

  50%{
    transform:scale(1.08);
    opacity:1;
  }

}


/* ==========================================================
   RINGS
========================================================== */

.mp-q10x__ring{
  position:absolute;

  border-radius:50%;

  border:
    1px solid
    rgba(124,66,136,.15);
}


.mp-q10x__ring--1{
  width:290px;
  height:290px;

  animation:
    q10Spin
    15s
    linear
    infinite;
}


.mp-q10x__ring--1::before{
  content:"";

  position:absolute;

  left:50%;
  top:-5px;

  width:10px;
  height:10px;

  border-radius:50%;

  background:#a35db0;

  box-shadow:
    0 0 20px
    rgba(163,93,176,.55);
}


.mp-q10x__ring--2{
  width:405px;
  height:405px;

  border-style:dashed;

  opacity:.65;

  animation:
    q10SpinReverse
    25s
    linear
    infinite;
}


.mp-q10x__ring--2::before,
.mp-q10x__ring--2::after{
  content:"";

  position:absolute;

  width:7px;
  height:7px;

  border-radius:50%;

  background:#aa67b6;
}


.mp-q10x__ring--2::before{
  left:13%;
  top:15%;
}


.mp-q10x__ring--2::after{
  right:6%;
  bottom:27%;
}


.mp-q10x__ring--3{
  width:500px;
  height:500px;

  opacity:.35;

  animation:
    q10OuterPulse
    4s
    ease-in-out
    infinite;
}


@keyframes q10Spin{

  to{
    transform:rotate(360deg);
  }

}


@keyframes q10SpinReverse{

  to{
    transform:rotate(-360deg);
  }

}


@keyframes q10OuterPulse{

  0%,
  100%{
    transform:scale(.96);
    opacity:.18;
  }

  50%{
    transform:scale(1.02);
    opacity:.52;
  }

}


/* ==========================================================
   PRODUCT IMAGE
========================================================== */

.mp-q10x__product{
  position:relative;

  z-index:6;

  width:min(100%,440px);

  max-height:565px;

  object-fit:contain;

  filter:
    drop-shadow(
      0 40px 30px
      rgba(66,31,73,.18)
    )
    drop-shadow(
      0 0 30px
      rgba(174,101,188,.09)
    );

  animation:
    q10ProductFloat
    4.5s
    ease-in-out
    infinite;
}


@keyframes q10ProductFloat{

  0%,
  100%{
    transform:
      translateY(0)
      rotate(-1deg);
  }

  50%{
    transform:
      translateY(-17px)
      rotate(1deg);
  }

}


/* ==========================================================
   PRODUCT SHADOW
========================================================== */

.mp-q10x__shadow{
  position:absolute;

  z-index:1;

  bottom:70px;

  width:280px;
  height:45px;

  border-radius:50%;

  background:
    rgba(83,44,90,.14);

  filter:blur(23px);

  animation:
    q10Shadow
    4.5s
    ease-in-out
    infinite;
}


@keyframes q10Shadow{

  0%,
  100%{
    transform:scale(1);
    opacity:.55;
  }

  50%{
    transform:scale(.84);
    opacity:.28;
  }

}


/* ==========================================================
   FLOATING LABEL
========================================================== */

.mp-q10x__floating-label{
  position:absolute;

  z-index:8;

  top:105px;
  right:10px;

  width:98px;
  height:98px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  border-radius:50%;

  border:
    1px solid
    rgba(121,62,133,.13);

  background:
    rgba(255,255,255,.76);

  backdrop-filter:blur(14px);

  box-shadow:
    0 18px 45px
    rgba(73,34,80,.10);

  animation:
    q10BadgeFloat
    3.8s
    ease-in-out
    infinite;
}


.mp-q10x__floating-label small{
  margin-bottom:3px;

  color:
    rgba(75,42,81,.50);

  font-size:6px;

  font-weight:700;

  letter-spacing:1px;
}


.mp-q10x__floating-label strong{
  color:#8b4798;

  font-size:19px;

  font-weight:700;
}


@keyframes q10BadgeFloat{

  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-9px);
  }

}


/* ==========================================================
   SIP BADGE
========================================================== */

.mp-q10x__sip-badge{
  position:absolute;

  z-index:9;

  left:5px;
  bottom:105px;

  padding:13px 16px;

  border-radius:14px;

  border:
    1px solid
    rgba(113,58,124,.10);

  background:
    rgba(255,255,255,.76);

  backdrop-filter:blur(14px);

  box-shadow:
    0 20px 40px
    rgba(73,34,80,.08);

  animation:
    q10SipFloat
    4.2s
    ease-in-out
    infinite;
}


.mp-q10x__sip-badge span{
  display:block;

  margin-bottom:3px;

  color:#9c61a7;

  font-size:7px;

  font-weight:700;

  letter-spacing:1.3px;
}


.mp-q10x__sip-badge strong{
  color:#3c2341;

  font-size:11px;

  font-weight:600;
}


@keyframes q10SipFloat{

  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(7px);
  }

}


/* ==========================================================
   RIGHT BENEFITS
========================================================== */

.mp-q10x__benefits{
  display:flex;

  flex-direction:column;

  gap:14px;
}


.mp-q10x__benefit{
  position:relative;

  padding:22px 22px 21px;

  border:
    1px solid
    rgba(112,56,123,.09);

  border-radius:18px;

  background:
    rgba(255,255,255,.60);

  overflow:hidden;

  box-shadow:
    0 12px 35px
    rgba(68,33,76,.045);

  backdrop-filter:blur(10px);

  transition:.28s ease;
}


.mp-q10x__benefit:hover{
  transform:translateX(-5px);

  background:
    rgba(255,255,255,.88);

  border-color:
    rgba(142,72,155,.18);

  box-shadow:
    0 16px 38px
    rgba(68,33,76,.08);
}


.mp-q10x__benefit--featured{
  background:
    linear-gradient(
      135deg,
      rgba(239,218,243,.88),
      rgba(255,255,255,.72)
    );

  border-color:
    rgba(143,75,156,.16);
}


.mp-q10x__benefit--featured::after{
  content:"";

  position:absolute;

  right:-35px;
  top:-35px;

  width:110px;
  height:110px;

  border-radius:50%;

  background:
    rgba(178,103,191,.10);

  filter:blur(8px);
}


.mp-q10x__benefit-top{
  display:flex;

  align-items:center;

  gap:11px;

  margin-bottom:12px;
}


.mp-q10x__benefit-no{
  width:31px;
  height:31px;

  display:grid;

  place-items:center;

  border-radius:50%;

  border:
    1px solid
    rgba(137,68,150,.20);

  color:#8f4b9b;

  background:
    rgba(255,255,255,.65);

  font-size:7px;

  font-weight:700;
}


.mp-q10x__benefit-tag{
  color:#9a64a4;

  font-size:7px;

  font-weight:700;

  letter-spacing:1.5px;
}


.mp-q10x__benefit h3{
  max-width:310px;

  margin:0;

  color:#3d2442;

  font-size:17px;

  line-height:1.4;

  font-weight:700;
}


.mp-q10x__benefit p{
  max-width:320px;

  margin:9px 0 0;

  color:
    rgba(60,35,65,.58);

  font-size:9px;

  line-height:1.75;
}


.mp-q10x__benefit-line{
  width:55px;
  height:2px;

  margin-top:16px;

  border-radius:50px;

  background:
    linear-gradient(
      90deg,
      #9c56a9,
      transparent
    );
}


/* ==========================================================
   MAIN COQ10 FACT
========================================================== */

.mp-q10x__fact{
  margin-top:27px;

  padding:19px 20px;

  border-left:
    2px solid
    #a85bb5;

  background:
    rgba(255,255,255,.58);

  box-shadow:
    0 10px 30px
    rgba(72,36,80,.04);
}


.mp-q10x__fact-label{
  display:block;

  margin-bottom:7px;

  color:#9660a1;

  font-size:7px;

  font-weight:700;

  letter-spacing:1.5px;
}


.mp-q10x__fact strong{
  display:block;

  color:#3b2240;

  font-size:15px;

  line-height:1.55;

  font-weight:600;
}


.mp-q10x__fact strong em{
  display:block;

  color:#914b9e;

  font-style:normal;
}


/* ==========================================================
   PRODUCT NOTE
========================================================== */

.mp-q10x__product-note{
  position:absolute;

  z-index:9;

  left:4px;
  bottom:105px;

  padding:13px 16px;

  border-radius:14px;

  border:
    1px solid
    rgba(113,58,124,.10);

  background:
    rgba(255,255,255,.78);

  backdrop-filter:blur(14px);

  box-shadow:
    0 20px 40px
    rgba(72,34,80,.09);

  animation:
    q10NoteFloat
    4.3s
    ease-in-out
    infinite;
}


.mp-q10x__product-note span{
  display:block;

  margin-bottom:3px;

  color:#9860a3;

  font-size:6px;

  font-weight:700;

  letter-spacing:1.2px;
}


.mp-q10x__product-note strong{
  color:#46264c;

  font-size:11px;

  font-weight:700;
}


@keyframes q10NoteFloat{

  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(7px);
  }

}


/* ==========================================================
   DOT PARTICLES
========================================================== */

.mp-q10x__dot{
  position:absolute;

  z-index:1;

  border-radius:50%;

  background:#a55cb1;

  box-shadow:
    0 0 17px
    rgba(165,92,177,.30);

  animation:
    q10DotFloat
    5s
    ease-in-out
    infinite;
}


.mp-q10x__dot--1{
  width:7px;
  height:7px;

  left:7%;
  top:18%;
}


.mp-q10x__dot--2{
  width:4px;
  height:4px;

  left:24%;
  bottom:21%;

  animation-delay:-1s;
}


.mp-q10x__dot--3{
  width:8px;
  height:8px;

  right:8%;
  top:25%;

  animation-delay:-2s;
}


.mp-q10x__dot--4{
  width:5px;
  height:5px;

  right:17%;
  bottom:18%;

  animation-delay:-3s;
}


@keyframes q10DotFloat{

  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-15px);
  }

}


/* ==========================================================
   READY TO SIP STRIP
========================================================== */

.mp-q10x__sip-strip{
  position:relative;

  z-index:5;

  max-width:1320px;

  margin:30px auto 0;

  padding:0 0 32px;
}


.mp-q10x__sip-strip-inner{
  min-height:76px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:25px;

  padding:17px 21px;

  border:
    1px solid
    rgba(111,56,122,.09);

  border-radius:18px;

  background:
    linear-gradient(
      110deg,
      rgba(255,255,255,.82),
      rgba(245,232,248,.68)
    );

  box-shadow:
    0 14px 40px
    rgba(73,35,80,.05);
}


.mp-q10x__sip-strip span{
  display:block;

  margin-bottom:5px;

  color:#945c9f;

  font-size:7px;

  font-weight:700;

  letter-spacing:1.5px;
}


.mp-q10x__sip-strip strong{
  color:#402446;

  font-size:13px;

  font-weight:600;
}


.mp-q10x__sip-volume{
  flex:0 0 auto;

  width:52px;
  height:52px;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #8d489a,
      #6d2e78
    );

  color:#fff;

  font-size:10px;

  font-weight:800;

  box-shadow:
    0 8px 22px
    rgba(106,48,117,.18);
}


/* ==========================================================
   TICKER
========================================================== */

.mp-q10x__ticker{
  position:relative;

  z-index:5;

  margin:55px -24px 0;

  overflow:hidden;

  border-top:
    1px solid
    rgba(99,48,110,.08);

  border-bottom:
    1px solid
    rgba(99,48,110,.08);

  background:
    rgba(255,255,255,.46);
}


.mp-q10x__ticker-track{
  width:max-content;

  min-height:58px;

  display:flex;

  align-items:center;

  gap:30px;

  animation:
    q10Ticker
    24s
    linear
    infinite;
}


.mp-q10x__ticker-track span{
  color:
    rgba(69,38,75,.56);

  font-size:8px;

  font-weight:700;

  letter-spacing:2px;

  white-space:nowrap;
}


.mp-q10x__ticker-track i{
  color:#9f55ab;

  font-size:10px;

  font-style:normal;
}


@keyframes q10Ticker{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }

}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1050px){

  .mp-q10x__wrap{

    grid-template-columns:
      .9fr
      1fr;

    gap:30px;

  }


  .mp-q10x__benefits{

    grid-column:
      1 / -1;

    display:grid;

    grid-template-columns:
      repeat(3,1fr);

    gap:25px;

    padding-bottom:25px;

  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:767px){

  .mp-q10x{

    padding:
      80px 18px 0;

    background:
      radial-gradient(
        circle at 50% 38%,
        rgba(182,119,196,.16),
        transparent 29%
      ),
      linear-gradient(
        155deg,
        #fdfbfe 0%,
        #f8f1fa 52%,
        #efe2f2 100%
      );

  }


  /*
   * IMPORTANT:
   * No grid/petak is added on mobile either.
   */

  .mp-q10x::before{

    background:
      radial-gradient(
        circle at 10% 18%,
        rgba(196,151,207,.09),
        transparent 30%
      ),
      radial-gradient(
        circle at 90% 68%,
        rgba(187,133,200,.07),
        transparent 32%
      );

    mask-image:none;
    -webkit-mask-image:none;

  }


  .mp-q10x__bgword{

    top:38%;

    font-size:190px;

    letter-spacing:-14px;

  }


  .mp-q10x__wrap{

    grid-template-columns:1fr;

    min-height:auto;

    gap:20px;

  }


  .mp-q10x__copy{
    text-align:center;
  }


  .mp-q10x__kicker{
    justify-content:center;
  }


  .mp-q10x__copy h2{

    font-size:40px;

    letter-spacing:-1.7px;

  }


  .mp-q10x__lead{

    margin-left:auto;

    margin-right:auto;

  }


  .mp-q10x__quick{
    justify-content:center;
  }


  .mp-q10x__sip{

    margin-left:auto;

    margin-right:auto;

    text-align:left;

  }


  .mp-q10x__fact{

    max-width:420px;

    margin-left:auto;

    margin-right:auto;

    text-align:left;

  }


  .mp-q10x__stage{
    min-height:510px;
  }


  .mp-q10x__ring--1{

    width:250px;
    height:250px;

  }


  .mp-q10x__ring--2{

    width:330px;
    height:330px;

  }


  .mp-q10x__ring--3{

    width:410px;
    height:410px;

  }


  .mp-q10x__product{

    max-width:360px;

    max-height:450px;

  }


  .mp-q10x__floating-label{

    width:82px;
    height:82px;

    top:70px;
    right:3px;

  }


  .mp-q10x__floating-label strong{
    font-size:16px;
  }


  .mp-q10x__sip-badge{

    left:0;

    bottom:70px;

  }


  .mp-q10x__product-note{

    left:0;

    bottom:70px;

  }


  .mp-q10x__benefits{

    grid-template-columns:1fr;

    gap:10px;

    padding-bottom:15px;

  }


  .mp-q10x__benefit{
    text-align:left;
  }


  .mp-q10x__benefit:hover{
    transform:none;
  }


  .mp-q10x__sip-strip{

    padding-left:18px;

    padding-right:18px;

  }


  .mp-q10x__ticker{

    margin-left:-18px;

    margin-right:-18px;

  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media(max-width:430px){

  .mp-q10x__copy h2{
    font-size:34px;
  }


  .mp-q10x__lead{
    font-size:10px;
  }


  .mp-q10x__stage{
    min-height:455px;
  }


  .mp-q10x__product{
    max-width:320px;
  }


  .mp-q10x__ring--3{

    width:360px;
    height:360px;

  }


  .mp-q10x__floating-label{

    right:5px;
    top:55px;

  }


  .mp-q10x__sip-badge{
    bottom:55px;
  }


  .mp-q10x__product-note{
    bottom:55px;
  }


  .mp-q10x__sip-strip-inner{
    padding:15px;
  }


  .mp-q10x__sip-strip strong{
    font-size:11px;
  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

  .mp-q10x__product,
  .mp-q10x__halo,
  .mp-q10x__ring,
  .mp-q10x__dot,
  .mp-q10x__floating-label,
  .mp-q10x__sip-badge,
  .mp-q10x__product-note,
  .mp-q10x__ticker-track,
  .mp-q10x__shadow{

    animation:none !important;

  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-22abc75 *//* ==========================================================
   MOONPLAS
   SECTION 2 — WHY MOONPLAS
   READY TO SIP / PRODUCT STORY
========================================================== */

.mp-story{
  position:relative;
  overflow:hidden;

  padding:
    120px 24px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #ffffff 54%,
      #fbf7fc 100%
    );

  font-family:
    'Poppins',
    sans-serif;
}


/* ==========================================================
   BACKGROUND GLOW
========================================================== */

.mp-story::before{
  content:"";

  position:absolute;

  right:-190px;
  top:60px;

  width:440px;
  height:440px;

  border-radius:50%;

  background:
    rgba(192,126,206,.10);

  filter:
    blur(90px);

  pointer-events:none;
}


.mp-story::after{
  content:"";

  position:absolute;

  left:-210px;
  bottom:-190px;

  width:420px;
  height:420px;

  border-radius:50%;

  background:
    rgba(226,198,231,.18);

  filter:
    blur(100px);

  pointer-events:none;
}


/* ==========================================================
   WRAP
========================================================== */

.mp-story__wrap{
  position:relative;

  z-index:2;

  max-width:
    1280px;

  margin:
    0 auto;

  display:grid;

  grid-template-columns:
    .92fr 1.08fr;

  align-items:center;

  gap:
    100px;
}


/* ==========================================================
   LEFT VISUAL
========================================================== */

.mp-story__visual{
  position:relative;

  min-height:
    680px;
}


/* ==========================================================
   IMAGE SHELL
========================================================== */

.mp-story__image-shell{
  position:relative;

  z-index:3;

  width:
    89%;

  height:
    640px;

  overflow:hidden;

  border-radius:
    12px 135px 12px 12px;

  background:
    #efe4f2;

  box-shadow:
    0 28px 65px
    rgba(65,25,72,.08);
}


/* ==========================================================
   IMAGE
========================================================== */

.mp-story__image{
  display:block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform .8s
    cubic-bezier(.2,.7,.2,1);
}


.mp-story__image-shell:hover
.mp-story__image{
  transform:
    scale(1.045);
}


/* ==========================================================
   IMAGE OVERLAY
========================================================== */

.mp-story__image-overlay{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(38,12,44,.02) 30%,
      rgba(38,12,44,.12) 58%,
      rgba(38,12,44,.62) 100%
    );

  pointer-events:none;
}


/* ==========================================================
   TOP BADGE
========================================================== */

.mp-story__badge{
  position:absolute;

  z-index:5;

  top:
    27px;

  right:
    28px;

  width:
    100px;

  height:
    100px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  border:
    1px solid
    rgba(255,255,255,.40);

  border-radius:
    50%;

  background:
    rgba(255,255,255,.88);

  color:
    #76527b;

  font-size:
    7px;

  line-height:
    1.35;

  font-weight:
    700;

  letter-spacing:
    1px;

  backdrop-filter:
    blur(12px);

  box-shadow:
    0 15px 35px
    rgba(64,19,73,.10);
}


.mp-story__badge span{
  display:block;

  margin-bottom:
    3px;

  color:
    #55205f;

  font-size:
    18px;

  line-height:
    1;

  font-weight:
    700;

  letter-spacing:
    -.5px;
}


/* ==========================================================
   IMAGE CAPTION
========================================================== */

.mp-story__caption{
  position:absolute;

  z-index:5;

  left:
    28px;

  bottom:
    29px;

  color:
    rgba(255,255,255,.75);

  font-size:
    7px;

  font-weight:
    600;

  letter-spacing:
    1.7px;
}


.mp-story__caption span{
  display:block;

  margin-bottom:
    6px;

  color:#fff;

  font-size:
    19px;

  line-height:
    1;

  font-weight:
    700;

  letter-spacing:
    .5px;
}


/* ==========================================================
   FLOATING READY TO SIP CARD
========================================================== */

.mp-story__sip-card{
  position:absolute;

  z-index:7;

  right:
    -55px;

  bottom:
    95px;

  width:
    235px;

  display:grid;

  grid-template-columns:
    45px 1fr;

  align-items:center;

  gap:
    13px;

  padding:
    16px;

  border:
    1px solid
    rgba(90,32,101,.09);

  border-radius:
    18px;

  background:
    rgba(255,255,255,.94);

  box-shadow:
    0 22px 50px
    rgba(55,17,63,.13);

  backdrop-filter:
    blur(16px);

  animation:
    mpStoryFloat
    4s
    ease-in-out
    infinite;
}


@keyframes mpStoryFloat{

  0%,
  100%{
    transform:
      translateY(0);
  }

  50%{
    transform:
      translateY(-8px);
  }

}


/* ==========================================================
   SIP ICON
========================================================== */

.mp-story__sip-icon{
  width:
    44px;

  height:
    44px;

  display:grid;

  place-items:center;

  border-radius:
    50%;

  background:
    linear-gradient(
      135deg,
      #672172,
      #91369f
    );
}


.mp-story__sip-icon span{
  color:
    #fff;

  font-size:
    15px;

  font-weight:
    700;
}


/* ==========================================================
   SIP CARD TEXT
========================================================== */

.mp-story__sip-card small{
  display:block;

  margin-bottom:
    4px;

  color:
    #a183a6;

  font-size:
    6px;

  font-weight:
    700;

  letter-spacing:
    1.2px;
}


.mp-story__sip-card strong{
  display:block;

  color:
    #48204f;

  font-size:
    12px;

  line-height:
    1.35;

  font-weight:
    700;
}


.mp-story__sip-card p{
  margin:
    4px 0 0;

  color:
    #917f94;

  font-size:
    8px;

  line-height:
    1.5;
}


/* ==========================================================
   DECORATIVE SHAPE
========================================================== */

.mp-story__shape{
  position:absolute;

  z-index:1;

  width:
    255px;

  height:
    255px;

  right:
    2px;

  bottom:
    -20px;

  border-radius:
    50%;

  background:
    #eee1f1;
}


.mp-story__shape::before{
  content:"";

  position:absolute;

  inset:
    35px;

  border:
    1px solid
    rgba(113,52,126,.12);

  border-radius:
    50%;
}


/* ==========================================================
   VERTICAL WORDING
========================================================== */

.mp-story__outline{
  position:absolute;

  z-index:2;

  left:
    -46px;

  bottom:
    125px;

  color:
    rgba(97,34,108,.15);

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    3px;

  transform:
    rotate(-90deg);

  transform-origin:
    center;

  white-space:
    nowrap;
}


/* ==========================================================
   RIGHT CONTENT
========================================================== */

.mp-story__content{
  max-width:
    650px;
}


/* ==========================================================
   EYEBROW
========================================================== */

.mp-story__eyebrow{
  display:flex;

  align-items:center;

  gap:
    12px;

  margin-bottom:
    21px;

  color:
    #947499;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    2px;
}


.mp-story__eyebrow span{
  width:
    34px;

  height:
    1px;

  background:
    #7f2f8d;
}


/* ==========================================================
   TITLE
========================================================== */

.mp-story__content h2{
  margin:0;

  color:
    #28142e;

  font-size:
    51px;

  line-height:
    1.07;

  font-weight:
    700;

  letter-spacing:
    -2.3px;
}


.mp-story__content h2 span{
  display:block;

  margin-top:
    5px;

  color:
    #8a3598;

  font-weight:
    700;
}


/* ==========================================================
   LEAD
========================================================== */

.mp-story__lead{
  max-width:
    610px;

  margin:
    24px 0 0;

  color:
    #7d7180;

  font-size:
    13px;

  line-height:
    1.9;
}


/* ==========================================================
   READY TO SIP FEATURE
========================================================== */

.mp-story__feature{
  position:relative;

  margin-top:
    28px;

  padding:
    20px 21px;

  border:
    1px solid
    rgba(94,30,106,.09);

  border-radius:
    20px;

  background:
    linear-gradient(
      125deg,
      #f8f0fa,
      #fff 72%
    );

  overflow:hidden;
}


.mp-story__feature::after{
  content:"";

  position:absolute;

  width:
    130px;

  height:
    130px;

  right:
    -50px;

  top:
    -55px;

  border-radius:
    50%;

  background:
    rgba(152,66,168,.08);
}


/* ==========================================================
   FEATURE MAIN
========================================================== */

.mp-story__feature-main{
  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
    60px 1fr;

  gap:
    16px;

  align-items:center;
}


/* ==========================================================
   30ML ICON
========================================================== */

.mp-story__feature-icon{
  width:
    58px;

  height:
    58px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  border-radius:
    17px;

  background:
    #5d1f68;

  color:
    #fff;

  font-size:
    18px;

  line-height:
    1;

  font-weight:
    700;

  box-shadow:
    0 12px 25px
    rgba(87,29,97,.17);
}


.mp-story__feature-icon span{
  margin-top:
    3px;

  color:
    #dcb7e2;

  font-size:
    7px;

  letter-spacing:
    .8px;
}


/* ==========================================================
   FEATURE WORDING
========================================================== */

.mp-story__feature-main small{
  display:block;

  margin-bottom:
    4px;

  color:
    #9b77a0;

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    1.5px;
}


.mp-story__feature-main strong{
  display:block;

  color:
    #45204e;

  font-size:
    16px;

  line-height:
    1.4;

  font-weight:
    700;
}


.mp-story__feature-main p{
  max-width:
    450px;

  margin:
    5px 0 0;

  color:
    #87788a;

  font-size:
    9px;

  line-height:
    1.7;
}


/* ==========================================================
   NO MIXING LABEL
========================================================== */

.mp-story__feature-note{
  position:relative;

  z-index:2;

  display:flex;

  align-items:center;

  gap:
    8px;

  margin-top:
    14px;

  margin-left:
    76px;

  color:
    #7d5c82;

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    1.3px;
}


.mp-story__feature-note span{
  width:
    24px;

  height:
    1px;

  background:
    #b779c1;
}


/* ==========================================================
   STORY POINTS
========================================================== */

.mp-story__points{
  margin-top:
    29px;

  border-top:
    1px solid
    rgba(76,36,84,.09);
}


.mp-story__point{
  display:grid;

  grid-template-columns:
    57px 1fr;

  gap:
    18px;

  padding:
    21px 0;

  border-bottom:
    1px solid
    rgba(76,36,84,.09);

  transition:
    padding-left .25s ease;
}


.mp-story__point:hover{
  padding-left:
    7px;
}


/* ==========================================================
   POINT NUMBER
========================================================== */

.mp-story__point-no{
  padding-top:
    3px;

  color:
    #c1a6c5;

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    1px;
}


/* ==========================================================
   POINT CONTENT
========================================================== */

.mp-story__point-body > span{
  display:block;

  margin-bottom:
    5px;

  color:
    #a485aa;

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    1.5px;
}


.mp-story__point-body h3{
  margin:0;

  color:
    #402047;

  font-size:
    16px;

  line-height:
    1.4;

  font-weight:
    700;
}


.mp-story__point-body p{
  max-width:
    530px;

  margin:
    7px 0 0;

  color:
    #887d8b;

  font-size:
    10px;

  line-height:
    1.75;
}


/* ==========================================================
   BOTTOM STATEMENT
========================================================== */

.mp-story__statement{
  margin-top:
    28px;

  padding:
    24px 27px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:
    30px;

  border-radius:
    20px;

  background:
    linear-gradient(
      110deg,
      #f4eaf6,
      #fbf8fc
    );
}


/* ==========================================================
   STATEMENT TEXT
========================================================== */

.mp-story__statement small{
  display:block;

  margin-bottom:
    6px;

  color:
    #a183a6;

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    1.7px;
}


.mp-story__statement strong{
  display:block;

  color:
    #45204e;

  font-size:
    20px;

  line-height:
    1.35;

  font-weight:
    700;
}


.mp-story__statement strong span{
  color:
    #8d399b;
}


/* ==========================================================
   ARROW
========================================================== */

.mp-story__statement a{
  flex:
    0 0 auto;

  width:
    56px;

  height:
    56px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:
    50%;

  background:
    #5e1e6a;

  color:
    #fff;

  text-decoration:none;

  box-shadow:
    0 12px 25px
    rgba(92,30,104,.16);

  transition:
    .28s ease;
}


.mp-story__statement a i{
  font-size:
    20px;

  font-style:
    normal;
}


.mp-story__statement a:hover{
  transform:
    rotate(-8deg)
    scale(1.06);

  background:
    #7c298a;
}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1050px){

  .mp-story{
    padding:
      95px 22px;
  }


  .mp-story__wrap{
    gap:
      55px;
  }


  .mp-story__visual{
    min-height:
      590px;
  }


  .mp-story__image-shell{
    height:
      560px;
  }


  .mp-story__content h2{
    font-size:
      42px;
  }


  .mp-story__sip-card{
    right:
      -30px;

    width:
      220px;
  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:767px){

  .mp-story{
    padding:
      75px 18px;
  }


  .mp-story__wrap{
    grid-template-columns:
      1fr;

    gap:
      58px;
  }


  /* IMAGE FIRST */

  .mp-story__visual{
    min-height:
      540px;
  }


  .mp-story__image-shell{
    width:
      94%;

    height:
      500px;

    border-radius:
      8px 90px 8px 8px;
  }


  .mp-story__shape{
    width:
      195px;

    height:
      195px;

    right:
      -10px;
  }


  .mp-story__sip-card{
    right:
      0;

    bottom:
      75px;

    width:
      215px;
  }


  .mp-story__outline{
    display:none;
  }


  /* CONTENT */

  .mp-story__content{
    max-width:
      100%;
  }


  .mp-story__eyebrow{
    justify-content:center;
  }


  .mp-story__content h2{
    text-align:center;

    font-size:
      37px;

    letter-spacing:
      -1.5px;
  }


  .mp-story__lead{
    margin-left:auto;
    margin-right:auto;

    text-align:center;

    font-size:
      12px;
  }


  /* FEATURE */

  .mp-story__feature{
    margin-top:
      25px;
  }


  .mp-story__feature-main{
    text-align:left;
  }


  /* POINT */

  .mp-story__point{
    grid-template-columns:
      41px 1fr;

    gap:
      12px;
  }


  /* STATEMENT */

  .mp-story__statement{
    padding:
      21px;
  }


  .mp-story__statement strong{
    font-size:
      18px;
  }


  .mp-story__statement a{
    width:
      50px;

    height:
      50px;
  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media(max-width:430px){

  .mp-story{
    padding:
      65px 16px;
  }


  .mp-story__visual{
    min-height:
      465px;
  }


  .mp-story__image-shell{
    width:
      96%;

    height:
      435px;

    border-radius:
      8px 70px 8px 8px;
  }


  .mp-story__badge{
    width:
      80px;

    height:
      80px;

    top:
      18px;

    right:
      18px;
  }


  .mp-story__badge span{
    font-size:
      15px;
  }


  .mp-story__caption{
    left:
      20px;

    bottom:
      20px;
  }


  .mp-story__sip-card{
    right:
      -2px;

    bottom:
      66px;

    width:
      190px;

    grid-template-columns:
      39px 1fr;

    padding:
      13px;
  }


  .mp-story__sip-icon{
    width:
      38px;

    height:
      38px;
  }


  .mp-story__sip-card strong{
    font-size:
      10px;
  }


  .mp-story__content h2{
    font-size:
      32px;
  }


  .mp-story__feature{
    padding:
      17px;
  }


  .mp-story__feature-main{
    grid-template-columns:
      52px 1fr;

    gap:
      12px;
  }


  .mp-story__feature-icon{
    width:
      50px;

    height:
      50px;

    font-size:
      16px;
  }


  .mp-story__feature-main strong{
    font-size:
      14px;
  }


  .mp-story__feature-note{
    margin-left:
      64px;
  }


  .mp-story__point-body h3{
    font-size:
      15px;
  }


  .mp-story__statement{
    align-items:
      flex-start;
  }


  .mp-story__statement strong{
    font-size:
      16px;
  }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

  .mp-story__sip-card{
    animation:none;
  }

  .mp-story__image{
    transition:none;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-219c680 *//* ==========================================================
   MOONPLAS
   SECTION 3 — BENEFIT STORY
   SOFT LIGHT PREMIUM / CLEAN VERSION
========================================================== */

.mp-benefit-story{
  position:relative;
  overflow:hidden;

  padding:
    120px 24px 0;

  background:
    radial-gradient(
      circle at 10% 12%,
      rgba(205,163,215,.16),
      transparent 29%
    ),
    radial-gradient(
      circle at 88% 68%,
      rgba(188,127,202,.11),
      transparent 31%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #fbf7fc 46%,
      #f5ebf7 100%
    );

  font-family:
    'Poppins',
    sans-serif;

  color:#3d2442;

  isolation:isolate;
}


/* ==========================================================
   BACKGROUND GLOW
========================================================== */

.mp-benefit-story::before{
  content:"";

  position:absolute;

  width:
    450px;

  height:
    450px;

  top:
    -190px;

  left:
    -190px;

  border-radius:
    50%;

  background:
    rgba(184,110,199,.10);

  filter:
    blur(105px);

  pointer-events:none;
}


.mp-benefit-story::after{
  content:"";

  position:absolute;

  width:
    380px;

  height:
    380px;

  right:
    -150px;

  bottom:
    120px;

  border-radius:
    50%;

  background:
    rgba(139,54,153,.065);

  filter:
    blur(110px);

  pointer-events:none;
}


/* ==========================================================
   WRAP
========================================================== */

.mp-benefit-story__wrap{
  position:relative;

  z-index:2;

  max-width:
    1280px;

  margin:
    0 auto;

  display:grid;

  grid-template-columns:
    .96fr 1.04fr;

  gap:
    95px;

  align-items:center;
}


/* ==========================================================
   LEFT CONTENT
========================================================== */

.mp-benefit-story__content{
  max-width:
    620px;
}


/* EYEBROW */

.mp-benefit-story__eyebrow{
  display:flex;

  align-items:center;

  gap:
    12px;

  margin-bottom:
    20px;

  color:
    #947899;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    1.8px;
}


.mp-benefit-story__eyebrow span{
  width:
    35px;

  height:
    1px;

  background:
    #7d2d8b;
}


/* ==========================================================
   TITLE
========================================================== */

.mp-benefit-story__content h2{
  margin:0;

  color:
    #28142e;

  font-size:
    54px;

  line-height:
    1.03;

  font-weight:
    700;

  letter-spacing:
    -2.5px;
}


.mp-benefit-story__content h2 span{
  color:
    #8b3699;

  font-weight:
    700;
}


/* ==========================================================
   LEAD
========================================================== */

.mp-benefit-story__lead{
  max-width:
    560px;

  margin:
    24px 0 0;

  color:
    #7d7180;

  font-size:
    13px;

  line-height:
    1.9;
}


/* ==========================================================
   BENEFIT LIST
   CLEAN — NO CARD / NO PETAK
========================================================== */

.mp-benefit-story__list{
  margin-top:
    35px;

  border-top:
    1px solid
    rgba(77,35,85,.09);
}


.mp-benefit-story__item{
  position:relative;

  display:grid;

  grid-template-columns:
    48px 1fr;

  gap:
    16px;

  padding:
    22px 0;

  border-bottom:
    1px solid
    rgba(77,35,85,.09);

  background:transparent;

  transition:
    .25s ease;
}


.mp-benefit-story__item:hover{
  padding-left:
    8px;
}


/* ==========================================================
   ICON
========================================================== */

.mp-benefit-story__icon{
  width:
    39px;

  height:
    39px;

  display:grid;

  place-items:center;

  border-radius:
    50%;

  border:
    1px solid
    rgba(123,42,137,.10);

  background:
    rgba(255,255,255,.70);

  color:
    #7b2a89;

  font-size:
    14px;

  box-shadow:
    0 8px 20px
    rgba(83,30,93,.045);
}


/* ==========================================================
   BENEFIT TEXT
========================================================== */

.mp-benefit-story__item small{
  display:block;

  margin-bottom:
    5px;

  color:
    #aa8dad;

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    1.5px;
}


.mp-benefit-story__item h3{
  margin:0;

  color:
    #402047;

  font-size:
    17px;

  line-height:
    1.35;

  font-weight:
    700;
}


.mp-benefit-story__item p{
  max-width:
    480px;

  margin:
    7px 0 0;

  color:
    #897d8b;

  font-size:
    10px;

  line-height:
    1.75;
}


/* ==========================================================
   RIGHT VISUAL
========================================================== */

.mp-benefit-story__visual{
  position:relative;

  min-height:
    680px;
}


/* ==========================================================
   IMAGE FRAME
========================================================== */

.mp-benefit-story__frame{
  position:absolute;

  z-index:3;

  top:0;

  right:0;

  width:
    88%;

  height:
    620px;

  overflow:hidden;

  border:
    1px solid
    rgba(94,39,104,.07);

  border-radius:
    120px 12px 12px 12px;

  background:
    #e7d9ea;

  box-shadow:
    0 26px 65px
    rgba(59,19,68,.08);
}


/* ==========================================================
   IMAGE
========================================================== */

.mp-benefit-story__image{
  display:block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform .8s
    cubic-bezier(.2,.7,.2,1);
}


.mp-benefit-story__frame:hover
.mp-benefit-story__image{
  transform:
    scale(1.045);
}


/* ==========================================================
   IMAGE OVERLAY
========================================================== */

.mp-benefit-story__overlay{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(31,10,37,.01) 30%,
      rgba(31,10,37,.12) 55%,
      rgba(31,10,37,.65) 100%
    );
}


/* ==========================================================
   VISUAL COPY
========================================================== */

.mp-benefit-story__visual-copy{
  position:absolute;

  z-index:5;

  left:
    35px;

  bottom:
    35px;

  color:
    #fff;
}


.mp-benefit-story__visual-copy small{
  display:block;

  margin-bottom:
    9px;

  color:
    rgba(255,255,255,.66);

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    1.7px;
}


.mp-benefit-story__visual-copy strong{
  display:block;

  max-width:
    320px;

  color:#fff;

  font-size:
    31px;

  line-height:
    1.15;

  font-weight:
    700;

  letter-spacing:
    -1px;
}


.mp-benefit-story__visual-copy strong span{
  display:block;

  color:
    #e5bde9;
}


/* ==========================================================
   READY TO SIP BADGE
========================================================== */

.mp-benefit-story__ready{
  position:absolute;

  z-index:6;

  top:
    30px;

  right:
    30px;

  width:
    100px;

  height:
    100px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  border:
    1px solid
    rgba(104,46,115,.10);

  border-radius:
    50%;

  background:
    rgba(255,255,255,.94);

  box-shadow:
    0 17px 35px
    rgba(50,15,57,.10);

  backdrop-filter:
    blur(14px);

  animation:
    mpBenefitBadgeFloat
    4s
    ease-in-out
    infinite;
}


.mp-benefit-story__ready > span{
  color:
    #a17fa6;

  font-size:
    6px;

  font-weight:
    700;

  letter-spacing:
    1.3px;
}


.mp-benefit-story__ready strong{
  margin-top:
    2px;

  color:
    #5c2067;

  font-size:
    13px;

  font-weight:
    800;
}


.mp-benefit-story__ready small{
  margin-top:
    4px;

  color:
    #b89abc;

  font-size:
    7px;

  font-weight:
    700;
}


@keyframes mpBenefitBadgeFloat{

  0%,
  100%{
    transform:
      translateY(0);
  }

  50%{
    transform:
      translateY(-8px);
  }

}


/* ==========================================================
   FLOATING STAT
========================================================== */

.mp-benefit-story__stat{
  position:absolute;

  z-index:7;

  left:
    0;

  bottom:
    18px;

  width:
    220px;

  padding:
    24px;

  border:
    1px solid
    rgba(83,29,94,.07);

  border-radius:
    21px;

  background:
    rgba(255,255,255,.95);

  box-shadow:
    0 20px 50px
    rgba(62,22,70,.10);

  backdrop-filter:
    blur(16px);
}


.mp-benefit-story__stat > span{
  display:block;

  margin-bottom:
    11px;

  color:
    #9f85a4;

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    1.4px;
}


/* NUMBER */

.mp-benefit-story__stat strong{
  display:flex;

  align-items:flex-end;

  gap:
    6px;

  color:
    #572061;

  font-size:
    41px;

  line-height:
    1;

  font-weight:
    700;
}


.mp-benefit-story__stat strong small{
  margin-bottom:
    4px;

  color:
    #8e7493;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    1px;
}


.mp-benefit-story__stat p{
  margin:
    12px 0 0;

  color:
    #8b7c8e;

  font-size:
    9px;

  line-height:
    1.65;
}


/* ==========================================================
   STAT BOTTOM LINE
========================================================== */

.mp-benefit-story__stat-line{
  display:flex;

  align-items:center;

  gap:
    7px;

  margin-top:
    13px;

  padding-top:
    12px;

  border-top:
    1px solid
    rgba(78,31,87,.08);
}


.mp-benefit-story__stat-line i{
  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    #873495;
}


.mp-benefit-story__stat-line span{
  color:
    #9c7ca1;

  font-size:
    6px;

  font-weight:
    700;

  letter-spacing:
    1px;
}


/* ==========================================================
   LARGE NUMBER
========================================================== */

.mp-benefit-story__big-number{
  position:absolute;

  z-index:1;

  right:
    -6px;

  top:
    -42px;

  color:
    rgba(83,28,95,.045);

  font-size:
    130px;

  line-height:
    1;

  font-weight:
    700;

  letter-spacing:
    -8px;

  pointer-events:none;
}


/* ==========================================================
   ORBIT DECOR
========================================================== */

.mp-benefit-story__orbit{
  position:absolute;

  z-index:1;

  right:
    -45px;

  bottom:
    -25px;

  width:
    245px;

  height:
    245px;

  border:
    1px solid
    rgba(126,46,140,.075);

  border-radius:
    50%;
}


.mp-benefit-story__orbit::before{
  content:"";

  position:absolute;

  inset:
    32px;

  border:
    1px dashed
    rgba(126,46,140,.10);

  border-radius:
    50%;
}


/* ==========================================================
   BOTTOM STRIP
   LIGHT PREMIUM VERSION
========================================================== */

.mp-benefit-story__bottom{
  position:relative;

  margin:
    105px -24px 0;

  overflow:hidden;

  border-top:
    1px solid
    rgba(104,48,115,.08);

  background:
    linear-gradient(
      110deg,
      #f5e8f7 0%,
      #eee0f2 55%,
      #e6d3eb 100%
    );
}


.mp-benefit-story__bottom::before{
  content:"";

  position:absolute;

  width:
    300px;

  height:
    300px;

  right:
    11%;

  top:
    -145px;

  border-radius:
    50%;

  background:
    rgba(172,86,190,.14);

  filter:
    blur(80px);
}


/* ==========================================================
   BOTTOM INNER
========================================================== */

.mp-benefit-story__bottom-inner{
  position:relative;

  z-index:2;

  max-width:
    1280px;

  min-height:
    140px;

  margin:
    0 auto;

  padding:
    30px 24px;

  display:grid;

  grid-template-columns:
    .65fr 1.6fr auto;

  gap:
    45px;

  align-items:center;
}


/* LABEL */

.mp-benefit-story__bottom-label{
  color:
    #95609f;

  font-size:
    8px;

  line-height:
    1.6;

  font-weight:
    700;

  letter-spacing:
    1.7px;
}


/* TITLE */

.mp-benefit-story__bottom h3{
  margin:0;

  color:
    #3b2041;

  font-size:
    27px;

  line-height:
    1.3;

  font-weight:
    700;

  letter-spacing:
    -.8px;
}


.mp-benefit-story__bottom h3 span{
  display:block;

  color:
    #8b4398;
}


/* BUTTON */

.mp-benefit-story__bottom a{
  min-height:
    49px;

  display:inline-flex;

  align-items:center;

  gap:
    13px;

  padding:
    0 20px;

  border:
    1px solid
    rgba(104,47,115,.12);

  border-radius:
    100px;

  background:
    linear-gradient(
      135deg,
      #8c4599,
      #692a74
    );

  color:
    #fff;

  text-decoration:none;

  font-size:
    10px;

  font-weight:
    700;

  box-shadow:
    0 12px 28px
    rgba(91,40,101,.15);

  transition:
    .25s ease;
}


.mp-benefit-story__bottom a:hover{
  transform:
    translateY(-3px);

  background:
    linear-gradient(
      135deg,
      #984fa5,
      #742f80
    );

  color:
    #fff;

  box-shadow:
    0 17px 34px
    rgba(91,40,101,.22);
}


.mp-benefit-story__bottom a span{
  font-size:
    15px;
}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1050px){

  .mp-benefit-story{
    padding:
      95px 22px 0;
  }


  .mp-benefit-story__wrap{
    gap:
      48px;
  }


  .mp-benefit-story__content h2{
    font-size:
      45px;
  }


  .mp-benefit-story__frame{
    width:
      92%;
  }


  .mp-benefit-story__bottom{
    margin-left:
      -22px;

    margin-right:
      -22px;
  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:767px){

  .mp-benefit-story{
    padding:
      75px 18px 0;

    background:
      radial-gradient(
        circle at 50% 12%,
        rgba(201,154,212,.14),
        transparent 27%
      ),
      radial-gradient(
        circle at 85% 65%,
        rgba(184,122,198,.08),
        transparent 30%
      ),
      linear-gradient(
        155deg,
        #ffffff 0%,
        #faf6fb 52%,
        #f3e8f5 100%
      );
  }


  .mp-benefit-story__wrap{
    grid-template-columns:
      1fr;

    gap:
      58px;
  }


  .mp-benefit-story__content{
    max-width:
      100%;
  }


  .mp-benefit-story__eyebrow{
    justify-content:center;

    text-align:center;
  }


  .mp-benefit-story__content h2{
    text-align:center;

    font-size:
      38px;

    letter-spacing:
      -1.5px;
  }


  .mp-benefit-story__lead{
    margin-left:auto;
    margin-right:auto;

    text-align:center;

    font-size:
      12px;
  }


  /* BENEFIT */

  .mp-benefit-story__item{
    grid-template-columns:
      45px 1fr;

    gap:
      13px;

    background:transparent;
  }


  .mp-benefit-story__item:hover{
    padding-left:
      0;
  }


  /* VISUAL */

  .mp-benefit-story__visual{
    min-height:
      540px;
  }


  .mp-benefit-story__frame{
    width:
      92%;

    height:
      500px;

    border-radius:
      85px 8px 8px 8px;
  }


  .mp-benefit-story__visual-copy{
    left:
      24px;

    bottom:
      25px;
  }


  .mp-benefit-story__visual-copy strong{
    font-size:
      25px;
  }


  .mp-benefit-story__ready{
    width:
      82px;

    height:
      82px;

    top:
      20px;

    right:
      20px;
  }


  .mp-benefit-story__stat{
    width:
      190px;

    bottom:
      0;

    padding:
      18px;
  }


  .mp-benefit-story__big-number{
    font-size:
      92px;

    top:
      -28px;
  }


  /* BOTTOM */

  .mp-benefit-story__bottom{
    margin:
      80px -18px 0;
  }


  .mp-benefit-story__bottom-inner{
    grid-template-columns:
      1fr;

    gap:
      14px;

    padding:
      40px 18px;

    text-align:center;
  }


  .mp-benefit-story__bottom h3{
    font-size:
      23px;
  }


  .mp-benefit-story__bottom a{
    justify-self:center;
  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media(max-width:430px){

  .mp-benefit-story__content h2{
    font-size:
      33px;
  }


  .mp-benefit-story__visual{
    min-height:
      470px;
  }


  .mp-benefit-story__frame{
    width:
      94%;

    height:
      430px;

    border-radius:
      68px 8px 8px 8px;
  }


  .mp-benefit-story__stat{
    width:
      170px;

    padding:
      16px;
  }


  .mp-benefit-story__stat strong{
    font-size:
      34px;
  }


  .mp-benefit-story__ready{
    width:
      75px;

    height:
      75px;
  }


  .mp-benefit-story__ready strong{
    font-size:
      11px;
  }


  .mp-benefit-story__visual-copy strong{
    font-size:
      22px;
  }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

  .mp-benefit-story__ready{
    animation:none;
  }

  .mp-benefit-story__image{
    transition:none;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-19625f7 *//* ==========================================================
   MOONPLAS
   SECTION 4 — PRODUCT EXPERIENCE + TRUST
   SOFT LIGHT PREMIUM VERSION
   NO GRID / NO PETAK BACKGROUND
========================================================== */

.mp-experience{
  position:relative;
  overflow:hidden;

  padding:120px 24px;

  background:
    radial-gradient(
      circle at 8% 22%,
      rgba(204,160,215,.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 76%,
      rgba(184,121,199,.14),
      transparent 31%
    ),
    radial-gradient(
      circle at 58% 38%,
      rgba(233,211,238,.26),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #fbf7fc 42%,
      #f5ebf7 72%,
      #efe0f3 100%
    );

  font-family:
    'Poppins',
    sans-serif;

  color:#3d2442;

  isolation:isolate;
}


/* ==========================================================
   CLEAN BACKGROUND
   GRID / PETAK REMOVED
========================================================== */

.mp-experience::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:0;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 18% 70%,
      rgba(191,136,204,.08),
      transparent 27%
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(217,179,225,.12),
      transparent 25%
    );
}


/* ==========================================================
   GLOW
========================================================== */

.mp-experience__glow{
  position:absolute;

  border-radius:50%;

  filter:
    blur(100px);

  pointer-events:none;
}


.mp-experience__glow--1{
  width:420px;
  height:420px;

  left:-160px;
  top:100px;

  background:
    rgba(188,98,207,.13);
}


.mp-experience__glow--2{
  width:390px;
  height:390px;

  right:-120px;
  bottom:-90px;

  background:
    rgba(168,74,186,.11);
}


/* ==========================================================
   WRAP
========================================================== */

.mp-experience__wrap{
  position:relative;

  z-index:2;

  max-width:
    1280px;

  margin:
    0 auto;

  display:grid;

  grid-template-columns:
    .94fr 1.06fr;

  gap:
    90px;

  align-items:center;
}


/* ==========================================================
   LEFT VISUAL
========================================================== */

.mp-experience__visual{
  position:relative;

  min-height:
    700px;
}


/* ==========================================================
   BIG SIP WORD
========================================================== */

.mp-experience__visual-word{
  position:absolute;

  z-index:1;

  right:
    -10px;

  top:
    -55px;

  color:
    rgba(105,45,118,.055);

  font-size:
    160px;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    -8px;

  pointer-events:none;
}


/* ==========================================================
   IMAGE FRAME
========================================================== */

.mp-experience__visual-frame{
  position:absolute;

  z-index:2;

  inset:
    0 48px 70px 0;

  overflow:hidden;

  border:
    1px solid
    rgba(111,55,123,.10);

  border-radius:
    16px 125px 16px 16px;

  background:
    #eee0f1;

  box-shadow:
    0 35px 80px
    rgba(73,34,81,.13);
}


/* ==========================================================
   IMAGE
========================================================== */

.mp-experience__image{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .8s
    cubic-bezier(.2,.7,.2,1);
}


.mp-experience__visual-frame:hover
.mp-experience__image{
  transform:
    scale(1.045);
}


/* ==========================================================
   OVERLAY
========================================================== */

.mp-experience__overlay{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(45,16,51,.01) 28%,
      rgba(45,16,51,.08) 55%,
      rgba(45,16,51,.66) 100%
    );
}


/* ==========================================================
   IMAGE COPY
========================================================== */

.mp-experience__visual-copy{
  position:absolute;

  z-index:5;

  left:
    34px;

  bottom:
    36px;
}


.mp-experience__visual-copy small{
  display:block;

  margin-bottom:
    8px;

  color:
    rgba(255,255,255,.68);

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    1.8px;
}


.mp-experience__visual-copy strong{
  display:block;

  color:#fff;

  font-size:
    36px;

  line-height:
    1.05;

  font-weight:
    700;

  letter-spacing:
    -1.2px;
}


.mp-experience__visual-copy strong span{
  color:
    #edc8f2;
}


/* ==========================================================
   READY TO SIP BADGE
========================================================== */

.mp-experience__ready{
  position:absolute;

  z-index:7;

  top:
    28px;

  right:
    28px;

  width:
    100px;

  height:
    100px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  border:
    1px solid
    rgba(121,61,133,.12);

  border-radius:
    50%;

  background:
    rgba(255,255,255,.93);

  box-shadow:
    0 18px 40px
    rgba(75,35,84,.13);

  backdrop-filter:
    blur(14px);

  animation:
    mpExpBadgeFloat
    4s
    ease-in-out
    infinite;
}


.mp-experience__ready > span{
  color:
    #a07ba6;

  font-size:
    6px;

  font-weight:
    700;

  letter-spacing:
    1.2px;
}


.mp-experience__ready strong{
  margin-top:
    2px;

  color:
    #572061;

  font-size:
    13px;

  font-weight:
    800;
}


.mp-experience__ready small{
  margin-top:
    5px;

  color:
    #a98caf;

  font-size:
    7px;

  font-weight:
    700;
}


@keyframes mpExpBadgeFloat{

  0%,
  100%{
    transform:
      translateY(0);
  }

  50%{
    transform:
      translateY(-8px);
  }

}


/* ==========================================================
   BUKA / SIP / NIKMATI STEPS
========================================================== */

.mp-experience__steps{
  position:absolute;

  z-index:8;

  left:
    25px;

  right:
    0;

  bottom:
    0;

  min-height:
    105px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:
    15px;

  padding:
    15px 20px;

  border:
    1px solid
    rgba(111,55,123,.10);

  border-radius:
    20px;

  background:
    rgba(255,255,255,.86);

  box-shadow:
    0 25px 50px
    rgba(72,33,80,.11);

  backdrop-filter:
    blur(18px);
}


.mp-experience__step{
  flex:
    1;

  text-align:center;
}


.mp-experience__step > span{
  display:block;

  margin-bottom:
    5px;

  color:
    #a164ac;

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    1px;
}


.mp-experience__step strong{
  display:block;

  color:#45214d;

  font-size:
    13px;

  font-weight:
    700;
}


.mp-experience__step small{
  display:block;

  margin-top:
    4px;

  color:
    rgba(68,35,74,.48);

  font-size:
    7px;
}


.mp-experience__step-arrow{
  color:
    rgba(104,53,114,.28);

  font-size:
    14px;
}


/* ==========================================================
   RIGHT CONTENT
========================================================== */

.mp-experience__content{
  max-width:
    650px;
}


/* ==========================================================
   EYEBROW
========================================================== */

.mp-experience__eyebrow{
  display:flex;

  align-items:center;

  gap:
    12px;

  margin-bottom:
    20px;

  color:
    #9b5aa6;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    2px;
}


.mp-experience__eyebrow span{
  width:
    35px;

  height:
    1px;

  background:
    #b76fc3;
}


/* ==========================================================
   TITLE
========================================================== */

.mp-experience__content h2{
  margin:0;

  color:
    #38203e;

  font-size:
    52px;

  line-height:
    1.06;

  font-weight:
    700;

  letter-spacing:
    -2.3px;
}


.mp-experience__content h2 span{
  display:block;

  margin-top:
    4px;

  color:
    #8d469a;

  font-weight:
    700;
}


/* ==========================================================
   LEAD
========================================================== */

.mp-experience__lead{
  max-width:
    600px;

  margin:
    24px 0 0;

  color:
    rgba(60,35,65,.64);

  font-size:
    13px;

  line-height:
    1.9;
}


/* ==========================================================
   FACT LIST
========================================================== */

.mp-experience__facts{
  margin-top:
    34px;

  border-top:
    1px solid
    rgba(102,52,112,.11);
}


.mp-experience__fact{
  display:grid;

  grid-template-columns:
    54px 1fr;

  gap:
    16px;

  padding:
    20px 0;

  border-bottom:
    1px solid
    rgba(102,52,112,.11);

  transition:
    padding-left .25s ease;
}


.mp-experience__fact:hover{
  padding-left:
    6px;
}


/* NUMBER */

.mp-experience__fact-no{
  padding-top:
    2px;

  color:
    #9b5aa6;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1px;
}


/* SMALL LABEL */

.mp-experience__fact small{
  display:block;

  margin-bottom:
    5px;

  color:
    #9a6aa3;

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    1.4px;
}


/* TITLE */

.mp-experience__fact strong{
  display:block;

  color:#402246;

  font-size:
    15px;

  line-height:
    1.4;

  font-weight:
    700;
}


/* TEXT */

.mp-experience__fact p{
  max-width:
    500px;

  margin:
    6px 0 0;

  color:
    rgba(60,35,65,.55);

  font-size:
    9px;

  line-height:
    1.75;
}


/* ==========================================================
   TRUST
========================================================== */

.mp-experience__trust{
  margin-top:
    29px;
}


/* ==========================================================
   TRUST HEADING
========================================================== */

.mp-experience__trust-head{
  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:
    20px;

  margin-bottom:
    15px;
}


.mp-experience__trust-head > div > span{
  display:block;

  margin-bottom:
    5px;

  color:
    #9d63a7;

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    1.7px;
}


.mp-experience__trust-head strong{
  display:block;

  color:#402246;

  font-size:
    14px;

  font-weight:
    600;
}


.mp-experience__trust-head > small{
  color:
    rgba(60,35,65,.35);

  font-size:
    7px;
}


/* ==========================================================
   BADGES
========================================================== */

.mp-experience__badges{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:
    8px;
}


.mp-experience__badge{
  min-height:
    100px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  padding:
    12px 8px;

  border:
    1px solid
    rgba(112,56,123,.09);

  border-radius:
    15px;

  background:
    rgba(255,255,255,.55);

  text-align:center;

  box-shadow:
    0 10px 30px
    rgba(76,36,84,.035);

  transition:
    .25s ease;
}


.mp-experience__badge:hover{
  transform:
    translateY(-4px);

  background:
    rgba(255,255,255,.90);

  border-color:
    rgba(156,87,169,.17);

  box-shadow:
    0 15px 35px
    rgba(76,36,84,.07);
}


/* CHECK ICON */

.mp-experience__badge-icon{
  width:
    26px;

  height:
    26px;

  margin-bottom:
    8px;

  display:grid;

  place-items:center;

  border-radius:
    50%;

  background:
    rgba(156,85,170,.09);

  color:
    #914b9e;

  font-size:
    9px;
}


/* BADGE TITLE */

.mp-experience__badge strong{
  color:#432449;

  font-size:
    11px;

  font-weight:
    700;
}


/* BADGE DESCRIPTION */

.mp-experience__badge span{
  display:block;

  margin-top:
    4px;

  color:
    rgba(60,35,65,.45);

  font-size:
    6px;
}


/* ==========================================================
   FOOTER
========================================================== */

.mp-experience__footer{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:
    20px;

  margin-top:
    29px;

  padding-top:
    24px;

  border-top:
    1px solid
    rgba(103,52,113,.10);
}


/* LABEL */

.mp-experience__footer small{
  display:block;

  margin-bottom:
    5px;

  color:
    rgba(60,35,65,.38);

  font-size:
    6px;

  font-weight:
    700;

  letter-spacing:
    1.3px;
}


/* TAGLINE */

.mp-experience__tagline{
  color:
    #92539e;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    1.8px;
}


/* CTA */

.mp-experience__footer a{
  min-height:
    50px;

  display:inline-flex;

  align-items:center;

  gap:
    13px;

  padding:
    0 20px;

  border:
    1px solid
    rgba(111,55,123,.12);

  border-radius:
    100px;

  background:
    linear-gradient(
      135deg,
      #8c4599,
      #682873
    );

  color:
    #fff;

  text-decoration:none;

  font-size:
    10px;

  font-weight:
    700;

  box-shadow:
    0 12px 30px
    rgba(92,40,102,.17);

  transition:
    .28s ease;
}


.mp-experience__footer a:hover{
  transform:
    translateY(-3px);

  box-shadow:
    0 17px 35px
    rgba(92,40,102,.24);

  background:
    linear-gradient(
      135deg,
      #984fa5,
      #702d7c
    );
}


.mp-experience__footer a span{
  font-size:
    15px;
}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1050px){

  .mp-experience{
    padding:
      95px 22px;
  }


  .mp-experience__wrap{
    gap:
      48px;
  }


  .mp-experience__visual{
    min-height:
      620px;
  }


  .mp-experience__content h2{
    font-size:
      43px;
  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:767px){

  .mp-experience{
    padding:
      75px 18px;

    background:
      radial-gradient(
        circle at 50% 22%,
        rgba(203,155,214,.16),
        transparent 30%
      ),
      radial-gradient(
        circle at 85% 78%,
        rgba(188,130,201,.10),
        transparent 30%
      ),
      linear-gradient(
        155deg,
        #ffffff 0%,
        #faf5fb 52%,
        #f1e3f4 100%
      );
  }


  .mp-experience::before{
    background:
      radial-gradient(
        circle at 10% 55%,
        rgba(196,151,207,.08),
        transparent 30%
      ),
      radial-gradient(
        circle at 90% 20%,
        rgba(187,133,200,.07),
        transparent 32%
      );
  }


  .mp-experience__wrap{
    grid-template-columns:
      1fr;

    gap:
      65px;
  }


  /* =========================
     VISUAL
  ========================== */

  .mp-experience__visual{
    min-height:
      570px;
  }


  .mp-experience__visual-frame{
    inset:
      0 26px 70px 0;

    border-radius:
      10px 78px 10px 10px;
  }


  .mp-experience__visual-word{
    font-size:
      100px;

    top:
      -35px;
  }


  .mp-experience__visual-copy{
    left:
      22px;

    bottom:
      30px;
  }


  .mp-experience__visual-copy strong{
    font-size:
      29px;
  }


  .mp-experience__ready{
    width:
      82px;

    height:
      82px;

    top:
      18px;

    right:
      18px;
  }


  /* STEPS */

  .mp-experience__steps{
    left:
      10px;

    min-height:
      92px;

    gap:
      8px;

    padding:
      12px;

    background:
      rgba(255,255,255,.91);
  }


  .mp-experience__step strong{
    font-size:
      11px;
  }


  /* =========================
     CONTENT
  ========================== */

  .mp-experience__content{
    max-width:
      100%;
  }


  .mp-experience__eyebrow{
    justify-content:center;

    text-align:center;
  }


  .mp-experience__content h2{
    text-align:center;

    font-size:
      37px;

    letter-spacing:
      -1.5px;
  }


  .mp-experience__lead{
    margin-left:auto;
    margin-right:auto;

    text-align:center;

    font-size:
      12px;
  }


  /* BADGES */

  .mp-experience__badges{
    grid-template-columns:
      1fr 1fr;
  }


  /* FOOTER */

  .mp-experience__footer{
    flex-direction:column;

    justify-content:center;

    text-align:center;
  }


  .mp-experience__footer a{
    width:
      100%;

    max-width:
      280px;

    justify-content:center;
  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media(max-width:430px){

  .mp-experience{
    padding:
      65px 16px;
  }


  .mp-experience__visual{
    min-height:
      505px;
  }


  .mp-experience__visual-frame{
    inset:
      0 15px 65px 0;
  }


  .mp-experience__content h2{
    font-size:
      32px;
  }


  .mp-experience__visual-copy strong{
    font-size:
      26px;
  }


  .mp-experience__steps{
    left:0;
  }


  .mp-experience__step-arrow{
    font-size:
      11px;
  }


  .mp-experience__trust-head{
    align-items:flex-start;

    flex-direction:column;

    gap:
      6px;
  }


  .mp-experience__badge{
    min-height:
      95px;
  }


  .mp-experience__fact{
    grid-template-columns:
      42px 1fr;

    gap:
      12px;
  }

}


/* ==========================================================
   REDUCE MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

  .mp-experience__ready{
    animation:none;
  }


  .mp-experience__image{
    transition:none;
  }

}/* End custom CSS */