body {
    font-family: 'Cabin', sans-serif;
}

.line {
    border: 2px solid #C1BCD1
}

.card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-body {
    flex: 1;
}

.btn-rikkei {
    background: #231651 !important;
    border: 1px solid #231651 !important;
}

.btn-rikkei-outline {
    color: #fff !important;
    border: 1px solid #231651 !important;
    background: #211156 !important;
    border-radius: 5px !important
}

.btn-rikkei:hover {
    background: #211156 !important;
}

.btn-rikkei-outline:hover {
    color: #fff !important;
    border: 1px solid #231651 !important;
    background: #211156 !important;
}

.navbar {
    background: #fff;
    box-shadow: 0 4px 6px rgba(22, 22, 26, 0.18);
}

.nav-item {
    padding-left: 15px;
}

.navbar .navbar-nav .nav-link {
    color: #231651 !important
}

.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show > .nav-link {
    color: #09031e !important
}

.navbar .navbar-logo {
    height: 45px;
}

.navbar .navbar-nav .nav-link {
    color: #000;
}

.btn-outline-dark {
    border-radius: 0;
}

.btn-outline-dark:focus {
    box-shadow: none;
}

/*** Banner ***/
.banner {
    color: #231651;
}

.btn-banner {
    background: #BC2228;
    border-radius: 5px !important;
}

.banner-image {
    height: 600px;
    width: 100%;
    object-fit: cover;
}

.banner-container {
    position: relative;
    color: #231651
}

.overlay-card {
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 800px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #C1BCD1;
    box-shadow: 0 4px 12px 0 #23165114;
}

.banner-position-content {
    left: 25%
}

.content-title-banner {
    background: #231651;
    border-radius: 10px;
    /*width: 85%*/
}

