.elementor-34 .elementor-element.elementor-element-b972afa{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-34 .elementor-element.elementor-element-e99d913{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-34 .elementor-element.elementor-element-29fc7ae{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-34 .elementor-element.elementor-element-d065f18{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-34 .elementor-element.elementor-element-d1d8de4{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-9bb83cc */@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');


/* =========================================================
   HERO
========================================================= */

.may-hero {

  --emerald:#063f2d;
  --emerald-mid:#07553b;
  --deep:#01291d;

  --gold:#d3a12b;
  --gold-mid:#e9c657;
  --gold-light:#fff0a5;

  position:relative;

  width:100%;

  min-height:830px;

  overflow:hidden;

  background:#01291d;

  color:#ffffff;

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

}


/* =========================================================
   FULL BACKGROUND IMAGE
========================================================= */

.may-hero-bg {

  position:absolute;

  inset:0;

  background:
    url("URL-BACKGROUND-HERBA-PREMIUM.jpg")
    center center / cover
    no-repeat;

  transform:scale(1.02);

}


/* cinematic overlay */

.may-hero-overlay {

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      90deg,
      rgba(1,30,21,.98) 0%,
      rgba(2,43,30,.95) 36%,
      rgba(3,48,34,.80) 59%,
      rgba(2,40,28,.43) 78%,
      rgba(1,31,22,.34) 100%
    ),

    linear-gradient(
      180deg,
      rgba(0,0,0,.08),
      rgba(0,0,0,.28)
    );

}


/* subtle vignette */

.may-hero::after {

  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  box-shadow:

    inset 0 -150px 160px rgba(0,0,0,.27),

    inset 0 90px 110px rgba(0,0,0,.10);

}


/* gold top */

.may-hero::before {

  content:"";

  position:absolute;

  z-index:10;

  top:0;

  left:50%;

  width:74%;

  height:2px;

  transform:translateX(-50%);

  background:

    linear-gradient(
      90deg,
      transparent,
      #a97717,
      #d7a832,
      #fff0a2,
      #d5a22b,
      transparent
    );

  box-shadow:
    0 0 15px rgba(229,190,75,.34);

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.may-hero-shell {

  position:relative;

  z-index:4;

  width:min(
    1280px,
    calc(100% - 60px)
  );

  min-height:740px;

  margin:auto;

  display:grid;

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

  align-items:center;

  gap:60px;

  padding:
    75px 0
    115px;

}


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

.may-hero-copy {

  max-width:680px;

}


/* brand line */

.may-brand-line {

  display:flex;

  align-items:center;

  gap:12px;

  color:#e4c260;

  font-size:9px;

  font-weight:700;

  letter-spacing:2px;

}


.may-brand-line > span {

  width:46px;

  height:1px;

  background:

    linear-gradient(
      90deg,
      #b68620,
      #efd372
    );

}


/* =========================================================
   HEADLINE
========================================================= */

.may-hero h1 {

  max-width:690px;

  margin:
    24px 0 0;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(
      50px,
      4.8vw,
      68px
    );

  font-weight:700;

  line-height:1.05;

  letter-spacing:-1.5px;

  color:#fffdf8;

}


.may-hero h1 em {

  display:block;

  margin:
    3px 0;

  font-style:normal;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-weight:700;

  color:transparent;

  background:

    linear-gradient(
      180deg,
      #fff3bd 0%,
      #e6c35c 38%,
      #c99724 70%,
      #efd371 100%
    );

  -webkit-background-clip:text;

  background-clip:text;

}


/* =========================================================
   INTRO
========================================================= */

.may-intro {

  max-width:590px;

  margin:
    24px 0 0;

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

  font-size:14px;

  font-weight:400;

  line-height:1.8;

}


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

.may-points {

  max-width:570px;

  margin-top:28px;

  border-top:
    1px solid
    rgba(229,195,91,.17);

}


.may-points > div {

  min-height:52px;

  display:grid;

  grid-template-columns:
    45px 1fr;

  align-items:center;

  border-bottom:
    1px solid
    rgba(255,255,255,.09);

}


.may-points b {

  color:#e8c861;

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

  font-size:10px;

  font-weight:700;

}


.may-points span {

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

  font-size:12px;

  font-weight:500;

}


/* =========================================================
   BUY ROW
========================================================= */

.may-buy-row {

  margin-top:31px;

  display:flex;

  align-items:flex-end;

  gap:27px;

  flex-wrap:wrap;

}


/* PRICE */

.may-start-price small {

  display:block;

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

  font-size:8px;

  font-weight:700;

  letter-spacing:1.4px;

}


.may-start-price > div {

  margin-top:4px;

  display:flex;

  align-items:flex-end;

}


.may-start-price span {

  margin:
    0 5px
    9px 0;

  color:#e9ca67;

  font-size:19px;

  font-weight:700;

}


.may-start-price strong {

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

  font-size:60px;

  font-weight:800;

  line-height:.8;

  letter-spacing:-2px;

  color:#efd16b;

}


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

.may-cta {

  min-width:300px;

  min-height:60px;

  padding:
    9px 9px
    9px 23px;

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:16px;

  border-radius:999px;

  background:

    linear-gradient(
      115deg,
      #f8e28d 0%,
      #d7a737 31%,
      #f3d46d 62%,
      #c99621 100%
    );

  border:
    1px solid
    #ffec9d;

  color:#032a1e;

  text-decoration:none;

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

  font-size:11px;

  font-weight:700;

  letter-spacing:.2px;

  box-shadow:

    0 18px 38px
    rgba(0,0,0,.28),

    inset 0 1px 0
    rgba(255,255,255,.68);

  transition:.25s ease;

}


.may-cta:hover {

  transform:
    translateY(-3px);

}


.may-cta i {

  width:42px;

  height:42px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:50%;

  background:#032e20;

  color:#efd16d;

  font-size:18px;

  font-style:normal;

}


/* =========================================================
   PACKAGE LINE
========================================================= */

.may-package-line {

  margin-top:17px;

  display:flex;

  align-items:center;

  gap:11px;

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

  font-size:9px;

}


.may-package-line i {

  width:3px;

  height:3px;

  border-radius:50%;

  background:#cf9e28;

}


.may-package-line strong {

  color:#e5c45f;

  font-weight:700;

}


/* =========================================================
   PRODUCT STAGE
========================================================= */

.may-product-stage {

  position:relative;

  min-height:610px;

  display:flex;

  align-items:flex-end;

  justify-content:center;

}


/* premium panel */

.may-stage-panel {

  position:absolute;

  bottom:20px;

  width:420px;

  height:535px;

  border-radius:
    210px 210px
    34px 34px;

  border:
    1px solid
    rgba(234,202,96,.31);

  background:

    linear-gradient(
      180deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.014)
    );

  box-shadow:

    inset 0 0 80px
    rgba(20,127,82,.08),

    0 30px 65px
    rgba(0,0,0,.18);

  backdrop-filter:
    blur(5px);

}


.may-stage-panel::after {

  content:"";

  position:absolute;

  inset:14px;

  border-radius:
    198px 198px
    24px 24px;

  border:
    1px solid
    rgba(226,190,81,.10);

}


/* product title */

.may-product-kicker {

  position:absolute;

  z-index:4;

  top:82px;

  text-align:center;

}


.may-product-kicker small {

  display:block;

  color:#e5c360;

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

  font-size:14px;

  font-weight:700;

  letter-spacing:3px;

}


.may-product-kicker span {

  display:block;

  margin-top:4px;

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

  font-size:7px;

  font-weight:600;

  letter-spacing:2px;

}


/* product image */

.may-product {

  position:relative;

  z-index:5;

  width:72%;

  max-width:370px;

  margin-bottom:26px;

  object-fit:contain;

  filter:
    drop-shadow(
      0 42px 34px
      rgba(0,0,0,.52)
    );

}


/* =========================================================
   VALUE PANEL
========================================================= */

.may-best-value {

  position:absolute;

  z-index:7;

  right:0;

  bottom:83px;

  min-width:165px;

  padding:
    14px 16px;

  border-left:
    2px solid
    #d8aa37;

  background:

    linear-gradient(
      90deg,
      rgba(2,37,26,.96),
      rgba(2,51,35,.80)
    );

  box-shadow:
    0 16px 34px
    rgba(0,0,0,.26);

}


.may-best-value small {

  display:block;

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

  font-size:7px;

  font-weight:700;

  letter-spacing:1px;

}


.may-best-value strong {

  display:block;

  margin-top:5px;

  color:#edcf69;

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

  font-size:20px;

  font-weight:700;

}


.may-best-value span {

  display:block;

  margin-top:1px;

  color:#fff;

  font-size:12px;

  font-weight:700;

}


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

.may-trust-strip {

  position:absolute;

  z-index:8;

  left:50%;

  bottom:0;

  width:min(
    1180px,
    calc(100% - 40px)
  );

  min-height:86px;

  transform:
    translateX(-50%);

  display:flex;

  align-items:center;

  justify-content:center;

  gap:42px;

  padding:
    17px 28px;

  border-top:
    1px solid
    rgba(230,196,89,.22);

  background:

    linear-gradient(
      90deg,
      rgba(2,39,27,.87),
      rgba(4,59,40,.92),
      rgba(2,39,27,.87)
    );

  backdrop-filter:
    blur(12px);

}


.may-trust-strip >
div:not(.may-divider) {

  min-width:170px;

  text-align:center;

}


.may-trust-strip small {

  display:block;

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

  font-size:7px;

  font-weight:600;

  letter-spacing:1.2px;

}


.may-trust-strip strong {

  display:block;

  margin-top:4px;

  color:#eee1b4;

  font-size:10px;

  font-weight:600;

}


.may-divider {

  width:1px;

  height:34px;

  background:

    linear-gradient(
      transparent,
      rgba(220,181,70,.43),
      transparent
    );

}


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

@media(max-width:991px) {

  .may-hero {

    min-height:auto;

  }


  .may-hero-shell {

    grid-template-columns:1fr;

    gap:20px;

    padding:
      65px 0
      120px;

  }


  .may-hero-copy {

    max-width:720px;

    margin:auto;

    text-align:center;

  }


  .may-brand-line,
  .may-buy-row,
  .may-package-line {

    justify-content:center;

  }


  .may-points {

    margin-left:auto;

    margin-right:auto;

    text-align:left;

  }


  .may-product-stage {

    min-height:560px;

  }

}


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

@media(max-width:600px) {

  .may-hero-shell {

    width:
      calc(100% - 28px);

    padding:
      47px 0
      145px;

  }


  .may-brand-line {

    font-size:8px;

    letter-spacing:1.4px;

  }


  .may-brand-line > span {

    width:27px;

  }


  .may-hero h1 {

    font-size:43px;

    line-height:1.06;

    letter-spacing:-1px;

  }


  .may-intro {

    font-size:12px;

    line-height:1.75;

  }


  .may-points span {

    font-size:11px;

  }


  .may-buy-row {

    gap:20px;

  }


  .may-start-price strong {

    font-size:55px;

  }


  .may-cta {

    width:100%;

    min-width:0;

  }


  .may-package-line {

    flex-wrap:wrap;

    justify-content:center;

    line-height:1.8;

  }


  .may-product-stage {

    min-height:430px;

  }


  .may-stage-panel {

    width:295px;

    height:385px;

    border-radius:
      155px 155px
      24px 24px;

  }


  .may-product-kicker {

    top:48px;

  }


  .may-product {

    max-width:240px;

  }


  .may-best-value {

    right:0;

    bottom:48px;

    min-width:135px;

    padding:
      11px 13px;

  }


  .may-best-value strong {

    font-size:17px;

  }


  .may-trust-strip {

    width:100%;

    min-height:110px;

    gap:8px;

    padding:
      14px 9px;

  }


  .may-trust-strip >
  div:not(.may-divider) {

    min-width:0;

    flex:1;

  }


  .may-trust-strip strong {

    font-size:8px;

  }


  .may-divider {

    height:38px;

  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-96a9f7a */@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');


/* =========================================================
   SECTION
========================================================= */

.may-s2 {

  --green:#063f2d;
  --green2:#07553b;
  --deep:#01291d;

  --gold:#d3a12b;
  --gold2:#e6c45c;
  --gold-light:#fff0a7;

  position:relative;

  width:100%;

  overflow:hidden;

  padding:
    105px 20px
    115px;

  background:

    radial-gradient(
      circle at 92% 15%,
      rgba(7,83,57,.07),
      transparent 24%
    ),

    radial-gradient(
      circle at 5% 80%,
      rgba(211,161,43,.055),
      transparent 22%
    ),

    linear-gradient(
      180deg,
      #fffdf8 0%,
      #f7f6f0 100%
    );

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

}


.may-s2::before {

  content:"";

  position:absolute;

  top:0;
  left:50%;

  width:68%;
  height:1px;

  transform:
    translateX(-50%);

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(193,143,27,.18),
      rgba(220,182,76,.50),
      rgba(193,143,27,.18),
      transparent
    );

}


.may-s2-inner {

  position:relative;

  z-index:2;

  width:100%;

  max-width:1280px;

  margin:auto;

}



/* =========================================================
   HEADER
========================================================= */

.may-s2-head {

  max-width:810px;

  margin:
    0 auto
    52px;

  text-align:center;

}


.may-s2-eyebrow {

  display:flex;

  align-items:center;

  justify-content:center;

  gap:11px;

  color:
    var(--green);

  font-size:9px;

  font-weight:700;

  letter-spacing:2px;

}


.may-s2-eyebrow > span {

  width:35px;

  height:1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      #c59627
    );

}


.may-s2-head h2 {

  margin:
    18px 0 0;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(
      40px,
      4.2vw,
      58px
    );

  font-weight:700;

  line-height:1.08;

  letter-spacing:-1.1px;

  color:#17261f;

}


.may-s2-head h2 strong {

  display:block;

  color:
    var(--green);

  font-weight:700;

}


.may-s2-head p {

  max-width:600px;

  margin:
    17px auto 0;

  color:#7c847f;

  font-size:12px;

  line-height:1.7;

}



/* =========================================================
   EDITORIAL GALLERY
========================================================= */

.may-problem-gallery {

  display:grid;

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

  gap:12px;

  height:410px;

}


.may-problem-item {

  position:relative;

  overflow:hidden;

  min-width:0;

  border-radius:4px;

  background:#ddd;

}


.may-problem-item:first-child {

  border-radius:
    28px 4px
    4px 28px;

}


.may-problem-item:last-child {

  border-radius:
    4px 28px
    28px 4px;

}


.may-problem-item img {

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

  transition:
    transform .7s ease;

}


.may-problem-item:hover img {

  transform:
    scale(1.045);

}


.may-problem-overlay {

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      180deg,
      transparent 40%,
      rgba(2,36,25,.82) 100%
    );

}


.may-problem-copy {

  position:absolute;

  z-index:3;

  left:24px;
  right:20px;
  bottom:22px;

}


.may-problem-copy small {

  display:block;

  margin-bottom:6px;

  color:
    #e3c15c;

  font-size:8px;

  font-weight:700;

  letter-spacing:1.5px;

}


.may-problem-copy strong {

  display:block;

  color:#fff;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(
      18px,
      2vw,
      26px
    );

  font-weight:600;

  line-height:1.15;

}



/* =========================================================
   CARA GUNA PANEL
========================================================= */

.may-how {

  position:relative;

  margin-top:90px;

  display:grid;

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

  min-height:570px;

  overflow:hidden;

  border-radius:34px;

  background:

    radial-gradient(
      circle at 5% 10%,
      rgba(33,139,92,.34),
      transparent 28%
    ),

    linear-gradient(
      145deg,
      #07583d 0%,
      #043c2b 53%,
      #022a1e 100%
    );

  border:
    1px solid
    rgba(231,199,96,.14);

  box-shadow:
    0 35px 80px
    rgba(4,60,41,.17);

}


/* gold top */

.may-how::before {

  content:"";

  position:absolute;

  z-index:5;

  top:0;
  left:15%;

  width:70%;
  height:2px;

  background:

    linear-gradient(
      90deg,
      transparent,
      #b8861d,
      #e1bd55,
      #fff0a2,
      #d3a12a,
      transparent
    );

}



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

.may-how-visual {

  position:relative;

  min-height:570px;

  overflow:hidden;

}


.may-how-photo {

  position:absolute;

  inset:0;

}


.may-how-photo::after {

  content:"";

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      90deg,
      rgba(1,42,29,.04),
      rgba(2,43,30,.18) 70%,
      rgba(3,47,33,.76) 100%
    );

}


.may-how-photo img {

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

}


.may-how-product-mark {

  position:absolute;

  z-index:4;

  left:28px;
  bottom:30px;

  padding-left:16px;

  border-left:
    2px solid
    #d7aa35;

}


.may-how-product-mark small {

  display:block;

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

  font-size:7px;

  font-weight:700;

  letter-spacing:1.6px;

}


.may-how-product-mark strong {

  display:block;

  margin-top:4px;

  color:#f1d36d;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:23px;

  font-weight:600;

}



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

.may-how-content {

  position:relative;

  z-index:3;

  padding:
    66px 65px
    60px;

  color:#fff;

}


.may-how-eyebrow {

  color:
    #e5c45e;

  font-size:8px;

  font-weight:700;

  letter-spacing:2px;

}


.may-how-content h3 {

  margin:
    15px 0 0;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(
      40px,
      4vw,
      55px
    );

  font-weight:700;

  line-height:1.05;

  color:#fff;

}


.may-how-content h3 strong {

  display:block;

  margin-top:3px;

  color:#efd16a;

  font-weight:700;

}


.may-how-intro {

  max-width:500px;

  margin:
    17px 0 0;

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

  font-size:11px;

  line-height:1.7;

}



/* =========================================================
   STEPS
========================================================= */

.may-how-steps {

  margin-top:32px;

}


.may-how-step {

  display:grid;

  grid-template-columns:
    44px
    55px
    1fr;

  align-items:center;

  min-height:75px;

}


.may-step-number {

  color:#e9ca67;

  font-size:11px;

  font-weight:700;

}


.may-step-line {

  width:35px;

  height:1px;

  background:

    linear-gradient(
      90deg,
      rgba(230,196,92,.72),
      rgba(230,196,92,.08)
    );

}


.may-step-copy {

  padding:
    14px 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.09);

}


