.bg-teal-50   { background-color: #e0f7f4; }
.bg-teal-100  { background-color: #b3ece3; }
.bg-teal-200  { background-color: #80e0d1; }
.bg-teal-300  { background-color: #4dd4bf; }
.bg-teal-400  { background-color: #26c9b1; }
.bg-teal-500  { background-color: #00bfa3; }
.bg-teal-600 { background-color: #16a9a8; } 
.bg-teal-700  { background-color: #118b89; }
.bg-teal-800  { background-color: #0e7469; }
.bg-teal-900  { background-color: #07534f; }
.bg-sky-50   { background-color: #e7fcff; }
.bg-sky-100  { background-color: #e0f2fe; }
.bg-sky-200  { background-color: #bae6fd; }
.bg-sky-300  { background-color: #7dd3fc; }
.bg-sky-400  { background-color: #38bdf8; }
.bg-sky-500  { background-color: #0ea5e9; }
.bg-sky-600  { background-color: #0284c7; }
.bg-sky-700  { background-color: #0369a1; }
.bg-sky-800  { background-color: #075985; }
.bg-sky-900  { background-color: #0c4a6e; }
.text-teal-50   { color: #f0fdfa; }
.text-teal-100  { color: #ccfbf1; }
.text-teal-200  { color: #99f6e4; }
.text-teal-300  { color: #5eead4; }
.text-teal-400  { color: #2dd4bf; }
.text-teal-500  { color: #14b8a6; } /* your class */
.text-teal-600  { color: #0d9488; }
.text-teal-700  { color: #0f766e; }
.text-teal-800  { color: #115e59; }
.text-teal-900  { color: #134e4a; }
/* Amber Background Colors */
.bg-amber-50  { --tw-bg-opacity: 1; background-color: rgb(255 251 235 / var(--tw-bg-opacity)); }
.bg-amber-100 { --tw-bg-opacity: 1; background-color: rgb(254 243 199 / var(--tw-bg-opacity)); }
.bg-amber-200 { --tw-bg-opacity: 1; background-color: rgb(253 230 138 / var(--tw-bg-opacity)); }
.bg-amber-300 { --tw-bg-opacity: 1; background-color: rgb(252 211 77 / var(--tw-bg-opacity)); }
.bg-amber-400 { --tw-bg-opacity: 1; background-color: rgb(251 191 36 / var(--tw-bg-opacity)); }
.bg-amber-500 { --tw-bg-opacity: 1; background-color: rgb(245 158 11 / var(--tw-bg-opacity)); }
.bg-amber-600 { --tw-bg-opacity: 1; background-color: rgb(217 119 6 / var(--tw-bg-opacity)); }
.bg-amber-700 { --tw-bg-opacity: 1; background-color: rgb(180 83 9 / var(--tw-bg-opacity)); }
.bg-amber-800 { --tw-bg-opacity: 1; background-color: rgb(146 64 14 / var(--tw-bg-opacity)); }
.bg-amber-900 { --tw-bg-opacity: 1; background-color: rgb(120 53 15 / var(--tw-bg-opacity)); }

/* Optional: Amber Text Colors */
.text-amber-50  { color: rgb(255 251 235 / var(--tw-text-opacity)); }
.text-amber-100 { color: rgb(254 243 199 / var(--tw-text-opacity)); }
.text-amber-200 { color: rgb(253 230 138 / var(--tw-text-opacity)); }
.text-amber-300 { color: rgb(252 211 77 / var(--tw-text-opacity)); }
.text-amber-400 { color: rgb(251 191 36 / var(--tw-text-opacity)); }
.text-amber-500 { color: rgb(245 158 11 / var(--tw-text-opacity)); }
.text-amber-600 { color: rgb(217 119 6 / var(--tw-text-opacity)); }
.text-amber-700 { color: rgb(180 83 9 / var(--tw-text-opacity)); }
.text-amber-800 { color: rgb(146 64 14 / var(--tw-text-opacity)); }
.text-amber-900 { color: rgb(120 53 15 / var(--tw-text-opacity)); }

/* Optional: Amber Border Colors */
.border-amber-50  { border-color: rgb(255 251 235 / var(--tw-border-opacity)); }
.border-amber-100 { border-color: rgb(254 243 199 / var(--tw-border-opacity)); }
.border-amber-200 { border-color: rgb(253 230 138 / var(--tw-border-opacity)); }
.border-amber-300 { border-color: rgb(252 211 77 / var(--tw-border-opacity)); }
.border-amber-400 { border-color: rgb(251 191 36 / var(--tw-border-opacity)); }
.border-amber-500 { border-color: rgb(245 158 11 / var(--tw-border-opacity)); }
.border-amber-600 { border-color: rgb(217 119 6 / var(--tw-border-opacity)); }
.border-amber-700 { border-color: rgb(180 83 9 / var(--tw-border-opacity)); }
.border-amber-800 { border-color: rgb(146 64 14 / var(--tw-border-opacity)); }
.border-amber-900 { border-color: rgb(120 53 15 / var(--tw-border-opacity)); }


::-webkit-scrollbar {
  width: 10px;  /* scrollbar width */
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* track background */
}

::-webkit-scrollbar-thumb {
  background-color: #1a9b94; /* scrollbar color */
  border-radius: 10px;       /* rounded corners */
  border: 2px solid #f1f1f1; /* optional: space around */
}


.border-teal-600{
  border-color: #0d9488;
}