/* @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500&display=swap');
*/
body{
    font-family: 'Cormorant', sans-serif;
    text-align: justify;
    scroll-behavior: smooth;
}

/* width */
::-webkit-scrollbar {
    width: 8px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #ad0000;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #a70404;
  }

.custom-logo{
    height: 40px;
}

.content-area{
    min-width:100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.collapse{
    text-align :right;
}

.right{
    float:right;
    text-align: right;
}

.navbar{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    border-bottom: white;
    border-width: 1px;
    border-style: solid;

}
.navbar-nav{
  margin-left: 60%;
}

.bg-red{
    background-color: #ad042e;
}
footer b{
    color:gray;
}

.top-header{
    height: 100vh;
    background-color: white;
}

.elementor-shape-fill{
 color:#f7f7f7;
 background-color: #f7f7f7;
}

#bg-image {
    /* The image used background: linear-gradient(180deg, #000 0%, #ad0000 50%, #a70404 100% ); */

    background-image: url('/img/cover.jpg');

   /* Add the blur effect
      filter: blur(2px);
    -webkit-filter: blur(2px);
   */

    /* Full height */
    height: 100%;
    transition: background 1.5s ease;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit:cover;
    -webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;
  }


/* Position text in the middle of the page/image */
.bg-text {
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.7); /* Black w/opacity/see-through */
    color: white;
    font-weight: bold;

    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 80%;
    padding: 20px;
    text-align: center;
    border-style: solid;
    border-color: white;
    border-width:5px;
    transition: background 5s ease-in;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;

  }

.nav-link:hover{
    color:white;
}


.btn-primary{
    border-radius: 0;
    background-color: #a70404;
    border-style: none;
    outline: none;
}

.btn-primary:hover{
    background-color: #ad0000;
}

.btn-primary:active, .btn-primary:focus{
    background-color:  #777777;
    outline: none;
    border-style: none;
    border-width: 0;
}
.section2{

  padding-top:10vh;
  min-height: 80vh;
  background-color: #f9f9f9;
}

.section2 .state{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    padding: 20px;
    background-color: white;
}
.section2 .state i{
    text-align: center;
    margin-left: 0px;
    padding: 8px 5px;
    border-radius: 50%;
    background-color: #a7a6a6;
    color:white;
}

.section2 .container{
padding-top: 5%;

}
.section2 h2{
    color: #a70404;
    margin-bottom: 20px;
    width: fit-content;
}
.section2 h2 i{
 background-color: #a70404;
 color:white;
 padding: 5px;
 border-radius: 5px;
}
.section2 h2 span{
    font-family: 'Nunito Sans';
    font-size: 30px;
}

.section3{

  padding-top:10vh;
  min-height: 90vh;
  background: linear-gradient(180deg, #000 0%, #3178a1 30%, #1c6586 70%, #2a779b 100% );

}

.section3 h2{
    color: white;
    margin-bottom: 20px;
    width: fit-content;
}

.section3 h2 i{
 background-color: white;
 color:#a70404;
 padding: 5px;
 border-radius: 5px;
}

.section3 h2 span{
    font-family: 'Nunito Sans';
    font-size: 30px;
}

.section4 h2{
    color: #a70404;
    margin-bottom: 20px;
    width: fit-content;
}


.section4 h2 i{
 background-color: white;
 color:#a70404;
 padding: 5px;
 border-radius: 5px;
}

.section4 h2 span{
    font-family: 'Nunito Sans';
    font-size: 30px;
}


.section3 .card{
    font-family: 'Nunito Sans';
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; padding: 10px;
    text-align: center;/*
    background: linear-gradient(180deg, #000 0%, #a70404 50%, #ad042e 100% );*/
    background-color: white;
    margin:20px;
    border-radius:20px;
    border: solid white 5px;
    padding:20px;
    color:black;
}
.section3 .card .btn-primary{
    border-radius: 15px;
    padding: 10px;
}

.state .b-example-divider{
    height:20px;
    margin-left: -20px;
    margin-right: -20px;
}

.section4{
    padding-top:10vh;
    min-height: 80vh;
    background-color: white;
}

.section4 .state{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    padding: 20px;
    background-color: white;
    margin: 15px 10%;;
    border-radius: 20px;

}
.section4 .state i{
    text-align: center;
    margin-left: 0px;
    padding: 17px 10px ;
    border-radius: 50%;
    background-color: #a70404;
    border-color :#b8b8b8;
    border-width: 5px;
    border-style: solid;
    color:white;  box-shadow: rgb(235, 236, 238) 0px 20px 30px -10px;

}

.sect_img{
    object-fit: cover;
    height:150px;
    width: 150px;
    border-radius: 50%;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}
.sect_img:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}


.cl-container{
    display:flex;
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
}

   .scroll-feed {

    overflow: auto;
    white-space: nowrap;
  }

  .scroll-feed a {
    display: inline-block;
    color: white;
    text-align: center;
    text-decoration: none;
  }


.cl-wrapper{
    display: flex;
    min-width: 150px;
    height: 150px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 10px;
    float: left;
    color: black;
    padding: 10px;
    border-radius: 30px;
}

.slider{
	width: 100%;
	display: flex;
    padding: 20px;
    overflow-x: scroll;
    overflow-y:hidden;
}

.cl-wrapper p{
    color: black;
}


.cl-wrapper img{
    width: 100%;
    text-align: center;
    object-fit: contain;
}

.cl-text{
    padding: 10px ;
}

