/********** Template CSS **********/

@import url("https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  /* Color Palette */
  --primary-color: #111111 !important;
  /* Background gelap utama */
  --secondary-color: #51575f !important;
  /* Slate gray aksen */
  --bg-color: #111111 !important;
  --surface-color: #222222 !important;

  /* Typography Colors */
  --text-main: #f0f0f0 !important;
  /* Terang utama */
  --text-muted: #b1b4b6 !important;

  /* Alternating states */
  --light-bg: #ebebeb !important;
  --light-text: #222222 !important;
  --navbar-border: #b1b1b1 !important;

  /* Gelap section text */
  --dark-section-heading: #f0f0f0 !important;
  --dark-section-body: #ebebeb !important;

  /* Fonts */
  --font-title: "Host Grotesk", sans-serif;
  --font-isi: "Inter Tight", sans-serif;

  /* Legacy variables mapped to new theme */
  --lightGray: #222222 !important;
  --green: #51575f !important;
  --gray: #b1b4b6 !important;
  --darkBlue: #51575f !important;
  --darkGreen: #111111 !important;
  --darkGray: #ebebeb !important;
  --light: #ebebeb !important;
  --dark: #111111 !important;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  cursor:
    url("data:image/svg+xml;utf8,%3Csvg width='25' height='25' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(-45 8 8)'%3E%3Cpath d='M8.15957 0.775004C7.9627 0.775004 7.7627 0.788442 7.55957 0.811879C6.47832 0.937192 5.53457 1.36157 4.86895 1.97C4.2002 2.57875 3.8002 3.39375 3.9002 4.25625C3.9877 5.025 4.45645 5.66875 5.12207 6.1125C5.20332 5.91875 5.30645 5.74063 5.40957 5.59688C4.85957 5.23438 4.52207 4.74375 4.45957 4.19063C4.3877 3.575 4.66895 2.95375 5.23457 2.43625C5.80332 1.91844 6.6502 1.52813 7.62832 1.415C8.60645 1.30157 9.52207 1.48782 10.1939 1.86188C10.8627 2.23625 11.2783 2.77782 11.3502 3.39063C11.4189 3.99375 11.1564 4.60313 10.6189 5.10938C10.2866 4.90173 9.90448 4.78731 9.5127 4.77813H9.44395C9.28457 4.78125 9.12832 4.8 8.96582 4.83438C7.79395 5.10625 7.06582 6.25625 7.33457 7.41875C7.5002 8.1375 8.00957 8.6875 8.65332 8.93438L9.89395 14.3156L11.3627 15.225L12.2846 13.7656L11.5502 13.3125L12.0127 12.5813L11.2783 12.125L11.7377 11.3969L11.0033 10.9406L11.4658 10.2094L11.0439 8.38438C11.5158 7.88125 11.7314 7.1625 11.5658 6.44063C11.4814 6.075 11.3096 5.75313 11.0721 5.49063C11.6627 4.89688 12.0033 4.13125 11.9096 3.32813C11.8096 2.46719 11.2346 1.76438 10.4439 1.32469C9.80332 0.966879 9.0127 0.769379 8.15957 0.775004ZM7.52832 5.00938C6.71895 5.04375 5.96895 5.53438 5.64082 6.32813C5.35645 7.0125 5.45332 7.75625 5.83457 8.33438L3.71582 13.4281L4.38145 15.0219L5.98145 14.3688L5.64707 13.5719L6.44707 13.2469L6.11582 12.45L6.91582 12.125L6.58145 11.3281L7.38145 11L8.09395 9.2875C7.45332 8.92813 6.9627 8.3125 6.78457 7.54375C6.56895 6.59688 6.88145 5.65 7.52832 5.00938ZM9.34082 5.23438C9.61895 5.23125 9.88145 5.34375 10.0721 5.52813C9.9002 5.6375 9.70957 5.73438 9.50957 5.82188C9.45957 5.80313 9.40645 5.79688 9.3502 5.79688C9.33145 5.79688 9.31582 5.79688 9.3002 5.8C9.08145 5.825 8.91895 5.99063 8.89082 6.19688C8.88457 6.22813 8.88457 6.25938 8.88457 6.2875C8.8877 6.29688 8.8877 6.30938 8.8877 6.31875C8.91895 6.58125 9.14707 6.7625 9.40957 6.73125C9.62207 6.70625 9.78457 6.54688 9.81582 6.34688C10.0096 6.25938 10.1908 6.1625 10.3627 6.05313C10.3689 6.08438 10.3752 6.11563 10.3783 6.14688C10.4439 6.70938 10.0346 7.225 9.47207 7.29063C8.9127 7.35625 8.39395 6.94688 8.33145 6.38438C8.26582 5.82188 8.6752 5.30625 9.2377 5.24063C9.27207 5.2375 9.30645 5.23438 9.34082 5.23438Z' fill='white'/%3E%3C/g%3E%3C/svg%3E"),
    pointer !important;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-isi) !important;
  color: var(--darkGray);
  font-weight: 600;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

.ms-auto-lg {
  margin-left: auto !important;
}

/********** ScrollBar **********/
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ==> Datagrid Style <== */
.datagrid thead tr th {
  font-weight: 500 !important;
}

#paging li {
  padding: 2px;
}

#paging li.active a {
  background-color: #97a6f4;
  padding: 8px 16px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
}

#paging li.disabled a {
  background-color: #eee;
  padding: 8px 16px;
  border-radius: 10px;
  color: #000;
  text-decoration: none;
}

#paging li a {
  background-color: #eee;
  padding: 8px 16px;
  border-radius: 10px;
  color: #000;
  text-decoration: none;
}

#paging li a:hover {
  background-color: #d3d3d3;
}

/* Custom Button Base Boostrap */
.btn-custom {
  border-radius: 20px !important;
  padding: 6px 20px !important;
}

.btn-blue-violet {
  color: #fff !important;
  background-color: #8b23e6 !important;
  border-color: #8b23e6 !important;
}

.btn-brilliant-rose {
  color: #fff !important;
  background-color: #ff52b6 !important;
  border-color: #ff52b6 !important;
}

.btn-info-outline {
  background-color: white !important;
  outline: 1.5px solid #97a6f4 !important;
  color: #97a6f4;
  border: none;
  font-weight: 600;
  letter-spacing: 1px;
}

.btn-magic-potion {
  color: #fff !important;
  background-color: #f44e5a !important;
  border-color: #f44e5a !important;
}

.btn-purple {
  color: #fff !important;
  background-color: #a42ee5 !important;
  border-color: #a42ee5 !important;
}

.btn-ruber {
  color: #fff !important;
  background-color: #d1436d !important;
  border-color: #d1436d !important;
}

.btn-steel-pink {
  color: #fff !important;
  background-color: #cc30d9 !important;
  border-color: #cc30d9 !important;
}

.btn-teal {
  color: #fff !important;
  background-color: #008080 !important;
  border-color: #008080 !important;
}

/* ==> Title Section Style <== */
.title-section {
  max-width: 58% !important;
  text-align: center;
}

/* Section Navbar */
.sticky-top {
  background: var(--light);
}

