.card {
    transition: all 0.3s ease;
}

.content {
    max-height: 6em;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.content.expanded {
    max-height: none;
    /* Allow content to expand fully */
}

.card.expanded {
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
}

.toggle-btn {
    font-size: 30px;
    /* Make the dots larger */
    color: green;
    /* Set the color to green */
    background: none;
    border: none;
    padding: 0;
}

.toggle-btn:hover {
    color: darkgreen;
    /* Darker green on hover */
    cursor: pointer;
}

/* CSS to rotate the arrow */
#arrow {
    transform: rotate(180deg);
    /* Rotate arrow to point up */
    transition: transform 0.3s ease;
    /* Smooth transition */
}

/* Rotate the arrow back to pointing down when toggled */
.expanded #arrow {
    transform: rotate(0deg);
    /* Arrow points down */
}