/* Original Roboto Flex font URL returned 404; preserve the original sans-serif fallback. */

.roboto-flex-section {
  font-family: "Roboto Flex", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: var(--font-size, 38px); /* ใช้ค่าเริ่มต้นเป็น 38px */
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
}
.font-size-82 { --font-size: 82px; }
.font-size-80 { --font-size: 80px; }
.font-size-40 { --font-size: 40px; }
.font-size-38 { --font-size: 38px; }
.font-size-36 { --font-size: 36px; }
.font-size-28 { --font-size: 30px; }
.font-size-28 { --font-size: 29px; }
.font-size-28-5 { --font-size: 29px; }
.font-size-28 { --font-size: 28px; }
.font-size-24 { --font-size: 24px; }
.font-size-22 { --font-size: 22px; }
.font-size-20 { --font-size: 20px; }
.font-size-16 { --font-size: 16px; }

/* Media Queries สำหรับ Responsive */
@media (max-width: 1200px) {
    .roboto-flex-section {
      --font-size: 34px; /* ฟอนต์เล็กลงสำหรับหน้าจอขนาดใหญ่ */
    }
  }
  
  @media (max-width: 992px) {
    .roboto-flex-section {
      --font-size: 30px; /* ฟอนต์เล็กลงสำหรับหน้าจอขนาดกลาง */
    }
  }
  
  @media (max-width: 768px) {
    .roboto-flex-section {
      --font-size: 26px; /* ฟอนต์เล็กลงสำหรับหน้าจอขนาดแท็บเล็ต */
    }
  }
  
  @media (max-width: 576px) {
    .roboto-flex-section {
      --font-size: 22px; /* ฟอนต์เล็กลงสำหรับหน้าจอขนาดมือถือ */
    }
  }