/* 
---------------------------------------------
banner
--------------------------------------------- 
*/



@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");

html, body {
   font-family: 'Poppins', sans-serif;
   font-weight: 400;
   background-color: #fff;
   font-size: 16px;
   -ms-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

 html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
}
/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #232d39;
   display: -webkit-box;
   display: flex;
   -webkit-box-align: center;
   align-items: center;
   -webkit-box-pack: center;
   justify-content: center;
   opacity: 1;
   visibility: visible;
   z-index: 9999;
   -webkit-transition: opacity 0.25s ease;
   transition: opacity 0.25s ease;
}

.js-preloader.loaded {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

@-webkit-keyframes dot {
   50% {
       -webkit-transform: translateX(96px);
       transform: translateX(96px);
   }
}

@keyframes dot {
   50% {
       -webkit-transform: translateX(96px);
       transform: translateX(96px);
   }
}

@-webkit-keyframes dots {
   50% {
       -webkit-transform: translateX(-31px);
       transform: translateX(-31px);
   }
}

@keyframes dots {
   50% {
       -webkit-transform: translateX(-31px);
       transform: translateX(-31px);
   }
}

.preloader-inner {
   position: relative;
   width: 142px;
   height: 40px;
   background: #232d39;
}

.preloader-inner .dot {
   position: absolute;
   width: 16px;
   height: 16px;
   top: 12px;
   left: 15px;
   background: #fff;
   border-radius: 50%;
   -webkit-transform: translateX(0);
   transform: translateX(0);
   -webkit-animation: dot 2.8s infinite;
   animation: dot 2.8s infinite;
}

.preloader-inner .dots {
   -webkit-transform: translateX(0);
   transform: translateX(0);
   margin-top: 12px;
   margin-left: 31px;
   -webkit-animation: dots 2.8s infinite;
   animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
   display: block;
   float: left;
   width: 16px;
   height: 16px;
   margin-left: 16px;
   background: #fff;
   border-radius: 50%;
}


/* nav start */
.nav-link{
   font-size: 1rem;
   font-weight: 500;

 }
 .navbar{
    padding:0rem;
    background:rgba(231, 228, 228, 0.1);
 }
 .navbar-dark .navbar-nav .nav-link:hover{
    color: #b21619;
 }

 .navbar-dark .navbar-toggler-icon{
   background-image:url(../images/toggle2.png);
 }

 .navbar-dark .navbar-toggler {
    color: darkgrey;
    border-color: lightgrey;
}
 
 
 .dropdown-menu{
   animation-name: atthover;
   animation-duration: 1s;
   animation-iteration-count: finite;
 }
 
 .dropdown:hover{
   animation-play-state: running;
 }
 .dropdown:hover> .dropdown-menu{
   display: block;
 }
 
 .dropdown-item:hover{
   background-color: #ccc;
 }
 
 @keyframes atthover{
   0%{
     opacity: 0;
     margin-top: 30px;
   }
   50%{
     opacity: 1;
     margin-top: 0px;
   }
   100%{
     opacity: 100%;
   }
 
 }
 
 .navbar-dark.scrolled{
   background: white;
   transition: .5s ease-in-out;
 }
 

 .navbar-dark .navbar-nav .nav-link{
    color:black;
    font-family: 'Poppins', sans-serif;
 
 }


/* nav end*/
.main-banner {
   position: relative;
 }

 ul, li {
   padding: 0;
   margin: 0;
   list-style: none;
 }
 
 #bg-video {
     min-width: 100%;
     min-height: 100vh;
     max-width: 100%;
     max-height: 100vh;
     object-fit: cover;
     z-index: -1;
 }
 
 #bg-video::-webkit-media-controls {
     display: none !important;
 }
 
 .video-overlay {
     position: absolute;
     background-color: rgba(35,45,57,0.2);
     top: 0;
     left: 0;
     bottom: 7px;
     width: 100%;
 }

 
 
 .main-banner .caption {
   text-align: center;
   position: absolute;
   width: 80%;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
 }
 
 .main-banner .caption h6 {
   margin-top: 0px;
   font-size: 0.4rem;
   text-transform: uppercase;
   font-weight: 800;
   color: #fff;
   letter-spacing: 0.5px;
 }
 
 .main-banner .caption h2 {
   margin-top: 30px;
   margin-bottom: 25px;
   font-size: 3rem;
   text-transform: uppercase;
   font-weight: 800;
   color: #fff;
   letter-spacing: 1px;
 }
 
 .main-banner .caption h2 em {
   font-style: normal;
   color: #ffea00;
   font-weight: 900;
 }
 
 
 /* */
.whyus{

     min-height: 400px;
     padding: 60px 0;
     background: url(../images/fuelbanner2.jpg) center no-repeat;
     background-attachment: fixed;
     background-repeat: no-repeat;
     background-size: cover;
     position: relative;
     width: 100%;
 
 }
 .whyus h2{
   
    text-align: center;
    font-size: 4rem;
    text-transform: uppercase;
    font-weight: 800;
    color: gold;
    letter-spacing: 1px;
 }
 .whyus h2:hover{
    color:gold;
 }

 .whyus h3{
   font-family: 'Poppins', sans-serif;
   text-transform: uppercase;
   font-size: 1.5rem;
   padding-top: 1rem;
 }

 .whyus p{
    text-align: center;
    color:white;
    font-size: 1rem;
    padding-top: .5rem;
 }
 .fa:hover{

         color:white;

 }

