.bg-success,
.btn-success {
    background: #0f8445;
}
.text-success {
    color: #0f8445;
}

body {
    font-family: "Roboto", sans-serif;
}
#header.header-fixed {
    background: rgba(16, 33, 51, 1);
    border-bottom: 1px solid rgb(12 19 27);
}
.nav-menu a {
    font-family: "Roboto", sans-serif;
    text-transform: none;
}
.nav-menu > li > a:before {
    background: #0f8445;
}
.back-to-top:hover {
    background: #0f8445;
}
#hero {
    background: url(../img/front-banner.png) bottom right;
    background-size: cover;
    background-position: 0px;
}
#hero:before {
    background: linear-gradient(
        to bottom right,
        #001b35,
        rgba(16, 33, 51, 0.25)
    );
}
#hero .container {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: left;
}
#hero h1 {
    text-transform: none;
    font-size: 32px;
}
#hero .scroll {
    position: absolute;
    bottom: 0;
    font-size: 14px;
}

@media (min-width: 992px) {
    .ml-lg-9 {
        margin-left: 9rem !important;
    }
}
#mobile-nav {
    border-right: 1px solid rgb(12 19 27);
    background: rgba(16, 33, 51, 1);
}
#mobile-body-overly {
    background: rgba(16, 33, 51, 0.9);
}
#about {
    background: #102133;
    color: var(--light);
}
#about .about-container .title {
    color: var(--light);
}
#about .about-container .icon-box {
    background: transparent;
}
#about .about-container .icon-box .icon {
    background: transparent;
    display: block;
    float: none;
}
#about .about-container .icon-box .title {
    font-weight: bold;
}
#about .about-container .icon-box .title,
#about .about-container .icon-box .description {
    margin-left: 0;
    text-transform: none;
}

.section-header .section-title {
    text-transform: none;
}
@media (max-width: 767.98px) {
    #about .about-container .icon-box {
        text-align: center;
    }
    #about .about-container .icon-box .icon {
        margin: auto;
    }

    #about .section-left {
        text-align: center;
        margin-bottom: 2.5rem;
    }
}

#facts {
    background: url(../img/bg-regulasi.png) top center;
}
#regulasi {
    color: var(--light);
    background: url(../img/bg-pesantren.png) top center no-repeat;
    background-size: cover;
}
#regulasi .row {
    min-height: 404px;
}
#regulasi {
    border-top: 0;
}
@media (max-width: 767.98px) {
    #regulasi {
        color: var(--light);
        background: #679fdb;
        border-top: 1px solid var(--light);
    }
}
.text-white-80 {
    color: rgba(255, 255, 255, 0.8) !important;
}
#footer {
    background: #102133;
}

#login-page {
    background: url(../img/front-banner.png) bottom right;
    background-size: cover;
    background-position: 0px;
}
#login-page:before {
    background: linear-gradient(
        to bottom right,
        #001b35,
        rgba(16, 33, 51, 0.25)
    );
    content: "";
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}
.bg-transparent-primary {
    background: rgba(14, 33, 53, 0.33);
}
.login {
    min-height: 100vh;
}
.login-heading {
    font-weight: 300;
}
.btn-login {
    font-size: 0.9rem;
    letter-spacing: 0.05rem;
    padding: 0.75rem 1rem;
}
.form-login .form-control-lg {
    font-size: 1rem;
    padding: 2rem 1rem;
    transition: 0.3s;
}
.form-login .form-control-lg:focus {
    box-shadow: none;
    border: 1px solid var(--light);
    border-left: 3px solid #0f8445;
}
.form-login .custom-select-lg {
    height: calc(3.25em + 0.75rem + 2px);
    font-size: 1rem;
    transition: 0.3s;
}
.form-login .custom-select-lg:focus {
    box-shadow: none;
    border: 1px solid var(--light);
    border-left: 3px solid #0f8445;
}
.form-login .btn-outline-success {
    background: var(--light);
}
.form-login .btn-outline-success:hover,
.form-login .btn-outline-success:focus,
.form-login .btn-outline-success:active {
    background: rgba(255, 255, 255, 0.9);
    color: var(--success);
}

@media (max-width: 767.98px) {
    #login-page {
        background: url(../img/front-banner.png) bottom right;
    }
}