responsive.css

@media screen and (max-width: 1200px) {
}

@media screen and (max-width: 991px) {
  .btn-toggle {
    border: none;
  }

  .btn-toggle:focus {
    box-shadow: none !important;
  }

  .navbar-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .about-tagline {
    margin: 30px 0;
  }
  .tools-tagline {
    margin: 30px 0;
  }
  .contact-tagline {
    margin: 30px 0;
  }

  .about-des {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .deskripsi {
    width: 90%;
  }

  .logo {
    width: 40%;
    margin-bottom: 20px;
  }

  .photo-pict {
    display: none;
  }

  .card {
    height: 490px;
    margin: 0 0.5rem;
  }

  form {
    width: 500px;
  }

  .form-name input {
    display: flex;
    column-gap: 2px;
  }
}

@media screen and (max-width: 768px) {
  .card-tools {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .card {
    margin: 1rem 0;
  }
}

@media screen and (max-width: 576px) {
  .hero-tagline div h1 {
    font-size: 25px;
  }

  .hero-text {
    font-size: 24px;
    letter-spacing: 0.3rem;
  }

  .card {
    width: 80%;
    height: 50%;
  }

  form {
    width: 380px;
  }

  .form-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .form-footer {
    display: flex;
    flex-direction: column;
  }

  .form-button {
    width: 100%;
    margin-bottom: 8px;
  }
}

@media screen and (max-width: 400px) {
  .hero-text {
    font-size: 20px;
    letter-spacing: 0.3rem;
  }

  form {
    width: 300px;
  }
}