*

 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: black;
     font-family: "Kanit", sans-serif;
     color: white;
  font-weight: 400;
  font-style: normal;
  font-size: 23px;


  


}
p{
    font-size: 23px ;
    text-align: center;
}
p.left{
    font-size: 23px ;
    text-align: left; 
}



h1{
    font-size: 80px;
    text-align: center;
    color: red;
}
h2{
    font-size: 80px;
    color: red;
    
}
#banner 
img{
    width: 100%;
    height: auto;
    display: auto;
    margin: 40px auto;
    

}
      .grid {
            display: grid;
           

            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            place-items: center;
        }
        .grid-item {
            
            text-align: center;
            padding: 5px;
        }
        .grid-item img{
            width: 100%;
            height: 300px;
            object-fit: cover;
            object-position: center;
        }

        html{
    scroll-behavior: smooth;
}

#back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  font-size: 16px;
  background-color: #ffcb05; 
  color: #2a75bb;            
  border: none;
  outline: none;
  padding: 12px 18px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
  display: none; 
  transition: background-color 0.3s, transform 0.2s;
}

#back-to-top:hover {
  background-color: #f5b700;
  transform: scale(1.1);
}


nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
   
    display: flex; 
    align-items: center;
    gap: 20px; 
    background-color: #333;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
}


.right-link {
    margin-left: auto; 
}

a {
    
    color: yellow; 
    
   
    
    
   
    text-decoration: none; 
}


a:hover {
    color: #FFA500; 
    text-decoration: underline; 
}