/* ===================================
    Gradient Colors CSS
    Colors: 3B55A5, 4893CF, 68BD46, 5FBB46, A5CE3B
====================================== */

/* กำหนดตัวแปรสีใหม่ */
:root {
  --color-1: #3B55A5;
  --color-2: #4893CF;
  --color-3: #68BD46;
  --color-4: #5FBB46;
  --color-5: #A5CE3B;
}

/* สร้าง gradient สำหรับใช้กับข้อความ */
.text-gradient-custom {
  background: linear-gradient(to right, var(--color-1), var(--color-2), var(--color-3), var(--color-4), var(--color-5));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* สร้าง gradient สำหรับใช้กับพื้นหลัง */
.bg-gradient-custom {
  background: linear-gradient(to right, var(--color-1), var(--color-2), var(--color-3), var(--color-4), var(--color-5));
}

/* สร้าง gradient สำหรับใช้กับเส้นขอบ */
.border-gradient-custom {
  border-image: linear-gradient(to right, var(--color-1), var(--color-2), var(--color-3), var(--color-4), var(--color-5)) 1;
}

/* สร้างคลาสสำหรับแต่ละสี */
.bg-custom-1 { background-color: var(--color-1); }
.bg-custom-2 { background-color: var(--color-2); }
.bg-custom-3 { background-color: var(--color-3); }
.bg-custom-4 { background-color: var(--color-4); }
.bg-custom-5 { background-color: var(--color-5); }

.text-custom-1 { color: var(--color-1); }
.text-custom-2 { color: var(--color-2); }
.text-custom-3 { color: var(--color-3); }
.text-custom-4 { color: var(--color-4); }
.text-custom-5 { color: var(--color-5); }

/* สร้าง gradient สำหรับเส้นที่ใช้ใน services.php */
.custom-gradient-line {
  background: linear-gradient(to right, var(--color-1), var(--color-2), var(--color-3), var(--color-4), var(--color-5));
  height: 1px;
  display: inline-block;
  width: 25px;
  margin-right: 5px;
  vertical-align: middle;
}