@media only screen and (max-width: 1600px) {
  h1 {
    font-size: 46px !important;
  }
  h2 {
    font-size: 34px !important;
  }
  h3 {
    font-size: 22px !important;
  }
  h4 {
    font-size: 20px !important;
  }
  h5 {
    font-size: 18px !important;
  }
  h6 {
    font-size: 14px !important;
  }
  p,
  a,
  .form-control,
  option,
  select,
  .nav-link .btn,
  button,
  .accordion-body {
    font-size: 12px !important;
  }

  .test-box {
    p {
      font-size: 16px !important;
    }
  }

  .navbar-brand {
    img {
      width: 120px;
    }
  }
}

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

@media only screen and (max-width: 1200px) {
  .home-hero {
    .arrow-img,
    .offer-img {
      display: none;
    }
  }

  .generic-modal {
    width: 60%;
  }
}

@media only screen and (max-width: 992px) {
  .generic-modal {
    padding: 40px;
  }

  .test-section {
    .test-img {
      width: 100%;
    }
  }

  .footer-brand {
    img {
      width: 150px;
    }
  }

}

@media only screen and (max-width: 768px) {
  .home-hero {
    .form-box {
      form {
        flex-direction: column;
        .main-group {
          flex-direction: column;
        }
      }
      .form-control {
        padding: 13px 10px;
      }
      .btns {
        justify-content: center;
      }
    }
  }

  .offcanvas {
    width: 100% !important;
  }

  .hero-section {
    .offer-img {
      display: none;
    }
    .price-img {
      display: none;
    }
  }

  .btn {
    padding: 10px 15px ;
  }

  .port-box {
    height: auto !important;
  }

  .test-section {
    .test-box {
      flex-direction: column;
      text-align: center;
      justify-content: center;
      .test-img {
        width: 140px;
      }
    }
  }

  .generic-modal {
    width: 70%;
    padding: 40px 20px;
  }
}

@media only screen and (max-width: 576px) {
  h1 {
    font-size: 30px !important;
  }
  h2 {
    font-size: 24px !important;
  }
  h3 {
    font-size: 20px !important;
  }
  h4 {
    font-size: 18px !important;
  }
  h5 {
    font-size: 16px !important;
  }
  h6 {
    font-size: 14px !important;
  }


  .service-section {
    .service-box {
      flex-direction: column;
      padding: 20px;
      margin: 0px;
      height: auto;
      align-items:start;
      gap: 20px;
      .service-img {
        position: static !important;
        width: 100px;
        text-align: start;
      }
    }

  }



  .contact-section {
    .main-group {
      flex-direction: column;
      gap: 0px !important;
    }
    .btn {
      width: 100%;
    }
  }

  .hero-section {
    .brand-img {
      width: 200px !important;
      margin: 0px auto;
    }
  }

  .generic-modal {
    width: 90%;
  }
}