*{
box-sizing: border-box;
margin:0;
padding:0;

}

.logoBtn img{
width:90px;
height:45px;
margin-top:10px;
padding:0;
}

ul li a{
background: #323232;
display: block;
color:rgb(189, 186, 186);
font-size: 18px;
padding:10px 10px;
text-decoration: none;
transition:background 1s ease,color 1s ease,padding 1s ease;
text-transform: capitalize;
font-family: 'Roboto', sans-serif;
}

ul li a:hover{
background:rgb(37, 37, 37);
color:rgb(223, 120, 18) ;
padding-left:25px;
}

ul{
    background: #323232;
    list-style: none;
   padding-top:10px;
   padding-bottom: 10px;
}

.main-nav{
display:none;

}


.sub-nav{

display:none;
margin:0;
padding:0px;

}


.main-nav > li:hover .sub-nav{

display: flex;
flex-direction: column;
background: #888;
}



 .sub-nav li a{

    background: rgb(77, 76, 76);
  padding:5px 5px;
 
}

.sub-nav li a:hover{

    background: #2c2c2c;
    padding:5px 25px;
}


.logoBtn .logo{
padding:0;
margin:0;
margin-left: 10px;
width:100px;


}

.navbarBtn .bar1,
.navbarBtn .bar2,
.navbarBtn .bar3{
width:25px;
border:1px solid orange;
margin:4px auto;
display: block;
transition:all 1s ease;
}


.change .bar1{

transform: rotate(-35deg) translate(-3px,5px);

}

.change .bar2{

   opacity:0;
    
 }

.change .bar3{

 transform: rotate(36deg) translate(-3px,-5px);
        
 }


.navbarBtn{
border:2px solid #c0bebe;
width:35px;
align-self: center;
margin-right: 10px;
cursor: pointer;

}


.logoBtn{
display: flex;
justify-content: space-between;
padding:5px;

}

nav{
background: #3f3f3f;
font-family: 'Krub', sans-serif;

}


@media screen and (min-width:576px){

    .navbarBtn{
      display: none;
        
        }

nav{
display:flex;
justify-content: space-between;
}

nav ul{
    display: flex ;
    align-self: center;
    justify-content: flex-end;
    margin-right: 30px;
    width:100%;
    background:#3f3f3f; 
}

.main-nav{
display: flex !important;

}

ul li a{
padding: 7px 25px;
background: #3f3f3f;
}

ul li a:hover{
    background:none;
    color:rgb(223, 120, 18) ;
    padding-left:10px 30px;
    }



    ul.main-nav{
        display: flex;
        flex-direction: row;
        }


      .sub-nav{
   padding-top:12px;
   z-index: 1;

      }

      .sub-nav  li a{
        background: #3f3f3f;
        padding:5px 25px;


       }

       .sub-nav  li a:hover{
           
           padding:5px 25px;
           background: #2c2c2c;
           
          }
        
        .main-nav > li:hover .sub-nav {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: #3f3f3f;
            width: 150px;
            position: absolute;
        }


    
.logoBtn img{
    width:100px;
    height:50px;
    margin-top:5px;
    padding:0;
    }

}


/* for sticky scroll */
#myNav{
   
}

.sticky{
    position: fixed;
    width: 100%;
    top:0;
    z-index: 10;
    opacity:1;
}

/* end of sticky scroll */


