:root {
            --primary-button-bg: #2263fc;
            --primary-button-bg-rgb: 34, 99, 252;
            --primary-button-hover-bg: #f8c621;
            --primary-button-hover-bg-rgb: 248, 198, 33;
            --icon-color-primary: #5a82d3;
            --icon-color-primary-rgb: 90, 130, 211;
            --primary-gradient-from: #2263fc;
            --primary-gradient-from-rgb: 34, 99, 252;
            --primary-gradient-to: #335fc7;
            --primary-gradient-to-rgb: 51, 95, 199;
            --primary-gradient-hover-from: #335fc7;
            --primary-gradient-hover-to: #2263fc;
            --secondary-gradient-from: #f8c621;
            --secondary-gradient-from-rgb: 248, 198, 33;
            --secondary-gradient-to: #fac822;
            --secondary-gradient-to-rgb: 250, 200, 34;
            --secondary-gradient-hover-from: #c49f23;
            --secondary-gradient-hover-to: #c49f23;
            --overlay-bg-from: #808080;
            --overlay-bg-to: #808080;
            --page-title-bg-from: #d2c151;
            --page-title-bg-to: #d2c151;
        }
        
        /* Override Tailwind blue button classes with custom colors */
        .btn-primary,
        .bg-blue-600,
        .bg-blue-500,
        .bg-blue-700,
        .bg-blue-800 {
            background-color: var(--primary-button-bg) !important;
        }
        
        /* Hover states */
        .btn-primary:hover,
        .hover\:bg-blue-700:hover,
        .hover\:bg-blue-600:hover,
        .hover\:bg-blue-800:hover {
            background-color: var(--primary-button-hover-bg) !important;
        }
        
        .primary-text-color {
            color: var(--primary-button-bg) !important;
        }

        .secondary-text-color {
            color: var(--secondary-gradient-from) !important;
        }
        .hover\:secondary-text-color:hover {
            color: var(--secondary-gradient-from) !important;
        }
        /* Primary Gradient buttons - Blue to Indigo combinations */
        .bg-gradient-to-r.from-blue-600.to-indigo-700,
        .bg-gradient-to-r.from-blue-600:not(.to-teal-500),
        .bg-gradient-to-br.from-blue-600,
        .bg-gradient-to-l.from-blue-600,
        .bg-gradient-to-t.from-blue-600,
        .bg-gradient-to-b.from-blue-600 {
            background: linear-gradient(to right, var(--primary-gradient-from), var(--primary-gradient-to)) !important;
        }
        
        /* Primary Gradient hover states */
        .hover\:from-blue-700:hover.hover\:to-indigo-800:hover,
        .bg-gradient-to-r.from-blue-600.to-indigo-700:hover,
        .bg-gradient-to-r.from-blue-600:not(.to-teal-500):hover {
            background: linear-gradient(to right, var(--primary-gradient-hover-from), var(--primary-gradient-hover-to)) !important;
        }
        
        /* Secondary Gradient buttons - Blue to Teal combinations */
        .bg-gradient-to-r.from-blue-600.to-teal-500,
        .bg-gradient-to-br.from-blue-600.to-teal-500,
        .bg-gradient-to-l.from-blue-600.to-teal-500,
        .bg-gradient-to-t.from-blue-600.to-teal-500,
        .bg-gradient-to-b.from-blue-600.to-teal-500 {
            background: linear-gradient(to right, var(--secondary-gradient-from), var(--secondary-gradient-to)) !important;
        }
        
        /* Secondary Gradient hover states */
        .hover\:from-blue-700:hover.hover\:to-teal-600:hover,
        .bg-gradient-to-r.from-blue-600.to-teal-500:hover {
            background: linear-gradient(to right, var(--secondary-gradient-hover-from), var(--secondary-gradient-hover-to)) !important;
        }
          /* Overlay gradients for hero sections and backgrounds */
        .bg-gradient-to-t.from-blue-900\/90.to-blue-600\/30,
        .bg-gradient-to-t.from-blue-900.to-blue-600 {
            background: linear-gradient(to top, var(--primary-gradient-from), var(--primary-gradient-to)) !important;
        }
        
        .bg-gradient-to-r.from-blue-900\/70.to-teal-600\/70 {
            background: linear-gradient(to right, var(--secondary-gradient-from), var(--secondary-gradient-to)) !important;
        }
          /* Image overlays and page title backgrounds */
        .image-overlay {
            background: linear-gradient(to right, var(--overlay-bg-from), var(--overlay-bg-to)) !important;
            opacity: 1 !important;
        }
        
        .page-title-bg {
            background: linear-gradient(to right, var(--page-title-bg-from), var(--page-title-bg-to)) !important;
        }
          /* Testimonials and component gradients */
        .bg-gradient-to-r.from-blue-50.to-indigo-50,
        .bg-gradient-to-br.from-white.to-blue-50 {
            background: linear-gradient(to right, rgba(var(--primary-gradient-from-rgb), 0.1), rgba(var(--primary-gradient-to-rgb), 0.1)) !important;
        }
        
        /* Pagination active state gradient */
        .bg-gradient-to-r.from-blue-600.to-indigo-700 {
            background: linear-gradient(to right, var(--primary-gradient-from), var(--primary-gradient-to)) !important;
        }
        
        /* Card hover effects with transparency */
        .card-hover:hover {
            box-shadow: 0 10px 15px -3px rgba(var(--primary-button-bg-rgb), 0.3), 0 4px 6px -2px rgba(var(--primary-button-bg-rgb), 0.1) !important;
            border-color: rgba(var(--primary-button-bg-rgb), 0.5) !important;
        }
        
        /* Focus ring colors */
        .focus\:ring-blue-500:focus {
            --tw-ring-color: var(--primary-button-bg) !important;
        }
        
        .focus\:border-blue-500:focus {
            --tw-border-opacity: 1 !important;
            border-color: var(--primary-button-bg) !important;
        }
          /* Text colors */
        .text-blue-600,
        .text-blue-500 {
            color: var(--primary-button-bg) !important;
        }
        
        .hover\:text-blue-700:hover {
            color: var(--primary-button-hover-bg) !important;
        }
        
        /* Icon colors - specific classes for icons */
        .text-blue-600.fa,
        .text-blue-600.fas,
        .text-blue-600.far,
        .text-blue-600.fal,
        .text-blue-600.fab,
        svg.text-blue-600,
        i.text-blue-600,
        .icon-primary {
            color: var(--icon-color-primary) !important;
        }
        
        /* Border colors */
        .border-blue-600 {
            border-color: var(--primary-button-bg) !important;
        }
        
        /* Play button and other circular buttons */
        .bg-blue-600.rounded-full {
            background-color: var(--primary-button-bg) !important;
        }