html {
  scroll-behavior: smooth;
}

.disable-scroll {
  overflow: hidden;
}

* {
  font-family: "Inter";
  font-style: normal;
}

h1 {
  margin: 0;
}

body {
  margin: 0px;
  font-family: "Inter", sans-serif;
}
.nav {
  display: flex;
  justify-content: space-between;
  margin: 0px 120px;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 10px;
  background: #0376fd;
  box-shadow: 0 0 0 9999px #0376fd;
}

.nav .right {
  display: flex;
  color: rgba(0, 0, 0, 0.64);
  font-weight: 400;
  font-size: 16px;
  font-family: "Inter", sans-serif;
}

.nav .right a {
  color: white;
}

.nav .right .menu {
  margin: 14px 16px 8px 16px;
  cursor: pointer;
  height: 30px;
}

.nav .right .menu a:hover {
  color: #e5e5e5;
}

.hero-cover {
  background-image: url("../assets/images/banner-atas-2.webp");
  height: 648px;
  min-height: 450px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: left;
  flex-direction: column;
  background-position: top right;
  background-repeat: no-repeat;
  background-size: auto;
}
.hero-cover-dimas {
  margin: 0px 120px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.75s ease-out;
}
.header {
  text-align: center;
}
.icon-show {
  margin-bottom: -10px;
}

.header1 {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-size: 64px;
  color: white;
  line-height: 72px;
  text-shadow: 0px 16px 48px #0000003d;
  letter-spacing: -1.5px;
}

.header2 {
  border-bottom: none;
}

.header3 {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: white;
  margin-top: 30px;
  max-width: 50%;
  opacity: 0.92;
}

.header4 {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: #adadad;
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  max-width: min-content;
  background: white;
  padding: 8px 16px 8px 12px;
  border-radius: 8px;
  text-align: center;
  gap: 20px;
}

html:lang(en) .header4 {
  padding: 8px 16px;
}

.header4_griditem {
  max-width: fit-content;
}

.header4_griditem_ojk {
  border-right: 1px solid #e0e0e0;
  padding-right: 20px;
}

.header4.only-mobile .header4_griditem_ojk {
  padding-right: 17px;
}

.header4_atas {
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  color: black;
  opacity: 0.32;
  width: 70px;
}

.header4.only-mobile .header4_atas {
  width: 70px;
}

.header4_bawah img {
  height: 23px;
  width: auto;
  margin-top: 5px;
}

