

/*responsive*/
@media (min-width: 576px) {
  .text-sm-justify {
    text-align: justify !important;
  }
}
@media (min-width: 768px) {
  .text-md-justify {
    text-align: justify !important;
  }
}
@media (min-width: 992px) {
  .text-lg-justify {
    text-align: justify !important;
  }
}

@media (min-width: 1200px) {
  .text-xl-justify {
    text-align: justify !important;
  }
}
@media (min-width: 1400px) {
  .container-lg {
    max-width: 1280px;
  }
  .text-xxl-justify {
    text-align: justify !important;
  }
}
@media (min-width: 1900px) {
  .container-lg {
    max-width: 1600px;
  }
}

@media (max-width: 1300px) {
  .testimGrid{aspect-ratio: 16/9;}
}

@media (max-width: 1199.9px) {
  .title-xxl{font-size: clamp(1.75rem, 6vw, 3rem);}
  .hm-featured-slide-text .project-icons{gap: .75rem;}
  .hm-featured-slide-text .icon-item .in p{white-space: nowrap;}
}

@media (max-width: 991.9px) {
    :root {--header-height: 87px;}
    html{font-size: 87.5%;}
    .container-lg, .contactFormBox .inner {padding-left: 1.5rem; padding-right: 1.5rem;}
    .logo img{width: 120px;}
    .logo a::before{left: 1px; top: -42px; height: 180%;}
    .logo.active, .logo.fixed img, .logo.proactive{width: 90px;}
    .logo.active a::before, .logo.fixed a::before, .logo.proactive a::before{left: 10px; top: -8px; height: 123%;}
    .headBtn{padding: 5px; width: 120px; font-size: 13px; right: 36px;}
    .projectsBtn span{padding: 5px;}
    .menuBtn div{border-radius: 0 50% 50% 0; width: 40px; height: 40px; padding: 12px 7px;}
    .navigationContainer{top: 36px; bottom: 36px; overflow: auto;}
    .navigationContainer.showMenu, .searchContainer.searchContainerShow{left: 36px; right: 36px;}
    .searchBtn{width: 36px; line-height: 36px; font-size: 15px;}
    .searchContainer .textfieads input{height: 35px; padding: 8px 150px 8px 10px;}
    .searchContainer .textfieads .search{height: 36px; width: 140px; letter-spacing: normal; font-size: 13px;}
    .banner, .inside-hero.project-hero{height: 520px;}
    .project-icons{justify-content: center;}
    .hm-featured-slide-text .project-icons{gap: 1.5rem;}
    .hm-featured-slide-text .icon-item .in{flex-direction: column; justify-content: center; align-items: center; text-align: center;}
    .statsBox h2{font-size: 1.25rem;}
    .testimonial-slide{display: none;}

    .client-speak-slide{
      display: block;
    }
    .footer-area a, .copyrights p, .form-select, .form-control, .viewmore .button{font-size: .875rem;}

    .teamContainer, .team-image img, .teamTextContainer .scroller{height: auto;}
    .team-image{position: relative; z-index: 1;}
    /* .team-image::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, transparent 80%, var(--secondary-color-light) 100%);} */
    .team-image img{aspect-ratio: 1/1; object-fit: cover; object-position: center 30%;}
    .listContainer ul.d-flex li{width: 100%;}

    .projects-pointers{text-align: center; border-bottom: 1px solid rgb(255 255 255 / 20%); padding-bottom: 2rem;}
    .projects-pointers li + li{margin-top: 0;}
    .projects-pointers li{width: 40%; flex-grow: 1;}
    .overview-text{height: auto; text-align: center; padding-right: 0;}
    .project-logo{width: 150px;}
    .mapBox .mapIcon img{max-width: 110px;}

    .masonry-grid{display: flex; flex-wrap: wrap;}
    .masonry-grid div[class^="grid-item"]{width: calc(50% - 1.125rem);}



    /* overview */
.hidden-title{
  display: none;
}

/* hidden-title */
.hidden-title{
  display: none;
}
    
}

