@media screen and (max-width: 767px) {
  body {
    font-size: 14px;
  }
  #about-section,
  .show-info {
    grid-template-columns: 1fr;
    height: 100%;
    min-height: 100vh;
    padding: 10px;
  }

  .what-we-do-main section,
  .lets-talk-wrap {
    flex-direction: column;
  }

  .carousel-wraper {
    flex-direction: column-reverse !important;
  }

  .what-we-do-section .sub-section .details p,
  .what-we-do-section .sub-section .details h4 {
    width: 100%;
    text-align: left;
    margin: auto;
  }

  .what-we-do-section .sub-section .details {
    padding: 28px;
  }

  .search-form input {
    width: 60%;
  }

  .search-icon {
    right: 15%;
  }

  #carousel-view {
    height: 100%;
    padding: 0 10px;
  }

  .about-image img {
    height: 220px;
  }

  .carousel-wraper .left-section,
  .carousel-wraper .right-section {
    padding: 10px 0 !important;
    width: 100%;
  }

  .carousel-wraper .horizontal-bar {
    align-items: center;
  }

  .bg-img {
    width: 100%;
  }

  .slidex .slide-text {
    text-align: center;
  }

  .slider figcaption {
    margin: 5px 5px 10px;
    font-size: 10px;
  }

  .lets-talk-form {
    grid-template-columns: 1fr;
    max-width: 86%;
    gap: 30px;
    padding: 0 15px;
  }

  .location-wrap p {
    margin: 40px 20px;
  }

  header nav,
  footer .right-section ul {
    float: none;
  }

  .navbar-list {
    padding: 10px 5px;
  }

  footer {
    flex-direction: column;
    position: absolute;
  }

  footer .right-section,
  footer .left-section {
    width: 100%;
    padding: 0 10px;
    text-align: center;
  }

  .home-section {
    padding: 30px 10px;
  }

  .home-section ul {
    padding: 0;
  }

  .home-section .vertical-bar li {
    margin-right: 0px;
  }

  .home-section .vertical-bar li a {
    padding: 0 2px;
  }

  .loader h1 {
    font-size: 25px;
    letter-spacing: 13px;
  }

  .loader h5,
  .home-section h5 {
    font-size: 8px;
    letter-spacing: 10px;
  }

  #about-section,
  #about .sub-section {
    flex-direction: column;
  }

  #about .sub-section h4 {
    width: initial !important;
    padding: 10px;
    margin: 0;
  }

  #about-section > *,
  #about .sub-section > * {
    width: initial !important;
    padding: 0 30px;
  }

  .location-wrap .bg-image {
    height: 20vh;
  }
}