.banner-title {
    font-weight: 700;
    line-height: 44px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.content-description-banner {
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    /*width: 80%*/
}

.banner-description {
    font-weight: 400;
    font-size: 16px;
}

/** EndBanner ***/

/*Series*/
.series {
    color: #231651;
}

.series-title {
    font-weight: 700;
    line-height: 44px;
}

.badge-series-warning {
    border-radius: 0;
    background: #F6BC4D;
    color: #000000;
    font-size: 12px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0;
}

.badge-series-danger {
    border-radius: 0;
    background: linear-gradient(0deg, #FAEBEB, #FAEBEB);
    border: 1px solid #EBB0B2;
    color: #BC2228;
    font-size: 12px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0;
}

/**program**/
.series-content .program-panel-title {
    font-weight: 700;
    font-size: 20px;
}

.series-content .card {
    border: 1px solid #C1BCD1;
    background: #eaeaf1
}

.series-content .card-title a {
    font-weight: 600;
    font-size: 18px;
    color: #231651;
    text-decoration: none;
}

.series-content .card-text {
    font-size: 16px;
}

/*** Course level up ***/
.course-level-up {
    color: #231651;
    background: #eaeaf1;
}

.course-level-up .card {
    box-shadow: 0 4px 12px 0 #23165114;
}

.course-level-up-title {
    font-weight: 700;
    line-height: 44px;
}

.btn-video {
    font-size: 14px
}

.course-level-up small {
    color: #dc3545;
    background: #FFF8F8;
}

.course-level-up .btn-suggest {
    background: #FFF8F8;
}

.course-level-up .card-title a {
    font-weight: 600;
    font-size: 18px;
    color: #231651;
    text-decoration: none;
}

.course-level-up .card-text {
    font-size: 14px
}

.course-level-up .btn-voucher {
    background: #EFEDF5;
    font-size: 14px;
    font-weight: 500;
    border: none;
    color: #231651;
}

/*** Reason take course ***/

.reason-take-course {
    background: #BC2228;
    color: #F2F2F2
}

.reason-take-course .reason-title {
    font-weight: 700;
    line-height: 44px;
}

.reason-content {
    color: #BC2228
}

.reason-content .card {
    margin-top: 25px;
    box-shadow: 0 4px 12px 0 #23165114;
}

.reason-content .card-body {
    height: 210px
}

.reason-content .card-title a {
    color: #BC2228;
    font-weight: 600;
    font-size: 18px;
    text-decoration: none;
}

.reason-content .card-text {
    font-size: 16px;
}

/*** Certificate profile ***/

.certificate-profile {
    color: #231651;
}

.certificate-profile-title {
    font-weight: 700;
    line-height: 44px;
}

.certificate-profile .step {
    background: #EFEDF5;
    border-radius: 60px;
    font-weight: 600;
}

.certificate-profile .card-title a {
    font-weight: 600;
    font-size: 16px;
    color: #231651;
    text-decoration: none;
}

.certificate-profile .btn-update-certificate {
    background: #eaeaf1;
    color: #231651;
    border: 1px solid #C1BCD1
}

.certificate-profile .certificate-image-poster {
    height: 500px;
    object-fit: contain;
}

/*.certificate-profile, .footer-1, .footer-2 {*/
/*    opacity: 0.16;*/
/*    transition: opacity 0.5s ease;*/
/*}*/

/*** Contact ***/
.contact {
    background: #eaeaf1;
}

.contact-title {
    font-weight: 700;
    line-height: 44px;
    color: #231651;
}

.contact .contact-content {
    text-align: justify;
    color: #231651;
}

.contact .card-title {
    font-weight: 600;
    font-size: 16px;
    color: #231651;
}

.contact .contact-image-poster {
    /*height: 200px;*/
    object-fit: contain;
}

.contact .label-contact {
    background: #e2ddef;
    border-radius: 60px;
    font-weight: 500;
}

/*** Footer ***/
footer {
    color: #F2F2F2;
    background: #231651
}

#footer-logo-top {
    display: none;
    margin-bottom: 20px
}

/** Modal **/
.custom-modal {
    color: #231651;
}

.modal-content .nav-tabs {
    --bs-nav-tabs-border-width: 0 !important;
}

.modal-content .nav-tabs .active {
    background: linear-gradient(0deg, #FAEBEB, #FAEBEB) !important;
    color: #BC2228 !important;
    border: 1px solid #EBB0B2 !important;
    font-weight: 600;
}

.modal-content .btn-nav-link {
    border: 1px solid #C1BCD1;
    color: #231651;
    font-weight: 600;
    border-radius: 5px
}

.modal-content .btn-nav-link:not(:first-child) {
    margin-left: 5px;
}

.modal-content .tab-pane {
    line-height: 25px
}

.modal-content .modal-title {
    font-weight: 600;
    font-size: 22px;
    line-height: 36px;
    letter-spacing: 0;
    text-align: left;
}

.modal-content {
    border-radius: 5px !important;
}

.modal-header, .modal-footer {
    border: none;
}

.modal-content .btn-close {
    border: 1px solid #d1c4f8;
}

.modal-content .btn-register {
    background: #BC2228;
}

.modal-content label {
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 0;
    text-align: left;
}

.modal-content input {
    border: 1px solid #EFEDF5
}

.modal-content .radio {
    border: 1px solid #EFEDF5;
    padding: 5px;
    border-radius: 5px;
}

.modal-content .radio {
    border: 1px solid #EFEDF5;
    padding: 5px;
    border-radius: 5px;
}

.modal-content .step-register {
    color: #BC2228;
    font-weight: 600
}

/*** Footer ***/
.contact .btn-nav-link-footer {
    border: 1px solid #C1BCD1;
    color: #231651;
    font-weight: 600;
    border-radius: 50px
}

.contact .nav-tabs .active {
    background: linear-gradient(0deg, #FAEBEB, #FAEBEB) !important;
    color: #BC2228 !important;
    border: 1px solid #EBB0B2 !important;
    font-weight: 600;
}

/** End Modal **/
@media screen and (max-width: 1200px) {
    /*** Banner ***/
    .banner-position-content {
        left: 35%
    }

    .content-title-banner {
        background: #231651;
        border-radius: 10px;
        width: 80%;
        padding: 1rem 0 !important;
    }

    .banner-title {
        line-height: 38px;
    }

    .content-description-banner {
        width: 80%
    }

    /** EndBanner ***/
}

@media screen and (max-width: 992px) {
    .container {
        padding: 0 20px;
    }

    .nav-item {
        padding-left: 0;
    }

    .banner-image {
        height: 300px
    }

    .series .program-panel-title {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 767px) {
    .series {
        margin-top: 230px
    }

    .container {
        padding: 0 20px;
    }

    .nav-item {
        padding-left: 0;
    }

    .banner-image {
        height: 250px
    }

    .banner-title {
        font-size: 22px;
        line-height: 32px;
    }

    .banner-description {
        font-size: 14px
    }

    .btn-banner {
        font-size: 14px
    }

    .overlay-card {
        width: 83%;
    }

    /*Series*/
    .series-title {
        font-size: 22px;
        line-height: 32px;
        padding: 0 80px
    }

    .btn-outline-dark {
        border: none;
        padding: 0;
        outline: none;
    }

    .btn-outline-dark:hover {
        background: none;
        color: gray;
    }

    .series-content .program-panel-title {
        font-size: 16px;
    }

    .series-content .program-panel-description {
        margin-top: 10px;
    }

    /** Modal **/
    .modal-content .btn-nav-link {
        border: 1px solid #C1BCD1;
        color: #231651;
        font-weight: 600;
        width: 100%
    }

    .modal-content .btn-nav-link:not(:first-child) {
        margin-left: 0;
        margin-top: 10px
    }

    /** End Modal **/
}

@media screen and (max-width: 545px) {
    .banner-image {
        height: 500px;
        object-position: bottom;
    }
}