/* Custom styles for the custom cards */
.custom-card-container {
    font-family: "DM Sans", 'Montserrat', sans-serif;
    display: flex;
    gap: 20px;
    align-items: stretch; /* Ensures all cards stretch to the same height */
    flex-wrap: wrap; /* Allows cards to wrap on smaller screens */
}

.custom-card {
    border: 1px solid #ccc;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    padding: 0; /* Remove padding to avoid overlap with header */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden; /* Ensures the header is part of the card */
    margin-bottom: 20px; /* Adds space between rows on smaller screens */
    position: relative; /* Allows positioning of the header */
    font-size: 20px; /* Sets the font size for all text in the cards */
}

.custom-card.custom-card-small {
    flex: 1; /* Makes the first card smaller */
}

.custom-card.custom-card-large {
    flex: 2; /* Makes the second card larger */
    border-color: #dbd9d3; /* Sets the border color to light grey */
}

.custom-card.custom-card-large h2 {
    background-color: #eeeeee; /* Sets the background color to light grey ---PS1803 */
    color: #606263; /* Sets the text color to #606263 */
}

.custom-card.custom-card-large p,
.custom-card.custom-card-large ul li,
.custom-card.custom-card-large ul li::before {
    color: #606263; /* Sets the text color to grey */
}

.custom-card h2 {
    margin: 0; /* Remove margin to avoid overlap */
    text-align: center; /* Centers the header text */
    color: white; /* Sets the text color to white */
    background-color: #212529; /* Sets the background color to #212529 */
    padding: 20px; /* Increases the height of the header */
    border-top-left-radius: 32px; /* Rounds the top left border */
    border-top-right-radius: 32px; /* Rounds the top right border */
    position: relative; /* Ensures the header is positioned correctly */
    z-index: 1; /* Ensures the header is above the card */
    font-size: 20px; /* Sets the font size for the headers */
    font-weight: bold; /* Makes the font weight bold */
}

.custom-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 32px; /* Matches the border radius */
    background-color: #212529; /* Matches the header background color */
    z-index: 0; /* Places the background behind the header */
}

.custom-card.custom-card-large::before {
    background-color: #dbd9d3; /* Matches the header background color */
}

    .custom-column ul li {
        padding-bottom: 10px; /* Adjust the value as needed ---PS1803 */
    }

.custom-card ul {
    list-style-type: none; /* Removes default bullet points */
    padding: 0 20px; /* Add padding to the list */
    flex-grow: 1;
}

.custom-card ul li {
    position: relative;
    padding-left: 25px; /* Adds space for the check mark */
}

.custom-card ul li::before {
    content: "\2713"; /* Unicode for check mark */
    position: absolute;
    left: 0;
    color: #212529; /* Sets the color of the check mark to #212529 */
    font-weight: bold;
}

.custom-card.custom-card-large ul li::before {
    color: #606263; /* Sets the color of the check mark to grey */
}

.custom-card p {
    padding-left: 45px; /* Matches the padding of the list items text */
    margin: 0 0 10px 0; /* Adjusts margin to align with list items */
}

.custom-card.custom-card-large p {
    color: #606263; /* Sets the text color to grey */
}

.bold-text {
    font-weight: bold; /* Makes the font weight bold for specific paragraphs */
}

.custom-button {
    align-self: center;
    width: 160px; /* Sets a fixed width for all buttons  ---PS1803 */
    height: 60px; /* Sets a fixed height for all buttons  ---PS1803 */
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 20px; /* Add margin to the bottom to avoid overlap */
    font-weight: bold; /* Makes the font weight bold */
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-card-small .custom-button {
    background-color: #212529; /* Sets the background color to #212529 */
    color: white; /* Sets the text color to white */
    border-radius: 50px; /* Makes the button rounded */
}

.custom-card-small .custom-button:hover {
    background-color: rgba(52, 58, 64, 0.8); /* Change the background color with transparency */
    color: #ffffff; /* Change the text color on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Add a deeper shadow on hover ---PS1803 */

}

.custom-card-large .custom-button {
    background-color: #eeeeee; /* Sets the background color to light grey */
    color: #606263; /* Sets the text color to #212529 */
    border-radius: 50px; /* Makes the button rounded */
}

.custom-card-large .custom-button:hover {
    background-color: rgba(52, 58, 64, 0.8); /* Change the background color with transparency */
    color: #ffffff; /* Change the text color on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Add a deeper shadow on hover ---PS1803 */

}


.custom-columns {
    display: flex;
    gap: 20px;
    flex-grow: 1;
    height: 100%; /* Ensures columns take up the full height of the card */
}

.custom-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.custom-column.custom-column-left {
    border-right: 1px solid #ccc; /* Adds a border to the right of the first column */
    margin-right: 10px; /* Adds space between the border and the content */
}

.custom-column.custom-column-right {
    border-left: 1px solid #ccc; /* Adds a border to the left of the second column */
    margin-left: 10px; /* Adds space between the border and the content */
}

.custom-column ul {
    flex-grow: 1;
    overflow-y: auto; /* Allows scrolling if the content overflows */
}

.custom-column .custom-button {
    margin-top: 10px;
    align-self: center;
}

/* Responsive styles */
@media (max-width: 1024px) {
    .custom-card-container {
        flex-direction: column; /* Stacks cards vertically on smaller screens */
    }

    .custom-card {
        flex: 1; /* Ensures both cards take up equal space when stacked */
    }
}

@media (max-width: 768px) {
    .custom-card.custom-card-large {
        display: none; /* Hides the second card on mobile viewports */
    }
}