*{box-sizing: border-box;}
body {display:block;
     justify-content: center;
     background-color:#e2e2e2;
     margin:0; padding:0;}
header{top:0; flex:1;
  position:fixed;
  width:100%; 
  padding: 8px 0px;
  align-items:center;
  background: #183;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
  
  
 header div img{width:47px; 
   border-radius:50%;
    margin:0 10px 0 30px;
}
  
header div{color:white;
  display:flex; font-size:18px;
  align-items:center;
font-weight:bold;}
a{text-decoration:none;color:#183;}

    
    .bars {
  display: block;
  position: absolute;
  right:15px;
  top: 35px;}
.bar a{color:;
}
  
.bar1, .bar2, .bar3{
  width: 18px;
  height: 2px;
  background-color:#ffffff;
  margin: 4px 0 0 0;
  transition: 0.6s;
}
.riba .bar1 {
  transform: translate(0, 9px) rotate(-45deg);
}

.riba .bar2 {opacity: 0;}

.riba .bar3 {
  transform: translate(0, -3px) rotate(45deg);
}
  



     .para{margin:90px 10px auto 15px;}
    div h3{text-align:center;}
    div p{line-height:1.8;}
    
    main {background-color:#183; height:px;
      padding:10px 0px 0 0px;
    }
    main div{padding: 10px 10px 10px 10px;
      margin:0 10px 0 10px;
     overflow:auto;
    
   }
    .div1{border:1px solid white;margin-top:30px; border-radius:20px 10px 0px 20px;
      padding: 30px 10px 30px 10px;}
    .div1 a{color:#ffffff; align-items:center;
     display:block;      
     padding:20px 0px 20px 10px; font-size:15px;}
     main a i{margin-right:10px; color:white;}
    
    
         .div2{display:flex;
           padding:100px 0 100px 0;
    }
    .div2 a{color:#1da1f2; margin:0 25px 25px 25px;
 font-size:20px;  padding:0px 2px 10px 2px; background-color:White;}
    .div2 h5{margin:0px 15px 10px 0px;display:block; color:#cccccc; font-size:10px;}

    
      
    
    .div3 {
  padding-top: 50px;
  display: flex;
  justify-content: center; /* Center the content horizontally */
}

.div3 a {
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 20px;
  font-size: 20px;
  color: #f2f2f2;
  text-decoration: none; /* Add this line to remove underline from links */
}

 .div3 a img { display:flex; 
  width: 200px;
  border-radius: 50%;
 }
  
    .div4{padding:10px 10px 20px 10px; align-items:center;}
    .div4 a, .div4 p{color:#ffffff; font-size:20px; 
      display:block; padding:0px;
    text-align:center; font-weight:bold;}
    .div4 p{font-size:12px; color:#ffff00;}
    
    .div5{padding:20px 10px 5px 10px; align-items:center;}
    .div5 a{color:white;
      display:block; padding:0px;
    text-align:center; font-weight:bold;
    font-size:12px;}
    .fa-map-marker{padding-right:0.3em;}
    
    footer{padding:25px 10px 25px 10px; background-color:#173; margin-top:50px;}
    footer small{ display:block; color:#f2f2f2; font-size:12px;
      text-align:center;
  }
    
      
.sec{top:63px; 
  overflow-x:hidden;
  display:block; align-items:center;
  height:0; 
background-color: #f2f2f2;
left:0;
width:100%; 
position:fixed;
  z-index:1;
  transition:0.6s;
  padding-top:0px;}
  
  .sec a{font-weight:bold;
    font-size: 20px;
  text-decoration: none;  
    padding:5px 15px;
    display:block;
  transition:0.6s;}
  
  
  .cse{top:63px;
  overflow-x:auto;
  display:block; align-items:center;
  height:400px;
background-color: #f2f2f2;
left:0;
width:100%; 
position:fixed;
  z-index:1;
  transition:0.6s;
  padding-top:20px;
 }
  .cse a{font-weight:bold;
    font-size: 20px;
  text-decoration: none;  
    padding:5px 15px;
    display:block;
  transition:0.6s;}
  
#media, #calculator{display:none;}
#media a, #calculator a{font-size:15px;
          padding: 8px 40px;
}

    
 .message-time {font-size:10px;
  float: right; position:absolute;
  right:5px; opacity:70%;
  padding-left: 10px;
   padding-top: 2px;
bottom:5px;}
.message{position:relative;}
 .current{color:purple;}
  .cse a:hover, #back:hover, .hover:hover{color:purple;}
hr{opacity:25%;}
 .form:hover{color:purple;}
 .div1 a:hover{color:#ffff00;}
 .sec i{padding-left:10px;}