nav .navbar-nav {
  font-family: var(--font-isi), serif;
  font-weight: 600;
  margin-left: 0px !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

nav {
  border-bottom: 1px solid #b1b1b1 !important;
}

nav .navbar-nav .nav-link:last-child {
  display: flex !important;
  margin-left: 5% !important;

  color: #222222 !important;
}

nav .navbar-nav a:not(:last-child) {
  padding-right: 2rem !important;

  color: #222222 !important;
}

nav .custom-toggler {
  border-color: var(--darkBlue) !important;
}

nav .navbar-toggler i {
  color: var(--darkBlue) !important;
}

nav .navbar-nav .active {
  color: var(--dark) !important;
}

/* Section Navbar On Pages */
nav {
  background: none;
  border: none;
  z-index: 1000;
  transition: 0.5s ease;
}

.nav-active {
  background: var(--light);
  border-bottom: 1px solid var(--darkGray);
}

.masuk-btn-user {
  border-radius: 14px !important;
  font-weight: 600;
  box-shadow: inset 0 0 0 2px #212529;
  height: 35.5px;
}

.btnYellowPrimary,
.btnYellowPrimary:hover {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 23px;
  height: 40px;
  border-radius: 12px;
  background: #2195fb;
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  border: none;
  outline: none;
}

.btnYellowPrimary.md {
  height: 52px;
}

.btn-login-navbar-user-pc {
  display: flex !important;
}

.btn-login-navbar-user-mobile {
  display: none !important;
}

/* HERO SECTION */
.hero {
  background-color: var(--light-bg) !important;
}

section.hero .row.content {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 40px !important;
  padding: 80px 120px !important;
}

section.hero .isi-content {
  width: 100% !important;
  max-width: 1000px !important;
  order: 2 !important;
  text-align: center !important;
}

section.hero .isi-content.custom-my {
  order: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-bottom: 20px !important;
}

section.hero h1,
section.hero .isi-content h1 {
  color: var(--light-text) !important;
  font-family: var(--font-title);
  font-size: 70px;
  font-weight: 700 !important;
  letter-spacing: -0em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

section.hero p,
section.hero .isi-content p {
  color: #454a50 !important;
  font-family: var(--font-isi);
  font-size: 20px;
  font-weight: 400 !important;
  text-align: center !important;
  max-width: 750px !important;
  margin: 0 auto 30px auto !important;
}

section.hero .carousel-img {
  width: 100% !important;
  height: 500px !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Carousel Buttons (Inverted/Dark Theme Style) */
.carousel-btn {
  width: fit-content;
  height: fit-content;
  position: relative;
  display: flex;
  padding: 10px 20px;
  font-family: var(--font-title) !important;
  font-size: 16px !important;
  font-weight: 600;
  background-color: var(--primary-color) !important;
  color: var(--light) !important;
  border-radius: 0px !important;
  justify-content: center;
  text-transform: uppercase;

  box-shadow: 0 0 0 0 var(--light);
  animation: hoverBLepas 0.3s;
}

.carousel-btn:hover {
  background-color: var(--primary-color);
  box-shadow:
    0 15px 0 -2px var(--light),
    0 16px 0 0px var(--primary-color);
  animation: hoverBTekan 0.3s ease-in-out forwards;
}

/* Owl Carousel Dots/Arrows for Hero */
.slider_carousel .owl-nav button.owl-prev,
.slider_carousel .owl-nav button.owl-next {
  background: var(--primary-color) !important;
  color: #ffffff;
  border-radius: 0 !important;
  border: none !important;

  box-shadow: 0 0px 0 0px var(--light);
  animation: hoverNLepas 0.3s;
}

.slider_carousel .owl-nav button.owl-prev:hover,
.slider_carousel .owl-nav button.owl-next:hover {
  border: none !important;

  background-color: var(--primary-color);
  box-shadow:
    0 11px 0 -2px var(--light),
    0 12px 0 0px var(--primary-color);
  animation: hoverNTekan 0.3s ease-in-out forwards;
}

@keyframes hoverNTekan {
  0% {
    transform: translateY(0);
    box-shadow: 0 0px 0 0px var(--light);
  }

  50% {
    transform: translateY(-6px);
    box-shadow:
      0 5.5px 0 -2px var(--light),
      0 6px 0 0px var(--primary-color);
  }

  100% {
    transform: translateY(-12px);
    box-shadow:
      0 11px 0 -2px var(--light),
      0 12px 0 0px var(--primary-color);
  }
}

@keyframes hoverNLepas {
  0% {
    transform: translateY(-12px);
    box-shadow:
      0 11px 0 -2px var(--light),
      0 12px 0 0px var(--primary-color);
  }

  50% {
    transform: translateY(-6px);
    box-shadow:
      0 5.5px 0 -2px var(--light),
      0 6px 0 0px var(--primary-color);
  }

  100% {
    transform: translateY(0);
    box-shadow: 0 0px 0 0px var(--light);
  }
}

.hero .owl-nav {
  display: flex;
  justify-content: space-between;
}

.hero .owl-nav .owl-next,
.owl-nav .owl-prev {
  position: absolute;
  top: 67%;
  background: none;
  width: 50px;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.hero .owl-nav .owl-prev {
  left: 10%;
}

.hero .owl-nav .owl-next {
  right: 10%;
}

/* FEATURES SECTION */
.features {
  background-color: var(--primary-color) !important;
  padding: 60px 0 !important;
}

/* Row wrapper with top and bottom borders spanning across the container */
section.features .row.content {
  border-top: 1px solid #f0f0f04d !important;
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

/* Individual Cards */
section.features .card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: auto !important;
}

section.features .card-body {
  padding: 1.5rem !important;
}

section.features .card-title {
  color: #ebebeb !important;
  font-family: var(--font-title) !important;
  font-size: 24px;
  font-weight: 600 !important;
  margin-bottom: 15px !important;
}

section.features .card-text {
  color: #ebebeb !important;
  font-family: var(--font-isi) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

/* ABOUT SECTION */
.about {
  background-color: var(--bg-color);
  min-height: 100vh;
  padding: 50px !important;
}

.about .about-img {
  height: 100%;
  aspect-ratio: 1/1;
  background-size: cover;
  border-radius: 2rem;
}

/* Enable grid layout on the row to rearrange nested elements */
section.about .row.content-home,
.about .row.content {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto auto !important;
  gap: 10px 3% !important;
  align-items: start !important;
}

section.about .row.content-home > div:first-child,
section.about .row.content > div:first-child {
  grid-column: 1 !important;
  grid-row: 2 / span 2 !important;
  /* gambar memenuhi row 2 dan 3 */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  align-self: start !important;
}

/* Text Container bypass */
section.about .isi-content.custom-my {
  display: contents !important;
  justify-content: center !important;
}

/* H1 spans columns 1 and 2 on Row 1 */
section.about .isi-content h1 {
  grid-column: 1 / span 2 !important;
  grid-row: 1 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  color: #ebebeb !important;
  font-family: var(--font-title) !important;
  font-size: 70px;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  padding: 10px !important;
}

section.about .isi-content.custom-my p {
  grid-column: 2 !important;
  grid-row: 2 !important;

  color: #ebebeb !important;
  font-family: var(--font-isi) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  padding: 0 10px !important;
  align-self: start !important;
  transform: translateY(-10px);
}

.about .about-btn {
  width: fit-content;
  height: fit-content;
  position: relative;
  display: flex;
  padding: 10px 20px;
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 600;
  background-color: var(--light);
  color: var(--primary-color);
  border-radius: 0px !important;
  justify-content: center;
  text-transform: uppercase;
  align-self: self-end;

  box-shadow: 0 0 0 0 var(--primary-color);
  animation: hoverPLepas 0.3s;
}

.about .about-btn:hover {
  background-color: var(--light);
  box-shadow:
    0 15px 0 -2px var(--primary-color),
    0 16px 0 0px var(--light);
  animation: hoverPTekan 0.3s ease-in-out forwards;
}

section.about .about-img {
  border-radius: 0 !important;
}

/* COUNTER SECTION */
.counter {
  background: var(--primary-color);
}

.counter .card {
  border-radius: 0;
  background: none;
  border: none;
}

.counter .card-title {
  color: var(--light);
  font-weight: 800;
  font-family: var(--font-title);
}

.counter .card-text {
  color: var(--light);
  font-weight: 600;
}

.counter .container .row {
  padding: 1rem !important;
  border-top: 1px solid var(--secondary-color) !important;
  border-bottom: 1px solid var(--secondary-color) !important;
  width: 80% !important;
}

.counter .container {
  padding: 2rem 0rem !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* SERVICE SECTION */
.service {
  min-height: 100vh;
  padding: 120px !important;
  background: #111111 !important;
}

.service .container .content {
  row-gap: 2rem;
}

.service .container .content .isi-content {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.service .title-section {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  max-width: 100% !important;
  width: 100% !important;
  text-align: left !important;
  gap: 20px !important;
}

.service .title-section h1 {
  font-family: var(--font-title) !important;
  color: #f0f0f0 !important;
  text-align: left !important;
  font-weight: 600 !important;
  font-size: 50px !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  max-width: 750px;
}

.service .title-section .desk-section {
  font-family: var(--font-isi) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: #ebebeb !important;
  text-align: right !important;
  max-width: 380px !important;
  margin: 0 !important;
  line-height: 1.6 !important;
  flex-shrink: 1 !important;
}

.service .card {
  height: 100%;
  border-radius: 10px !important;
  background: none;
  box-shadow: none;
}

.service .isi-content .card-body {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}

.service .card-title {
  order: 2;
  color: #f0f0f0 !important;
  font-size: 20px;
  font-family: var(--font-title);
  font-weight: 600;
  margin-block-start: 1rem;

  /* Custom Ellipsis */
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.service .isi-content .card-title,
.service .isi-content .card-text {
  padding-inline: 0;
}

.service .card-text {
  order: 3;
  font-size: 16px !important;
  color: #ebebeb !important;

  /* Custom Ellipsis */
  text-align: left;
  font-family: var(--font-isi);
  max-height: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* number of lines to show */
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.service .card-body img {
  order: 1;
  aspect-ratio: 4/4;
  object-fit: cover;
}

.service .card-footer {
  background: var(--dark-section-body);
  border: none;
  padding: 10px 20px;
  border-radius: 0 !important;

  box-shadow: 0 0 0 0 var(--primary-color);
  animation: hoverPLepas 0.3s;
}

.service .card-footer a {
  background-color: transparent;
  display: block;
  width: 100% !important;
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;
  font-family: var(--font-title) !important;
  font-weight: 600;
  color: var(--lightGray);
  transition: all 0.5s;
  border-radius: 0 !important;
  text-decoration: none;
}

.service .card-footer:hover {
  background-color: var(--light) !important;
  box-shadow:
    0 15px 0 -2px var(--primary-color),
    0 16px 0 0px var(--light);
  animation: hoverPTekan 0.3s ease-in-out forwards;
}

.service .card-footer a:hover {
  color: var(--primary-color) !important;
  transition: all 0.3s;
}

/* Section Gallery */
#gallery {
  background-color: var(--primary-color) !important;
  padding: 20px !important;
}

.gallery .grid-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Hapus efek masonry */
.gallery .grid-wrapper .wide,
.gallery .grid-wrapper .tall,
.gallery .grid-wrapper .big {
  grid-column: auto !important;
  grid-row: auto !important;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border: none !important;
  border-radius: 0 !important;
  aspect-ratio: 4 / 5;
  /* seperti contoh */
  background: #000;
}

.gallery .grid-wrapper a {
  display: block;
  width: 100%;
  height: 100%;
}

.grid-wrapper > div > a:hover > img {
  transform: scale(1.03) !important;
  filter: brightness(0.7) !important;
  cursor:
    url("data:image/svg+xml;utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 8C0 8 3 2 8 2C13 2 16 8 16 8C16 8 13 14 8 14C3 14 0 8 0 8ZM1.81 8.13L1.73 8L1.812 7.87C2.138 7.36 2.618 6.683 3.232 6.014C4.494 4.635 6.12 3.5 8 3.5C9.878 3.5 11.506 4.635 12.77 6.014C13.3292 6.62912 13.8313 7.29386 14.27 8C13.8293 8.7053 13.3267 9.36993 12.768 9.986C11.506 11.365 9.88 12.5 8 12.5C6.122 12.5 4.494 11.365 3.23 9.986C2.70467 9.40891 2.22961 8.78798 1.81 8.13ZM11 8C10.9998 8.63153 10.8003 9.24689 10.43 9.75842C10.0596 10.27 9.5373 10.6516 8.9374 10.8489C8.33749 11.0462 7.69061 11.0492 7.08891 10.8574C6.48721 10.6656 5.96138 10.2888 5.58634 9.78074C5.21129 9.27265 5.00614 8.65915 5.00014 8.02765C4.99413 7.39615 5.18756 6.77886 5.55287 6.26372C5.91819 5.74858 6.43675 5.36186 7.03469 5.15866C7.63263 4.95545 8.27945 4.94612 8.883 5.132C8.66199 5.23201 8.46853 5.38413 8.31922 5.57532C8.16991 5.76651 8.06919 5.99106 8.0257 6.22971C7.98222 6.46837 7.99727 6.71401 8.06956 6.94558C8.14184 7.17714 8.26922 7.38772 8.44075 7.55925C8.61228 7.73078 8.82286 7.85816 9.05442 7.93044C9.28599 8.00273 9.53163 8.01778 9.77029 7.9743C10.0089 7.93081 10.2335 7.83009 10.4247 7.68078C10.6159 7.53147 10.768 7.33801 10.868 7.117C10.9558 7.4031 11.0003 7.70073 11 8Z' fill='white'/%3E%3C/svg%3E"),
    pointer !important;
}

.grid-wrapper > div > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

/* Section Pricing */
.pricing {
  min-height: 100vh;
  background-color: var(--bg-color) !important;
  padding: 3.5rem 0;
}

.pricing .title-section {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  max-width: 100% !important;
  width: 100% !important;
  text-align: right !important;
  gap: 150px !important;
}

.pricing .title-section h1 {
  font-family: var(--font-title) !important;
  color: #f0f0f0 !important;
  text-align: left !important;
  font-weight: 600 !important;
  font-size: 50px !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  max-width: 750px;
}

.pricing .title-section p {
  font-family: var(--font-isi) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #ebebeb !important;
  text-align: right !important;
  max-width: 500px !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

.pricing .container .content .isi-content {
  flex: 0 0 auto;
  width: 33.333333%;
}

.pricing .card {
  height: 100%;
  padding-bottom: 15px;
  border: 1px solid #525252 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}

.pricing .card-title {
  font-size: 20px;
  color: var(--text-main);
  font-weight: 700;
  font-family: var(--font-title);
}

.pricing h6 {
  color: var(--dark-section-body);
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 600;
  margin: 1rem 0;
}

.pricing h6 span {
  font-weight: 700;
  font-family: var(--font-title);
  color: var(--dark-section-body);
  font-size: 50px;
}

.pricing .card-body .feature {
  display: flex;
  gap: 4%;
  margin-block: 1rem;
}

.pricing .feature .icon svg path {
  stroke: var(--dark-section-body);
}

.pricing .feature .feature-desc {
  color: var(--dark-section-body);
  font-family: var(--font-isi);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
}

.pricing .card-footer a {
  background-color: var(--darkGray);
  color: var(--light-text);
  padding: 10px 20px !important;
  border-radius: 0 !important;
  font-family: var(--font-title);
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  transition: all 0.3s ease !important;
  margin: 0 !important;

  box-shadow: 0 0 0 0px var(--light);
  animation: hoverPLepas 0.3s;
}

.pricing .card-footer a:hover {
  background-color: var(--light) !important;
  box-shadow:
    0 15px 0 -2px var(--primary-color),
    0 16px 0 0px var(--light);
  animation: hoverPTekan 0.3s ease-in-out forwards;
}

.pricing .card-footer a:hover > span {
  color: var(--primary-color);
  transition: all 0.3s;
}

.pricing .card-footer a span {
  color: var(--light-text);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 16px;
  transition: all 0.5s;
  text-transform: uppercase;
}

/* Section Pricing On Pages */
.pricing .kategori_produk {
  display: flex;
  justify-content: center;
}

.pricing .kategori_produk .item {
  margin-inline: 0.5rem;
}

.pricing .kategori_produk .item a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: var(--light);
  font-weight: 600;
  padding: 10px 20px;
  border: 2px solid var(--darkBlue);
  transition: all 0.5s ease;
}

.pricing .kategori_produk .active > a {
  color: var(--lightGray);
  border: none;
  background: var(--light);
  font-weight: 700;
}

.pricing .kategori_produk .active > a:hover {
  text-decoration: none;
}

.pricing .kategori_produk .item:not(.active) a:hover {
  color: var(--lightGray);
  background: var(--darkBlue);
  text-decoration: none;
  transition: all 0.5s ease;
}

/* TESTIMONI SECTION */
.testimonial {
  background-color: var(--darkGray);
  padding: 80px;
}

.testimonial .title-section {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  max-width: 100% !important;
  width: 100% !important;
  text-align: right !important;
  gap: 150px !important;
}

.testimonial .title-section h1 {
  font-family: var(--font-title) !important;
  color: var(--dark) !important;
  text-align: left !important;
  font-weight: 600 !important;
  font-size: 50px !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  max-width: 750px;
}

.testimonial .title-section p {
  font-family: var(--font-isi) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--dark) !important;
  text-align: right !important;
  max-width: 500px !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

.testimonial .container .row:has(.isi-content) {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
  margin-top: 4rem !important;
}

.testimonial .isi-content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0px !important;
  padding: 0px !important;
}

.testimonial .card {
  display: grid !important;
  background: transparent !important;
  grid-template-columns: auto 1fr !important;
  column-gap: 1rem !important;
  padding: 1rem !important;
  border-radius: 0 !important;
  border: 1px solid var(--dark) !important;

  grid-template-areas:
    "foto subju"
    "foto deskrip"
    "foto nama" !important;
}

.testimonial .card-body,
.testimonial .card-footer,
.testimonial .card .description,
.testimonial .card .user {
  display: contents !important;
}

.testimonial .card .user .profile {
  grid-area: foto !important;
}

/* Foto Profil (img) -> Berada di kolom kiri penuh */
.testimonial .card .user img {
  background-color: var(--primary-color) !important;
  grid-area: foto !important;
  width: 150px !important;
  height: 150px !important;
  object-fit: cover !important;
  border-radius: 0px !important;
  align-self: start !important;
}

/* Judul Review (h5) -> Kanan Atas */
.testimonial .card .description h5 {
  grid-area: subju !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--primary-color);
  margin: 0 0 0.4rem 0 !important;
  height: fit-content !important;
}

/* Isi Review (p) -> Kanan Tengah */
.testimonial .card .description p {
  grid-area: deskrip !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--green);
  margin: 0 0 1rem 0 !important;
}

/* Nama User (span) -> Kanan Bawah */
.testimonial .card .user span,
.testimonial .card .user .desc {
  grid-area: nama !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--primary-color);
  margin: 0 !important;
}

/* CONTACT SECTION */
.contact {
  background-color: var(--primary-color) !important;
}

.contact .container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 80px !important;
}

.contact .container .col-12 {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  max-width: 100% !important;
  width: 100% !important;
  text-align: right !important;
  gap: 150px !important;
  margin: 0 !important;
}

.contact .container .col-12 h1 {
  font-family: var(--font-title) !important;
  color: #f0f0f0 !important;
  text-align: left !important;
  font-weight: 600 !important;
  font-size: 50px !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  max-width: 770px;
}

/* 1. KONDISI NORMAL (Mematikan WOW.js & Menjalankan Animasi Lepas) */
section.contact .container .col-12 a.contact-btn {
  /* Paksa tombol langsung muncul tanpa menunggu trigger scroll WOW.js */
  visibility: visible !important;

  display: inline-block !important;
  background-color: var(--darkGray) !important;
  color: var(--lightGray) !important;
  padding: 10px 20px !important;
  border-radius: 0 !important;
  font-family: var(--font-title);
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  margin: 0 !important;

  /* Jalankan animasi LEPAS saat kursor keluar, paksa matikan delay WOW.js */
  animation: hoverCLepas 0.3s ease-in-out forwards !important;
  animation-delay: 0s !important;
}

/* 2. KONDISI HOVER (Menjalankan Animasi Tekan) */
section.contact .container .col-12 a.contact-btn:hover {
  background-color: var(--light) !important;

  /* Jalankan animasi TEKAN saat kursor masuk, pastikan delay tetap 0s */
  animation: hoverCTekan 0.3s ease-in-out forwards !important;
  animation-delay: 0s !important;
}

/* 3. KEYFRAMES TEKAN (SAAT HOVER) - BERSIH TANPA !IMPORTANT */
@keyframes hoverCTekan {
  0% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 var(--primary-color);
  }

  50% {
    transform: translateY(-8px);
    box-shadow:
      0 7.5px 0 -2px var(--primary-color),
      0 8px 0 0px var(--light);
  }

  100% {
    transform: translateY(-16px);
    box-shadow:
      0 15px 0 -2px var(--primary-color),
      0 16px 0 0px var(--light);
  }
}

/* 4. KEYFRAMES LEPAS (SAAT KURSOR KELUAR) - BERSIH TANPA !IMPORTANT */
@keyframes hoverCLepas {
  0% {
    transform: translateY(-16px);
    box-shadow:
      0 15px 0 -2px var(--primary-color),
      0 16px 0 0px var(--light);
  }

  50% {
    transform: translateY(-8px);
    box-shadow:
      0 7.5px 0 -2px var(--primary-color),
      0 8px 0 0px var(--light);
  }

  100% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 var(--primary-color);
  }
}

/* FOOTER SECTION */
footer {
  padding: 3.5rem 0;
  min-height: 40vh;
  background: var(--dark);
}

footer .brand p {
  margin: 1rem 0;
  color: var(--gray);
}

/* ==> ( Icon Social Media Style )  <== */
footer svg {
  overflow: visible;
}

footer svg path {
  fill: var(--gray);
}

footer svg circle {
  stroke: var(--gray);
}

/* ==> ( End )  <== */

footer .social-list img {
  width: 30px;
}

footer .social-list a:not(:last-child) {
  margin-right: 1rem;
}

/* ==> ( Icon Social Media Style ) <== */
footer svg {
  overflow: visible;
}

footer svg path {
  fill: #ffffff;
}

footer .social-list a:nth-child(5) svg path {
  stroke: #ffffff;
  fill: none;
}

footer svg circle {
  stroke: rgb(252, 251, 251);
}

footer .footer-list {
  margin-top: 0 !important;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 12px 30px;
}

footer .footer-list ul {
  list-style: none;
  padding: 0;
  margin: 0;

  /* supaya isi UL ikut "larut" ke grid utama */
  display: contents;
}

footer .footer-list li {
  margin: 0;
}

footer .footer-list li a {
  color: var(--gray);
  font-family: var(--font-isi);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
}

footer .footer-list li a:hover {
  color: #fff;
}

footer h6 {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--dark-section-heading);
  margin-bottom: 0 !important;
}

footer .subscribe p {
  color: var(--gray);
  margin: 1rem 0;
}

footer .subscribe-btn {
  background-color: var(--darkGray) !important;
  color: var(--lightGray) !important;
  padding: 10px 20px !important;
  border-radius: 0 !important;
  font-family: var(--font-title);
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  transition: all 0.3s ease !important;
  margin: 0 !important;
  margin-top: 1rem !important;

  box-shadow: 0 0 0 0 var(--primary-color);
  animation: hoverPLepas 0.3s;
}

footer .subscribe-btn:hover {
  background-color: var(--light);
  box-shadow:
    0 15px 0 -2px var(--primary-color),
    0 16px 0 0px var(--light);
  animation: hoverPTekan 0.3s ease-in-out forwards;
}

/* KEYFRAMES BUTTON */

@keyframes hoverPTekan {
  0% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 var(--primary-color);
  }

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

    box-shadow:
      0 7.5px 0 -2px var(--primary-color),
      0 8px 0 0px var(--light);
  }

  100% {
    transform: translateY(-16px);

    box-shadow:
      0 15px 0 -2px var(--primary-color),
      0 16px 0 0px var(--light);
  }
}