/* clockweather */
.clockWeather{
    display: flex;
    justify-content: flex-end;
    background: #e3e9eb; 
    padding:5px;
    opacity:1;
    font-family: 'Roboto', sans-serif;
    
    }
    
    .clockWeather #clock{
    margin-right: 100px;
    align-self: center;
    color:rgb(15, 15, 15);
    /* font-size: 18px; */
    width:290px;
    }
    
    .clockWeather button{
        margin-right: 30px;
      font-size: 17px;
      padding:0 5px;
      
        }
    
    .call{
    width:160px;
    
    margin-right: 40px;
    
    
    }
    
    .call p{
        width:120px;
        padding-top:5px;
        
        
        
        }
    
        .call i{
            padding-right: 10px;
            color:green;
            
            
            
            }
    
    
    
            @media screen and (max-width:776px){
                .clockWeather #clock{
                    margin-right: 30px;
                    margin-top:3px;
                   
                    /* font-size: 18px; */
                 
                    }
    
                    .clockWeather button{
                        margin-right: 15px;
                      font-size: 16px;
                     
                      
                        }
    
                        .call{
                            width:200px;
                            
                            margin-right: 15px;
                            
                            
                            }
    
    
            }
    
    
    
    
    
    
    
    
            @media screen and (max-width:576px){
                .clockWeather #clock{
                    margin-right: 30px;
                     font-size: 15px;
                    margin-top:3px;
                    /* font-size: 18px; */
                 
                    }
    
                    .clockWeather button{
                        margin-right: 15px;
                      font-size: 16px;
                      font-size: 15px;
                      
                        }
    
                        .call{
                            width:110px;
                            font-size: 15px;
                            margin-right: 15px;
                            
                            
                            }
    
    
            }
    
    
    
            @media screen and (max-width:476px){
                .clockWeather #clock{
                    margin-right: 10px;
                   margin-top:3px;
                   font-size: 15px;
                    /* font-size: 18px; */
                 
                    }
    
                    .clockWeather button{
                        margin-right: 5px;
                      font-size: 15px;
                     
                      
                        }
    
                        .call{
                            width:110px;
                            
                            margin-right: 15px;
                            
                            
                            }
    
    
            }
    
    /* end of clockweather */



/* arduino */


#main{
    background: #e0dfdf;
    font-family: 'Thasadith', sans-serif;
}


.arduino{
    
    padding:10px;
    margin-bottom:0;
    padding-bottom:0;
    
}

.arduino .h1{
    text-align: center;
    position:relative;
    font-size: 22px;
    padding-top:30px;
    }

    .arduino .h1 .under{
        text-align: center;
        padding:1px;
        width:1px;
        background: transparent;
        margin:2px auto;
        transition: all 1s ease;
        margin-bottom: 10px;
        }

        .arduino:hover .under{

            width:190px;
        background: green;
        }










.arduino-center{
    background: #0d6e6d;
      /* background-image:url(../images/sm1.jpg);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat; */
    
    padding: 20px 10px;
    padding-bottom: 50px;

}

.arduinoLeft {

  width:94%;
  margin:0 auto; 
  /* background: rgba(0,0,0,0.6) ; */
  padding:20px;
  border-radius: 10px;
 position:relative;

 
}



.arduinoLeft p{

color:rgb(231, 229, 229);
font-size: 18px;
text-align: justify;
line-height: 1.3;

}


.arduinoCent{
width:90%;
margin:0 auto;
text-align: center;

}


.arduinoCent img{
margin:0 auto;
text-align: center;
width:300px;
height:200px;
margin-top:0;
border-radius: 50%;
}

.arduinoCent p{
  color:#c0bebe;
    
    }



.arduinoRight{
  
    text-align: center;
    margin:0 auto;
    margin-top: 50px;
    width:70%;
   
}

.arduinoRight p{
  
   color:#c0bebe;
   margin-top:10px;
   
}

iframe{
height:470px;
box-shadow:1px 2px 12px 5px rgba(189, 189, 189, 0.98);
}








@media screen and (max-width:900px){

    .arduinoRight{
        text-align: center;
        margin:0 auto;
        margin-top: 50px;
        width:90%;
      
    }

    iframe{
      height:450px;

    }




}







@media screen and (max-width:576px){

    .arduinoRight{
        text-align: center;
        margin:0 auto;
        margin-top: 50px;
        width:90%;
      
    }

    iframe{
      height:300px;

    }




}
/* end of arduino */


  



/* heater */


#main{
    background: #e0dfdf;

}


.heater{
    
    padding:10px;
    margin-bottom:0;
    padding-bottom:0;
    
}

.heater .h1{
    text-align: center;
    position:relative;
    font-size: 22px;
    padding-top:30px;
    }

    .heater .h1 .under{
        text-align: center;
        padding:1px;
        width:1px;
        background: transparent;
        margin:2px auto;
        transition: all 1s ease;
        margin-bottom: 10px;
        }

        .heater:hover .under{

            width:290px;
        background: green;
        }










.heater-center{
    background: #0d6e6d;
      /* background-image:url(../images/sm1.jpg);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat; */
    
    padding: 20px 10px;
    padding-bottom: 50px;

}

.heaterLeft {

  width:94%;
  margin:0 auto; 
  /* background: rgba(0,0,0,0.6) ; */
  padding:20px;
  border-radius: 10px;
 position:relative;

 
}



.heaterLeft p{

color:rgb(231, 229, 229);
font-size: 20px;
text-align: justify;
line-height: 1.3;

}


