/* ========================================
   TABLET
======================================== */

@media (max-width: 1100px) {
  section.banner {
    height: calc(60vh - 116px);
}
section.whts-w {
  padding: 50px 0;
}
section.what-we-offer,section.services-sec,section.how-it-works,section.features,section.our-achivement,section.contact-main{
  padding: 50px 0;
}
h2, .h2 {
  font-size: 26px;
  line-height: 34px;
}
.icon-we {
  gap: 15px;
}
section.testimonials {
  padding: 50px 0 80px;
}
.swiper-pagination {
  bottom: 30px !important;
}
.my-swiper {
  margin-top: 30px;
}
.services-flex {
  margin-top: 30px;
}
.services-flex {
  justify-content: flex-start;
  gap: 15px;
}
.inner-services {
  padding: 20px;
}
.how-flex {
  margin-top: 30px;
}
.features-flex {
  margin-top: 30px;
  gap: 20px 0px;
}
.achive-width {
  width: 55%;
}
.contact-width {
  width: 49%;
}
.contact-width ul li {
  padding: 20px;
  margin-bottom: 15px;
}
.form-flex {
  gap: 10px;
}
.form-flex {
  margin-bottom: 15px;
}
.contact-form-flex {
  margin-top: 30px;
}

.inner-contact .custom-heading p {
  max-width: 100%;
}
.quotes-width1 {
  width: 20%;
}
.quotes-width {
  width: 80%;
}
.quotes-width h2 br {
  display: none;
}

footer.footer {
  padding-top: 50px;
}
.footer-width1 {
  width: 25%;
}
.footer-width {
  width: 20%;
}
div#last-li {
  width: 30%;
}
.footer-flex {
  margin-bottom: 20px;
}
.bottom-footer ul {
  gap: 10px;
}
.banner-boxs {
  width: 70%;
  margin-top: 30px;
}
.inner-services p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
h3, .h3 {
  font-size: 20px;
  line-height: 26px;
}
section#about-badges .whts-width {
  padding: 15px;
  width: 24%;
}
section.wht-we-about,section.capabilities {
  padding: 50px 0;
}
section#about-badges .whts-width {
  width: 49%;
  margin-bottom: 20px;
}
section.faqs {
  padding: 50px 0;
}
.faqs-ineer {
  padding-top: 30px;
}
}
@media (max-width:992px) {
  .headerHamburger {
      display: block;
    }
    .headerMobileOverlay {
      display: block;
    }
    .navbar {
      position: fixed;
      top: 0;
      left: -100%;
      width: 80%;
      height: 100vh;
      overflow: auto;
      background-color: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-transition: .4s ease-in-out;
      transition: .4s ease-in-out;
      z-index: 5;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      gap: 30px;
    }
    .navbar ul {
      display: block;
      margin-right: 20px;
    }
    .navbar ul li {
      width: 100%;
      padding: 9px 0px;
      margin-left: 0px !important;
      text-align: center;
    }
    .navbar ul li a {
      font-size: 14px !important;
    }
    .navbar.active {
      left: 0;
    }
    .mobile-nav-logo {
      width: 100%;
      max-width: 30%;
      margin: 0 auto;
      display: block;
  }
    .mobile-nav-logo img {
      width: 100%;
      max-width: 100%;
    }
    .headerHamburger {
      position: relative;
    }
    .headerHamburger button {
      position: relative;
      background: transparent;
      outline: 0px;
      border: 0px;
      z-index: 2;
    }
    .headerHamburger button span {
      position: relative;
      display: block;
      background: #9a7551;
      width: 35px;
      height: 2px;
      margin-bottom: 5px;
      -webkit-transition: 0.4s ease-in-out;
      transition: 0.4s ease-in-out;
    }
    .headerHamburger button span:last-child {
      margin-bottom: 0px;
    }
    .headerHamburger button {
      -webkit-transition: 0.8s ease-in-out;
      transition: 0.8s ease-in-out;
    }
    .headerHamburger button.active {
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
    }
    .headerHamburger button.active span {
      background: #9a7551;
    }
    .headerHamburger button.active span:nth-child(1) {
      display: none;
    }
    .headerHamburger button.active span:nth-child(2) {
      -webkit-transform: translate(0px, 7px);
              transform: translate(0px, 7px);
    }
    .headerHamburger button.active span:nth-child(3) {
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
    }
    .headerMobileOverlay {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      -webkit-transition: 16s ease-in-out;
      transition: .3s ease-in-out;
      background: rgba(255, 255, 255, 0.5);
      width: 100%;
      height: 100%;
      z-index: 1;
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    .headerMobileOverlay.active {
      -webkit-transform: translateX(0%);
              transform: translateX(0%);
    }
    header#header {
      position: fixed;
    }
    h1, .h1 {
      font-size: 42px;
      font-style: normal;
      font-weight: 600;
      line-height: 58px;
  }
  .demo-btn {
    display: none;
}

#mobile-btn{
  display: block!important;
}

