:root {
    --white: rgba(255, 255, 255, 1);
    --cyan: rgba(4, 140, 170, 1)!important;
    --dark-grey: rgba(42, 42, 46, 1)!important;
    --grey: rgba(87, 87, 91, 1)!important;
    --smooth-grey: rgba(126, 126, 129, 1)!important;
    --light-grey: rgba(242, 242, 242, 1)!important;
    --blue: rgba(11, 81, 183, 1)!important;
    --light-blue: rgba(223, 240, 255, 1)!important;
    --fw400: 400;
    --fw500: 500;
    --fw600: 600;
    --fw700: 700;
    --fw800: 800;
    --nunito: "Nunito Sans", Sans-serif;
}

/* Color */
.white {color: var(--white)}
.dark {color: var(--dark-grey)!important}
.grey {color: var(--grey)}
.light-grey {color: var(--light-grey)}
.smooth-grey {color: var(--smooth-grey)}
.blue {color: var(--blue)}
.light-blue {color: var(--light-blue)}
.cyan {color: var(--cyan)!important}
.bg-transparent {color: transparent}

/* Typography */
.fw400 {font-weight: var(--fw400)}
.fw500 {font-weight: var(--fw500)}
.fw600 {font-weight: var(--fw600)}
.fw700 {font-weight: var(--fw700)}
.fw800 {font-weight: var(--fw800)}
.lg-text {font-size: 32px!important;;line-height: 42px!important}
.md-text {font-size: 28px!important;;line-height: 36px!important}
.md-text-m {font-size: 24px!important;;line-height: 32px!important}
.sm-text {font-size: 20px!important;line-height: 28px!important}
.xs-text {font-size: 16px!important;;line-height: 24px!important}
.xxs-text {font-size: 14px!important;;line-height: 20px!important}
.xxxs-text {font-size: 12px!important;;line-height: 18px!important}

/* Text Decorations */
.line-through {text-decoration: line-through}

/* Margins */
.my-24 {margin: 1.5rem 0!important}
.mb-8 {margin-bottom: .5rem!important}
.mb-10 {margin-bottom: .625rem!important}
.mb-16 {margin-bottom: 1rem!important}
.mb-20 {margin-bottom: 1.25rem!important}
.mb-24 {margin-bottom: 1.5rem!important}
.mb-32 {margin-bottom: 2rem!important}
.mb-42 {margin-bottom: 2.625rem!important}
.mb-56 {margin-bottom: 5.5rem!important}
.mb-65 {margin-bottom: 4.063rem!important}
.mt-16 {margin-top: 1rem!important}
.mt-24 {margin-top: 1.5rem!important}
.mt-32 {margin-top: 2rem!important}
.mt-56 {margin-top: 3.5rem!important}
.mt-100 {margin-top: 6.5rem!important}
.pb-50 {padding-bottom: 50px!important}
.pb-120 {padding-bottom: 120px!important}
.p-10 {padding: 10px!important}
.px-15 {
    padding-left: 15px!important;
    padding-right: 15px!important;
}
.px-24 {
    padding-left: 24px!important;
    padding-right: 24px!important;
}
.py-15 {
    padding-top: 15px!important;
    padding-bottom: 15px!important;
}
.py-33 {
    padding-top: 32px!important;
    padding-bottom: 32px!important;
}

/* Gap */
.gap-16 {gap: 16px}
.gap-32 {gap: 32px}
.gap-75 {gap: 75px}
.gap-100 {gap: 100px}

/* Flex */
.flex-20 {flex: 1 1 20%}
.flex-33 {flex: 1 1 33.3333%}
.flex-50 {flex: 1 1 50%}

/* Width */
.w-custom {width: 210px!important}

/* Border Radius */
.border-radius-12 {border-radius: .75rem}
.border-radius-16 {border-radius: 1rem}
.border-radius-24 {border-radius: 1.5rem}

