body {
  font-family: "Sarabun", sans-serif;
  margin-top: 10px;
  background-color: #d3d3d3; /* พื้นหลังสีเทา */
}

.navbar {
  padding-top: 5px;
  padding-bottom: 5px;
}

.navbar .navbar-brand img {
  max-width: 150px;
  height: auto;
}

.banner {
  position: relative;
  height: 90vh; /* ปรับความสูงของภาพสไลด์ */
  background-size: cover; /* ให้ภาพครอบคลุมพื้นที่ */
  background-position: center; /* จัดตำแหน่งภาพให้อยู่กลาง */
  background-repeat: no-repeat; /* ห้ามให้ภาพซ้ำ */
}

.carousel-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
}

.carousel-caption {
  z-index: 2;
}

.carousel-caption h2 {
  font-size: 2.2rem;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.nav-link:hover {
  color: #d9534f !important;
}

.btn-outline-light {
  border-color: #fff;
  color: #fff;
}

.btn-outline-light:hover {
  background-color: #d9534f;
  color: white;
}

@media (max-width: 768px) {
  .banner {
    height: 50vh; /* ลดความสูงของภาพสำหรับหน้าจอขนาดเล็ก */
  }
}