:root {
    --bs-primary: #C80000;
    --bs-primary-rgb: 200, 0, 0;
    --bs-primary-dark: #D40000;
    --bs-secondary: #001F4D;
    --bs-secondary-rgb: 0, 31, 77;
    --bs-secondary-dark: #002B60;
    --bs-success: #FFD400;
    --bs-success-rgb: 255, 212, 0;
    --bs-success-dark: #F7C600;
    --bs-info: #37A9E0;
    --bs-info-rgb: 55, 169, 224;
    --bs-info-dark: #2E9BD4;
}

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

    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--bs-primary-dark);
        border-color: var(--bs-primary-dark);
    }

.btn-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

    .btn-secondary:hover, .btn-secondary:focus {
        background-color: var(--bs-secondary-dark);
        border-color: var(--bs-secondary-dark);
    }

.btn-success {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: #000;
}

    .btn-success:hover, .btn-success:focus {
        background-color: var(--bs-success-dark);
        border-color: var(--bs-success-dark);
        color: #000;
    }

.btn-info {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
}

    .btn-info:hover, .btn-info:focus {
        background-color: var(--bs-info-dark);
        border-color: var(--bs-info-dark);
    }

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

.bg-success {
    background-color: var(--bs-success) !important;
}

.bg-info {
    background-color: var(--bs-info) !important;
}

.text-primary {
    color: var(--bs-primary) !important;
}

.text-secondary {
    color: var(--bs-secondary) !important;
}

.text-success {
    color: var(--bs-success) !important;
}

.text-info {
    color: var(--bs-info) !important;
}

.border-primary {
    border-color: var(--bs-primary) !important;
}

.border-secondary {
    border-color: var(--bs-secondary) !important;
}

.border-success {
    border-color: var(--bs-success) !important;
}

.border-info {
    border-color: var(--bs-info) !important;
}

.navbar {
    background-color: var(--bs-secondary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-weight: bold;
    color: white !important;
}

.nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: color 0.3s;
}

    .nav-link:hover, .nav-link.active {
        color: white !important;
    }

.user-dropdown img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
}

.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    margin-bottom: 20px;
}

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

.card-header {
    background-color: var(--bs-primary);
    color: white;
    border-radius: 10px 10px 0 0 !important;
}

.welcome-section {
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
    color: white;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
}

.stats-card {
    text-align: center;
    padding: 20px;
}

.stats-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--bs-primary);
}

.quick-action {
    text-align: center;
    padding: 15px;
    background-color: white;
    border-radius: 10px;
    transition: all 0.3s;
}

    .quick-action:hover {
        background-color: var(--bs-primary);
        color: white;
        cursor: pointer;
    }

    .quick-action i {
        font-size: 2rem;
        margin-bottom: 10px;
        color: var(--bs-primary);
    }

    .quick-action:hover i {
        color: white;
    }

.event-card {
    border-left: 4px solid var(--bs-info);
}

.announcement-card {
    border-left: 4px solid var(--bs-light);
}

.tab-content {
    padding: 20px;
    background-color: white;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-height: 500px;
}

.profile-picture {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--bs-primary);
    margin: 0 auto 20px;
    display: block;
}

.payment-option {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s;
}

    .payment-option:hover {
        border-color: var(--bs-primary);
        background-color: rgba(200, 0, 0, 0.05);
    }

.payment-btn {
    background-color: var(--bs-primary);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

    .payment-btn:hover {
        background-color: var(--bs-primary-dark);
    }

.footer {
    background-color: var(--bs-secondary);
    color: white;
    padding: 20px 0;
    margin-top: 40px;
}

/* Animation for welcome text */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.welcome-text {
    animation: fadeIn 1s ease-out;
}

.badge.bg-primary {
    background-color: var(--bs-primary) !important;
}

.badge.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

.badge.bg-success {
    background-color: var(--bs-success) !important;
    color: #000;
}

.badge.bg-info {
    background-color: var(--bs-info) !important;
}

.progress-bar.bg-primary {
    background-color: var(--bs-primary) !important;
}

.progress-bar.bg-success {
    background-color: var(--bs-success) !important;
}

.progress-bar.bg-info {
    background-color: var(--bs-info) !important;
}

.dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(200, 0, 0, 0.1);
}