@media (max-width: 800px) {
    .wrapper ul li{
      margin-left: 160px;
  }
  .wrapper ul li a{ 
    font-size: 20px;  
  }

  
.mob{
  margin-top: -700px;
}

    .wrapper img {
      width: 200px;
      transform: rotate(90deg);
      right: -80px;
      margin-top: 100px;
      position: absolute; 
    }
    .square{
      display: none;
    }
    .map{
      width: 100%;
      margin-left: -10px;
     
    }
    .text_center{
      text-align: center !important;
    }

    .wrapper1 span {
      font-size: 12px;
    }
    .wrapper1 h1 {
      font-size: 24px;
    }
    .slide0{
      margin-left: 200px;
      margin-top: 40px;
    }
    .slide1{
      margin-left: 200px;
      margin-top: 40px;
    }
    .slide2{
      margin-left: 200px;
      margin-top: 40px;
    }
    .slide3{
      margin-left: 200px;
      margin-top: 40px;
    }
    .note{
      margin-top: 40px !important;
    }
    .container1{
      margin-left: 30px;
      margin-top: 100px;
    }
    
    .out{
      color: white;
    }
    .description{
      font-size: 14px;
     margin-left: 1px;
    }
    .description3{
      padding-bottom: 300px;
    }
    .phil{
      font-size: 24px;
     margin-left: 15px;
     margin-top: -50px;
    }
    .displayhide{
      display: none;
    }
    .wer{
     right: -10px !important;
    }
    .copy{
      text-align: right;
      margin-right: 215px;
      position: relative;
    }
    .coor{
      margin-right: 200px; 
      display: none;
    }
    .QR{
      display: none;
    }

    .Project{
      font-size: 50px !important;
      margin-top: 100px !important;
      margin-bottom: 300px;
      padding-top: 150px;
    }
    .get{
      margin-top: -250px;
    }
      .nolook{
      margin-top: 150px;
      margin-left: 70px;
      position: relative;
      text-align: left;
  }  

  .almana{
     margin-left: -65px;
     position: relative;
     text-align: left;
      }
  .admin{
    margin-left: 290px;
    text-align: left;

  }
  .numb{
   margin-left: 80px;
    text-align: left;
  }

  .img-fluid01{
margin-top: 98px;
position:relative; 
right:70px;

  }
 .img-fluid02{
margin-top: -235px;
position:relative;
left: 20px;
  }

.lights{
position: relative;
top: -135px;
left: 30px;
}
.lightss{
position: relative;
top: -100px;
left: 220px;
}

.mobileauto{
position: relative;
top: 280px;
font-size: 38px;
margin-left: -30px;
}
.lig{
  position: relative;
  top: 250px;

}
.ligt{
  position: relative;
  top: 190px;
  margin-left: 10px;

}

.mobilelight{
  font-size: 45px;
  position: relative;
  top: 220px;
  margin-left: -25px;
}



.description2{
  padding-top: 220px;
}
.description3{
  padding-top: 280px;
}
    .find{
      margin-top: 0px!important;
    }
    .px32{
      font-size: 15px !important;
    }
    .px24{
      font-size: 24px !important;
    }
    .px18{
      font-size: 14px !important;
    }
    .rayth{
      text-align: right !important;
    }
    .tcenter{
      text-align: center;
    }
    .nomargin{
      margin: 0px !important;
    }
    .mt{
      margin-top: 30px !important;
    }


  #myVideo {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  z-index: -1;
  left: -350px;
  width: 300vw;

}


.adjust{
  padding-top: 530px;
}

.note{
 position: relative;
 top: 70px;

}
.note1{
  font-size: 25px;
}


 .lightsss{
  width: 41%;
  margin-top: 150%;
  margin-bottom: 50%;

 }
 .lightssst{
  width: 41%;
  margin-top: 160%;
  margin-bottom: 50%;

 }

.ting{
  width: 100%;
}

.line1 .line2 .line3 .line4 .line0{
  display: none;
}


}

@media only screen and (max-width: 825px) and (min-width: 400px) and (max-height: 1181px) {
    .md_hide{
      display: hide;
    }

    .line1 .line2 .line3 .line4 .line0{
  display: none;
}

   
}
@media (max-width: 399px) { 
    .sml_hide{
      display: none;
    }

    .service{
  width: 50%;
  color: white;
  margin-right: 750px;
  margin-top: 0px;
}
.fontss{
  width: 50%;
  color: white;
  margin-left: -50px;
}


}

