* {
    font-family: 'Inter', sans-serif;
}

.gradient-bg {
    background: linear-gradient(135deg, #4E88E6 0%, #244E99 50%, #712D91 100%);
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.step-indicator {
    transition: all 0.3s ease;
}

.step-active {
    background: #4E88E6;
    color: white;
}

.step-completed {
    background: #10B981;
    color: white;
}

.step-inactive {
    background: #E5E7EB;
    color: #6B7280;
}

.journey-card {
    background: linear-gradient(135deg, rgba(78, 136, 230, 0.1) 0%, rgba(113, 45, 145, 0.1) 100%);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.journey-card:hover {
    border-color: #4E88E6;
    transform: scale(1.02);
}

.journey-card.selected {
    border-color: #4E88E6;
    background: linear-gradient(135deg, rgba(78, 136, 230, 0.2) 0%, rgba(113, 45, 145, 0.2) 100%);
}

.pulse-animation {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

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

.btn-primary {
    background: linear-gradient(135deg, #4E88E6 0%, #712D91 100%);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(78, 136, 230, 0.3);
}

.assessment-option {
    transition: all 0.3s ease;
    cursor: pointer;
}

.assessment-option:hover {
    background: rgba(78, 136, 230, 0.1);
    border-color: #4E88E6;
}

.assessment-option.selected {
    background: rgba(78, 136, 230, 0.15);
    border-color: #4E88E6;
    border-width: 2px;
}

.section-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, #4E88E6, #712D91, transparent);
}

.sec-pad {
  padding: 6.5rem 0 0 0 !important;
}