:root {
    --white: rgba(255, 255, 255, 1);
    --grey: rgba(87, 87, 91, 1);
    --lightgrey: rgba(126, 126, 129, 1);
    --dark-grey: rgba(42, 42, 46, 1);
    --tosca: rgba(4, 140, 170, 1);
    --blue: rgba(11, 81, 183, 1);
    --lightblue: rgba(223, 240, 255, 1);
    --yellow: rgba(244, 197, 47, 1);
    --fw400: 400;
    --fw500: 500;
    --fw600: 600;
    --fw700: 700;
    --fw800: 800;
    --fw900: 900;
    --nunito: "Nunito Sans", Sans-serif;
}

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

/* Color */
.white {color: var(--white)!important}
.grey {color: var(--grey)!important}
.dark-grey {color: var(--dark-grey)!important}
.tosca {color: var(--tosca)!important}
.blue {color: var(--blue)!important}
.lightblue {color: var(--lightblue)!important}
.yellow {color: var(--yellow)!important}
.bgwhite {background-color: var(--white)!important}
.bgtosca {background-color: var(--tosca)!important}

/* Utility */
.btn-border {border: 1px solid rgba(188, 188, 189, 1)!important}
.btn-shadow {box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1)!important}
.shadow-elements {box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.2)!important}
.overflow-visible {overflow: visible}
.b-rad-24 {border-radius: 24px}
:where(.success-message,.error-message) {
    font-size: 14px;
    line-height: 20px;
    color: var(--dark-grey);
    padding: 16px 24px;
    border-radius: 8px;
}
.success-message {
    background: rgba(235, 245, 210, 1);
    border: 1px solid rgba(152, 201, 60, 1);
}
.error-message {
    background: rgba(253, 238, 219, 1);
    border: 1px solid rgba(243, 172, 73, 1);
}

html {
  scroll-behavior: smooth;
}

/* Hero Banner */
.hero-banner {
    align-items: start!important;
    padding-top: 60px!important;
    @media (max-width: 767px) {
        padding-top: 40px!important;
        height: 900px!important;
    }
}
.hero-banner .wrap-banner-caption {flex-direction: column}
@media (max-width: 767px) {
    .hero-banner .wrap-banner-caption.left-position {
        margin-top: 3.5rem!important;
    }
}
#register {
    margin-top: -440px;
    @media (max-width: 767px) {
        margin-top: -518px;
        padding-block-end: 20px;
    }
}
#register .main-form {
    padding: 24px 20px;
    margin-block-start: 2rem;
    margin-inline-end: 25px;
    @media (max-width: 767px) {
        margin-block-start: 0;
        margin-inline-end: 0;
    }
}
.main-form label,
.main-form .form-control {
    font-size: 14px;
    line-height: 20px;
}
.main-form label {
    font-weight: var(--fw700);
    color: var(--dark-grey);
}
.main-form .form-control {
    color: var(--dark-grey);
    border: 1px solid rgba(188, 188, 189, 1);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    -webkit-border-radius: 8px;
     border-radius: 8px;
}
.main-form button {
    padding: 12px 16px;
    outline: none;
}
.custom-select-arrow {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Tambahkan ruang untuk icon di kanan */
  padding-right: 2.5rem;
  /* Tambahkan SVG sebagai background panah */
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5835L10 12.5835L15 7.5835' stroke='%2357575B' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: 1.25rem;
}

/* Benefit */
.benefit {padding: 30px 0 60px}
.benefit .top-left {top: 110px}
.benefit-features {
    display: grid;
    grid-template-columns: repeat(2, 4fr);
    @media (max-width: 767px) {
        grid-template-columns: repeat(1, 4fr);
    }
    gap: 30px;
    margin-block-start: 2rem;
}
.benefit-item {
    padding: 16px 24px;
    border-radius: 24px;
}
.benefit-image {
    margin-block-start: 130px;
    margin-inline-start: -18px;
    @media (max-width: 767px) {
        margin-block-start: 60px;
    }
}

/* Register */
.register {
    padding-block-start: 80px;
    padding-block-end: 60px;
    @media (max-width: 768px) {
        padding-block-start: 60px;
        padding-block-end: 40px;
    }
}
.register .section-title {margin-bottom: 2rem}
.register .section-title br {
    display: none;
    @media (max-width: 767px) {
        display: block;
    }
}
:where(.step-wrapper,.wrapper-step,.step-item) {
    display: flex;
    align-items: center;
    @media (max-width: 768px) {
        flex-direction: column;
    }
}
:where(.step-wrapper,.wrapper-step) {gap: 1rem}
.step-wrapper {
    margin-top: auto;
    margin-bottom: -18px;
}
.step-item {
    position: relative;
    flex-direction: column;
    width: 20%;
    @media (max-width: 768px) {
        font-size: 12px;
    }
}
.step-item::before,
.step-item::after,
.step-item.completed::after {
    position: absolute;
}
.step-item::before,.step-item::after,.step-item.completed::after {
    content: "";
    top: 20px;
    width: 100%;
}
.step-item::before {
    left: -50%;
    z-index: 2;
}
.step-item::after {
    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;
    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.completed .step-counter {background-color: var(--blue)}
.step-item.completed::after {
    height: 2px;
    background-image: linear-gradient(90deg, rgba(11, 81, 183, 1), rgba(11, 81, 183, 1) 75%, transparent 75%, transparent 100%);
    background-size: 20px 1px;
    border: none;
    left: 50%;
    z-index: 3;
}
.step-item:first-child::before,
.step-item:last-child::after {
  content: none;
}
.wrapper-step {justify-content: center}
.wrapper-step .step-register-item {
    width: 20%;
    min-height: 320px;
    height: 100%;
    @media (max-width: 767px) {
        width: 100%;
        min-height: 100%;
        padding: 20px 0;
    }
}
@media (max-width: 767px) {
    .wrapper-step .step-register-item .step-counter {
        position: relative;
        width: 48px;
        height: 48px;
        background: var(--blue);
        color: var(--white);
        margin: -15px auto;
        border-radius: 50%;
        line-height: 48px !important;
        z-index: 1;
    }
}
.wrapper-step .step-register-item .desc {
    padding-block-start: 8px;
}
@media (max-width: 767px) {
    .wrapper-step .step-register-item .desc br,
    .wrapper-step .step-register-item .title br {
        display: none;
    }
}

/* Banner CTA */
.banner-cta {padding-block-start: 100px;padding-block-end: 60px}
.banner-cta-wrapper {
    position: relative;
    padding: 3rem;
    height: 294px;
    @media (max-width: 767px) {
        padding: 35px 25px;
        height: 485px;
    }
}
.banner-cta-wrapper .block-text {z-index: 1}
.banner-cta-wrapper .block-image {
    position: absolute;
    right: -17px;
    bottom: -3px;
    width: calc(100% - 433px);
}
.banner-cta-wrapper .block-text .title {margin-bottom: 4px}
.banner-cta-wrapper .block-text .desc {margin-bottom: 2rem}
@media (max-width: 767px) {
    .banner-cta-wrapper .block-text .desc {margin-bottom: 1rem}
    .banner-cta-wrapper .block-text .desc br {display: none}
    .banner-cta-wrapper .block-image {
        top: -45px;
        right: 0;
        width: 100%;
    }
}