* {
  outline: none;
}

 body {
    background-image: url(img/2023-09-03_00.51.11.png);
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: center;
    background-attachment: fixed;
}

.CG1 {
  width: 100%;
  height: 100%;
}

.img1{
  width: 600px; 
  height: 450px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.CG2 {
  width: 100%;
  height: 100%;
  text-align: center;
}

/* ปุ่ม BU01 *//* ปุ่ม BU02 และ BU03 */
.BU01 {
  display: inline-block; /* แสดงเป็นอินไลน์บล็อก */
  padding: 10px 20px; /* ระยะห่างขอบภายในปุ่ม */
  margin: 0 100px; /* ระยะห่างด้านซ้ายและด้านขวา */
  color: #ffffff; /* สีตัวอักษร */
  border-radius: 10px; /* มุมโค้งขอบ */
  background: #039161; /* สีพื้นหลัง */
  text-decoration: none; /* ลบการเส้นใต้ข้อความลิงก์ */
  text-align: center; /* จัดเนื้อหาตรงกลาง */
  font-size: 28px; /* ขนาดตัวอักษร */
  transition: background-color 0.3s ease; /* เพิ่มการเปลี่ยนสีพื้นหลังเป็นอาจารย์ */
  font-family: 'ADLaM Display', cursive;
  letter-spacing: 2px;
  
}

.BU02 {
  display: inline-block; 
  padding: 10px 20px; 
  margin: 0 100px; 
  color: #ffffff; 
  border-radius: 6px; 
  background: #039161; 
  text-decoration: none; 
  text-align: center; 
  font-size: 27px; 
  transition: background-color 0.3s ease; 
  font-family: 'ADLaM Display', cursive;
  letter-spacing: 2px;
  
}

.BU03 {
  display: inline-block; 
  padding: 10px 20px; 
  margin: 0 100px; 
  color: #ffffff; 
  border-radius: 6px; 
  background: #039161; 
  text-decoration: none; 
  text-align: center; 
  font-size: 28px; 
  transition: background-color 0.3s ease; 
  font-family: 'ADLaM Display', cursive;
  letter-spacing: 2px;
  
}


.BU01:hover {
  background: #08bd59; 
}

.BU02:hover {
  background: #0ada67;
}

.BU03:hover {
  background: #06e08d; 
}
.CG3{
  width: 100%;
  height: 100%;
  text-align: center;
  
}
.TX1{
  display: inline-block; 
  padding: 10px 20px; 
  margin: 0 100px; 
  color: #ffffff; 
  border-radius: 6px; 
  text-decoration: none; 
  text-align: center; 
  font-size: 28px; 
  font-family: 'ADLaM Display', cursive;
  letter-spacing: 2px;
  animation: colorChange 5s infinite alternate;
}


.CG4{
  width: 100%;
  height: 100%;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 50px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  font-family: 'ADLaM Display', cursive;
  color: #ffffff;
  
}
.product-items{
  
  cursor: pointer;
  transition: 0.3s;
  }
.product-items:hover{
  transform: scale(1.03);

}
.product-img{
  border: 3px solid #ffffff;
   width: 100%;
   height: 10vw;
   object-fit: cover;
   border-radius: 10px;
    
}

.BU4{
  display: inline-block; 
  padding: 10px 20px;
  background: #e00d06; 
  letter-spacing: 2px;
  transition: background-color 0.3s ease; 
  border-radius: 10px;
  color: #ffffff
}


@keyframes colorChange {
  0% {
    color: #e00d06; /* สีแดงเข้ม */
  }
  25% {
    color: #ff5733;
  }
  50% {
    color: #ff9966;
  }
  75% {
    color: #ffd700;
  }
  100% {
    color: #ffdb4d; /* สีเหลืองเข้ม */
  }
}