@keyframes hoverPLepas {
  0% {
    transform: translateY(-16px);
    box-shadow:
      0 15px 0 -2px var(--primary-color),
      0 16px 0 0px var(--light);
  }

  50% {
    transform: translateY(-8px);
    box-shadow:
      0 7.5px 0 -2px var(--primary-color),
      0 8px 0 0px var(--light);
  }

  100% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 var(--primary-color);
  }
}

@keyframes hoverBTekan {
  0% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 var(--light);
  }

  50% {
    transform: translateY(-8px);
    box-shadow:
      0 7.5px 0 -2px var(--light),
      0 8px 0 0px var(--primary-color);
  }

  100% {
    transform: translateY(-16px);
    box-shadow:
      0 15px 0 -2px var(--light),
      0 16px 0 0px var(--primary-color);
  }
}

@keyframes hoverBLepas {
  0% {
    transform: translateY(-16px);
    box-shadow:
      0 15px 0 -2px var(--light),
      0 16px 0 0px var(--primary-color);
  }

  50% {
    transform: translateY(-8px);
    box-shadow:
      0 7.5px 0 -2px var(--light),
      0 8px 0 0px var(--primary-color);
  }

  100% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 var(--light);
  }
}

/* AKHIR KEYFRAME */

.hero .container .row .col-12 .hero-desk {
  text-align: center !important;
}