#fuelban{
     min-height: 200px;
     padding: 60px 0;
     background: url(../images/fuelban.jpg) center no-repeat;
     background-attachment: fixed;
     background-repeat: no-repeat;
     background-size: cover;
     position: relative;
     width: 100%;
}




.services{

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/wall5.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}

.services .sdiv:hover{
   background-color: #b21619;
}

.sdiv .fa{
   color:white;
}
.sdiv .fa:hover{
   color:white;
}


.services h2{
 
  text-align: center;
  font-size: 4rem;
  text-transform: uppercase;
  font-weight: 800;
  color: white;
  letter-spacing: 1px;
}
.services h2:hover{
  color:white;
}

.services h3{
 font-family: 'Poppins', sans-serif;
 text-transform: uppercase;
 font-size: 1.3rem;
 padding-top: 1rem;
}

.services p{
  text-align: center;
  color:white;
  font-size: 1.1rem;
 
  line-height: 1.2;
}


/*  About Page */

#abouthead{
   min-height: 400px;
   padding: 60px 0;
   background: url(../images/aboutuspage/header.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;
}

.headpage h2{



font-family: 'Poppins', sans-serif;
 
  
  text-align: center;
  font-size: 3rem;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;

   
   

}


/* clients and partners  */

#clientheader{

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/pageheads/client.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;
   
}


/*about us page */

#aboutus2{

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/aboutuspage/content1.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;
   

}
#aboutus2 p{
   
   color:white;
   font-size: 1rem;
   font-family: 'Poppins', sans-serif;

}


.mag { 
   transition: all .2s ease-in-out; 
   }

.mag:hover 
{ 
      transform: scale(1.02); 
 }
 .whyus p{

   font-size: 1.2rem;
   
 }
 .log:hover{
    background: gold;
 }

 /* logistics  */
#logistichead {

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/logistics/header3.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}

.logdesc{

   min-height: 250px;
   padding: 60px 0;
   background: url(../images/logistics/content1.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}
.logdesc p{
   
      color:black;
      font-size: 1rem;

}

.loginc {
   min-height: 250px;
   padding: 60px 0;
   background: url(../images/logistics/incback.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;
}
.loginc h4{
   color: white;

}
 
#logistichead {

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/logistics/header3.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}

/* catering head */ 
#cathead{

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/catering/header.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;
   
 }

/* bols head */ 

#bolshead {

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/bols/header2.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}



#bolsser{


   min-height: 250px;
   padding: 60px 0;
   background: url(../images/bols/bolback.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

   
}

#powerhead {

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/powernetworks/header.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}

#powerser{

   min-height: 250px;
   padding: 60px 0;
   background: url(../images/powernetworks/back.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

   
}


#itcommshead{

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/itcomms/header.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}

#itcontent p{
   font-size: .9rem;
}


#itcomserv{

   
   min-height: 250px;
   padding: 60px 0;
   background: url(../images/itcomms/back.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}

#disconhead{

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/designandconstruction/header.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}
 
#desconser{

   min-height: 250px;
   padding: 60px 0;
   background: url(../images/designandconstruction/back.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}

.descondesc{

   min-height: 150px;
   padding: 60px 0;
   background: url(../images/designandconstruction/contentback.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}

.descondesc p{
   
   color:black;
   font-size: 1.1rem;
   line-height: 1.5;

}

.aviationfuelling{

   min-height: 150px;
   padding: 60px 0;
   background: url(../images/aviationfueling/back.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}

.aviationfuelling p{
   
   color:black;
   font-size: 1.4rem;
   line-height: 1.5;

}

#afhead{

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/aviationfueling/head.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}


#workshophead{

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/workshop/header2.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}
#partnershiphead{

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/partnershippage/header.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}
#pphead{

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/pppage/header.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}

.onlineworkshop{

   min-height: 150px;
   padding: 60px 0;
   background: url(../images/workshop/back2.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}

.onlineworkshop p{
   
   color:black;
   font-size: 1.4rem;
   line-height: 1.3;

}

.addresssec{

   min-height: 150px;
   padding: 60px 0;
   background: url(../images/contact/addressback.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;
   color: black;

}

.addresssec h4{
   font-weight: 600;
}
.addresssec p{
   color: black;
   font-weight: 600;
}

#contacthead{

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/contact/header2.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}

#errorhead{

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/404.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}
#sang-form{

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/contact/form.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}
.footer{

   min-height: 400px;
   background: url(../images/footer/back.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;
}
.footer li a{
   color:white;
   font-weight: 400;
   font-family: 'Poppins', sans-serif;
   font-size: 1rem;
}
.footer li a:hover{
   color: gold;
   
}
.footer a{
   color:white;

}
.footer a:hover{
   color: gold;
}
#project{


}


