/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

@import url("https://fonts.googleapis.com/css2?family=Amiko:wght@400;600;700&family=Poppins:ital,wght@0,400;0,600;1,400;1,600&family=Inter:ital,opsz@0,14..32;1,14..32&display=swap");

@font-face {
  font-family: "Myriad Pro";
  font-weight: 400;
  src: url("/wp-content/themes/flatsome-child/assets/fonts/myriad-pro/MyriadPro-Regular.woff")
    format("woff");
  font-style: normal;
  font-display: swap;
}

/* ===================================
TYPOGRAPHY
====================================== */
/* Fonts */
.is-myriad {
  font-family: "Myriad Pro";
  font-weight: 400;
}
.is-caveat {
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-style: normal;
}

/* Font Weights */
.fw-400 {
  font-weight: 400 !important;
}
.fw-600 {
  font-weight: 600 !important;
}
.fw-700 {
  font-weight: 700 !important;
}

/* Colors */
.bg-primary {
  background-color: #bc0b20 !important;
}
.text-white {
  color: white !important;
}

p {
  font-family: "Amiko", sans-serif;
  font-weight: 400;
  letter-spacing: -1px;
}

/* ===================================
BACKGROUND
====================================== */
/* Gradients */
.grey-gradient {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #eaeaea 39.9%,
    rgba(245, 245, 245, 0.1) 100%
  );
}
.red-gradient {
  background:
    url("/wp-content/uploads/2026/02/bg-texture.webp") no-repeat right,
    linear-gradient(270deg, #ed1c24 28.86%, #e31b23 69.24%, #871015 100%);
}

/* ===================================
BUTTON
====================================== */
.btn-variant-1 {
  font-family: Poppins;
  font-weight: 600;
  font-size: 20px;
  line-height: 2.4;

  border-radius: 20px;
  padding-inline: 30px;
  background-color: #ed1c24;
}
.btn-variant-2 {
  font-family: Inter;
  font-weight: 400;
  font-size: 20px;
  line-height: 2.4;

  border-radius: 35px;
  background:
    url(/wp-content/uploads/2026/02/arrow-button.webp) no-repeat 97% / 13%,
    #ed1c24;
  padding-right: 90px;
  padding-left: 35px;
  padding-block: 3px;
}

/* Join Reseller */
.btn-header {
  font-family: Poppins;
  font-weight: 600;
  text-transform: capitalize !important;
  color: white !important;

  border-radius: 20px;
  height: 41px;
  width: 160px;
  justify-content: center;
  background-color: #ed1c24;
  cursor: pointer;
}
.btn-header span {
  font-size: 16px;
}

/* ===================================
HEADER
====================================== */
/* Logo */
#logo {
  transform: translateY(-8px);
}

/* Main Header */
.header-inner {
  justify-content: start;
}
.header-inner .flex-left,
.header-inner .flex-right {
  flex: unset;
  margin: unset;
}
.header-inner .flex-left ul,
.header-inner .flex-right ul {
  width: fit-content;
  gap: 25px;
}

.header-nav-main.nav-left li .nav-top-link,
.header-nav-main.nav-right li .nav-top-link {
  font-family: "Myriad Pro", sans-serif;
  font-weight: 400;
  font-size: 16px;
  text-transform: capitalize;
  color: #3c2f2f;
}

.header-nav-main.nav-left li.active .nav-top-link,
.header-nav-main.nav-right li.active .nav-top-link {
  line-height: 0.1;
  font-size: 24px;
  -webkit-text-stroke: 1px #3c2f2f;
}

/* Header Top & Bottom (Join Reseller and Socmed) */
.header-wrapper .header-top,
.header-wrapper .header-bottom {
  position: absolute;
  top: 20px;
  z-index: 99;
  width: fit-content;
  background-color: transparent;
}

.header-wrapper .header-top {
  left: 20px;
}
.header-wrapper .header-bottom {
  right: 20px;
}
.header-bottom .flex-row.container {
  max-width: unset;
}
.header-top .social-header {
  display: flex;
  gap: 20px;
  align-items: center;
}

/* Header Search Form */
.header-search-form .flex-row .flex-col:nth-child(2) {
  display: none;
}
.header-search-form input[type="search"] {
  border-radius: 20px;
  background: transparent;
  border: 2px solid #3b3b3b;
  height: 41px;
  width: 340px;
  text-align: center;

  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 15px;
}