.may-how-step:last-child
.may-step-copy {

  border-bottom:0;

}


.may-step-copy strong {

  display:block;

  color:#fff;

  font-size:13px;

  font-weight:600;

}


.may-step-copy span {

  display:block;

  margin-top:4px;

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

  font-size:9px;

  line-height:1.6;

}



/* =========================================================
   IMPORTANT NOTE
========================================================= */

.may-how-note {

  width:fit-content;

  max-width:100%;

  margin-top:27px;

  padding:
    12px 16px;

  display:flex;

  align-items:center;

  gap:11px;

  border-radius:14px;

  background:

    linear-gradient(
      135deg,
      rgba(238,207,109,.14),
      rgba(255,255,255,.055)
    );

  border:
    1px solid
    rgba(236,205,104,.16);

}


.may-note-icon {

  width:32px;
  height:32px;

  flex:0 0 32px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:

    linear-gradient(
      145deg,
      #f7df82,
      #c99724
    );

  color:#032a1e;

  font-size:12px;

  font-weight:800;

}


.may-how-note small {

  display:block;

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

  font-size:6px;

  font-weight:700;

  letter-spacing:1.2px;

}


.may-how-note strong {

  display:block;

  margin-top:3px;

  color:#f1df9c;

  font-size:9px;

  font-weight:600;

}



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