@media only screen and (max-height: 1100px) and (min-height: 720px) {


.progress-container{
  width: 500px;
  margin-left: -220px;
  margin-bottom: 400px;

}


  }


  @media only screen and (max-height: 720px) and (min-height: 550px) {


.progress-container{
  width: 200px;
  margin-left: -69px;
  margin-bottom: 210px;


}
.out{
  margin-top: 140px;
}

  }


@media only screen and (max-width: 1523px) and (min-width: 1423px) and (max-height: 1100px) {
     




     .container1 {
  height: 80vw;
  width: 100vh;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  position: relative;
  overflow-x: hidden ;
  overflow-y: scroll;
 
  margin-left: -50px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  perspective: 50px;
  
}


     .rits{
        margin-left: -15px;
      }

      .nolook{
    margin-left: -20px;
  }  
    


    .line1 {
  border-left: 0.1em solid black;
  height: 100%;
  position: fixed;
  margin-left: 340px;
  z-index: 10;
  opacity: 0.1;
 /* transform: rotate(90deg);*/
}
.line2 {
  border-left: 0.1em solid black;
  height:100%;
  position: fixed;
  margin-left: 650px;
  z-index: 10;
  opacity: 0.1;
}
.line3 {
  border-left: 0.1em solid black;
  height:100%;
  position: fixed;
  margin-left: 940px;
  z-index: 10;
  opacity: 0.1;

}
.line4 {
  border-left: 0.1em solid black;
  height: 100%;
  position: fixed;
  margin-left: 1240px;
  z-index: 10;
  opacity: 0.1;

}
    
    .col-md-7{
   height: 800px;
  }

  .description {

margin-top: 300px;
  }
  .phil{
    margin-top: 180px;
  }
    .container1{
    margin-top: 90px;
  }

}

@media only screen and (max-width: 1600px) and (min-width: 1523px) and (max-height: 1100px) {
    
    .container1 {
  height: 80vw;
  width: 100vh;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  position: relative;
  overflow-x: hidden ;
  overflow-y: scroll;
 
  margin-left: -120px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  perspective: 50px;
  
}




    .QR{
        margin-left: -150px;
      }


     .rits{
        margin-left: -25px;
      }

      .img-u62{
       
 margin-left: 100px;
      }
    
    .line1 {
  border-left: 0.1em solid black;
  height: 100%;
  position: fixed;
  margin-left: 420px;
  z-index: 10;
  opacity: 0.1;
 /* transform: rotate(90deg);*/
}
.line2 {
  border-left: 0.1em solid black;
  height:100%;
  position: fixed;
  margin-left: 770px;
  z-index: 10;
  opacity: 0.1;
}
.line3 {
  border-left: 0.1em solid black;
  height:100%;
  position: fixed;
  margin-left: 1070px;
  z-index: 10;
  opacity: 0.1;

}
.line4 {
  border-left: 0.1em solid black;
  height: 100%;
  position: fixed;
  margin-left: 1350px;
  z-index: 10;
  opacity: 0.1;

}
    
    
.col-md-7{
   height: 1000px;
  }

  .description {
margin-bottom: -200px;
margin-top: 400px;
  }
  .phil{
    margin-top: 300px;
  }

  .container1{
    margin-top: 60px;
  }
}

@media only screen and (max-width: 1750px) and (min-width: 1623px) and (max-height: 1100px) {
     .rits{
        margin-left: -40px;
      }

       .img-u62{
       
 margin-left: 170px;
      }
    
    .line1 {
  border-left: 0.1em solid black;
  height: 100%;
  position: fixed;
  margin-left: 480px;
  z-index: 10;
  opacity: 0.1;
 /* transform: rotate(90deg);*/
}
.line2 {
  border-left: 0.1em solid black;
  height:100%;
  position: fixed;
  margin-left: 870px;
  z-index: 10;
  opacity: 0.1;
}
.line3 {
  border-left: 0.1em solid black;
  height:100%;
  position: fixed;
  margin-left: 1200px;
  z-index: 10;
  opacity: 0.1;

}
.line4 {
  border-left: 0.1em solid black;
  height: 100%;
  position: fixed;
  margin-left: 1550px;
  z-index: 10;
  opacity: 0.1;

}
 
 .col-md-7{
   height: 1000px;
  }

  .description {
margin-bottom: -200px;
margin-top: 400px;
  }
  .phil{
    margin-top: 300px;
  }   
    
.container1{
    margin-top: 90px;
  }

    .container1 {
  height: 80vw;
  width: 100vh;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  position: relative;
  overflow-x: hidden ;
  overflow-y: scroll;
 
  margin-left: -170px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  perspective: 50px;
  
}
}