.header-search-form input[type="search"],
.header-search-form input[type="search"]::placeholder {
  color: #6b6b6b;
}

/* ===================================
STUCKED HEADER
====================================== */
.header-wrapper.stuck .header-bottom {
  top: 15px;
}

/* ===================================
TRANSPARENT HEADER LIGHT
====================================== */
/* Main Header */
.page-template-page-transparent-header-light
  .header-wrapper:not(.stuck)
  .header-nav-main.nav-left
  li
  .nav-top-link,
.page-template-page-transparent-header-light
  .header-wrapper:not(.stuck)
  .header-nav-main.nav-right
  li
  .nav-top-link {
  color: white;
}

.page-template-page-transparent-header-light
  .header-wrapper:not(.stuck)
  .header-nav-main.nav-left
  li.active
  .nav-top-link,
.page-template-page-transparent-header-light
  .header-wrapper:not(.stuck)
  .header-nav-main.nav-right
  li.active
  .nav-top-link {
  -webkit-text-stroke: 1px white;
}

/* Header Socmed */
.page-template-page-transparent-header-light
  .header-wrapper:not(.stuck)
  .header-top
  .social-header {
  filter: invert(1) brightness(10);
}

/* Header Search Form */
.page-template-page-transparent-header-light
  .header-wrapper:not(.stuck)
  .header-search-form
  input[type="search"] {
  border: 2px solid white;
}
.page-template-page-transparent-header-light
  .header-wrapper:not(.stuck)
  .header-search-form
  input[type="search"],
.page-template-page-transparent-header-light
  .header-wrapper:not(.stuck)
  .header-search-form
  input[type="search"]::placeholder {
  color: white;
}

/* ===================================
SIDEBAR (TAB & MOBILE)
====================================== */
.sidebar-menu .menu-item a {
  font-family: "Myriad Pro", sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  font-size: 16px;
}

/* ===================================
PRODUCT SLIDER
====================================== */
#productSlider .swiper-wrapper {
  display: flex;
  align-items: center;
}
#productSlider .swiper-slide {
  display: flex;
  flex-direction: column;
}
#productSlider .swiper-slide .slider-image-wrapper {
  height: 350px;
  display: flex;
}
#productSlider .swiper-slide .slider-image-wrapper img.slider-image {
  margin: auto;
  height: 100%;
}

/* Details */
#productSlider .swiper-slide .card-wrapper p {
  color: white;
}
#productSlider .swiper-slide .card-wrapper p.title {
  font-weight: 700;
  font-size: 26px;
  line-height: 26px;
  margin-bottom: 5px;
}
#productSlider .swiper-slide .card-wrapper p.category {
  font-family: Myriad Pro;
  font-size: 18px;
  line-height: 18px;
  margin-bottom: 10px;
  letter-spacing: 1px;
}
#productSlider .swiper-slide .card-wrapper .star {
  margin-bottom: 15px;
}
#productSlider .swiper-slide .card-wrapper .star span {
  margin-right: 10px;
}
#productSlider .swiper-slide .card-wrapper .star span svg {
  width: 15px;
}
#productSlider .swiper-slide .card-wrapper p.desc {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0;
  min-height: 154px;
}

/* Button */
#productSlider .swiper-slide .card-wrapper a {
  font-family: Poppins;
  font-weight: 700;
  font-size: 14px;
  padding-block: 10px;
  padding-left: 60px;
  padding-right: 80px;

  border-radius: 49px;
  display: inline-block;
  background:
    url("/wp-content/uploads/2026/02/arrow-button-2.webp") no-repeat 97% 48% /
      38px,
    #242a2f;
  color: white;
  margin-inline: auto;
}

/* Active */
#productSlider .swiper-slide.swiper-slide-active .card-wrapper {
  position: relative;
  background-color: #bc0b20;
  border-radius: 35px;
  padding-top: 260px;
  padding-inline: 45px;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
}
#productSlider .swiper-slide.swiper-slide-active .logo-wrapper {
  display: flex;
  height: 200px;
  margin-bottom: 20px;
}
#productSlider .swiper-slide.swiper-slide-active .logo-wrapper img.logo {
  margin: auto;
  width: 65%;
}
#productSlider .swiper-slide.swiper-slide-active .slider-image-wrapper {
  margin-bottom: -250px;
  z-index: 1;
}
#productSlider
  .swiper-slide.swiper-slide-active
  .slider-image-wrapper
  img.slider-image {
  transform: rotate(11deg);
  transition:
    transform 0.4s,
    filter 0.8s;
}