/* Badge */
.badge {
    font-size: 12px;
    font-weight: var(--fw700);
    line-height: 18px;
    padding: 4px 6px;
    border-radius: .75rem;
}
.badge-grey {
    background-color: var(--light-grey);
    color: var(--grey);
}
.badge-blue {
    background-color: var(--light-blue);
    color: rgba(0, 63, 106, 1);
}

/* Buttons */
.white-btn,
.blue-btn {
    font-size: 16px;
    font-weight: var(--fw700);
    line-height: 24px;
    padding: 12px 16px;
    width: 100%;
}
.white-btn {
    background: var(--white);
    color: rgba(87, 87, 91, 1);
}
.white-btn:hover {
    color: rgba(87, 87, 91, .75);
}
.blue-btn {
    background: var(--cyan);
    color: var(--white)!important;
}
.btn-with-border {border: 1px solid rgba(188, 188, 189, 1)}
.btn-with-shadow {box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1)}

/* Width & Height */
.custom-width {width: calc(100% - 50px)}
.custom-height {min-height: 90px}

/* Shadows */
.box-shadow {box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.2)!important}

/* Columns */
.full-column {flex: 0 0 calc(100% - 16px)}
.column-third {flex: 0 0 calc(33.333% - 16px)}
.column-fourth {flex: 0 0 calc(25% - 16px)}
.column-half {flex: 0 0 calc(50% - 16px)}
.custom-column-half {flex: 0 0 calc(40% - 16px)}

/* Checkbox */
.form-check .form-check-label::before,
.form-check.radio .form-check-label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: 0;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background-color: var(--white);
    -webkit-transition: border 0.15sease-in-out, color 0.15sease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15sease-in-out, color 0.15sease-in-out;
}
.form-check.radio .form-check-label::before {
    border-radius: 50%;
}
.form-check .form-check-label::after,
.form-check.radio .form-check-label::after {
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 0;
    margin-left: 0;
    padding-left: 3px;
    padding-top: 1px;
    font-size: 11px;
    color: var(--white);
}
.form-check.radio .form-check-label::after {
    width: 9px;
    height: 9px;
    top: 6px;
    left: 4px;
    padding-top: 9px;
    border-radius: 50%;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  opacity: 0;
  z-index: 1;
}
.form-check input[type="checkbox"]:focus + label::before,
.form-check input[type="radio"]:focus + label::before {
  outline: none;
  outline-offset: 0;
}
.form-check input[type="checkbox"]:checked + label::after {
  font-family: "Font Awesome 5 Pro";
  content: "\f00c";
}
.form-check input[type="radio"]:checked + label::after {
    font-family: "Font Awesome 5 Pro";
    content: "\f111";
}
.form-check input[type="checkbox"]:disabled + label,
.form-check input[type="radio"]:disabled + label {
  opacity: 0.65;
}
.form-check input[type="checkbox"]:disabled + label::before,
.form-check input[type="radio"]:disabled + label::before {
  background-color: #eeeeee;
  cursor: not-allowed;
}
.checkbox-primary input[type="checkbox"]:checked + label::before, 
.checkbox-primary input[type="radio"]:checked + label::before {
    background-color: var(--cyan);
    border-color: var(--cyan);
}

.radio input[type=radio], 
.radio-inline input[type=radio] {
    position: absolute;
    margin-top: 4px \9;
    margin-left: -20px;
}
.radio-info input[type="radio"]:checked + label::before {
    border-color: var(--cyan);
}
.radio-info input[type="radio"]:checked + label::after {
    background-color: var(--cyan);
}
.radio input[type="radio"]:checked + label::after {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}


html {
  scroll-behavior: smooth;
}

.result-type-wrapper {gap: 30px}
.result-type-wrapper .result-items img {width: 150px}

