@media (max-width: 992px) {
  .header-section .nav-link::after {
    width: 100%;
    left: 0;
  }

  .header-section .offcanvas-body {
    background-color: var(--white);
    padding: 0;
  }

  .hero-section .hero-image {
    display: none;
  }

  .service-section .section-title,
  .work-process-section .section-title,
  .conatact-section .section-title {
    margin: 0px 0px 45px 0px;
  }
}

@media (max-width: 600px) {
  .hero-section .hero-caption h1,
  .hero-section .hero-caption h1 span {
    font-size: 30px;
  }

  .about-section .about-caption h2,
  .about-section .about-caption h2 span,
  .service-section .section-title h2,
  .how-we-work .howwe-work-content .section-title h2,
  .work-process-section .section-title h2,
  .why-choose-section .why-choose-content h2,
  .testimonial-section .section-title h2,
  .conatact-section .section-title h2 {
    font-size: 20px;
  }

  .header-section .conatact-btn {
    display: none;
  }
}

@media (max-width: 768px) {
  .item {
    flex: 1 1 48%; /* Two items per row on smaller screens */
  }

  .local-charges table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border: none !important;
  }
}

@media (max-width: 480px) {
  .item {
    flex: 1 1 100%; /* Stack items vertically on very small screens */
  }
}

@media (max-width: 425px) {
  .conatact-section .contact-item p,
  .conatact-section .contact-item a {
    font-size: 11px;
  }

  .breadcrumb-section .breadcrumb-heading h2 {
    font-size: 30px;
  }

  .breadcrumb-section .breadcrumb li {
    font-size: 14px;
  }
}