body { background-color: azure;
    margin: 0px;
    font-family: 'Bebas Neue', sans-serif;
font-family: 'Oswald', sans-serif;
    background-image: url(images/backg.png);
    background-size: 25% 95% ;
    background-attachment: fixed;
    background-repeat: no-repeat ;
    background-position: 50% 50%;
    background-color: #ebebeb;
    
  }

 * {
  
  scroll-behavior: smooth;
 }

   
  
 


 .headerr nav {
   background-color:rgb(37 17 51);
   height: 100px;
   
 align-items: center;
   z-index: 50;
   
   
 

   
  }

 
  
  .navbar a {
    padding: 10px;
   padding-right: 30px;
   float: right;
   text-decoration: none;
   font-size: 21px;
   padding-top: 36px;
   font-weight: 500;
   color: azure;
   text-align: right;
   text-transform: uppercase;

  }
  .navdrop {
 

    width: 300px;
    
    background-color: #0fbb8d;
    height: 0px;
    list-style: none;
    float: right;
    
     color: #33d4ac;
     font-size: 26px;
     overflow: hidden;
     display: none;
     transition: hight;
     position: absolute;
     top:  100px;
     right: 0px;

     
     
    
  }
 .navbar li {
padding: 0px; 
 }
   .open  {
    height: 290px;  
    
 
  }


  .navbar a:hover{
    color: rgb(243, 255, 74);
  }
  
 .btnn {
  display: none;
  float: right;
  margin-top: 25px;
  margin-right: 40px;
  font-size: 40px;
  cursor: pointer;
 }
    
    

  
 
  
  .loogo img {
  
    height: 97px;
    padding-left: 50px;
    filter: drop-shadow(0 0 12px rgb(0, 0, 0));
    border-radius: 10px;
  }



  .backgr p {
    margin-top: 200px;
    margin-bottom: 5px;
    margin-left: 20px;
    font-weight: 100;
    font-size: 35px;
    text-align: left;
    text-transform: capitalize;
 
    
  
    color: rgb(0, 0, 0);
  
    
    text-shadow: 1px 2px 4px rgb(120 116 116);
    color: rgb(21 72 136)
    
    
    
    
  }
  .backgr a  {
   margin-left: 15px;
  text-decoration: none;

  color: black;
  
 }
 .backgr  h1 {
  background-color: rgb(223 235 42 / 32%) ;
    border-radius: 14px;
    width: 200px;
    display: table-cell;
    padding-left: 10px;
    text-transform: uppercase;

 }

 
 #sec h3 {
  margin-top: 150px;
  text-align: center;
  text-shadow: 1px 2px 4px #6e6e6e;
  font-size: 50px;
 
 }
 span.ss {
  display: block;
  font-size: 16px;
 }
 #sec h2
 {
      text-align: center;
      
      font-weight: 500;
      font-size: 40px;
      text-transform: capitalize;
      margin-bottom: 10px;

 }
 div.bakk
 { 
  width: 100%;
  height: 6px;
    background-color: rgb(214 0 0);
 
 }
 .sec2 h1 
 {
  margin: 180px 260px 160px  ;
  font-size: 30px;
  color: #a10303;
  text-transform:uppercase ;
 
  box-shadow: 5px 5px 3px red;
  font-weight: 800;
  text-align: center;
  padding: 0px 5px;
  width: 900px;


 }
 .workphoto {
  margin-bottom: 100px;
  margin-top: 100px;
 }

 img.zah1   {
  margin-left: 80px;
  width: 600px;
  height: 500px;
  border-radius: 80px 
 

 }
 img.zah2   {
  
  width: 600px;
  height: 500px;
  border-radius: 80px ;
  


 }

 h4.cap {
  text-align: center;
  font-size: 20px;
 }
 .workphoto2 {
  margin-bottom: 100px;
 }
 img.road1   {
  margin-left: 80px;
  width: 600px;
  height: 500px;
  border-radius: 80px
 }

 img.road2   {
  
  width: 600px;
  height: 500px;
  border-radius: 80px
 }
 h4.cap2
 {
   padding-top: 20px;
  text-align: center;
  font-size: 20px;
 }
 .cap2 span  {
  margin-left: 140px;

 }
.workph img:hover
 {
  filter: brightness(1.1);
  width: 605px;
  height: 505px;
}
.workphoto3 {
  margin-bottom: 100px;
}  
  img.road3   {

  margin-left: 80px;
  width: 600px;
  height: 500px;
  border-radius: 80px
 }

 img.road4   {
  
  width: 600px;
  height: 500px;
  border-radius: 80px
 }
 h4.cap3
 {
  padding-right: 70px;
   padding-top: 20px;
  text-align: center;
  font-size: 19px;
  
 }
 .cap3 span  {
  margin-left: 25px;

 }
 
