:root{
    --primarycolor:rgb(9, 9, 36);
    --secondarycolor:#a9a9a9;
    --btncolor1:#b4b4f6;
    --tetiarycolor: #ffffff;
}

.form-container{
    padding-bottom: 4%;
    width:40%;
    margin: 5% auto;
    background-color:var(--tetiarycolor);
    box-shadow: 5px 10px 10px var(--primarycolor) inset ;
    border-radius: 10px;
   
}
.login-form {
    width: 90%;
    margin: 0 auto;

}
.login-form img{
    margin: 3% 5%;
    width: 40%;
    background-color: var(--primarycolor);

}
.login-form label{
    width: 80%;
    display: block;
    padding-bottom: 1%;
    margin-left: 5%;
    color: goldenrod;
}
.login-form h2{
    font-size: 2.5rem;
    margin-bottom: 4.5%;
    margin-left: 5%;
    color:goldenrod;
}
.login-form input{
    width: 100%;
    margin-bottom: 2%;
    margin-left: 5%;
    background-color: var(--tetiarycolor);
    height: 35px;
    border-radius: 10px;
    border: 1px solid goldenrod;
    outline: none;
    padding-left: 2%;
}
.pass-label{
    display: flex;
    justify-content: space-between;
    width: 110%;
    margin-left: 1%;
}
.input-btn input{
    margin-left: 5%;
}
.pass-label h5{
    width: 30%;
}
.pass-label a{
    width: 100%;
    font-size: 0.7rem;
    text-decoration: none;
    font-weight:500;
    color: var(--btncolor1);
   
}
.input-btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.showpassword-btn {
    width: 50%;
    min-height: 30px;
    text-align: center;
    border: none;
    color: var(--tetiarycolor);
    border-radius: 15px;
    margin-top: 2%;
    background: none;
    outline: none; 
    cursor: pointer;  
}
.showpassword-btn:hover{
    color: var(--secondarycolor);
}
.showpassword-btn:active{
    color: var(--btncolor1);
}
.signin-btn{
    width: 100%;
    margin-left: 2%;
    text-align: center;
    outline: none;
}
.login-form .signin-btn button{
    width: 30%;
    height: 30px;
    border-radius: 15px;
    border: none;
    margin-top: 3%;
    margin-bottom: 4%;
    background-color: goldenrod;
    color: var(--primarycolor);
    outline: none;
    cursor: pointer;
    
}
.login-form .signin-btn button:hover{
    background-color:var(--secondarycolor) ;
    color:var(--tetiarycolor) ;
}
.login-form .signin-btn button:active{
    background-color: var(--btncolor1);
}
.signup-redirect{
    width: 100%;
    text-align: center;  
}
.login-form p,a{
    text-decoration: none;
    margin-top: 2%;
    margin-right: 7%;
    cursor: pointer;
    color: goldenrod;
 
} 

.login-form p a{
    color:var(--btncolor1);
 
}
.login-form p a:hover{
    color: var(--secondarycolor);
}
.login-form p a:active{
    color: var(--btncolor1);
}
.form-control{
    margin-bottom: 20px;
}
.login-error-class p{
    text-align: center;
    color:red;
  
}


/* .......................Mobile Screen sizes...................................... */
/* .......................600px and below............................................ */
@media screen and (min-width:1010px){
    .navlist{
       gap: 10px;
       width: 75%;
       justify-content: right;
   margin-left: 6%;    
   
   
     
   } 
    .navlist li{
        text-align: right;
       width: 20%;
     
  
}
}

/* .......................1009px and below............................................ */
@media screen and (max-width:1009px){
  
        .navlist{
           gap: 15px;
           width: 85%;
           justify-content: right;
       margin-left: 10%;  
     
       } 
        .navlist li{
            text-align: right;
           width: 30%;
 
    }
    .heroimg h1{
        margin-top: 80px;
    }
}

/* .......................965px and below............................................ */
@media screen and (max-width:965px) {
    
    .form-container{
        width:80%;
}
.navlist{
    gap: 5px;
    width: 170%;
    justify-content: right;
margin-left: 3%;  

} 
 .navlist li{
     text-align: right;
    width: 50%;

}
.login{
    width: 17%;
}
}

/* .......................723px and below............................................ */
@media screen and (max-width:723px){
    .heroimg{
        height: 65vh;
    }
.login{
  
    margin-left: 250px;
}
.small-screen-menu{
    margin-top: 15px;

}
.small-screen-menu ul{
    margin-bottom: 2%;
    margin-top: 3px;
}
.small-screen-menu ul li{
   padding-top: -62px;
}
.heroimg h1{
    margin-top: 145px;

}
}
/* .......................478px and below............................................ */
@media screen and (max-width:478px){
    .login{
      width: 70%;
    }
}




/* .......................450px and below............................................ */
@media screen and (max-width:506px){
    .login{
        position: absolute;
        width: 40%;
        margin-left:50%;
      }
}
/* .......................450px and below............................................ */
@media screen and (max-width:450px){
    .login{
        position: absolute;
        width: 40%;
        margin-left:50%;
      }
      .logo{
     
      }
    .form-container{
        width:85%;
}
    .showpassword-btn {
        width: 70%;
        min-height: 30px;
}
.signup-redirect{
    font-size: 0.8rem;
}
}
/* .......................329px and below............................................ */
@media screen and (max-width:329px){

.form-control label{
    font-size: 0.9rem;
}
.pass-label h5 a{
    font-size: 0.6rem;
}
.showpassword-btn{
    font-size: 0.7rem;
}
.signup-redirect{
    font-size: 0.7rem;
}
.signin-btn button{
    font-size: 0.8rem;
}
}
/* .......................329px and below............................................ */
@media screen and (max-width:325px){
.login{
    width: 30%;
}

}

/* .......................height 1001px and below............................................ */
@media screen and (min-height:1001px){
    .logo li{
        margin-top: -15px;
       
    }
}
/* .......................height 1000px and below............................................ */
@media screen and (max-height:1000px){
    .logo li{
        margin-top: -10px;
   
    }
}
/* .......................height 329px and below............................................ */
@media screen and (min-height:850px){
    .logo li img{
        margin-top: -50px;
      
    }
}

/* .......................height 718px and below............................................ */
@media screen and (min-height:718px){
    .heroimg{
        height: 65vh;
    }
.logo{
    margin-top: 7px;
}
.small-screen-menu{
    margin-top: 40px;
 
}

}


/* .......................height 717px and below............................................ */
@media screen and (max-height:717px){
    .heroimg{
        height: 65vh;
    }
.logo{
    margin-top: 9px;
}
.small-screen-menu{
    margin-top: 40px;
   
}
  
    }
    /* .......................height 717px and below............................................ */
@media screen and (max-height:670px){
    .logo li{
        margin-top: 2px;
    }
}