html,
body {
    background: #0575e6 no-repeat center center fixed; /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #021b79, #0575e6) no-repeat
        center center fixed !important; /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #021b79, #0575e6) no-repeat center
        center fixed !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}

.center-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#overlay {
    max-width: 80%;
}

@media (max-width: 910px) {
    #overlay {
        max-width: 100%;
    }
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

.b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, 0.1);
    border: solid rgba(0, 0, 0, 0.15);
    border-width: 1px 0;
    box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
        inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}

.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
}

.bi {
    vertical-align: -0.125em;
    fill: currentColor;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.animated {
    animation: up-down 2s ease-in-out infinite alternate-reverse both !important;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
@media (max-width: 991px) {
    .animated {
        -webkit-animation: none;
        animation: none;
    }
}

@-webkit-keyframes up-down {
    0% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(-10px);
    }
}

@keyframes up-down {
    0% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(-10px);
    }
}

.hidden {
    opacity: 0%;
}

.bg-navheader {
    background-color: 0%;
}

.ff {
    background: rgba(172, 172, 172, 0.23);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8.9px);
    -webkit-backdrop-filter: blur(8.9px);
}

/* PARTICLES */

.cover {
    background: #3d69e7;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#particles-js {
    position: relative;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

#particles-js {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

#overlay {
    position: relative;
    padding: 50px;
}

.particleClass {
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* CUSTOM BUTTONS */

.customButton {
    display: inline-block;
    border-radius: 10rem;
    color: #fff;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.15rem;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    padding: 1em 1.8em;
    font-weight: 600;
    font-size: 0.8rem;
}
.menuButtons {
    width: 10rem;
    height: 3.5rem;
    padding: 1rem;
}
.menuButtons:after {
    border: 2px #fff solid;
    /* background-color: #0cf; */
}
.registerButton:after {
    border: 2px #fff solid;
}
.customButton:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10rem;
    z-index: -2;
}
.customButton:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #fff;
    transition: all 0.3s;
    border-radius: 10rem;
    z-index: -1;
}
.customButton:hover {
    color: #021e7d;
}
.customButton:hover:before {
    width: 100%;
}

/* CUSTOM HR */

.customHR {
    margin-left: 0px;
    color: blue;
    background-color: blue;
    border: 0px;
    height: 1px;
}

.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #79ddf5 !important;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

/* Top Nav */
.top-navbar-container {
    color: white !important;
}
.top-logo {
    max-height: 6rem !important;
}

/* Typography */
.fs-50px {
    font-size: 50px;
}

.fs-cus-online {
    letter-spacing: 2rem !important;
    color: rgb(122, 223, 246);
}

.fs-cus-click-link {
    letter-spacing: 0.5rem !important;
    color: #fff;
    margin-bottom: -1rem;
    position: relative;
}

@media (max-width: 767px) {
    .top-navbar-container {
        display: block !important;
    }
    .top-logo {
        text-align: center;
    }
    .customButton {
        margin-bottom: 10px;
    }
    #overlay {
        padding: 15px;
    }
    .center-me {
        text-align: center !important;
    }
    .fs-cus-online {
        letter-spacing: 1rem !important;
        margin-left: 13px;
    }
    .between-mo-to {
        justify-content: space-between !important;
    }
    nav#topNavBar div div div img {
        margin: auto;
        display: table;
        margin-bottom: 10px;
    }
}

/* Custom Input Group */
.cus-group i {
    position: absolute;
    top: 11px;
    left: 27px;
}
.eye i {
    position: absolute;
    top: 11px;
    right: 25px;
    cursor: pointer;
}
.cus-group input {
    padding-left: 50px;
}
.pass {
    padding-right: 50px;
}

.modal-header-login {
    letter-spacing: 0.2rem !important;
}

/* Reset Pass Card */
.reset-pass-card {
    max-width: 500px;
    margin: 20px auto 0;
}

form#changePasswordForm label{
    margin-bottom: 6px;
}

/* Bootstrap Custom Checker */
.form-control.is-valid, .was-validated .form-control:valid {
    background-position: right calc(0.375em + 2.4875rem) center;
}

/* Custom Bootstrap 5 Validation Feedback */

.feedback-cus-margin{
    margin-top: .5rem;
    margin-bottom: -.7rem;
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-control.is-valid,
.was-validated .form-control:valid {
    background-image: url() !important;
}

.inline-error {
    margin-top: -15px !important;
    margin-bottom: 10px !important;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    background-image: none !important;
}