.slideshow-container {
  max-width: 95%;
  position: relative;
  margin: auto;
}


body
{

    margin:0;
    font-family: Arial;
}
p
{

  font-size: 0.99em;
}

h6 
{
   margin-bottom: 5px;
   margin-top: 5px;
   color: rgb(25, 25, 61);
}


.container 
{

    text-align: center;
    padding: .8em 1.2em;
}

.logo
 {

   width:210px; 
   height: 90px;
   margin-left: -1%;
   margin-bottom: -10px;
 }
.hide-mobile
{
    display: none;
}

.hiddenv
{
	display:none;
}


header
{
   display :flex;
   justify-content: space-between;

}

.menu
{

    width:35px;
    margin-top: 45%;
}
.company
{
text-align:justify;text-justify:inter-word;

}

.bulb

{
    width:70%; height:510px;
    margin-left:3%;

}




div.main {
  width:95%;
  overflow:hidden;
  background-color:rgb(21, 21, 51);
  margin-left: 3%;
  height: 20px;
  margin-right: 3%;
 padding-top: 3px;
  
  font-size: 1.1em;
  font-family: arial;
  color:gray;
}
div.slide-right p {
  -moz-animation: 10s slide-right;
  -webkit-animation: 10s slide-right;
  -o-animation: 10s slide-right;
  animation: 10s slide-right;
  margin:0;
  font-size: 0.8em;
  color: white;
  
}
div.slide-left p {
  -moz-animation: 10s slide-left;
  -webkit-animation: 10s slide-left;
  -o-animation: 10s slide-left;
  animation: 10s slide-left;
  margin:0;
}
@-webkit-keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }
@-moz-keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }
 @-o-keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }
@keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }

@-webkit-keyframes slide-left { from {margin-left: 0%;width: 100%;}
 to {margin-left: -100%;width: 300%;} }
@-moz-keyframes slide-left { from {margin-left: 0%;width: 100%;}
 to {margin-left: -100%;width: 300%;} }
@-o-keyframes slide-left { from {margin-left: 0%;width: 100%;}
 to {margin-left: -100%;width: 300%;} }
@keyframes slide-left { from {margin-left: 0%;width: 100%;}
 to {margin-left: -100%;width: 300%;} }






















/* ELECTRICAL   */


.Electrical
{

 text-align:justify;text-justify:inter-word;width: 95%;color: #717171;margin-left: 3%;

}

.ele
{
 width:90%;
  height:360px; 
 margin-left: 3%;

}

.Electrical1
{
  text-align:justify;text-justify:inter-word;color: #717171;width: 95%;margin-left: 3%;

}


.powers
{
 width:98%;
 height:360px; 
 margin-top:5%; 

}



p{
  margin-top: 2px;
}



.miss
{
  margin-left: 3%;
  margin-top: 5px;

}
.viss
{

  margin-left: 3%;

}



/* Electronics    */

.Electronics
{


 text-align:justify;text-justify:inter-word;color: #717171; margin-left: 3%;
 width:95%;
 font-family: Arial;
    

}
.smart

{
   width:94%;
   height:360PX;
  
   margin-left: 3%;
}

h5
{
margin: 5px;
margin-bottom: 5px;
margin-left: 3%;
color: rgb(25, 25, 61);


}

.all h5
{
  margin-left: 0%;
}





/* HOME PAGE */

.companyh

{

  margin-left: 3%; margin-top: 5px;
}

.company
{
   text-align:justify;text-justify:inter-word;
   color:gray;
   margin-left:3%;
   width:95%;
   font-family: Arial;

}

.bulb
{
  width:90%;
  height:360px;  
 
 
  margin-left: 3%;

}



.Vision
{
  text-align:justify;text-justify:inter-word;
  color:grey;
  margin-left: 3%;
  width:95%;
  font-family: Arial;

}


.Mission
{
  text-align:justify;text-justify:inter-word;
  color:grey;
  margin-left: 3%;
  width:95%;
  font-family: Arial;

}

.all
{

  text-align:justify;text-justify:inter-word;
 
  margin-left: 3%;
  width:95%;


}


.Proffesional p
{
  color: #717171;
  font-family: Arial;
}




.Ethical p
{

line-height: 20px; font-family:Arial ;text-align:justify;text-justify:inter-word;color:grey;


}