.hero:has(.hero-desk) .container .row {
  padding: 60px 0px !important;
}

.hero:has(.hero-desk) .container .row h1 {
  font-size: 60px !important;
}

section#product-terkait .wrapper .products.px-0 .product-card .action {
  position: absolute !important;
  align-self: self-start !important;
  margin: 1rem !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 1rem !important;
}

section#product-terkait .wrapper .products.px-0 .product-card .action a {
  color: var(--primary-color) !important;
  background-color: var(--light);
  padding: 10px !important;
}

/* PRODUCT SECTION */

.product {
  background-color: #111111;
  padding: 80px 1rem !important;
}

/* Header: judul besar di kiri, tagline di kanan */
.product .title-section {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  max-width: 100% !important;
  width: 100% !important;
  text-align: right !important;
  gap: 150px !important;
  margin-bottom: 45px !important;
}

.product .title-section h2 {
  font-family: var(--font-title) !important;
  color: #f0f0f0 !important;
  text-align: left !important;
  font-weight: 600 !important;
  font-size: 50px !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  max-width: 750px;
}

.product .title-section p {
  font-family: var(--font-isi) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #ebebeb !important;
  text-align: right !important;
  max-width: 450px !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* Grid 2 kolom untuk kartu produk */
.product .product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.product .product-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  background-color: var(--primary-color) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0px;
  overflow: hidden;

  gap: 1rem !important;
  width: 100%;
  height: 400px;
  padding: 1rem !important;
}

.product .product-card:hover {
  border: 1px solid var(--darkBlue) !important;
  cursor: pointer;
  transform: translateY(-5px);
  transition: all 0.3s ease;
}

/* Kotak putih tempat gambar produk */
.product .product-card .img {
  flex: 2;
  width: 100% !important;
  /* min-width: 210px; */
  background-color: #ffffff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.product .row .owl-stage {
  width: 5500px !important;
  padding-top: 1rem !important;
  height: 250px !important;
}

.product .row .owl-stage-outer {
  /* height: 250px !important; */
}

.product .row .owl-stage .owl-item {
  /* width: 450px !important; */
}

.product .row .owl-stage .owl-item .product-card {
  width: 100% !important;
}

/* Blok teks nama & deskripsi */
.product .product-card .description {
  flex: 1;
  width: 100% !important;
}