@media(max-width:900px) {

  .may-problem-gallery {

    height:auto;

    grid-template-columns:
      1fr 1fr;

  }


  .may-problem-large {

    grid-column:
      1 / -1;

    height:310px;

  }


  .may-problem-item {

    height:250px;

    border-radius:
      20px !important;

  }


  .may-how {

    grid-template-columns:1fr;

  }


  .may-how-visual {

    min-height:450px;

  }

}



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

@media(max-width:600px) {

  .may-s2 {

    padding:
      70px 13px
      80px;

  }


  .may-s2-head {

    margin-bottom:34px;

  }


  .may-s2-head h2 {

    font-size:37px;

  }


  .may-problem-gallery {

    grid-template-columns:1fr;

    gap:9px;

  }


  .may-problem-large,
  .may-problem-item {

    grid-column:auto;

    height:220px;

    border-radius:
      18px !important;

  }


  .may-problem-copy {

    left:18px;
    bottom:17px;

  }


  .may-problem-copy strong {

    font-size:20px;

  }


  .may-how {

    margin-top:55px;

    border-radius:23px;

  }


  .may-how-visual {

    min-height:350px;

  }


  .may-how-content {

    padding:
      38px 20px
      35px;

  }


  .may-how-content h3 {

    font-size:38px;

  }


  .may-how-step {

    grid-template-columns:
      35px
      30px
      1fr;

  }


  .may-step-line {

    width:20px;

  }


  .may-step-copy strong {

    font-size:12px;

  }


  .may-how-note {

    width:100%;

    align-items:flex-start;

  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-06b1aae */@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');


/* =========================================================
   SECTION
========================================================= */

.may-testimoni {

  --green:#063f2d;
  --green2:#07583d;
  --deep:#01291d;

  --gold:#d1a02a;
  --gold2:#e6c45e;
  --gold-light:#fff0a7;

  position:relative;

  width:100%;

  overflow:hidden;

  padding:
    105px 0
    100px;

  background:

    radial-gradient(
      circle at 88% 10%,
      rgba(38,145,98,.25),
      transparent 28%
    ),

    radial-gradient(
      circle at 5% 90%,
      rgba(209,160,42,.08),
      transparent 26%
    ),

    linear-gradient(
      145deg,
      #07513a 0%,
      #043a29 52%,
      #01291d 100%
    );

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

}


/* GOLD TOP */

.may-testimoni::before {

  content:"";

  position:absolute;

  top:0;
  left:50%;

  width:68%;
  height:2px;

  transform:
    translateX(-50%);

  background:

    linear-gradient(
      90deg,
      transparent,
      #b5841e,
      #e4c15a,
      #fff0a2,
      #d3a12b,
      transparent
    );

}


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

.may-testimoni-inner {

  position:relative;

  z-index:2;

  width:100%;

  margin:auto;

}


/* =========================================================
   HEADER
========================================================= */

.may-testimoni-head {

  max-width:800px;

  margin:
    0 auto
    52px;

  padding:
    0 20px;

  text-align:center;

}


.may-testimoni-eyebrow {

  display:flex;

  align-items:center;
  justify-content:center;

  gap:10px;

  color:#e4c15b;

  font-size:9px;

  font-weight:700;

  letter-spacing:2px;

}


.may-testimoni-eyebrow > span {

  width:35px;
  height:1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      #d1a02a
    );

}


.may-testimoni-head h2 {

  margin:
    17px 0 0;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(
      42px,
      4.4vw,
      60px
    );

  font-weight:700;

  line-height:1.05;

  letter-spacing:-1px;

  color:#ffffff;

}


.may-testimoni-head h2 strong {

  display:block;

  margin-top:3px;

  color:transparent;

  background:

    linear-gradient(
      180deg,
      #fff3be 0%,
      #e5c25c 38%,
      #c89623 70%,
      #efd16c 100%
    );

  -webkit-background-clip:text;

  background-clip:text;

}


.may-testimoni-head p {

  max-width:580px;

  margin:
    16px auto 0;

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

  font-size:11px;

  line-height:1.7;

}


/* =========================================================
   MARQUEE
========================================================= */

.may-testi-marquee {

  position:relative;

  width:100%;

  overflow:hidden;

  margin-top:15px;

  -webkit-mask-image:

    linear-gradient(
      90deg,
      transparent 0%,
      #000 6%,
      #000 94%,
      transparent 100%
    );

  mask-image:

    linear-gradient(
      90deg,
      transparent 0%,
      #000 6%,
      #000 94%,
      transparent 100%
    );

}


/* TRACK */

.may-testi-track {

  width:max-content;

  display:flex;

  gap:15px;

  will-change:transform;

  animation:
    mayTestiLeft
    42s linear
    infinite;

}


/* ROW 2 */

.may-testi-reverse
.may-testi-track {

  animation:
    mayTestiRight
    45s linear
    infinite;

}


/* PAUSE HOVER */

.may-testi-marquee:hover
.may-testi-track {

  animation-play-state:paused;

}


/* =========================================================
   TESTIMONIAL CARD
========================================================= */

.may-text-testi {

  position:relative;

  flex:
    0 0 345px;

  width:345px;

  min-height:180px;

  overflow:hidden;

  padding:
    25px 24px
    23px;

  border-radius:17px;

  background:

    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.035)
    );

  border:
    1px solid
    rgba(232,199,96,.17);

  box-shadow:

    0 20px 44px
    rgba(0,0,0,.15),

    inset 0 1px
    rgba(255,255,255,.05);

}


