/* Custom CSS for mobile, tablet, and PC */

/* Mobile devices (up to 575px wide) */
@media (max-width: 575px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }
  .col-3, .col-6 {
    width: 100%;
    margin-bottom: 10px;
  }
  .btn {
    width: 100%;
  }
  .form-floating {
    margin-bottom: 15px;
  }
}

/* Tablet devices (between 576px and 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .container {
    width: 100%;
    padding: 0 20px;
  }
  .col-3, .col-6 {
    width: 50%;
  }
  .btn {
    width: 100%;
  }
  .form-floating {
    margin-bottom: 15px;
  }
}

/* PC devices (768px and above) */
@media (min-width: 768px) {
  .container {
    max-width: 1000px;
    padding: 0 30px;
  }
  .col-3, .col-6 {
    width: auto;
  }
}