html { 
  background: url(../img/bg1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.bg-light {
    --bs-bg-opacity: 0.7;
    background-color: rgba(248, 249, 250, 0.7) !important;
}


#page-loader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.2);
    z-index: 99999;
    background-image: linear-gradient(135deg,#7b7b7b40 25%,transparent 25%),linear-gradient(225deg,#7b7b7b40 25%,transparent 25%),linear-gradient(45deg,#7b7b7b40 25%,transparent 25%),linear-gradient(315deg,#7b7b7b40 25%,#00000040 25%);
    background-position: 4px 0,4px 0,0 0,0 0;
    background-size: 4px 4px;
    background-repeat: repeat;
}

#page-loader .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    box-sizing: border-box;
    width: 88px;
    height: 88px;
    margin-top: -44px;
    margin-left: -44px;
    animation: loader_rotation 1s linear infinite;
    border: 6px solid;
    border-color: #FFFFFF #FFFFFF transparent;
    border-radius: 50%;
}

#page-loader .loader::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: 58px;
    height: 58px;
    margin: auto;
    content: '';
    transform-origin: center center;
    animation: loader_rotationBack .5s linear infinite;
    border: 6px solid;
    border-color: transparent #0E9598 #0E9598;
    border-radius: 50%;
}

@keyframes loader_rotation {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes loader_rotationBack {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(-360deg)
    }
}