body{
    background-color: #d2d2d2;
    margin:0;
    padding:0;
   
   
}

header {
    width: 100%;
    background-color: #ffffff;
    margin: 0px;
    top: 0px;
    text-align: center;
    border: 1px solid #d2d2d2;
    
}


nav{
    margin-top: 15px;
    
    
}

nav a{
    list-style: none;
    text-underline-position: none;
     display: inline-block;
    padding: 9px;
    
}

nav ul li :hover{
    transform: scale(1.1);
    transition: 0.3s;
    color: blueviolet;
}

.chatmenu{
    padding: 10px;
}

#hamburger-icon {
  margin: auto ;
  display: none;
  cursor: pointer;
    clear: both;
    
}

#hamburger-icon div {
  width: 35px;
  height: 2px;
  background-color: #0F0F0F;
  margin: 10px 0;
  transition: 0.4s;
}

.open .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
  opacity: 0;
}

.open .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -8px);
  transform: rotate(45deg) translate(-6px, -8px);
}

.open .mobile-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 120px;
  left: 0;
  height: calc(100vh - 50px);
  width: 60%;
  background-color: #f2f2f2;
  border-radius: 5px 0 5px 5px;
    
}

.mobile-menu ul{
  margin-top: 20px;
}

.mobile-menu li {
  margin-top: 10px;
      text-align: left;
}


.whatsbotton{
    border: 1px solid green;
    padding: 5px;
    background-color: green;
    color: #ffffff;
    border-radius: 5px;
}

.whatsbotton ul li {
     list-style-type: none;
     text-decoration: none;
    
}

.whatsbotton a{
       color: #ffffff !important;
         list-style-type: none;
     text-decoration: none;
}


.chatbody{
    margin-top: 20px ;
width: 100%;
    border: 0.5px solid #dedede;
    background-color: #ffffff;
     -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.36);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.36);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.36);
    overflow: hidden;
      text-align: center;

}


.chatbody h1{
    margin:20px ;
    text-align: center;
    font-size: 35px;
}

.chatbody p{
    font-size: 15px;
    text-align: justify;
    margin: 10px;
}
.chatimg p{
    font-size: 20px;
    text-align: center;
    margin: 20px;
}

.chatbody img{
    width: 50%;
    margin: 20px auto;
    background-color: #f2f2f2;
    border-radius: 50px;
    border: 0.5 solid #dedede;
}

.chatimg {
    width: 100%;
}


.chatmenu{
    margin: 10px;
}

.chatmenu ul li{
     list-style-type: none;
  display: inline-block;
  text-transform: uppercase;
  padding: 5px;
}

.chatmenu ul li a{
    color: #000000;
}

hr .line{
    border: 0.5 solid #dedede;
}

footer{
    bottom: 0px;
    background-color: #000000;
    color: #ffffff;
    text-align:center;
}

footer .copyrights{
  list-style-type: none;
  text-decoration: none;
  padding: 20px;
  

}

footer .copyrights a{
  list-style-type: none;
  text-decoration: none;
    color: #ffffff;
    
}

 @media only screen and (max-width: 750px) {   
    header nav {
    display: none;
  }

  
#hamburger-icon{
    display: block;
}

 .mobile-menu {
         top: 45px;
     }
 .chatbody{
        
       
       width:100%;
       margin:  0px;
        
    }
    
    
}

 @media only screen and (max-width: 600px) {
     
     header nav {
    display: none;
  }

  
#hamburger-icon{
    display: block;
}

 .mobile-menu {
         top: 45px;
     }

   .chatbody{
      width:100%;
      margin: 0;
    }
     

     .chatbody img{
         width: 90%;
         
     }
}