/* HeroBanner design */
.herobanner {
   background-image: url('/images/hero-banner.webp');
   background-repeat: no-repeat;
   background-size: cover;
   height: 800px;
}

@media screen and (max-width: 420px) {
   .herobanner {
      background-image: url('/images/hero-banner.webp');
      background-repeat: no-repeat;
      background-size: cover;
      height: 475px;
   }
 }

.inner-hero-banner {
   background-image: url('/images/Project.png');
   background-repeat: no-repeat;
   background-size: cover !important;
   height: 700px;
}


.inner-hero-banner p{
   color: #fff;
}
.herobanner p{
   color: var(--whiteColor);
}
.sectionOurStory .inner-text{
   padding-top: 20%;
   color: var(--whiteColor);
}  

.section .inner-text {
   padding-top: 10%;
   color: var(--whiteColor);
}

.section .inner-text h1 {
   font-weight: 600;
   font-size: 60px;
}

.section .inner-text p {
   line-height: 24px;
   font-size: 16px;
   font-weight: 400;
   padding-top: 10px;
}

@media screen and (min-width: 767px) {

   .border {
      border: none !important;
   }
}

@media screen and (max-width: 767px) {
   .section .inner-text {
      padding-top: 20%;
      padding-left: 5% !important;
      color: var(--whiteColor);
      text-align: center;
   }

   .section .inner-text h1 {
      font-weight: 600;
      font-size: 30px;
      /* text-align: center; */
   }
   .inner-two{
      padding-bottom: 20px;
      justify-content: start !important;
   }
   .expertise .bg-exp-data {
      height: 520px !important;
   }
  /* shreyas */
   .inner-text h1{
      text-align: center !important;
   }
  .count-inner h2{
   font-size: 25px !important;
   padding-left: 10px !important;
   color: var(--whiteColor);
   }
   .count-inner-4 h2{
      font-size: 25px !important;
      padding-left: 15px !important;
      color: var(--whiteColor);
   }
   .count-inner{
      border-right: none !important; 
      margin-bottom: 20px;
      /* margin-top: 20px; */
   }
   .countImage{
      width: 20px !important;
      height: 25px !important;
   }
   .mt-n1{
      font-size: 13px !important;
      white-space: nowrap;
   }
   .section .bg-exp-data{
      margin-top: 30px !important;
      padding-left: 10px !important;
      padding-bottom: 20px !important;
   }
   .inner-two h6{
      text-align: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
   }
   .innerTwoH6{
      margin-top: 25px !important;
      text-align: center;
   }

   .inner-two .space5{
      display: none !important;
   }

   .two-right h3{
      padding-bottom: 20px !important;
   }


   .inner-two h3{
      text-align: center !important;
      margin-top: 25px !important;
      margin-bottom: 25px !important;
   }

   .innerTwoH3{
      text-align: center !important;
      margin-top: 25px !important;
      margin-bottom: 25px !important;
   }

   .section h3{
      font-size: 30px !important;
      line-height: 25px !important;
   }

   .marginCenter{
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
   }

   .projectsSection{
      margin-top: 40px;
      margin-bottom: 90px;
   }
   .float-end{
      text-align: center !important;
   }
   .inner-two h3{
      margin-left: auto !important;
      margin-right: auto !important;
      font-size: 30px !important;
      line-height: 35px !important;
   }
   .headingProjectSub{
      font-weight: 400;
      font-size: 19px !important;
      font-family: "poppins" !important;
   }
   .headingProjects{
      font-size: 26px !important;
   }

   .bg-exp-data .bg-exp-4{
      text-align: center;
   }

   .cont1{ 
      padding-inline-end: 10px;
      border-right: 5px solid #F2F2F2 !important;
   }

   .section-slider h6{
      text-align: center;
   }


   /* 6-6-24 */
   .solution-one {
      background-image: url('/images/solution-one.png');
      background-repeat: no-repeat;
      background-size: cover;
   }
   /* .readMore{
      visibility: visible !important;
   } */

   .bg-exp-data .seeMore {
      visibility: visible !important;
   }

   .splide .splide__arrows{
      bottom: 100% !important;
      right: 38% !important;
      margin-bottom: 5px;
   }

   /* 7-6-24 */
   .bg-exp-1 {
      /* background: -webkit-linear-gradient(#5aa946b3, 
      #5aa946b3), url("/images/Rectangle15.jpeg") !important; */
      background-repeat: no-repeat !important;
      background-size: cover !important;
      background-position: center center !important;
   }
   .bg-exp-2 {
      background: -webkit-linear-gradient(#5aa946b3, 
      #5aa946b3), url("/images/Rectangle17.jpeg") !important;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      /* background-position: center center; */
   }
   .bg-exp-3 {
      background: -webkit-linear-gradient(#5aa946b3, 
      #5aa946b3), url("/images/Rectangle18.png") !important;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      background-position: center center !important;
  }

  .bg-exp-4 {
   background: -webkit-linear-gradient(#5aa946b3, 
   #5aa946b3), url("/images/Rectangle19.png") !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
   background-position: center center !important;
   }

   .solution-one  .readMore{
      visibility:visible;
   }

   .border{
      border-right:  2px solid rgba(255, 255, 255, 0.5) !important;
      border-top: none !important;
      border-bottom: none !important;
      border-left: none !important;
   } 

   .borderTop{
      padding-top: 30px;
      border-top:  2px solid rgba(255, 255, 255, 0.5) !important;
   }

}

.float-end{
   text-align: end;
}
/* count design */
.section-two{
   padding-top: 50px;
   padding-bottom: 50px;
}
.headingProjects{
   font-size: 20px;
   font-weight: 400;
   line-height: 30px !important;
   color: #303030;
}
.countImage{
   width: 40px;
   height: 50px;
}
.headingProjectSub{
   font-weight: 400;
   font-size: 13px ;
   font-family: "poppins" !important;
}
.section h3{
   font-size: 50px;
   font-weight: 700;
   line-height: 60px;
   color: #303030;
}
.count-design{
   background-color: var(--bgColorPrimary);
}
.count-inner{
   border-right: 2px solid #fff;
}
.count-inner h2{
   font-size: 50px;
   padding-left: 25px;
   font-weight: 700;
   color: var(--whiteColor);
}
.count-inner-4 h2{
   padding-left: 12px;
   font-size: 50px;
   font-weight: 700;
   color: var(--whiteColor);
}
.count-inner h2 span{
   font-size: 15px;
}

.count-design p{
   font-size: 16px;
   color:var(--whiteColor);
   text-align: revert-layer;
}


.counter-center{
   display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
  /* {Turnkey MEP Solutions} */

.two-right .inner-two h6{
   /* padding-left: 10px;
   padding-right: 10px;
   border: 1px solid var(--bgColorPrimary);
   border-radius: 1px;
   box-shadow: 2px 1px; */
   
}
  .two-right {
   background-image: url('/images/two-right-two.png');
   background-repeat: no-repeat;
   background-size: cover;
   /* height: 800px; */
}
.two-left {
   background-image: url('/images/two-left.png');
   background-repeat: no-repeat;
   background-size: cover;
   /* height: 800px; */
}

.two-right .inner-two {
   display: flex;
   align-items: baseline;
   height: 100%;
   flex-direction: column;
   flex-wrap: nowrap;
   justify-content: center;
}
.two-right h3{
   font-size: 50px;
   font-weight: 700;
   padding-bottom: 20px;

}
.two-right p{
   color: #8B8E8F !important;
}

.section h6{
   color: #59AA47;
   font-size: 16px;
   text-transform: uppercase;
   /* text-transform: capitalize; */

   
}

p.paragraph {
   color: #8B8E8F !important;
}

/* solution-slider */

.splide__arrow {
  
   border-radius: 0% !important;
   cursor: pointer;
   
}

.solution-slider{
   background-color: var(--bgColorSecondary);
}
.solution-slider h5{
   color: var(--whiteColor);
   font-size: 50px;
   font-weight: 600;
   padding-bottom: 20px;
}


.two-left .inner-two {
   display: flex;
   align-items: baseline;
   height: 100%;
   flex-direction: column;
   flex-wrap: nowrap;
   justify-content: center;
}

/* expertise */

.expertise {
   background-color: #F2F2F2;
}

.expertise .col-lg-6 a{
   justify-content: end;
}

/* .bg-exp {
   background-image: url('/images/exp0.png');
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 9px;
} */

.expertise .bg-exp-data{
   display: flex;
   align-items: baseline;
   height: 100%;
   flex-direction: column;
   flex-wrap: nowrap;
   justify-content: center;
}

.expertise .bg-exp-data h6{
   color: var(--whiteColor);
   font-size: 10px;
}

.expertise .bg-exp-data h3{
   color: var(--whiteColor);
   font-size: 20px;
}

.expertise .bg-exp-data p{
   color: var(--whiteColor);
   font-size: 10px;
}

.quality .bg-exp-data{
   padding-top: 0px !important;
}
.section .bg-exp-data{
  /* height: 400px; */
   border-radius: 15px;
   width: 100%;
   padding-right: 10px;
   padding-left: 40px;
   margin-top: 54px;
 }
 
 .bg-exp.bg-exp-data {
   padding-top: 100px;
   padding-bottom: 150px;
}

.bg-exp-1{
   /* background: -webkit-linear-gradient(#30303066,  #30303066), url("/images/Rectangle15.jpeg"); */
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
}

.bg-exp-1:hover {
    background: -webkit-linear-gradient(#5aa946b3, 
    #5aa946b3), url("/images/Rectangle15.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
 }


 .bg-exp-2{
   /* background-image: url('/images/Rectangle17.jpeg'); */
   background: -webkit-linear-gradient(#30303066, 
    #30303066), url("/images/Rectangle17.jpeg");
   background-repeat: no-repeat;
   background-size: cover;
   /* background-position: center center; */
}

.bg-exp-2:hover {
    background: -webkit-linear-gradient(#5aa946b3, 
    #5aa946b3), url("/images/Rectangle17.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    /* background-position: center center; */
 }


 .bg-exp-3{
   background: -webkit-linear-gradient(#30303066, 
    #30303066), url("/images/Rectangle18.png");
   /* background-image: url('/images/Rectangle18.png'); */
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
}

.bg-exp-3:hover {
    background: -webkit-linear-gradient(#5aa946b3, 
    #5aa946b3), url("/images/Rectangle18.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}


 .bg-exp-4{
   background: -webkit-linear-gradient(#30303066, 
    #30303066), url("/images/Rectangle19.png");
   /* background-image: url('/images/Rectangle19.png'); */
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
}

.bg-exp-4:hover {
    background: -webkit-linear-gradient(#5aa946b3, 
    #5aa946b3), url("/images/Rectangle19.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
 }

 .inner-data-cont{
   display: block;
}

.seeMore{
   visibility:hidden;
}

 /* Show inner data when parent div is hovered */
.bg-exp-data:hover .seeMore {
   visibility: visible;
}



 .expertise .col-lg-3 {
   display: flex;
   justify-content: center; /* Center horizontally */
   align-items: center; /* Center vertically */
    height: 400px;  
 }
/* quality */

.quality {
   background-color: #F2F2F2;
}

.inner-hero-banner .inner-text{
   display: flex;
   align-items: baseline;
   height: 100%;
   flex-direction: column;
   flex-wrap: nowrap;
   padding-left: 12%;
   justify-content: center;
}


.herobanner p{
   font-size: 20px;
}
.line {
   background-color: var(--bgColorPrimary);
   height: 5px;
   width: 100px;
}


.section .primary-text {
   text-align: center;
   font-size: 36px;
   font-weight: 700;
   line-height: 40px;
   padding-bottom: 50px;
   text-transform: uppercase;
}
.section .primary-text span{
 color: var(--bgColorPrimary);
}

.readMore{
   visibility: hidden;
}

.solution-one:hover > .readMore{
   visibility:visible;
   z-index: 2;
}

.overlay {
   position: absolute;
   top: 20;
   left: 20;
   width: 83%;
   height: 83%;
   background-color: rgba(0, 0, 0, 0.5); /* adjust the opacity value to your liking */
   z-index: 1; /* make sure the overlay is on top of the image */
   border-radius: 10px;
 }
 
 .solution-item:hover::before .overlay {
   background-color: rgba(0, 0, 0, 0.2); /* change the opacity on hover */
 }

.solutionOne:hover {
   background-image: url('/images/OurSolutionsOne.webp');
   background-repeat: no-repeat;
   background-size: cover;
}

.solutionTwo:hover{
   background-image: url('/images/OurSolutionsTwo.webp');
   background-repeat: no-repeat;
   background-size: cover;
}

.solutionThree:hover{
   background-image: url('/images/OurSolutionsThree.webp');
   background-repeat: no-repeat;
   background-size: cover;
}

.solutionFour:hover{
   background-image: url('/images/OurSolutionFour.webp');
   background-repeat: no-repeat;
   background-size: cover;
}

.solution-item{
   display: flex;
   align-items: baseline;
   flex-direction: column;
   align-items: center;
   flex-wrap: nowrap;
   margin: 25px;
   justify-content: center;
   border-radius: 10px;
   height: 275px;
   border: 1px solid #fff;
}

.section .section-slider .solu-heading-tag{
   color:#fff;
   font-size: 18px;
   font-weight: bold;
   padding-top: 15px;
   align-items: center;
   text-align: center;
   z-index: 2;
}

.section .section-slider span{
   color: var(--bgColorPrimary);
   padding-top: 5px;
   
}


@media screen and (min-width: 779px) and (max-width: 1366px) {
   .border{
      border-right:  2px solid rgba(255, 255, 255, 0.5) !important;
      border-top: none !important;
      border-bottom: none !important;
      border-left: none !important;
   } 

   .borderTop{
      padding-top: 30px;
      /* border-top:  2px solid rgba(255, 255, 255, 0.5) !important; */
   }

   .count-inner {
      border-right: none;
  }

  .section .inner-text {
   padding-top: 20%;
   }
}