body {
    
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    
  }

  
  
  /* Remove horizontal scroll bar on mobile devices */
  @media (max-width: 768px) {
    body {
      overflow-x: hidden; /* Prevents horizontal scrolling on mobile devices */
    }
    html {
        /* This ensures that padding and border are included in the box sizing */
        box-sizing: border-box;
        overflow-x: hidden; /* Prevents horizontal scrolling on all devices */
      }
  }
  .project-bar{
    display: flex;
  
    gap: 60px;
    padding: 160px 180px 80px 180px;
    background-color: #008081;
    height: 80px;
   
    justify-content: center;
  }
  .project-bar .bar-1{
    display: flex;
    text-align: left;
  }

  /* bannerghatta,Bengaluru */
.bar1-text{
font-family: 'Teko';
font-style: normal;
font-weight: 400;
font-size: 54px;
line-height: 22px;

text-transform: capitalize;

color: #FFFFFF;
}


.bar2-text{
margin-top: 10px;

font-family: 'Teko';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 22px;
/* identical to box height, or 92% */
text-transform: capitalize;
color: #FFFFFF;
}

.bar3-text{


font-family: 'Teko';
font-style: normal;
font-weight: 400;
font-size: 32px;
line-height: 22px;

text-align: center;
text-transform: capitalize;

color: #FFFFFF;
}

.bar4-text{

font-family: 'Teko';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 22px;
/* identical to box height, or 110% */
text-align: center;
text-transform: capitalize;

color: #D7D7D7;
}

.vertical-line1{


border: 1px solid #FFFFFF;




height: 50px;

}
/* Rectangle 483 */

.project-images-all{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
  margin-top: 40px;
  padding: 0px 80px;
}


@media (max-width: 768px){
  .project-bar {
    display: flex;
    gap: 20px;
    padding: 260px 180px 80px 180px;
    background-color: #008081;
    height: 80px;
    justify-content: center;
}
.bar1-text {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 400;
  font-size: 34px;
  line-height: 22px;
  text-transform: capitalize;
  color: #FFFFFF;
}
.project-images-all {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
  margin-top: 40px;
  padding: 0px 40px;
  align-items: center;
  justify-content: center;
}


}

@media (max-width: 768px){
  .project-bar {
    display: flex;
    gap: 20px;
    padding: 240px 180px 80px 180px;
    background-color: #008081;
    height: 80px;
    justify-content: center;
}
.vertical-line1{


  border: 1px solid #FFFFFF;
  align-items: center;
  justify-content: center;
  
  
  

  height: 50px;
  
  }
.bar1-text {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 400;
  font-size: 34px;
  line-height: 22px;
  text-transform: capitalize;
  color: #FFFFFF;
}
.project-images-all {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
  margin-top: 40px;
  padding: 0px 40px;
  align-items: center;
  justify-content: center;
}
.bar3-text {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 100;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  text-transform: capitalize;
  color: #FFFFFF;
  /* text-align: right; */
  margin-bottom: -9px;
  width: 100px;
}
.bar2-text {
  margin-top: 10px;
  font-family: 'Teko';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  text-transform: capitalize;
  color: #FFFFFF;
  width: 120px;
}
.whole-bar{
  display: flex;
 gap: 20px;
 
 margin-bottom:10px ;
}
.bar4-text {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
 
  text-align: center;
  text-transform: capitalize;
  color: #D7D7D7;
}

}