/* custom.css */

:root {
    --primary-color: #6a11cb;
    --secondary-color: #2575fc;
    --background-color: #f4f7f6;
    --font-color: #333;
    --card-bg-color: #ffffff;
    --shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    --transition: all 0.3s ease;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--background-color);
    color: var(--font-color);
}

.navbar {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    box-shadow: var(--shadow);
}

.jumbotron {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 15px;
}

.card {
    border: none;
    border-radius: 15px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card-header {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.btn-primary {
    background-color: var(--primary-color);
    border: none;
    transition: var(--transition);
}

.btn-primary:hover {
    background-color: var(--secondary-color);
}

.modal-content {
    border-radius: 15px;
}