*{
    font-family: 'Krub', sans-serif;
}

.header-1{
      width:100%;
      min-height:100vh;
      position:relative;
      background-image:url('../images/Group 391.png');
      background-repeat:no-repeat;
      background-size:100% 100%;
}
.header-2{
      width:100%;
      height:auto;
      position:relative;
      background-image:url('../images/Group 391.png');
      background-repeat:no-repeat;
      background-size:100% 100%;
}
.bg-dark {
    background-color: #fff0 !important;
}
.navbar-light .navbar-nav .nav-link {
    color: #fff;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #FFCA05;
}
@media only  screen and (min-width:320px){

.navbar{
    padding:0.5rem 1rem;
}
}
@media only  screen and (min-width:786px){

.navbar{
     padding: 1rem 5rem;
}
}
@media only  screen and (min-width:1280px){

.navbar{
     padding: 1rem 8rem;
}
}

.login-page {
    margin-top:50px;
    padding-bottom:40px;
}
.login-page h1{
    font-size:28px;
    font-weight:700;
    color:#FFCA05;
    padding-bottom:15px;
}
.login-page span{
    color:#fff;
    
}
.login-page h3{
     font-size:18px;
    font-weight:600;
    color:#FFF;
    display:inline;
    margin-left:15px;
}
.login-page .btn-outline-primary{
    color:#fff;
    border-color:#FFCA05;
    margin-bottom: 30px;
    font-size: 14px;
    padding: .375rem 1.3rem;
}
.login-page .btn-outline-primary:hover{
    color:#000;
    border-color:#FFCA05;
    background-color:#FFCA05;
    margin-bottom: 30px;
}

.login-page img{
    padding-bottom: 15px;
}
.login-card {
    border:none;
    border-radius: 20px;
    box-shadow: 0px 5px 28px 0px #00000029;
    padding: 1rem 0.4rem;
}
.login-card .card-body h4{
    font-size:16px;
    color:#000000;
    font-weight:700;
    padding-bottom: 15px;
}
.login-card .form-control{
border: none;
    border-bottom: 1px solid grey;
    border-radius: 0px;
    box-shadow: none !important;
}
.login-card label{
font-size:14px;
}
.login-card .btn-primary{
    color:#000;
    border-color:#FFCA05;
    background-color:#FFCA05;
    padding: 0.4rem 2.5rem;
    font-size: 14px;
    border-radius: 8px;
}
.login-card .btn-primary:hover{
    color:#000;
    border-color:#FFCA05;
    background-color:#FFCA05;
}



/* ................footer-css............. */
.ft h5{
    font-size:8px;
    font-weight:300;
    color:#818386;
    padding-top:10px;
    
    }
    .ft{
    padding:20px;
    }
    .ft h4{
    font-size:11px;
    font-weight:500;
    color:#818386;
    padding-top:10px;
    
    }
    /* ................footer-css-end............. */
    @media only screen and (min-width:1020px)and (max-width:1190px) {
        .login-page h3 {
            font-size: 16px;
        }
    }
    @media only  screen and (max-width:600px){
        .header-1{
            background-image:url('../images/Group 394 copy.png');
        }
    }
    @media only  screen and (min-width:1440px){
        .navbar{
            padding: 1rem 10rem;
       }
    }
    @media only  screen and (min-width:1535px){
        .navbar{
            padding: 1rem 13rem;
       }
    }
    @media only  screen and (min-width:1600px){
        .navbar{
            padding: 1rem 15rem;
       }
    }
    @media only  screen and (min-width:1920px){
        .navbar{
            padding: 1rem 25rem;
       }
    }

/* --------- loader ----------- */
.loader-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #242f3f52;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1040000;
}

.loader {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    border: 4px solid #Fff;
    animation: loader 2s infinite ease;
}

.loader-inner {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: #fff;
    animation: loader-inner 2s infinite ease-in;
}

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

    25% {
        transform: rotate(180deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(360deg);
    }

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

@keyframes loader-inner {
    0% {
        height: 0%;
    }

    25% {
        height: 0%;
    }

    50% {
        height: 100%;
    }

    75% {
        height: 100%;
    }

    100% {
        height: 0%;
    }
}