#container {
    width: 100%;
    max-width: 400px;
  }
  
  .input-container {
    position: relative;
    /* margin-bottom: 2rem; */
  }
  
  .input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #ccc;
    font-size: 1rem;
    color: #333;
    background-color: transparent;
    outline: none;
    transition: all 0.3s ease;
    padding-top: 16px; /* To make space for the floating label */
  }
  
  .input-label {
    position: relative;
    display: block;
  }
  
  .label-span {
    position: absolute;
    top: 12px; /* Start inside the input, aligned with padding-top */
    left: 16px;
    font-size: 1rem;
    color: #aaa;
    pointer-events: none;
    background-color: #fff;
    padding: 0 4px;
    z-index: 1;
    transition: all 0.3s ease;
  }
  
  /* Floating Label when focused or filled */
  .input:focus + .label-span,
  .input.full + .label-span {
    top: -8px; /* Moves the label above the text box border */
    left: 16px;
    font-size: 0.75rem;
    color: #4a90e2;
    background-color: #fff;
  }
  
  /* Input Hover Effect */
  .input:hover {
    border-color: #007bff;
  }