/* ------------------------------
   ThaiCall Business Co., Ltd.
   Blue Corporate Theme
-------------------------------- */

:root {
  --cream: #4dd0e1;       /* พื้นหลังขาว */
  --brown: #ffffff;       /* น้ำเงินองค์กร (สำหรับ header/footer) */
  --accent: #ffe0b2;      /* น้ำเงินอ่อน */
  --text: #1a237e;        /* สีตัวหนังสือหลัก */
  --light-text: #1a237e;  /* สีข้อความรอง */
  --white: #ffffff;
}

/* --- Body --- */
body {
  font-family: "Sarabun", sans-serif;
  background: var(--cream);
  color: var(--text);
  margin: 0;
  padding: 0;
  line-height: 1.8;
}

/* --- Header (Responsive) --- */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--brown);
  color: var(--white);
  padding: 10px 40px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  flex-wrap: wrap;
}

.header-left img {
  height: 60px;
  width: auto;
  display: block;
  max-width: 100%;
}

.header-right.lang-switch {
  font-size: 16px;
  font-weight: bold;
}

.header-right.lang-switch span {
  cursor: pointer;
  color: var(--white);
  padding: 0 6px;
  transition: 0.3s;
}

.header-right.lang-switch span:hover {
  color: var(--accent);
}

/* --- Navigation --- */
nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
  padding: 12px 0;
}
nav a {
  color: #e64a19              /* สีตัวหนังสือเทาเข้ม */
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: 0.3s;
}

nav a:hover {
  color: #ff8f00;              /* เปลี่ยนเป็นน้ำเงินเข้มตอน hover */
  text-decoration: underline;
}
/* --- Container --- */
.container {
  max-width: 900px;
  margin: 40px auto;
  background: var(--white);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

/* --- Footer --- */
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--cream);
}

.container {
  flex: 1;
}

/* Footer แบบโค้งมนและเงา */
footer {
  background: var(--brown);
  color: var(--white);
  text-align: center;
  padding: 20px 0 18px;
  width: 100%;
  margin-top: auto;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.15);
  font-weight: 500;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 2;                  /* ให้อยู่เหนือภาพ */
}

footer p {
  margin: 0;
  font-size: 15px;
}
{
  color: #ffffff !important;
}
.lang-switch span {
  color: #ffffff !important;
}
.lang-switch span {
  color: #ffffff !important;
}
footer {
  color: #ffffff !important;
  background: #ffffff !important;
  border-top: 1px solid #ffffff;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.08);
  font-weight: 500;
}
h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
  font-weight: 700;
}

/* ถ้ามีหัวข้อที่ใช้ class พิเศษ เช่น .section-title */
.section-title, .title, .subtitle {
  color: #1a237e !important;
}

