/* Ensure all cards are the same width and flexible height */
.card {
    min-width: 300px;  /* Ensure all cards have at least this width */
    flex-grow: 1;      /* Allow cards to grow and fill the space evenly */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute content evenly */
    margin-bottom: 20px; /* Add space between rows of cards */
    height: 100%; /* Ensure all cards stretch to fill the available space */
}

/* Hover effect for all cards */
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute content evenly */
    flex-grow: 1;
}

/* Titles should be of a consistent size */
.card-title {
    font-size: 1.25rem;
    margin-bottom: 10px; /* Spacing below the title */
}

/* Text inside the card */
.card-text {
    font-size: 1rem;
    flex-grow: 1;  /* Allow the text area to take up available space */
}

.btn {
    margin-top: auto; /* Push the button to the bottom */
}


/* Ensure all agent cards are evenly sized */
.agent-card {
    min-width: 300px;  /* Ensure agent cards have a consistent width */
    flex-grow: 1;      /* Allow agent cards to grow with content */
    height: 100%;      /* Let agent cards adjust height based on content */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .card {
        min-width: 100%; /* Full width on smaller screens */
        height: auto;    /* Let height adjust according to content */
    }

    .col-md-4 {
        flex: 0 0 100%;  /* Full width for each card on small screens */
        max-width: 100%; /* Full width for each card */
    }
}