nav#nav ul li a {
  color: #282224;
}
.banner-boxs {
  width: 90%;
  margin-top: 30px;
}
.inner-banner p {
  max-width: 90%;
}
.whts-width p {
  line-height: 20px;
}
.whts-width h2{
    font-size: 34px;
}
section.whts-w {
  padding: 30px 0;
}
.offer-width {
  width: 100%;
  margin-bottom: 20px;
}
.offer-img img {
  height: 400px;
  object-fit: cover;
}
section.what-we-offer {
  padding: 30px 0 0px 0;
}
.custom-heading h2 {
  margin-top: 5px;
}
.services-headings p {
  max-width: 60%;
}
.services-flex {
  justify-content: flex-start;
  gap: 14px;
}
.all-banner::before, .all-banner::after, section.how-it-works::before, section.how-it-works::after {
  width: 200px;
  height: 200px;
}
.how-top span {
  font-size: 22px;
}
.how-width {
  width: 24%;
  padding: 15px;
}
.dta-pro {
  width: 38px;
  height: 38px;
  border-radius: 7px;
}
.how-width {
  width: 49%;
  padding: 15px;
  margin-bottom: 15px;
}
.achive-width {
  width: 100%;
  margin-bottom: 20px;
}
.contact-width {
  width: 100%;
}
.footer-width1 {
  width: 100%;
  margin-bottom: 30px;
}
.footer-width {
  width: 30%;
}
div#last-li {
  width: 38%;
}
.achive-width {
  width: 100%;
  margin-bottom: 20px;
}

.contact-width {
  width: 100%;
}

.bottom-footer {
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}
footer.footer {
  padding-top: 30px;
}
section.capabilities .features-width {
  padding: 20px;
}
section.capabilities .features-width h4 {
  font-size: 22px;
}
.inner-colabs {
  padding: 20px;
  flex-wrap: wrap;
}
.colabs-content {
  width: 100%;
}
section.testimonials {
  padding: 0px 0 80px;
}
section#blog-page .services-width {
  padding: 12px;
  border: 1px solid #E2E8F0;
  border-radius: 9px;
  width: 49%;
}
.faq-answer p {
  margin: 0;
  padding: 16px 32px 22px;
}
.faqs-ineer {
  width: 100%;
  max-width: 100%;

}
section#blog-page .services-width {
  padding: 12px;
  width: 100%;
}
section#contact-us .contact-width:first-child {
  width: 100%;
  margin-bottom: 20px;
}
section#contact-us .contact-width:last-child {
  width: 100%;

}
}

/* ========================================
 MOBILE
======================================== */

@media (max-width: 767px) {
  section.banner {
    margin-top: auto;
    min-height: 100vh;
}
.top-bar {
  display: none;
}
header#header {
  height: auto;
}
.banner-boxs{
    width: 100%;
}
.inner-banner p {
  max-width: 100%;
}
.whts-width {
  width: 50%;
  margin-bottom: 20px;
}
.whts-width:nth-child(2){
  border-right: 0px;
}
section.whts-w {
  padding: 30px 0 0px;
}
.services-width {
  width: 100%;
}
.services-headings {
  flex-wrap: wrap;
}
.services-headings p {
  max-width: 100%;
  margin-top: 10px;
}
.how-width {
  width: 100%;
}
.how-top span {
  font-size: 32px;
}
.dta-pro {
  width: 48px;
  height: 48px;
}
.features-width {
  width: 100%;
}
.our-achive-flex {
  padding: 20px;
}
.quote-form {
  padding: 15px;
}
.footer-width {
  width: 48%;
}
div#last-li {
  width: 100%;
}
.inner-banner h1 {
  font-size: 40px;
  line-height: 48px;
}
section.capabilities .features-width {
  width: 100%;
}
section.wht-we-about .services-width:first-child {
  width: 100%;
}
section.wht-we-about .services-width:last-child {
  width: 100%;
  height: fit-content;
}
.quotes-flex {
  padding: 20px;
  flex-wrap: wrap;
}
.quotes-width,.quotes-width1  {
  width: 100%;
}
.quotes-width1 {
  justify-content: flex-start;
  margin-top: 20px;
}
h2, .h2 {
  font-size: 22px;
  line-height: 28px;
}
.quote-form h2 {
  margin-bottom: 0px;
}
section#contact-us .contact-width:last-child {
  padding: 15px;
}
section.all-banner {
  margin-top: 75px;
}
section#contact-us .contact-width:first-child {
  padding: 15px;
}
.contact-content {
  width: 90%;
}
.servic-banner-flx ul {
  flex-wrap: wrap;
  gap: 20px;
}
.servic-banner-flx ul li {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.inner-testi p {
    min-height: auto;
}
}