.header5 {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.header5 .header5_teks {
  font-size: 14px;
  color: white;
  font-weight: 300;
  max-width: 350px;
}

.header5.only-desktop .header5_logo-gembok {
  padding: 5px 0;
}

.section-two {
  background-color: white;
  padding: 64px 80px 64px 80px;
  max-width: 1440px;
  margin: 0 auto;
  box-shadow: 0px 5000px 0px 5000px white;
}

.section-two_dalam {
  padding: 16px 0 16px 0;
  display: flex;
  gap: 0;
  margin: 0 auto;
}

.section-two .section-two_gambar {
  text-align: center;
  width: calc(50vw - 80px);
}

.section-two .section-two_gambar img {
  /* max-width: 360px; */
  height: auto;
  width: 100%;
  position: absolute;
  left: calc(25% - 140px);
  transform-origin: 22% 15%;
  max-width: 272.66745px;
  max-height: 540px;
}

.section-two .section-two_gambar_kol {
  height: 136px !important;
  margin-top: 68px;
  transition: transform 0.25s ease-out;
}

.section-two .section-two_tulisan {
  width: calc(50vw - 80px);
}

.section-two .section-two_tulisan_items {
  margin-bottom: 24px;
}

.section-two .section-two_tulisan_items.atas {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-align: left;
  color: rgba(0, 0, 0, 0.48);
  max-width: 550px;
}

.section-two .section-two_tulisan_items.besar {
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.5px;
  text-align: left;
  color: rgba(0, 0, 0, 0.92);
  max-width: 550px;
}

.section-two .section-two_tulisan_items.keterangan {
  font-family: Inter;
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: 0px;
  text-align: left;
  color: rgba(0, 0, 0, 0.64);
  max-width: 550px;
}

.section-two .section-two_tulisan_items.download {
  display: flex;
}

.section-two .section-two_tulisan_items.download .googleplayqr img,
.section-two .section-two_tulisan_items.download .appstoreqr img {
  height: 120px;
  transition: all 300ms;
}

.section-two-download-items.googleplayqr img:hover,
.section-two-download-items.appstoreqr img:hover {
  transform: scale(1.75);
  transition: all 300ms;
}

.section-two .section-two_tulisan_items.download .googleplaybadge img,
.section-two .section-two_tulisan_items.download .appstorebadge img {
  height: 40px;
  margin-top: 37px;
}

.section-two .section-two_tulisan_items.download .googleplayqr,
.section-two .section-two_tulisan_items.download .appstoreqr {
  margin-right: 48px;
}

.section-two .section-two_tulisan_items.rating {
  display: flex;
  gap: 24px;
  margin-bottom: unset;
  align-items: center;
}

.section-two
  .section-two_tulisan_items.rating
  .section-two-rating-items-download-besar {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.5px;
  text-align: left;
  color: rgba(0, 0, 0, 0.92);
}

.section-two
  .section-two_tulisan_items.rating
  .section-two-rating-items-download-besar
  img {
  width: 16px;
  height: 16px;
  margin: 4px 4px 4px 0;
}

.section-two
  .section-two_tulisan_items.rating
  .section-two-rating-items-download-kecil {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;
  color: rgba(0, 0, 0, 0.64);
}

@media only screen and (min-width: 769px) {
  .section-two
    .section-two_tulisan_items.rating
    .section-two-rating-items.nominasi
    img {
    width: 120px;
    height: 120px;
  }
}

@media only screen and (max-width: 768px) {
  .section-two
    .section-two_tulisan_items.rating
    .section-two-rating-items.nominasi
    img {
    width: 64px;
    height: 64px;
  }
}

.download-links {
  margin-top: 16px;
}

.download-links a {
  margin: 0px 10px;
}

.icon {
  padding: 0px;
  margin: 0px;
}

/* .section-eight {
  background: #0359be;
  min-height: 300px;
  padding: 40px;
}

.section-eight .header {
  color: #fff;
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  padding-top: 30px;
} */

.group1 {
  background: #ffffff;
  border-radius: 24px;
  width: 300px;
  padding: 18px 27px;
  height: 300px;
  color: rgba(0, 0, 0, 0.8);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  margin: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* .section-eight .group-wrapper {
  display: flex;
  justify-content: center;
}

.section-eight .author {
  display: flex;
  justify-content: space-between;
}

.section-eight .left {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.section-eight .name {
  color: rgba(0, 0, 0, 0.8);
  font-size: 16px;
  line-height: 20px;
}

.section-eight .caption {
  color: rgba(0, 0, 0, 0.48);
  margin-right: 8px;
}

.section-eight img {
  height: 64px;
} */

.section-seven {
  padding: 60px;
  text-align: center;
  background-color: #fcfcfc;
}

.section-seven .header {
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.5px;
  text-align: center;
  color: black;
  opacity: 0.92;
}

.section-seven .sub-header {
  margin-top: 16px;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0px;
  text-align: center;
  color: black;
  opacity: 0.64;
}

.section-seven .article {
  display: flex;
  width: 600px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding: 16px 0px;
}

.section-seven .article:last-child {
  border-bottom: none;
}

.section-seven .article .left img {
  height: 20px;
}

.section-seven .article .left .author {
  color: rgba(0, 0, 0, 0.48);
  display: flex;
  margin-top: 10px;
  font-size: 14px;
  display: none;
}

.section-seven .group {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  flex-direction: column;
  align-items: center;
}

.section-seven .left {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.section-seven .right img {
  width: 80px;
}

.section-seven .article-kategori {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: left;
  color: #0368de;
  background: #e0eeff;
  padding: 6px 12px;
  border-radius: 16px;
}

.section-seven .article-header {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;
  color: black;
  opacity: 0.8;
  margin-top: 8px;
}

.section-seven .article-header:hover {
  opacity: 0.65;
}

.section-seven .article-meta {
  font-size: 14px;
  line-height: 20px;
  margin-top: 8px;
  color: black;
  opacity: 0.32;
  font-weight: 400;
}

.author img {
  display: none;
}

@media only screen and (max-width: 750px) {
  .section-seven .group {
    align-items: unset;
    margin-top: 24px;
  }
  .section-seven .article-kategori {
    display: none;
  }
  .section-seven .article {
    gap: 30px;
    max-height: 64px;
  }
}

a {
  color: rgba(0, 0, 0, 0.64);
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  cursor: pointer;
}

.navbar a {
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #2d2d2d;
  padding: 18px;
}

.navbar .left.only-mobile a {
  padding: unset;
}

.navbar .lang-button {
  font-size: 14px;
  padding: 0px;
}

.navbar .lang-button.active-btn {
  color: white;
}

.lang-button-wrapper {
  width: 85%;
  height: 58px;
  border: 1px solid grey;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.lang-button {
  width: 50%;
  justify-content: center;
}

.active-btn {
  background-color: #0376fd;
  height: 50px;
  border-radius: 30px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px;
}

.display-row {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

@media only screen and (max-width: 750px) {
  .hero-cover {
    background-image: none;
    background-size: cover;
    text-align: center;
    min-height: unset;
    height: 340px;
  }

  .hero-cover-dimas {
    margin: 24px auto;
    max-width: 316px;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.75s ease-out;
  }

  .mg-top {
    margin-top: -30px;
  }
  .hero-cover .header1 {
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    color: black;
    opacity: 0.92;
    text-shadow: none;
    margin-top: 0px;
  }
  .hero-cover .header2 {
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    color: black;
    opacity: 0.92;
  }
  .hero-cover .header4 {
    font-size: 14px;
    line-height: 20px;
    margin: auto;
    margin-top: 30px;
    max-width: fit-content;
  }

  .hero-cover .header4.only-mobile {
    background: #fcfcfc;
    display: block;
  }

  .hero-cover .header4.only-mobile .header5 {
    margin-top: 8px;
  }

  .hero-cover .header4.only-mobile .header5 .header5_teks {
    color: rgba(0, 0, 0, 0.64);
    font-size: 11px;
    font-weight: 300;
    line-height: 16px;
    text-align: left;
  }

  .hero-cover .header4.only-mobile .header5 .header5_logo-gembok img {
    height: 14px;
    width: auto;
  }

  .hero-cover .header4.only-mobile .header5 .header5_logo-gembok img {
    padding: 6px 0;
  }

  .hero-cover .header4_gridcontainer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 290px;
    border-radius: 8px;
    text-align: center;
    padding: 8px 0;
    gap: 14px;
    justify-items: center;
  }

  .nav {
    display: flex;
    justify-content: space-between;
    margin: 0px 20px;
    margin-top: 16px;
    margin-bottom: 10px;
    background: white;
    box-shadow: 0 0 0 9999px white;
    align-items: unset;
  }

  .nav .right {
    display: none;
  }

  .download-links a {
    margin: 0px 6px;
  }

  .header3 {
    font-size: 16px;
    line-height: 24px;
    margin: 20px 0 0 0;
    color: black;
    opacity: 0.64;
    max-width: 100%;
  }

  .section-two {
    padding: 24px 24px 48px 24px;
  }

  .section-two_dalam {
    display: block;
  }

  .section-two .section-two_tulisan {
    width: 100%;
    margin-top: 372px;
  }

  .section-two .section-two_tulisan_items.atas,
  .section-two .section-two_tulisan_items.besar,
  .section-two .section-two_tulisan_items.keterangan,
  .section-two .section-two_tulisan_items.download,
  .section-two .section-two_tulisan_items.rating {
    text-align: center;
  }

  .section-two .section-two_tulisan_items.download .googleplayqr,
  .section-two .section-two_tulisan_items.download .appstoreqr {
    display: none;
  }

  .section-two .section-two_gambar {
    width: unset;
  }

  /* new change */
  .section-two .section-two_gambar img {
    height: 320px;
    width: auto;
    max-width: unset;
    left: 50%;
    top: 518px;
    transform: translate(-50%, 0) !important;
  }

  .section-two .section-two_gambar_kol {
    height: 86px !important;
    margin-top: 38px;
    transition: transform 0.25s ease-out;
  }

  .section-two .section-two_tulisan_items.atas {
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.5px;
    color: rgba(0, 0, 0, 0.48);
    text-align: center;
    margin: 0 auto;
  }

  .section-two .section-two_tulisan_items.besar {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0px;
    text-align: center;
    margin: 16px auto 0 auto;
  }

  .section-two .section-two_tulisan_items.keterangan {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: center;
    color: rgba(0, 0, 0, 0.64);
    margin: 16px auto 0 auto;
  }

  .section-two .section-two_tulisan_items.judul-download {
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0px;
    text-align: center;
    color: rgba(0, 0, 0, 0.64);
    margin-bottom: unset;
    margin-top: 24px;
  }

  .section-two .section-two_tulisan_items.download {
    justify-content: center;
    margin-bottom: unset;
    margin-top: 8px;
    gap: 12px;
  }

  .section-two .section-two_tulisan_items.download .googleplaybadge img,
  .section-two .section-two_tulisan_items.download .appstorebadge img {
    margin-top: unset;
  }

  .section-two .section-two_tulisan_items.rating {
    justify-content: center;
    margin-bottom: unset;
    margin-top: 16px;
  }

  .section-two
    .section-two_tulisan_items.rating
    .section-two-rating-items-download-besar {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 0px;
    text-align: center;
    color: rgba(0, 0, 0, 0.8);
  }

  .section-two
    .section-two_tulisan_items.rating
    .section-two-rating-items-download-besar
    img {
    margin: 0 4px 0 0;
  }

  .section-two
    .section-two_tulisan_items.rating
    .section-two-rating-items-download-kecil {
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0px;
    text-align: center;
    color: rgba(0, 0, 0, 0.48);
  }

  .download-links img {
    max-width: 42vw;
    height: 49px;
  }

  .mobile-class1 {
    margin-right: 20px;
  }

  .mobile-class2 {
    margin-left: 20px;
  }

  .mobile-rev {
    display: flex;
    flex-direction: row-reverse !important;
  }

  .group1 {
    width: 80%;
    font-size: 14px;
    line-height: 20px;
    margin: 20px 5px;
    padding: 24px;
    height: 250px;
  }

  /* .section-eight .header {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 0px;
    text-align: center;
    color: #ffffff;
  }

  .section-eight {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .section-eight .group-wrapper {
    flex-direction: column;
  } */

  .section-seven {
    padding: 24px;
  }

  .section-seven .right img {
    width: 64px;
  }

  .section-seven .article-header {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;
    color: black;
    opacity: 0.8;
    margin-top: 0;
  }
  .section-seven .article .left .author {
    font-size: 11px;
    line-height: 16px;
  }
  .section-seven .article-meta {
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0px;
    text-align: left;
    color: black;
    opacity: 0.32;
    margin-top: 4px;
  }

  .section-seven .header {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 0px;
    text-align: center;
  }
  .section-seven .sub-header {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0px;
    text-align: center;
    color: black;
    opacity: 0.64;
  }

  .article {
    width: auto !important;
  }

  .mobile-col-reverse {
    flex-direction: column-reverse;
  }
  .slideshow-container {
    max-width: 2000px;
    position: relative;
    margin: auto;
  }

  .mySlides {
    display: none;
  }

  .dot {
    cursor: pointer;
    height: 5px;
    width: 25px;
    margin: 0 2px;
    background-color: rgba(255, 255, 255, 0.32);
    border-radius: 30px;
    display: inline-block;
    transition: background-color 0.6s ease;
  }

  .dot:hover {
    background-color: #fff;
  }

  .active {
    width: 30px;
    border-radius: 30px;
    background-color: #fff;
  }

  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }

  @keyframes fade {
    from {
      opacity: 0.4;
    }
    to {
      opacity: 1;
    }
  }
}

/* // olde design css */
.dropdown {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.dropbtn {
  padding: 8px 16px;
  font-size: 12px;
  background-color: transparent;
  color: white;
  border: 1px solid white;
  border-radius: 16px;
  cursor: pointer;
  margin-left: 20px;
  margin-top: 7px;
}
.dropdown.only-desktop .dropbtn:hover + #myDropdown,
.dropdown.only-desktop #myDropdown:hover {
  display: block;
}
.dropbtn i {
  transition: 250ms ease;
}
.dropbtn img {
  vertical-align: middle;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 140px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1001;
}

.dropdown-content a {
  color: black;
  padding: 8px 16px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  display: block;
}

.dropdown-content a:hover {
  background: #e5e5e5;
}

.putar180derajat {
  rotate: 180deg;
}

.social-icons a {
  text-decoration: none;
  margin: 34px 16px;
  color: white;
}
.privacy {
  text-decoration: none;
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  padding: 0px 10px;
  font-size: 12px;
  align-items: center;
  color: #f7f8f9;
}

.hamberger {
  display: none;
}
.show {
  display: block;
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  display: none;
  z-index: 2;
  overflow-y: auto;
}
.close-section {
  text-align: right;
  margin: 8px;
}

@media (min-width: 751px) {
  .only-mobile {
    display: none;
  }
}

@media (max-width: 750px) {
  .hamberger {
    display: flex;
    color: rgba(0, 0, 0, 0.64);
    font-weight: 500;
    font-size: 16px;
    font-family: "Inter", sans-serif;
    width: 27px;
    height: 27px;
  }
  .mobile-menu a {
    text-decoration: none;
    padding: 14px 20px;
  }
  .only-desktop {
    display: none;
  }

  .mobile-menu {
    display: flex;
    flex-direction: column;
    color: black;
  }
  .divider {
    width: 260px;
  }
  .dropdown-content-mobile {
    width: 33%;
    margin-left: 33%;
  }
}
/* //old design css end */

.widget_produk_homepage_area {
  position: relative;
}

.gambar-kresek-bungkus-kumpulan-produk-live {
  position: absolute;
  z-index: 2;
  height: 450px;
}

.gambar-kresek-bungkus-kumpulan-produk-live img {
  max-width: 184px;
  margin-left: 15px;
}

.kresek-bungkus-kumpulan-produk-live {
  position: relative;
  padding: 30px 0;
  border-radius: 3px 3px 3px 0 /*margin-top: 30px;*/;
}

.kumpulan-produk-live::-webkit-scrollbar {
  display: none;
}

.satu-produk-live {
  border-radius: 3px;
  z-index: 3;
  width: 184px;
  box-shadow: 3px 3px 9px 0 #00000026;
}

.satu-produk-live .gambar-produk-live img {
  margin: 0;
  border-radius: 3px 3px 0 0;
  filter: saturate(0.75);
}

.informasi-produk-live {
  border-radius: 0 0 3px 3px;
  border-top: 0.5px solid #cacaca;
  height: 153px;
  background: #fff;
  padding: 10.5px;
  overflow: hidden;
}

.nama-produk-live {
  color: #404040;
  font-size: 13px;
  line-height: 1.5;
  /* word-break: break-all; */
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  min-height: 58.5px;
}

.harga-produk-live {
  display: flex;
  color: #278ac5;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
  position: relative;
}

.penjualan-produk-live {
  font-size: 12px;
  display: flex;
  color: #767676;
}

.penjualan-produk-live .spansales::before {
  content: "Terjual";
  margin-right: 3px;
}

.toko-produk-live {
  font-size: 12px;
  display: flex;
  color: #767676;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-transform: capitalize;
}

.gambar-produk-live {
  width: 100%;
  height: 0;
  position: relative;
  padding-bottom: 100%;
  background: #f9f9f9;
  border-radius: 3px 3px 0 0;
}

.bungkus-produk-pertama {
  width: 197%;
  margin: auto;
}

.produk-pertama,
.produk-pertama img {
  display: flex;
  justify-content: center;
  margin: 0;
  left: 3%;
  position: sticky;
  width: 130px;
}

.teks-kontainer-terlaris {
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-align: center;
  opacity: 0.48;
  color: black;
}

.section-three-tab {
  background: #f8f8f8;
}

.tab-diriku {
  display: flex;
  flex-wrap: wrap;
  padding: 64px 0;
  background: #f8f8f8;
  margin: 0 auto;
  max-width: 860px;
  justify-content: space-between;
}

.tab-diriku input[type="radio"] {
  display: none;
}

.tab-diriku .tab {
  order: 2;
  width: 100%;
  display: none;
}
/* new change */
/* .tab-diriku label {
  order: 1;
  width: 206px;
  cursor: pointer;
  margin-top: 40px;
  color: #0376FD;
  background: #F0F7FF;
  box-shadow: inset 0 0 0 1px #0376FD;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  Padding: 15px 0 15px 0;
  letter-spacing: 0px;
  text-align: center;
} */

.tab-diriku label {
  order: 1;
  width: 160px;
  cursor: pointer;
  margin-top: 40px;
  color: #0376fd;
  background: #f0f7ff;
  box-shadow: inset 0 0 0 1px #0376fd;
  border-radius: 24px;
  font-size: 12px;
  font-weight: 500;
  line-height: 5px;
  padding: 15px 0 15px 0;
  letter-spacing: 0px;
  text-align: center;
  text-wrap-mode: nowrap;
}

.tab-diriku label:hover {
  color: #0075ffcf;
  box-shadow: inset 0 0 0 1px #0075ffcf;
}

.tab-diriku input[type="radio"]:checked + label + .tab {
  display: block;
}
/* new change */
.tab-diriku input[type="radio"]:checked + label.tab-diriku-0,
.tab-diriku input[type="radio"]:checked + label.tab-diriku-1,
.tab-diriku input[type="radio"]:checked + label.tab-diriku-2,
.tab-diriku input[type="radio"]:checked + label.tab-diriku-3,
.tab-diriku input[type="radio"]:checked + label.tab-diriku-4 {
  color: #fff;
  background: #0376fd;
  cursor: default;
  opacity: 1 !important;
}

.kontainer-terlaris {
  width: 100%;
}

.kontainer-terlaris .terlaris {
  z-index: 1;
  text-align: center;
  margin-top: -12px;
  width: 100%;
  position: relative;
}

.kumpulan-produk-live .produk-terakhir {
  margin: auto;
}

.kumpulan-produk-live .produk-terakhir span {
  color: #f4f4f4;
  font-size: 90px;
  margin: auto 20px auto 0;
}

.gambar-kumpulan-produk-live {
  width: 100%;
}

.dibawah-gambar-kumpulan-produk-live__besar {
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.5px;
  text-align: center;
  color: black;
  opacity: 0.8;
  margin-bottom: 16px;
  margin-top: 0px;
}

.dibawah-gambar-kumpulan-produk-live__kecil {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0px;
  text-align: center;
  color: black;
  opacity: 0.64;
}

/*slider mobile section 3*/

.section-three-slider.only-mobile {
  background: #f8f8f8;
  padding: 48px 0;
}

.title-section-slider {
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-align: center;
  color: black;
  opacity: 0.48;
  padding: 0 24px;
}

.section-slider-container .slider .slide img {
  width: 280px;
}

.section-slider-container {
  overflow-x: scroll;
  white-space: nowrap;
  margin-top: 24px;
  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
  scrollbar-width: none; /* Hide scrollbar for  Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.section-slider-container::-webkit-scrollbar {
  display: none;
}

.section-slider-container .slider {
  display: inline-block;
}

.section-slider-container .slide {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.section-slider-container .slide img {
  max-width: 100%;
  height: auto;
}

.section-slider-container .slide-text {
  margin-top: 10px;
}

.section-slider-container {
  /* ... */
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.section-slider-container .slide {
  /* ... */
  scroll-snap-align: start;
}

.indicators {
  margin-top: 20px;
  display: flex;
  gap: 6px;
  justify-content: center;
}

.indicators .indicator {
  height: 4px;
  border-radius: 6px;
  width: 36px;
  background: #e0e0e0;
  cursor: pointer;
}

.indicators .indicator.active {
  background: #0476fd;
}

.section-slider-dibawah-gambar {
  text-align: center;
}

.section-slider-dibawah-gambar img {
  max-width: 120px;
  margin-top: 20px;
}

.section-slider-dibawah-gambar .judul-slider {
  max-width: max-content;
  margin: auto;
  border-radius: 16px;
  background: #e0eeff;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: center;
  padding: 8px 16px 8px 16px;
  color: black;
  opacity: 0.64;
  margin-top: 24px;
}

.section-slider-dibawah-gambar .teks-besar-slider {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0px;
  text-align: center;
  color: black;
  opacity: 0.8;
  margin: 16px auto 0 auto;
  max-width: 312px;
}

.section-slider-dibawah-gambar .teks-kecil-slider {
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: center;
  color: black;
  opacity: 0.64;
  margin: 8px auto 0 auto;
  max-width: 312px;
}

.section-four {
  background-color: white;
}

.section-four-dalam.only-desktop {
  padding: 80px 0;
}

.section-four .section-four-dalam.only-desktop .section-four-bungkus-item {
  display: flex;
  margin: 0 auto;
  margin-top: 40px;
  max-width: 1120px;
  justify-content: space-between;
}

.section-four .section-four-dalam.only-desktop .section-four-judul {
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.5px;
  text-align: center;
  color: black;
  opacity: 0.8;
  padding: 8px 24px;
  width: 600px;
  margin: 0 auto;
}

.section-four-item,
.section-four-item,
.section-four-item {
  transition: opacity 1s ease;
}

.section-four .section-four-dalam.only-desktop .section-four-item-gambar {
  text-align: center;
}

.section-four .section-four-dalam.only-desktop .section-four-item-gambar img {
  max-width: 240px;
  height: auto;
}

.section-four .section-four-dalam.only-desktop .section-four-item-penomoran,
.section-four .section-four-dalam.only-desktop .section-four-item-teks-tebal,
.section-four .section-four-dalam.only-desktop .section-four-item-teks-tipis {
  text-align: center;
}

.section-four .section-four-dalam.only-desktop .section-four-item-penomoran {
  margin: 0 auto;
  margin-top: 24px;
  width: 46px;
  height: 46px;
  outline: 2px solid #0376fd;
  border-radius: 32px;
  color: #0376fd;
  font-size: 20px;
  line-height: 46px;
}

.section-four .section-four-dalam.only-desktop .section-four-item-teks-tebal {
  margin: 0 auto;
  max-width: 346px;
  color: black;
  opacity: 0.8;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0px;
  text-align: center;
  margin-top: 16px;
}

.section-four .section-four-dalam.only-desktop .section-four-item-teks-tipis {
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: center;
  color: black;
  opacity: 0.64;
  margin-top: 12px;
}

.section-four .section-four-dalam.only-mobile {
  padding: 48px 0;
}

.section-four .section-four-dalam.only-mobile .section-four-judul {
  max-width: 360px;
  padding: 0 24px;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0px;
  text-align: center;
  margin: 0 auto;
  opacity: 0.8;
}

.section-four .section-four-dalam.only-mobile .section-four-bungkus-item {
  margin: 24px auto 0 auto;
  max-width: 75vw;
}

.section-four
  .section-four-dalam.only-mobile
  .section-four-bungkus-item
  .section-four-item {
  display: flex;
}

.section-four
  .section-four-dalam.only-mobile
  .section-four-bungkus-item
  .section-four-item
  .section-four-item-kiri {
  width: 48px;
  height: 48px;
  border-radius: 32px;
  border: 2px solid #0376fd;
  padding: 0;
  margin-right: -27px;
  background: white;
  z-index: 0;
}

.section-four
  .section-four-dalam.only-mobile
  .section-four-bungkus-item
  .section-four-item
  .section-four-item-kiri
  .section-four-item-penomoran {
  width: 48px;
  height: 48px;
  font-size: 20px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: 0px;
  text-align: center;
  color: #0376fd;
}

.section-four
  .section-four-dalam.only-mobile
  .section-four-bungkus-item
  .section-four-item
  .section-four-item-kanan {
  border-left: 3px dotted #0476fd;
  padding-left: 48px;
}

.section-four
  .section-four-dalam.only-mobile
  .section-four-bungkus-item
  .section-four-item.ketiga
  .section-four-item-kanan {
  border-left: none;
  padding-left: 48px;
}

.section-four
  .section-four-dalam.only-mobile
  .section-four-bungkus-item
  .section-four-item
  .section-four-item-kanan
  .section-four-item-teks-tebal {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;
  color: black;
  opacity: 0.8;
}

.section-four
  .section-four-dalam.only-mobile
  .section-four-bungkus-item
  .section-four-item
  .section-four-item-kanan
  .section-four-item-teks-tipis {
  font-size: 12px;
  font-weight: 300;
  line-height: 18px;
  letter-spacing: 0px;
  text-align: left;
  color: black;
  opacity: 0.64;
  margin-top: 8px;
  margin-bottom: 32px;
}

.dropdown.only-desktop a {
  color: rgba(0, 0, 0, 0.92);
}

.dropdown.only-desktop .dropdown-content {
  background-color: white;
}

.dropdown.only-desktop .dropdown-content a {
  display: flex;
}

.dropdown.only-desktop .dropdown-content img {
  height: 15px;
  margin-right: 5px;
  outline: 0.1px solid #141414;
}

.section-five {
  background: #0359be;
}

.section-five .section-five-judul {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0px;
  text-align: center;
  color: white;
}

.section-five .section-five-keterangan {
  margin-top: 24px;
}

.section-five .section-five-keterangan .section-five-keterangan-foto {
  text-align: center;
  height: 24px;
}

.section-five .section-five-keterangan .section-five-keterangan-foto img {
  height: 100%;
  width: auto;
}

.section-five .section-five-keterangan .section-five-keterangan-teks {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: center;
  color: white;
  opacity: 0.8;
  margin-top: 8px;
}

.section-five .section-five-dalam {
  max-width: 312px;
  margin: 0 auto;
  padding-top: 40px;
  text-align: center;
}

.section-five .section-five-body {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 70%;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 24px;
  padding-bottom: 40px;
  grid-template-columns: calc(50vw - 160px) repeat(3, 280px) calc(50vw - 160px);
  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
  scrollbar-width: none; /* Hide scrollbar for  Firefox */
}

.section-five .section-five-body::-webkit-scrollbar {
  display: none;
}

.section-five .section-five-body .section-five-body-item {
  background: white;
  border-radius: 16px;
  padding: 24px;
}

.section-five .section-five-body .section-five-body-item.review-first,
.section-five .section-five-body .section-five-body-item.review-last {
  padding: 0;
  visibility: hidden;
}

.section-five .section-five-body-item-bawah {
  display: grid;
  grid-auto-flow: column;
  margin-top: 24px;
  grid-template-columns: 1fr 40px;
}

.section-five
  .section-five-body-item-bawah
  .section-five-body-item-bawah-kanan
  img {
  width: 40px;
  height: auto;
}

.section-five
  .section-five-body-item-bawah
  .section-five-body-item-bawah-kiri-atas {
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;
  color: black;
  opacity: 0.64;
}

.section-five
  .section-five-body-item-bawah
  .section-five-body-item-bawah-kiri-bawah {
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: left;
  color: black;
  opacity: 0.48;
}

.section-five .section-five-body-item-atas {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0px;
  text-align: left;
  color: black;
  opacity: 0.8;
}

@media only screen and (min-width: 751px) {
  .section-five {
    padding: 64px 0 80px 0;
  }

  .section-five .section-five-judul {
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: -0.5px;
    text-align: center;
    color: white;
  }

  .section-five .section-five-body .section-five-body-item {
    padding: 40px;
    width: 265px;
  }

  .section-five .section-five-body-item-atas {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;
    color: black;
    opacity: 0.8;
  }

  .section-five
    .section-five-body-item-bawah
    .section-five-body-item-bawah-kiri-atas {
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;
    color: black;
    opacity: 0.8;
  }

  .section-five
    .section-five-body-item-bawah
    .section-five-body-item-bawah-kiri-bawah {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;
    color: black;
    opacity: 0.48;
  }

  .section-five .section-five-dalam {
    max-width: 1120px;
    padding-top: unset;
  }

  .section-five .section-five-body {
    display: flex;
    gap: 40px;
    max-width: 1120px;
    margin: 40px auto 0 auto;
    padding-bottom: unset;
  }

  .section-five .section-five-keterangan {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
  }

  .section-five .section-five-body .section-five-body-item.review-first,
  .section-five .section-five-body .section-five-body-item.review-last {
    display: none;
  }

  .section-five .section-five-keterangan .section-five-keterangan-teks {
    margin-top: 0;
  }
}

.section-six {
  max-width: 90%;
  padding: 40px 24px;
  margin: 0 auto;
  background: white;
  box-shadow: 0px 5000px 0px 5000px white;
}

.section-six .section-six-atas-tebal {
  max-width: 312px;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0px;
  text-align: center;
  color: black;
  opacity: 0.92;
  margin: 0 auto;
}

.section-six .section-six-atas-tipis {
  margin: 4px auto 0 auto;
  max-width: 312px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: center;
  color: black;
  opacity: 0.64;
}

.section-six .section-six-tengah {
  margin-top: 24px;
}

.section-six-bawah,
.section-seven-bawah {
  border: 1px solid #0376fd;
  border-radius: 20px;
  margin-top: 24px;
}

.section-six-bawah a:hover,
.section-seven-bawah a:hover {
  opacity: 0.8;
}

.section-six-bawah-tombol,
.section-seven-bawah-tombol {
  padding: 12px 24px;
}

.section-six-bawah-tombol-teks,
.section-seven-bawah-tombol-teks {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: center;
  color: #0376fd;
}

.akordion {
  border-radius: 16px;
  overflow: hidden;
  outline: 1px solid #c0c0c0;
  background: #fdfdfd;
}

.akordion_label,
.akordion_jawab {
  padding: 24px 20px;
}

.akordion_jawab p {
  font-size: 14px;
  margin: 0;
}

.akordion_label {
  display: block;
  color: #333;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  font-size: 17px;
  padding-right: 45px;
}

.akordion_label:hover {
  background: #f4f4f4;
}

.akordion_label::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  width: 12px;
  height: 6px;
  background-image: url("../assets/images/panah-bawah.svg");
  background-size: contain;
  transition: transform 0.25s;
}

.akordion_jawab {
  background: white;
  line-height: 1.6;
  font-size: 0.85em;
  display: none;
  color: black;
  opacity: 0.8;
  font-weight: 400;
}

.akordion_input {
  display: none;
}

.akordion_input:checked ~ .akordion_jawab {
  display: block;
}

.akordion_input:checked ~ .akordion_label::after {
  transform: translateY(-50%) rotate(0.5turn);
}

.akordion_input:checked ~ .akordion_label {
  background: #f4f4f4;
}

.akordion div:not(:last-child) {
  border-bottom: 1px solid #c0c0c0;
}

@media screen and (max-width: 768px) {
  .akordion_label h3 {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;
    color: black;
    opacity: 0.8;
  }
  .page-id-911 .entry-header h1 {
    font-size: 26px;
  }
}

@media screen and (min-width: 769px) {
  .akordion_label h3 {
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: black;
    opacity: 0.8;
  }

  .akordion_label,
  .akordion_jawab {
    padding: 40px;
  }

  .akordion .akordion_jawab p {
    font-size: 16px;
  }
  .akordion .akordion_jawab ul,
  .akordion .akordion_jawab ol,
  .akordion .akordion_jawab table {
    font-size: 15px;
  }
}

.akordion_label h3 {
  padding: 0;
  margin: 0;
}

.akordion ul {
  list-style: disc;
  padding: 0 0 0 30px;
  font-size: 14px;
}

@media only screen and (min-width: 751px) {
  .section-six {
    max-width: 800px;
  }

  .section-six .section-six-atas-tebal {
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: -0.5px;
    text-align: center;
    color: black;
    opacity: 0.92;
    max-width: 800px;
  }

  .section-six .section-six-atas-tipis {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0px;
    text-align: center;
    color: black;
    opacity: 0.64;
    margin-top: 16px;
    max-width: 800px;
  }

  .section-six .section-six-tengah {
    margin-top: 40px;
  }

  .section-six-bawah,
  .section-seven-bawah {
    width: max-content;
    margin: 40px auto 0 auto;
    border-radius: 30px;
  }

  .section-six-bawah-tombol,
  .section-seven-bawah-tombol {
    padding: 14px 28px;
  }

  .section-six-bawah-tombol-teks,
  .section-seven-bawah-tombol-teks {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: center;
    color: #0376fd;
  }
}

table {
  margin: 0 0 1.5em;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  font-weight: bold;
}

th,
td {
  text-align: left;
  border: 1px solid #eaeaea;
  padding: 6px 10px;
}

.section-footer {
  background: #023b7f;
  padding: 40px 0 64px 0;
}

.section-footer .section-footer-dalam {
  display: flex;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
}

.section-footer .section-footer-kiri-atas img {
  height: 24px;
  width: auto;
}

.section-footer .section-footer-kiri-atas-teks {
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: left;
  color: white;
  opacity: 0.64;
  margin-top: 8px;
}

.section-footer .section-footer-kiri-tengah {
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;
  color: white;
  opacity: 0.64;
  margin-top: 16px;
}

.section-footer .section-footer-kiri-bawah {
  display: flex;
  gap: 24px;
  margin-top: 16px;
}

.section-footer .section-footer-kiri-bawah a {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: center;
  color: white;
  opacity: 0.64;
  text-decoration: underline;
}

.section-footer .section-footer-kanan {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: end;
}

.section-footer .section-footer-kanan-atas-teks {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;
  color: white;
  opacity: 0.92;
  text-align: end;
}

.section-footer .footer-toggle-download {
  margin-top: 16px;
}

.section-footer .section-footer-kanan-bawah {
  display: flex;
  gap: 32px;
}

.section-footer .section-footer-kanan-bawah a {
  color: white;
  height: 20px;
  width: auto;
}

.tabfooter {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}

.tabfooter input[type="radio"] {
  display: none;
}

.tabfooter .tab {
  order: 2;
  display: none;
}

.tabfooter label {
  order: 1;
  width: 50px;
  height: 50px;
  cursor: pointer;
  color: #0376fd;
  background: none;
  text-align: center;
}

.tabfooter label:hover {
  color: darkgrey;
}

.tabfooter input[type="radio"]:checked + label + .tab {
  display: block;
}

.tabfooter input[type="radio"]:checked + label.tabfooter-satu {
  color: #fff;
  cursor: default;
  opacity: 1 !important;
}

.tabfooter input[type="radio"]:checked + label.tabfooter-dua {
  color: #fff;
  cursor: default;
  opacity: 1 !important;
}

.tabfooter .bungkus-tombol {
  display: flex;
  flex-direction: row;
  justify-content: end;
  margin-right: 110px;
}

.tabfooter input[type="radio"]:checked + label img {
  opacity: 1;
}

.tabfooter-satu img,
.tabfooter-dua img {
  opacity: 0.25;
}

.tabfooter-satu img:hover,
.tabfooter-dua img:hover {
  opacity: 0.35;
}

.tabfooter input[type="radio"]:checked + label + .tab img:hover {
  transform: scale(1.5);
}

.tabfooter input[type="radio"]:checked + label + .tab img {
  transition: all 300ms;
  transform-origin: 1% 1%;
  height: 102px;
  width: auto;
  margin-left: 11px;
  border-radius: 18px;
}

.tabfooter-satu img {
  padding-top: 15px;
}

.tabfooter-dua img {
  padding-top: 10px;
}

.tabfooter-satu + .tab img {
  position: absolute;
  margin-top: 0px;
}

.tabfooter-dua + .tab img {
  position: absolute;
  margin-top: -51px;
}

.tabfooter-satu {
  border-radius: 24px 24px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: none;
}

.tabfooter-dua {
  border-radius: 0 0 24px 24px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-top: none;
}

@media only screen and (max-width: 750px) {
  .section-footer {
    padding: 40px 16px;
  }
  .section-footer .section-footer-dalam {
    display: block;
  }
  .section-footer .section-footer-kiri {
    margin-top: 16px;
  }
  .section-footer .section-footer-kiri-atas-teks {
    font-size: 12px;
    font-weight: 300;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: center;
    color: white;
    opacity: 0.64;
  }
  .section-footer .section-footer-kanan-atas {
    display: none;
  }
  .section-footer .section-footer-kiri-atas,
  .section-footer .section-footer-kiri-atas-teks,
  .section-footer .section-footer-kiri-tengah {
    text-align: center !important;
  }
  .section-footer .section-footer-kiri-bawah {
    justify-content: space-evenly;
    gap: unset;
  }
  .section-footer .section-footer-kanan-bawah {
    justify-content: space-evenly;
    margin-top: 36px;
  }
  .section-footer .section-footer-download .section-footer-download-gambar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: unset;
    margin-top: 8px;
    gap: 12px;
  }
  .section-footer .section-footer-download .section-footer-download-gambar img {
    height: 40px;
    width: auto;
  }
  .section-footer .section-footer-download .section-footer-download-teks {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0px;
    color: white;
    opacity: 0.9;
    text-align: center;
  }
  .section-footer .section-footer-kiri-tengah {
    margin-top: 24px;
    font-size: 12px;
    font-weight: 300;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: center;
    color: white;
    opacity: 0.64;
  }
  .section-footer .section-footer-kiri-bawah a {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0px;
    text-align: center;
    color: white;
    opacity: 0.64;
  }
}

/* new */
/* new changes */

.layer-tab {
  display: none;
}

.wide-screen-mobile-banner {
  display: none;
}
.skorpintar-page .frame-3 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-left: 72px;
  margin-top: 12px;
}

.skorpintar-page .p {
  font-family: Inter;
  font-weight: 600;
  font-size: 64px;
  line-height: 72px;
  letter-spacing: -1.5px;
  color: #111111;
  margin-bottom: 0px;
}

.skorpintar-page .frame-6 {
  width: 382px;
  height: 66px;
  filter: contrast(1.1) saturate(1.2);
}

.skorpintar-page .text-wrapper-2 {
  font-family: Inter;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0px;
  color: #555555;
}

.skorpintar-page .button-2 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background-color: #0376fd;
  border: none;
  border-radius: 36px;
  cursor: pointer;
  width: 170px;
  height: 56px;
}

.skorpintar-page .label-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.skorpintar-page .label-4 {
  font-family: Inter;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: center;
  color: #ffffff;
  width: fit-content;
  white-space: nowrap;
}

.sec-banner {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.skorpintar-page .frame-wrapper {
  padding: 80px 36px 32px 36px;
  margin: 0px 72px 72px 72px;
  background-image: url(../assets/ImagesSkorlifeLandingpage/secbannerbackimage.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 24px;
  position: relative;
  z-index: 1;
}

.sec-banner-heading h1 {
  font-family: Inter;
  font-weight: 600;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.5px;
  color: #ffffff;
}

.sec-banner-heading p {
  font-family: Inter;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0px;
  color: #ffffff;
}

.sec-banner-section1 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.sec-banner-section2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.sec-banner-sec-img {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 392px;
  max-height: 72px;
  padding-top: 6px;
  padding-right: 24px;
  padding-bottom: 6px;
  padding-left: 24px;
  border-radius: 12px;
  background-color: #ffffff3d;
}

.sec-banner-sec-img p {
  font-family: Inter;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0px;
  color: #ffffff;
}
.skorpintar-page .frame-8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #e0eeff;
  border-radius: 24px;
  margin: 0px 72px;
}

.skorpintar-page .frame-81 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 72px 72px;
  background-color: #e0eeff;
  border-radius: 24px;
}

.skorpintar-page .group-51 {
  background-image: url("../assets/ImagesSkorlifeLandingpage/mobile_Layer_1.png");
  background-repeat: no-repeat;
  background-size: 568px 704px;
  background-position-y: 68px;
}

.ellipse51 {
  width: 640px;
  height: 600px;
}
.skorpinter-container {
  display: flex;
  margin: 0px 72px;
  height: 93px;
  gap: 16px;
  background-color: #c0ddff;
  border-radius: 8px;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
  padding: 8px 24px 0px 24px;
}

.nav-pinter {
  display: flex;
  /* justify-content: space-between; */
  margin: 0px 40px;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 10px;
  background: #f8f8f8;
  box-shadow: 0 0 0 9999px #f8f8f8;
}

.nav-pinter .right {
  display: flex;
  color: rgba(0, 0, 0, 0.64);
  font-weight: 400;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  width: 100%;
}

.nav-pinter .right a {
  color: #21292b;
}

.nav-pinter .right .menu {
  margin: 14px 16px 8px 16px;
  cursor: pointer;
  height: 30px;
}

.nav-pinter .right .menu a:hover {
  color: #21292b;
}

.nav-pinter .right .dropdown.only-desktop {
  display: flex;
  margin-left: auto;
}
/* old changes */

.skorpinter-button {
  border-radius: 50%;
  background-color: #0376fd;
  width: 40px;
  height: 40px;
  border: 1px solid #0376fd;
  cursor: pointer;
}
.skorpinter-button-con {
  margin-right: 20px;
  margin-left: 20px;
}

.skorpinter-heading-title {
  font-size: 24px;
  font-weight: 600;
  color: #111111;
}

/* new change */
.dropdown-content.skorpintar {
  display: none;
  position: absolute;
  top: 55px;
  right: -5px;
  background-color: #f1f1f1;
  min-width: 140px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1001;
}
.banner-header-image-mobile {
  display: none;
}
.banner-header-image-desktop {
  margin-bottom: -12px;
}
.skorpinter-heading {
  margin-top: 6px;
  flex: 1;
}
.skorpinter-heading-title img {
  margin-bottom: -3px;
}
@media only screen and (max-width: 750px) {
  .skorpinter-heading {
    display: flex;
    align-items: center;
    width: 156px;
    min-height: 68px;
  }
  .skorpinter-heading-title img {
    width: 102px;
    height: 16px;
  }
  .banner-header-image-desktop {
    display: none;
  }
  .banner-header-image-mobile {
    max-width: 182px;
    max-height: 182px;
    margin-bottom: -8px;
    display: block;
  }
  .skorpinter-container {
    gap: 10px;
    height: 84px;
    margin: 0px 65px 20px 31px;
    padding: 8px 12px 0px 12px;
  }
  .skorpinter-heading p {
    display: none;
  }
  .skorpinter-heading-title {
    font-size: 16px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 8px;
  }
  .banner-header-image-desktop {
    width: 160px;
  }
}
.see-title {
  margin-top: 4px;
}
@media only screen and (max-width: 532px) {
  .skorpinter-container {
    margin: 0px 70px 20px 31px;
  }
}

@media only screen and (max-width: 345px) {
  .skorpinter-container {
    gap: 5px !important;
  }
}
@media only screen and (max-width: 1115px) {
  .see-title {
    display: none;
  }
}
@media only screen and (max-width: 490px) {
  .skorpinter-container {
    gap: 10px;
    margin: 0px 9px 20px 15px;
  }
  .skorpinter-heading p {
    display: none;
  }
  .banner-header-image-desktop {
    width: 100px;
  }
  .skorpinter-button {
    width: 30px;
    height: 30px;
  }
  .skorpinter-button img {
    width: 13px;
  }
}

.slider {
  display: flex;
  width: 100%;
}

.slide {
  scroll-snap-align: start;
  width: 100%;
  flex-shrink: 0;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}
.slide img {
  max-width: 100%;
  height: auto;
}
.skorpinter-learn-more {
  padding: 10px 30px;
  border-radius: 36px;
  background-color: #0376fd;
  border: 1px solid #0376fd;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
}
.dibawah-gambar-kumpulan-produk-live {
  text-align: center;
}

.learn-more-button-skorpinter {
  margin-top: 20px;
}
.learn-more-button-skorpinter.mobile a {
  color: #ffffff;
  display: block;
  background-color: #0376fd;
  width: 80%;
  font-size: 14px;
  font-weight: 400;
  border-radius: 36px;
  padding: 10px 0px;
}
.learn-more-button-skorpinter.mobile {
  width: 95%;
  display: flex;
  justify-content: center;
}

.mobile-download-app {
  background-color: #0376fd;
  margin: 14px 20px;
  border-radius: 22px;
  color: #ffffff !important;
}

.mobile-download-app span {
  margin: 0 auto;
}
/* new change for skorpinter page */

:root {
  --neutralshighlight: rgba(248, 248, 248, 1);
  --light-100: rgba(255, 255, 255, 1);
  --slbluebase: rgba(3, 118, 253, 1);
  --neutralsdark: #555555;
  --neutralsdarkest: rgba(17, 17, 17, 1);
  --neutralsdarker: rgba(51, 51, 51, 1);
  --dark-64: rgba(0, 0, 0, 0.64);
  --dark-92: rgba(0, 0, 0, 0.92);
  --dark-80: rgba(0, 0, 0, 0.8);
  --light-64: rgba(255, 255, 255, 0.64);
  --light-92: rgba(255, 255, 255, 0.92);
  --carrotaccent: rgba(253, 237, 226, 1);
  --light-80: rgba(255, 255, 255, 0.8);
  --neutralsaccent: rgba(240, 240, 240, 1);
  --neutralslight: rgba(192, 192, 192, 1);
  --slbluedarkest: rgba(2, 59, 127, 1);
  --slblueaccent: rgba(224, 238, 255, 1);
  --button-l-font-family: "Inter", Helvetica;
  --button-l-font-weight: 500;
  --button-l-font-size: 16px;
  --button-l-letter-spacing: 0px;
  --button-l-line-height: 20px;
  --button-l-font-style: normal;
  --button-m-font-family: "Inter", Helvetica;
  --button-m-font-weight: 500;
  --button-m-font-size: 14px;
  --button-m-letter-spacing: 0px;
  --button-m-line-height: 16px;
  --button-m-font-style: normal;
  --desktop-display-font-family: "Inter", Helvetica;
  --desktop-display-font-weight: 600;
  --desktop-display-font-size: 64px;
  --desktop-display-letter-spacing: -1.5px;
  --desktop-display-line-height: 72px;
  --desktop-display-font-style: normal;
  --desktop-header-3-font-family: "Inter", Helvetica;
  --desktop-header-3-font-weight: 600;
  --desktop-header-3-font-size: 24px;
  --desktop-header-3-letter-spacing: 0px;
  --desktop-header-3-line-height: 32px;
  --desktop-header-3-font-style: normal;
  --desktop-subheader-1-font-family: "Inter", Helvetica;
  --desktop-subheader-1-font-weight: 500;
  --desktop-subheader-1-font-size: 20px;
  --desktop-subheader-1-letter-spacing: 0px;
  --desktop-subheader-1-line-height: 28px;
  --desktop-subheader-1-font-style: normal;
  --desktop-header-1-font-family: "Inter", Helvetica;
  --desktop-header-1-font-weight: 600;
  --desktop-header-1-font-size: 40px;
  --desktop-header-1-letter-spacing: -0.5px;
  --desktop-header-1-line-height: 48px;
  --desktop-header-1-font-style: normal;
  --mobile-caption-font-family: "Inter", Helvetica;
  --mobile-caption-font-weight: 400;
  --mobile-caption-font-size: 11px;
  --mobile-caption-letter-spacing: 0px;
  --mobile-caption-line-height: 16px;
  --mobile-caption-font-style: normal;
  --mobile-label-font-family: "Inter", Helvetica;
  --mobile-label-font-weight: 500;
  --mobile-label-font-size: 11px;
  --mobile-label-letter-spacing: 0px;
  --mobile-label-line-height: 16px;
  --mobile-label-font-style: normal;
  --mobile-subheader-1-font-family: "Inter", Helvetica;
  --mobile-subheader-1-font-weight: 500;
  --mobile-subheader-1-font-size: 14px;
  --mobile-subheader-1-letter-spacing: 0px;
  --mobile-subheader-1-line-height: 20px;
  --mobile-subheader-1-font-style: normal;
  --button-s-font-family: "Inter", Helvetica;
  --button-s-font-weight: 500;
  --button-s-font-size: 12px;
  --button-s-letter-spacing: 0px;
  --button-s-line-height: 16px;
  --button-s-font-style: normal;
  --desktop-subheader-2-font-family: "Inter", Helvetica;
  --desktop-subheader-2-font-weight: 500;
  --desktop-subheader-2-font-size: 16px;
  --desktop-subheader-2-letter-spacing: 0px;
  --desktop-subheader-2-line-height: 20px;
  --desktop-subheader-2-font-style: normal;
  --desktop-header-2-font-family: "Inter", Helvetica;
  --desktop-header-2-font-weight: 600;
  --desktop-header-2-font-size: 32px;
  --desktop-header-2-letter-spacing: -0.5px;
  --desktop-header-2-line-height: 40px;
  --desktop-header-2-font-style: normal;
  --desktop-paragraph-2-font-family: "Inter", Helvetica;
  --desktop-paragraph-2-font-weight: 400;
  --desktop-paragraph-2-font-size: 16px;
  --desktop-paragraph-2-letter-spacing: 0px;
  --desktop-paragraph-2-line-height: 24px;
  --desktop-paragraph-2-font-style: normal;
  --desktop-caption-font-family: "Inter", Helvetica;
  --desktop-caption-font-weight: 400;
  --desktop-caption-font-size: 14px;
  --desktop-caption-letter-spacing: 0px;
  --desktop-caption-line-height: 20px;
  --desktop-caption-font-style: normal;
  --below-level-2: 0px 8px 36px 0px rgba(0, 0, 0, 0.17);
  --styles-typography-title: rgba(33, 41, 43, 1);
  --styles-typography-caption: rgba(75, 92, 98, 1);
  --styles-typography-body: rgba(53, 65, 69, 1);
  --styles-fill-background-primary: rgba(245, 247, 247, 1);
}

/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-styles-mode="skorcard-light">
    <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

[data-styles-mode="skorcard-light"] {
  --styles-typography-title: rgba(33, 41, 43, 1);
  --styles-typography-caption: rgba(75, 92, 98, 1);
  --styles-typography-body: rgba(53, 65, 69, 1);
  --styles-fill-background-primary: rgba(245, 247, 247, 1);
}

[data-styles-mode="skorlife-light"] {
  --styles-typography-title: rgba(21, 40, 61, 1);
  --styles-typography-caption: rgba(52, 100, 152, 1);
  --styles-typography-body: rgba(34, 65, 99, 1);
  --styles-fill-background-primary: rgba(248, 250, 253, 1);
}

.skorpintar-page {
  /* display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    position: relative; */
  background-color: #f8f8f8;
}

.skorpintar-page .group {
  /* position: relative;
    width: 100%;
    z-index: 4; */
}

.skorpintar-page .skor-life {
  display: flex;
  width: 100%;
  height: 80px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 72px;
}

.skorpintar-page .div {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.skorpintar-page .logo-dark {
  position: relative;
  width: 160px;
  height: 32px;
}

.skorpintar-page .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--button-l-font-family);
  font-weight: var(--button-l-font-weight);
  color: var(--styles-typography-title);
  font-size: var(--button-l-font-size);
  letter-spacing: var(--button-l-letter-spacing);
  line-height: var(--button-l-line-height);
  white-space: nowrap;
  font-style: var(--button-l-font-style);
}