.Quality p
{
line-height: 20px; font-family: Arial;text-align:justify;text-justify:inter-word;color:grey;


}

.address
{   
     margin-left:8%;
     height:12px;
     background-color: brown;
     text-align: center;
     width:95%;
     margin-right:10%;
     text-align: center;
     margin-top:2px;
    padding-top: 3px;

}





/*  projectm */

.projectm p 
{  
  position:relative;
  color: #717171;
  font-family: Arial;
  margin-left: 3%;
  width:95%;
  text-align:justify;text-justify:inter-word;
  

}
.pmanagement
{
  width:90%; height:400px;
 margin-left:3%;


}



/*energym*/


.energym p 
{
 color: #717171;
 font-family: Arial;
 margin-left: 3%;
 width:95%;
 text-align:justify;text-justify:inter-word;

}

 
   




/*mechanical*/

.mec
{
 width:90%; height:454px;  
 margin-left: 3%;
}
.automatic
{
 width:40%; height:354px;  
 margin-left: 3%;
}


.mechanical
{
margin-bottom: 7px; font-family: Arial; font-size: 0.99em;text-align:justify;text-justify:inter-word; margin-left: 3%; line-height: 20px;color: #717171;
margin-right: 3%;
}



/*  CONTACT */
.con
{
    margin-left: 3%;
    
}


.location
{

  margin-left: 3%;
   width:450px; 
   height:286px; 
    right :7%;
    top:600px;

}
.button
{

  height:40px;border-radius: 12px;background-color:tan;
}

.contact
{
   
   font-family: Arial;
   color:gray;
   margin-bottom: 10px;
 

}
.contact p
{

  margin-bottom: 7px;
}
.detail
{
  margin-left: 0;
}









/*Projects */

.lndc
{
	
	right:24%;
	top:680px;
	color:gray;
	width:20%;
  height:20%;

  margin-left: 9%;
	
}



.shells
{

	
	
	color:gray;
	width:15%;
  height:140px;
  margin-left: 5%;
  margin-top:2px;
 
	
}

.shell2
{
  position: absolute;
  width:15%;
  height:140px;
  left:21%;
  margin-top: 4px;
 

}

.shell3
{
  position: absolute;
  width:15%;
  height:140px;
  left:40%;
  margin-top: 4px;


}


.sun
{

  
	color:gray;
	width:15%;
  height:140px;
  margin-left: 9%;
  
	
  
}

.sun2
{
  
  position:absolute;
	width:15%;
  height:140px;
  margin-left: 22%;
  margin-top: 4px;
 

}

.automatic
{
  width:15%;
  height:140px;
  margin-left: 5%;
  margin-top: 4px;
 

}

.automatic1
{
  position: absolute;
  width:15%;
  height:140px;
  margin-left: 20%;
  margin-top: 4px;
 

}

.automatic2
{
  position: absolute;
  width:15%;
  height:140px;
  margin-left: 37%;
  margin-top: 4px;
 
  
}
.kings2
{
	position:absolute;
	width:15%;
  height:140px;
  margin-left: 20%;
  margin-top: 4px;
 
	
}
.kings1
{
	width:15%;
  height:140px;
  margin-left: 5%;
  margin-top: 4px;
 
	
}
.moonstar
{
	position:absolute;
	 margin-left: 26%;

	color:gray;
  width:20%;
  height:160px;
  
	


	
}


.moon
{

    
 margin-left: 5%;

	color:gray;
	width:20%;
  height:160px;
  
	



}



.LCAp
{

     
  margin-top:3px;
 margin-left: 5%;

	color:gray;
	width:15%;
  height:140px;
 

}


.LCAp1
{

   position: absolute;  
  
 margin-left: 20%;
 margin-top: 4px;

	color:gray;
	width:15%;
  height:140px;
  
	

}

.LCAp2
{

   position: absolute;  
  
 margin-left: 38%;
 margin-top: 4px;

	color:gray;
	width:15%;
  height:140px;
  
	

}





.park
{
  margin-left: 9%;
	color:gray;
	width:20%;
  height:154px;
  margin-top: 4px;
 
	

}

.thetsane
{
  position: absolute;
  margin-left: 26%;
  margin-top: 4px;
	color:gray;
	width:20%;
  height:154px;
  
	

}


