:root {
    --bs-primary: #7100b7;
    --bs-primary-light: #931adf;
    /* Replace with your custom color */
    --bs-secondary: #2ecc71;
    --bs-success: #28a745;
    --bs-danger: #e74c3c;
    --bs-warning: #f1c40f;
    --bs-info: #17a2b8;
    --bs-light: #f8f8f8;
    --bs-dark: #343a40;
}

/* Example */
body {
    /* background-color: var(--bs-primary); */
    color: var(--bs-primary);
    background-image: var(--bs-gradient);
}

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

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

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

/* Bootstrap custom styles */
/* Change the background color of the dropdown menu */
.dropdown-menu {
    background-color: var(--bs-light);
    /* Light background */
}

/* Change the text color of dropdown items */
.dropdown-item {
    color: var(--bs-primary);
    /* Primary color */
}

/* Change the text color of dropdown items on hover */
.dropdown-item:hover {
    background-color: var(--bs-primary);
    /* Primary color background on hover */
    color: #ffffff;
    /* White text on hover */
}

/* Custom styles to stack the navigation into rows on smaller screens */
@media (max-width: 992px) {
    .navbar-nav {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .navbar-nav .nav-item {
        flex: 1 1 100%;
        /* Each item takes 50% of the width */
    }
}

@media (max-width: 576px) {
    .navbar-nav .nav-item {
        flex: 1 1 100%;
        /* Each item takes full width */
    }
}

/* Background color for list items */
.list-group-item {
    background-color: #f0f0f0;
    color: #7100b7;
    /* Custom text color */
    border: none;
    /* Remove border if desired */
}

/* Hover effect with subtle warning color */
.list-group-item:hover {
    background-color: #ffc107;
    color: #7100b7;
    /* Ensure text remains the same color */
}


/* background-color: #ffc107; */
/* Bootstrap warning color */

/* background-color: #ffedb1; */
/* Subtle warning shade */

/* Fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
        /* Optional: a slight upward movement */
    }

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

.fade-in {
    opacity: 0;
    /* Start invisible */
    animation: fadeIn 1.5s ease forwards;
    /* Customize duration and easing */
}

.responsive-email {
    word-wrap: break-word;
    /* Allows breaking long words or links */
    font-size: 1.2rem;
    /* Adjust font size for better fit */
}

@media (max-width: 576px) {

    /* For small screens (bootstrap sm breakpoint or smaller) */
    .responsive-email {
        font-size: 1rem;
        /* Smaller font size for narrow screens */
    }
}