.product .product-card .description .title {
  color: var(--dark-section-heading);
  font-size: 1.05rem;
  font-family: var(--font-title);
  font-weight: 800;
  margin-bottom: 0.65rem;

  max-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product .product-card .description .text {
  color: rgba(255, 255, 255, 0.65);
  font-size: 16px;
  font-weight: 400;
  font-family: var(--font-isi);
  /* line-height: 1.65; */
  margin: auto !important;
  max-height: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.product .container-fluid .owl-nav {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  margin-top: 2rem !important;
}

.product .container-fluid .owl-nav .owl-next,
.product .container-fluid .owl-nav .owl-prev {
  border-radius: 0px !important;
  background-color: var(--light) !important;
  color: var(--bg-color) !important;
  width: 2rem !important;
  /* margin: 0 1rem !important; */
  border: none !important;

  box-shadow: 0 0 0 0px var(--primary-color);
  animation: hoverNPLepas 0.3s;
}

.product .container-fluid .owl-nav .owl-next:hover,
.product .container-fluid .owl-nav .owl-prev:hover {
  background-color: var(--light) !important;
  box-shadow:
    0 11px 0 -2px var(--primary-color),
    0 12px 0 0px var(--light);
  animation: hoverNPTekan 0.3s ease-in-out forwards;
}

@keyframes hoverNPTekan {
  0% {
    transform: translateY(0);
    box-shadow: 0 0px 0 0px var(--primary-color);
  }

  50% {
    transform: translateY(-6px);
    box-shadow:
      0 5.5px 0 -2px var(--primary-color),
      0 6px 0 0px var(--light);
  }

  100% {
    transform: translateY(-12px);
    box-shadow:
      0 11px 0 -2px var(--primary-color),
      0 12px 0 0px var(--light);
  }
}

@keyframes hoverNPLepas {
  0% {
    transform: translateY(-12px);
    box-shadow:
      0 11px 0 -2px var(--primary-color),
      0 12px 0 0px var(--light);
  }

  50% {
    transform: translateY(-6px);
    box-shadow:
      0 5.5px 0 -2px var(--primary-color),
      0 6px 0 0px var(--light);
  }

  100% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 var(--primary-color);
  }
}

.product .container-fluid .owl-nav .owl-prev {
  position: relative !important;
}

/* Section Artikel On Pages */

.hero:has(.hero-desk) {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 50 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_218_72)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.6731 6.81649C14.7218 6.72977 14.803 6.66595 14.8988 6.63909C14.9946 6.61222 15.0971 6.62451 15.1838 6.67324C15.2706 6.72198 15.3344 6.80317 15.3613 6.89895C15.3881 6.99474 15.3758 7.09727 15.3271 7.18399L12.4301 12.336L13.7841 14.7435C13.955 14.3558 14.2521 14.0374 14.627 13.8402C15.002 13.6429 15.4327 13.5784 15.849 13.6572C16.2653 13.736 16.6426 13.9533 16.9196 14.274C17.1965 14.5946 17.3567 14.9995 17.3742 15.4228C17.3916 15.8461 17.2652 16.2629 17.0155 16.6052C16.7659 16.9475 16.4077 17.1951 15.9993 17.3079C15.5909 17.4206 15.1564 17.3917 14.7665 17.226C14.3766 17.0602 14.0543 16.7673 13.8521 16.395L12.0001 13.101L10.1481 16.395C9.94593 16.7672 9.62372 17.0599 9.23393 17.2256C8.84414 17.3913 8.40975 17.4201 8.00149 17.3074C7.59322 17.1947 7.23515 16.947 6.98558 16.6049C6.73601 16.2627 6.60965 15.846 6.62708 15.4229C6.6445 14.9997 6.80468 14.5949 7.08154 14.2744C7.3584 13.9538 7.73561 13.7365 8.15176 13.6577C8.56791 13.5789 8.99846 13.6434 9.37331 13.8405C9.74816 14.0377 10.0452 14.356 10.2161 14.7435L11.5701 12.336L8.6731 7.18399C8.62437 7.09727 8.61208 6.99474 8.63894 6.89895C8.66581 6.80317 8.72962 6.72198 8.81635 6.67324C8.90307 6.62451 9.00561 6.61222 9.10139 6.63909C9.19718 6.66595 9.27837 6.72977 9.3271 6.81649L12.0001 11.571L14.6731 6.81649ZM8.5001 16.625C8.69825 16.6251 8.89291 16.5728 9.06438 16.4735C9.23585 16.3742 9.37805 16.2314 9.4766 16.0595L9.4866 16.0415C9.6053 15.8253 9.64968 15.5762 9.61293 15.3323C9.57617 15.0885 9.46031 14.8635 9.28318 14.6919C9.10604 14.5203 8.87743 14.4117 8.63254 14.3828C8.38764 14.3538 8.14001 14.4062 7.92776 14.5317C7.71551 14.6572 7.55038 14.849 7.4578 15.0776C7.36521 15.3062 7.35029 15.5588 7.41532 15.7967C7.48036 16.0346 7.62176 16.2445 7.81776 16.3941C8.01375 16.5438 8.2535 16.6249 8.5001 16.625ZM15.5001 16.625C15.3019 16.6251 15.1073 16.5728 14.9358 16.4735C14.7643 16.3742 14.6221 16.2314 14.5236 16.0595L14.5136 16.0415C14.3949 15.8253 14.3505 15.5762 14.3873 15.3323C14.424 15.0885 14.5399 14.8635 14.717 14.6919C14.8942 14.5203 15.1228 14.4117 15.3677 14.3828C15.6126 14.3538 15.8602 14.4062 16.0724 14.5317C16.2847 14.6572 16.4498 14.849 16.5424 15.0776C16.635 15.3062 16.6499 15.5588 16.5849 15.7967C16.5198 16.0346 16.3784 16.2445 16.1824 16.3941C15.9864 16.5438 15.7467 16.6249 15.5001 16.625Z' fill='%238E8E8E' fill-opacity='0.5'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_218_72'%3E%3Crect width='12' height='12' fill='white' transform='translate(6 6)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.artikel {
  padding: 2rem 1rem;
}

.artikel .artikel-card {
  display: flex;
  flex-direction: column-reverse;
  /* box-shadow: -0.92256px 0.92256px 2.76767px 0px rgba(0, 0, 0, 0.03), -2.76767px 5.53534px 5.53534px 0px rgba(0, 0, 0, 0.03), -5.53534px 11.99323px 7.38045px 0px rgba(0, 0, 0, 0.02), -10.14812px 20.29624px 9.22556px 0px rgba(0, 0, 0, 0.01), -16.60601px 32.28947px 10.14812px 0px rgba(0, 0, 0, 0.00); */
}

.artikel .artikel-card .description {
  padding: 1.5rem 1rem 1rem 0;
}

.artikel-card .description .title {
  font-family: var(--font-title);
  color: var(--brown);
  font-weight: 600;
  font-size: 17px;
  text-transform: uppercase;
}

.artikel-card .description .text {
  margin: 0.5rem 0 0.5rem 0;
  color: var(--primary-color);
  font-size: 0.9rem;

  /* Custom */
  max-height: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* number of lines to show */
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.artikel .artikel-card .img {
  height: 19rem;
  background-size: cover;
  background-position: center;
  box-shadow:
    -0.92256px 0.92256px 2.76767px 0px rgba(0, 0, 0, 0.03),
    -2.76767px 5.53534px 5.53534px 0px rgba(0, 0, 0, 0.03),
    -5.53534px 11.99323px 7.38045px 0px rgba(0, 0, 0, 0.02),
    -10.14812px 20.29624px 9.22556px 0px rgba(0, 0, 0, 0.01),
    -16.60601px 32.28947px 10.14812px 0px rgba(0, 0, 0, 0);
}

.artikel:has(.search-bar, .explore-website) {
  background: var(--light);
}

.artikel:has(.search-bar, .explore-website) .wrapper {
  display: grid;
  grid-template-areas:
    "explore search"
    "explore search"
    "explore artikels"
    "explore artikels"
    "explore show-more";
  gap: 2.5rem;
  column-gap: 4rem;
  grid-template-columns: 17% 1fr;
}
.artikel .wrapper .explore-website {
  grid-area: explore;
  padding-inline: 0;
}

.artikel .wrapper .explore-website h5 {
  font-family: var(--font-title) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  color: var(--lightGray);
  line-height: 1.25;
  margin-bottom: 1rem;
}

.artikel .wrapper .explore-website h6 {
  font-family: var(--font-title) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--lightGray);
  line-height: 1.25;
  margin-bottom: 1rem;
}

.artikel .wrapper .explore-website .kategori {
  font-family: var(--font-isi) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--lightGray);
}

.artikel .wrapper .explore-website .kategori input {
  accent-color: var(--secondary-color);
  width: 15px;
  height: 15px;
  margin: 0;
}

.artikel .wrapper .explore-website .form-check {
  padding-inline-start: 0;
  padding-block: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin-bottom: 9px;
}

.artikel .wrapper .explore-website .form-check label {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: #1a1a17 !important;
  line-height: 1.35;
  margin: 0;
  cursor: pointer;
}

.artikel .wrapper .search-artikel {
  grid-area: search;
}

.artikel .search-artikel .search-bar {
  width: 24%;
  position: relative;
}

.artikel .wrapper .search-bar .form-control {
  height: 55px;
  background: none;
  border: 2px solid var(--darkBlue) !important;
  border-radius: 0rem !important;
  padding-inline-end: 40px;
  font-weight: 600;
  color: var(--darkBlue);
  text-transform: uppercase;
  font-family: var(--font-title);
  font-size: 16px !important;
}

.artikel .wrapper .search-bar .form-control::placeholder {
  text-align: left;
  font-family: var(--font-title);
}

.artikel .wrapper .search-bar button {
  position: absolute;
  top: 15px;
  right: 20px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: var(--darkBlue);
}

.artikel .wrapper .search-bar .form-control:focus + button {
  right: 20px;
}

.artikel .wrapper .artikels {
  grid-area: artikels;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 2rem 1rem;
}

.artikel .wrapper .artikels .item a:hover {
  text-decoration: none;
  cursor: pointer;
}

.artikel:has(.wrapper) .item .artikel-card {
  box-shadow:
    -0.833px 0.833px 2.499px 0px rgba(0, 0, 0, 0.03),
    -2.499px 4.998px 4.998px 0px rgba(0, 0, 0, 0.03),
    -4.998px 10.83px 6.665px 0px rgba(0, 0, 0, 0.02),
    -9.164px 18.328px 8.331px 0px rgba(0, 0, 0, 0.01),
    -14.995px 29.158px 9.164px 0px rgba(0, 0, 0, 0);
}

