* {
  font-family: "Outfit", sans-serif;
}

body {
    display: flex;
    grid-template-rows: auto 1fr auto; /* กำหนดให้แต่ละส่วนมีขนาดอย่างไร */
    min-height: 100vh; /* กำหนดความสูงขั้นต่ำให้เต็มหน้าจอ */
    background-color: #f0f2f5; /* สีเทาอ่อนตามภาพตัวอย่าง */

}

/* Custom CSS for Navbar */
.custom-navbar {
    background-color: #f8f9fa; /* สามารถเปลี่ยนสีพื้นหลังได้ */
    box-shadow: 0 2px 4px rgba(0,0,0,.1); /* เพิ่มเงาให้ดูมีมิติ */
}

.custom-navbar .nav-link {
    font-size: 1.25rem; /* ทำให้ตัวอักษรใหญ่ขึ้น */
    font-weight: 500;
    color: #333;
    position: relative; /* สำหรับเส้นขีด */
    padding: 0.5rem 1rem;
    transition: color 0.3s ease;
}

/* เส้นขีดสีแดงเมื่อ Hover */
.custom-navbar .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    background-color: red;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.custom-navbar .nav-link:hover::after,
.custom-navbar .nav-link.active::after {
    width: 100%;
}

.custom-navbar .nav-link:hover {
    color: #e3342f; /* เปลี่ยนสีตัวอักษรเมื่อ Hover */
}

/* Custom CSS for Footer */
.custom-footer {
    font-size: 1.1rem; /* ทำให้ตัวอักษรใหญ่ขึ้น */
}

.custom-footer h5 {
    font-size: 1.5rem; /* ทำให้ Header ใหญ่ขึ้น */
}

.custom-footer a {
    transition: color 0.3s ease;
}

.custom-footer a:hover {
    color: #e3342f !important; /* เปลี่ยนสีลิงก์เมื่อ Hover */
}

.btn.btn-xs {
    padding: .2rem .5rem; /* กำหนดขนาดของ Padding ภายในปุ่มให้เล็กลง */
    font-size: .75rem;     /* กำหนดขนาดตัวอักษรให้เล็กลง */
}