/*black background colour*/


.bg-black-100 {
    background-color: #f3f4f6;
    color: #111827;
}

.bg-black-200 {
    background-color: #e5e7eb;
    color: #1f2937;
}

.bg-black-300 {
    background-color: #d1d5db;
    color: #1f2937;
}

.bg-black-400 {
    background-color: #9ca3af;
    color: #111827;
}

.bg-black-500 {
    background-color: #6b7280;
    color: #f9fafb;
}

.bg-black-600 {
    background-color: #4b5563;
    color: #f9fafb;
}

.bg-black-700 {
    background-color: #374151;
    color: #f9fafb;
}

.bg-black-800 {
    background-color: #1f2937;
    color: #f9fafb;
}

.bg-black-900 {
    background-color: #111827;
    color: #f9fafb;
}

/* gray background colour*/



.bg-gray-100 {
    background-color: #f3f4f6;
    color: #111827;
}

.bg-gray-200 {
    background-color: #e5e7eb;
    color: #1f2937;
}

.bg-gray-300 {
    background-color: #d1d5db;
    color: #1f2937;
}

.bg-gray-400 {
    background-color: #9ca3af;
    color: #111827;
}

.bg-gray-500 {
    background-color: #6b7280;
    color: #f9fafb;
}

.bg-gray-600 {
    background-color: #4b5563;
    color: #f9fafb;
}

.bg-gray-700 {
    background-color: #374151;
    color: #f9fafb;
}

.bg-gray-800 {
    background-color: #1f2937;
    color: #f9fafb;
}

.bg-gray-900 {
    background-color: #111827;
    color: #f9fafb;
}

/*green background colour*/

.bg-green-100 {
    background-color: #dcfce7;
    color: #166534;
}

.bg-green-200 {
    background-color: #bbf7d0;
    color: #15803d;
}

.bg-green-300 {
    background-color: #86efac;
    color: #15803d;
}

.bg-green-400 {
    background-color: #4ade80;
    color: #166534;
}

.bg-green-500 {
    background-color: #22c55e;
    color: #14532d;
}

.bg-green-600 {
    background-color: #16a34a;
    color: #f0fdf4;
}

.bg-green-700 {
    background-color: #15803d;
    color: #f0fdf4;
}

.bg-green-800 {
    background-color: #166534;
    color: #f0fdf4;
}

.bg-green-900 {
    background-color: #14532d;
    color: #f0fdf4;
}

/*blue background colour*/
.bg-green-50 {
    background-color: #f0fdf4;
    color: #14532d;
}

.bg-green-100 {
    background-color: #dcfce7;
    color: #166534;
}

.bg-green-200 {
    background-color: #bbf7d0;
    color: #15803d;
}

.bg-green-300 {
    background-color: #86efac;
    color: #15803d;
}

.bg-green-400 {
    background-color: #4ade80;
    color: #166534;
}

.bg-green-500 {
    background-color: #22c55e;
    color: #14532d;
}

.bg-green-600 {
    background-color: #16a34a;
    color: #f0fdf4;
}

.bg-green-700 {
    background-color: #15803d;
    color: #f0fdf4;
}

.bg-green-800 {
    background-color: #166534;
    color: #f0fdf4;
}

.bg-green-900 {
    background-color: #14532d;
    color: #f0fdf4;
}

/*blue background colour*/

.bg-blue-100 {
    background-color: #dbeafe;
    color: #1e40af;
}

.bg-blue-200 {
    background-color: #bfdbfe;
    color: #1d4ed8;
}

.bg-blue-300 {
    background-color: #93c5fd;
    color: #1d4ed8;
}

.bg-blue-400 {
    background-color: #60a5fa;
    color: #1e40af;
}

.bg-blue-500 {
    background-color: #3b82f6;
    color: #1e3a8a;
}

.bg-blue-600 {
    background-color: #2563eb;
    color: #eff6ff;
}

.bg-blue-700 {
    background-color: #1d4ed8;
    color: #eff6ff;
}

.bg-blue-800 {
    background-color: #1e40af;
    color: #eff6ff;
}

.bg-blue-900 {
    background-color: #1e3a8a;
    color: #eff6ff;
}



/*red background colour*/

.bg-red-100 {
    background-color: #fee2e2;
    color: #991b1b;
}