/* Inactive */
#productSlider .swiper-slide:not(.swiper-slide-active) {
  z-index: -5;
  transform: translateY(150px);
}
#productSlider .swiper-slide:not(.swiper-slide-active) .logo-wrapper {
  display: none;
}
#productSlider
  .swiper-slide:not(.swiper-slide-active)
  .slider-image-wrapper
  img.slider-image {
  filter: blur(5px);
}
#productSlider .swiper-slide:not(.swiper-slide-active) .card-wrapper p.title {
  filter: blur(2px);
  color: rgba(255, 255, 255, 0.55);
}
#productSlider .swiper-slide:not(.swiper-slide-active) .card-wrapper .title {
  text-align: center;
}
#productSlider .swiper-slide:not(.swiper-slide-active) .card-wrapper .category,
#productSlider .swiper-slide:not(.swiper-slide-active) .card-wrapper .star,
#productSlider .swiper-slide:not(.swiper-slide-active) .card-wrapper .desc,
#productSlider .swiper-slide:not(.swiper-slide-active) .card-wrapper a {
  display: none;
}

/* Slider Button */
#productSlider .swiper-slide .custom-button-next,
#productSlider .swiper-slide .custom-button-prev {
  display: none;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin-block: auto;
}

#productSlider .swiper-slide .custom-button-next {
  right: -70px;
}
#productSlider .swiper-slide .custom-button-prev {
  left: -70px;
}

#productSlider .swiper-slide .custom-button-next svg,
#productSlider .swiper-slide .custom-button-prev svg {
  display: block;
  width: 40px;
  height: 40px;
}

/* Active */
#productSlider .swiper-slide.swiper-slide-active .custom-button-next {
  display: block;
  transform: translateY(-20px);
}
#productSlider .swiper-slide.swiper-slide-active .custom-button-prev {
  display: block;
  transform: translateY(-20px) rotate(-180deg);
}

/* ============================================
BRAND BAR
=============================================== */
.brand-bar .stack img {
  filter: grayscale(1);
}
.brand-bar .stack img:hover {
  filter: grayscale(0);
}

/* ============================================
SERTIFIKASI
=============================================== */
.sec-sertifikasi.red-gradient {
  background:
    url("/wp-content/uploads/2026/02/bg-texture.webp") no-repeat right,
    linear-gradient(270deg, #ed1c24 28.86%, #e31b23 69.24%, #871015 100%);
}

.sec-sertifikasi .col-inner:has(.stack-logo) {
  height: 100%;
}

.sec-sertifikasi .stack-logo {
  height: 100%;
  margin-right: 90px;
}

.sec-sertifikasi .chicken-absolute {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-180px);
}

/* ===================================
FOOTER
====================================== */
.absolute-footer {
  display: none;
}

/* Background */
.sec-footer-main .section-bg.fill {
  background: url("/wp-content/uploads/2026/02/footer-bg.webp") no-repeat bottom;
}

/* Menu */
.menu-footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 60px;
}
.menu-footer .ux-menu-link--active a,
.menu-footer a {
  font-family: "Myriad Pro";
  font-size: 20px;
  color: white;
}
.menu-footer .menu-item:hover.ux-menu-link--active a,
.menu-footer .menu-item:hover a {
  color: white;
}

