.commercialsection1 .container{
    margin: 3.6% auto 3% auto;
}
.commercialsection1 .nav-pills .nav-item .nav-link {
    padding-right: 1.2rem;
        margin-left: 2.2rem; 
    padding-left: 1.2rem;

 }
  .commercialsection1 #pills-tab{
    margin-left: 4%;
  }
  .commercialsection1 #pills-home-tab{
    font-size: 15px !important;
    color: #727271;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background-color: #a77b40 !important;
    color: white !important;
}
  
.tabcontentsection .tab-pane h1{
    color: #1f1d1d !important;
    font-size: 35px;
    font-weight: bolder;
    line-height: 45px;
}
.tabcontentsection .tab-pane p{
    font-size: 16px;
    line-height: 45px;
    color: #888888;
    margin-top: -5px
}
.tabcontentsection .tab-pane img{
    border-radius: 3px;
}
#contentblock2{
    padding-left: 3%;
    padding-top: 5%;
}
#contentblock1{
    margin-top: 5%;
    margin-bottom: 5%;
}
#columnblock1{
    padding-left:2.5%
}
/* #columnblock1 i{
    padding: 24px;
    font-size: 20px;
    width: 100%;
    text-align: center;
} */
.tabcontentsection .align-middle {
    display: flex;
    align-items: center;
}
.tabcontentsection .align-middle p{
    color: #1f1d1d;
    font-size: 17px;
    line-height: 45px;
}
#columnblock1 img{
   
    padding: 15px;
    
    width: 100%;
    text-align: center;
}
#columnblock1 .border-radius{
    border: 1px solid #dfdfdf;
    border-radius: 50%;
}
#columnblock1 .brochure{
   margin-left: 5%;
    background-color: black;
    color: white;
}
#columnblock1 .brochure{
    background-color: white;
    color: black;
}
#columnblock1 .brochure:hover{
    background-color: black;
    color: white;
}
#columnblock1 .explore:hover{
    background-color: white;
    color: black; 
}
.image-container {
    position: relative;
    display: inline-block;
 }

 .image-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* adjust the opacity and color as needed */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
 }

 .button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
 }



 .image-container:hover .overlay {
    opacity: 0.8; /* adjust the opacity as desired */
 }
 
 .image-container:hover .button-overlay {
    opacity: 1;
 }
 
 .image-container:hover img {
    opacity: 0.5;
 }
 
 .image-container img {
    transition: opacity 0.3s ease;
    z-index: -1;
 }


 #button-container{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5%;
 }
 #button-container .line{
    /* border:1px solid grey; */
    flex: 1;
  border: none;
  border: 1px solid grey;
  margin: 0;
  width:100%;
 }
 #button-container .line12{
    /* border:1px solid grey; */
    flex: 1;
  border: none;
  border: 1px solid grey;
  margin: 0;
  width:100%;
 }
 @media(max-width:767px){
    .tabcontentsection .align-middle{
        justify-content: center;
    }
    #columnblock1 img{
        width:72% !important;
    }
 }

 /* /////////////////////////residential projects///////////////////////////// */
 /*  */
 #button-container21{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5%;
 }
 #button-container21 .line21{
    /* border:1px solid grey; */
    flex: 1;
  border: none;
  border: 1px solid grey;
  margin: 0;
  width:100%;
 }
 #contentblock21{
    margin-top: 5%;
    margin-bottom: 5%;
}
#columnblock21{
    padding-left:2.5%
}
.loadmore{
    background-color: #eeeeee;
    cursor: pointer;
    width: 18%;
    padding: 1.5%;
}
.loadmore:focus{
    border-color: #f9fafb00 !important;
    box-shadow: 0 0 0 0.25rem rgb(211 212 213 / 0%) !important;
}


#button-container23{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5%;
 }
 #button-container23 .line23{
    flex: 1;
  border: none;
  border: 1px solid grey;
  margin: 0;
  width:100%;
 }

 #button-container22{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5%;
 }
 #button-container22 .line22{
 flex: 1;
  border: none;
  border: 1px solid grey;
  margin: 0;
  width:100%;
 }