.block-20{

   overflow: hidden;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center center;
     position: relative;
     display: block;
     width: 100%;
     height: 200px;
     margin-bottom: 20px;
     border: 1px solid green;
 
 
   }
 
 .imag{
    

     vertical-align: middle;
     border-style: none;
     transition: all .2s ease-in;
     margin-top:0rem;
     border-radius: 5px;
     border: 1px solid grey;
     box-shadow: 5px 5px 20px lightgrey;
 
 }
 
 .block-20:hover{

   background-color: #f5b84c;
   cursor: zoom-in;
   
 }
 #project{

   min-height: 400px;
   background: url(../images/home/projects/back.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

 }
 #project h4{

   font-weight: 700;
   color:#1b2b3f;
   font-size: 2em;

 }
 #project p{

    color:black;
    font-size: 1rem;
    line-height: 2;
    font-weight: 600;

 }

 .btn-sang
 {
    color: black;
    background-color: #b21619;
    border-color: #b21619; 
    color:white;
}
.btn-sang:hover{

   background-color: #1b2b3f;
    border-color: #1b2b3f; 
    color:white;

}
 .c-sang
 {  
   color: #f0d353;
 }


 #app{

   min-height: 250px;
   background: url(../images/home/apps/backmerged.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

 }
 #app h3{

         color: white;

 }
 #app p{
   color: white;
   font-weight: 600;
 }

 .block-app{

   overflow: hidden;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center center;
     position: relative;
     display: block;
     width: 100%;
     height: 200px;
     margin-bottom: 20px;
     border: 1px solid green;
 
 
   }
 
 .imag-app{
    

     vertical-align: middle;
     border-style: none;
     transition: all .2s ease-in;
     margin-top:0rem;
     border-radius: 5px;
  
     box-shadow: 5px 5px 20px black;
 
 }
 
 .block-app:hover{

   
   cursor: zoom-in;
   
 }


 #connect{

   min-height: 100px;
   background: url(../images/home/connect.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

 }

 .shades{
    box-shadow: 5px 5px 10px rgb(136, 134, 134);
 }

 /*
.float{
   position:fixed;
   width:60px;
   height:60px;
   bottom:80px;
   right:10px;
   background-color:#4267B2;
   color:#FFF;
   border-radius:50px;
   text-align:center;
   font-size:30px;
   z-index:100;
 }
 
 
 .my-fb{
   margin-top:16px;
 }

 .float2{
   position:fixed;
   width:50px;
   height:50px;
   bottom:150px;
   right:10px;
   background-color:magenta;
   color:#FFF;
   border-radius:50px;
   text-align:center;
   font-size:30px;
   
   z-index:100;
 }
 
 .my-insta{
   margin-top:16px;
 }

 */



 #return-to-top {
   position: fixed;
   bottom: 20px;
   right: 20px;
   background: rgb(0, 0, 0);
   background: rgba(0, 0, 0, 0.7);
   width: 50px;
   height: 50px;
   display: block;
   text-decoration: none;
   -webkit-border-radius: 35px;
   -moz-border-radius: 35px;
   border-radius: 35px;
   display: none;
   -webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}
#return-to-top i {
   color: #fff;
   margin: 0;
   position: relative;
   left: 16px;
   top: 13px;
   font-size: 19px;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}
#return-to-top:hover {
   background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
   color: #fff;
   top: 5px;
}

#app h3{
   font-size: 3rem;

}
#app p{
   font-size: 1.3rem;
}
#careers{


   min-height: 100px;
   background: url(../images/careers/back.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;


}

#careerhead{
   min-height: 400px;
   padding: 60px 0;
   background: url(../images/careers/header.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;
}

#highlights{

   min-height: 100px;
   background: url(../images/leasing/highlights.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

 }

 

 .pixbox{
    border-radius: 5%;
 }
 #highlights {
    color: white;
    
 }
 #highlights{
   padding-top: 3rem;
   padding-bottom: 3rem;
   
}
 #highlights p{
   color: white;
   font-size: 0.9 rem;
   
}
#highlights h5{
   
      font-weight: 700;
   
}
#highlights h1{
   
  color:aliceblue;
  font-size: 3rem;

}
#more{
   padding-top: 3rem;
   padding-bottom: 3rem;

}

#more .fa{
   color: black;
}
#more .fa:hover{
   color: #b21619;
}
#more p{
   font-size: 0.8rem;
   
}
#more h4{
   font-weight: bold;
   
}
#additionalservices{
   color: white;
}
#additionalservices{

   min-height: 100px;
   background: url(../images/leasing/additionalbg.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;
   

 }

 #ntvhead{

   min-height: 400px;
   padding: 60px 0;
   background: url(../images/leasing/banner.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;

}


#ntv .fa:hover{
color:aliceblue;
}


#psec{

   min-height: 100px;
   background: url(../images/partnershippage/par.jpg) center no-repeat;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   width: 100%;
   color:white;

 }
.h2c{

color: #1b2b3f;

}

.wdiv:hover{
   
   background-color:#b21619


}