/* GOLD LINE CARD */

.may-text-testi::before {

  content:"";

  position:absolute;

  top:0;
  left:17%;

  width:66%;
  height:2px;

  background:

    linear-gradient(
      90deg,
      transparent,
      #cf9e27,
      #f3d873,
      #fff1a7,
      #d3a12a,
      transparent
    );

}


/* QUOTE */

.may-text-testi::after {

  content:"“";

  position:absolute;

  right:17px;
  top:2px;

  color:
    rgba(231,196,91,.09);

  font-family:
    "Playfair Display",
    serif;

  font-size:78px;

  line-height:1;

  pointer-events:none;

}


/* =========================================================
   STARS
========================================================= */

.may-stars {

  position:relative;

  z-index:2;

  color:#ebc95f;

  font-size:10px;

  letter-spacing:3px;

}


/* =========================================================
   FEEDBACK
========================================================= */

.may-text-testi p {

  position:relative;

  z-index:2;

  margin:
    15px 0 0;

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

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

  font-size:12px;

  font-weight:500;

  line-height:1.75;

}


/* NAME */

.may-text-testi > span {

  position:relative;

  z-index:2;

  display:block;

  margin-top:17px;

  color:
    rgba(234,203,105,.72);

  font-size:8px;

  font-weight:600;

  letter-spacing:.4px;

}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes mayTestiLeft {

  from {

    transform:
      translateX(0);

  }

  to {

    transform:
      translateX(
        calc(-50% - 7.5px)
      );

  }

}


