body {
    background-color: #FFFFFF;
    font-family: 'Noto Sans Thai', sans-serif;
}

.text-section-custom {
    color: #FA812F; /* สีเดียวกับ navbar */
    font-weight: bold;
}

.btn-yellow {
  background-color: #F3C623;
  color: #000;
  border: none;
}
.btn-yellow:hover {
  background-color: #FA812F;
  color: #fff;
}


.navbar {
    background-color: #FA812F;
}

.navbar a {
    color: #fff !important;
}

.navbar-nav .nav-link {
    color: white !important;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #F3C623 !important;
    text-decoration: underline;
}

.footer {
    background-color: #FA812F;
    color: white;
    padding: 20px;
    text-align: center;
}


/* คุณสามารถปรับ 0.4 ให้โปร่งใสมากขึ้นหรือน้อยลงได้ เช่น:
0.2 = จางมาก
0.6 = ทึบขึ้น */
.carousel-caption {
  background-color: rgba(0, 0, 0, 0.1); /* สีดำใส 40% */
  padding: 1rem;
  border-radius: 1rem;
}


.carousel-item img {
    width: 100%;
    height: 600px;
    /* default สำหรับ desktop */
    object-fit: cover;
    /* ให้ภาพครอบพื้นที่โดยไม่บิดเบี้ยว */
}

.img-fluid {
    object-fit: cover;
    height: 250px;
    /* ปรับความสูงเท่ากันทุกภาพ */
}

/* Screen Design for Responsive */
/* Mobile: จอเล็กที่สุด */
@media (max-width: 575.98px) {
    body {
        font-size: 14px;
    }

    .carousel-item img {
        height: 280px;
    }
}

/* Tablet แนวตั้ง */
@media (min-width: 576px) and (max-width: 767.98px) {
    body {
        font-size: 15px;
    }

    .carousel-item img {
        height: 360px;
    }
}

/* Tablet แนวนอน */
@media (min-width: 768px) and (max-width: 991.98px) {
    body {
        font-size: 16px;
    }

    .carousel-item img {
        height: 450px;
    }
}

/* Desktop */
@media (min-width: 992px) and (max-width: 1199.98px) {
    body {
        font-size: 17px;
    }

    .carousel-item img {
        height: 100px;
        /* default สำหรับ desktop */
        object-fit: cover;
        /* ให้ภาพครอบพื้นที่โดยไม่บิดเบี้ยว */
    }
}

/* Large Desktop */
@media (min-width: 1200px) {
    body {
        font-size: 18px;
    }

    .carousel-item img {
        height: 300px;
        /* default สำหรับ desktop */
        object-fit: cover;
        /* ให้ภาพครอบพื้นที่โดยไม่บิดเบี้ยว */
    }
}

/* ส่วนนี้เพิ่มสำหรับ card จุดสักการะ */
  .shadow-hover {
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .shadow-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
  }

  .card-img-top {
    transition: transform 0.3s ease;
  }

  .shadow-hover:hover .card-img-top {
    transform: scale(1.03);
  }