div.vid {
 
  background-color: rgb(226 241 141);
  width: 100%;
  height: 580px;
  margin-bottom: 150px;
}
.vid video
{ 
  margin-top: 20px;
  margin-left: 500px;
  
   padding: 10px;
   width: 300px;
  
   border-radius: 10px;
   border-top-right-radius: 20px;
   border-top-left-radius: 20px;

  box-shadow: 1px 2px 3px black;

}  
.vid a {
  position: relative;
  left: 90px;
  bottom: 260px;
  font-size: 35px;
  text-decoration: none;
  color: black;
  box-shadow: 1px 2px 5px white;

 border-radius: 5px;
  text-transform: uppercase;

}
.vid a:hover {
  color: rgb(164, 0, 214);
}

.lis h2
{
  
 
    align-items: center;
    text-align: center;
    color: #cd0b0b;
    text-transform: uppercase;
    font-weight: 2000;
    padding-bottom: 70px;
    margin-bottom: 0px;
    padding-top:10px;

} 
ul.listt
{
  
  padding: 0px;
  margin: 0px;
  border-radius: 10px;
  border-bottom-right-radius: 400px;
  border-top-left-radius: 100px;

}
.listt li {
   
  list-style: none;
  text-transform: uppercase;
  font-weight: 1000;
  font-size: 20px;
   padding: 15px;
   padding-left:50px; 
   color: #5f0000;
   text-align: center;
}
 .picc
 {
  width: 645px;
  height: 450px;
      float: right;
      padding-top: 0px;
 }
 .lis2 h2 {
  
  align-items: center;
  text-align: center;
  color: #cd0b0b;
  text-transform: uppercase;
  font-weight: 2000;
  padding-top: 150px;
  padding-bottom: 70px;
  margin-bottom: 0px;
  margin-top: 80px;
 }
 ul.listt2 {
  background-color:#f1e4865e;
  padding: 0px;
  padding-left: 55px;
  margin: 0px;
  border-radius: 0px;

  height: 150px;
  margin-bottom: 50px;
  box-shadow: 1px 0px 9px red;

  
 }
 .listt2 li {
 height: 64px;
  text-transform: uppercase;
  font-weight: 1000;
  font-size: 20px;
   padding: 15px;
   
   padding-left:5px; 
   color: black;
   display: table-cell;
   padding-top: 70px;
   font-size: 25px;
   box-shadow: 1px 0px 9px red;
  
  }
 
  footer {
    margin-top:  340px;
    background-color: #000000;
    height: 300px;
    padding-top: 30px;
    margin-bottom: 0px;
  }
 div.foot {
  display: flex;
  flex-wrap: wrap;
  text-transform: uppercase;
   padding-left: 60px;

  
 }
      

       .foot-header h2 {
    
       color: #b7a6a6;
    
       }
       .foot-header a {
        display: block;
        color: white;
        text-decoration: none;
        padding-bottom: 20px;
        padding-right: 50px;
        
    
       }
       .foot-header a:hover {
          color: red;
          transition: 0.3s ease-out;
    }
    .foot-header , .footer1
       {
         padding-left: 50px;
       }
        .footer2
       {
         display: inline-block;
         padding-left: 50px;
       }
       
       .info h1 { font-size: 65px;
    
       
       }
       div.sc {
      
        
        display: block;
        
        
       
       
       }
       .sc h6 {
        word-spacing: 10px;
        font-size: 22px;
        padding-top: 15px;
        text-align: center;
        color: #9abde2;
        margin-top: 0px;
        background-color: #141414;
        height:70px ;
        margin-bottom: 0px;
        cursor: pointer;
        text-transform: uppercase;
       
       }
       .sc h6:hover{
        background-color: #ec8686;
        color: #000000;
       }
       

       
      

 

 @media screen and (min-width: 1321px) and (max-width: 1335px) {
  .backgr p {
    margin-left: 20px;
    font-weight: 100;
    font-size: 30px;
    text-align: left;
    text-transform: capitalize;

    text-shadow: 1px 2px 4px rgb(120 116 116);
    

  }
  .backgr a {
    font-size:13px ; 
    
  }
  .backgr h1 { padding-left: 35px;
  }
  #sec h2 {
    font-size: 30px;
  }
  div {
    font-size: 14px;
   
  }
  .sec2 h1 
 {
  margin: 180px 220px 160px  ;
  font-size: 23px;
  color: #a10303;
  text-transform:uppercase ;
 
  box-shadow: 5px 5px 3px red;
  font-weight: 800;
  text-align: center;
  padding: 0px 5px;
  width: 700px;


 }

 }
 @media screen and (min-width: 1278px) and (max-width: 1320px) {

 
  .workph img {
    margin-bottom: 100px;
   width: 500px;
   

   } 
   img.zah1 {
    margin-left: 130px;
   }
   img.road1 {
    margin-left: 130px;
   }
   img.road3 {
    margin-left: 130px;
   }
   h4.cap3 {
    font-size: 17px;
   }
   .workph img:hover {
    filter: brightness(1.1);
    width: 505px;
    height: 505px;

 }
 

 
 
 .lis2 ul {
  
  height: 150px;
 
 }
 .lis2 ul li {
  
  font-size: 24px;
 
 }
 #sec h2{

 font-size: 29px;
 }
 .sec2  h1 {
  margin-left: 310px;
 }
}
@media screen and (min-width: 1257px) and (max-width: 1277px) {
  
  .workph  img{
    width: 44%;


  }
  h4.cap3{
    font-size: 19px;
    margin-left: 20px;
  }
  .workph  img:hover{
    width: 46%;


  }
  .vid a {
    position: relative;
    
  }
  .vid video {
    position: relative;
    left: 170px;
    bottom: 0px;
    margin-left: 288px;
  }
  .lis2 ul  {
    width: 94.9%;
    height: 10%;
  }
  div.foot {
    display: flex;
    flex-wrap:nowrap;
    text-transform: uppercase;
     padding-left: 5px;
   
    
  }

 




}

 @media screen and (min-width: 1101px) and (max-width: 1256px) {
  .sec2 h1  {
   font-size: 21px;
   width: 700px;
   margin-left: 250px;
  }
  .workph  img{
    width: 44%;


  }
  h4.cap3{
    font-size: 19px;
    margin-left: 20px;
  }
  .workph  img:hover{
    width: 46%;


  }
  .vid a {
    position: relative;
    left: 20px;
    top: 280px;
  }
  .vid video {
    position: relative;
    left: 200px;
    bottom: 50px;
  }
  .lis2 ul  {
    width: 94.9%;
    height: 10%;
  }
  div.foot {
    display: flex;
    flex-wrap:nowrap;
    text-transform: uppercase;
     padding-left: 5px;
   
    
  }

 
  
 }


  
  @media screen and ( min-width: 1037px) and (max-width: 1100px) {
 
#sec h2 {
  font-size: 24px;

}
    .sec2 h1  {
      font-size: 21px;
      width: 700px;
      margin-left: 200px;
     }
     .workph  img{
       width: 44%;
   
   
     }
     h4.cap3{
      font-size: 16px;
      margin-left: 20px;
     }
     h4.cap2 { 
      font-size: 17px;
    margin-left: 60px;

     }
     .workph  img:hover{
       width: 45%;
   
   
     }
     .vid a {
       position: relative;
       left: 20px;
       top: 280px;
     }
     .vid video {
       position: relative;
       left: 200px;
       bottom: 50px;
     }
     .lis2 ul  {
       width: 93.9%;
       height: 10%;
     }
     div.foot {
       display: flex;
       flex-wrap:nowrap;
       text-transform: uppercase;
        padding-left: 0px;
        
      
       
     }
     .footer2 {
      padding-left: 0px;
     }

  
