:root {
  --main-color: #00a0e9;
  --sub-color:#00a0e9;
}

/* --- Margin All --- */
.m-0   { margin: 0; }
.m-1   { margin: 0.25rem; }
.m-2   { margin: 0.5rem; }
.m-4   { margin: 1rem; }
.m-6   { margin: 1.5rem; }
.m-8   { margin: 2rem; }

/* --- Margin Top --- */
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }

/* --- Margin Right --- */
.mr-0  { margin-right: 0; }
.mr-1  { margin-right: 0.25rem; }
.mr-2  { margin-right: 0.5rem; }
.mr-4  { margin-right: 1rem; }
.mr-6  { margin-right: 1.5rem; }
.mr-8  { margin-right: 2rem; }


/* --- Margin Bottom --- */
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10  { margin-bottom: 4rem; }

/* --- Margin Left --- */
.ml-0  { margin-left: 0; }
.ml-1  { margin-left: 0.25rem; }
.ml-2  { margin-left: 0.5rem; }
.ml-4  { margin-left: 1rem; }
.ml-6  { margin-left: 1.5rem; }
.ml-8  { margin-left: 2rem; }

/* --- Margin X (Left + Right) --- */
.mx-0  { margin-left: 0; margin-right: 0; }
.mx-1  { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2  { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-4  { margin-left: 1rem; margin-right: 1rem; }
.mx-6  { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-8  { margin-left: 2rem; margin-right: 2rem; }

/* --- Margin Y (Top + Bottom) --- */
.my-0  { margin-top: 0; margin-bottom: 0; }
.my-1  { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2  { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-4  { margin-top: 1rem; margin-bottom: 1rem; }
.my-6  { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-8  { margin-top: 2rem; margin-bottom: 2rem; }

/* ================================
   Padding Utilities
   ================================ */

/* --- Padding All --- */
.p-0   { padding: 0; }
.p-1   { padding: 0.25rem; }
.p-2   { padding: 0.5rem; }
.p-4   { padding: 1rem; }
.p-6   { padding: 1.5rem; }
.p-8   { padding: 2rem; }

/* --- Padding Top --- */
.pt-0  { padding-top: 0; }
.pt-1  { padding-top: 0.25rem; }
.pt-2  { padding-top: 0.5rem; }
.pt-4  { padding-top: 1rem; }
.pt-6  { padding-top: 1.5rem; }
.pt-8  { padding-top: 2rem; }

/* --- Padding Right --- */
.pr-0  { padding-right: 0; }
.pr-1  { padding-right: 0.25rem; }
.pr-2  { padding-right: 0.5rem; }
.pr-4  { padding-right: 1rem; }
.pr-6  { padding-right: 1.5rem; }
.pr-8  { padding-right: 2rem; }

/* --- Padding Bottom --- */
.pb-0  { padding-bottom: 0; }
.pb-1  { padding-bottom: 0.25rem; }
.pb-2  { padding-bottom: 0.5rem; }
.pb-4  { padding-bottom: 1rem; }
.pb-6  { padding-bottom: 1.5rem; }
.pb-8  { padding-bottom: 2rem; }

/* --- Padding Left --- */
.pl-0  { padding-left: 0; }
.pl-1  { padding-left: 0.25rem; }
.pl-2  { padding-left: 0.5rem; }
.pl-4  { padding-left: 1rem; }
.pl-6  { padding-left: 1.5rem; }
.pl-8  { padding-left: 2rem; }

/* --- Padding X (Left + Right) --- */
.px-0  { padding-left: 0; padding-right: 0; }
.px-1  { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2  { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4  { padding-left: 1rem; padding-right: 1rem; }
.px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8  { padding-left: 2rem; padding-right: 2rem; }

/* --- Padding Y (Top + Bottom) --- */
.py-0  { padding-top: 0; padding-bottom: 0; }
.py-1  { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2  { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4  { padding-top: 1rem; padding-bottom: 1rem; }
.py-6  { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8  { padding-top: 2rem; padding-bottom: 2rem; }


/* ========== Text Alignment & Font ========== */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.font-bold   { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-light  { font-weight: 300; }

.text-xs { font-size: 0.75rem; }     /* 12px */
.text-sm { font-size: 0.875rem; }    /* 14px */
.text-base { font-size: 1rem; }      /* 16px */
.text-lg { font-size: 1.125rem; }    /* 18px */
.text-xl { font-size: 1.25rem; }     /* 20px */
.text-2xl { font-size: 1.5rem; }     /* 24px */
.text-3xl { font-size: 1.875rem; }   /* 30px */
.text-4xl { font-size: 2.25rem; }    /* 36px */
.text-5xl { font-size: 3rem; }       /* 48px */

/* ========== Colors ========== */
.text-white { color: #fff; }
.text-black { color: #000; }
.text-gray { color: #6b7280; }

.bg-white { background-color: #fff; }
.bg-black { background-color: #000; }
.bg-gray  { background-color: #f3f4f6; }
.bg-blue  { background-color: #3b82f6; }

/* ========== Flexbox / Layout ========== */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }

/* ========== Border & Radius ========== */
.rounded { border-radius: 1rem; }
.rounded-md { border-radius: 1.5rem; }
.rounded-lg { border-radius: 2rem; }
.rounded-full { border-radius: 9999px; }

.border { border: 1px solid #e5e7eb; }
.border-0 { border: 0; }

/* ========== Shadow ========== */
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.shadow    { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.1); }

/* ========== Width / Height ========== */

.d-none {display: none;}


.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-33 { width: 33.3333%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }

.h-50 { height: 50px; }
.h-100 { height: 100px; }
.h-200 { height: 200px; }
.h-300 { height: 300px; }

.h-100 { height: 100%; }
.h-50 { height: 50%; }

.h-auto { height: auto; }