*{
  margin: 0px;
  padding: 0px;
}
body{
  background-color: lightgray;
  font-style: arial;
}





/* menu css */
#hemu{
  color: white;
  height: auto;
  background-color: #1223E4;
  display: flex;
  justify-content: space-between;
  box-shadow: 1px 1px 5px grey;
}
#hemu #logo {
  display: flex;
  align-items: center;
  margin: 0px 0px;
}

#hemu
 #mnicon{
  display: none;
}
#hemu a p{
  color: white;
  font-size: 22px;
}
#hemu a{
  text-decoration: none;
}
#hemu #logo a{
  text-decoration: none;
  margin-left: 60px;
}

#menug ul{
  margin-top: 15px;
  margin-bottom: 15px;

  margin-right: 50px;
  list-style-type: none;
}
#menug a{
 color: white;
}
#menug ul li{
  margin: 0px 15px;
  display: inline-block;
  
}
/* api div section  */
#apimenuitems{
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  display: flex;
  background-color:antiquewhite ;
}
#omenu{
  margin-top:2px ;
  background-color: antiquewhite;
  box-shadow: 1px 1px 5px grey;
}
#apimenuitems a{
  color: black;
  text-decoration: none;
  margin: 20px;
}




  

@media(max-width: 1000px){
  
}

@media(max-width: 700px){
  #menug{
  width: 100%; 
  
  }

#hemu{
  /* overflow: auto; */
  width: 100%;
  display: block;
  color: white;
  justify-content: left;
  background-color: #0114E8;
}
#hemu p{
  margin-left: 10px;
  
  
}

#hemu #logo a{
  text-decoration: none;
  margin-left: 0px;
}
#menug ul{
  width: 100%;
  background-color: antiquewhite;
  /* background-color:#4957F5; */
  margin: 0px;
  
}
#menug ul li{
  text-align: center;
  color: black;
  width: 100%;
  margin: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  
  
}

#menug  ul li:hover{
  background-color: rgb(248, 178, 178);
  
}
.notvisi{
  display: none;
}



#hemu #mnicon{
  display: inline-block;
  margin: 15px 20px;
  
}
/* api div section  */
#apimenuitems{
  width: 100%;

  }
/* first section css for mobile  */







}

@media(max-width: 400px){
  /* .elem {
  
    width: 98%;
    text-align: center;
  } */

  #apimenuitems a{
    color: black;
    text-decoration: none;
    margin: 10px;
  }
}


































#news {
  margin-left: auto;
  margin-right: auto;
  width: 85%;
  /* text-align: center;
  padding: 20px;
  background-color: #B9BBCD;
  border-radius: 5px;
  margin-top: 10px; */
  
}


#snews{
  text-align: center;
  margin:  20px 0px 10px 0px;
}

#loading{
  text-align: center;
  font-size: 20px;
}

#news{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#news .kid1{
  background-color: #e3e5f3;
  margin: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px grey;
  text-align: center;
  
}

#news .kid1 h1 {
  margin:10px 10px 20px 10px;
  font-weight: bolder;
  text-align: justify;
  font-size: 22px;
   display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

#news .kid1 h2{
  margin:10px 10px 20px 10px;
  font-weight: bolder;
  text-align: justify;
  font-size: 22px;
   display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}
#news .kid1 p{
  margin:10px 10px 20px 10px;
  font-weight: bolder;
  text-align: justify;
  font-size: 18px;
}
#news .kid1 .para{
  font-weight: 400;
  margin-bottom: 10px;
  display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
  
}
.kid1 img{
  aspect-ratio: auto;
  max-width: 92%;
  max-height: 200px;
  

}
#news .kid1 a{
  margin:10px 10px;
  text-decoration: none;
  color:blue;
  
}

#pagenews{
  
  display: flex;
  justify-content: center;
}

#pagenews #newsdiv{
  background-color: #e3e5f3;
  margin: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px grey;
  text-align: center;
  width: 40%;
}
#pagenews #newsdiv h1 {
  margin:10px 10px 20px 10px;
  font-weight: bolder;
  text-align: justify;
  font-size: 22px;
   
}
#newsdiv img{
  aspect-ratio: auto;
  max-width: 95%;
  max-height: 250px;
  

}



#newsdiv .para{
  margin:10px 10px 20px 10px;
  font-weight: 400;
  text-align:left;
  font-size: 18px;
}







  @media (max-width: 1000px) {
    #news{
      width: 90%;
      grid-template-columns: repeat(2,1fr);
    }
} 





@media(max-width: 700px){
  
#news{
  width: 100%;
  grid-template-columns: repeat(2,1fr);
}
h1{
  font-size: 22px;
}

#pagenews #newsdiv{
  width: 60%;
}
}

@media(max-width: 550px){
  #news{
    width: 100%;
    grid-template-columns: repeat(1,1fr);
  }


  #pagenews #newsdiv{
    width: 100%;
  }
  
}