.heaterCent{
width:90%;
margin:0 auto;
text-align: center;

}


.heaterCent img{
margin:0 auto;
text-align: center;
width:450px;
height:350px;
margin-top:0;
border-radius: 50%;
}

.heaterCent p{
  color:#c0bebe;
    
    }



.heaterRight{
  
    text-align: center;
    margin:0 auto;
    margin-top: 50px;
    width:70%;
   
}

.heaterRight p{
  
   color:#c0bebe;
   margin-top:10px;
   
}

iframe{
height:470px;
box-shadow:1px 2px 12px 5px rgba(189, 189, 189, 0.98);
}








@media screen and (max-width:900px){

    .heaterRight{
        text-align: center;
        margin:0 auto;
        margin-top: 50px;
        width:90%;
      
    }

    iframe{
      height:450px;
       
    }




}










@media screen and (max-width:576px){

    .heaterRight{
        text-align: center;
        margin:0 auto;
        margin-top: 50px;
        width:90%;
      
    }

    .heaterCent img{
        margin:0 auto;
        text-align: center;
        /* width:350px; */
        height:290px; 
        width:82%;
        
        margin-top:0;
        border-radius: 50%;
        }

    iframe{
      height:300px;

    }




}
/* end of heater */



/* lamp construction */


#main{
    background: #e0dfdf;

}


.lamp{
    
    padding:10px;
    margin-bottom:0;
    padding-bottom:0;
    
}

.lamp .h1{
    text-align: center;
    position:relative;
    font-size: 22px;
    padding-top:30px;
    }

    .lamp .h1 .under{
        text-align: center;
        padding:1px;
        width:1px;
        background: transparent;
        margin:2px auto;
        transition: all 1s ease;
        margin-bottom: 10px;
        }

        .lamp:hover .under{

            width:220px;
        background: green;
        }










.lamp-center{
    background: #0d6e6d;
      /* background-image:url(../images/sm1.jpg);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat; */
    
    padding: 20px 10px;
    padding-bottom: 50px;

}

.lampLeft {

  width:94%;
  margin:0 auto; 
  /* background: rgba(0,0,0,0.6) ; */
  padding:20px;
  border-radius: 10px;
 position:relative;

 
}



.lampLeft p{

color:rgb(231, 229, 229);
font-size: 20px;
text-align: justify;
line-height: 1.3;

}


.lampCent{
width:90%;
margin:0 auto;
text-align: center;

}


.lampCent img{
margin:0 auto;
text-align: center;
width:450px;
height:350px;
margin-top:0;
border-radius: 50%;
}

.lampCent p{
  color:#c0bebe;
    
    }



.lampRight{
  
    text-align: center;
    margin:0 auto;
    margin-top: 50px;
    width:70%;
   
}

.lampRight p{
  
   color:#c0bebe;
   margin-top:10px;
   
}

iframe{
height:470px;
box-shadow:1px 2px 12px 5px rgba(189, 189, 189, 0.98);
}








@media screen and (max-width:900px){

    .lampRight{
        text-align: center;
        margin:0 auto;
        margin-top: 50px;
        width:90%;
      
    }

    iframe{
      height:450px;
       
    }




}










@media screen and (max-width:576px){

    .lampRight{
        text-align: center;
        margin:0 auto;
        margin-top: 50px;
        width:90%;
      
    }

    .lampCent img{
        margin:0 auto;
        text-align: center;
        /* width:350px; */
        height:290px; 
        width:75%;
        
        margin-top:0;
        border-radius: 50%;
        }

    iframe{
      height:300px;

    }




}
/*end of lamp construction */




/* electric shutter */


#main{
    background: #e0dfdf;

}


.shutter{
    
    padding:10px;
    margin-bottom:0;
    padding-bottom:0;
    
}

.shutter .h1{
    text-align: center;
    position:relative;
    font-size: 22px;
    padding-top:30px;
    }

    .shutter .h1 .under{
        text-align: center;
        padding:1px;
        width:1px;
        background: transparent;
        margin:2px auto;
        transition: all 1s ease;
        margin-bottom: 10px;
        }

        .shutter:hover .under{

            width:200px;
        background: green;
        }










.shutter-center{
    background: #0d6e6d;
      /* background-image:url(../images/sm1.jpg);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat; */
    
    padding: 20px 10px;
    padding-bottom: 50px;

}