.spring
{
 
  margin-left: 8%;
	color:gray;
	width:20%;
  height:22%;
  

}

.makhooane
{

  
  margin-left: 9%;
	color:gray;
	width:20%;
  height:22%;




}





.detail
{

  margin-left: 0%;
  
}

.contact
{
   
   font-family: Arial;
   color:gray;
   margin-bottom: 10px;

}
.contact p
{

  margin-bottom: 7px;
}


.pic
{
  margin-left: 0.5%;
  margin-bottom: 1px;
  width:90%;
  
}

.fill
{
  margin-left:3%;
  position: relative;
}




.fprojects
{

  color: #717171;line-height: normal;margin-left:3% ;width: fit-content;width:95%;line-height: 21px; text-align:justify;text-justify:inter-word;
}








/*desktop version */

@media only screen and (min-width: 990px) 
{
 
  
  div.main {
    width:84%;
    overflow:hidden;
    background-color:rgb(21, 21, 51);
    margin-left: 8%;
    height: 20px;
    margin-right: 10%;
   padding-top: 3px;
    
    font-size: 1.1em;
    font-family: "Arial";
    color:white;
  }
  div.slide-right p {
    -moz-animation: 40s slide-right;
    -webkit-animation:40s slide-right;
    -o-animation: 40s slide-right;
    animation: 40s slide-right;
    margin:0;
    font-size: 0.8em;
  }
  div.slide-left p {
    -moz-animation: 40s slide-left;
    -webkit-animation: 40s slide-left;
    -o-animation: 40s slide-left;
    animation: 40s slide-left;
    margin:0;
  }
  @-webkit-keyframes slide-right { from { margin-left: 100%;width: 300%; }
    to {margin-left: 0%;width: 100%;} }
  @-moz-keyframes slide-right { from { margin-left: 100%;width: 300%; }
    to {margin-left: 0%;width: 100%;} }
   @-o-keyframes slide-right { from { margin-left: 100%;width: 300%; }
    to {margin-left: 0%;width: 100%;} }
  @keyframes slide-right { from { margin-left: 100%;width: 300%; }
    to {margin-left: 0%;width: 100%;} }
  
  @-webkit-keyframes slide-left { from {margin-left: 0%;width: 100%;}
   to {margin-left: -100%;width: 300%;} }
  @-moz-keyframes slide-left { from {margin-left: 0%;width: 100%;}
   to {margin-left: -100%;width: 300%;} }
  @-o-keyframes slide-left { from {margin-left: 0%;width: 100%;}
   to {margin-left: -100%;width: 300%;} }
  @keyframes slide-left { from {margin-left: 0%;width: 100%;}
   to {margin-left: -100%;width: 300%;} }


h6
{
  color: rgb(25, 25, 61);

}

.slideshow-container {
  max-width: 70%;
  position: relative;
  margin: auto;
}





  .logo
 {

   width:180px; 
   height:55px;
   margin-left: 6%;
   margin-bottom: -9px;
   z-index: -2px;
 }


   .show-desktop
   {
       display: block;
       margin: 0 auto 13% auto;
   }

   .hide-desktop
   {
       display: none;
   }
   .About
   {
      
      margin-top: 15px;
      margin-left:8%;
      width:90px;

   }

   .transformer
   {
      margin-left: 70%;
      margin-top: -2px;

   }

   .address
   {   
        margin-left:8%;
        height:18px;
        background-color: rgb(201, 5, 5);
        text-align: center;
        width:84%;
        margin-right:10%;
        text-align: center;
        margin-top:2px;
       padding-top: 3px;

   }
   .slideshow-container
   {
     z-index: -2;

   }


   ul
   {
    margin:0px;
    padding:0px;
    list-style:none;
   }


   ul li 
  {
    
   margin-top: 40px;
   float: left;
   width:100px;
   height:30px;
   font-size: .8em;
   background-color:white;
   opacity:.8;
   text-align: center;
   line-clamp: 70px;
   margin-right: 1px;
   
  }



 ul li a
  {
   display:block;
   color:black;
   text-decoration: none;
   padding:10px;
   
   }

   ul li ul li a
  {
   display:block;
   color:black;
   text-decoration: none;
   padding:10px;
   
   }

  



  ul li a:hover
  {
   background-color:gray; 


  }
 ul li ul li a:hover
  {
   background-color:gray; 
   color:white;


  }

 ul li ul li
  {  
   position: relative;
   font-size:0.8em;
   margin-top:0px;
   height:45px;
   width:115px;
   display:none;
   text-align: center;
   
 
   background-color: gray;
  }


 ul li:hover ul li
  {
   display:block;
  }
 ul li ul li:hover ul li ul li
  {
   display:block;
  }
  h4
  {
    margin-top: 20px;
    margin-left: 100px ;
    

  }
  h5
  {
    color: rgb(25, 25, 61);
    margin-left: 8%;

  }

  h6 
  {
     margin-bottom: 5px;
     margin-top: 5px;
     color: rgb(25, 25, 61);
  }

h1
  {

   color:black;
  }


/* HOME PAGE */


.companyh
{
  margin-left: 8%; margin-top: 5px;

}

.company
{
  margin-bottom: 10px; text-align:justify;text-justify:inter-word;color:gray;width: 52%;height:50%;margin-left: 8%; line-height: 20px; font-family:Arial;padding-right: 5px;

}

.bulb
{
  width:100%;  height:220px;right:-5px;margin-left:-4px;   
}


.miss
{
  margin-left: 8%;

}
.viss
{

  margin-left: 8%;

}



.Vision
{
   text-align:justify;text-justify:inter-word;margin-top:5px;color:grey;width: 52%;height:20%;margin-left:8%; line-height: 20px; font-family:Arial, Helvetica, sans-serif;padding-right: 5px;

}


.Mission
{
   text-align:justify;text-justify:inter-word;margin-top:10px;color:grey;width:52%;height:20%;margin-left: 8%; line-height: 20px; font-family:Arial, Helvetica, sans-serif;padding-right: 5px;

}

.all
{

   position: absolute; width:30%;   Right :8%;top:2px;

}


.Proffesional p
{

  margin-top:auto; font-family: Arial;text-justify:inter-word;margin-top:2px;color:gray;

}




.Ethical p
{

 font-family: Arial;text-align:justify;text-justify:inter-word;color:grey;


}



.Quality p
{
 font-family: Arial;text-align:justify;text-justify:inter-word;margin-top:2px;color:grey;


}

/* Electrical Page*/

.Electrical
{

 text-align:justify;text-justify:inter-word;width: 52%;height:15%;line-height: 20px;margin-left: 8%;color: #717171;font-family: Arial;

}

.ele
{
   Position:absolute; width:50%; height:170px; right :-62%;top:2px;

}

.Electrical1
{
    line-height:20px;text-align:justify;text-justify:inter-word;color: #717171;font-family: Arial;width: 52%;margin-left: 8%;

}


.powers
{
    Position:absolute; width:50%; height:170px;  right :-62%;top:2px;

}


/*projectm*/

.projectm
{

  position: relative;
 


}

.projectm p 
  {
   color: #717171;
   font-family: Arial;
   margin-left: 8%;
   width:84%;
   text-align:justify;text-justify:inter-word;
  
  }

  
.pmanagement
{
 position:absolute;
 margin-left:50%;
 width:20%;
 height:120px;
 margin-top:-118px;

}



  /*energym*/


  .energym p 
  {
   color: #717171;
   font-family: Arial;
   margin-left: 8%;
   width:84%;
   text-align:justify;text-justify:inter-word;
  
  }

   


/* Electronics    */

.Electronics
{


font-family:Arial, Helvetica, sans-serif;line-height :20px; text-align:justify;text-justify:inter-word;color: #717171; width: 52%; height: 15%;margin-left: 8%;
    

}
.smart

{
    Position:absolute; width:20%; height:250px;  right :14%;top:580px;

}


/* MECHANICAL          */

.mechanical
{
margin-bottom: 7px; font-family:Arial; font-size: 0.99em;   text-align:justify;text-justify:inter-word; margin-left: 8%; width:52%;height:150px;line-height: 20px;color: #717171;

}

.mec
{
Position:absolute; width:20%; height:204px;  right :12%;top:580px;
}





/*  CONTACT */



.location
{

  Position:absolute;
   width:450px; 
   height:286px; 
    right :8%;
    top:585px;

}
.button
{

  height:40px;border-radius: 12px;background-color:tan;
}

/*Projects */

.lndc
{
	
	right:24%;
	top:680px;
	color:gray;
	width:20%;
  height:20%;
  border: aqua;
  margin-left: 9%;
	
}



.shells
{

	
	
	color:gray;
	width:15%;
  height:140px;
  margin-left: 9%;
  margin-top: 4px;
  
	
}

.shell2
{
  position: absolute;
  width:15%;
  height:140px;
  left:21%;
 
  margin-top: 4px;
 

}

.shell3
{
  position: absolute;
  width:15%;
  height:140px;
  left:40%;
  margin-top: 4px;
 

}


.sun
{

  
	color:gray;
	width:15%;
  height:140px;
  margin-left: 9%;
  margin-top: 4px;
  
	
  
}

.sun2
{
  
  position:absolute;

	width:15%;
  height:140px;
  margin-left: 22%;
  margin-top: 4px;
 

  
	

}
.kings2
{
	position:absolute;
	width:15%;
  height:140px;
  margin-left: 20%;
  margin-top: 4px;
 
	
}
.kings1
{
	width:15%;
  height:140px;
  margin-left: 9%;
  margin-top: 4px;
 
	
}

.automatic
{
  width:15%;
  height:140px;
  margin-left: 9%;
  margin-top: 4px;
 

}

.automatic1
{
  position: absolute;
  width:15%;
  height:140px;
  margin-left: 20%;
  margin-top: 4px;
 
  


}

.automatic2
{
  position: absolute;
  width:15%;
  height:140px;
  margin-left: 37%;
  margin-top: 4px;
 
  


}



.LCAp
{

     
  
 margin-left: 9%;

	color:gray;
	width:15%;
  height:140px;
  margin-top: 4px;

}


.LCAp1
{

   position: absolute;  
  
 margin-left: 20%;
 margin-top: 4px;

	color:gray;
	width:15%;
  height:140px;
  
	

}

.LCAp2
{

   position: absolute;  
  
 margin-left: 38%;
 margin-top: 4px;

	color:gray;
	width:15%;
  height:140px;
  
	

}

.moonstar
{
	position:absolute;
	 margin-left: 26%;

	color:gray;
	width:20%;
  height:160px;
  
	


	
}


.moon
{

    
 margin-left: 9%;

	color:gray;
	width:20%;
  height:160px;
  
	



}

.park
{
  margin-left: 9%;
	color:gray;
	width:20%;
  height:22%;
 
	

}

.thetsane
{
  position: absolute;
  margin-left: 26%;
  margin-top: 4px;
	color:gray;
	width:20%;
  height:154px;
  
	

}


.spring
{
 
  margin-left: 8%;
	color:gray;
	width:20%;
  height:22%;
  

}

.makhooane
{

  
  margin-left: 9%;
	color:gray;
	width:20%;
  height:22%;




}





.detail
{

  margin-left: 0%;
  
}

.contact
{
   
   font-family: Arial;
   color:gray;
   margin-bottom: 10px;

}
.contact p
{

  margin-bottom: 7px;
}


.pic
{
  margin-left: 0.3%;
  margin-bottom: 1px;
  width:90%;
  
}

.fill
{
  margin-left:8%;
  position: relative;
}

.sub
{
width:45%; text-align:justify;text-justify:inter-word;	
color:gray;
	
}

.con
{
    margin-left: 8%;
    
}


.fprojects
{

  color: #717171;line-height: normal;margin-left:8% ;width: fit-content;width:84%;line-height: 21px; text-align:justify;text-justify:inter-word;
}



}



@media only screen and (max-width: 990px)

{


  nav ul
  {
   position:fixed;
   width:35%;
   top:0;
   right:0;
   text-align: left;
   background-color:black;
   height:100%;
   z-index:7;
   padding-top:3em;
  } 
nav ul li{

   list-style: none;
   text-align: left;
   font-size: 0.8em;
   
}
   nav ul li a
{
    color: white;
    text-decoration: none;
    display: block;
    width:100%;
    
    padding: 1em 2em;
    background-color: rgb(9, 32, 48);

}

nav ul li a:hover
{
background-color: rgb(65,73,78);

}



}