@media (max-width: 767.9px) {
    .hm-featured-slide-text{text-align: center;}
    .hm-featured-slide-text p.d-flex{justify-content: center;}
    .project-icons{justify-content: center;}
    .icon-item .in{flex-direction: row; justify-content: flex-start; text-align: left;}
    .readmore .button{min-width: 120px; padding: .75rem 1.5rem;}
    .readmore .button.button-lg {min-width: 150px; padding: 1rem 2rem;}
    .section-whyChooseUs{height: auto; padding: 30px 0;}
    .section-whyChooseUs .bgs{display: none;}
    .whyChoose-list{gap: 2rem;}
    .whyChoose-list .whyChoose-list-item, .whyChoose-list .whyChoose-list-item.active{width: 100%;opacity: 1;}
    .whyChoose-list .whyChoose-list-item{background-attachment: unset;}
    .whyChoose-list .whyChoose-list-item::before{background: linear-gradient(#000000ab, rgb(0 0 0 / 80%));}
    .whyChoose-list .whyChoose-list-item.active .inner{background-color: transparent;}
    .whyChoose-list .whyChoose-list-item .inner{aspect-ratio: 5/3;}
    .whyChoose-list .whyChoose-list-item .details{margin-bottom: 0;}
    .whyChoose-list .whyChoose-list-item .details .hide{transform: none; opacity: 1; visibility: visible;}
    .footer-bottom{margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(0 0 0 / 10%);}
    .footer-bottom > div{flex-direction: column; row-gap: 10px;}
    .modal-body .image-container img{aspect-ratio: 8/5;}
    button.close{right: 5px; top: 5px; font-size: 2rem; line-height: 0;}
    .logoBox .inner{padding: 1rem; aspect-ratio: auto;}
    .bigframe .inner{aspect-ratio: 5/4;}
    .connectivity-slider{padding: 0;}
    .mapBox{position: relative; left: 0; transform: none; margin-bottom: 3rem; padding: 5px;}
    .mapBox iframe{width: 100%; height: 450px; border-radius: 0;}
    .connectivity::before{top: auto; bottom: calc(5rem + 20px); transform: none;}
    .connectivity-slider div[class^='swiper-button']{top: auto; bottom: 5rem; transform: none; margin-top: 0;}
    .gallery-card .blog-image img{aspect-ratio: 3/2;}

    .gallery-logo.position-absolute{
      position: relative !important;
      top: auto !important;
      left: auto !important;
      transform: none !important;
      height: 40px !important;
      bottom: 0;
      max-width: 320px;
      margin: 30px auto 0;
    }
    .gallery-logo.position-absolute .swiper-pagination{bottom: 20px;}
}

@media (max-width: 575.9px) {
  html{font-size: 75%;}
  body{font-size: 1rem;}
  :root {--header-height: 80px;}
  .container-lg{padding-left:18px; padding-right: 18px;}
  .btnContainer{flex-wrap: wrap;}
  .readmore .button.button-lg {min-width: 120px; padding: 0.5rem 1rem;}
  .smallHeading{font-size: 1.25rem;}
  .statsBox h2 {font-size: 1.3rem;}
  .statsBox p{font-size: 0.9rem;}
  .insideBox{text-align: center;}
  .foot-menu .insideBox{padding-top: 30px; border-top: 1px solid rgb(0 0 0 / 10%);}
  .insideBox ul{justify-content: center;}
  .insideBox ul:not(.socialBtn){display: flex; flex-wrap: wrap; gap: 10px;}
  .insideBox ul:not(.socialBtn) a{padding: 8px 12px; border-radius: 40px; border: 1px solid rgb(0 0 0 / 10%);}
  .insideBox ul:not(.socialBtn) a:hover{border-color: var(--orange-color);}
  .footer-bottom{padding-bottom: 1.5rem;}

  .icon-item .in {flex-direction: column; justify-content: center; align-items: center; text-align: center;}
  .icon-circular{width: 32px; height: 32px;}
  /* .contactBox p br{display: none;} */
  .contactBox p, .contactBox h4{text-align: center;}
  .address li{justify-content: center; width: 50%; flex-grow: 1; align-items: center;}
  .contactBox .viewmore .button{margin: 0 auto;}
  .site-addressBox .inner{text-align: center;}
  .masonry-grid div[class^="grid-item"]{width: 100%;}
  .projects-pointers li{letter-spacing: normal;}
  .heroText-top{flex-wrap: wrap; gap: 10px;}

  .whyChoose-list .whyChoose-list-item .inner {
    aspect-ratio: 4 / 4;
  }





  .people-slide .inner::before {
    background: linear-gradient(#0000008f, rgb(0 0 0 / 85%));
}

ul.address {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}


  /* footer */
  .footer-area{
    padding-bottom: 0;
  }
}

@media (max-width: 480px) {
  .topHead .icon{width: 24px;}
  .enquiryWrapper {--width: 25px; padding: 7px;}
  .headingContainer {flex-direction: column; align-items: center !important; gap: 10px;}
  .heading{margin-left: auto; margin-right: auto; text-align: center;}
  .iconBox .inner,.testimBox .inner{text-align: center;}
  .iconBox .inner .img-fluid{max-width: 40px; margin-left: auto; margin-right: auto;}
  .h6, h6 {font-size: 1.25rem;}
  .footer-logo{width: 130px;}
  .logoBox .img-fluid{padding: 2rem 5%;}
  .projects-pointers li p{font-size: 1.25rem;}
  div[class^='swiper-button']{width: 32px; height: 32px; margin-top: -16px;}
  div[class^='swiper-button']:after{font-size: 10px;}


  .bottom-cta a {
    display: flex;
    flex-direction: column;
    width: 48%;
    text-align: center;
}

}

@media (max-width: 425px) {
}

@media (max-width: 375px) {
  .readmore .button{display: flex; align-items: center; justify-content: center;}



      .bottom-cta a {
        width: 45%;
    }
}

@media (max-width: 320px) {
  .logoBox{width: 100%;}
  .logoBox .img-fluid{padding: 2rem 15%;}
  .projects-pointers li{width: 100%;}
}