/* ============================================
KEY POINT
=============================================== */
.sec-key-point {
  margin-top: -150px;
  transform: translateY(50%);
  z-index: 1;
}

.sec-key-point > .section-content > .row > .col > .col-inner {
  position: relative;
  box-shadow: 0px 4px 16.5px 0px #00000040;
  border-radius: 30px;
  padding-top: 80px;
  padding-bottom: 64px;
}

.sec-key-point > .section-content > .row > .col > .col-inner > div:has(svg) {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(-50%);

  background-color: #ffffff;
  width: 95px;
  height: 95px;
  border-radius: 100%;
  border: 4px solid #ffb900;
  box-shadow: 0px 4px 16.5px 0px #00000040;
}

.sec-key-point > .section-content > .row > .col > .col-inner > div svg {
  position: absolute;
  left: -50%;
  right: -50%;
  top: 0;
  bottom: 0;
  margin: auto;
}

.sec-key-point
  > .section-content
  > .row
  > .col:nth-child(1)
  > .col-inner
  > div
  svg {
  transform: translateY(-7px);
}

.sec-key-point
  > .section-content
  > .row
  > .col:nth-child(2)
  > .col-inner
  > div
  svg {
  transform: translateX(1px);
}

.sec-key-point
  > .section-content
  > .row
  > .col:nth-child(3)
  > .col-inner
  > div
  svg {
  transform: translateY(-16px);
}

.sec-key-point
  > .section-content
  > .row
  > .col:nth-child(4)
  > .col-inner
  > div
  svg {
  transform: translate(6px, -10px);
}

/* ============================================
SECTION PRODUCT SLIDER
=============================================== */
.sec-product-slider {
  background: linear-gradient(180deg, #bc0b20 8.71%, #8d0818 100%);
}

/* ============================================
PERFECT FOR EVERY FRY
=============================================== */
.sec-perfect .section-bg.fill img {
  display: none;
}

.sec-perfect .section-bg.fill {
  background:
    linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%),
    url(/wp-content/uploads/2026/02/sec-perfect.webp) no-repeat 50% 100% / cover;
}

.sec-perfect .section-bg.fill img {
  mix-blend-mode: multiply;
}

.sec-perfect .icon-box {
  align-items: center;
  margin-bottom: 45px;
}

/* ============================================
TESTIMONI
=============================================== */
.sec-testimoni {
  background:
    url(/wp-content/uploads/2026/02/sec-testimoni-bg-bottom.webp) no-repeat
      right 101% / 70%,
    url(/wp-content/uploads/2026/02/sec-testimoni-texture_11zon.webp) repeat-x
      top / 55%;
}

.image-absolute {
  position: absolute;
  left: 0;
  bottom: -100px;
  z-index: 99;
}

/* ===================================
RESPONSIVE >>> TABLET
====================================== */
@media only screen and (max-width: 849px) {
  /* ============================================
  INFO
  =============================================== */
  .sec-info .row .col {
    padding-inline: 15px !important;
  }

  /* ============================================
  KEY POINT
  =============================================== */
  .sec-key-point {
    margin-top: -100px;
  }
  .sec-key-point > .section-content > .row > .col {
    padding-inline: 10px;
  }
  .sec-key-point > .section-content > .row > .col > .col-inner {
    padding-top: 45px;
    padding-bottom: 20px;
    border-radius: 20px;
  }

  .sec-key-point > .section-content > .row > .col > .col-inner > div:has(svg) {
    transform: translateY(-50%);
    border: 3px solid #ffb900;
    width: 60px;
    height: 60px;
  }

  .sec-key-point > .section-content > .row > .col > .col-inner > div svg {
    width: 60px;
    height: 60px;
  }

  .sec-key-point
    > .section-content
    > .row
    > .col:nth-child(1)
    > .col-inner
    > div
    svg {
    transform: translateY(-5px);
  }

  .sec-key-point
    > .section-content
    > .row
    > .col:nth-child(2)
    > .col-inner
    > div
    svg {
    transform: translateX(2px);
    width: 50px;
    height: 50px;
  }

  .sec-key-point
    > .section-content
    > .row
    > .col:nth-child(3)
    > .col-inner
    > div
    svg {
    transform: translateY(-12px);
    width: 80px;
    height: 80px;
  }

  .sec-key-point
    > .section-content
    > .row
    > .col:nth-child(4)
    > .col-inner
    > div
    svg {
    transform: translate(4px, -5px);
  }

  /* ============================================
  PERFECT
  =============================================== */
  .sec-perfect .icon-box .icon-box-img {
    width: 80px !important;
  }

  /* ============================================
  TESTIMONI
  =============================================== */
  .image-absolute {
    display: none;
  }
}

/* ===================================
RESPONSIVE >>> MOBILE
====================================== */
@media only screen and (max-width: 430px) {
  /* ============================================
  KEY POINT
  =============================================== */
  .sec-key-point {
    margin-top: -220px;
    transform: translateY(60%);
  }
  .sec-key-point > .section-content > .row > .col {
    padding-bottom: 10px !important;
  }
  .sec-key-point > .section-content > .row > .col-inner {
    border-radius: 35px;
  }
  .sec-key-point > .section-content > .row > .col:nth-child(odd) {
    padding-right: 5px !important;
  }
  .sec-key-point > .section-content > .row > .col:nth-child(even) {
    padding-left: 5px !important;
  }

  /* ============================================
  PERFECT
  =============================================== */
  .sec-perfect .section-bg.fill {
    background:
      linear-gradient(0deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%),
      url(/wp-content/uploads/2026/02/sec-perfect-mobile.webp) no-repeat 50%
        100% / cover;
  }
  .sec-perfect .col:has(.icon-box) {
    padding-inline: 0;
  }
  .sec-perfect .col-inner:has(> .icon-box) {
    display: flex;
  }
  .sec-perfect .icon-box {
    gap: 10px;
    flex-direction: column;
    margin-bottom: 25px;
  }
  .sec-perfect .icon-box .icon-box-img {
    width: 70px !important;
  }
  .sec-perfect .icon-box .icon-box-text {
    text-align: center;
    padding: 0;
  }

  /* ============================================
  TESTIMONI
  =============================================== */
  .sec-testimoni {
    background:
      url(/wp-content/uploads/2026/02/sec-testimoni-bg-bottom.webp) no-repeat
        80% 101% / 200%,
      url(/wp-content/uploads/2026/02/sec-testimoni-texture_11zon.webp) repeat-x
        top / 150%;
  }
}