.cl-text hr{
    color:grey;
    width: 100%;
}

.top_header{
    height: 300px;
    position: relative;
}
.top_header img{
    object-fit: cover;
    height: 300px;
    width: 100%;
}

.top_caption{
    position: absolute;
    bottom: -40px;
    left: 5%;
    background: linear-gradient(180deg, #000 0%, #ad0000 50%, #a70404 100% );
    border-radius: 35px;
    color:white;
    outline: white;
    outline-style: solid;
    outline-width: 5px;
    padding: 20px;
    font-size: 23px;
    font-family: 'Nunito Sans'; z-index: 15;;
}
.overlay{
    position: absolute;
    top:0;
    z-index: 12;
    background: linear-gradient(180deg, #000 0%, #ad0000 50%, #a70404 100%);
    background: linear-gradient(180deg, #000 20%, #24668d 70%, #155877 100% );
    height: 300px;
    width: 100%;
    opacity: 0.4;
}
.overlay-red{
    position: absolute;
    top:0;
    z-index: 12;
    background: linear-gradient(180deg, #000 20%, #ad0000 70%, #a70404 100%);
    height: 300px;
    width: 100%;
    opacity: 0.4;
}

#procurement{
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    padding: 10px;
    padding-top:  50px;
    margin-top: 20px;
}
#construction, #welding{
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    padding: 10px;
    padding-top:  50px;
    margin-top: 20px;
}
#maintenance, #fabrication{
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding: 10px;
    padding-top:  50px;
}
#engineering{
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    background-color: #f7f7f7;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    margin-bottom: 10px;
    padding: 10px;
    padding-top:  50px;
    margin-top: 20px;

}
.company{
    display: flex;
    align-content: center;
    align-items: center;
    min-height: 80vh;
    margin: 20px;
    padding: 10px;
    padding-top: 25px;

    background-color: #f7f7f7;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.company img{
    border-radius: 20px;
    height: 300px;
    width: 300px;
    margin-right: 20px;
    margin-bottom: 10px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    float: left;
    background: linear-gradient(180deg, #000 0%, #ad0000 50%, #a70404 100% );
padding: 20px;
}

.serv_img{

  width: 100%;
  object-fit: contain;
 text-align: center;
 border-radius: 20px;
}

.services h3{
    color: #155877;
    font-weight: bold;

    border-bottom: solid #777777 3px;
    width: fit-content;
    margin-bottom: 10px;
}
.services{
    max-width: 100%;;
}
.stylez{
    color: #ad042e;
    font-size: 23px; font-family: 'Nunito Sans';
}

.team{
    background-color: #f7f7f7;
    margin: 0;
    padding: 20px;
    padding-top: 50px;
}

.team .content{
    background-color: white;
    padding-bottom: 50px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
    padding: 20px;;
}
.block_quote{
    background-color: #f7f7f7;
    padding: 10px;
    margin: 5px;
}

.team h2{
    color: #155877;
    font-weight: bold;
    font-family: 'Nunito Sans';
}

.info-box{
margin: 10px;
padding: 20px;
padding-bottom: 30px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
border-radius: 30px;
min-height: 90%;
margin-bottom: 50px;
}

.hse{
     min-height: 80vh;
    margin:30px 10px;
    background: linear-gradient(90deg, #0e4964 0%, #266683 20%, #24668d 70%, #0e4964 100% );
    padding: 20px;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    padding-top: 45px;
}

.hse .highlight{
    background-color: #b8e7fd;
    padding: 10px;
    color: #0e4964;
    margin-bottom: 20px;
    font-weight: bold;
}

.contact-main{

    min-height: 70vh;
    padding: 20px;
    padding-top: 70px;
}
.contact-main h4{
    font-weight: bold;
    font-family: 'Nunito Sans';
    ;
    color: #ad042e;
}

.contact-main .section{
    padding: 20px;
    max-width: 100%;
    overflow: hidden;
    border-right: #f7f7f7 solid 2px;;
}






@media screen and (max-width:1400px) {
    .navbar-nav{
        margin-left: 40%;
      }
}
@media screen and (max-width:1000px) {
    .navbar-nav{
        margin-left: 20%;
      }
}


@media screen and (max-width:768px) {
    .hse .highlight{
        font-weight: normal;
    }
    .hse{
        border-radius: 0px;
        padding: 10px;
    }


    #bg-image {
      background-image: url('/img/coversm.jpg');
    }

 .navbar-nav{
     margin-left: 0;
     text-align: center;
 }
 .section2{
    padding-top:10vh;
  }
  .section2 .state{
     margin-bottom: 20px;
    border-radius: 25px;
    }

    .section2 h2 i{
        background-color: #a70404;
        color:white;
        padding: 5px;
        border-radius: 5px;
    }
       .section2 h2 span{
           font-family: 'Nunito Sans';
           font-size: 30px;
       }
    .cl-wrapper{
        min-width: 150px;
        min-height: 100px;
    }

    .company img{
        border-radius: 20px;
        width: 100%;
        height: auto;
        margin-right: 0px;
        margin-bottom: 25px;
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }
    .info-box{

        margin: 10px;
        height: auto;
        overflow: hidden;
    }

}


/* width */
.slider::-webkit-scrollbar {
    height: 5px;
  }

  /* Track */
  .slider::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  /* Handle */
  .slider::-webkit-scrollbar-thumb {
    background: #155877;
  }

  /* Handle on hover */
  .slider::-webkit-scrollbar-thumb:hover {
    background: #24668d;
  }