.artikel .item .artikel-card .title {
  font-size: 17px;
  color: var(--dark);
}

.artikel:has(.wrapper) .item .artikel-card .description {
  font-size: 14.5px;
  padding: 1rem !important;
}

.artikel .item .artikel-card .img {
  height: 15rem;
}

.artikel .show-more-artikel {
  grid-area: show-more;
  width: fit-content;
  height: auto;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-title);
  text-transform: uppercase;
  background: var(--primary-color);
  border-radius: 0rem !important;
  transition: all 0.5s;
  color: var(--light);
  padding: 10px 20px !important;
  border: none !important;

  box-shadow: 0 0 0 0 var(--light);
  animation: hoverBLepas 0.3s;
}

.artikel .show-more-artikel:hover {
  background-color: var(--primary-color);
  box-shadow:
    0 15px 0 -2px var(--light),
    0 16px 0 0px var(--primary-color);
  animation: hoverBTekan 0.3s ease-in-out forwards;
}

/* Detail Artikel Page */
.detail_artikel {
  background-color: var(--dark-section-body);
  padding: 80px;
}

.detail_artikel .container .content {
  justify-content: center;
}

.detail_artikel .container .content .isi-content {
  max-width: 87% !important;
}

.detail_artikel .isi-content .back-btn {
  color: var(--primary-color);
}

.detail_artikel .isi-content .back-btn:hover {
  color: var(--darkBlue);
  text-decoration: none;
}

.detail_artikel .isi-content .info_artikel {
  margin-block: 2.2rem;
}

.detail_artikel .isi-content .info_artikel .judul_artikel h1 {
  margin-block: 1.3rem;
  font-weight: 800;
  font-family: var(--font-title);
  color: var(--dark);
}

.detail_artikel .isi-content .info_artikel .penulis_artikel {
  display: flex;
  align-items: center;
  column-gap: 5px;
}

.detail_artikel .isi-content .info_artikel .penulis_artikel .foto_penulis img {
  width: 50px;
}

.detail_artikel .isi-content .info_artikel .penulis_artikel h6 {
  margin: 0;
}

.detail_artikel .isi-content .info_artikel .penulis_artikel span {
  font-size: 0.8rem;
}

.detail_artikel .isi-content .isi_artikel h5 {
  font-weight: 600;
}

.detail_artikel .isi-content .isi_artikel p:has(img) {
  margin-block: 1.5rem;
}

/* Detail tnc */
.detail_tnc {
  background-color: var(--dark-section-body);
  padding: 80px 0;
}

.detail_tnc .container .content {
  justify-content: center;
  text-align: justify;
}

.detail_tnc .isi-content .back-btn {
  color: var(--darkGray);
}

.detail_tnc .isi-content .back-btn:hover {
  color: var(--darkBlue);
  text-decoration: none;
}

.detail_tnc .isi-content .isi_tnc h5 {
  font-weight: 600;
}

.detail_tnc .isi-content .isi_tnc p:has(img) {
  margin-block: 1.5rem;
}

/* Detail Product Page */
.detail_product {
  background-color: var(--dark-section-body);
  padding: 80px 0;
}

.product:has(.search-product) .wrapper {
  display: grid !important;
  grid-template-areas:
    "kategori search "
    "kategori product "
    "kategori show ";

  gap: 2rem !important;
}

.product:has(.search-product) .wrapper .explore-website {
  grid-area: kategori !important;
  color: var(--light);
}

.product:has(.search-product) .wrapper .search-product {
  grid-area: search !important;
  width: 100%;
}

.product:has(.search-product) .wrapper .search-product .search-bar {
  width: 24% !important;
  position: relative;
  display: flex;
  flex-direction: row-reverse !important;
}

.product:has(.search-product)
  .wrapper
  .search-product
  .form-control::placeholder {
  color: var(--darkGray);
}

.product:has(.search-product) .wrapper .search-product .form-control {
  background-color: transparent !important;
  border-radius: 0rem !important;
  border: 2px solid var(--dark-section-heading) !important;
  padding: 6px 0px;
  padding-left: 12px;
  padding-right: 40px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 16px !important;
  font-family: var(--font-title) !important;
  color: var(--darkGray);
  height: 55px;
}

.product:has(.search-product) .wrapper .search-product .link {
  position: absolute !important;
  border: none !important;
  color: var(--dark-section-body) !important;
  background-color: transparent !important;
  align-self: center !important;
  margin-right: 1rem !important;
}

.product:has(.search-product) .wrapper .products {
  grid-area: product !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem !important;
}

.product:has(.search-product) .products .product-card {
  display: flex;
  flex-direction: column-reverse;
  width: auto !important;
  height: 100% !important;
  padding: 0px !important;
}

.product:has(.search-product) .products .product-card .action {
  position: absolute;
  display: flex;
  align-self: end;
  flex-direction: row;
  margin: 10px !important;
  gap: 8px !important;
}

.product:has(.search-product) .products .product-card .action a {
  color: var(--primary-color) !important;
  background-color: var(--light) !important;
  padding: 10px !important;
}

.product:has(.search-product) .products .product-card .description {
  flex: 1 !important;
  order: 2;
  padding: 0px !important;
  padding: 1rem !important;
}

.product:has(.search-product) .products .product-card .img {
  flex: 1 !important;
  order: 1;
  aspect-ratio: 1/1 !important;
}

.product .wrapper .explore-website {
  grid-area: explore;
  padding-inline-start: 0;
  color: var(--light);
}

.product .wrapper .explore-website h5 {
  color: var(--light);
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1.7rem;
}

.product .wrapper .explore-website h6 {
  color: var(--light);
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 1rem;
}

.product .wrapper .explore-website .kategori,
.product .wrapper .explore-website .style {
  padding-block: 0;
  margin-bottom: 1.8rem;
}

.product .wrapper .explore-website input {
  accent-color: var(--darkBlue);
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin: 0;
  background-color: transparent;
}

.product .wrapper .explore-website .form-check {
  padding-inline-start: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin-bottom: 9px;
}

.product .wrapper .explore-website .form-check label {
  color: var(--light) !important;
  cursor: pointer;
  font-family: var(--font-isi);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  margin: 0;
}

.product:has(.search-product) .wrapper .show-more-product {
  grid-area: show !important;
  width: fit-content !important;
  padding: 10px 20px !important;
  border: none !important;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-title);
  box-shadow: 0 15px 0 6px var(--primary-color);
  animation: hoverPLepas 0.3s;
}

.product:has(.search-product) .wrapper .show-more-product:hover {
  background-color: var(--light);
  box-shadow:
    0 15px 0 -2px var(--primary-color),
    0 16px 0 0px var(--light);
  animation: hoverPTekan 0.3s ease-in-out forwards;
}

/* Detail Produk Page */
.detail_produk {
  padding-block-start: 7rem;
  padding-block-end: 5rem;
  background-color: var(--light);
}

.header_detail_produk {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.header_detail_produk h1 {
  font-family: var(--font-title);
  font-size: 50px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dark);
}

.header_detail_produk .tags {
  display: flex;
  gap: 10px;
}

.badge {
  padding: 10px !important;
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--dark-section-body) !important;
}

.badge.badge-grey {
  background-color: var(--darkBlue) !important;
}

.btn.btn_solid {
  color: var(--light);
  border-radius: 0rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase !important;
  background: var(--primary-color);
  text-transform: capitalize;
  transition: all 0.5s;
  padding: 10px 20px;

  box-shadow: 0 0 0 0 var(--light);
  animation: hoverBLepas 0.3s;
}

.btn.btn_solid:hover {
  background-color: var(--primary-color);
  box-shadow:
    0 15px 0 -2px var(--light),
    0 16px 0 0px var(--primary-color);
  animation: hoverBTekan 0.3s ease-in-out forwards;
  color: var(--light);
}

.btn.btn_outline {
  color: var(--light);
  border-radius: 0rem;
  border: none;
  font-family: var(--font-title);
  text-transform: uppercase !important;
  font-weight: 600;
  font-size: 16px;
  text-transform: capitalize;
  transition: all 0.5s;
  background-color: var(--primary-color);
  padding: 10px 20px;

  box-shadow: 0 0 0 0 var(--light);
  animation: hoverBLepas 0.3s;
}

.btn.btn_outline:hover {
  background-color: var(--primary-color);
  box-shadow:
    0 15px 0 -2px var(--light),
    0 16px 0 0px var(--primary-color);
  animation: hoverBTekan 0.3s ease-in-out forwards;
  color: var(--light);
}

.product:has(.products.px-0) {
  background-color: var(--light) !important;
}

.detail_produk_slider {
  margin: 4rem 0;
}

.detail_produk_slider .detail_produk_slider_item {
  box-shadow: 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
  border-radius: 0px;
  margin: 20px;
  overflow: hidden;
}

.detail_produk_slider .owl-carousel {
  padding: 0 0 0 5.5rem !important;
  overflow: hidden;
}