@media only screen and (max-width: 1800px) and (min-width: 1750px) and (max-height: 1100px) {
     
      .img-u62{
        margin-left: 220px;

      }



      .QR{
        margin-left: 100px;
      }



       .rits{
        margin-left: -50px;
      }

    
    .line1 {
  border-left: 0.1em solid black;
  height: 100%;
  position: fixed;
  margin-left: 500px;
  z-index: 10;
  opacity: 0.1;
 /* transform: rotate(90deg);*/
}
.line2 {
  border-left: 0.1em solid black;
  height:100%;
  position: fixed;
  margin-left: 910px;
  z-index: 10;
  opacity: 0.1;
}
.line3 {
  border-left: 0.1em solid black;
  height:100%;
  position: fixed;
  margin-left: 1300px;
  z-index: 10;
  opacity: 0.1;

}
.line4 {
  border-left: 0.1em solid black;
  height: 100%;
  position: fixed;
  margin-left: 1600px;
  z-index: 10;
  opacity: 0.1;

}
    
    .col-md-7{
   height: 1000px;
  }

  .description {
margin-bottom: -200px;
margin-top: 400px;
  }
  .phil{
    margin-top: 300px;
  }
  .container1{
    margin-top: 150px;
  }

  .container1 {
  height: 80vw;
  width: 100vh;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  position: relative;
  overflow-x: hidden ;
  overflow-y: scroll;
 
  margin-left: -210px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  perspective: 50px;
  
}


}


@media only screen and (max-width: 1899px) and (min-width: 1801px) and (max-height: 1100px) {
     
.img-u62{
        margin-left: 250px;

      }



     .rits{
        margin-left: -60px;
      }

      .nolook{
    margin-left: -115px;
  }  
     
    
  .line1 {
  border-left: 0.1em solid black;
  height: 100%;
  position: fixed;
  margin-left: 530px;
  z-index: 10;
  opacity: 0.1;
 /* transform: rotate(90deg);*/
}
.line2 {
  border-left: 0.1em solid black;
  height:100%;
  position: fixed;
  margin-left: 950px;
  z-index: 10;
  opacity: 0.1;
}
.line3 {
  border-left: 0.1em solid black;
  height:100%;
  position: fixed;
  margin-left: 1400px;
  z-index: 10;
  opacity: 0.1;

}
.line4 {
  border-left: 0.1em solid black;
  height: 100%;
  position: fixed;
  margin-left: 1700px;
  z-index: 10;
  opacity: 0.1;

}
    
 .col-md-7{
   height: 1000px;
  }

  .description {
margin-bottom: -200px;
margin-top: 400px;
  }
  .phil{
    margin-top: 300px;
  }   


 .container1{
    margin-top: 150px;
  }

  .QR{
        margin-left: 140px;
      }
.container1 {
  height: 80vw;
  width: 100vh;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  position: relative;
  overflow-x: hidden ;
  overflow-y: scroll;
 
  margin-left: -230px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  perspective: 50px;
  
}

}



  

@media only screen and (max-width: 2000px) and (min-width: 1899px) and (max-height: 1100px) {
    


      .rits{
        margin-left: -70px;
      }
.QR{
        margin-left: 260px;
      }

      .img-u62{
       
 margin-left: 300px;
 margin-top: -350px;
      } 
    
  .line1 {
  border-left: 0.1em solid black;
  height: 100%;
  position: fixed;
  margin-left: 550px;
  z-index: 10;
  opacity: 0.1;
 /* transform: rotate(90deg);*/
}
.line2 {
  border-left: 0.1em solid black;
  height:100%;
  position: fixed;
  margin-left: 990px;
  z-index: 10;
  opacity: 0.1;
}
.line3 {
  border-left: 0.1em solid black;
  height:100%;
  position: fixed;
  margin-left: 1300px;
  z-index: 10;
  opacity: 0.1;

}
.line4 {
  border-left: 0.1em solid black;
  height: 100%;
  position: fixed;
  margin-left: 1610px;
  z-index: 10;
  opacity: 0.1;

}
.col-md-7{
   height: 1000px;
  }

  .description {
margin-bottom: -200px;
margin-top: 400px;
  }
  .phil{
    margin-top: 300px;
  }
    
  .nolook{
    margin-left: -115px;
  }  


  .container1{
    margin-top: 150px;
  }

  .container1 {
  height: 80vw;
  width: 100vh;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  position: relative;
  overflow-x: hidden ;
  overflow-y: scroll;
 
  margin-left: -270px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  perspective: 50px;
  
}
.fontss{
  font-size: 25px;
}
.service{
  width: 30%;
  color: white;
  margin-left: 750px;
  margin-top: -555px;
}
}
@media only screen and (max-width: 1299px) and (min-width: 900px) and (max-height: 2000px) {
    
      .rits{

        margin-left: -1190px;
      }

      .sho{
        margin-right: 20px;
      }
      .text_center{
        margin-right: 50px;

      }
      .service{
  width: 30%;
  color: white;
  margin-left: 600px;
  margin-top: -300px;
}

}


