/* App.css */

/* Add responsive styles for smaller screen sizes */
@media (max-width: 576px) {
    .container {
      width: 100%;
      padding: 10px;
      border-radius: 0;
    }
  
    .container-fluid {
      min-height: 400px;
    }
  
    .btn1,
    .btn2 {
      width: 100%;
      margin-bottom: 10px;
    }
  
    .passwords {
      text-align: center;
      position: relative;
    }
   
  
    
    
      .toggle-passwords img {
        width: 20px;
        height: 20px;
           
      }
  
    .form-check-label {
      font-size: 12px;
    }
  
    .forget {
      text-align: center;
    }
  
    .row {
      flex-wrap: wrap;
      justify-content: center;
    }
  
    .col-2 {
      /* flex: 0 0 40%; */
      max-width: 40%;
      text-align: center;
      margin-bottom: 10px;
    }
    .btn{
        margin-bottom: 5px;
    }
  }
  
  /* Add responsive styles for medium screen sizes */
  @media (min-width: 576px) and (max-width: 768px) {
    .container {
      width: 100%;
      padding: 20px;
      border-radius: 10px;
    }
  
    .container-fluid {
      min-height: 450px;
    }
  
    .btn1,
    .btn2 {
      width: 50%;
    }
  
    .forget {
      text-align: center;
    }
  
    .row {
      justify-content: center;
    }
  
    .col-2 {
      flex: 0 0 25%;
      max-width: 25%;
      text-align: center;
      margin-bottom: 10px;
    }
  }
  
  /* Add responsive styles for larger screen sizes */
  @media (min-width: 768px) {
    .container {
      width: 100%;
      max-width: 500px;
      padding: 20px;
      border-radius: 23px;
    }
  
    .container-fluid {
      min-height: 500px;
    }
  
    .btn1,
    .btn2 {
      width: 50%;
    }
  
    .forget {
      text-align: right;
    }
  
    .row {
      justify-content: space-around;
    }
  
    .col-2 {
      flex: 0 0 25%;
      max-width: 25%;
      text-align: center;
      margin-bottom: 0;
    }
  }
  

  .toggle-passwords {
    position: absolute; /* Use absolute positioning for the eye icon */
    top: 13%;
    right: 10px; /* Adjust the right positioning to move the icon away from the input field */
    transform: translateY(-50%); /* Center the icon vertically */
    cursor: pointer;
    transition: transform 0.3s ease; /* Add transition for smooth animation */
  }
  .passwords{
    position: relative;
  }
  .toggle-passwords img{
    margin-top: 0px;
    margin-left:5px;

  }
  .btn:hover{
    color: white;
  }
  .toggle-passwordss {
    position: absolute; /* Use absolute positioning for the eye icon */
    top: 14%;
    right: 10px; /* Adjust the right positioning to move the icon away from the input field */
    transform: translateY(-50%); /* Center the icon vertically */
    cursor: pointer;
    transition: transform 0.3s ease; /* Add transition for smooth animation */
  }
  .passwordss{
    position: relative;
  }
  .toggle-passwordss img{
    margin-top: 5px;
    margin-left:5px;
  }

  .form-control:focus{
    box-shadow: none;
    border: 1px solid black;
  }


  @media screen and(max-width:574px) {
    .row{
      justify-content: space-between;
    }
  }
   @media screen and(max-width:500px){
    .toggle-passwordss {
        position: absolute; /* Use absolute positioning for the eye icon */
        top: 50%;
        right: 10px; /* Adjust the right positioning to move the icon away from the input field */
        transform: translateY(-50%); /* Center the icon vertically */
        cursor: pointer;
        transition: transform 0.3s ease; /* Add transition for smooth animation */
      }
      .passwordss{
        position: relative;
      }
      .toggle-passwordss img{
        margin-top: 5px;
        margin-left:5px;
      }
   }