.detail_produk_slider .owl-nav .owl-next,
.detail_produk_slider .owl-nav .owl-prev {
  position: absolute;
  top: 50%;
  /*===> style button <===*/
  width: 30px;
  aspect-ratio: 1/1;
  border: none !important;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--darkBlue) !important;
  box-shadow: 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease 0s;
  opacity: 0;
}

.detail_produk_slider .owl-nav .owl-prev {
  left: 2.7%;
}

.detail_produk_slider .owl-nav .owl-next {
  right: 2%;
}

.detail_produk_slider.owl-carousel:hover > .owl-nav .owl-prev,
.detail_produk_slider.owl-carousel:hover > .owl-nav .owl-next {
  opacity: 1;
}

.detail_produk .tab {
  overflow: hidden;
}

.detail_produk .tab .tablinks {
  width: 10%;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 1.3rem 10px;
  font-family: var(--font-title);
  font-size: 16px;
  background-color: inherit;
  text-transform: uppercase;
  font-weight: 600;
}

.detail_produk .tab .tablinks:hover {
  border-bottom: 2px solid var(--bg-color);
}

.detail_produk .tab .tablinks.active {
  border-bottom: 2px solid var(--dark);
}

.detail_produk .tabcontent {
  display: none;
  padding: 2rem 0;
  border-top: 1px solid #e0e0e0;
}

.detail_produk .tabcontent.active {
  display: block;
}

/* Accordion */
.accordion {
  display: flex;
  flex-direction: column;
  font-family: "Sora", sans-serif;
  max-width: 991px;
  min-width: 320px;
  margin: 20px 0;
}

.accordion-item {
  margin-top: 10px;
  border: 1px solid #fcfcfc;
  border-radius: 6px;
  background: #ffffff;
  box-shadow:
    -0.833px 0.833px 2.499px 0px rgba(0, 0, 0, 0.03),
    -2.499px 4.998px 4.998px 0px rgba(0, 0, 0, 0.03),
    -4.998px 10.83px 6.665px 0px rgba(0, 0, 0, 0.02),
    -9.164px 18.328px 8.331px 0px rgba(0, 0, 0, 0.01),
    -14.995px 29.158px 9.164px 0px rgba(0, 0, 0, 0);
}

.accordion-item .accordion-item-title {
  position: relative;
  margin: 0;
  display: flex;
  width: 100%;
  font-size: 15px;
  cursor: pointer;
  justify-content: space-between;
  flex-direction: row-reverse;
  padding: 14px 20px;
  box-sizing: border-box;
  align-items: center;
}

.accordion-item .accordion-item-desc {
  display: none;
  font-size: 14px;
  line-height: 22px;
  font-family: var(--font-isi);
  font-size: 16px;
  font-weight: 400;
  color: var(--light-text);
  border-top: 1px dashed var(--darkBlue);
  padding: 10px 43px 20px;
  box-sizing: border-box;
}

.accordion-item input[type="checkbox"] {
  position: absolute;
  height: 0;
  width: 0;
  opacity: 0;
}

.accordion-item input[type="checkbox"]:checked ~ .accordion-item-desc {
  display: block;
}

.accordion-item
  input[type="checkbox"]:checked
  ~ .accordion-item-title
  .icon:after {
  content: "\f077";
  font-size: 16px;
}

.accordion-item input[type="checkbox"] ~ .accordion-item-title .icon:after {
  content: "\f078";
  font-size: 16px;
}

.accordion-item:first-child {
  margin-top: 0;
}

.accordion-item .icon {
  margin-left: 14px;
}

/* Pemesanan Page */
.pemesanan {
  padding-block-start: 7rem;
  padding-block-end: 5rem;
  display: none;
}

.pemesanan:nth-child(1) {
  display: block;
}

.pemesanan .form_pemesanan {
  border-radius: 20px;
  padding: 1rem;
}

.body_pemesanan .form_cari {
  border: 2px solid var(--primary-color);
  border-radius: 0px;
  height: calc(1.5em + 0.75rem + 4px);
  background-color: var(--light) !important;
}

.body_pemesanan .form_cari::placeholder {
  color: var(--primary-color) !important;
}

.body_pemesanan .btn_cari {
  width: 10%;
  border: 2px solid var(--primary-color);
  border-radius: 0px;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--font-isi);
  color: var(--primary-color);
}

.body_pemesanan .btn_cari:hover,
.body_pemesanan .btn_cari:focus,
.body_pemesanan .btn_cari:active {
  border-color: var(--primary-color) !important;
  color: var(--light);
}

.body_pemesanan .btn_cari:disabled {
  color: var(--primary-color);
  border-color: var(--primary-color) !important;
  background-color: var(--light);
  opacity: 100 !important;
}

.pemesanan .body_pemesanan .table tbody {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

.pemesanan .body_pemesanan .table-striped tr td button {
  border-radius: 0px !important;
}

.pemesanan .body_pemesanan .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: var(--bs-table-bg-type);
}

.pemesanan .body_pemesanan .table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-bg-type: var(--bs-table-striped-bg);
}

.pemesanan .body_pemesanan .table-striped tr td:nth-child(1) {
  border-radius: 0px 0 0 0px;
}

.pemesanan .body_pemesanan .table tr td:nth-child(2) {
  color: var(--blue);
  font-weight: 700;
}

.pemesanan .body_pemesanan .table-striped tr td:nth-child(3) {
  border-radius: 0 0px 0px 0;
}

.pemesanan .body_pemesanan .table tr td {
  padding: 1.2rem;
  vertical-align: middle;
}

.pemesanan .body_pemesanan .table tr td:nth-child(1),
.pemesanan .body_pemesanan .table tr td:nth-child(2) {
  width: 45%;
  background-color: var(--light) !important;
  color: var(--primary-color) !important;
}

.pemesanan .body_pemesanan .table tr td:nth-child(3) {
  width: 10%;
  background-color: var(--light) !important;
}

.pemesanan .thumbnail_produk {
  border-radius: 0px;
}

.pemesanan .table-responsive .table.mb-0 {
  background-color: var(--light) !important;
}

.pemesanan .table-responsive .table.mb-0 tr:last-child .text-right button {
  color: var(--light);
  border-radius: 0rem !important;
  font-weight: 600;
  font-size: 1rem;
  background: var(--primary-color);
  text-transform: capitalize;
  transition: all 0.5s;
  padding: 10px 20px;

  box-shadow: 0 15px 0 6px var(--white);
  animation: hoverBLepas 0.3s;
}

.pemesanan
  .table-responsive
  .table.mb-0
  tr:last-child
  .text-right
  button:hover {
  background-color: var(--primary-color);
  box-shadow:
    0 15px 0 -2px var(--light),
    0 16px 0 0px var(--primary-color);
  animation: hoverBTekan 0.3s ease-in-out forwards;
  color: var(--light);
}

.pemesanan .table-responsive .table.mb-0 tr:last-child .text-right {
  padding-bottom: 2rem !important;
}

.pemesanan .table-responsive .table.mb-0 tr {
  background-color: var(--light) !important;
}

.pemesanan .thumbnail_pemesanan {
  border-radius: 0px;
}

.pemesanan .body_pemesanan .table tfoot tr:nth-of-type(1) > * {
  --bs-table-bg-type: var(--light);
}

.pemesanan .body_pemesanan .table tfoot tr td:nth-child(1) {
  border-radius: 10px 0 0 10px;
}

.pemesanan .body_pemesanan .table tfoot tr td:nth-child(2) {
  border-radius: 0 10px 10px 0;
}

.pemesanan .table.detail_pesanan tr td {
  padding: 1.2rem;
  vertical-align: middle;
}

.pemesanan .table.detail_pesanan tr td:nth-child(1) {
  width: 60%;
}

.pemesanan .table.detail_pesanan tr td:nth-child(2) {
  width: 40%;
}

.pemesanan .table.detail_pesanan tr td:nth-child(2),
.pemesanan .table.detail_pesanan tr td:nth-child(2) button {
  color: var(--blue);
  font-weight: 700;
}

.pemesanan .table.detail_pesanan tr:nth-last-child(1) td:nth-child(2) button {
  color: var(--lightGray) !important;
}

/* Custom Selection */

.custom_selection {
  width: 100%;
  padding: 1.5rem 3rem;
  border: 1px solid var(--lightGray);
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  cursor: pointer;
}

.custom_selection:hover,
.custom_selection.active {
  background-color: var(--lightGray);
}

.custom_selection i {
  display: none;
}

.custom_selection.active i {
  display: block !important;
}

/* loader btn cari */
.loader-2 {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: transparent;
  border-radius: 50%;
}

.loader-2 {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: transparent;
  width: 21.6px;
  height: 21.6px;
}

.loader-2 {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: transparent;
  width: 21.6px;
  height: 21.6px;
  -webkit-animation: spin89345-2 1s linear infinite;
  animation: spin89345-2 1s linear infinite;
}

@-webkit-keyframes spin89345-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin89345-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* RESPONSIVE BREAKPOINT */