@media only screen and (max-width: 2000px) and (min-width: 1750px) and (max-height: 1100px) {
    
      .wer{

        margin-left: 1250px;
        width: 900px;
        margin-top: 150px;
      }


     
}


@media only screen and (max-width: 550px) and (min-width: 350px) and (max-height: 1100px) {
    
      
.fontss{
  margin-left: -150px;
}

.tise{
  margin-left: -150px;

}

.exper{
  margin-left: 220px;
}

.service{
  margin-left: 220px;
  margin-top: 100px;
}
     
}

@media only screen and (max-width: 1400px) and (min-width: 1300px) and (max-height: 2000px) {
    
      
.service{
  margin-top: -300px;
}

     
}

@media only screen and (max-width: 1899px) and (min-width: 1400px) and (max-height: 2000px) {
    
      
.service{
  margin-top: -300px;
}

     
}
@media only screen and (max-width: 1199px) and (min-width: 995px) and (max-height: 2000px) {
    
      
.service{
  margin-top: -315px;
}

     
}

@media only screen and (max-width: 1399px) and (min-width: 1000px) and (max-height: 2000px) {
    
      
.move{
  margin-left: 450px;
 
}

     
}

@media only screen and (max-width: 1500px) and (min-width: 1400px) and (max-height: 2000px) {
    
      
.move{

 margin-left: -20px;
}
     
}

@media only screen and (max-width: 1600px) and (min-width: 1501px) and (max-height: 2000px) {
    
.move{

 margin-left: -30px;
}
    
}
@media only screen and (max-width: 1700px) and (min-width: 1601px) and (max-height: 2000px) {
    
.move{

 margin-left: -50px;
}   
}

@media only screen and (max-width: 1800px) and (min-width: 1701px) and (max-height: 2000px) {
.move{
 margin-left: -80px;
}   
}
@media only screen and (max-width: 1900px) and (min-width: 1801px) and (max-height: 2000px) {
.move{
 margin-left: -110px;
}   
}
@media only screen and (max-width: 2000px) and (min-width: 1901px) and (max-height: 2000px) {
.move{
 margin-left: -150px;
}   
}


@media only screen and (max-width: 399px) and (min-width: 300px) and (max-height: 900px) {

.fontss{
 width: 200%;
  color: white;
  margin-left: -210px;
}

.tise{
  margin-left: -210px;
}
.pluss{
   padding-bottom: 3%;
  width: 30%;
  border-radius: 20px;
 background-color: transparent;
 border-color: black;
}
}






/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
@media (min-width:320px) and (max-width: 365px) and (max-height: 950) { 
  
.pro{
  margin-top: 130px;
  position: fixed;

}
.complete{
   margin-top: 280px;
  position: fixed;
}


}


 .videoBg{
        position:absolute;
        top: 0;
        left: 5;
        width: 100%;
        height: 100%;
    }

    @media (min-aspect-ratio: 16/9) {
      .videoBg{
       
        width: 100%;
        height: auto;
      }
    }
    @media (max-aspect-ratio: 16/9) {
      .videoBg {
       
       width:100%; 
        height: 100%;

        padding:0
      }
    }
video{
  object-fit:fill

}






/* smartphones, Android phones, landscape iPhone */

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

.pro{
  margin-top: 130px;
  position: fixed;

}
.complete{
   margin-top: 280px;
  position: fixed;
}


}


 .videoBg{
        position:absolute;
        top: 0;
        left: 5;
        width: 100%;
        height: 100%;
    }

    @media (min-aspect-ratio: 16/9) {
      .videoBg{
       
        width: 100%;
        height: auto;
      }
    }
    @media (max-aspect-ratio: 16/9) {
      .videoBg {
       
       width:100%; 
        height: 100%;

        padding:0
      }
    }



 }


@media (min-width:600px) and (max-width: 200px)  {





}