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

  .header-section .offcanvas-body {
    background-color: var(--dark);
  }

  .header-section .top-bar {
    display: none;
  }

  .hero-section .hero-image img {
    height: auto;
  }
  .hero-section .hero-caption,
  .hero-section .hero-caption p {
    margin-right: 0px;
  }

  .hero-section .hero-caption h2 {
    font-size: 30px;
  }

  .hero-section .hero-caption .color-text {
    font-size: 22px;
    color: var(--white);
    font-weight: 700;
  }

  .testimonial-section .section-title,
  .service-section .section-title,
  .gallery-section .section-title {
    text-align: center;
    margin: 0px 0px 45px 0px;
  }
}

@media (max-width: 768px) {
  .header-section .top-bar {
    display: none;
  }
  .funfact-section .fact-item {
    flex-direction: column;
  }
}

@media (max-width: 500px) {
  .header-section .conatact-btn {
    display: none;
  }

  .header-section .conatact-link {
    display: block;
  }
}

@media (max-width: 375px) {
  .footer .footer-item .contact-list li a {
    font-size: 14px;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 400px) {
  .contact-section .service-inner-item a {
    font-size: 10px;
  }

  .contact-section .contact-item p {
    font-size: 10px;
  }
}

@media (max-width: 475px) {
  .why-choose-section .why-choose-item .section-title h2,
  .why-choose-section .why-choose-item .choose-section-title h2,
  .testimonial-section .section-title h2,
  .contact-section .section-title h2,
  .service-section .section-title h2,
  .about-section .about-content h2,
  .gallery-section .section-title h2 {
    font-size: 22px;
  }
}

@media (max-width: 600px) {
  .about-section .mashion-image img,
  .about-section .mashion-image::before {
    height: 100px;
    width: 100px;
  }
}