/* Font Face */
@font-face {
  font-family: "Montserratku";
  src: url("./../font/Montserrat-VariableFont_wght.ttf") format(woff);
}

@font-face {
  font-family: "Nautilus";
  src: url("./../font/nautilus-pompilius.regular.otf");
}

@font-face {
  font-family: "Lobsterku";
  src: url("./../font/Lobster-Regular.ttf") format(truetype);
}

@font-face {
  font-family: "PublicSansKu";
  src: url("./../font/PublicSans-VariableFont_wght.ttf") format(truetype);
}

/* Root Style */
:root::selection {
  background: #000;
}
/* ./Root Style */
/* Style */
body {
  background-color: #000;
  font-family: "Lobsterku", "Nautilus", "PublicSansKu", "Montserratku",
    "Montserrat", Arial, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif !important;
}

.text-blue-bs {
  color: #007bff;
}

.gradient-blue-bs {
  background: -webkit-linear-gradient(315deg, #42d392 25%, #007bff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-orange-bs {
  color: #fd7e14;
}

.gradient-orange-bs {
  background: -webkit-linear-gradient(315deg, #ffc107 25%, #fd7e14);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-blue-bs {
  background: -webkit-linear-gradient(315deg, #42d392 25%, #007bff);
}

.bg-orange-bs {
  background: -webkit-linear-gradient(315deg, #ffc107 25%, #fd7e14) !important;
}

.bg-dark2 {
  background-color: #222;
  background: #222;
}

.box-form {
  height: 400px;
  border-radius: 30px;
  /* box-shadow: 3px 3px 20px white, -3px -3px 20px white; */
  background-color: white;
}

.box-button {
  width: 60vw;
}

/* Input Styling */
.input-bs {
  /* font-size: 23px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 12px;
    padding-right: 12px; */
  padding: 14px;
}

.input-bs:focus {
  box-shadow: none !important;
  border-color: #007bff !important;
}

.input-bs2 {
  padding: 10px;
  box-shadow: none;
  border-color: #e75b1e;
}

.input-bs2:focus {
  border-color: #dee2e6 !important;
  box-shadow: inset 0 -2px #e75b1e;
}

.input-bs3 {
  padding: 10px;
  box-shadow: none;
  background: transparent !important;
  border-color: #e75b1e;
}

.input-bs3:focus {
  border-color: transparent !important;
  box-shadow: inset 0 -2px #e75b1e;
}

/* ./ Input Styling */

button.btn-bs {
  border-radius: 20px;
  background-image: linear-gradient(#42d392, #56a1d2);
  border: none;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  padding: 12px 45px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
}

button.btn-bs:active {
  transform: scale(0.95);
}

/* Scrollbar style */

.scrollViewVertical {
  overflow-y: scroll;
  /* color: ; */
  overflow-x: hidden !important;
}

.scrollViewHorizontal {
  overflow-y: hidden !important;
  /* color: ; */
  overflow-x: scroll !important;
}

.scrollViewAll {
  overflow-y: scroll !important;
  /* color: ; */
  overflow-x: scroll !important;
}

.scrollView::-webkit-scrollbar,
.col-form-auth::-webkit-scrollbar {
  width: 3px !important;
  position: absolute;
  margin: 0 !important;
}

::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(143, 143, 143);
  border-radius: 10px;
}

.scrollDisplayNone {
  scrollbar-width: none;
}

.scrollDisplayNone::-webkit-scrollbar {
  display: none;
  width: none;
  -ms-overflow-style: none;
}

.scrollDisplayThin {
  scrollbar-width: thin !important;
}

.scrollDisplayThin::-webkit-scrollbar {
  width: 3px !important;
  height: 3px !important;
}

/* Login Page */
.video-bg,
.video-bg-forgotpw {
  position: fixed;
  min-width: 100%;
  min-height: 100%;
  right: 0;
  bottom: 0;
}

.box-overlay {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  top: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  left: 0;
  z-index: 100;
}

.box-login,
.box-register {
  height: 500px;
  margin: 30px auto;
  border-radius: 30px;
  /* box-shadow: -20px 5px 5px white; */
  background-color: white;
}

.size-60vw {
  width: 60vw;
}

.size-80vw {
  width: 80vw;
}

.img-box-login {
  width: 100% !important;
  height: 100% !important;
  background-color: #000;
  background-image: url("../img/img_poster_login@2x.png");
  background-position: center center;
  background-size: contain;
  /* background-attachment: fixed; */
  background-repeat: no-repeat;
  /* object-fit: cover;
    object-position: center center;
    -o-object-fit: cover;
    -o-object-position: center center; */

  border-radius: 30px 0 0 30px;
}

.col-form-auth,
.scrollView {
  overflow-x: hidden;
  overflow-y: scroll;
}
/* .img-box-login img {
    border-radius: 30px;
} */

.box-img-upload {
  width: 150px;
  height: fit-content;
  height: -moz-fit-content;
  border-radius: 10px;
  border: 1px solid #5f6368;
  transition: 0.2s;
}

.box-img-upload:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.oops-text {
  font-size: 70px;
  font-weight: bold;
}

.big-judul {
  font-size: 40px !important;
  font-weight: bold;
}

.box-btn-action {
  width: 300px;
  height: 180px;
  position: relative;
  /* background-color: #fff; */
  background-image: url("../img/bg_pattern1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 20px;
  border: 1px solid darkgray;
}

.box-btn-action img {
  width: 100px;
}

.wrapOverlayTransparent {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  transition: 0.2s;

  background-color: rgba(255, 255, 255, 0);
  border-radius: inherit;
}

.wrapOverlayTransparent6 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  transition: 0.2s;

  background-color: rgba(0, 0, 0, 0.6);
  border-radius: inherit;
}

.wrapOverlayBlack {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  transition: 0.2s;

  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
  border-radius: inherit;
}

.box-btn-action:active .wrapOverlayTransparent {
  background-color: rgba(255, 255, 255, 0.2);
}

.con-img-larger {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
}

.con-img-larger img {
  z-index: 120 !important;
}

.pointer:hover {
  cursor: pointer !important;
}

.nyuutKedalem {
  transition: 0.3s;
}

.nyuutKedalem:active {
  transform: scale(0.9);
}

.display-none {
  display: none;
}

.fit-content {
  width: fit-content;
  width: -moz-fit-content;
  height: fit-content;
  height: -moz-fit-content;
}

.letter-spacing-bs {
  letter-spacing: 9px;
}

.upLitleOnHover {
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.upLitleOnHover:hover {
  transform: translateY(-5%);
}

.bouncing-click,
.bouncing-click-thin {
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bouncing-click:active {
  transform: scale(0.9);
}

.bouncing-click-thin:active {
  transform: scale(0.97);
}

.border-stack {
  border: 2px dashed grey;
  border-radius: 10px;
}

.badge-white-blue {
  border: 2px solid #0783f5;
  background-color: white;
  transition: 0.4s ease;
  color: #605d5d;
  width: 100px;
}

.badge-white-blue.active-badge {
  background-color: #bcd8f1;
}

.text-uppercase {
  text-transform: uppercase;
}

.bg-gradient-bs {
  background: -webkit-linear-gradient(90deg, #42d392, #007bff) !important;
}

.header-profile {
  width: 100%;
  height: 120px;
  background: -webkit-linear-gradient(90deg, #42d392, #007bff);
  margin-bottom: 100px;
}

.con-el-profile {
  padding-top: 30px;
  width: 200px;
  height: 200px;
}

.img-profile {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 20px solid black;
}

.middle-rounded {
  border-radius: 1em;
}

.header-profile .editImgProfile {
  position: absolute;
  bottom: 0;
  right: 25px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.fs-smaller,
.fs-smaller * {
  font-size: smaller;
}

.mymodal-alert {
  width: 40vw;
  height: auto;
  margin: 20vh auto;
  /* background-color: #1F283D; */
  /* border: 1px solid white; */
  border-radius: 1rem;
}

.bg-gradient-purple-ig {
  background: linear-gradient(180deg, #f507b6 0%, #6d3dcd 100%);
  background-blend-mode: normal;
}

.bg-gradient-myred {
  background: linear-gradient(180deg, #f50707 0%, #410000 100%);
  background-blend-mode: normal;
}

.hov-arrow-trans .arrow-trans {
  transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hov-arrow-trans:hover .arrow-trans {
  transform: translateX(50%);
}

.bg-gradient-ibiza-sunset {
  background: linear-gradient(180deg, #ee0979 0%, #ff6a00 100%);
  background-blend-mode: normal;
}

/* Shine Effect */

.shine-effect {
  position: absolute;
  top: 0;
  left: -20%;
  width: 10%;
  bottom: 0;
  z-index: 9999;
  background-color: rgba(255, 255, 255, 0.3);
  transform: skewX(-40deg);
  animation: slideShine 3s linear forwards infinite;
}

.box-sizing-bb {
  box-sizing: border-box !important;
}

.fs-mobile-1 {
  font-size: 24px !important;
}

.fs-mobile-2 {
  font-size: 20px !important;
}

.fs-mobile-3 {
  font-size: 16px !important;
}

.fs-mobile-4 {
  font-size: 12px !important;
}

.fs-mobile-5 {
  font-size: 8px !important;
}

.fs-mobile-6 {
  font-size: 6px !important;
}

.imgAccountCircle {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
}

.fit-content {
  width: fit-content !important;
  width: -moz-fit-content !important;
  height: fit-content !important;
  height: -moz-fit-content !important;
}

.w-fit-content {
  width: fit-content !important;
  width: -moz-fit-content !important;
}

.h-fit-content {
  height: fit-content !important;
  height: -moz-fit-content !important;
}

/* Width Styling */
.w-30px {
  width: 30px;
}

.w-40px {
  width: 40px;
}

.w-50px {
  width: 50px;
}

.w-20px {
  width: 20px;
}

.w-15px {
  width: 15px;
}

.w-10px {
  width: 10px;
}

.w-70px {
  width: 70px;
}

.w-60px {
  width: 60px;
}

.w-100px {
  width: 100px;
}

.w-120px {
  width: 120px;
}

.w-150px {
  width: 150px;
}

.w-180px {
  width: 180px;
}

.w-300px {
  width: 300px;
}

.w-350px {
  width: 350px;
}

.w-20vw {
  width: 20vw !important;
}

.w-30vw {
  width: 30vw !important;
}

.w-40vw {
  width: 40vw !important;
}

.w-50vw {
  width: 50vw !important;
}

.w-60vw {
  width: 60vw !important;
}

.w-70vw {
  width: 70vw !important;
}

.w-80vw {
  width: 80vw !important;
}

.w-90vw {
  width: 90vw !important;
}

.w-95vw {
  width: 95vw !important;
}

.w-100vw {
  width: 100vw !important;
}

.w-40 {
  width: 40%;
}

.w-45 {
  width: 45%;
}

.w-60 {
  width: 60% !important;
}

.w-90 {
  width: 90% !important;
}

.w-95 {
  width: 95% !important;
}

/* Height Styling */
.h-30px {
  height: 30px;
}

.h-40px {
  height: 40px;
}

.h-50px {
  height: 50px;
}

.h-20px {
  height: 20px;
}

.h-15px {
  height: 15px;
}

.h-10px {
  height: 10px;
}

.h-70px {
  height: 70px;
}

.h-60px {
  height: 60px;
}

.h-100px {
  height: 100px;
}

.h-150px {
  height: 150px;
}

.h-200px {
  height: 200px;
}

.h-250px {
  height: 250px;
}

.h-300px {
  height: 300px;
}

.h-350px {
  height: 350px;
}

.h-100vh {
  height: 100vh !important;
}

.h-75vh {
  height: 75vh !important;
}

.h-60vh {
  height: 60vh !important;
}

.h-50vh {
  height: 50vh !important;
}

.h-25vh {
  height: 25vh !important;
}

.overlay-hover,
.overlay-active {
  transition: 0.5s;
}

.overlay-hover:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.overlay-active:active {
  background-color: rgba(0, 0, 0, 0.2);
}

.body-card-standard {
  height: 80vh;
}

.chat-bubble,
.chat-bubble-2 {
  width: 100%;
  height: max-content;
  border-radius: 40px !important;
  background: -webkit-linear-gradient(90deg, #42d392, #007bff);
  color: white;
  overflow-x: hidden;
}

.chat-bubble-2 {
  background: -webkit-linear-gradient(90deg, #9dc40f, #0d8dea);
}

.fs-10px,
.fs-10px * {
  font-size: 10px !important;
}

.fs-12px,
.fs-12px * {
  font-size: 12px !important;
}

.fs-13px,
.fs-13px * {
  font-size: 13px !important;
}

.fs-14px,
.fs-14px * {
  font-size: 14px !important;
}

.fs-16px,
.fs-16px * {
  font-size: 16px !important;
}

.fs-18px,
.fs-18px * {
  font-size: 18px !important;
}

.fs-20px,
.fs-20px * {
  font-size: 20px !important;
}

.fs-21px,
.fs-21px * {
  font-size: 21px !important;
}

.fs-22px,
.fs-22px * {
  font-size: 22px !important;
}

.fs-23px,
.fs-23px * {
  font-size: 23px !important;
}

.fs-24px,
.fs-24px * {
  font-size: 24px !important;
}

.fs-25px,
.fs-25px * {
  font-size: 25px !important;
}

.fs-26px,
.fs-26px * {
  font-size: 26px !important;
}

.fs-28px,
.fs-28px * {
  font-size: 28px !important;
}

.fs-36px,
.fs-36px * {
  font-size: 36px !important;
}

.fs-40px,
.fs-40px * {
  font-size: 40px !important;
}

.fs-44px,
.fs-44px * {
  font-size: 44px !important;
}

.fs-48px,
.fs-48px * {
  font-size: 48px !important;
}

.fs-54px,
.fs-54px * {
  font-size: 54px !important;
}

.fs-60px,
.fs-60px * {
  font-size: 60px !important;
}

.fs-65px,
.fs-65px * {
  font-size: 65px !important;
}

.fs-70px,
.fs-70px * {
  font-size: 70px !important;
}

.fs-80px,
.fs-80px * {
  font-size: 80px !important;
}

.searchMyAdvice:focus {
  border-color: #dee2e6 !important;
  box-shadow: inset 0 -2px #007bff !important;
}

input.searchUsaha:focus {
  border-color: #dee2e6 !important;
  box-shadow: inset 0 -2px #007bff !important;
}

.un_allow {
  cursor: not-allowed !important;
}

.myjumbotron {
  background: url("../img/bgWelcomeJumbotron.jpg");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  padding-top: 130px;
}

.z-front {
  z-index: 9977 !important;
}

.z-back {
  z-index: -1;
}

.linkHoverWhite {
  color: #cfcfcf;
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.linkHoverWhite:hover {
  color: white !important;
}

.delay-2 {
  animation-delay: 200ms !important;
}

.delay-3 {
  animation-delay: 300ms !important;
}

.delay-4 {
  animation-delay: 400ms !important;
}

.delay-5 {
  animation-delay: 500ms !important;
}

.indicatorVerticalScroll {
  position: fixed;
  width: 5px;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  /* background-color: #fff; */
  height: 35vh;
}

.indicatorItem {
  width: 100%;
  display: block;
  height: 15%;
  background: #ffffffa8;
  border-radius: 5px;
  transition: 0.4s ease-in-out;
}

.indicatorItem.active {
  height: 40%;
  background: #fff !important;
}

.aboutJumbotron {
  background: #000;
}

.aspectratio1p1 {
  aspect-ratio: 1 / 1 !important;
}

.aspectratio16p9 {
  aspect-ratio: 16 / 9 !important;
}

.aspectratio4p3 {
  aspect-ratio: 4 / 3 !important;
}

.border-input,
.dark-version .input-group.input-group-outline .form-control {
  border: 1px solid #d2d6da !important;
  border-color: #d2d6da !important;
}

.border-input:focus {
  border-color: #e83975 !important;
}

.ql-toolbar,
.ql-editor {
  background-color: #282c34 !important;
}

/* Warna icon toolbar */
.ql-toolbar button svg {
  fill: white; /* Ganti warna icon jadi putih */
}

/* Warna icon pas di-hover */
.ql-toolbar button:hover svg {
  fill: #e83975 !important; /* Warna kuning pas di-hover */
}

.ql-toolbar.ql-snow {
  border-top-left-radius: 1em !important;
  border-top-right-radius: 1em !important;
  border: 1px solid #e83975 !important;
}

.ql-container.ql-snow {
  padding: 0 !important;
  border-bottom-left-radius: 1em !important;
  border-bottom-right-radius: 1em !important;
  border: 1px solid #e83975 !important;
}

.ql-container.ql-snow .ql-editor {
  width: 100% !important;
  border-bottom-left-radius: 1em !important;
  border-bottom-right-radius: 1em !important;
}

.ql-editor.ql-blank::before {
  color: #fff !important; /* Warna abu-abu */
  font-style: italic; /* Mirip placeholder default */
}

.ql-editor *,
.ql-editor::placeholder {
  color: white !important;
}

.ql-font-arial {
  font-family: Arial, sans-serif;
}
.ql-font-poppins {
  font-family: "Poppins", sans-serif;
}
.ql-font-roboto {
  font-family: "Roboto", sans-serif;
}
.ql-font-times-new-roman {
  font-family: "Times New Roman", serif;
}
.ql-font-monospace {
  font-family: monospace;
}

.ql-font-montserrat {
  font-family: "Montserratku", "Montserrat";
}

.ql-container {
  width: 100%;
  height: 200px !important;
  overflow-y: scroll !important;
  /* border-radius: 1em !important; */
}

/* This Style was Ovverided on style header */
/* .input-group.input-group-outline.is-focused .form-label + .form-control,
.input-group.input-group-outline.is-filled .form-label + .form-control {
  border-color: #ffc107 !important;
  border-top-color: transparent !important;
  box-shadow: inset 1px 0 #ffc107, inset -1px 0 #ffc107, inset 0 -1px #ffc107 !important;
}

.input-group.input-group-outline.is-focused .form-label,
.input-group.input-group-outline.is-filled .form-label {
  color: #ffc107 !important;
}

.input-group.input-group-outline.is-focused .form-label:before,
.input-group.input-group-outline.is-focused .form-label:after,
.input-group.input-group-outline.is-filled .form-label:before,
.input-group.input-group-outline.is-filled .form-label:after {
  border-top-color: #ffc107 !important;
  box-shadow: inset 0 1px #ffc107 !important;
} */

.text-center {
  text-align: center !important;
}

.text-start {
  text-align: start !important;
}

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.checkoutsContainer {
  width: 100%;
  padding: 2rem;
  border: 1px solid #666;
}

.text-primary {
  color: #ffc107 !important;
}

.checkoutsContainer .row {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  justify-items: center;
}

.bsFontFamily,
.bsFontFamily * {
  font-family: "Montserratku", "Montserrat", Arial, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif !important;
}

.mymask {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.shadow-white {
  box-shadow: 0.5px 0.5px 20px rgba(255, 255, 255, 0.2),
    -0.5px -0.5px 20px rgba(255, 255, 255, 0.2);
}

.border-color-primary {
  border-color: #ffc107 !important;
}

.border-left {
  border-left: 2px solid;
}

/* On Hover Styling */
.onHoverOpacity1 {
  opacity: 0.7;
}

.onHoverOpacity1:hover {
  opacity: 1;
}

.onHoverUpLitle {
  transform: translateY(0);
}

.onHoverUpLitle:hover {
  transform: translateY(-2%);
}

.onHoverUp {
  transform: translateY(0);
}

.onHoverUp:hover {
  transform: translateY(-10%);
}

.onHoverScaleZoom {
  transform: scale(1);
}

.onHoverScaleZoom:hover {
  transform: scale(1.2);
}

.onHoverBgOverlay {
  background: rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
}

.onHoverBgOverlay:hover {
  background: rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.1);
}

.onHoverTextOrange {
  color: auto !important;
}

.onHoverTextOrange:hover {
  color: #f15d30 !important;
}

.onHoverBorderThemeOrange:hover {
  border: 2px solid #e75b1e !important;
}

.onHoverColorTextGreen:hover {
  color: #46c256 !important;
}

.onhover-link-theme-orange,
.onhover-link-theme-yellow {
  transition: 0.5s;
}

/* ./ On Hover Styling */

/* General Styling */
.position-centerpoint {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.imglogodropshadow {
  filter: drop-shadow(0 10px 15px #e7b739) !important;
}

.floatingButton {
  position: fixed;
  bottom: 5%;
}

.boxOverlayModal-zindex-110 {
  z-index: 110 !important;
}

.cardProductInCart {
  box-sizing: border-box;
}

.btnAddOnProductDetails {
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 -0.5px 1.3px #e7b739;
}

.mydnone {
  display: none;
}

.prewrap-whitespace {
  white-space: pre-wrap;
}

.medsosBtn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 50 !important;
}

.borderbox {
  box-sizing: border-box;
}

.imgFooter {
  position: absolute;
  top: -50%;
  /* transform: translateY(50%); */
}

.myCarouselHeader {
  border-radius: 30px;
  overflow: hidden;
  width: 100%;
}

.myCarouselHeader.mobile {
  height: 300px;
}

.myCarouselHeader.desktop {
  height: 450px;
}

.myCarouselHeader .subContainerCarouselHeader {
  width: 100%;
  height: 420px;
  overflow: hidden;
}

/* .myCarouselHeader img {
  opacity: 0;
} */
.flex-grow-1 {
  flex-grow: 1;
}

.flex-grow-2 {
  flex-grow: 2;
}

.flex-grow-3 {
  flex-grow: 3;
}

.flex-grow-4 {
  flex-grow: 4;
}

.flex-grow-5 {
  flex-grow: 5;
}

.flex-grow-6 {
  flex-grow: 6;
}

.flex-grow-7 {
  flex-grow: 7;
}

.flex-grow-8 {
  flex-grow: 8;
}

.flex-grow-9 {
  flex-grow: 9;
}

.flex-grow-10 {
  flex-grow: 10;
}

.stylingBulletsPagination .swiper-pagination-bullet-active {
  /* aspect-ratio: 1 / 1; */
  background: #e75b1e !important; /* Contoh: Ganti dengan warna tema resto lo */
}
/* Ganti Warna Buletan Non-aktif */
.stylingBulletsPagination .swiper-pagination-bullet {
  background: rgba(0, 0, 0, 0.6);
  /* border: 1px solid #e75b1e !important; */
  /* aspect-ratio: 1 / 1; */
  opacity: 1; /* Biasanya perlu di-set 1 untuk warna solid */
}

/* .stylingBulletsPagination.desktop .swiper-pagination-bullet {
  width: 50px !important;
  height: 25px !important;
  aspect-ratio: 16 / 9;
  border-radius: 10px !important;
} */

.segitigaKiri {
  content: "";
  width: 0;
  border-right: solid 20px green;
  border-top: solid 0px transparent;
  border-bottom: solid 20px transparent;
}

.btnSegitiga {
  border-radius: 0px !important;
}

.imgSegitigaKiri {
  transform: rotate(-90deg);
  right: 93%;
}

.imgSegitigaKanan {
  transform: rotate(90deg);
  left: 93%;
}

.musicToggleBtn {
  position: fixed;
  top: 20px;
  right: 0;
  border-radius: 50% 0 0 50%;
  z-index: 50 !important;
}

.displaySisaSatuan {
  display: none;
}

.activatedDisplaySisaSatuan {
  display: block !important;
}

.starRating {
  transition: .2s;
}

input.placeholderlightgrey::placeholder,
textarea.placeholderlightgrey::placeholder {
  color: #6c757d !important;
}

.border-whitesmoke {
  border-color: rgba(226, 232, 240, 1);
}

.border-1px {
  border-width: 1px;
}

.border-2px {
  border-width: 2px;
}

.border-3px {
  border-width: 3px;
}

.downloadApkBtn {
  position: absolute !important;
  top: 0 !important;
}

.downloadApkBtn.desktopbtn {
  right: 3% !important;
}

.downloadApkBtn.mobilebtn {
  right: 5% !important;
}
/* ./ General Styling */

/* Transition Styling*/
.transition3ms {
  transition: 0.3s ease !important;
}

.transition5ms {
  transition: 0.5s ease !important;
}

/* ./ Transition Styling */

/* Margin Styling */
.mt-10vh {
  margin-top: 10vh !important;
}
/* ./ Margin Styling */

/* Padding Styling */
.pt-10vh {
  padding-top: 10vh !important;
}

.pb-20px {
  padding-bottom: 20px !important;
}
.pb-25px {
  padding-bottom: 25px !important;
}
.pb-30px {
  padding-bottom: 30px !important;
}
.pb-35px {
  padding-bottom: 35px !important;
}
.pb-40px {
  padding-bottom: 40px !important;
}
.pb-45px {
  padding-bottom: 45px !important;
}
.pb-50px {
  padding-bottom: 50px !important;
}
.pb-55px {
  padding-bottom: 55px !important;
}
.pb-60px {
  padding-bottom: 60px !important;
}
.pb-65px {
  padding-bottom: 65px !important;
}
.pb-70px {
  padding-bottom: 70px !important;
}
.pb-75px {
  padding-bottom: 75px !important;
}
.pb-80px {
  padding-bottom: 80px !important;
}
.pb-85px {
  padding-bottom: 85px !important;
}
.pb-90px {
  padding-bottom: 90px !important;
}

.pt-20px {
  padding-top: 20px !important;
}
.pt-25px {
  padding-top: 25px !important;
}
.pt-30px {
  padding-top: 30px !important;
}
.pt-35px {
  padding-top: 35px !important;
}
.pt-40px {
  padding-top: 40px !important;
}
.pt-45px {
  padding-top: 45px !important;
}
.pt-50px {
  padding-top: 50px !important;
}
.pt-55px {
  padding-top: 55px !important;
}
.pt-60px {
  padding-top: 60px !important;
}
.pt-65px {
  padding-top: 65px !important;
}
.pt-70px {
  padding-top: 70px !important;
}
.pt-75px {
  padding-top: 75px !important;
}
.pt-80px {
  padding-top: 80px !important;
}
.pt-85px {
  padding-top: 85px !important;
}
.pt-90px {
  padding-top: 90px !important;
}

/* ./ Padding Styling */

/* Theme - Background - Color Styling */
.bgBlackTransparent {
  background: rgba(0, 0, 0, 0.5);
}

.border-thin-theme-orange {
  border: 2px solid #e75b1e !important;
}

.border-theme-orange {
  border: 3px solid #e75b1e !important;
}

.textshadow-yellow {
  text-shadow: 0 5px 15px #e7b739;
}

.text-danger {
  color: #dc3545 !important;
}

.bgcover {
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.color-theme-yellow {
  color: #e7b739 !important;
}

.color-theme-orange {
  color: #e75b1e !important;
}

.color-theme-brownabuali {
  color: #ceaf86 !important;
}

.bg-theme-yellow {
  background-color: #e7b739 !important;
}

.bg-theme-orange {
  background-color: #e75b1e !important;
}

.bg-theme-brownabuali {
  background-color: #ceaf86 !important;
}

.bg-theme-orange2 {
  background-color: #6b2a0e !important;
}

/* Animation Element Styling */
.animateRotate {
  animation: rotating 10s forwards alternate ease-out infinite;
}

.conCardMenu:hover img.animateRotateOnHover {
  animation: rotating 10s forwards alternate ease-out infinite;
}

.animateShadowThemeYellow {
  animation: shadowYellowAnimation 4s ease infinite alternate-reverse forwards;
}

/* Button Styling */
.btn-theme-orange {
  background: #e75b1e !important;
  color: white !important;
}

.btn-theme-light-orange {
  background: #ffd480 !important;
}

.btn-outline-theme-orange,
.btn-outlined-theme-orange {
  border: 1px solid #e75b1e;
  background: transparent;
  color: #e75b1e;
  transition: 0.3s ease-in-out;
}

.btn-outline-theme-orange:hover {
  background: #e75b1e !important;
  border: 1px solid #e75b1e;
  color: white !important;
}

.btn-theme-orange-onactive {
  border: 1px solid #e75b1e !important;
  background: transparent;
  color: #e75b1e;
  transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.btn-theme-orange-onactive:active {
  background: #e75b1e !important;
  border: 1px solid #e75b1e;
  color: white !important;
}

.mypillsbutton {
  position: relative;
  border-radius: 30px;
  background: transparent;
  border: 0.5px solid rgba(0, 0, 0, 0.7);
  padding: 10px;
  text-align: center;
  overflow: hidden;
}

.mypillsbutton::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  background: #e75b1e;
  border: 0.5px solid rgba(0, 0, 0, 0.7);
  padding: 10px;
  text-align: center;
  transition: 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
  transform: translateX(-100%);
  z-index: 100;
}

.mypillsbutton:hover::before {
  transform: translateX(0);
}

/* Design Card */
.conCardMenu {
  position: relative;
  border-radius: 10px;
  transition: 0.5s ease-in-out;
  background: rgba(0, 0, 0, 0.8);
  min-width: 100px;
  min-height: 350px;
  padding: 10px;
  overflow: hidden;
  cursor: pointer;
  /* border: 2px solid rgba(231, 91, 30, 0.7); */
  border: 2px solid #e75b1e;
}

.conCardMenu.desktop {
  width: 270px !important;
}

.conCardMenu.mobile {
  width: 170px !important;
}

.conCardMenu img {
  border: 8px solid rgba(0, 0, 0, 0.5);
  border-radius: 50%;
}

.conCardMenu .bgwaves,
.conCardMenu .bgwaves2 {
  position: absolute;
  width: 120%;
  height: 120%;
  left: 50%;
  transform: translateX(-50%);
  top: -70%;
  border-radius: 0 0 300px 300px;
  transition: 0.2s ease-in-out;
  background: rgba(0, 0, 0, 1);
}

.conCardMenu .bgwaves2 {
  background: rgba(231, 91, 30, 1);
  top: -130%;
}

.conCardMenu:hover .bgwaves {
  width: 130%;
  height: 130%;
  top: 0%;
}

.conCardMenu:hover .bgwaves2 {
  top: -86%;
}

.cartbtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 106 !important;
}

.btnmenusidebar {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100 !important;
}

.badgecart {
  position: absolute !important;
  top: -3px;
  right: -3px;
  font-size: 10px;
  border-radius: 50%;
  aspect-ratio: 1 / 1 !important;
  min-width: 15px;
  padding: 4px !important;
}

.mycardImgTopDescriptionBottom {
  position: relative;
  border-radius: 20px;
  transition: 0.5s ease-in-out;
  background: rgba(0, 0, 0, 1);
  min-width: 100px;
  height: 350px;
  padding: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #e75b1e;
}

.mycardImgTopDescriptionBottom.desktop {
  width: 300px;
}

.mycardImgTopDescriptionBottom.mobile {
  width: 200px;
}

.mycardImgTopDescriptionBottom .mycardheader {
  width: 100%;
  overflow: hidden;
  flex-grow: 7; /* Ini sperti kasih height 70% dari parenntya */
}

.mycardImgTopDescriptionBottom .mycardfooter {
  width: 100%;
  flex-grow: 3; /* Ini sperti kasih height 30% dari parenntya */
  overflow: hidden;
}

/* Cursor Style */
.pointer-ring {
  position: fixed;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  transition: width 0.3s, height 0.3s;
  border: 2px solid #e7b739;
  z-index: 112;
  transform: translate(-50%, -50%);
  left: -25px;
  top: -25px;
  pointer-events: none;
}

.pointer-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e75b1e;
  /* transition: 0.3s; */
  /* border: 1px solid #e75b1e; */
  z-index: 113;
  position: fixed;
  left: -12px;
  top: -12px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* .firstpage {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

} */

/* Font Styling */
.ff-publicsans,
.ff-publicsans * {
  font-family: "PublicSansKu", Arial, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif !important;
}

.ff-montserrat,
.ff-montserrat * {
  font-family: "Montserratku", Arial, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif !important;
}

.ff-lobster,
.ff-lobster * {
  font-family: "Lobsterku", Arial, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif !important;
}

.ff-nautilus,
.ff-nautilus * {
  font-family: "Nautilus", Arial, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif !important;
}

.ff-publicsans2 {
  font-family: "PublicSansKu", Arial, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif;
}

.ff-montserrat2 {
  font-family: "Montserratku", Arial, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif;
}

.ff-lobster2 {
  font-family: "Lobsterku", Arial, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
}

.ff-nautilus2 {
  font-family: "Nautilus", Arial, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
}

.font-unset {
  font-family: unset;
}
/* ./ Font Styling */

/* Border Radius or Rounded Styling */
.more-rounded {
  border-radius: 50px;
}

.rounded-3px {
  border-radius: 3px;
}

.rounded-5px {
  border-radius: 5px;
}

.rounded-10px {
  border-radius: 10px;
}

.rounded-11px {
  border-radius: 11px;
}

.rounded-12px {
  border-radius: 12px;
}

.rounded-13px {
  border-radius: 13px;
}

.rounded-14px {
  border-radius: 14px;
}

.rounded-15px {
  border-radius: 15px;
}

.rounded-16px {
  border-radius: 16px;
}

.rounded-17px {
  border-radius: 17px;
}

.rounded-18px {
  border-radius: 18px;
}

.rounded-19px {
  border-radius: 19px;
}

.rounded-20px {
  border-radius: 20px;
}

.rounded-30px {
  border-radius: 30px;
}

.rounded-40px {
  border-radius: 40px;
}
/* ./ Border Radius or Rounded Styling */

/* Transform Styling */
.rotateX-180deg {
  transform: rotateY(180deg);
}
/* ./Transform Styling */

/* Z-index Styling */
.zindex-80 {
  z-index: 80;
}

.zindex-81 {
  z-index: 81;
}

.zindex-82 {
  z-index: 82;
}

.zindex-83 {
  z-index: 83;
}

.zindex-84 {
  z-index: 84;
}

.zindex-85 {
  z-index: 85;
}

.zindex-86 {
  z-index: 86;
}

.zindex-87 {
  z-index: 87;
}

.zindex-88 {
  z-index: 88;
}

.zindex-89 {
  z-index: 89;
}

.zindex-90 {
  z-index: 90;
}

.zindex-91 {
  z-index: 91;
}

.zindex-92 {
  z-index: 92;
}

.zindex-93 {
  z-index: 93;
}

.zindex-94 {
  z-index: 94;
}

.zindex-95 {
  z-index: 95;
}

.zindex-96 {
  z-index: 96;
}

.zindex-97 {
  z-index: 97;
}

.zindex-98 {
  z-index: 98;
}

.zindex-99 {
  z-index: 99;
}

.zindex-100 {
  z-index: 100;
}

.zindex-101 {
  z-index: 101;
}

.zindex-102 {
  z-index: 102;
}

.zindex-103 {
  z-index: 103;
}

.zindex-104 {
  z-index: 104;
}

.zindex-105 {
  z-index: 105;
}

.zindex-106 {
  z-index: 106;
}

.zindex-107 {
  z-index: 107;
}

.zindex-108 {
  z-index: 108;
}

.zindex-109 {
  z-index: 109;
}

.zindex-110 {
  z-index: 110;
}
/* ./Z-index Styling */

/* Design Table Card Styling */
.designTable1 {
  aspect-ratio: 1 / 1;
  /* background-color: red; */
  position: relative;
}

.designTable1 .chair1 {
  position: absolute;
  width: 10px;
  height: 70%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.designTable1 .chair2 {
  position: absolute;
  width: 70%;
  height: 10px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.designTable1 .chair3 {
  position: absolute;
  width: 10px;
  height: 70%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.designTable1 .chair4 {
  position: absolute;
  width: 70%;
  height: 10px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.designTable1 .centertable {
  position: absolute;
  width: 60%;
  height: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.designTable2 {
  aspect-ratio: 16 / 9;
  /* background-color: red; */
  position: relative;
}

.designTable2 .chair1 {
  position: absolute;
  width: 10px;
  height: 70%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.designTable2 .chair2 {
  position: absolute;
  width: 35%;
  height: 10px;
  top: 0;
  left: 10%;
}

.designTable2 .chair3 {
  position: absolute;
  width: 35%;
  height: 10px;
  top: 0;
  right: 10%;
}

.designTable2 .chair4 {
  position: absolute;
  width: 10px;
  height: 70%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.designTable2 .chair5 {
  position: absolute;
  width: 35%;
  height: 10px;
  bottom: 0;
  left: 10%;
}

.designTable2 .chair6 {
  position: absolute;
  width: 35%;
  height: 10px;
  bottom: 0;
  right: 10%;
}

.designTable2 .centertable {
  position: absolute;
  width: 70%;
  height: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.conDesignTable {
  padding: 10px;
  box-sizing: border-box;
  transition: 0.5s;
  border-radius: 20px;
  border: 2px solid transparent;
}

.conDesignTable.activetable {
  background: red;
  border: 2px solid blue;
}

.conDesignSelectingElement {
  padding: 10px;
  box-sizing: border-box;
  transition: 0.5s;
  border-radius: 20px;
  border: 2px solid transparent;
}

.conDesignSelectingElement.activeSelectingElement {
  background: red;
  border: 2px solid blue;
}
/* ./Design Table Card Styling */

/* Animation */
@keyframes slideShine {
  0% {
    left: 0;
  }

  40% {
    left: 120%;
  }

  60% {
    left: 120%;
  }

  100% {
    left: 120%;
  }
}

@keyframes rotating {
  0% {
    transform: rotate(0);
  }

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

@keyframes shadowYellowAnimation {
  0% {
    box-shadow: 5px 0 0px #e7b739;
  }
  25% {
    box-shadow: 0 5px 0px #e7b739;
  }
  50% {
    box-shadow: -5px 0 0px #e7b739;
  }
  75% {
    box-shadow: 0 -5px 0px #e7b739;
  }
  100% {
    box-shadow: 5px 0 0px #e7b739;
  }
}