/* Custom Color */
:root {
    --cc-primedblue-subtle:#8daada;
    --cc-primedblue:#00173F;
    --cc-primedblue-darker:#00102c;
    --cc-primedblue-darkest:#00091a;
    
    --cc-lgslate-gray:#363636;
    --cc-slate-gray:#252525;

    --cc-primeblue:#1F2E6C;
    --cc-primeblue-darker:#15225a;
    --cc-primeblue-darkest:#111c50;
    
    --cc-yellow-light:#ffd117;
    --cc-yellow:#F4C501;
    --cc-yellow-darker:#FFB701;
    --cc-yellow-darkest:#f7b100;
    
    --cc-yellow-scrollbar:#ffb7017a;
    
    --cc-primelight:#ffffff;

  }

  /* Custom Nav Class Admin */

  .nav-adm {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--cc-primelight);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-disabled-color: var(--bs-secondary-color);
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-link-adm {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--cc-primelight);
    text-decoration: none;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

.nav-pills-adm {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: var(--cc-primedblue);
    --bs-nav-pills-link-active-bg: var(--cc-primelight);
}

.nav-pills-adm .nav-link-adm.active{
    color: var(--bs-nav-pills-link-active-color);
    background-color: var(--bs-nav-pills-link-active-bg);
}

.nav {
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--cc-primedblue-darkest);
  --bs-nav-link-hover-color: var(--cc-primeblue);
  --bs-nav-link-disabled-color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-underline {
  --bs-nav-underline-gap: 1rem;
  --bs-nav-underline-border-width: 0.2rem;
  --bs-nav-underline-link-active-color: var(--cc-primeblue);
  gap: var(--bs-nav-underline-gap);
}

/* Custom Nav Class Admin End */

/* Custom Button */

.btn-custom {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-yellow {
  --bs-btn-color: var(--cc-primedblue-darker);
  --bs-btn-bg: var(--cc-yellow);
  --bs-btn-border-color: var(--cc-yellow-darker);
  --bs-btn-hover-color: var(--cc-primedblue-darkest);
  --bs-btn-hover-bg: var(--cc-yellow-darker);
  --bs-btn-hover-border-color: var(--cc-yellow-darkest);
  --bs-btn-focus-shadow-rgb: 130,138,145;
  --bs-btn-active-color: var(--cc-primedblue-darkest);
  --bs-btn-active-bg: var(--cc-yellow-darkest);
  --bs-btn-active-border-color: var(--cc-yellow-darkest);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}

.btn-slate-dblue {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-focus-shadow-rgb: 130,138,145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--cc-primedblue-subtle);
  --bs-btn-active-border-color: #51585e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}

.btn-slate {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-focus-shadow-rgb: 130,138,145;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: #e8e8e8;
  --bs-btn-active-border-color: #51585e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}


.btn-outline-yellow {
  --bs-btn-color: var(--cc-primedblue);
  --bs-btn-border-color: var(--cc-yellow);
  --bs-btn-hover-color: var(--cc-primedblue);
  --bs-btn-hover-bg: var(--cc-yellow);
  --bs-btn-hover-border-color: var(--cc-yellow-darker);
  --bs-btn-focus-shadow-rgb: 33,37,41;
  --bs-btn-active-color: var(--cc-primedblue);
  --bs-btn-active-bg: var(--cc-yellow-darker);
  --bs-btn-active-border-color: var(--cc-yellow-darkest);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--cc-primedblue);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--cc-primedblue);
  --bs-gradient: none;
}

.btn-lgyellow {
  --bs-btn-color: var(--cc-primedblue-darker);
  --bs-btn-bg: var(--cc-yellow-light);
  --bs-btn-border-color: var(--cc-yellow);
  --bs-btn-hover-color: var(--cc-primedblue-darkest);
  --bs-btn-hover-bg: var(--cc-yellow);
  --bs-btn-hover-border-color: var(--cc-yellow-darker);
  --bs-btn-focus-shadow-rgb: 130,138,145;
  --bs-btn-active-color: var(--cc-primedblue-darkest);
  --bs-btn-active-bg: var(--cc-yellow-darker);
  --bs-btn-active-border-color: var(--cc-yellow-darker);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}

.btn-dblue {
  --bs-btn-color: var(--cc-primelight);
  --bs-btn-bg: var(--cc-primeblue);
  --bs-btn-border-color: var(--cc-primeblue-darker);
  --bs-btn-hover-color: var(--cc-primelight);
  --bs-btn-hover-bg: var(--cc-primeblue-darker);
  --bs-btn-hover-border-color: var(--cc-primeblue-darkest);
  --bs-btn-focus-shadow-rgb: 130,138,145;
  --bs-btn-active-color: var(--cc-primelight);
  --bs-btn-active-bg: var(--cc-primeblue-darkest);
  --bs-btn-active-border-color: var(--cc-primeblue-darkest);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}