/* Contact Column */
.col-contact .text {
  margin-bottom: 15px;
}
.col-contact a {
  color: #fdf7ef;
}
.col-contact p {
  display: flex;
  gap: 10px;
  align-items: center;
}
.col-contact .svg-wrapper {
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.col-contact .social-shop {
  margin-top: 20px;
  display: flex;
  gap: 30px;
}

/* ===================================
RESPONSIVE >>> TABLET
====================================== */
@media only screen and (max-width: 849px) {
  /* Utility */
  .nobr-medium br {
    display: none;
  }

  /* ===================================
  HEADER
  ====================================== */
  /* Logo */
  #logo {
    transform: translateY(0);
    margin-left: 0;
  }
  .flex-col:has(.mobile-nav.nav-right) {
    margin-left: auto;
  }

  /* Header Search Form */
  .header-search-form input[type="search"] {
    width: 100%;
  }

  /* Inside Sidebar when in tablet */
  .social-header {
    display: flex;
    gap: 5px;
  }
  .social-header a,
  .social-header svg {
    display: block;
    width: 30px;
    height: 30px;
  }

  /* ===================================
  BUTTON
  ====================================== */
  .btn-variant-1 {
    font-size: 16px;
    border-radius: 16px;
  }
  .btn-variant-2 {
    font-size: 16px;
    border-radius: 35px;
    padding-right: 60px;
    padding-left: 30px;
  }

  /* Join Reseller */
  .btn-header {
    line-height: 0px;
    padding: 0 !important;
  }

  /* ===================================
  PRODUCT SLIDER
  ====================================== */
  #productSlider .swiper-wrapper {
    padding-inline: 30px;
  }

  #productSlider .swiper-slide .card-wrapper p.desc {
    min-height: 200px;
  }

  /* Slider Button */
  #productSlider .swiper-slide .custom-button-next {
    right: -30px;
  }
  #productSlider .swiper-slide .custom-button-prev {
    left: -30px;
  }

  /* ============================================
  SERTIFIKASI
  =============================================== */
  .sec-sertifikasi.red-gradient {
    background:
      url(/wp-content/uploads/2026/02/bg-texture.webp) repeat-y right / 140%,
      linear-gradient(270deg, #ed1c24 0%, #e31b23 20%, #871015 100%);
  }

  .sec-sertifikasi .stack-logo {
    margin-right: 0;
  }

  .sec-sertifikasi .desc-col .img {
    margin-inline: auto;
  }

  .sec-sertifikasi .chicken-absolute {
    left: unset;
    top: unset;
    right: 0;
    bottom: 0;
    transform: scaleX(-1) translateY(150px);
  }

  /* ===================================
  FOOTER
  ====================================== */
  /* Menu */
  .menu-footer .ux-menu-link--active a,
  .menu-footer .menu-item:hover.ux-menu-link--active a,
  .menu-footer a {
    font-size: 16px;
  }

  /* Contact Column */
  .col-contact .text {
    margin-bottom: 10px;
  }
  .col-contact a {
    font-size: 16px;
  }
}

/* ===================================
RESPONSIVE >>> MOBILE
====================================== */
@media only screen and (max-width: 430px) {
  /* Utility */
  .nobr-small br {
    display: none;
  }

  /* ===================================
  BUTTON
  ====================================== */
  .btn-variant-1 {
    font-size: 14px;
    border-radius: 14px;
  }
  .btn-variant-2 {
    font-size: 14px;
    padding-right: 50px;
    padding-left: 25px;
  }

  /* ===================================
  PRODUCT SLIDER
  ====================================== */
  #productSlider .swiper-wrapper {
    padding-inline: 0px;
  }

  /* Slider Button */
  #productSlider .swiper-slide .custom-button-next {
    right: 0px;
  }
  #productSlider .swiper-slide .custom-button-prev {
    left: 0px;
  }
  #productSlider .swiper-slide .custom-button-next,
  #productSlider .swiper-slide .custom-button-prev,
  #productSlider .swiper-slide .custom-button-next svg,
  #productSlider .swiper-slide .custom-button-prev svg {
    width: 30px;
    height: 30px;
  }

  /* ============================================
  SERTIFIKASI
  =============================================== */
  .sec-sertifikasi.red-gradient {
    background:
      url("/wp-content/uploads/2026/02/bg-texture.webp") repeat-y right / 140%,
      linear-gradient(270deg, #ed1c24 28.86%, #e31b23 69.24%, #871015 100%);
  }
  .sec-sertifikasi .stack-logo {
    margin-right: 30px;
  }
  .sec-sertifikasi .chicken-absolute {
    transform: scaleX(-1) translateY(90px);
  }
  .page-id-403 .sec-sertifikasi .chicken-absolute {
    transform: scaleX(-1) translateY(50px);
  }

  /* ===================================
  FOOTER
  ====================================== */
  /* Menu */
  .menu-footer {
    gap: 30px;
  }

  /* Custom Footer */
  .CustomFooterCurrentYear {
    line-height: 18px;
    font-size: 18px;
  }
}