:root {
    /* Color Variables - Exact matches from Tailwind */
    --blue-900: #1e3a8a;
    --blue-800: #1e40af;
    --blue-100: #dbeafe;
    --green-600: #16a34a;
    --green-100: #dcfce7;
    --green-800: #166534;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --orange-100: #fed7aa;
    --orange-200: #fed7aa;
    --purple-100: #f3e8ff;
    --purple-600: #9333ea;
    --red-200: #fecaca;
    --red-50: #fef2f2;
    --red-800: #991b1b;
    --red-700: #b91c1c;
    --orange-50: #fff7ed;
    --orange-800: #9a3412;
    --orange-700: #c2410c;
    --yellow-200: #fef08a;
    --yellow-50: #fefce8;
    --yellow-800: #854d0e;
    --yellow-700: #a16207;
    --slate-50: #f8fafc;
    --slate-600: #475569;
    --slate-900: #0f172a;
    --blue-50: #eff6ff;
    --warning: #fbbf24;
}

/* Global Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* Background Gradient - Exact match */
.bg-gradient {
    background: linear-gradient(135deg, var(--slate-50) 0%, var(--blue-50) 100%);
    min-height: 100vh;
}

/* Navigation Styles - Exact match */
.bg-white-blur {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.border-bottom {
    border-bottom: 1px solid #e2e8f0;
}

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

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

.text-slate-600 {
    color: var(--slate-600);
}

.text-slate-900 {
    color: var(--slate-900);
}

.nav-link {
    color: var(--slate-600);
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--blue-900);
}

/* Button Styles - Exact match */
.btn-orange {
    background-color: var(--orange-500);
    border-color: var(--orange-500);
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-orange:hover {
    background-color: var(--orange-600);
    border-color: var(--orange-600);
    color: white;
}

/* Badge Styles - Exact match */
.bg-green-100 {
    background-color: var(--green-100);
}

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

/* Typography - Exact match */
.display-2 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.lh-sm {
    line-height: 1.25;
}

.lh-relaxed {
    line-height: 1.625;
}

/* Rounded corners - Exact match */
.rounded-4 {
    border-radius: 1rem;
}

/* Shadow - Exact match */
.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.shadow-hover {
    transition: box-shadow 0.3s ease;
}

.shadow-hover:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Problem Section Card Colors - Exact match */
.border-red-200 {
    border-color: var(--red-200);
}

.bg-red-50 {
    background-color: var(--red-50);
}

.text-red-800 {
    color: var(--red-800);
}

.text-red-700 {
    color: var(--red-700);
}

.border-orange-200 {
    border-color: var(--orange-200);
}

.bg-orange-50 {
    background-color: var(--orange-50);
}

.text-orange-800 {
    color: var(--orange-800);
}

.text-orange-700 {
    color: var(--orange-700);
}

.border-yellow-200 {
    border-color: var(--yellow-200);
}

.bg-yellow-50 {
    background-color: var(--yellow-50);
}

.text-yellow-800 {
    color: var(--yellow-800);
}

.text-yellow-700 {
    color: var(--yellow-700);
}

/* Features Section Background - Exact match */
.bg-slate-50 {
    background-color: var(--slate-50);
}

/* Feature Icon Circles - Exact match */
.icon-circle {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.bg-blue-100 {
    background-color: var(--blue-100);
}

.text-blue-600 {
    color: #2563eb;
}

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

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

.bg-orange-100 {
    background-color: var(--orange-100);
}

.text-orange-600 {
    color: var(--orange-600);
}

.bg-purple-100 {
    background-color: var(--purple-100);
}

.text-purple-600 {
    color: var(--purple-600);
}

/* Stars - Exact match */
.text-warning {
    color: var(--warning);
}

/* Pricing Section - Exact match */
.bg-orange-gradient {
    background: linear-gradient(135deg, var(--orange-500) 0%, var(--orange-600) 100%);
}

.text-orange-100 {
    color: #fed7aa;
}

.border-orange-200 {
    border-color: var(--orange-200);
}

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

/* CTA Section - Exact match */
.bg-blue-gradient {
    background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 100%);
}

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

/* Footer - Exact match */
.bg-dark {
    background-color: #1f2937;
}

/* Responsive Design */
@media (max-width: 768px) {
    .display-2 {
        font-size: 2.5rem;
    }
    
    .d-md-flex {
        display: none !important;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Additional utility classes for exact match */
.fs-2 {
    font-size: 2rem;
}

.fs-5 {
    font-size: 1.25rem;
}

.fw-bold {
    font-weight: 700;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 1rem;
}

.gap-4 {
    gap: 1.5rem;
}

.gap-5 {
    gap: 3rem;
}

.px-4 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-sm-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-lg-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mb-5 {
    margin-bottom: 3rem;
}

.me-2 {
    margin-right: 0.5rem;
}

.me-4 {
    margin-right: 1.5rem;
}

/* Container max-width to match React version */
@media (min-width: 1200px) {
    .px-sm-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .px-lg-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Hover effects */
.card:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}

.btn:hover {
    transform: translateY(-1px);
    transition: transform 0.3s ease;
}

/* Exact spacing match */
.container-fluid {
    max-width: 1280px;
    margin: 0 auto;
}

/* Check circle icons */
.bi-check-circle-fill {
    color: var(--green-600);
}

.footer-left{
    text-decoration: none;
    color: white;
}

.login-div,.forgot-div{

    border: solid thin #ccc;
    padding: 10px;
}