/* ปรับระยะและขนาดหัวข้อให้สวยงาม (ถ้าต้องการ) */
h1 { font-size: 28px; margin-top: 30px; }
h2 { font-size: 24px; margin-top: 25px; }
h3 { font-size: 20px; margin-top: 20px; }
/* กล่องเนื้อหาหลัก */
.container {
  max-width: 900px;
  margin: 40px auto;
  background: #e1f5fe;
  padding: 30px;
  border-radius: 14px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

/* กล่องพื้นหลังภายใน (เหมือนภาพตัวอย่าง) */
.content-box {
  background: #e1f5fe; /* สีครีมอ่อน (เหมือนภาพ) */
  border-radius: 10px;
  padding: 25px 30px;
  margin-top: 25px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* หัวข้อในแต่ละกล่อง */
.content-box h2,
.content-box h3 {
  color: #1a237e;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 15px;
}
🧩 ขั้นตอนต่อไป (ในแต่ละหน้า HTML)
ในแต่ละหน้า (เช่น about.html, services.html, governance.html, contact.html, index.html)
ให้คุณหาบล็อกข้อความที่ต้องการมีพื้นหลัง แล้ว ครอบไว้ด้วย div class="content-box"
ตัวอย่าง 👇

html
คัดลอกโค้ด
<div class="container">
  <div class="content-box">
    <h2>ประวัติ</h2>
    <p>บริษัท ไทยคอลธุรกิจ จำกัด ...</p>
  </div>

  <div class="content-box">
    <h2>คุณสมบัติของบริษัท</h2>
    <p>บริษัทได้จดทะเบียนเป็นนิติบุคคล ...</p>
  </div>
</div>
.pdf-list {
  list-style: none;
  padding: 0;
}

.pdf-list li {
  margin: 10px 0;
  padding: 10px;
  background: #fff8e1;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.pdf-list a {
  color: #1a237e;
  font-weight: 600;
  text-decoration: none;
}

.pdf-list a:hover {
  text-decoration: underline;
  color: #fff8e1;
}
/* ===== จัดตำแหน่งโลโก้พาร์ทเนอร์ให้อยู่ตรงกลาง ===== */
.partner-logos {
  display: flex;                /* เรียงแนวนอน */
  justify-content: center;      /* จัดให้อยู่ตรงกลางแนวนอน */
  align-items: center;          /* จัดให้อยู่ตรงกลางแนวตั้ง */
  flex-wrap: wrap;              /* ถ้าหน้าจอแคบ ให้ขึ้นบรรทัดใหม่ */
  gap: 30px;                    /* ระยะห่างระหว่างโลโก้ */
  padding: 20px 0;              /* ระยะขอบด้านบนและล่าง */
  text-align: center;           /* เผื่อมีข้อความใต้โลโก้ */
  width: 100%;                  /* ให้เต็มความกว้างหน้าจอ */
  background: #e1f5fe;          /* สีพื้นหลัง (ปรับได้) */
  box-sizing: border-box;       /* ป้องกันขอบล้น */
}

/* ===== ปรับขนาดโลโก้ให้อยู่ตรงกลางและไม่บิด ===== */
.partner-logos img {
  max-height: 80px;             /* ความสูงสูงสุดของโลโก้ */
  width: auto;                  /* ปรับตามอัตราส่วนจริง */
  object-fit: contain;          /* ป้องกันภาพบิด */
  transition: transform 0.2s ease;
}

/* ===== เอฟเฟกต์เมื่อชี้เมาส์ ===== */
.partner-logos img:hover {
  transform: scale(1.08);
}
/* ===== ปรับขนาดกล่องข้อความเฉพาะหน้าประวัติการรับงาน ===== */
.work-history-box {
  background: #e1f5fe;
  border-radius: 15px;
  padding: 40px 50px;
  margin: 40px auto;
  width: 85%;                /* ✅ ปรับความกว้างได้ เช่น 75–90% */
  max-width: 1000px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: left;
  color: #1a237e;
}

/* ===== หัวข้อในกล่อง ===== */
.work-history-box h2 {
  text-align: center;
  color: #e1f5fe;
  margin-bottom: 20px;
  font-size: 1.6em;
  font-weight: 700;
}

/* ===== รายการบริษัท ===== */
.work-history-box ul {
  list-style: disc;
  padding-left: 40px;
  line-height: 1.8;
  font-size: 1.05em;
}
.center-quote {
  text-align: center;
  font-weight: 500;
  color: #e1f5fe;
  margin-top: 20px;
}
/* 🔸 โครงสร้างหน้าใหม่ */
.page-container {
  width: 90%;
  max-width: 1000px;
  margin: 60px auto;
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  padding: 40px 60px;
  color: #424242;
}

.page-container h1 {
  text-align: center;
  font-size: 2em;
  color: #1f3a93;
  margin-bottom: 20px;
}

.page-container p {
  text-align: center;
  line-height: 1.8;
  font-size: 1.05em;
  margin-bottom: 40px;
}

/* 🔹 รายการตำแหน่งงาน */
.job-section h2 {
  font-size: 1.5em;
  margin-bottom: 20px;
  color: #1f3a93;
}

.job-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.job-card {
  background: #f8f9fc;
  border-left: 5px solid #1f3a93;
  padding: 20px;
  border-radius: 8px;
}

.job-card h3 {
  margin: 0 0 8px;
}

/* 🔹 ฟอร์มสมัครงาน */
.apply-section {
  margin-top: 50px;
}

.apply-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.apply-form label {
  font-weight: 600;
}

.apply-form input, .apply-form select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1em;
}

.btn-submit {
  background-color: #1f3a93;
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-size: 1em;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.btn-submit:hover {
  background-color: #2d4bb5;
}
/* 🔹 TCB Hotline Box */
.tcb-hotline {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #1f3a93; /* น้ำเงินองค์กร */
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  position: absolute;
  top: 18px;
  right: 110px;
  z-index: 20;
}

.tcb-hotline:hover {
  background-color: #283593;
  transform: scale(1.05);
}

.tcb-hotline-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.tcb-hotline-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.tcb-hotline-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.tcb-hotline-number {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* 🔸 ปรับตำแหน่งให้เหมาะกับโครงสร้าง Header เดิม */
header {
  position: relative;
}
/* 🔹 ส่วนรูปภาพด้านบน */
.intro-image {
  width: 100%;
  text-align: center;
  margin-top: -140px; /* เว้นจากเมนูด้านบน */
  margin-bottom: 10px; /* เว้นจากข้อความด้านล่าง */
}
.intro-image img {
  width: 90%; /* ✅ รูปจะไม่เต็มขอบจอ ดูเรียบร้อย */
  max-width: 2000px; /* ✅ จำกัดความกว้างสูงสุด */
  height: 90%;
  border-radius: 50px; /* ✅ มุมมนเล็กน้อย */
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15); /* ✅ เพิ่มเงาให้ดูพรีเมียม */
  display: block;
  margin: 0 auto; /* ✅ ให้อยู่ตรงกลางแน่นอน */
}
.page-image {
  display: block;
  margin: 30px auto;       /* จัดให้อยู่ตรงกลาง */
  max-width: 80%;         /* ไม่เกินขนาดกล่อง */
  height: 80%;             /* รักษาสัดส่วนภาพ */
  border-radius: 10px;      /* มุมโค้งนิด ๆ */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* เงานุ่ม */
  margin-bottom: -100px; /* เว้นจากข้อความด้านล่าง */
}
/* === ภาพที่ 1: ใช้ในหน้า about.html === */
.img-about-1 {
  display: block;
  margin: 25px auto;
  max-width: -120%;
  height: 80%;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-top: -50px; /* เว้นจากเมนูด้านบน */
  margin-bottom: -98px; /* เว้นจากข้อความด้านล่าง */
}

/* === ภาพที่ 2: ใช้ในหน้า services.html === */
.img-service-1 {
  display: block;
  margin: 30px auto;
  width: -35%;
  height: 45%;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(31, 58, 147, 0.2);
  position: relative;
  left: -0.5px; 
  top: -60px;
  margin-bottom: -170px; /* เว้นจากข้อความด้านล่าง */
}
.img-service-2 {
  display: block;
  margin: 30px auto;
  width: 35%;
  height: 50%;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(31, 58, 147, 0.2);
  position: relative;
  left: -370px; 
  top: -210px;
  margin-bottom: -170px; /* เว้นจากข้อความด้านล่าง */
}
.img-service-3 {
  display: block;
  margin: 30px auto;
  width: 35%;
  height: 50%;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(31, 58, 147, 0.2);
  position: relative;
  right: -370px; 
  top: -365px;
  margin-bottom: -350px; /* เว้นจากข้อความด้านล่าง */
}
.img-service-4 {
  display: block;
  margin: 30px auto;
  max-width: 85%;
  height: 50%;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(31, 58, 147, 0.2);
  position: relative;
  right: -250px; 
  top: -25px;
  margin-bottom: 50px; /* เว้นจากข้อความด้านล่าง */
}
.img-service-5 {
  display: block;
  margin: 30px auto;
  max-width: 85%;
  height: 50%;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(31, 58, 147, 0.2);
  position: relative;
  left: -260px; 
  top: -437px;
  margin-bottom: -420px; /* เว้นจากข้อความด้านล่าง */
}
/* === ภาพที่ 3: ใช้ในหน้า governance.html === */
.img-govern-1 {
  display: block;
  margin: 25px auto;
  max-width: 80%;
  height: auto;
  border-radius: 8px;
  opacity: 0.95;
  transition: all 0.3s ease-in-out;
}
.img-govern-1:hover {
  transform: scale(1.03);
}

/* === ภาพที่ 4: ใช้ในหน้า contact.html === */
.img-contact-1 {
  display: block;
  margin: 20px auto;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* === ภาพที่ 5: ใช้ในหน้า joinus.html === */
.img-join-1 {
  display: block;
  margin: 25px auto;
  max-width: 50%;
  height: auto;
  border-radius: 12%;
  box-shadow: 0 4px 14px rgba(31, 58, 147, 0.2);
  position: relative;
  right: -130px; 
  top: -200px;
  margin-bottom: -320px; /* เว้นจากข้อความด้านล่าง */
}
.hero-content {
  position: relative;
  z-index: 2;                  /* ให้อยู่เหนือภาพ */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  top: 0%;
  text-align: center;
  background: rgba(255, 255, 255, 0.4); /* โปร่งใส */
  backdrop-filter: blur(1px);           /* เบลอพื้นหลังนิด ๆ */
  padding: 20px;
  border-radius: 15px;
  color: #0b1f4d;                       /* สีข้อความน้ำเงินเข้ม (โทนองค์กร) */
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.hero-bg {
  z-index: 1;                  /* ให้อยู่ "หลังสุด" */
  position: relative;
  width: 100%;
  max-width: -100%;
  height: 115%;
  object-fit: cover;           /* ทำให้ภาพเต็มพื้นที่แต่ไม่บิดเบี้ยว */
  right: 0%px;
  margin-top: -95px;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: -100px; /* เว้นจากข้อความด้านล่าง */
}
/* =========================
/* iPad (แนวนอน / 768px ขึ้นไป) */
@media (max-width: 1024px) {
  .hero-content {
    padding: 30px 40px;
  }
}

/* มือถือ (แนวตั้ง / 480px - 767px) */
@media (max-width: 767px) {
  .hero-banner {
    height: 85vh;
  }

  .hero-content {
    padding: 20px;
    margin: 0 15px;
  }

  .hero-content h1 {
    font-size: 1.6rem;
  }

  .hero-content p {
    font-size: 0.95rem;
  }
}
/* ===== ปรับโลโก้ให้ Responsive แน่นอน ===== */
.logo {
  display: inline-block !important;
  width: 100% !important;
  max-width: 180px !important;   /* ✅ ปรับตรงนี้ได้ถ้ายังใหญ่ */
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

/* ย่อโลโก้เมื่อจอเล็กลง */
@media screen and (max-width: 1024px) {
  .logo { max-width: 160px !important; }
}

@media screen and (max-width: 768px) {
  .logo { max-width: 130px !important; }
}

@media screen and (max-width: 480px) {
  .logo { max-width: 110px !important; }
}
/* ============================
   RESET พื้นฐาน
============================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Prompt", "Sarabun", "Noto Sans Thai", sans-serif;
  background-color: #f8fbff;
  color: #001b44;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ============================
   HEADER + LOGO
============================ */
.header {
  background-color: #241d8c;
  text-align: center;
  padding: 10px 0;
}

.header img.logo {
  display: inline-block;
  width: 100%;
  max-width: 180px;
  height: auto;
  transition: all 0.3s ease-in-out;
  object-fit: contain;
}

/* Hotline + ภาษา */
.top-right {
  position: absolute;
  top: 15px;
  right: 20px;
  text-align: right;
  font-size: 14px;
  color: white;
}

.hotline {
  background-color: #003fc9;
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-block;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.lang {
  margin-top: 4px;
}
.lang a {
  color: #fff;
  text-decoration: none;
  margin: 0 3px;
}

/* ============================
   เมนู NAVBAR
============================ */
nav {
  background-color: #0b45b1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 10px;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: 0.3s;
}

nav a:hover {
  text-decoration: underline;
}

/* ============================
   เนื้อหา CONTENT
============================ */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 20px auto;
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.container h1, .container h2, .container h3 {
  color: #0b45b1;
  margin-bottom: 15px;
}

/* ============================
   FOOTER
============================ */
footer {
  background-color: #241d8c;
  color: #fff;
  text-align: center;
  padding: 15px;
  margin-top: 30px;
  font-size: 14px;
}

/* ============================
   RESPONSIVE MEDIA QUERIES
============================ */

/* 📱 มือถือแนวตั้ง (จอเล็กกว่า 480px) */
@media screen and (max-width: 480px) {
  .header img.logo {
    max-width: 110px;
  }

  nav a {
    font-size: 14px;
  }

  .container {
    width: 95%;
    padding: 15px;
  }

  .top-right {
    position: static;
    text-align: center;
    margin-top: 10px;
  }
}

/* 📱 มือถือแนวนอน / แท็บเล็ตเล็ก (<768px) */
@media screen and (max-width: 768px) {
  .header img.logo {
    max-width: 140px;
  }

  nav {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .container {
    width: 94%;
  }
}

/* 💻 iPad / Tablet แนวนอน (<1024px) */
@media screen and (max-width: 1024px) {
  .header img.logo {
    max-width: 160px;
  }

  .container {
    width: 92%;
  }
}

/* 🖥️ Notebook / Desktop (ใหญ่กว่า 1024px) */
@media screen and (min-width: 1025px) {
  .header img.logo {
    max-width: 180px;
  }
}
/* === Reset === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Prompt", "Sarabun", sans-serif;
  background-color: #f6faff;
  color: #222;
  line-height: 1.6;
}

/* === Header === */
.site-header {
  background-color: #1b4dcf;
  color: white;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  max-width: 60px;
  height: auto;
}

.company-info h1 {
  font-size: 18px;
  font-weight: 600;
}

.company-info p {
  font-size: 13px;
  opacity: 0.9;
}

/* === Menu === */
nav {
  background-color: #000066;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  transition: all 0.3s ease;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  font-size: 16px;
}

nav a:hover {
  background-color: #0d2f85;
}

.menu-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
}

/* HERO SECTION (เต็มจอทั้งมือถือและคอม) */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh; /* ✅ บังคับให้สูงเท่าหน้าจอ */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000; /* fallback เผื่อโหลดรูปไม่ทัน */
}

/* ถ้าใช้ <img> */
.hero img,
.hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* ✅ ปรับรูปเต็มไม่บีบ */
  object-position: center;
  z-index: 1;
}

/* ชั้นซ้อนโปร่งใส */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.35);
  z-index: 2;
}

/* ข้อความบนภาพ */
.hero-text {
  position: relative;
  z-index: 3;
  color: white;
  text-align: center;
  padding: 20px;
}

.hero-text h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.hero-text p {
  font-size: 1.25rem;
  max-width: 800px;
  margin: auto;
  line-height: 1.6;
}

/* ✅ Responsive */
@media screen and (max-width: 768px) {
  .hero {
    min-height: 75vh; /* มือถือไม่ต้องเต็ม 100% */
  }
  .hero-text h1 {
    font-size: 1.8rem;
  }
  .hero-text p {
    font-size: 1rem;
  }
}


/* === Content === */
.container {
  width: 90%;
  max-width: 1000px;
  margin: 40px auto;
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* === Footer === */
footer {
  background-color: #1b4dcf;
  color: white;
  text-align: center;
  padding: 15px;
  font-size: 14px;
}

/* === Responsive === */
@media screen and (max-width: 768px) {
  .menu-toggle {
    display: block;
    color: #000066;
  }

  nav {
    display: none;
    flex-direction: column;
  }

  nav.active {
    display: flex;
  }

  .hero {
    padding: 60px 20px;
  }

  .hero-text h2 {
    font-size: 20px;
  }

  .hero-text p {
    font-size: 14px;
  }

  .logo {
    max-width: 45px;
  }

  .company-info h1 {
    font-size: 16px;
  }

  .company-info p {
    font-size: 12px;
  }
}
/* HERO (แสดงรูปทีมงานแบบเต็มจอ) */
.hero {
  position: relative;
  width: 100%;
  height: 90vh; /* เต็มหน้าจอ */
  overflow: hidden;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ✅ ปรับให้รูปเต็มกรอบ ไม่บีบ ไม่ซ้ำ */
  object-position: center; /* แสดงตรงกลางของภาพ */
  display: block;
}

/* ชั้นโปร่งใสซ้อนทับ */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.35); /* มืดเล็กน้อยให้ตัวอักษรเด่น */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ข้อความบนภาพ */
.hero-text {
  color: white;
  text-align: center;
  padding: 20px;
}

.hero-text h1 {
  font-size: 40px;
  margin-bottom: 10px;
  font-weight: 600;
}

.hero-text p {
  font-size: 18px;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ✅ Responsive */
@media screen and (max-width: 768px) {
  .hero {
    height: 70vh;
  }
  .hero-text h1 {
    font-size: 26px;
  }
  .hero-text p {
    font-size: 14px;
  }
}
/* 🔹 ปรับขนาด TCB HOTLINE ให้พอดีในมือถือและแท็บเล็ต */
@media screen and (max-width: 1024px) {
  .tcb-hotline {
    top: 15px;
    right: 70px;
    padding: 6px 12px;
    gap: 8px;
  }

  .tcb-hotline-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .tcb-hotline-title {
    font-size: 11px;
  }

  .tcb-hotline-number {
    font-size: 14px;
  }
}

@media screen and (max-width: 768px) {
  .tcb-hotline {
    top: 10px;
    right: 55px;
    padding: 4px 10px;
    border-radius: 8px;
    gap: 6px;
  }

  .tcb-hotline-icon {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .tcb-hotline-title {
    font-size: 10px;
  }

  .tcb-hotline-number {
    font-size: 13px;
  }
}

@media screen and (max-width: 480px) {
  .tcb-hotline {
    top: 8px;
    right: 45px;
    padding: 3px 8px;
    border-radius: 6px;
    gap: 5px;
  }

  .tcb-hotline-icon {
    width: 25px;
    height: 25px;
    font-size: 11px;
  }

  .tcb-hotline-title {
    font-size: 9px;
  }

  .tcb-hotline-number {
    font-size: 12px;
  }
}
/* 🔹 ปรับรูปภาพในทุก section ให้เต็มและสมดุล */
.section-image, 
.img-full, 
img.responsive-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
  margin: 0 auto;
}

/* 🔹 สำหรับรูปที่อยู่ในกล่อง (เช่น บริการ/อบรม) */
.image-container img {
  width: 100%;
  height: 100%;
  max-height: 420px; /* สูงสุดของกรอบใน PC */
  object-fit: cover;
  border-radius: 10px;
}

/* 🔹 บังคับ responsive ทุกขนาดหน้าจอ */
@media screen and (max-width: 1024px) {
  .image-container img {
    max-height: 340px;
  }
}

@media screen and (max-width: 768px) {
  .image-container img {
    max-height: 280px;
  }
}

@media screen and (max-width: 480px) {
  .image-container img {
    max-height: 240px;
    border-radius: 8px;
  }
}
/* ภาพเนื้อหาทั่วไป */
.section-image,
img.responsive-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  margin: 0 auto;
}

/* ถ้าอยู่ในกรอบ div หรือ card */
.image-container img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 10px;
}

/* Responsive */
@media screen and (max-width: 1024px) {
  .image-container img { max-height: 340px; }
}
@media screen and (max-width: 768px) {
  .image-container img { max-height: 280px; }
}
@media screen and (max-width: 480px) {
  .image-container img {
    max-height: 240px;
    border-radius: 8px;
  }
}
/* 🔹 ปรับ layout หน้า joinus ให้รูปและข้อความไม่ซ้อนกัน */
.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  gap: 20px;
}