.skorpintar-page .help {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
  margin-top: -4px;
  margin-bottom: -4px;
  margin-left: 10px;
}

.skorpintar-page .button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--slbluebase);
  border-radius: 20px;
}

.skorpintar-page .state-layer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  position: relative;
  flex: 0 0 auto;
}

.skorpintar-page .label {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--button-m-font-family);
  font-weight: var(--button-m-font-weight);
  color: var(--light-100);
  font-size: var(--button-m-font-size);
  text-align: center;
  letter-spacing: var(--button-m-letter-spacing);
  line-height: var(--button-m-line-height);
  white-space: nowrap;
  font-style: var(--button-m-font-style);
}

.skorpintar-page .min-width {
  position: relative;
  width: 64px;
  height: 1px;
  margin-bottom: -1px;
  object-fit: cover;
}

.skorpintar-page .frame {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.skorpintar-page .label-2 {
  margin-top: -1px;
  color: var(--slbluebase);
  font-size: var(--button-m-font-size);
  line-height: var(--button-m-line-height);
  position: relative;
  width: fit-content;
  font-family: var(--button-m-font-family);
  font-weight: var(--button-m-font-weight);
  text-align: center;
  letter-spacing: var(--button-m-letter-spacing);
  white-space: nowrap;
  font-style: var(--button-m-font-style);
}

.skorpintar-page .line {
  position: relative;
  width: 1px;
  height: 16px;
  object-fit: cover;
}

.skorpintar-page .label-3 {
  margin-top: -1px;
  color: var(--neutralsdark);
  font-size: var(--button-m-font-size);
  line-height: var(--button-m-line-height);
  position: relative;
  width: fit-content;
  font-family: var(--button-m-font-family);
  font-weight: var(--button-m-font-weight);
  text-align: center;
  letter-spacing: var(--button-m-letter-spacing);
  white-space: nowrap;
  font-style: var(--button-m-font-style);
}

.skorpintar-page .frame-2 {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  max-height: 648px;
}

.skorpintar-page .overlap {
  position: absolute;
  width: 770px;
  height: 708px;
  top: 1px;
  left: 744px;
}

.skorpintar-page .layer {
  margin-top: 18px;
  max-width: 769.65px;
  max-height: 690.55px;
}

.skorpintar-page .KV-illustration {
  position: absolute;
  width: 770px;
  height: 691px;
  top: 17px;
  left: 0;
}

.skorpintar-page .overlap-group {
  position: relative;
  width: 696px;
  height: 692px;
  top: -1px;
}

.skorpintar-page .img {
  position: absolute;
  width: 292px;
  height: 292px;
  top: 140px;
  left: 0;
}

.skorpintar-page .group-2 {
  position: absolute;
  width: 192px;
  height: 152px;
  top: 0;
  left: 213px;
}

.skorpintar-page .SL-card-repayment {
  position: absolute;
  width: 594px;
  height: 606px;
  top: 4px;
  left: 102px;
  object-fit: cover;
}

.skorpintar-page .group-3 {
  position: absolute;
  width: 177px;
  height: 251px;
  top: 222px;
  left: 519px;
}

.skorpintar-page .group-4 {
  position: absolute;
  width: 255px;
  height: 198px;
  top: 494px;
  left: 330px;
}

.skorpintar-page .overlap1 {
  background-image: url("../assets/ImagesSkorlifeLandingpage/image.png");
  background-repeat: no-repeat;
  background-size: 634px 690px;
  background-position: right center;
}

.skorpintar-page .frame-4 {
  display: flex;
  flex-direction: column;
}

.skorpintar-page .frame-5 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skorpintar-page .label-4.downloadapp {
  font-size: 14px !important;
  border-radius: 34px;
}

.skorpintar-page .frame-7 {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.skorpintar-page .group-5 img {
  margin-top: 32px;
  margin-bottom: -4px;
  /* width: 100%; */
  /* height: 460px; */
}

.ellipse52 {
  display: none;
}

.skorpintar-page .frame-82 {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 24px;
}
.mobile-image-3 .text-wrapper-3 {
  max-width: 640px !important;
}
.mobile-image-3 .text-wrapper-4 {
  max-width: 640px !important;
}
.skorpintar-page .text-wrapper-3 {
  position: relative;
  max-width: 515px;
  margin-top: -1px;
  font-family: var(--desktop-header-1-font-family);
  font-weight: var(--desktop-header-1-font-weight);
  color: var(--neutralsdarkest);
  font-size: var(--desktop-header-1-font-size);
  letter-spacing: var(--desktop-header-1-letter-spacing);
  line-height: var(--desktop-header-1-line-height);
  font-style: var(--desktop-header-1-font-style);
  margin-bottom: 0px;
}

.skorpintar-page .text-wrapper-4 {
  position: relative;
  max-width: 515px;
  font-family: var(--desktop-subheader-1-font-family);
  font-weight: var(--desktop-subheader-1-font-weight);
  color: #555555;
  font-size: var(--desktop-subheader-1-font-size);
  letter-spacing: -0.5px;
  line-height: var(--desktop-subheader-1-line-height);
  font-style: var(--desktop-subheader-1-font-style);
  margin-bottom: 40px;
}
.skorpintar-page .frame-11 {
  padding: 0px 16px 0px 109px;
  /* max-width: 531px; */
  /* max-height: 168px; */
  text-align: start;
  flex: 1;
}

.skorpintar-page .frame-11.mobile-image-3 {
  padding: 0px 109px 0px 76px;
  max-width: 640px;
  /* margin: 0px 150px; */
}

.skorpintar-page .frame-11.mobile-img-2 {
  padding: 0px 109px 0px 16px;
  display: flex;
  flex-direction: column;
  align-items: end;
}
.skorpinter-sectionsix {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  gap: 40px;
  box-shadow: none;
  margin-bottom: 40px;
}

.skorpintar-dropbtn {
  color: #000 !important;
  border: 1px solid #000 !important;
  padding: 18px 52px;
  font-size: 12px;
  background-color: transparent;
  border-radius: 23px;
  cursor: pointer;
  margin-left: 20px;
  margin-top: 2px;
}
.skorpintar-dropbtn i {
  color: #000 !important;
}

/* modal */

.modal-trigger {
  /* padding: 12px 24px; */
  /* background: #007bff; */
  /* color: white; */
  /* border: none; */
  /* border-radius: 8px; */
  cursor: pointer;
  /* font-size: 16px; */
  transition: background 0.3s;
}

.modal-trigger:hover {
  /* background: #0056b3; */
}

/* Modal styling */
.modal {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  z-index: 10000;
}

.modal-content {
  background: white;
  padding: 24px;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  position: relative;
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

/* Close button */
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.modal-close::before,
.modal-close::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 24px;
  background: #333;
  top: 0;
  left: 50%;
}

.modal-close::before {
  transform: rotate(45deg);
}

.modal-close::after {
  transform: rotate(-45deg);
}

.modal-close:hover::before,
.modal-close:hover::after {
  background: #666;
}

/* Modal header and content */
.modal-header {
  margin-bottom: 16px;
}

.modal-title {
  font-size: 24px;
  color: #333;
  margin: 0;
}

.modal-body {
  color: #666;
  line-height: 1.5;
}

/* Modal trigger - checkbox hack */
.modal-checkbox {
  display: none;
}

.modal-checkbox:checked + .modal {
  visibility: visible;
  opacity: 1;
}

.modal-checkbox:checked + .modal .modal-content {
  transform: translateY(0);
}

/* tab footer skorpinter */
.tabfooter-skorpinter {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 12px;
  background-color: #ffffff;
  align-items: center;
}

.modal-skorpinter {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-skorpinter input[type="radio"] {
  display: none;
}

.show-qr-code .tab-andriod,
.tab-appstore {
  order: 2;
  display: none;
}

.tabfooter-skorpinter label {
  order: 1;
  width: 50px;
  height: 50px;
  cursor: pointer;
  color: #0376fd;
  background: none;
  text-align: center;
}

.tabfooter-skorpinter label:hover {
  color: #d0d0d0;
}

.modal-descp {
  color: #000000a3;
  font-size: 24px;
  font-weight: 400;
}
#tabfooter-modal-android:checked ~ .show-qr-code .tab-andriod {
  display: block;
  border-radius: 16px;
  padding: 12px;
}

#tabfooter-modal-android:checked ~ .show-qr-code .tab-andriod img {
  width: 232px;
  height: 232px;
}

#tabfooter-modal-android:checked ~ .show-qr-code .tab-andriod:hover {
  transform: scale(1.2);
}