.bg-red-200 {
    background-color: #fecaca;
    color: #b91c1c;
}

.bg-red-300 {
    background-color: #fca5a5;
    color: #b91c1c;
}

.bg-red-400 {
    background-color: #f87171;
    color: #991b1b;
}

.bg-red-500 {
    background-color: #ef4444;
    color: #7f1d1d;
}

.bg-red-600 {
    background-color: #dc2626;
    color: #fef2f2;
}

.bg-red-700 {
    background-color: #b91c1c;
    color: #fef2f2;
}

.bg-red-800 {
    background-color: #991b1b;
    color: #fef2f2;
}

.bg-red-900 {
    background-color: #7f1d1d;
    color: #fef2f2;
}

/*orange background colour*/
.bg-orange-50 {
    background-color: #fff7ed;
    color: #7c2d12;
}

.bg-orange-100 {
    background-color: #ffedd5;
    color: #9a3412;
}

.bg-orange-200 {
    background-color: #fdba74;
    color: #9a3412;
}

.bg-orange-300 {
    background-color: #fb923c;
    color: #9a3412;
}

.bg-orange-400 {
    background-color: #f97316;
    color: #7c2d12;
}

.bg-orange-500 {
    background-color: #ea580c;
    color: #7c2d12;
}

.bg-orange-600 {
    background-color: #d946ef;
    color: #fdf2f2;
}

.bg-orange-700 {
    background-color: #9a3412;
    color: #fdf2f2;
}

.bg-orange-800 {
    background-color: #7c2d12;
    color: #fdf2f2;
}

.bg-orange-900 {
    background-color: #441f00;
    color: #fdf2f2;
}


/*pink background colour*/


.bg-pink-100 {
    background-color: #fce7f3;
    color: #9b1d20;
}

.bg-pink-200 {
    background-color: #fbcfe8;
    color: #9b1d20;
}

.bg-pink-300 {
    background-color: #f9a8d4;
    color: #9b1d20;
}

.bg-pink-400 {
    background-color: #f472b6;
    color: #9b1d20;
}

.bg-pink-500 {
    background-color: #ec4899;
    color: #9b1d20;
}

.bg-pink-600 {
    background-color: #db2777;
    color: #fdf2f2;
}

.bg-pink-700 {
    background-color: #be185d;
    color: #fdf2f2;
}

.bg-pink-800 {
    background-color: #9d174d;
    color: #fdf2f2;
}

.bg-pink-900 {
    background-color: #831843;
    color: #fdf2f2;
}


/*purple background colour*/


.bg-purple-100 {
    background-color: #ede9fe;
    color: #6b21a8;
}

.bg-purple-200 {
    background-color: #d8b4fe;
    color: #7c3aed;
}

.bg-purple-300 {
    background-color: #c084fc;
    color: #7c3aed;
}

.bg-purple-400 {
    background-color: #a855f7;
    color: #6b21a8;
}

.bg-purple-500 {
    background-color: #8b5cf6;
    color: #6b21a8;
}

.bg-purple-600 {
    background-color: #7c3aed;
    color: #f5f3ff;
}

.bg-purple-700 {
    background-color: #6d28d9;
    color: #f5f3ff;
}

.bg-purple-800 {
    background-color: #5b21b6;
    color: #f5f3ff;
}

.bg-purple-900 {
    background-color: #4c1d95;
    color: #f5f3ff;
}

/*teal background colour*/


.bg-teal-100 {
    background-color: #ccfbf1;
    color: #0d4f47;
}

.bg-teal-200 {
    background-color: #99f6e4;
    color: #0d4f47;
}

.bg-teal-300 {
    background-color: #5eead4;
    color: #0d4f47;
}

.bg-teal-400 {
    background-color: #2dd4bf;
    color: #134e4a;
}

.bg-teal-500 {
    background-color: #14b8a6;
    color: #134e4a;
}

.bg-teal-600 {
    background-color: #0d9488;
    color: #f0fdfa;
}

.bg-teal-700 {
    background-color: #0f766e;
    color: #f0fdfa;
}

.bg-teal-800 {
    background-color: #115e59;
    color: #f0fdfa;
}

.bg-teal-900 {
    background-color: #134e4a;
    color: #f0fdfa;
}