.btns {
  background-color: var(--main-color);
  color: #ccd2d8;
  font-size: 12px;
  border-radius: 60px;
  border: none;
  font-weight: bold;
}
.form-control {
  padding-left: 40px; /* Adjust padding to prevent overlap with icon */
  border: none;
  border-bottom: 2px solid #ccc;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  border-bottom: 2px solid green;
}

/* Green underline and shadow on focus */
.form-control:focus {
  border-bottom: 2px solid green;
  box-shadow: 0 4px 10px rgba(0, 255, 0, 0.3); /* Green shadow */
}

/* Green underline on hover */
.form-control:hover {
  border-bottom: 2px solid green;
}

.icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #c5c0c0;
    font-size: 18px; /* Default size for larger screens */
  }
  
  /* Media query for smaller devices (e.g., mobile phones) */
  @media (max-width: 768px) {
    .icon {
      font-size: 16px; /* Slightly smaller font size */
      left: 8px; /* Adjust the left position for smaller screens */
      top: 50px;
    }
  }
  
  @media (max-width: 576px) {
    .icon {
      font-size: 14px; /* Further reduce the size for very small screens */
      left: 6px; /* Adjust the left position even more */
    }
  }
   

.icon-eye {
  position: absolute;
  top: 50%;
  right: 10px; /* Place the eye icon on the right side of the input */
  transform: translateY(-50%);
  color: #c5c0c0;
  font-size: 18px;
  cursor: pointer;
}

.color {
  color: green;
}

.user-icons{
  position: absolute;
    top: 20%;
    left: 10px;
    color: #c5c0c0;
    font-size: 18px; 
    z-index: 1;
}