.shutterLeft {

  width:94%;
  margin:0 auto; 
  /* background: rgba(0,0,0,0.6) ; */
  padding:20px;
  border-radius: 10px;
 position:relative;

 
}



.shutterLeft p{

color:rgb(231, 229, 229);
font-size: 20px;
text-align: justify;
line-height: 1.3;

}


.shutterCent{
width:90%;
margin:0 auto;
text-align: center;

}


.shutterCent img{
margin:0 auto;
text-align: center;
width:450px;
height:350px;
margin-top:0;
border-radius: 50%;
}

.shutterCent p{
  color:#c0bebe;
    
    }



.shutterRight{
  
    text-align: center;
    margin:0 auto;
    margin-top: 50px;
    width:70%;
   
}

.shutterRight p{
  
   color:#c0bebe;
   margin-top:10px;
   
}

iframe{
height:470px;
box-shadow:1px 2px 12px 5px rgba(189, 189, 189, 0.98);
}








@media screen and (max-width:900px){

    .shutterRight{
        text-align: center;
        margin:0 auto;
        margin-top: 50px;
        width:90%;
      
    }

    iframe{
      height:450px;
       
    }




}










@media screen and (max-width:576px){

    .shutterRight{
        text-align: center;
        margin:0 auto;
        margin-top: 50px;
        width:90%;
      
    }

    .shutterCent img{
        margin:0 auto;
        text-align: center;
        /* width:350px; */
        height:290px; 
        width:75%;
        
        margin-top:0;
        border-radius: 50%;
        }

    iframe{
      height:300px;

    }




}
/* end of electrc shutter */


/* stairs automation */


#stairs{
    background: #e0dfdf;

}


.stairs{
    
    padding:10px;
    margin-bottom:0;
    padding-bottom:0;
    
}

.stairs .h1{
    text-align: center;
    position:relative;
    font-size: 22px;
    padding-top:30px;
    }

    .stairs .h1 .under{
        text-align: center;
        padding:1px;
        width:1px;
        background: transparent;
        margin:2px auto;
        transition: all 1s ease;
        margin-bottom: 10px;
        }

        .stairs:hover .under{

            width:220px;
        background: green;
        }


.stairs-center{
    background: #0d6e6d;
      /* background-image:url(../images/sm1.jpg);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat; */
    
    padding: 20px 10px;
    padding-bottom: 50px;

}

.stairsLeft {

  width:94%;
  margin:0 auto; 
  /* background: rgba(0,0,0,0.6) ; */
  padding:20px;
  border-radius: 10px;
 position:relative;

 
}



.stairsLeft p{

color:rgb(231, 229, 229);
font-size: 20px;
text-align: justify;
line-height: 1.3;

}


.stairsCent{
width:90%;
margin:0 auto;
text-align: center;

}


.stairsCent img{
margin:0 auto;
text-align: center;
width:450px;
height:350px;
margin-top:0;
border-radius: 50%;
}

.stairsCent p{
  color:#c0bebe;
    
    }



.stairsRight{
  
    text-align: center;
    margin:0 auto;
    margin-top: 50px;
    width:70%;
   
}

.stairsRight p{
  
   color:#c0bebe;
   margin-top:10px;
   
}

iframe{
height:470px;
box-shadow:1px 2px 12px 5px rgba(189, 189, 189, 0.98);
}








@media screen and (max-width:900px){

    .stairsRight{
        text-align: center;
        margin:0 auto;
        margin-top: 50px;
        width:90%;
      
    }

    iframe{
      height:450px;
       
    }




}


@media screen and (max-width:576px){

    .stairsRight{
        text-align: center;
        margin:0 auto;
        margin-top: 50px;
        width:90%;
      
    }

    .stairsCent img{
        margin:0 auto;
        text-align: center;
        /* width:350px; */
        height:290px; 
        width:75%;
        
        margin-top:0;
        border-radius: 50%;
        }

    iframe{
      height:300px;

    }




}

/* end of stairs */



/* electric tubes */


#main{
    background: #e0dfdf;

}


.tubes{
    
    padding:10px;
    margin-bottom:0;
    padding-bottom:0;
    
}

.tubes .h1{
    text-align: center;
    position:relative;
    font-size: 22px;
    padding-top:30px;
    }

    .tubes .h1 .under{
        text-align: center;
        padding:1px;
        width:1px;
        background: transparent;
        margin:2px auto;
        transition: all 1s ease;
        margin-bottom: 10px;
        }

        .tubes:hover .under{

            width:220px;
        background: green;
        }