.featured-tests .top-left {
    top: 45px;
    left: 65px;
}
.featured-tests .bottom-right {
    bottom: 10px;
    right: 0;
}
.featured-test-wrapper {
    margin-top: 1.5rem;
    gap: 24px;
}
.featured-test-wrapper .test-items {
    width: calc(33.33333% - 22px);
    min-height: 160px;
}
.featured-test-wrapper .test-items {
    position: relative;
    background-color: var(--white);
    padding: 16px 24px;
    gap: 24px;
}
.featured-test-wrapper .test-items svg {
    position: absolute;
    right: 23px;
}

/* Program */
.program .top-left {
    top: 200px;
    z-index: 1;
}
.program .wrapper-tabs .nav-pills .nav-link,
.program .wrapper-tabs .nav-pills .nav-link.active {
    font-size: 14px;
    font-weight: var(--fw700);
    line-height: 20px;
    margin-right: 8px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    border-radius: 100px;
}
.program .wrapper-tabs .nav-pills .nav-link {
    color: var(--grey);
    background-color: var(--white);
    border: 1px solid rgba(188, 188, 189, 1);
}
.program .wrapper-tabs .nav-pills .nav-link.active {
    color: var(--white);
    background-color: var(--cyan);
}
.program .show-banner .top-right {
    top: -50px;
    right: -130px;
    z-index: 1;
}
.swiper-wrapper {
    transition-timing-function: linear !important;
}
.swiperBootcamp .swiper-container,
.swiperShortCourse .swiper-container {
    padding: .5rem .75rem 1.25rem;
    min-height: 425px;
    margin-left: auto;
    margin-right: auto;
    overflow: var(--hidden);
    z-index: 1;
}
.swiperBootcamp .swiper-slide:first-child.swiper-slide-prev {
    left: -35px !important;
    margin-right: 30px !important;
}
.swiperBootcamp .swiper-slide:first-child:not(.swiper-slide-active) {
    left: 0!important;
    margin-right: 30px!important;
}
.swiperBootcamp .swiper-slide:not(:first-child).swiper-slide-prev {
    /* Gaya yang ingin diterapkan pada semua elemen dengan role="group" yang bukan swiper-slide-active */
    left: -35px !important;
    margin-right: 0 !important;
}
.swiperBootcamp .slide-items,
.swiperShortCourse .slide-items {
    position: relative;
    padding: 15px;
    background-color: var(--white);
    /*box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.2);*/
    min-height: calc(1000px - 95px);
}
.swiperBootcamp .slide-items .content ul,
.swiperShortCourse .slide-items .content ul {
    list-style: none;
    padding-left: 0;
}
.swiperBootcamp .slide-items .content ul li,
.swiperShortCourse .slide-items .content ul li {
    position: relative;
    font-size: 16px;
    line-height: 24px;
    color: var(--dark-grey);
    padding-left: 20px;
    margin-bottom: .5rem;
}
.swiperBootcamp .slide-items .content ul li::before,
.swiperShortCourse .slide-items .content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.4964 4.23431C13.8125 4.54673 13.8125 5.05327 13.4964 5.36569L7.02018 11.7657C6.70405 12.0781 6.19148 12.0781 5.87535 11.7657L2.63725 8.56569C2.32111 8.25327 2.32111 7.74673 2.63725 7.43431C2.95339 7.1219 3.46595 7.1219 3.78209 7.43431L6.44777 10.0686L12.3515 4.23431C12.6677 3.9219 13.1802 3.9219 13.4964 4.23431Z" fill="%2357575B"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}
.swiperBootcamp .slide-items .wrapper-button,
.swiperShortCourse .slide-items .wrapper-button {
    position: absolute;
    bottom: 1rem;
    transform: translate(-50%, 0);
    left: 50%;
    width: 88%;
    gap: 10px;
}
.swiperBootcamp .swiper-arrow-prev,
.swiperShortCourse .swiper-arrow-prev {
    left: -40px;
}
.swiperBootcamp .swiper-arrow-next,
.swiperShortCourse .swiper-arrow-next {
    right: -40px;
}
.modal .modal-body .btn-primary.disabled, 
.modal .modal-body .btn-primary:disabled {
    background-color: rgba(216, 216, 217, 1)!important;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    border: 0;
}
.modal .modal-dialog {
    width: 100%!important;
    max-width: 600px;
}
.modal .modal-body label {
    color: var(--dark-grey)!important;
}
.modal .modal-body .form-check-label {
    font-size: 14px;
    font-weight: var(--fw400)!important;
    line-height: 20px;
    color: var(--dark-grey)!important;
    margin-top: 2px;
    margin-left: 5px;
}
.modal .modal-body select option:hover {
    background-color: rgba(225, 249, 250, 1)!important;
}
.benefit-lists {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}
.benefit-lists li {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Program Series */
.program-series .top-left {
    top: 40px;
    left: 50px;
}
.program-series .bottom-right {
    bottom: 24px;
    right: 60px;
}
.program-series-item .step-counter {
    background-color: var(--blue);
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--white);
    margin-bottom: 6px;
}
.program-series-item .desc {
    background-color: var(--light-blue);
}

