:root {
   --custom-color-1: #004b49;
   --custom-color-1-rgb: 0, 75, 73;
   --custom-color-2: #fd4f00;
   --custom-color-2-rgb: 253, 79, 0;
   --navbar-height: 80px;
   --navbrand-width: 175px;
}

@media (min-width: 576px) {
   :root {
      --navbrand-width: 210px;
   }
}

@media (min-width: 992px) {
   :root {
      --navbar-height: 100px;
      --navbrand-width: 300px;
   }
}

[data-bs-theme=light] {
   --default-color: #000000;
   --default-color-rgb: 0, 0, 0;
   --pedestal-top-bg: linear-gradient(135deg, #e6e6e8 10%, #f1f5f9 100%);
   --pedestal-body-bg: linear-gradient(to bottom, #e6e6e8 10%, transparent);
   --pedestal-shadow: rgba(0, 0, 0, 0.1);
}

[data-bs-theme=dark] {
   --default-color: #ffffff;
   --default-color-rgb: 255, 255, 255;
   --pedestal-top-bg: linear-gradient(135deg, #3d3d3d 0%, #2e2e2e 100%);
   --pedestal-body-bg: linear-gradient(to bottom, #2d2d2d 10%, transparent);
   --pedestal-shadow: rgba(0, 0, 0, 0.4);
}

.w-40 {
   width: 40%;
}

.w-60 {
   width: 60%;
}

.fs-title {
   font-size: clamp(2.5rem, 4vw, 4.5rem);
   line-height: 1;
}

.bg-body-secondary {
   background-color: rgba(var(--default-color-rgb), .025) !important;
}

.bg-body-tertiary {
   background-color: rgba(var(--default-color-rgb), .1) !important;
}

.text-custom-1 {
   color: var(--custom-color-1);
}

.text-custom-2 {
   color: var(--custom-color-2);
}

*::placeholder {
   color: inherit !important;
   opacity: .5 !important;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
   --bs-gutter-x: 2rem;
}

ul>li.vr:last-child,
ul>li.vr:last-of-type {
   display: none;
}

.link {
   color: inherit;
   text-decoration: none;
   opacity: .75;
}

.link:hover,
.link:focus,
.link.active {
   opacity: 1;
}

.link[target="_blank"]:hover,
.link[target="_blank"]:focus,
.link[target="_blank"].active {
   text-decoration: underline;
}

.border-invert {
   border-color: var(--bs-body-color) !important;
}

.btn-invert {
   background-color: var(--bs-body-color) !important;
   color: var(--bs-body-bg) !important;
}

.btn-outline-invert {
   color: var(--bs-body-color) !important;
   background-color: transparent;
   border-color: rgba(var(--bs-body-color-rgb), .5) !important;
}

.btn-outline-invert:hover,
.btn-outline-invert:focus,
.btn-outline-invert.active {
   color: var(--bs-body-bg) !important;
   background-color: var(--bs-body-color) !important;
   border-color: var(--bs-body-color) !important;
}

.btn-custom-1 {
   background-color: var(--custom-color-1);
   color: white;
}

.btn-custom-1:hover,
.btn-custom-1:focus,
.btn-custom-1.active {
   background-color: var(--custom-color-2);
   color: white;
}

.btn-custom-2 {
   background-color: var(--custom-color-2);
   color: white;
}

.btn-custom-2:hover,
.btn-custom-2:focus,
.btn-custom-2.active {
   background-color: var(--custom-color-1);
   color: white;
}

body {
   min-height: 100svh;
   display: flex;
   flex-direction: column;
   /* font-family: "Roboto", sans-serif !important; */
}

body.nav-open {
   overflow: hidden;
}

main {
   flex-grow: 1;
   overflow-x: hidden;
}

.text-bg-custom-1 {
   background-color: var(--custom-color-1);
   color: white;
}

.grid-cols-2-auto {
   grid-template-columns: repeat(2, auto);
}

.grid-cols-2 {
   grid-template-columns: repeat(2, 1fr);
}

*::placeholder {
   color: inherit !important;
   opacity: .5;
}

.section-banner {
   padding: calc(5rem + 2vw) 0;
}

.banner {
   position: relative;
}

.banner-title {
   font-size: clamp(2.75rem, 10vw, 10rem);
   color: var(--custom-color-2);
   font-weight: 900;
}

.banner-text {
   font-size: clamp(1.125rem, 3vw, 3rem);
   font-weight: 300;
}

.banner-media {
   aspect-ratio: 1/1;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}

@media (max-width: 575.98px) {
   .banner-media {
      width: 140%;
   }
}

.banner-images-wrapper {
   width: 100%;
   height: 50%;
   position: relative;
   z-index: 2;
}

.banner-images {
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   aspect-ratio: 1/1;
}

.pedestal {
   width: 100%;
   height: 50%;
}

.pedestal-wrapper {
   position: relative;
   width: 125%;
   height: 100%;
   left: 50%;
   transform: translateX(-50%);
}

.pedestal-top {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 50%;
   background: var(--pedestal-top-bg);
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.15);
   box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.05);
   z-index: 1;
}

.pedestal-body {
   position: absolute;
   top: 25%;
   left: 0;
   width: 100%;
   height: 150%;
   background: var(--pedestal-body-bg);
   border-radius: 0 0 50% 50% / 0 0 20px 20px;
   z-index: 0;
}

@media (max-width: 575.98px) {
   .banner-sosmed svg {
      width: 21px;
      height: 21px;
   }
}


/* ==================================== NAVBAR */
.toggle-language .btn {
   color: inherit !important;
}

.toggle-language .btn.active {
   opacity: .5 !important;
   pointer-events: none !important;
}

.navbar {
   min-height: var(--navbar-height);
}

.navbar-brand {
   max-width: var(--navbrand-width);
}

.menu {
   position: fixed;
   top: calc(calc(var(--navbar-height) - 56px) / 2);
   right: .5rem;
   z-index: 1030;
}

@media (min-width: 768px) {
   .menu {
      right: calc(50% - calc(720px / 2));
   }
}

@media (min-width: 992px) {
   .menu {
      right: calc(50% - calc(960px / 2));
   }
}

@media (min-width: 1200px) {
   .menu {
      right: calc(50% - calc(1140px / 2));
   }
}

@media (min-width: 1400px) {
   .menu {
      right: calc(50% - calc(1320px / 2));
   }
}

.menu-wrapper {
   transition: box-shadow .2s ease;
}

.menu-wrapper.menu-open {
   box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.menu-wrapper .btn {
   color: white;
}

.header-toggle-btn {
   --header-toggle-btn-width: 40px;
   background-color: rgba(255, 2552, 255, .125);
   color: white !important;
   border-width: 0;
   padding: .25rem;
   width: var(--header-toggle-btn-width);
   height: var(--header-toggle-btn-width);
   display: flex;
   justify-content: center;
   align-items: center;
}

.toggle-menu-collapse .icon-bars {
   display: none;
}

.toggle-menu-collapse .icon-xmark {
   display: inline;
}

.toggle-menu-collapse.collapsed .icon-bars {
   display: inline;
}

.toggle-menu-collapse.collapsed .icon-xmark {
   display: none;
}


/* ==================================== FOOTER */
.footer-title {
   font-size: 1.25em !important;
}

.main-footer-section {
   min-width: 280px;
   max-width: 300px;
}

@media (min-width: 1200px) {
   .main-footer-section {
      margin-right: auto;
   }
}

.newsletter-footer-section {
   min-width: 320px;
   max-width: 380px;
}

@media (min-width: 768px) {
   .footer-brands-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 2rem;
   }
}


/* tab navigation */
.nav-pills .nav-link {
   color: white;
   font-weight: 600;
   white-space: nowrap;
}

.nav-pills .nav-link.active {
   background-color: var(--custom-color-1);
   color: white;
}

.brands-logo img {
   max-width: 120px;
   max-height: 80px;
}

@media (min-width: 992px) {
   .brands-logo img {
      max-width: 150px;
      max-height: 100px;
   }
}


/* rating */
.rating {
   display: flex;
   gap: .25rem;
}

.rating span {
   display: flex;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: solid 1px currentColor;
   position: relative;
   overflow: hidden;
}

.rating .half::before {
   content: '';
   width: 50%;
   height: 100%;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   background-color: currentColor;
}

.rating .full::before {
   content: '';
   width: 100%;
   height: 100%;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   background-color: currentColor;
}