.body-content-wrapper{
    padding-top: 30px;
    padding-bottom: 30px;
}






/* Sector Tiles-------------------------------------- */
.construction{
  background-image: url(../images/sector-img/construction.jpeg);
}
.infrastructure{
  background-image: url(../images/sector-img/roads-infrastructure.jpeg);
}
.petrochemical{
  background-image: url(../images/sector-img/petrochemical.jpeg);
}
.power{
  background-image: url(../images/sector-img/power-generation.jpeg);
}
.railways{
  background-image: url(../images/sector-img/railway.jpeg);
}
.ports{
  background-image: url(../images/sector-img/ports-shipping.jpeg);
}
.manufacturing{
  background-image: url(../images/sector-img/manufacturing.jpeg);
}
.recycling{
  background-image: url(../images/sector-img/recycling.jpg);
}
.mines{
  background-image: url(../images/sector-img/mining.png);
}
.defence{
  background-image: url(../images/sector-img/defence.jpeg);
}
.grid-table-wrapper{
  margin: auto;
  max-width: var(--bodyMaxWidth);
  width: 100%;
}
.sector-item-container{
  margin: 60px;
  box-shadow: var(--box-shadow);
}

.sector-element-container {
  width:100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 2;
  grid-auto-flow: dense;
}
.sector-item-container{
  transition: 0.4s ease-in-out;
}
.sector-item-container:hover{
  transform: scale(1.02);
}
.content{
  padding: 0;
  padding-top: 40%;
  margin: 0;
  height: 100%;

  background-color: var(--image-background-color);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.text-box-content{
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  align-items: center;
  background-color: var(--text-box-color);
  margin-bottom: 0;
  margin-top: auto;
}
.text-box-content h3{
  padding: 15px;
  font-size: 40px;
  margin: 0;
  color: white; 
}
.text-box-content .icon{
    margin: 15px;
    height: 40px;
    width: 50px;
    background-image: url(../images/icons/arrow-icon-white.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
  }
 
/* Grid Controls------------------------------------------------------------------------------------------------------------------ */


/* Hire Description into drop ----------------- */
@media screen and (max-width: 1200px) {
  
    .text-box-content h3{
      font-size: 20px;
      
    }
    .text-box-content .icon{
      margin: 15px;
      height: 20px;
      width: 25px;
    }
    .sector-item-container{
      margin: 30px;
    }
    
  }
  @media screen and (max-width: 600px) {
    .sector-element{
        height: 300px;
    }
    .sector-item-container{
      margin: 15px;
    }

    .content{
      padding-top: 50%;
    }
    .sector-element-container {
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: 2;
    }
  }

/*Project Gallery-------------------------------------------------------------*/
.galleryPic{
    height:100%;
    background-color: rgba(253, 0, 0, 0.233);
    background-size: cover;
    background-position: center;
    display: grid;
}
.pic-1{
    background-image: url(../Images/scroll_pic_2.jpeg);
}
.pic-2{
    background-image: url(../Images/scroll_pic_1.jpeg);
}
.pic-3{
    background-image: url(../Images/scroll_pic_3.jpeg);
}
.project-gallery{
    width: 100%;
    height: 600px;
    margin-bottom: 30px;
    margin-top: 30px;
  }
  #gallerySlide {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .carousel-inner{
    height: 100%;
  }
  .carousel-inner .a{
    background-color: rgba(0, 0, 0, 0.4);
  }
  
  
  
  .gallery-text1{
    background-color: rgba(0, 0, 0, 0.4);
    max-width: var(--bodyMaxWidth);
    padding: 15px;
    width: 100%;
    margin: auto ;
    position: relative;
    font-size: 3rem ;
    color: white;
    font-weight: bold;
 
    cursor: pointer;
  }
  .gallery-text2{
    background-color: rgba(0, 0, 0, 0.4);
    max-width: var(--bodyMaxWidth);
    padding: 15px;
    width: 100%;
    margin: auto ;
    position: relative;
    font-size: 2rem ;
    color: white;
    font-weight: bold;
   
    cursor: pointer;
  }
  
  .carousel-item{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  @media screen and (max-width: 550px) {
    .project-gallery{
      height: 300px;
    }
    .gallery-text1{
      padding: 0;
      font-size: 2rem ;
    }
    .gallery-text2{
      padding: 0;
      font-size: 1.5rem ;
    }
  }