@media (min-width: 768px) and (max-width: 1023px) {
  /* NAVBAR SECTION */

  nav .navbar-nav .nav-link:last-child {
    margin-left: 0rem !important;
  }

  /* Section Hero */
  .hero .carousel-section {
    min-height: 50vh;
  }

  /* ABOUT */
  section.about .isi-content h1 {
    font-size: 50px !important;
  }

  section.about .isi-content.custom-my p {
    padding-left: 0px !important;
  }

  /* SEVICE */
  .service .title-section h1 {
    font-size: 40px !important;
  }

  .pricing .card-footer a span {
    font-size: 16px !important;
  }

  /* PRICE */
  .pricing .title-section p {
    font-size: 1rem !important;
  }

  /* LAYANAN */
  .product .title-section h2 {
    font-size: 40px !important;
  }

  .product .title-section p {
    font-size: 1rem !important;
  }

  /* CONTACT */
  .contact .container .col-12 h1 {
    font-size: 40px !important;
  }

  .contact .container .col-12 a {
    width: fit-content !important;
  }

  /* TESTIMONI */
  .testimonial .container .row:has(.isi-content) {
    display: flex !important;
    flex-direction: column !important;
  }

  /* FOOTER */
  footer .footer-list {
    display: flex !important;
    flex-direction: column !important;
  }

  footer .social-list a {
    margin: 0.5rem !important;
  }

  /* ARTIKEL */
  .artikel .search-artikel .search-bar {
    width: 30% !important;
  }

  /* PRODUCT */

  .product:has(.search-product) .wrapper .products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 1rem !important;
  }

  .product:has(.search-product) .wrapper .show-more-product {
    width: 45% !important;
  }

  .product .search-product .search-bar {
    width: 100%;
  }

  .product .wrapper .products {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .product .show-more-product {
    width: 45%;
  }
}

@media only screen and (width <=767px) {
  /* NAVBAR */
  nav .navbar-nav .nav-link:last-child {
    margin-left: 0% !important;
  }

  .navbar .container .offcanvas {
    width: 60% !important;
  }

  .navbar .container .offcanvas .offcanvas-body .navbar-nav {
    height: 50% !important;
    justify-content: space-around !important;
  }

  /* HERO */
  section.hero .row.content {
    padding: 50px 16px !important;
  }

  .hero .container .row .col-12 {
    padding: 50px 16px !important;
  }

  section.hero h1,
  section.hero .isi-content h1 {
    font-size: 25px !important;
  }

  section.hero p,
  section.hero .isi-content p {
    font-size: 1rem !important;
  }

  section.hero .carousel-img {
    height: 300px !important;
    width: 90% !important;
    align-self: center !important;
  }

  section.hero .isi-content {
    display: flex;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .hero .owl-nav .owl-next,
  .owl-nav .owl-prev {
    width: 40px !important;
  }

  .hero .owl-nav .owl-next {
    right: 7% !important;
  }

  .hero .owl-nav .owl-prev {
    left: 7% !important;
  }

  /* KEUNGGULAN */
  section.features .row.content {
    border-top: none !important;
  }

  section.features .card-body {
    border-bottom: 1px solid var(--light) !important;
    padding: 1.5rem 0 !important;
  }

  /* ABOUT */
  .about {
    padding-inline: 1rem !important;
  }

  section.about .row.content-home,
  .about .row.content {
    display: flex !important;
    flex-direction: column !important;
  }

  section.about .isi-content h1 {
    font-size: xx-large;
    text-align: center !important;
    order: 1;
  }

  section.about .isi-content.custom-my p {
    font-size: medium !important;
    order: 3;
    padding-top: 1rem !important;
  }

  .about .about-btn {
    order: 4;
    align-self: center !important;
    font-size: 16px !important;
  }

  section.about .row.content-home > div:first-child,
  section.about .row.content > div:first-child {
    order: 2;
  }

  /* SERVICE */
  .service {
    padding: 30px 0px !important;
  }

  .service .title-section {
    display: flex !important;
    flex-direction: column !important;
  }

  .service .title-section h1 {
    font-size: xx-large !important;
  }

  .service .title-section .desk-section {
    font-size: small;
    text-align: left !important;
  }

  .service .container .content {
    display: flex !important;
    flex-direction: column !important;
  }

  .service .container .content .isi-content {
    width: 100% !important;
  }

  /* GALLERY   */
  .gallery .grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* TITLLE */
  .pricing .title-section {
    display: flex;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .pricing .title-section h1 {
    font-size: xx-large !important;
  }

  .pricing .title-section p {
    font-size: small !important;
    text-align: left !important;
  }

  .justify-content-center {
    display: flex;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .pricing .container .content .isi-content {
    width: 100% !important;
  }

  .pricing .card-footer a span {
    font-size: 16px !important;
  }

  /* LAYANAN   */
  .product .title-section {
    display: flex;
    flex-direction: column !important;
    gap: 1rem !important;
    margin-bottom: 0px !important;
  }

  .product .title-section h2 {
    font-size: xx-large !important;
  }

  .product .title-section p {
    font-size: small !important;
    text-align: left !important;
  }

  /* PRODUCT */
  .product .product-card {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }

  .product .row .owl-stage-outer {
    height: fit-content !important;
  }

  .product .product-card .img {
    height: 200px !important;
    aspect-ratio: 1/1 !important;
  }

  .product .row .owl-stage .owl-item {
    /* width: 350px !important; */
    height: fit-content !important;
  }

  .product .product-card .description {
    /* display: flex !important;
    flex: none !important; */
    /* justify-content: center !important; */
  }

  /* CONTACT       */
  .contact .container {
    padding: 30px !important;
  }

  .contact .container .col-12 {
    display: flex;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .contact .container .col-12 h1 {
    font-size: x-large !important;
    text-align: center !important;
  }

  /* TESTIMONI */
  .testimonial {
    padding: 1rem !important;
  }

  .testimonial .title-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .testimonial .title-section h1 {
    font-size: xx-large !important;
  }

  .testimonial .title-section p {
    font-size: small !important;
    text-align: left !important;
  }

  .testimonial .container .row:has(.isi-content) {
    display: flex !important;
    flex-direction: column !important;
  }

  .testimonial .card {
    display: flex !important;
    flex-direction: column !important;
  }

  .testimonial .card .user {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 1rem !important;
    align-items: center !important;
  }

  .testimonial .card .description h5 {
    text-align: left;
  }

  .testimonial .card .description p {
    text-align: left;
  }

  .testimonial .card .user span,
  .testimonial .card .user .desc {
    text-align: left;
  }

  .testimonial .card .user img {
    width: 30px !important;
    height: 30px !important;
    background-color: var(--primary-color) !important;
  }

  .testimonial .card .user .profile {
    display: flex !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
  }

  /* FOOTER */
  footer .container .row {
    gap: 2rem !important;
  }

  /* ARTIKEL PAGES */
  .hero .container .hero-desk {
    font-size: medium !important;
    text-align: center !important;
  }

  .hero:has(.hero-desk) .container .row h1 {
    font-size: 35px !important;
  }

  .artikel:has(.search-bar, .explore-website) .wrapper {
    display: flex !important;
    flex-direction: column !important;
  }

  .artikel .wrapper .artikels {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  .artikel .wrapper .explore-website {
    /* padding-left: 1rem !important;
    padding-right: 0rem !important; */
  }

  .artikel .search-artikel .search-bar {
    width: 100% !important;
    /* padding: 0rem 1rem !important; */
  }

  .artikel .wrapper .search-bar button {
    padding-right: 1rem !important;
  }

  .artikel .show-more-artikel {
    width: 93% !important;
    margin: 0rem 1rem !important;
  }

  .detail_artikel {
    padding: 0 !important;
  }

  .detail_artikel .container .content .isi-content {
    max-width: 100% !important;
    padding: 1rem;
  }

  /* PRODUCT PAGES */
  .product:has(.search-product) .wrapper {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  section#product-terkait .wrapper .products.px-0 {
    gap: 1rem !important;
  }

  section#product-terkait .wrapper .products.px-0 .product-card .action {
    position: absolute !important;
    align-self: self-end !important;
    bottom: 10px !important;
    margin: 1rem !important;
    display: flex !important;
    flex-direction: column !important;
  }

  section#product-terkait .wrapper .products.px-0 .product-card .action a {
    color: var(--primary-color) !important;
  }

  .product:has(.search-product) .wrapper .products {
    display: flex !important;
    flex-direction: column !important;
  }

  .product:has(.search-product) .wrapper .search-product .search-bar {
    width: 100% !important;
  }

  .product:has(.search-product) .wrapper .show-more-product {
    width: 100% !important;
  }

  .badge.badge-grey {
    border: 1px solid var(--green);
  }

  .btn.btn_solid {
    font-size: small !important;
  }

  .btn.btn_outline {
    font-size: small !important;
  }

  .detail_produk .tab {
    display: flex !important;
    flex-direction: row !important;
    justify-content: left !important;
    gap: 2rem !important;
    width: 100% !important;
  }

  /* PRICE PAGES */
  .pricing .kategori_produk .active > a {
    font-size: small !important;
    border: none !important;
  }

  .pricing .kategori_produk .item a {
    font-size: small !important;
    border: none !important;
  }

  .pricing .kategori_produk {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .body_pemesanan .form_cari {
    width: 70% !important;
  }

  .body_pemesanan .btn_cari:disabled {
    width: 30%;
  }
}