@media (max-width: 480px) {
  .card {
    width: 80%;
    padding: 25px 20px;
    margin-top: 40px;
  }

  .search input {
    height: 50px;
    font-size: 14px;
    padding: 8px 15px;
  }

  .search button {
    height: 50px;
    width: 50px;
  }

  .search button img {
    width: 14px;
  }

  .weather-icon {
    width: 120px;
  }

  .weather h1 {
    font-size: 50px;
  }

  .weather h2 {
    font-size: 28px;
  }

  .details {
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
  }

  .col img {
    width: 30px;
  }

  .humidity,
  .wind {
    font-size: 20px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .card {
    width: 80%;
    padding: 30px 25px;
    margin-top: 60px;
  }

  .weather-icon {
    width: 140px;
  }

  .weather h1 {
    font-size: 60px;
  }

  .weather h2 {
    font-size: 32px;
  }

  .details {
    flex-direction: column;
    gap: 25px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .card {
    max-width: 600px;
    padding: 40px;
  }

  .weather h1 {
    font-size: 70px;
  }

  .weather h2 {
    font-size: 38px;
  }
}

@media (min-width: 1025px) {
  .card {
    max-width: 470px;
  }
}