/* Location */
.location .bottom-right {
    bottom: -55px;
    right: -108px;
}
.location .wrap-elements .block-text .bottom-right {
    bottom: -88px;
    right: -20px;
}
.wrap-location .item-location {
    position: relative;
    background-color: var(--white);
    padding: 16px 24px;
    margin-bottom: 24px;
    z-index: 1;
}

/* Testimonial */
.testimonial .testimonial-photo {
    top: -30px!important;
}
.testimonial .testimonial-user-wrapper {
    margin-top: 40px!important;
}
.testimonial .wrap-testimonial .quote {
    top: -1.25rem;
    right: 2rem;
    margin-bottom: 0.313rem;
    background-image: url("data:image/svg+xml,%3Csvg width='61' height='44' viewBox='0 0 61 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M61 4.87255C61 2.50106 59.5508 0.393066 55.9935 0.393066C51.1188 0.393066 45.1901 2.76455 41.2376 6.71704C36.3629 11.5918 33.4644 18.7062 33.4644 28.324V28.851C33.4644 37.9417 37.8121 43.6069 45.1901 43.6069C51.7775 43.6069 56.1253 38.9957 56.1253 32.8034V32.5399C56.1253 26.8747 51.514 22.9222 46.9028 21.7365C46.6393 15.4125 50.3283 10.8013 57.0475 9.22028C59.2873 8.69328 61 7.24403 61 4.87255ZM27.5356 4.87255C27.5356 2.50106 26.0864 0.393066 22.5292 0.393066C17.6544 0.393066 11.7257 2.76455 7.77322 6.71704C2.89849 11.5918 0 18.7062 0 28.324V28.851C0 37.9417 4.34773 43.6069 11.7257 43.6069C18.3132 43.6069 22.6609 38.9957 22.6609 32.8034V32.5399C22.6609 26.8747 18.0497 22.9222 13.4384 21.7365C13.1749 15.4125 16.8639 10.8013 23.5832 9.22028C25.8229 8.69328 27.5356 7.24403 27.5356 4.87255Z' fill='%230B51B7'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: contain;
    width: 3.813rem;
    height: 2.688rem;
}
.testimonial .wrap-testimonial {
    min-height: 200px!important;
}
.academyTestimonial .swiper-pagination-bullet {
    width: 40px;
    height: 8px;
    margin: 0 .35rem;
    border-radius: 4px;
    background-color: var(--light-grey)!important;
}
.academyTestimonial .swiper-pagination-bullet-active {
    background-color: var(--cyan)!important;
}
.modal-academy .modal-dialog,
.modal-trial .modal-dialog,
.modal-course .modal-dialog {
    margin: 0 auto;
    padding: 10px;
}
.modal-academy .testimonial-user-wrapper {margin-top: 0!important}
.modal-academy .testimonial-photo {top: 5px!important}

/* Banner Test */
.banner-test {
    overflow: inherit;
    padding: 145px 0 40px;
}
.banner-test-wrapper {
    position: relative;
    gap: 2rem;
    z-index: 999;
}
.banner-test-wrapper .block-image {
    position: relative;
    width: calc(40% - -22px)
}

.step-wrapper {
  margin-top: auto;
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}
.step-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.step-item::before {
  position: absolute;
  content: "";
  width: 100%;
  top: 20px;
  left: -50%;
  z-index: 2;
}

.step-item::after {
  position: absolute;
  content: "";
  border-bottom: 3px dashed rgba(216, 216, 217, 1);
  background-image: linear-gradient(90deg, #000, #000 85%, transparent 85%, transparent 100%);
  background-size: 20px 2px;
  width: 100%;
  top: 20px;
  left: 50%;
  z-index: 2;
}

.step-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ccc;
  color: var(--white);
  margin-bottom: 6px;
}

.step-item.active {
  font-weight: bold;
}

.step-item.completed .step-counter {
  background-color: var(--blue);
}

.step-item.completed::after {
    position: absolute;
    content: "";
    height: 2px;
    background-image: linear-gradient(90deg, rgba(216, 216, 217, 1), rgba(216, 216, 217, 1) 75%, transparent 75%, transparent 100%);
    background-size: 20px 1px;
    border: none;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 3;
}

.step-item:first-child::before {
  content: none;
}
.step-item:last-child::after {
  content: none;
}

.hero-banner.bottom .top-left {
    z-index: 1;
}

.underline {position: relative}
.underline:before {
  content: "";
  position:relative;
  width:100%;
  height: 2.45em;
  left: 0;
  width: 100%;
  z-index:-10;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='8' viewBox='0 0 120 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.43469 6.70347C1.43469 6.70347 37.4493 2.93073 60.6152 2.03132C83.1015 1.1583 118.238 2.03132 118.238 2.03132' stroke='%23F4C52F' stroke-width='2.46496' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;	
  background-size: 100% 100%;
    transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.underline:after {
  content: "";
  position:absolute;
  width:100%;
  height: 2.45em;
  left: 0;
  width: 100%;
  z-index:-10;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='8' viewBox='0 0 120 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.43469 6.70347C1.43469 6.70347 37.4493 2.93073 60.6152 2.03132C83.1015 1.1583 118.238 2.03132 118.238 2.03132' stroke='%23F4C52F' stroke-width='2.46496' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;	
  background-size: 100% 100%;
    transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* Responsive */
@media (max-width: 767px) {
    .hero-banner .caption {
        top: 100px;
        position: relative;
    }
    .featured-test-wrapper .test-items {
        width: 100%;
        min-height: auto;
    }
    .featured-test-wrapper .test-items {
        padding: 16px 40px;
        gap: 10px;
        text-align: center;
    }
    .caption p > br {
        display: none;
    }
    .result-items .block-text {
        min-height: calc(140px - 16px);
        word-break: break-word;
    }
    .test-items a {
        position: absolute;
        right: 22px;
    }
    .program .top-left {
        top: 225px;
    }
    .program .show-banner .top-right {
        top: -85px;
        right: 5px;
    }
    .program-series .top-left {
        top: 55px;
        left: 0;
    }
    .program-series .bottom-right {
        bottom: -9px;
        right: 0;
    }
    .testimonial-comments {
        min-height: 150px;
    }
    .banner-test {padding: 20px 0 40px}
    .banner-test-wrapper {
        padding: 0;
        height: calc(780px - 22px);
    }
    .banner-test-wrapper .block-image {
        position: relative;
        top: 0;
        right: auto;
        margin-top: -70px;
        width: 100%;
    }
    .banner-test-wrapper .block-text {
        height: 250px;
    }
    .banner-test-wrapper .block-text a {
        padding: 12px 16px;
    }
    .cs-h-200 {
        min-height: calc(200px - 16px)!important
    }
}