:root {
        --thuto-kgolo-blue: #f26005; /* Changed from blue to orange */
        --thuto-kgolo-dark-blue: #d4520a; /* Changed from dark blue to darker orange */
        --thuto-kgolo-green: #17A985;
        --bg-light-blue: #F7F9FB; /* Used for card backgrounds and sections */
        --text-dark: #1F1F1F;
        --text-gray: #6B7280;
        --section-bg-dark: #374151; /* Placeholder for dark sections */

        /* Adding new custom colors for the light header */
        --tk-logo: #f26005; /* A bright orange matching the screenshot */
        --tk-primary: #f26005; /* Used for hover/focus */
        --tk-button: #f26005; /* Changed from purple to orange */
        --tk-button-text: #ffffff;
        --tk-button-hover: #d4520a; /* Changed from purple to darker orange */
    }

    body {
        font-family: 'Inter', sans-serif;
        color: var(--text-dark);
        background-color: white;
        overflow-x: hidden; /* Prevent horizontal scroll on resize */
    }

    /* Utility Classes */
    .w-course-card { width: 100%; max-width: 300px; }

    /* Custom styles for the search bar */
    .search-input {
        width: 300px;
        padding: 0.625rem 1rem;
        border-top-left-radius: 9999px;
        border-bottom-left-radius: 9999px;
        border: 1px solid #D1D5DB;
        border-right: none;
    }
    .search-button {
        padding: 0.625rem 1rem;
        background-color: var(--thuto-kgolo-blue);
        border-top-right-radius: 9999px;
        border-bottom-right-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;
    }

    /* --- Custom styling for the NEW Nav Bar --- */
    .header-light {
        background-color: #ffffff; /* White background */
        color: #374151; /* Dark gray text */
        border-bottom: 1px solid #e5e7eb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .header-light.scrolled {
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .tk-logo {
        color: var(--tk-logo);
        font-size: 2.5rem; /* Larger logo */
        font-weight: 900;
    }

    .search-container {
        flex-grow: 1; /* Allows search bar to take most space */
        max-width: 600px;
    }

    /* Updated search input for new nav */
    .search-input.nav-search {
        width: 100%;
        padding: 10px 20px;
        padding-left: 45px; /* Space for the search icon */
        border: 2px solid #e5e7eb;
        border-radius: 9999px; /* Fully rounded */
        transition: all 0.2s;
        outline: none;
    }
    .search-input.nav-search:focus {
        border-color: var(--tk-logo);
        box-shadow: 0 0 0 1px var(--tk-logo);
    }
    .sign-up-button {
        background-color: var(--tk-logo);
        color: var(--tk-button-text);
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 600;
        transition: background-color 0.2s;
        text-decoration: none;
        display: inline-block;
    }
    .sign-up-button:hover {
        background-color: black;
    }
    /* Custom class for rotation based on state */
    .rotate-180 {
        transform: rotate(180deg);
        transition: transform 0.2s ease;
    }
    .rotate-90 {
        transform: rotate(90deg);
        transition: transform 0.2s ease;
    }

    /* Custom styling for the new dropdown */
    .dropdown-item {
        display: block;
        padding: 10px 16px;
        font-size: 1rem;
        color: #374151;
        transition: background-color 0.15s ease-in-out;
        cursor: pointer;
        text-decoration: none;
        border-radius: 6px;
        margin: 2px 0;
    }
    .dropdown-item:hover {
        background-color: #f3f4f6;
        color: var(--tk-logo);
    }
    .dropdown-item.highlighted {
        background-color: #fef3c7;
        color: #92400e;
    }
    .dropdown-btn {
        display: block;
        padding: 8px 12px;
        font-size: 0.875rem;
        color: #374151;
        background-color: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        transition: all 0.15s ease-in-out;
        cursor: pointer;
        text-decoration: none;
        font-weight: 500;
    }
    .dropdown-btn:hover {
        background-color: #f3f4f6;
        border-color: var(--tk-logo);
        color: var(--tk-logo);
    }

    /* Custom scrollbar for dropdowns */
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

    /* Hero Banner Styles */
    .hero-banner-plus {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 16px;
        padding: 32px;
        min-height: 280px;
        position: relative;
        overflow: hidden;
    }

    .hero-banner-plus::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
        pointer-events: none;
    }

    .hero-banner-business {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
        border-radius: 16px;
        padding: 32px;
        min-height: 280px;
        position: relative;
        overflow: hidden;
    }

    .business-overlay-gradient {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
        pointer-events: none;
    }

    .plus-save-bubble {
        flex-direction: column;
        align-items: center;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border-radius: 50%;
        width: 80px;
        height: 80px;
        justify-content: center;
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .business-tag {
        position: absolute;
        top: 16px;
        right: 16px;
        background: #ffffff;
        color: var(--thuto-kgolo-green);
        font-weight: bold;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.875rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .business-tag span {
        display: block;
        font-size: 0.75rem;
        font-weight: normal;
        color: #666;
        margin-top: 2px;
    }

    /* Course Cards */
    .course-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .course-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

    /* Pricing Cards */
    .pricing-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .pricing-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    }

    /* Testimonial Cards */
    .testimonial-card {
        transition: transform 0.2s ease;
    }

    .testimonial-card:hover {
        transform: translateY(-2px);
    }

    /* Animations */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fade-in {
        animation: fadeIn 0.6s ease-in-out;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-slide-down {
        animation: slideDown 0.3s ease-out;
    }

    /* Search focused state */
    .search-focused {
        transform: scale(1.02);
        transition: transform 0.2s ease;
    }

    /* Mobile Menu Animations */
    .mobile-menu-enter {
        animation: slideDown 0.3s ease-out;
    }

    /* Notification Styles */
    .notification-success {
        background-color: #10b981;
        color: white;
    }

    .notification-error {
        background-color: #ef4444;
        color: white;
    }

    .notification-info {
        background-color: #3b82f6;
        color: white;
    }

    .notification-warning {
        background-color: #f59e0b;
        color: #1f2937;
    }

    /* Responsive Design Enhancements */
    @media (max-width: 768px) {
        .hero-banner-plus,
        .hero-banner-business {
            padding: 24px;
            min-height: 200px;
        }

        .plus-save-bubble {
            width: 60px;
            height: 60px;
        }

        .plus-save-bubble span:last-child {
            font-size: 1.5rem;
        }

        .tk-logo {
            font-size: 1.25rem;
        }
    }

    @media (max-width: 640px) {
        .hero-banner-plus,
        .hero-banner-business {
            padding: 16px;
            min-height: 180px;
        }

        .business-tag {
            top: 8px;
            right: 8px;
            padding: 6px 12px;
            font-size: 0.75rem;
        }
    }

    /* Accessibility Enhancements */
    .focus-visible:focus {
        outline: 2px solid var(--tk-logo);
        outline-offset: 2px;
    }

    button:focus-visible,
    a:focus-visible,
    input:focus-visible {
        outline: 2px solid var(--tk-logo);
        outline-offset: 2px;
    }

    /* Smooth transitions for all interactive elements */
    a, button, input, .dropdown-item, .dropdown-btn {
        transition: all 0.2s ease;
    }

    /* Loading states */
    .loading {
        opacity: 0.6;
        pointer-events: none;
    }

    .loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
        border: 2px solid #f3f3f3;
        border-top: 2px solid var(--tk-logo);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Color utility classes for Tailwind compatibility */
    .bg-thuto-kgolo-blue {
        background-color: var(--thuto-kgolo-blue);
    }

    .bg-thuto-kgolo-dark-blue {
        background-color: var(--thuto-kgolo-dark-blue);
    }

    .bg-thuto-kgolo-green {
        background-color: var(--thuto-kgolo-green);
    }

    .text-thuto-kgolo-blue {
        color: var(--thuto-kgolo-blue);
    }

    .text-thuto-kgolo-green {
        color: var(--thuto-kgolo-green);
    }

    .border-thuto-kgolo-blue {
        border-color: var(--thuto-kgolo-blue);
    }

    .hover\:bg-thuto-kgolo-dark:hover {
        background-color: var(--thuto-kgolo-dark-blue);
    }

    .hover\:bg-thuto-kgolo-dark-blue:hover {
        background-color: var(--thuto-kgolo-dark-blue);
    }

    .hover\:text-tk-primary:hover {
        color: var(--tk-primary);
    }

    .hover\:border-tk-primary:hover {
        border-color: var(--tk-primary);
    }

    /* Print styles */
    @media print {
        .header-light,
        .mobile-menu,
        .explore-dropdown,
        .notification-success,
        .notification-error,
        .notification-info,
        .notification-warning {
            display: none;
        }
    }

    .rtl { direction: rtl; }
.rtl h1, .rtl h2, .rtl h3, .rtl p, .rtl .course-card, .rtl .testimonial-card { text-align: right; }
.rtl .filter-btn { direction: rtl; }