/* =============================
   Global Styles
============================= */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f5fdf7;
    color: #222;
  }
  
  /* =============================
     Header
  ============================= */
  header {
    background: linear-gradient(90deg, #0a3d62, #3dc1d3);
    color: white;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  header h1 {
    margin: 0;
    font-size: 1.5rem;
  }
  
  /* =============================
     Navigation
  ============================= */
  nav a {
    color: white;
    margin: 0 1rem;
    text-decoration: none;
    font-weight: bold;
  }
  
  nav a:hover {
    text-decoration: underline;
  }
  
  /* =============================
     Language Switcher
  ============================= */
  .language-switcher {
    display: flex;
    align-items: center;
  }
  
  .language-switcher button {
    margin-left: 0.5rem;
    padding: 0.3rem 0.8rem;
    border: none;
    border-radius: 5px;
    background: white;
    color: #0a3d62;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
  }
  
  .language-switcher button:hover {
    background: #3dc1d3;
    color: white;
  }
  
  /* =============================
     Hero Section
  ============================= */
  .hero {
    text-align: center;
    padding: 3rem 2rem;
    background: url('https://images.unsplash.com/photo-1508780709619-79562169bc64?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
    color: white;
  }
  
  .hero h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  .hero p {
    font-size: 1.1rem;
  }
  
  /* =============================
     Cards
  ============================= */
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
  }
  
  .card {
    background: white;
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  
  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  }
  
  .card img {
    max-width: 100%;
    border-radius: 10px;
    margin-bottom: 1rem;
  }
  .cards a.card {
    display: block;           /* ให้ลิงก์เต็ม card */
    text-decoration: none;    /* เอา underline */
    color: inherit;           /* ใช้สีตัวอักษรเดิม */
    transition: transform 0.3s ease;
  }
  
  .cards a.card:hover {
    transform: translateY(-5px);
  }

  .cards .card img {
    width: 100%;            /* เต็มความกว้าง card */
    height: 200px;          /* ความสูงเท่ากันทุกภาพ */
    object-fit: cover;      /* ครอบภาพเต็ม card โดยไม่เสียอัตราส่วน */
    object-position: center; /* จัดให้อยู่ตรงกลาง */
    border-radius: 10px;
    margin-bottom: 1rem;
  }  
  
  /* =============================
     Footer
  ============================= */
  footer {
    text-align: center;
    padding: 1rem;
    background: #0a3d62;
    color: white;
    font-size: 0.9rem;
  }
  
  /* =============================
     Responsive
  ============================= */
  @media (max-width: 768px) {
    header {
      flex-direction: column;
      gap: 1rem;
      text-align: center;
    }
  
    nav {
      margin: 0.5rem 0;
    }
  
    .hero h2 {
      font-size: 1.6rem;
    }
  
    .hero p {
      font-size: 1rem;
    }
  }
  
  @media (max-width: 480px) {
    nav a {
      margin: 0 0.5rem;
    }
  
    .language-switcher button {
      padding: 0.25rem 0.6rem;
      font-size: 0.85rem;
    }
  
    .card {
      padding: 0.8rem;
    }
  }
  
  /* =============================
   Centered Page Images
    ============================= */
    .page-image {
        display: block;              /* ทำให้จัดกึ่งกลางได้ */
        margin: 2rem auto;           /* กึ่งกลาง + เว้นระยะบนล่าง */
        max-width: 60%;              /* ไม่เกิน 90% ของความกว้างจอ */
        height: auto;                /* รักษาอัตราส่วน */
        border-radius: 12px;         /* มุมโค้งนิดหน่อย */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* ใส่เงาเบาๆ */
  }
  
  /* ====== CONTACT CARD ====== */
    .container .card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        padding: 20px;
        margin: 40px 0;
    }
    
    .container .card h3 {
        color: #0a74da;
        margin-bottom: 15px;
    }
    
    .container .card p {
        font-size: 1rem;
        color: #333;
        margin-bottom: 10px;
    }
    
    .container .card a {
        color: #0a74da;
        text-decoration: none;
    }
    
    .container .card a:hover {
        text-decoration: underline;
    }
    
    /* Hero Section */
    .hero h2 {
        font-size: 2rem;
        margin-bottom: 10px;
    }
    
    .hero p {
        font-size: 1.1rem;
        color: #555;
    }
    
    /* ====== Projects Section ====== */
.projects-section {
    padding: 2rem;
    background: #f0f8ff;
  }
  
  .projects-section .container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .projects-card {
    margin-bottom: 2rem;
  }
  
  .projects-card h3 {
    color: #0a3d62;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .projects-card ul {
    list-style: disc;
    padding-left: 20px;
  }
  
  .projects-card ul li {
    margin-bottom: 0.5rem;
  }
  
  .projects-card ul li a {
    color: #0a74da;
    text-decoration: none;
  }
  
  .projects-card ul li a:hover {
    text-decoration: underline;
  }
  
  /* โครงการที่ทำแบบ card grid */
  .project-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
  }
  
  .project-cards .card {
    background: white;
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
  }
  
  .project-cards .card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    margin-bottom: 0.8rem;
  }
  
  .project-cards .card h4 {
    margin: 0.5rem 0;
    color: #0a3d62;
  }
  
  .project-cards .card p {
    font-size: 0.95rem;
    color: #333;
  }