/* Style the h2 element */
h2.display-5 {
    font-weight: bold;
    font-size: 40px; /* You can adjust the font size to your preference */
    color: #333; /* Set the text color */
    text-transform: uppercase; /* Make the text uppercase for added emphasis */
    margin-bottom: 10px; /* Add some space below the h1 */
}
/* Apply the pop-up animation to specified h2 elements */
h2 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

h2.text-black {
    font-size: 50px;
    font-weight: 500;
    -webkit-text-stroke: 1px white;
    animation: pop-up 1s ease forwards;
}

h2 {
    animation: pop-up 0.5s ease 0.2s forwards; /* Delay the animation for the second h2 element */
}

.no-underline {
    text-decoration: none;
}

/* Define the fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Define the pop-up animation */
@keyframes pop-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply the fade-in animation to all cards */
.card {
    opacity: 0;
    animation: fadeIn 1.5s ease-in-out forwards;
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: scale(1.03); /* Increase the scale for the hover effect */
}

/* Apply animation delays to each card */
.card:nth-child(1) {
    animation-delay: 0.1s;
}

.card:nth-child(2) {
    animation-delay: 0.2s;
}

.card:nth-child(3) {
    animation-delay: 0.3s;
}

/* Style the paragraph */
.mb-4 {
    margin-bottom: 1rem;
    font-size: 18px;
    line-height: 1.6;
}

/* Style the list and its items */
.card.mb-4.shadow {
    background-color: #f8f9fa; /* Background color of the card */
    border: none; /* Remove the card border */
    border-radius: 10px; /* Add some border radius for a rounded look */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

.card.mb-4.shadow .card-body {
    padding: 20px;
}

.card-title {
    font-size: 24px;
    margin-bottom: 10px;
    color: #333; /* Text color for the title */
}

.list-group {
    list-style: none; /* Remove default list bullets */
}

.list-group-item {
    padding: 10px 0;
    font-size: 16px;
    border: none; /* Remove the list item borders */
}

.list-group-item:nth-child(odd) {
    background-color: #f8f9fa; /* Alternate background color for list items */
}

.list-group-item:hover {
    background-color: #e9ecef; /* Background color on hover */
    cursor: pointer;
}