.btn-outline-dblue {
  --bs-btn-color: var(--cc-primedblue);
  --bs-btn-border-color: var(--cc-primedblue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cc-primedblue);
  --bs-btn-hover-border-color: var(--cc-primedblue);
  --bs-btn-focus-shadow-rgb: 33,37,41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--cc-primedblue);
  --bs-btn-active-border-color: var(--cc-primedblue-darkest);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--cc-primedblue);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--cc-primedblue);
  --bs-gradient: none;
}

.btn-monochrome-dblue {
  --bs-btn-color: var(--cc-primedblue);
  --bs-btn-bg: var(--cc-primedblue-subtle);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cc-primedblue);
  --bs-btn-hover-border-color: var(--cc-primedblue);
  --bs-btn-focus-shadow-rgb: 33,37,41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--cc-primedblue);
  --bs-btn-active-border-color: var(--cc-primedblue-darkest);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--cc-primedblue);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--cc-primedblue);
  --bs-gradient: none;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

/* Custom Button End */

.hovered {
  position: relative;
  display: inline-block;
  font-size: 20px;
  color: #fff;
  transition: color 0.3s ease; /* Efek perubahan warna saat hover */
}

.hovered:before {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--cc-yellow-darker); /* Ganti dengan warna yang diinginkan */
  transition: width 0.3s ease; /* Animasi perubahan panjang underline */
}

.hovered:hover:before {
  width: 250px; /* Panjang underline saat hover */
}

/* Custom Background */

.bg-lgyellow {
  --bs-bg-opacity: 1;
  background-color: var(--cc-yellow-light)!important;
  color: var(--cc-primeblue-darkest)!important;
}

.bg-yellow {
  --bs-bg-opacity: 1;
  background-color: var(--cc-yellow)!important;
  color: var(--cc-primeblue-darkest)!important;
}

.bg-dblue {
  --bs-bg-opacity: 1;
  background-color: var(--cc-primeblue)!important;
  color: var(--cc-primelight)!important;
}

.bg-slate-gray {
  --bs-bg-opacity: 1;
  background-color: var(--cc-slate-gray)!important;
  color: var(--cc-primelight)!important;
}

.bg-lgslate-gray {
  --bs-bg-opacity: 1;
  background-color: var(--cc-lgslate-gray)!important;
  color: var(--cc-primelight)!important;
}

/* Custom Background End */

/* .quiz-container {
  margin-top: 66px;
  margin-left: 300px;
} */

/* Custom Pagination */
.pagination-yellow {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--cc-primedblue);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: var(--bs-border-width);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-border-radius: var(--bs-border-radius);
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-bg: var(--bs-secondary-bg);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-pagination-active-color: var(--cc-primedblue);
  --bs-pagination-active-bg: var(--cc-yellow);
  --bs-pagination-active-border-color: var(--cc-yellow-darkest);
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  display: flex;
  padding-left: 0;
  list-style: none;
}
/* Custom Pagination End */

.collapse.show{
  visibility: visible;
}


/* Card Hover-to-Reveal Effect */
.value-card {
    min-height: 200px;
}

.value-card .back {
    display: none;
}

@media (min-width: 992px) {
    .value-card {
        min-height: 200px;
    }
    
    .value-card .front,
    .value-card .back {
        position: absolute;
    }

    .value-card .back {
        display: flex;
        opacity: 0;
    }

    .value-card:hover .front {
        opacity: 0;
    }

    .value-card:hover .back {
        opacity: 1;
    }
}

/* Custom Text Display */

.display-7 {
    font-size: 2rem;
}

.display-8 {
    font-size: 1.5rem;
}

/* Custom Text Display End */

/* Custom Carousel Styles */
#testimonialCarousel {
    position: relative;
    overflow: hidden;
}

#testimonialCarousel .carousel-control-prev,
#testimonialCarousel .carousel-control-next {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    opacity: 0.8;
    line-height: 0;
}

#testimonialCarousel .carousel-control-prev {
    left: 12px;
}

#testimonialCarousel .carousel-control-next {
    right: 12px;
}

#testimonialCarousel .carousel-control-prev-icon,
#testimonialCarousel .carousel-control-next-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
}

#testimonialCarousel .carousel-indicators {
    margin-bottom: 0;
}

#testimonialCarousel .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    opacity: 0.5;
}

#testimonialCarousel .carousel-indicators .active {
    opacity: 1;
    background-color: var(--cc-yellow);
}

/* Custom Carousel Styles End */

/* Sticky Filter Button Styles */
.sticky-filter-btn {
  position: fixed;
  left: 0;
  top: 2 0%;
  transform: translateY(-50%);
  z-index: 30;
}

.sticky-filter-btn .btn {
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0 24px 24px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.sticky-filter-btn .btn i {
  font-size: 20px;
  line-height: 0;
}

/* Sticky Filter Button Styles End */