.custom-row {
            margin: 5rem 0; /* Vertical margin */
            justify-content: center; /* Center items in the row */
        }
.card {
            width: 18rem; /* Fixed width for the card */
        }
        body {
            background-color: #C4E4E0; /* พื้นหลัง */
            font-family: 'Arial', sans-serif;
        }

        .navbar {
            background-color: #C3E5F2; /* สีเมนู */
        }

        .navbar-brand {
            font-weight: bold;
            font-size: 1.5rem;
        }

        .btn-no-hover {
            transition: none; /* Remove transition effect */
            border: none; /* Remove border */
            background-color: white; /* Background color of button */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        .btn-no-hover:hover {
            background-color: #C3E5F2; /* Change background on hover */
            color: #000; /* Change text color on hover */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
        }

        .img-medium {
            width: 100%; /* Set to 100% of button width */
            max-width: 300px; /* Adjust maximum width as desired */
            height: auto; /* Maintain aspect ratio */
            border-radius: 10px; /* Rounded corners */
        }

        h1 {
            color: #000000; /* สีหัวข้อแนะนำ */
           
            margin-top: 30px;
            font-size: 2rem; /* ขนาดตัวอักษร */
        }

        .card {
            border: none;
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.2s;
        }

        .card:hover {
            transform: scale(1.05); /* ขยายเมื่อมีการ hover */
        }

        footer {
            background-color: rgb(0, 0, 0); /* เปลี่ยนสีพื้นหลังของฟุตเตอร์เป็นสีขาว */
            padding: 20px 0;
            text-align: center;
        }

        .nav-link {
            color: #9AD4D3; /* สีลิงก์ในฟุตเตอร์ */
        }
        .custom-header {
            background-color: #9AD4D3; /* สีพื้นหลังที่ต้องการ */
            color: white; /* สีข้อความ */
        }
        .img-medium {
            height: 300px; /* Set your desired height here */
            width: 260px;   /* Maintain aspect ratio */
        }
        .btn-custom {
            background-color: #9AD4D3; /* Change to your desired color */
            color: white; /* Change text color if needed */
        }
        
        .btn-custom:hover {
            background-color: #80d6d5; /* Change hover color */
        }
        body {
            font-family: 'Avenir', sans-serif; /* Apply Avenir font to the body */
        }
        .btn-custom {
            background-color: #EDD7E8; /* Custom button color */
            color: rgb(0, 0, 0);
        }
        
        .custom-footer {
            background-color: #9AD4D3; /* Change this to your desired color */
           
        }
      
        .custom-footer .nav-link {
            color: #000000; /* Change this to your desired text color */
        }
        .custom-footer .nav-link:hover {
            color: #fff; /* Change color on hover */
        }
        .about-header{
            background: url("images/logo.jpg");
            background-size: 50%;
            
        }