.lis2 ul {
  
  height: 15 8px;
 
 }
 .lis2 ul li {
  
  font-size: 23px;
 
 }
  }
  @media screen and ( min-width: 787px) and (max-width: 1036px) {
   
    .navbar a {
      padding: 7px;
     padding-right: 30px;
     float: right;
     text-decoration: none;
     font-size: 17px;
     padding-top: 36px;
     font-weight: 500;
     color: azure;
     text-align: right;
     text-transform: uppercase;
  
    }
    #sec h2 {
      font-size: 24px;
    
    }
        .sec2 h1  {
          font-size: 21px;
          width: 500px;
          margin-left: 150px;
         }
         .workph  img{
           width: 43%;
           height: 400px;
       
       
         }
         h4.cap3{
          font-size: 16px;
          margin-left: 20px;
         }
         h4.cap2 { 
          font-size: 17px;
        margin-left: 60px;
    
         }
         .workph  img:hover{
           width: 43.5%;
           height: 400px;
       
       
         }
         div.vid {
          width: 100%;
         }
         .vid a {
          font-size: 25px;
           position: relative;
           left: 30px;
           bottom: 250px;
         }
         .vid video {
           position: relative;
           left: 130px;
           bottom: 5px;
           margin-left: 0px;
         }
         .lis img {
          float: left;
          width: 100%;
          padding-left: 0px;
          display: block;
         }
        
        
        .listt li { 
          text-align: center;



        }
        div.lis2  {
          width: 98.4%;
          
        }
        .listt2 li {     padding-top: 55px;
        }

         .lis2 ul li {
        font-size: 18px;
         }
      



         div.foot {
           display: flex;
           flex-wrap:nowrap;
           text-transform: uppercase;
            padding-left: 0px;
            font-size: 16px;
            
            
          
           
         }
         div.footer2 a {
          font-size: 15px;

         
         }
         div.footer1 a {
          font-size: 15px;

         
         }
         .foot-header, .footer1 , footer2 {
          padding-left: 17px;
        
         
         }
         
         footer {
          width: 100%;
         }
         .footer2 a{
          padding-left: 0px;
          width: 100%;
          padding-left: 0px;
          padding-right: 0px;
          font-size: 8px;
         }
       


   
  
  }
  @media screen and ( min-width: 481px) and (max-width: 786px) {



     .backgr p  {
   

   
   font-size: 24px;
    }
      h1.scro  {

    
        font-size: 23px;
        padding-left: 30px;
             
  
  
  }
  .navbar a {
    display: none;
  }
  .btnn {
    display: block;
    margin-top: 16px;
    color: #ebebeb;
   
  }
  .navdrop , .open {
    display: block;
    background-color: #cccccc;
    border-radius: 19px;
    backdrop-filter: blur (10px);
    text-transform: capitalize;
  
  }
  .navdrop , .open li a {
     text-align: center;
    color: #000000;
    margin: 0;
    padding-top: 0px;
    text-decoration: none;
  }
  .open li {
    padding-top: 15px;
   
    
  }
  #sec h2 {
    font-size: 22px;
  }
  .sec2 h1  {
    font-size: 18px;
    width: 400px;
    margin-left: 70px;
 
 
  }
  h4.cap {
    font-size: 18px;
  }
  .workphoto {
    display: block;
    text-align: center;
    width: 100%;
    margin-bottom: 33px;
  }
  .workphoto2 {
    display: block;
    text-align: center;
    width: 100%;
    margin-bottom: 33px;
  }
   img.zah1 {
  width: 70%;
  height: 400px;
  margin-left: 0px;
  text-align: center;
  
 }
 img.zah2 {
  width: 70%;
  height: 400px;

}
.workph img:hover
{
 filter: brightness(1.1);
 width: 70%;
 height: 400px;
}
img.road1 {
  width: 70%;
  height: 400px;
  margin-left: 0px;
  text-align: center;
 }
 img.road2 {
  width: 70%;
  height: 400px;
 
}
.cap2 span  {
  display: block;
  margin-top: 20px;
 
}