#tabfooter-modal-ios:checked ~ .show-qr-code .tab-appstore {
  display: block;
  border-radius: 16px;
  padding: 12px;
}

#tabfooter-modal-ios:checked ~ .show-qr-code .tab-appstore img {
  width: 232px;
  height: 232px;
}

#tabfooter-modal-ios:checked ~ .show-qr-code .tab-appstore:hover {
  transform: scale(1.2);
}

#tabfooter-modal-android:checked ~ .tabfooter-skorpinter .tabfooter-modal-satu {
  color: #fff;
  background-color: #0376fd;
  cursor: default;
}

#tabfooter-modal-ios:checked ~ .tabfooter-skorpinter .tabfooter-modal-dua {
  color: #fff;
  background-color: #0376fd;
  cursor: default;
}

#tabfooter-modal-android:checked
  ~ .tabfooter-skorpinter
  .tabfooter-modal-satu
  img,
#tabfooter-modal-ios:checked ~ .tabfooter-skorpinter .tabfooter-modal-dua img {
  filter: brightness(2) invert(0);
}

.tabfooter-skorpinter .bungkus-tombol-skorpinter {
  display: flex;
  flex-direction: row;
  justify-content: end;
}

.tabfooter-modal-satu img,
.tabfooter-modal-dua img {
  filter: grayscale(100%) brightness(70%);
}