/* 🔹 ส่วนข้อความ */
.page-container .lang-th,
.page-container .lang-en {
  max-width: 900px;
  width: 100%;
  background: #f8feff;
  border-radius: 12px;
  padding: 20px;
  text-align: left;
}

/* 🔹 ปรับภาพให้ responsive */
.img-join-1 {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  object-position: center;
  margin: 10px auto 30px auto;
  display: block;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 🔹 ฟอร์มสมัครงาน */
.apply-section {
  width: 100%;
  max-width: 700px;
  background: #ffffff;
  padding: 25px;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.apply-form label {
  display: block;
  margin-top: 15px;
  font-weight: 500;
}

.apply-form input,
.apply-form select {
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}

.btn-submit {
  margin-top: 20px;
  width: 100%;
  background-color: #002f8b;
  color: white;
  border: none;
  padding: 12px;
  font-size: 1.1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s;
}
.btn-submit:hover {
  background-color: #0041b8;
}

/* ✅ ปรับสำหรับมือถือ */
@media screen and (max-width: 768px) {
  .page-container {
    padding: 10px;
  }

  .img-join-1 {
    width: 90%;
    max-width: 400px;
  }

  .apply-section {
    width: 95%;
    padding: 15px;
  }
}
/* 🔹 ส่วนโครงหลักของหน้า Join Us */
.joinus-section {
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  padding: 30px 20px;
  background: #f8fbff;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* 🔹 ส่วนหัวเรื่อง */
.joinus-section h2 {
  text-align: center;
  color: #0a1a5a;
  font-size: 1.8rem;
  margin-bottom: 15px;
  font-weight: 600;
}

/* 🔹 เนื้อหา + รูปในแถวเดียวกัน */
.joinus-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* 🔹 ข้อความ */
.joinus-text {
  flex: 1 1 50%;
  min-width: 280px;
  color: #333;
  font-size: 1rem;
  line-height: 1.6;
}

/* 🔹 รูปภาพ */
.joinus-image {
  flex: 1 1 40%;
  text-align: center;
}
.joinus-image img {
  width: 100%;
  max-width: 360px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* 🔹 ฟอร์มสมัครงาน */
.joinus-form {
  width: 100%;
  max-width: 700px;
  margin: 40px auto 0 auto;
  background: #ffffff;
  border-radius: 16px;
  padding: 30px 25px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* หัวฟอร์ม */
.joinus-form h3 {
  font-size: 1.3rem;
  color: #0a1a5a;
  margin-bottom: 20px;
}

/* ช่อง input */
.joinus-form input,
.joinus-form select {
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 1rem;
  transition: border-color 0.2s;
}
.joinus-form input:focus,
.joinus-form select:focus {
  border-color: #0a57d1;
  outline: none;
}

/* 🔹 ปุ่มส่งข้อมูล */
.joinus-form button {
  width: 100%;
  background: linear-gradient(90deg, #002f8b, #0047c3);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 12px 0;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.joinus-form button:hover {
  background: linear-gradient(90deg, #0047c3, #005ee5);
  transform: translateY(-1px);
}

/* 🔹 Responsive (มือถือ) */
@media screen and (max-width: 768px) {
  .joinus-content {
    flex-direction: column;
    text-align: center;
  }

  .joinus-image img {
    max-width: 300px;
    margin-bottom: 15px;
  }

  .joinus-form {
    padding: 20px 15px;
    margin-top: 25px;
  }

  .joinus-form button {
    font-size: 1rem;
    padding: 10px;
  }
}
/* ===============================
   HEADER & FOOTER WHITE THEME
   =============================== */

/* ส่วนหัวทั้งหมด */
header, .header, .header-top, #header, .site-header {
  background-color: #ffffff !important;
  color: #002f8b !important;
  border-bottom: 1px solid #e0e0e0;
}

/* โลโก้ใน header */
header img, .header-top img, .logo img {
  filter: none !important;
  max-height: 60px;
  height: auto;
}

/* กล่อง Hotline */
.tcb-hotline, .hotline-box {
  background-color: #002f8b !important;
  color: #ffffff !important;
  border-radius: 10px;
  padding: 6px 14px !important;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* เมนูหลัก */
nav, .nav, .navbar {
  background-color: #66ccff !important;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  text-align: center;
}

nav a, .nav a, .navbar a {
  color: #002f8b !important;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 20px;
  display: inline-block;
  transition: color 0.3s;
}
nav a:hover, .nav a:hover, .navbar a:hover {
  color: #0044cc !important;
  text-decoration: underline;
}

/* ส่วนท้าย */
footer, .footer, #footer, .site-footer {
  background-color: #333399 !important;
  color: #002f8b !important;
  border-top: 1px solid #e0e0e0;
  text-align: center;
  padding: 20px 10px !important;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
}

/* ป้องกันตัวอักษรถูก theme เดิม override */
footer * {
  color: #ffffff !important;
}
/* ===============================
   ปรับสี TH | EN ด้านบนขวา
   =============================== */
.lang-switch, .language-switch, .lang, .language {
  color: #000066 !important;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: transparent !important;
  border: none;
}

.lang-switch a, .language-switch a, .lang a, .language a {
  color: #000066 !important;
  text-decoration: none;
  transition: color 0.2s;
}

.lang-switch a:hover, .language-switch a:hover, .lang a:hover, .language a:hover {
  color: #000066 !important;
  text-decoration: underline;
}

/* ===============================
   ปรับสีหัวข้อใหญ่ในแต่ละหน้า
   =============================== */
h1, h2, h3, h4, .section-title, .page-title {
  color: #002f8b !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* สำหรับหัวข้อย่อยในกล่อง */
.card h2, .box h2, .content h2, .section h2 {
  color: #002f8b !important;
  font-weight: 700;
}

/* ===============================
   ปรับพื้นหลังกล่องให้คงความอ่อนนุ่ม
   =============================== */
.box, .content-box, .info-card {
  background-color: #fffdfb;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
}
/* ===============================
   TH | EN สีฟ้าเข้ม
   =============================== */
.lang-switch span {
  color: #002f8b !important;     /* น้ำเงินเข้ม */
  font-weight: 700 !important;   /* หนา */
  font-size: 16px;
  cursor: pointer;
  background: transparent !important;
  transition: color 0.3s ease;
}

/* เส้นคั่น | ให้อ่อนลงนิด */
.lang-switch {
  color: #002f8b !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ตอน hover ให้เปลี่ยนเป็นน้ำเงินสด */
.lang-switch span:hover {
  color: #0044cc !important;
  text-decoration: underline;
}
img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* รักษาสัดส่วนภาพ */
  image-rendering: auto;
  display: block;
}
/* โลโก้ + ชื่อบริษัท */
.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  height: 50px;       /* ปรับขนาดโลโก้ */
  width: auto;
}

.company-name {
  font-family: "TH SarabunPSK", sans-serif;
  font-size: 30px;
  color: #002f8b;      /* น้ำเงินเข้ม */
  font-weight: bold;
  white-space: nowrap;
}

/* เฉพาะมือถือให้โลโก้และชื่อเรียงกันดี */
@media (max-width: 768px) {
  .logo-container {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
  .company-name {
    font-size: 20px;
  }
}
/* จัดโลโก้ + ชื่อบริษัท อยู่ชิดกันซ้าย */
.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 10px; /* ระยะห่างเล็กน้อย */
  padding-left: 20px; /* ขยับห่างจากขอบหน้าเว็บ */
}

/* ขนาดโลโก้ */
.logo {
  height: 50px;
  width: auto;
}

/* ชื่อบริษัท */
.company-name {
  font-family: "TH SarabunPSK", sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #002f8b;
  white-space: nowrap; /* กันขึ้นบรรทัดใหม่ */
}

/* ให้ปุ่ม Hotline และ TH/EN อยู่ขวาเหมือนเดิม */
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 768px) {
  .logo-wrapper {
    flex-direction: column;
    padding-left: 0;
    text-align: center;
  }
  .company-name {
    font-size: 22px;
  }
}
.company-name {
  font-family: "TH SarabunPSK", sans-serif;
  font-size: 26px;
  font-weight: 900; /* หนาเพิ่มขึ้น */
  color: #002f8b;
  white-space: nowrap;
}
text-shadow: 0px 1px 2px rgba(0,0,0,0.1);
/* 🌤️ ปรับโหมดไว้อาลัยให้อ่านง่าย สวย สมดุล */
body {
  background-color: #f7f7f7 !important;
  color: #444 !important;
  font-family: "TH SarabunPSK", "Sarabun", sans-serif;
  font-size: 18px !important;
  line-height: 1.8 !important;
}

/* --- หัวข้อใหญ่ --- */
h1, h2, h3 {
  color: #333 !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  border-bottom: 2px solid #ddd !important;
  display: inline-block;
  padding-bottom: 6px;
}

/* --- กล่องเนื้อหาหลัก --- */
section, .content-box, .about-section, .joinus-section {
  background: #fcfcfc !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  padding: 40px !important;
  max-width: 1100px;
  margin: 40px auto !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* --- ข้อความเนื้อหา --- */
p {
  color: #444 !important;
  margin-bottom: 15px !important;
  font-size: 18px !important;
}

/* --- รายการ bullet --- */
ul, li {
  color: #444 !important;
  margin-left: 20px !important;
  margin-bottom: 10px !important;
}

/* --- จัดรูปกับข้อความให้สวยงาม --- */
.joinus-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

.joinus-section .text {
  flex: 1;
  min-width: 350px;
}

.joinus-section img {
  flex: 1;
  max-width: 400px;
  border-radius: 10px;
  filter: grayscale(100%) brightness(1.05) contrast(1.05);
  -webkit-filter: grayscale(100%) brightness(1.05) contrast(1.05);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* --- ลิงก์เมนูให้เห็นชัดขึ้น --- */
nav a {
  color: #444 !important;
  font-weight: 500;
  text-decoration: none;
}
nav a:hover {
  color: #666 !important;
  text-decoration: underline;
}

/* --- Footer --- */
footer {
  background-color: #f3f3f3 !important;
  border-top: 1px solid #ddd !important;
  color: #555 !important;
  text-align: center;
  padding: 20px;
  font-size: 16px;
}
/* 🌤️ โหมดไว้อาลัย สีเทาอ่อนสุภาพ (ทั้งเว็บไซต์) */

html, body {
  background-color: #f3f3f3 !important;
  color: #444 !important;
  filter: grayscale(100%) brightness(1.1) !important;
  -webkit-filter: grayscale(100%) brightness(1.1) !important;
  font-family: "TH SarabunPSK", "Sarabun", sans-serif;
  transition: all 0.3s ease;
}

/* ปรับพื้นหลัง header/footer ให้เทาอ่อน */
header, footer {
  background-color: #f3f3f3 !important;
  color: #444 !important;
  border-bottom: 1px solid #dcdcdc !important;
  border-top: 1px solid #dcdcdc !important;
}

/* โลโก้และรูปภาพให้เป็นเทาอ่อน ไม่ดำ */
img, picture, video {
  filter: grayscale(100%) brightness(1.15) contrast(1.05) !important;
  -webkit-filter: grayscale(100%) brightness(1.15) contrast(1.05) !important;
}

/* เมนูด้านบน */
nav, .menu, .navbar {
  background-color: #eaeaea !important;
}
nav a, .menu a {
  color: #555 !important;
  font-weight: 600 !important;
}
nav a:hover, .menu a:hover {
  color: #777 !important;
}

/* ปุ่ม Hotline */
.hotline, .header-hotline {
  background-color: #dcdcdc !important;
  color: #333 !important;
  border: 1px solid #bbb !important;
}
.hotline:hover {
  background-color: #cfcfcf !important;
}

/* กล่องเนื้อหาทั้งหมด */
section, article, .content-box, .main-section {
  background-color: #f7f7f7 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* ข้อความหัวข้อหลัก */
h1, h2, h3 {
  color: #444 !important;
  border-bottom: 2px solid #dcdcdc;
  padding-bottom: 8px;
  font-weight: 700;
}

/* ข้อความทั่วไป */
p, li, span {
  color: #555 !important;
}

/* ปุ่มทั่วไป */
button, .btn {
  background-color: #e2e2e2 !important;
  color: #444 !important;
  border: 1px solid #ccc !important;
  border-radius: 6px;
}
button:hover, .btn:hover {
  background-color: #d5d5d5 !important;
}

/* Footer */
footer {
  background-color: #f0f0f0 !important;
  color: #555 !important;
  border-top: 1px solid #dcdcdc !important;
  text-align: center;
}
/* 🕊️ เพิ่มเส้นขอบสีดำรอบกล่องเนื้อหา และโครงสร้างทั้งหมด */

body {
  background-color: #f6f6f6 !important;
  color: #444 !important;
  font-family: "TH SarabunPSK", "Sarabun", sans-serif;
}

/* เส้นขอบรอบกล่องหลักแต่ละ Section */
section, article, .content-box, .main-section, .about-section {
  border: 1.5px solid #000 !important;
  border-radius: 10px;
  padding: 40px !important;
  background-color: #fafafa !important;
  max-width: 1100px;
  margin: 40px auto !important;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

/* เส้นขอบรอบหัวข้อ */
h1, h2, h3 {
  color: #222 !important;
  border-bottom: 2px solid #000 !important;
  padding-bottom: 6px !important;
  margin-bottom: 20px !important;
  display: inline-block;
}

/* เพิ่มเส้นขอบด้านนอกทั้งหน้าเว็บ */
main, .container, body > div {
  border: 2px solid #000 !important;
  border-radius: 12px !important;
  margin: 30px auto !important;
  padding: 30px !important;
  max-width: 1200px !important;
  background-color: #fdfdfd !important;
}

/* เส้นขอบโลโก้หรือภาพในหัวเว็บ */
header, footer {
  border-top: 2px solid #000 !important;
  border-bottom: 2px solid #000 !important;
  background-color: #f3f3f3 !important;
}

/* ปรับข้อความให้อ่านง่าย */
p, li {
  color: #333 !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
}

/* เส้นขอบรอบรูปภาพ */
img {
  border: 1px solid #000 !important;
  border-radius: 6px !important;
  filter: grayscale(100%) brightness(1.1) contrast(1.05);
}

/* ปรับปุ่มให้เข้ากับโทนขาว-เทา-ดำ */
button, .btn {
  border: 1.5px solid #000 !important;
  background-color: #eaeaea !important;
  color: #222 !important;
  font-weight: 600 !important;
}
button:hover, .btn:hover {
  background-color: #dcdcdc !important;
}
/* 🕊️ เปลี่ยนสีตัวหนังสือทั้งหมดเป็นสีดำ พร้อมโทนไว้อาลัยสุภาพ */

body, html {
  background-color: #f5f5f5 !important;
  color: #000 !important;
  font-family: "TH SarabunPSK", "Sarabun", sans-serif;
}

/* ข้อความทั้งหมดให้เป็นสีดำ */
*, p, span, li, div, h1, h2, h3, h4, h5, h6, a {
  color: #000 !important;
}

/* กล่องเนื้อหา */
section, article, .content-box, .main-section, .about-section {
  border: 1.5px solid #000 !important;
  border-radius: 10px;
  padding: 40px !important;
  background-color: #fafafa !important;
  max-width: 1100px;
  margin: 40px auto !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

/* หัวข้อ */
h1, h2, h3 {
  font-weight: 700 !important;
  border-bottom: 2px solid #000 !important;
  padding-bottom: 6px !important;
  margin-bottom: 20px !important;
  display: inline-block;
}

/* เมนูและลิงก์ */
nav a, .menu a {
  color: #000 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
nav a:hover, .menu a:hover {
  color: #333 !important;
  text-decoration: underline !important;
}

/* โลโก้ / รูปภาพ */
img {
  filter: grayscale(100%) brightness(1.1) contrast(1.1) !important;
  border: 1px solid #000 !important;
  border-radius: 6px;
}

/* ปุ่ม */
button, .btn {
  background-color: #e0e0e0 !important;
  color: #000 !important;
  border: 1.5px solid #000 !important;
  border-radius: 6px;
  font-weight: 600 !important;
}
button:hover, .btn:hover {
  background-color: #d0d0d0 !important;
}

/* Footer */
footer {
  background-color: #f0f0f0 !important;
  color: #000 !important;
  border-top: 2px solid #000 !important;
  text-align: center;
  padding: 20px;
  font-size: 16px;
}