.cap3 span  {
  display: block;
  margin-top: 20px;
  margin-left: 40px;
}
h4.cap3 {
  margin-left: 60px;
} 
div.vid {
  padding:  0px;

  height: 480px;
  margin-bottom: 150px;
}
.vid video
{ 
  align-items: center;
  margin: 0px;
  margin-left: 150px;

  padding: 0px;

 display: block;
 margin-top: 13px;
   overflow: hidden;
   width: 50%;
   height: 90%;
  
   border-radius: 10px;
   border-top-right-radius: 20px;
   border-top-left-radius: 20px;

  box-shadow: 1px 2px 3px black;

}  
.vid a {
 position: static;
  font-size: 25px;
  margin-left: 130px;
}
  
 .lis img {
    
    width: 100%;
    padding-left: 0px;
    display: block;
  }

  ul.listt2 {
    background-color:transparent;
    padding: 0px;
    padding-left: 0px;
    margin: 0px;
    border-radius: 0px;
  
    height: 100px;
    margin-bottom: 50px;
    box-shadow: 0px 0px 0px rgb(255, 255, 255);
  
  
   }
   .listt2 li {
   height: 20px;
    text-transform: uppercase;
    font-weight: 1000;
    text-align: center;
     padding: 0px;
     
     padding-left:0px; 
     color: black;
     display: block;
     padding-top: 30px;
     font-size: 10px;
     box-shadow: 0px 0px 0px rgb(255, 251, 251);
    
    }

    div.foot {
      display: flex;
      flex-wrap:nowrap;
      text-transform: uppercase;
       padding-left: 0px;
       font-size: 16px;
       
       
     
      
    }
    div.footer2 a {
     font-size: 15px;
     padding-left: 0px;
     padding-right: 0px;
     

    
    }
    div.footer1 a {
     font-size: 15px;
    padding-right: 0px;
    margin-right: 0px;
    
    }
    .foot-header, .footer1 , .footer2 {
     padding-left: 10px;
   
    
    }
    
    
    footer {
     width: 100%;
    }
    .footer2 a{
     padding-left: 0px;
   
     padding-left: 0px;
     padding-right: 0px;
     font-size: 8px;
    }
   



 
  }

  @media all and ( min-width: 430px) and (max-width: 480px) {

    body {

    
    background-size: 65% 95% ;
  }

    .backgr p  {
 

  
  font-size: 29px;

   }
     h1.scro  {

   
       font-size: 23px;
       padding-left: 30px;
          
 
 
 }
 .navbar a {
   display: none;
 }
 .btnn {
   display: block;
   margin-top: 16px;
   color: #ebebeb;
  
 }
 .navdrop , .open {
   display: block;
   background-color: #cccccc;
   border-radius: 19px;
   backdrop-filter: blur (10px);
   text-transform: capitalize;
 
 }
 .navdrop , .open li a {
    text-align: center;
   color: #000000;
   margin: 0;
   padding-top: 0px;
   text-decoration: none;
 }
 .open li {
   padding-top: 15px;
  
   
 }
 #sec h2 {
   font-size: 22px;
 }
 .sec2 h1  {
   font-size: 16px;
   width: 370px;
   margin-left: 27px;


 }
 h4.cap {
   font-size: 16px;
 }
 .workphoto {
   display: inline-block;
 }
  img.zah1 {
 width: 320px;
 height: 400px;
 margin-left: 55px; 
}
img.zah2 {
 width: 320px;
 height: 400px;
margin-left: 55px; 
}
.workph img:hover
{
filter: brightness(1.1);
width: 320px;
height: 400px;
}
img.road1 {
 width: 320px;
 height: 400px;
 margin-left: 55px; 
}
img.road2 {
 width: 320px;
 height: 400px;
margin-left: 55px; 
}
.cap2 span  {
 display: block;
 margin-top: 20px;
 margin-left: 40px;
}
img.road3 {
  width: 320px;
  height: 400px;
  margin-left: 55px; 
}
img.road4 {
  width: 320px;
  height: 400px;
  margin-left: 55px; 
}
.cap3 span  {
 display: block;
 margin-top: 20px;
 margin-left: 40px;
}
h4.cap3 {
 margin-left: 60px;
} 
div.vid {
 padding:  0px;

 height: 480px;
 margin-bottom: 150px;
}
.vid video
{ 
 align-items: center;
 margin: 0px;
 margin-left: 150px;

 padding: 0px;

display: block;
margin-top: 13px;
  overflow: hidden;
  width: 50%;
  height: 90%;
 
  border-radius: 10px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;

 box-shadow: 1px 2px 3px black;

}  
.vid a {
position: static;
 font-size: 20px;
 margin-left: 130px;
}
 