.show-playstore,
.show-appstore {
  display: none;
  margin-left: 20px;
}
.show-playstore img,
.show-appstore img {
  width: 134px;
  height: 40px;
  gap: 0px;
  opacity: 0px;
}

#tabfooter-modal-android:checked ~ .tabfooter-skorpinter .show-playstore {
  display: block;
}

#tabfooter-modal-ios:checked ~ .tabfooter-skorpinter .show-appstore {
  display: block;
}

/* .tabfooter-modal-satu img:hover,
.tabfooter-modal-dua img:hover {
  opacity: 0.35;
} */

/* .tabfooter-skorpinter:has(input[type="radio"]:checked) .tab img:hover {
  transform: scale(1.5);
}

.tabfooter-skorpinter:has(input[type="radio"]:checked) .tab img {
  transition: all 300ms;
  transform-origin: 1% 1%;
  height: 102px;
  width: auto;
  margin-left: 11px;
  border-radius: 18px;
} */

.tabfooter-modal-satu img {
  padding-top: 15px;
}

.tabfooter-modal-dua img {
  padding-top: 10px;
}

.tabfooter-modal-satu ~ .tab img {
  position: absolute;
  margin-top: 0px;
}

.tabfooter-modal-dua ~ .tab img {
  position: absolute;
  margin-top: -51px;
}