.tubes-center{
    background: #0d6e6d;
      /* background-image:url(../images/sm1.jpg);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat; */
    
    padding: 20px 10px;
    padding-bottom: 50px;

}

.tubesLeft {

  width:94%;
  margin:0 auto; 
  /* background: rgba(0,0,0,0.6) ; */
  padding:20px;
  border-radius: 10px;
 position:relative;

 
}



.tubesLeft p{

color:rgb(231, 229, 229);
font-size: 20px;
text-align: justify;
line-height: 1.3;

}


.tubesCent{
width:90%;
margin:0 auto;
text-align: center;

}


.tubesCent img{
margin:0 auto;
text-align: center;
width:450px;
height:350px;
margin-top:0;
border-radius: 50%;
}

.tubesCent p{
  color:#c0bebe;
    
    }



.tubesRight{
  
    text-align: center;
    margin:0 auto;
    margin-top: 50px;
    width:70%;
   
}

.tubesRight p{
  
   color:#c0bebe;
   margin-top:10px;
   
}

iframe{
height:470px;
box-shadow:1px 2px 12px 5px rgba(189, 189, 189, 0.98);
}



@media screen and (max-width:900px){

    .tubesRight{
        text-align: center;
        margin:0 auto;
        margin-top: 50px;
        width:90%;
      
    }

    iframe{
      height:450px;
       
    }




}



@media screen and (max-width:576px){

    .tubesRight{
        text-align: center;
        margin:0 auto;
        margin-top: 50px;
        width:90%;
      
    }

    .tubesCent img{
        margin:0 auto;
        text-align: center;
        /* width:350px; */
        height:290px; 
        width:75%;
        
        margin-top:0;
        border-radius: 50%;
        }

    iframe{
      height:300px;

    }




}
/* end of electric tubes */



/*  tracker */ 


#main{
    background: #e0dfdf;
    
}


.tracker{
    
    padding:10px;
    margin-bottom:0;
    padding-bottom:0;
    
}

.tracker .h1{
    text-align: center;
    position:relative;
    font-size: 22px;
    padding-top:30px;
    }

    .tracker .h1 .under{
        text-align: center;
        padding:1px;
        width:1px;
        background: transparent;
        margin:2px auto;
        transition: all 1s ease;
        margin-bottom: 10px;
        }

        .tracker:hover .under{

            width:160px;
        background: green;
        }










.tracker-center{
    background: #0d6e6d;
      /* background-image:url(../images/sm1.jpg);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat; */
    font-family: 'Roboto', sans-serif;
    padding: 20px 10px;
    padding-bottom: 50px;

}

.trackerLeft {

  width:94%;
  margin:0 auto; 
  /* background: rgba(0,0,0,0.6) ; */
  padding:20px;
  border-radius: 10px;
 position:relative;

 
}



.trackerLeft p{

color:rgb(231, 229, 229);
font-size: 20px;
text-align: justify;
line-height: 1.3;

}


.trackerCent{
width:90%;
margin:0 auto;
text-align: center;

}


.trackerCent img{
margin:0 auto;
text-align: center;
width:450px;
height:350px;
margin-top:0;
border-radius: 50%;
}

.trackerCent p{
  color:#c0bebe;
    
    }



.trackerRight{
  
    text-align: center;
    margin:0 auto;
    margin-top: 50px;
    width:70%;
   
}

.trackerRight p{
  
   color:#c0bebe;
   margin-top:10px;
   
}

iframe{
height:470px;
box-shadow:1px 2px 12px 5px rgba(189, 189, 189, 0.98);
}








@media screen and (max-width:900px){

    .trackerRight{
        text-align: center;
        margin:0 auto;
        margin-top: 50px;
        width:90%;
      
    }

    iframe{
      height:450px;
       
    }




}


@media screen and (max-width:576px){

    .trackerRight{
        text-align: center;
        margin:0 auto;
        margin-top: 50px;
        width:90%;
      
    }

    .trackerCent img{
        margin:0 auto;
        text-align: center;
        /* width:350px; */
        height:290px; 
        width:75%;
        
        margin-top:0;
        border-radius: 50%;
        }

    iframe{
      height:300px;

    }


}
/* end of tracker */










/* contact us */

