/* 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);
    }
}

.btn {
    transition: transform 0.2s ease;
}

/* Apply the pop-up animation to specified h2 elements */
h2.text-black,
h2.mb-4 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.card ul.list-bullets li {
    font-size: 18px; /* Adjust the font size as needed */
    color: black; /* Change the text color as needed */
    font-weight: bold;
}

h2.text-black {
    font-size: 50px;
    font-weight: 500;
    -webkit-text-stroke: 1px white;
    animation: pop-up 1s ease forwards;
}
h2.mb-4 {
    animation: pop-up 0.5s ease 0.2s forwards; /* Delay the animation for the second h2 element */
}

/* Custom CSS for the square card view */
.square-card {
    background-color: lightgray; /* Grey background color */
    border-radius: 0; /* No border radius for square corners */
    border: none; /* No border */
}

.square-card .card-body {
    padding: 20px; /* Add padding to the card body */
}

/* Style for card titles */
.card-header button.btn-link {
    font-size: 22px; /* Change the font size as needed */
    font-weight: bold; /* Make the title bold */
    text-decoration: none; /* Remove underline */
    display: flex; /* Display button contents as flex to align the icon */
    align-items: center; /* Align text and icon vertically */
    color: black;
}

/* Hover effect for card headers */
.card-header button.btn-link:hover {
    text-decoration: none; /* Remove underline on hover */
    color: gray; /* Change the text color on hover to your desired color */
}

/* Icon styling */
.card-header button.btn-link i {
    transition: transform 0.3s; /* Add a smooth transition to the icon */
}

/* Rotate the icon when the card is collapsed */
.card-header button.btn-link[aria-expanded="true"] i {
    transform: rotate(180deg); /* Rotate the icon 90 degrees for collapsed cards */
}

.btn:focus {
    box-shadow: none;
}

/* Scale down the button slightly when clicked */
.btn:active {
    transform: scale(0.91);
}

.card {
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
}