/* Custom TailwindCSS fixes for missing classes */

/* Primary color variations */
.bg-primary-dark {
    background-color: #1a1a7a;
}

.text-primary-dark {
    color: #1a1a7a;
}

.hover\:bg-primary-dark:hover {
    background-color: #1a1a7a;
}

.hover\:text-primary-dark:hover {
    color: #1a1a7a;
}

/* Additional missing classes that might be needed */
.bg-primary {
    background-color: #14146B;
}

.text-primary {
    color: #14146B;
}

/* Ensure gradient classes work properly */
.from-primary {
    --tw-gradient-from: #14146B;
    --tw-gradient-to: rgba(20, 20, 107, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-primary-dark {
    --tw-gradient-to: #1a1a7a;
}

.from-gray-50 {
    --tw-gradient-from: #f9fafb;
    --tw-gradient-to: rgba(249, 250, 251, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-white {
    --tw-gradient-to: #ffffff;
}

/* Category-specific gradient classes */
.from-\[\#7F5DFF\] {
    --tw-gradient-from: #7F5DFF;
    --tw-gradient-to: rgba(127, 93, 255, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-\[\#5C3BFF\] {
    --tw-gradient-to: #5C3BFF;
}

.from-\[\#06B6D4\] {
    --tw-gradient-from: #06B6D4;
    --tw-gradient-to: rgba(6, 182, 212, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-\[\#0891B2\] {
    --tw-gradient-to: #0891B2;
}

.from-\[\#10B981\] {
    --tw-gradient-from: #10B981;
    --tw-gradient-to: rgba(16, 185, 129, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-\[\#059669\] {
    --tw-gradient-to: #059669;
}

.from-\[\#EF4444\] {
    --tw-gradient-from: #EF4444;
    --tw-gradient-to: rgba(239, 68, 68, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-\[\#BE123C\] {
    --tw-gradient-to: #BE123C;
}

.from-\[\#F59E0B\] {
    --tw-gradient-from: #F59E0B;
    --tw-gradient-to: rgba(245, 158, 11, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-\[\#D97706\] {
    --tw-gradient-to: #D97706;
}

.from-\[\#14B8A6\] {
    --tw-gradient-from: #14B8A6;
    --tw-gradient-to: rgba(20, 184, 166, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Additional utility classes that might be missing */
.pt-24 {
    padding-top: 6rem;
}

.pt-36 {
    padding-top: 9rem;
}

/* Ensure all the classes used in the templates are available */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* Blue color variations for CTA sections */
.text-blue-100 {
    color: #dbeafe;
}

.text-blue-200 {
    color: #bfdbfe;
}

/* Badge color classes for categories */
.bg-purple-100 {
    background-color: #faf5ff;
}

.text-purple-800 {
    color: #6b21a8;
}

.bg-cyan-100 {
    background-color: #ecfeff;
}

.text-cyan-800 {
    color: #155e75;
}

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

.text-green-800 {
    color: #166534;
}

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

.text-red-800 {
    color: #991b1b;
}

.bg-orange-100 {
    background-color: #fff7ed;
}

.text-orange-800 {
    color: #9a3412;
}

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

.text-blue-800 {
    color: #1e40af;
}

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

.text-gray-800 {
    color: #1f2937;
}

/* Opacity modifier classes */
.bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2);
}

.bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1);
}

.bg-white\/80 {
    background-color: rgba(255, 255, 255, 0.8);
}

/* Hover state classes */
.hover\:text-blue-100:hover {
    color: #dbeafe;
}

.hover\:text-blue-700:hover {
    color: #1d4ed8;
}

.hover\:text-gray-800:hover {
    color: #1f2937;
}

/* Text decoration classes */
.no-underline {
    text-decoration-line: none;
}

/* Additional hover states */
.hover\:text-white\/90:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* Add any other missing classes here as needed */