#contactUs{
    /* border-top:2px solid white; */
    background: #e0dfdf;
    
   }
   
   
   .contact .h1{
       padding-top:20px;
    text-align: center;
    position:relative;
    
    }

    .contact .h1{
        text-align: center;
        position:relative;
        color: #5f5f5f;
        } 
        
        
        .h1 .under{
        text-align: center;
        padding:1px;
        width:1px;
        background: transparent;
        margin:2px auto;
        transition: all 1s ease;
        margin-bottom: 10px;
        }

        .contact .h1{
            text-align: center;
            position:relative;
            
            }
            
            .contact:hover .under{

            width:130px;
        background: green;
        }

   


 .contact-center{

background: #065174;
padding:10px;
font-family: 'Roboto', sans-serif;
 }


 .contact-centerLeft{
 
 padding:20px;
 /* background: #043e55; */

 }

 .contact-centerLeft .adress{


text-align: center;

margin:0 auto;


 }

 .contact-centerLeft h2,
  .contact-centerCenter h2,
  .contact-centerRight h2 {
  
     text-decoration: underline;
     font-weight: 100;
     color:rgb(243, 163, 13);
 }



.adress h3{
color:white;
line-height: 1.5;
font-weight: 100;
padding-top:0px;
font-size: 21px;
text-decoration: underline;
}

.adress .fa-map-marker-alt{
    color:rgb(94, 10, 10);
    margin-right: 10px;
}

.adress .fa-phone{
    color:rgb(42, 172, 16);
    margin-right: 10px;
}

.adress .fa-envelope-square{
    color:rgb(83, 7, 7);
    margin-right: 10px;
}


.adress p {
    font-size: 19px;
    color:rgb(175, 175, 174);
        
    
    }


.adress p a{
font-size: 19px;
color:rgb(175, 175, 174);
    

}


.contact-centerCenter{

padding:20px;

}

 .contact-center h2{
  text-align: center;
 
  padding:10px;
 }



 .contact-centerCenter .links{
list-style: none;
margin:0 auto;
width:100%;

text-align: center;
display: flex;
justify-content: center;
 }

 .contact-centerCenter .links li{
 
padding:5px;


 }

 .contact-centerCenter .links a{
    color:white;
    text-decoration: none;
    font-size: 19px;
    padding:2px;
    display: block;
   opacity:0.7;
    
     }

     .contact-centerCenter .links a:hover{
        color:white;
        opacity:1;
       
        
         }




    .contact-centerRight{
     padding-top:20px;
    
     
    }

     .contact-centerRight .med{
      display: flex;
      list-style: none;
      justify-content: center;

     }

     .med a{
      font-size: 25px;
      margin:15px;
     border:1px solid #fff;
      padding:5px 10px;
      display: block;
      border-radius: 10%;
     
     }
   
     .med .fab{
     color:white;
    opacity:0.7;
   
     }

     .med a:hover .fab{
        color:white;
       opacity:1;
        }

        .med a:hover{
        border:1px solid yellow;

        }


 
        #foot{
      background: #073950;
         padding:15px;
         text-align: center;
         color: wheat;
         font-size: 19px;
        }



        @media screen and (min-width:576px){

            .contact-center{
             display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            
            }


            .contact-centerLeft ,
            .contact-centerCenter,
            .contact-centerRight{
             flex:1 0 calc(40% - 10px);
       
            
            }


            .contact-centerCenter .links{
         
                display: flex;
                justify-content: center;
                flex-direction: column;  
               
                 }

                 .contact-centerCenter .links a{
                    color:white;
                    text-decoration: none;
                    font-size: 19px;
                    padding:10px;
                   
                    
                     }

                 .contact-centerCenter .links li{
                    padding:0px;
      
                   }  
                   
                

        }











        @media screen and (min-width:776px){

            .contact-center{
             display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            
            }


            .contact-centerLeft ,
            .contact-centerCenter,
            .contact-centerRight{
             flex:1 0 calc(30% - 10px);
       

            }

        }


/* end of contact us */

           /*for  button scroll up*/
.totop{

    margin:0 ;
    width:95%;
    }
    
    
    .totop #top{
    display:inline-block;
    background: black;/*#034f84  */
    /* border-radius: 50%; */
    padding: 5px;
    opacity:0.6;
    display:none;
    position:fixed;
    bottom:50px;
    margin-right:10px ;
    right:0;
    
    }
    
    .totop #top:hover{
    
    opacity:1;
    }
    
   
    #top .fas{
      color:dodgerblue;
      font-size: 25px;
      
    }
    /*end of button scroll up*/