:root {

   --z-bg-primary: #0068E1;
   /* --z-bg-primary: #0194F3; */
   /* --z-bg-primary: #003B95; */
   /* --z-bg-primary: #006CE4; */
   /* --z-bg-primary: #0194F3; */
   --z-bg-secondary: #c1c1c1;
   /* --z-bg-secondary: #EF7042; */
   --z-bg-light: #F4F7FE;

   --z-bg-primary-hover: #0870CD;

   --z-text-primary: var(--z-bg-primary);
   --z-text-secondary: var(--z-bg-secondary);
   --z-text-dark: #333333;
   --z-text-white: #ffffff;
   --z-text-light: #f0f0f0;
   --z-text-link: #0699fa;
   --z-text-link-hover: #0194F3;

   --z-font-size: 16px;

   --darker: 70%;
}

body {
   font-family: "Inter", serif;
   font-optical-sizing: auto;
   font-size: var(--z-font-size);
   line-height: 21px;
   font-style: normal;
}

main {
   padding-top: 50px;
   min-height: calc(100vh - 50px);
}

a {
   text-decoration: none;
   color: var(--z-text-link);
}

a:hover {
   color: var(--z-text-link-hover);
}

.row {
   scroll-margin-top: 100px;
}

/* Navbar */
.navbar .nav-pills .nav-item .nav-link {
   font-weight: 500;
   color: var(--z-text-dark);
   margin: 0 5px;
   padding: 10px 15px;
   border-radius: 5px;
}

@media (max-width: 768px) {
   .navbar .nav-pills .nav-item .nav-link {
      margin: 3px 0px;
   }
}

.navbar .nav-pills .nav-link:hover {
   background-color: var(--z-bg-light)
}

.navbar .nav-pills .nav-link.active {
   background-color: var(--z-bg-light);
   font-weight: 600;
}

.navbar .dropdown-toggle::after {
   display: none;
}

.navbar .dropdown-toggle i {
   font-size: 12px;
}


/* 
.navbar .dropdown-toggle {
   position: relative;
   padding-right: 35px !important;
}

.navbar .dropdown-toggle::before {
   content: "\f078"; 
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   position: absolute;
   right: 15px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 12px;
} */


/* Bootsrap background color */
.bg-primary {
   background-color: var(--z-bg-primary) !important;
}

.bg-secondary {
   background-color: var(--z-bg-secondary) !important;
}

.bg-light {
   background-color: var(--z-bg-light) !important;
}



/* Bootstrap button */
.btn {
   /* border: none; */
   padding: 8px 16px;
   border-radius: 5px;
   font-weight: 600;
   font-size: calc(var(--z-font-size) - 1px);
}

.btn-primary {
   background-color: var(--z-bg-primary) !important;
   border: none;
}

.btn-primary:hover {
   background-color: var(--z-bg-primary-hover) !important;
}

.btn-secondary {
   background-color: var(--z-bg-secondary) !important;
   color: var(--z-text-dark) !important;
   border: none;
}

.booking-consultation {
   font-size: 14px;
   padding: 7px 12px;
}

.booking-consultation-closed {
   font-size: 14px;
   padding: 7px 12px;
}

/* Bootstrap text color */
.text-primary {
   color: var(--z-bg-primary) !important;
}

.text-secondary {
   color: var(--z-bg-secondary) !important;
}

.text-consultation-price { 
   color: #FF5E1F;
}

/* Bootstrap Custom Toggler */
.custom-toggler {
   background-color: transparent;
   border-color: rgb(255, 255, 255, 1);
}

.custom-toggler i {
   font-size: 24px;
   /* Atur ukuran */
   color: #333;
   /* Ubah warna sesuai kebutuhan */
}


/* Footer */
footer {
   background-color: #1C2930;
   color: var(--z-text-light);
   font-size: 14px;
}

footer .footer-title {
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 15px;
   color: var(--z-text-light);
}

footer p {
   text-decoration: none;
   font-weight: 500;
   color: #9AA0A3;
}

footer ul li {
   margin-bottom: 8px;
}

footer li a {
   font-weight: 500;
   color: #9AA0A3;
}

footer li a:hover {
   color: var(--z-text-white);
   text-decoration: underline;
}

/* Schedule box */
.card-schedule-home {
   margin-top: -220px;
}

/* ---------------- */

.schedule-date-container>.row>.col>.schedule-date-item {
   /* background-color: #c9dfff; */
   background-color: var(--z-bg-light);
   border: 0;
   line-height: 20px;
   padding: 8px 3px;
   font-weight: 600;
}

.schedule-date-container>.row>.col>.schedule-date-item:hover {
   /* background-color: #0a58ca; */
   background-color: var(--z-text-primary);
   color: #fff;
}

.schedule-date-container>.row>.col>.schedule-date-item:focus,
.schedule-date-container>.row>.col>.active {
   /* background-color: #0a58ca; */
   background-color: var(--z-bg-primary);
   color: var(--z-text-white);
}

.schedule-date-list {
   overflow: scroll;
}

/* Define the scrollbar style */
.schedule-date-list::-webkit-scrollbar {
   width: 5px;
   height: 5px;
}

/* Define the thumb style */
.schedule-date-list::-webkit-scrollbar-thumb {
   background: var(--z-bg-secondary);
   border-radius: 3px;
}

/* Define the track style */
.schedule-date-list::-webkit-scrollbar-track {
   background-color: #e0e0e0;
   border: 1px solid #e0e0e0;
}

/* -------------- */

.schedule-container {
   min-height: 400px;
   max-height: 400px;
   overflow: scroll; 
}

/* Define the scrollbar style */
.schedule-container::-webkit-scrollbar {
   width: 5px;
   height: 5px;
}

/* Define the thumb style */
.schedule-container::-webkit-scrollbar-thumb {
   background: var(--z-bg-secondary);
   border-radius: 3px;
}

/* Define the track style */
.schedule-container::-webkit-scrollbar-track {
   background-color: #e0e0e0;
   border: 1px solid #e0e0e0;
}

.schedule-container>.row>.col-4>.schedule-date {
   /* background-color: #c9dfff; */
   background-color: var(--color-blue-0);
   border: 0;
   line-height: 20px;
   padding: 8px 3px;
   font-weight: 600;
}

.schedule-container>.row>.col-4>.schedule-date:hover {
   /* background-color: #0a58ca; */
   background-color: var(--color-navy-100);
   color: #fff;
}

.schedule-container>.row>.col-4>.schedule-date:focus,
.schedule-container>.row>.col-4>.active {
   /* background-color: #0a58ca; */
   background-color: var(--color-navy-100);
   color: var(--color-light);
}

.schedule-item{
   border: 1px solid var(--z-bg-light);
}
.schedule-item:hover{
   transition: 0.3s;
   border: 1px solid var(--z-bg-primary);
}



/* faq-box */
.faq-box .accordion-item {
   margin-bottom: 15px;
   border-radius: 5px;
   overflow: hidden;
}

.faq-box .accordion-button:not(.collapsed) {
   color: var(--bs-accordion-active-color);
   background-color: var(--bs-accordion-active-bg);
   box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)
}

/** Section */  
.section{
   padding: 80px 0;
}

.card-header-primary {
   background: url('../images/bg-card-header-primary.webp');
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

.card-header-secondary {
   background: url('../images/bg-card-header-secondary.webp');
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

.fs-12 {
   font-size: 12px;
   line-height: 18px;
}
.fs-13 {
   font-size: 13px;
   line-height: 20px;
}
.fs-14 {
   font-size: 14px;
   line-height: 21px;
}

.placeholder {
   opacity: 0.4;
}