body{margin: 0;background: black;}
.nav{border: 4px solid #99ff33;width: 99%;float:right;background: black;position: fixed;top:0px;z-index:1;}
.logo{border: 0px solid black;width:600px;background: red;position: fixed;top:0px; color: white;font-size: 40px;padding:10px;}


/* #######################  side nav bar ############################*/
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  color:white;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: red;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/*################################# end side nav bar ######################################## */



ul{text-align: right;margin-right: 30px; color: white;}
a{text-decoration: none; color: white;}
li{text-decoration: none; display: inline-block;padding: 6px;padding: 10px;width: 120px;text-align: center;font-weight: bold;font-size: 20px;}
li:hover{background: yellow;color: black;}
.icon{float: right;display: none;font-size: 35px;}
.add-bar{background: black;width: 99%;padding: 5px;text-align:center; color:yellow;}
.education{text-align: center; background: white;padding: 10px;color: black;}
@media screen and (max-width: 600px) {
    ul{display: none;}
    li{width: 95%;border-top: 1px solid black;text-align: right;}
    .icon{display: inline;margin-right: 20px;}
    .logo{width: 270px;top:0px;font-size: 20px;}
    .nav{width: 87%;padding-right: 40px;}
    .add-bar{font-size: 11px;width: 97%;}

}

.text-hov{font-size: 30px;margin:10px;}
.text-hov:hover{color:red;}
.head-image{width:100%;position: relative;}
/*index coding css*/
.main-cont-class{ color: white;margin-top:200px;}
.treatment{border: 1px solid black;width: 400px; display: inline-block;text-align: left;}
.txt{color:white;font-size: 30px;padding: 20px;}
.call{position: fixed;color: white;right:0;padding: 6px;background: red;top:226px;z-index: 9;}
.map{position: fixed;color: black;right:0;padding: 6px;background: white;top:268px;}
#panel, #flip {
    padding: 3px;
    width:26px;
    top:220px;
    color: black;
    background: yellow;
    position:fixed;
 
    right: 0px;
  }
  
  #panel {
    padding: 3px;
    display: inline;
    top:300px;

    
  }
@media screen and (max-width: 600px) {
    .treatment{width: 95%;}
    .main-cont-class{}
    .txt{padding: 7px;}
    .head-image{margin-top: 100px;}
}

/*footer*/
#callone{display: none; animation: callani 1s;}
.foot{width:300px;display: inline-block;text-align: left;}
@keyframes callani{
    from{opacity: 0.1;} to{opacity: 1;}
}
.footer{background: red;text-align: center;padding: 20px;color: white;}

/*social media icon*/
.fa {
    padding: 5px;
    font-size: 15px;
   
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
  }
  
  .fa:hover {
      opacity: 0.7;
  }
  
  .fa-facebook {
    background: #3B5998;
    color: white;
  }
  
  .fa-twitter {
    background: #55ACEE;
    color: white;
  }
  
  .fa-google {
    background: #dd4b39;
    color: white;
  }
  
  .fa-linkedin {
    background: #007bb5;
    color: white;
  }
  
  .fa-youtube {
    background: #bb0000;
    color: white;
  }
  
  .fa-instagram {
    background: #125688;
    color: white;
  }
  

  /*text slider in ccss*/

  @import url(https://fonts.googleapis.com/css?family=Open+Sans:600);


.item-1{
	position: absolute;
  display: block;
	top: 2em;
  
  width: 60%;
  
  font-size: 4em;
  margin-top: 110px;
	
}

@media screen and (max-width: 600px) {
  .item-1{
  font-size: 1.2em;
  margin-top: 90px;
}
}