.lis img {
   
   width: 100%;
   padding-left: 0px;
   display: block;
 }

 ul.listt2 {
   background-color:transparent;
   padding: 0px;
   padding-left: 0px;
   margin: 0px;
   border-radius: 0px;
 
   height: 100px;
   margin-bottom: 50px;
   box-shadow: 0px 0px 0px rgb(255, 255, 255);
 
 
  }
  .listt2 li {
  height: 20px;
   text-transform: uppercase;
   font-weight: 1000;
   text-align: center;
    padding: 0px;
    
    padding-left:0px; 
    color: black;
    display: block;
    padding-top: 30px;
    font-size: 20px;
    box-shadow: 0px 0px 0px rgb(255, 251, 251);
   
   }

   div.foot {
    display: block;
    flex-wrap:nowrap;
    text-transform: uppercase;
     padding-left: 0px;
     font-size: 16px;
     
     
     
   
    
  }
  div.footer2 a {
   font-size: 17px;
   padding-left: 0px;
   padding-right: 0px;
   

  
  }
  div.footer1  {
   display: inline;

  }
  div.footer1 a {
   font-size: 17px;
  padding-right: 0px;
  margin-right: 0px;
 
  
  }
  .fo3 span {
   font-size:9px;

  }
  .foot-header, .footer1 , .footer2 {
   padding-left: 8px;
  display: inline-block;
  margin-left: 6px;
  }
  
  
  footer {
   width: 100%;
   height: 505px;
  }
  .fo2{
   margin-left: 0px;
   display: block;
   position: static;
   float: right;
  }

  .fo3{
   margin-left: 0px;
   display: block;
   position: static;
   float: right;
  }
 
  .footer2 a{
   padding-left: 0px;
 
   padding-left: 0px;
   padding-right: 0px;
   font-size: 8px;
  }
  .fo3 span {
    font-size:13px;
  }
  .footer2 a{
   padding-left: 0px;
 
   padding-left: 0px;
   padding-right: 0px;
   font-size: 8px;
  }

  .sc h6 {
    
    font-size: 14px;
    
   
   }


  




 }
 @media all and ( min-width: 414px) and (max-width: 429px) {


  body {

    
    background-size: 65% 95% ;
  }

  .backgr p  {
 
   
    
    font-size: 29px;
  
     }
       h1.scro  {
  
     
         font-size: 23px;
         padding-left: 30px;
            
   
   
   }
   .navbar a {
     display: none;
   }
   .btnn {
     display: block;
     margin-top: 16px;
     color: #ebebeb;
    
   }
   .navdrop , .open {
     display: block;
     background-color: #cccccc;
     border-radius: 19px;
     backdrop-filter: blur (10px);
     text-transform: capitalize;
   
   }
   .navdrop , .open li a {
      text-align: center;
     color: #000000;
     margin: 0;
     padding-top: 0px;
     text-decoration: none;
   }
   .open li {
     padding-top: 15px;
    
     
   }
   #sec h2 {
     font-size: 22px;
   }
   .sec2 h1  {
     font-size: 16px;
     width: 370px;
     margin-left: 27px;
  
  
   }
   h4.cap {
     font-size: 16px;
   }
   .workphoto {
     display: inline-block;
   }
    img.zah1 {
   width: 320px;
   height: 400px;
   margin-left: 55px; 
  }
  img.zah2 {
   width: 320px;
   height: 400px;
  margin-left: 55px; 
  }
  .workph img:hover
  {
  filter: brightness(1.1);
  width: 320px;
  height: 400px;
  }
  img.road1 {
   width: 320px;
   height: 400px;
   margin-left: 55px; 
  }
  img.road2 {
   width: 320px;
   height: 400px;
  margin-left: 55px; 
  }
  .cap2 span  {
   display: block;
   margin-top: 20px;
   margin-left: 40px;
  }
  img.road3 {
    width: 320px;
    height: 400px;
    margin-left: 55px; 
  }
  img.road4 {
    width: 320px;
    height: 400px;
    margin-left: 55px; 
  }
  .cap3 span  {
   display: block;
   margin-top: 20px;
   margin-left: 40px;
  }
  h4.cap3 {
   margin-left: 60px;
  } 
  div.vid {
   padding:  0px;
  
   height: 480px;
   margin-bottom: 150px;
  }
  .vid video
  { 
   align-items: center;
   margin: 0px;
   margin-left: 150px;
  
   padding: 0px;
  
  display: block;
  margin-top: 13px;
    overflow: hidden;
    width: 50%;
    height: 90%;
   
    border-radius: 10px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
  
   box-shadow: 1px 2px 3px black;
  
  }  
  .vid a {
  position: static;
   font-size: 20px;
   margin-left: 130px;
  }
   
  .lis img {
     
     width: 100%;
     padding-left: 0px;
     display: block;
   }
  
   ul.listt2 {
     background-color:transparent;
     padding: 0px;
     padding-left: 0px;
     margin: 0px;
     border-radius: 0px;
   
     height: 100px;
     margin-bottom: 50px;
     box-shadow: 0px 0px 0px rgb(255, 255, 255);
   
   
    }
    .listt2 li {
    height: 20px;
     text-transform: uppercase;
     font-weight: 1000;
     text-align: center;
      padding: 0px;
      
      padding-left:0px; 
      color: black;
      display: block;
      padding-top: 30px;
      font-size: 20px;
      box-shadow: 0px 0px 0px rgb(255, 251, 251);
     
     }
  
     div.foot {
      display: block;
      flex-wrap:nowrap;
      text-transform: uppercase;
       padding-left: 0px;
       font-size: 16px;
       
       
       
     
      
    }
    div.footer2 a {
     font-size: 17px;
     padding-left: 0px;
     padding-right: 0px;
     
 
    
    }
    div.footer1  {
     display: inline;

    }
    div.footer1 a {
     font-size: 17px;
    padding-right: 0px;
    margin-right: 0px;
   
    
    }
    .fo3 span {
     font-size:10px;
 
    }
    .foot-header, .footer1 , .footer2 {
     padding-left: 8px;
    display: inline-block;
    margin-left: 6px;
    }
    
    
    footer {
     width: 100%;
     height: 505px;
    }
    .fo2{
     margin-left: 0px;
     display: block;
     position: static;
     float: right;
    }
 
    .fo3{
     margin-left: 0px;
     display: block;
     position: static;
     float: right;
    }
    .footer2 {
     display: inline;
    }
    .footer2 a{
     padding-left: 0px;
   
     padding-left: 0px;
     padding-right: 0px;
     font-size: 8px;
    }
    .fo3 span {
      font-size:13px;
    }
    .footer2 a{
     padding-left: 0px;
   
     padding-left: 0px;
     padding-right: 0px;
     font-size: 8px;
    }
    .sc h6 {
    
      font-size: 15px;
      height: 70px;
     
     }

    
  
  
  



 }


 @media all and ( min-width: 375px) and (max-width: 413px) {


  body {

    
    background-size: 60% 95% ;
  }

  .backgr p  {
 
  
    
    font-size: 29px;
  
     }
       h1.scro  {
  
     
         font-size: 23px;
         padding-left: 30px;
           
   
   
   }
   .navbar a {
     display: none;
   }
   .btnn {
     display: block;
     margin-top: 16px;
     color: #ebebeb;
    
   }
   .navdrop , .open {
     display: block;
     background-color: #cccccc;
     border-radius: 19px;
     backdrop-filter: blur (10px);
     text-transform: capitalize;
   
   }
   .navdrop , .open li a {
      text-align: center;
     color: #000000;
     margin: 0;
     padding-top: 0px;
     text-decoration: none;
   }
   .open li {
     padding-top: 15px;
    
     
   }
   #sec h2 {
     font-size: 22px;
   }
   .sec2 h1  {
     font-size: 15px;
     width: 320px;
     margin-left: 18px;
  
  
   }
   h4.cap {
     font-size: 16px;
   }
   .workphoto {
     display: inline-block;
   }
    img.zah1 {
   width: 300px;
   height: 400px;
   margin-left: 35px; 
  }
  img.zah2 {
   width: 300px;
   height: 400px;
  margin-left: 35px; 
  }
  .workph img:hover
  {
  filter: brightness(1.1);
  width: 300px;
  height: 400px;
  }
  img.road1 {
   width: 300px;
   height: 400px;
   margin-left: 35px; 
  }
  img.road2 {
   width: 300px;
   height: 400px;
  margin-left: 35px; 
  }
  .cap2 span  {
   display: block;
   margin-top: 20px;
   margin-left: 40px;
  }
  img.road3 {
    width: 300px;
    height: 400px;
    margin-left: 35px; 
  }
  img.road4 {
    width: 300px;
    height: 400px;
    margin-left: 35px; 
  }
  .cap3 span  {
   display: block;
   margin-top: 20px;
   margin-left: 40px;
  }
  h4.cap3 {
   margin-left: 60px;
  } 
  div.vid {
   padding:  0px;
  
   height: 480px;
   margin-bottom: 150px;
  }
  .vid video
  { 
   align-items: center;
   margin: 0px;
   margin-left: 150px;
  
   padding: 0px;
  
  display: block;
  margin-top: 13px;
    overflow: hidden;
    width: 50%;
    height: 90%;
   
    border-radius: 10px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
  
   box-shadow: 1px 2px 3px black;
  
  }  
  .vid a {
  position: static;
   font-size: 16px;
   margin-left: 120px;
  }
   
  .lis img {
     
     width: 100%;
     padding-left: 0px;
     display: block;
   }
  
   ul.listt2 {
     background-color:transparent;
     padding: 0px;
     padding-left: 0px;
     margin: 0px;
     border-radius: 0px;
   
     height: 100px;
     margin-bottom: 50px;
     box-shadow: 0px 0px 0px rgb(255, 255, 255);
   
   
    }
    .listt2 li {
    height: 20px;
     text-transform: uppercase;
     font-weight: 1000;
     text-align: center;
      padding: 0px;
      
      padding-left:0px; 
      color: black;
      display: block;
      padding-top: 30px;
      font-size: 20px;
      box-shadow: 0px 0px 0px rgb(255, 251, 251);
     
     }
  
     div.foot {
      display: block;
      flex-wrap:nowrap;
      text-transform: uppercase;
       padding-left: 0px;
       font-size: 16px;
       
       
       
     
      
    }
    div.footer2 a {
     font-size: 17px;
     padding-left: 0px;
     padding-right: 0px;
     
 
    
    }
    div.footer1  {
     display: inline;

    }
    div.footer1 a {
     font-size: 17px;
    padding-right: 0px;
    margin-right: 0px;
   
    
    }
    .fo3 span {
     font-size:9px;
 
    }
    .foot-header, .footer1 , .footer2 {
     padding-left: 8px;
    display: inline-block;
    margin-left: 2px;
    }
    
    
    footer {
     width: 100%;
     height: 505px;
    }
    .fo2{
     margin-left: 0px;
     display: block;
     position: static;
     float: right;
    }
 
    .fo3{
     margin-left: 0px;
     display: block;
     position: static;
     float: right;
    }
    .footer2 {
     display: inline;
    }
    .footer2 a{
     padding-left: 0px;
   
     padding-left: 0px;
     padding-right: 0px;
     font-size: 8px;
    }
    .fo3 span {
      font-size:13px;
    }
    .footer2 a{
     padding-left: 0px;
   
     padding-left: 0px;
     padding-right: 0px;
     font-size: 8px;
    }
    .sc h6 {
      height: 70px;
     
    
        font-size: 15px;
       
       
    }




 }

 @media all and ( min-width: 330px) and (max-width: 374px) {


  body {

    
    background-size: 60% 95% ;
  }


  .backgr p  {
 
  
    
    font-size: 29px;
  
     }
       h1.scro  {
  
     
         font-size: 23px;
         padding-left: 30px;
           
   
   
   }
   .navbar a {
     display: none;
   }
   .btnn {
     display: block;
     margin-top: 16px;
     color: #ebebeb;
    
   }
   .navdrop , .open {
     display: block;
     background-color: #cccccc;
     border-radius: 19px;
     backdrop-filter: blur (10px);
     text-transform: capitalize;
   
   }
   .navdrop , .open li a {
      text-align: center;
     color: #000000;
     margin: 0;
     padding-top: 0px;
     text-decoration: none;
   }
   .open li {
     padding-top: 15px;
    
     
   }
   #sec h2 {
     font-size: 22px;
   }
   .sec2 h1  {
     font-size: 15px;
     width: 320px;
     margin-left: 18px;
  
  
   }
   h4.cap {
     font-size: 16px;
   }
   .workphoto {
     display: inline-block;
   }
    img.zah1 {
   width: 300px;
   height: 400px;
   margin-left: 35px; 
  }
  img.zah2 {
   width: 300px;
   height: 400px;
  margin-left: 35px; 
  }
  .workph img:hover
  {
  filter: brightness(1.1);
  width: 300px;
  height: 400px;
  }
  img.road1 {
   width: 300px;
   height: 400px;
   margin-left: 35px; 
  }
  img.road2 {
   width: 300px;
   height: 400px;
  margin-left: 35px; 
  }
  .cap2 span  {
   display: block;
   margin-top: 20px;
   margin-left: 40px;
  }
  img.road3 {
    width: 300px;
    height: 400px;
    margin-left: 35px; 
  }
  img.road4 {
    width: 300px;
    height: 400px;
    margin-left: 35px; 
  }
  .cap3 span  {
   display: block;
   margin-top: 20px;
   margin-left: 40px;
  }
  h4.cap3 {
   margin-left: 60px;
  } 
  div.vid {
   padding:  0px;
  
   height: 480px;
   margin-bottom: 150px;
  }
  .vid video
  { 
   align-items: center;
   margin: 0px;
   margin-left: 150px;
  
   padding: 0px;
  
  display: block;
  margin-top: 13px;
    overflow: hidden;
    width: 50%;
    height: 90%;
   
    border-radius: 10px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
  
   box-shadow: 1px 2px 3px black;
  
  }  
  .vid a {
  position: static;
   font-size: 16px;
   margin-left: 120px;
  }
   
  .lis img {
     
     width: 100%;
     padding-left: 0px;
     display: block;
   }
  
   ul.listt2 {
     background-color:transparent;
     padding: 0px;
     padding-left: 0px;
     margin: 0px;
     border-radius: 0px;
   
     height: 100px;
     margin-bottom: 50px;
     box-shadow: 0px 0px 0px rgb(255, 255, 255);
   
   
    }
    .listt2 li {
    height: 20px;
     text-transform: uppercase;
     font-weight: 1000;
     text-align: center;
      padding: 0px;
      
      padding-left:0px; 
      color: black;
      display: block;
      padding-top: 30px;
      font-size: 10px;
      box-shadow: 0px 0px 0px rgb(255, 251, 251);
     
     }
  
     div.foot {
      display: block;
      flex-wrap:nowrap;
      text-transform: uppercase;
       padding-left: 0px;
       font-size: 16px;
       
       
       
     
      
    }
    div.footer2 a {
     font-size: 16px;
     padding-left: 0px;
     padding-right: 0px;
     
 
    
    }
    div.footer1  {
     display: inline;

    }
    div.footer1 a {
     font-size: 16px;
    padding-right: 0px;
    margin-right: 0px;
   
    
    }
    .fo3 span {
     font-size:14px;
 
    }
    .foot-header, .footer1 , .footer2 {
     padding-left: 8px;
    display: inline-block;
    margin-left: 1px;
    }
    
    
    footer {
     width: 100%;
     height: 505px;
    }
    .fo2{
     margin-left: 0px;
     display: block;
     position: static;
     float: right;
    }
 
    .fo3{
     margin-left: 0px;
     display: block;
     position: static;
     float: right;
    }
    .footer2 {
     display: inline;
    }
    .footer2 a{
     padding-left: 0px;
   
     padding-left: 0px;
     padding-right: 0px;
     font-size: 8px;
    }
    .fo3 span {
      font-size:8px;
    }
    .footer2 a{
     padding-left: 0px;
   
     padding-left: 0px;
     padding-right: 0px;
     font-size: 8px;
    }
    .sc h6 {
      height: 95px;
     
    
        font-size: 19px;
       
       
    }




 }