@keyframes mayTestiRight {

  from {

    transform:
      translateX(
        calc(-50% - 7.5px)
      );

  }

  to {

    transform:
      translateX(0);

  }

}


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

.may-testimoni-bottom {

  margin-top:52px;

  padding:
    0 20px;

  text-align:center;

}


.may-testimoni-bottom p {

  margin:
    0 0 16px;

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

  font-size:10px;

}


/* =========================================================
   BUTTON
========================================================= */

.may-testimoni-btn {

  min-width:280px;

  min-height:60px;

  padding:
    9px 9px
    9px 23px;

  display:inline-flex;

  align-items:center;

  justify-content:
    space-between;

  gap:16px;

  border-radius:999px;

  background:

    linear-gradient(
      115deg,
      #f8e28d 0%,
      #d7a737 31%,
      #f3d46d 62%,
      #c99621 100%
    );

  border:
    1px solid
    #ffec9d;

  color:#032a1e;

  text-decoration:none;

  font-size:10px;

  font-weight:700;

  box-shadow:

    0 18px 38px
    rgba(0,0,0,.28),

    inset 0 1px
    rgba(255,255,255,.68);

  transition:.25s ease;

}


.may-testimoni-btn:hover {

  transform:
    translateY(-3px);

}


.may-testimoni-btn i {

  width:42px;
  height:42px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#032e20;

  color:#efd16d;

  font-size:18px;

  font-style:normal;

}


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

@media(max-width:600px) {

  .may-testimoni {

    padding:
      72px 0
      75px;

  }


  .may-testimoni-head {

    margin-bottom:38px;

  }


  .may-testimoni-head h2 {

    font-size:38px;

  }


  .may-testimoni-head p {

    font-size:10px;

  }


  .may-text-testi {

    flex-basis:285px;

    width:285px;

    min-height:165px;

    padding:
      21px 20px;

    border-radius:15px;

  }


  .may-text-testi p {

    font-size:11px;

    line-height:1.7;

  }


  .may-testi-track {

    gap:11px;

    animation-duration:34s;

  }


  .may-testi-reverse
  .may-testi-track {

    animation-duration:37s;

  }


  .may-testimoni-bottom {

    margin-top:38px;

  }


  .may-testimoni-btn {

    width:calc(100% - 28px);

    max-width:330px;

  }

}/* End custom CSS */