.tabfooter-modal-satu {
  border-radius: 24px 0px 0px 24px;
  border: 1px solid #d0d0d0;
  border-right: none;
}

.tabfooter-modal-dua {
  border-radius: 0px 24px 24px 0px;
  border: 1px solid #d0d0d0;
  border-left: none;
}

.mobile-buttons-apps {
  display: flex;
}

.mobile-buttons-apps a {
  width: 134px;
}

.group-5 {
  position: relative;
  text-align: center;
  flex: 1;
  /* width: 80%; */
}
.group-5a {
  position: absolute;
  top: 115px;
  right: 224px;
  left: 95px;
}
.group-5a img {
  width: 150px;
  transform-origin: 75% 36%;
  transition: transform 0.5s ease-out;
}
.zoom-in {
  transform: scale(1.4);
}
.zoom-in1 {
  transform: scale(1.4);
}
.group-5b {
  position: absolute;
  top: 238px;
  left: 104px;
  right: 100px;
}
.group-5b-img {
  width: 285px;
  transform-origin: 47% 35%;
  transition: transform 0.5s ease-out;
}

.kumpulan-produk-live {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.dibawah-gambar-kumpulan-produk-live {
  max-width: 672px;
}
.text-wrapper-31 {
  font-family: Inter;
  font-weight: 600;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.5px;
  color: #21292b;
}
.text-wrapper-41 {
  font-family: Inter;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0px;
  color: #354145;
}
.skorpinter-sixtengah {
  padding: 0px;
  width: 858px;
  min-height: 336px;
}
@media only screen and (max-width: 1160px) {
  .skorpintar-page .layer {
    max-width: 569.65px;
    max-height: 690.55px;
    margin-top: 15px;
  }
}

@media only screen and (max-width: 1062px) {
  .skorpintar-page .text-wrapper-3 {
    font-size: 28px;
  }
  .skorpintar-page .text-wrapper-4 {
    font-size: 14px;
  }
  .skorpintar-page .frame-11.mobile-image-3 {
    margin-top: -130px;
    flex: 1;
  }
  .skorpintar-page .group-51 {
    flex: 1;
  }
}
@media only screen and (max-width: 385px) {
  .group-5 {
    padding: 0px 10px;
  }
  .group-5a img {
    width: 130px;
  }
}
@media only screen and (max-width: 365px) {
  .group-5a img {
    width: 120px;
  }
}
@media only screen and (max-width: 950px) {
  .frame-5 p {
    font-size: 48px;
  }
  .skorpintar-page .label-wrapper {
    padding: 14px 28px;
  }
  .skorpintar-dropbtn {
    padding: 16px 40px;
  }

  .skorpintar-page .layer {
    height: 500.55px;
  }
  .skorpintar-page .frame-11 {
    padding: 0px 20px 0px 20px;
  }
  .skorpintar-page .frame-2 {
    max-height: 615px;
  }
}

@media only screen and (max-width: 870px) {
  .skorpintar-page .layer {
    max-width: 369.65px;
    max-height: 690.55px;
    margin-top: 15px;
  }

  .skorpintar-page .label-wrapper {
    padding: 14px 28px;
  }
  .skorpintar-page .label-4 {
    font-size: 16px;
  }
}

@media only screen and (max-width: 767px) {
  .sec-banner-section1 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .sec-banner-section2 {
    flex-direction: column;
    align-items: start;
    margin-right: 24px;
    gap: 16px;
  }
  .sec-banner-heading {
    text-align: center;
  }
  .sec-banner-heading h1 {
    font-family: Inter;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0px;
    text-align: center;
    color: #ffffff;
  }
  .sec-banner-heading p {
    font-family: Inter;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: center;
  }
  .sec-banner-sec-img p {
    font-family: Inter;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    padding-right: 20px;
  }

  .sec-banner-sec-img {
    justify-content: start;
    padding-right: 0px;
    width: 100%;
    gap: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 20px;
    border-radius: 12px;
  }
  .sec-banner {
    /* gap: 48px; */
    gap: 10px;
  }
  .skorpintar-page .frame-wrapper {
    padding-top: 24px;
    padding-right: 20px;
    padding-bottom: 24px;
    padding-left: 20px;
    border-radius: 16px;
    margin: 20px 32px;
  }
  .ellipse52 {
    display: block;
    width: 100%;
    max-width: 360px;
    max-height: 422px;
    margin: 0 auto;
    filter: contrast(1.1) saturate(1);
    image-rendering: pixelated;
  }
  .group-5a {
    top: 87px;
    left: 15px !important;
  }
  .group-5a img {
    width: 120px;
  }
  .group-5b {
    top: 182px;
    left: 5px;
  }
  .group-5b-img {
    width: 222px;
  }
  .skorpinter-sectionsix {
    /* margin: 32px 32px 32px 32px; */
    padding: 24px 20px;
    /* border-radius: 16px; */
  }
  .skorpintar-page .frame-8 {
    margin: 32px;
  }
  .ellipse51 {
    display: none;
  }
  .skorpintar-page .frame-81 {
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0px 20px 20px 20px;
    margin: 32px;
  }
  .skorpintar-page .frame-82 {
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0px;
  }
  .skorpintar-page .group-51 {
    background: url(../assets/ImagesSkorlifeLandingpage/Layer_1mobile3.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    height: 450px;
  }
  .text-wrapper-41 {
    width: 312px;
    font-weight: 400;
    color: #555555;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }
  .text-wrapper-31 {
    width: 312px;
    font-size: 24px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
    color: #000000;
    margin-bottom: 0px;
  }
  .ellipse {
    max-width: 233.35px;
    /* padding: 16px 52.08px; */
  }
  .group-5 {
    width: unset;
  }
  .ellipse51 {
    max-width: 180px;
  }
  .skorpintar-page .frame-3 {
    padding: 24px;
    padding-top: 0px;
    margin-left: 0px;
  }
  .skorpintar-page .layer {
    display: none;
    width: 100%;
    max-width: 106%;
    max-height: 374px;
    /* margin-top: 63px; */
    /* margin-bottom: -60px; */
  }
  .ellipse51 {
    max-width: 360px;
    height: 374px;
  }
  .layer-tab {
    display: block;
    width: 100%;
    max-width: 360px;

    max-height: 369px;
  }
  .skorpinter-sixtengah {
    width: 100%;
    height: auto;
    min-height: auto;
  }

  .skorpintar-page .frame-2 {
    height: auto;
    min-height: 100%;
    max-height: 100%;
    flex-direction: column;
    align-items: center;
  }
  .skorpintar-page .overlap1 {
    background-position: center;
    background-size: contain;
    text-align: center;
    max-height: 369px;
    margin-bottom: 10px;
  }
  .skorpintar-page .p {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    line-height: 40px;
    color: #000000;
  }
  .skorpintar-page .text-wrapper-2 {
    font-family: Inter;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: center;
  }
  .skorpintar-page .frame-5 {
    align-items: center;
  }
  .skorpintar-page .frame-6 {
    width: 208px;
    height: 36px;
  }
  .skorpintar-page .frame-4 {
    min-width: 318px;
    align-items: center;
  }
  .skorpintar-page-only-mobile-title {
    font-family: Inter;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0px;
    color: #000000a3;
    display: block !important;
  }
  .skorpintar-page-only-mobile-buttons {
    display: flex !important;
    gap: 12px;
    justify-content: center;
  }
  .skorpintar-page-only-mobile-buttons img {
    width: 133.49px;
    height: 40px;
  }
  .frame-7 {
    display: none !important;
  }
  .frame-71 {
    display: block !important;
    width: 100%;
    margin-top: 40px;
  }
  .skorpintar-page .frame-11 {
    display: none !important;
  }
  .frame-11-mobile-view {
    display: block !important;
    max-width: 328px;
    text-align: center;
    padding: 10px 16px 24px 16px;
  }
  .frame-11-mobile-view .text-wrapper-3 {
    width: 100%;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
    color: #111111;
  }
  .frame-11-mobile-view .text-wrapper-4 {
    width: 100%;
    font-weight: 400;
    color: #555555;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    margin-top: 8px;
    margin-bottom: -12px;
  }
  .skorpintar-page .frame-8 {
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0px 20px 20px 20px;
  }
  .skorpintar-page .button-2 {
    display: none;
  }
  .sec-banner-image img {
    width: 100%;
    /* min-height: 174px; */
    max-width: 458.9666748046875px;
    max-height: 280.3363342285156px;
  }
  .nav-pinter .right {
    display: none;
  }
  .hamberger {
    display: flex;
    color: rgba(0, 0, 0, 0.64);
    font-weight: 500;
    font-size: 16px;
    font-family: "Inter", sans-serif;
    width: 27px;
    height: 27px;
  }
  .nav-pinter {
    display: flex;
    justify-content: space-between;
    margin: 0px 20px;
    margin-top: 16px;
    margin-bottom: 10px;
    align-items: unset;
  }
}

@media screen and (min-width: 768px) and (max-width: 1202px) {
  .skorpintar-page .frame-2 {
    flex-direction: column;
    align-items: center;
  }
  .skorpintar-page .frame-3 {
    align-items: center;
    max-width: 1154px !important;
    min-width: 720px;
    padding: 24px !important;
  }
  .skorpintar-page .frame-4 {
    align-items: center;
    text-align: center;
  }
  .skorpintar-page .frame-5 {
    align-items: center;
  }
  .skorpintar-page .button-2 {
    display: none !important;
  }
  .overlap1 .layer {
    display: none;
  }
  .skorpintar-page .overlap1 {
    background-size: contain !important;
    background-position: center !important;
    padding: 24px;
  }
  .layer-tab {
    display: block !important;
    width: 504px;
    height: 452px;
  }
  .skorpintar-page .frame-2 {
    max-height: unset !important;
  }
  .skorpintar-page .frame-wrapper {
    padding-top: 40px;
    padding-left: 32px !important;
    padding-bottom: 40px !important;
    padding-right: 32px !important;
    margin: 32px;
  }
  .skorpintar-page .frame-3 {
    margin-left: 0px !important;
    margin-top: 0px !important;
  }
  .skorpintar-page .frame-8 {
    margin: 0px 32px !important;
  }
  .skorpintar-page .frame-81 {
    margin: 24px 32px !important;
  }
  .skorpintar-page-only-mobile-title {
    font-family: Inter;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    color: #000000a3;
    display: block !important;
  }
  .skorpintar-page-only-mobile-buttons {
    display: flex !important;
    gap: 12px;
    justify-content: center;
  }
  .skorpintar-page-only-mobile-buttons img {
    width: 133.49px;
    height: 40px;
  }
  .skorpintar-page .p {
    margin-top: 0px;
  }
  .skorpintar-page .frame-11 {
    display: none !important;
  }
  .frame-11-mobile-view {
    display: block !important;
    /* max-width: 328px; */
    text-align: center;
    padding: 0px 16px 24px 16px;
  }
  .skorpintar-page .frame-8 {
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0px 20px 20px 20px;
  }
  .skorpintar-page .frame-81 {
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0px 20px 20px 20px;
    margin: 32px;
  }
  .skorpintar-page .text-wrapper-3 {
    margin-top: 20px;
    max-width: 100%;
    font-family: Inter;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0px;
    text-align: center;
  }
  .skorpintar-page .text-wrapper-4 {
    font-family: Inter;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: center;
    color: #555555;
    max-width: 100%;
    margin-bottom: 0px;
    margin-top: 5px;
  }
  .group-5a {
    left: 17px;
  }
  .group-5b {
    left: 10px;
  }
  .skorpintar-page .frame-82 {
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
  }
  .skorpintar-page .group-51 {
    background-size: contain;
    background-position: center;
  }
  .text-wrapper-31 {
    max-width: 1154px;
    min-width: 720px;
    color: #000000;
    margin-bottom: 0px;
    margin-top: 0px;
  }
  .text-wrapper-41 {
    max-width: 1154px;
    min-width: 720px;
    font-family: Inter;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: center;
    color: #555555;
  }
  .skorpinter-sixtengah {
    width: 100%;
  }
  .sec-banner-section1 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .sec-banner-section2 {
    flex-direction: column;
    align-items: start;
    margin-right: 24px;
  }
  .sec-banner-heading {
    text-align: center;
  }
  .sec-banner-sec-img {
    justify-content: start;
    padding-right: 0px;
    width: 100%;
  }
  .nav-pinter .right {
    display: none;
  }
  .hamberger {
    display: flex;
    color: rgba(0, 0, 0, 0.64);
    font-weight: 500;
    font-size: 16px;
    font-family: "Inter", sans-serif;
    width: 27px;
    height: 27px;
  }
  .nav-pinter {
    display: flex;
    justify-content: space-between;
    margin: 0px 20px;
    margin-top: 16px;
    margin-bottom: 10px;
    align-items: unset;
  }
  .nav-pinter .only-mobile {
    display: block;
  }
  .nav-pinter .only-desktop {
    display: none;
  }
}

@media only screen and (min-width: 1440px) {
  .skorpintar-container {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .wide-screens {
    width: 1440px;
  }
  .skorpinter-sectionsix {
    box-shadow: none;
    padding: 64px 219px;
    border-radius: 0px;
  }
  .wide-screen-mobile-banner {
    width: 769.6473388671875px;
    height: 690.5519409179688px;
    margin-top: 16px;
    /* margin-right: -70px; */
  }
  .overlap1 {
    display: none;
  }
  .wide-screen-mobile-banner {
    display: block !important;
  }
}

@media only screen and (max-width: 360px) {
  .skorpintar-page .frame-3 {
    padding: 0px;
  }
  .frame-11-mobile-view {
    padding: 0px;
  }
  .layer-tab {
    margin-top: 10px;
  }
}

@media only screen and (max-width: 323px) {
  .skorpinter-heading-title {
    font-size: 12px;
  }
  .banner-header-image-mobile {
    max-width: 70px;
    max-height: 70px;
    margin-bottom: -23px;
  }
  .skorpinter-heading-title img {
    width: 87px;
  }
}


/* navbar new  desktop*/
.products-dropdown {
  position: relative;
}

.products-content {
  display: none;
  position: absolute;
  top: 2.5rem;
  right: 0;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  min-width: 300px;
  z-index: 100;
  overflow: hidden;
}

.products-content.show {
  display: block;
  /* 👈 This line fixes your issue */
}

.products-content a {
  text-decoration: none;
  color: black;
}

.product-box {
  padding: 1rem;
  border-radius: 8px;
  margin: 4px;
}

.product-box.blue {
  background: #eaf2ff;
}

.product-box.white {
  background: white;
}

.product-box:hover {
  background-color: #dbe9ff;
}

.product-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.badge {
  background-color: #007aff;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
}

.products-content p {
  font-family: Inter;
  font-weight: 400;
  font-style: Regular;
  font-size: 12px;
  leading-trim: NONE;
  line-height: 16px;
  letter-spacing: 0px;
  color: var(--Typography-Body, #3A404A);
}

.logo {
  font-size: 1.2rem;
}

.dropbtn-product {
  color: white;
  display: flex;
  align-items: center;
  gap: 5px;
}

.dropbtn-product i {
  align-self: end;
}

/* mobile products */

.mobile-products {
  padding: 14px 20px;
}

.mobile-products .link {
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mobile-products .link  i{
  align-self: end;
}
.mobile-products-content {
  display: none;
  margin-top: 0.5rem;
}

.mobile-products-content.show {
  display: block;
}

.mobile-products-content a {
  text-decoration: none;
  color: inherit;
  padding: 0px;
}

.mobile-products-content .product-box {
  margin-bottom: 1rem;
}

.mobile-products-content .product-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
}

.mobile-products-content .badge {
  background-color: #007aff;
  color: white;
  padding: 0.1rem 0.5rem;
  border-radius: 6px;
  font-size: 0.7rem;
}
.products-mobile{
  align-items: start !important;
  text-align: start !important;
}

.product-box-mobile {
  padding: 1rem 0px;
  border-radius: 8px;
  margin: 4px;
}

.mobile-products{
  display: none;
}

.products-dropdown{
  display: none;
}