/* Typography */
.title-category {
    font-size: 25px;
}

.cards-wrapper {
    max-width: 1100px;
    margin: 0 60px 30px;
    padding: 20px 10px;
    overflow: hidden;
}


.card {
    padding: 10px;
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgba(80, 80, 80, 0.2), -1px -1px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.card ol {
    min-height: 200px;
    max-height: 200px;
    overflow-y: scroll;
}

/* .card ol::-webkit-scrollbar {
    background-color: var(--color-white);
    width: 8px;
    border-radius: 10px;
}

.card ol::-webkit-scrollbar-thumb {
    background-color: var(--color-secondary);
    border-radius: 10px;
} */

.card {
    /* Standard card styling */
    padding: 10px;
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgba(80, 80, 80, 0.2), -1px -1px 5px rgba(0, 0, 0, 0.2);
}

/* Scrollable list inside the card */
.card ol {
    max-height: 200px;
    /* Set a max height to trigger overflow */
    overflow: auto;
    /* Scroll only if there is overflow */
    margin: 0;
    padding-right: 10px;
    /* Space for scrollbar */
}

/* Scrollbar styling */
.card ol::-webkit-scrollbar {
    width: 8px;
    border-radius: 10px;
    background-color: var(--color-white);
}

.card ol::-webkit-scrollbar-thumb {
    background-color: var(--color-secondary);
    border-radius: 10px;
}

ol {
    list-style-type: none;

    /* Remove default numbering/bullets */
    padding-left: 0;
    /* Remove default padding */
}

article ol li::before {
    content: url(./../imgs/tick-small-2.png);
    display: inline-block;
    /* Use right arrow as the bullet */
    margin-right: 13px;
    /* Add some spacing between the arrow and text */
    width: 5px;
    height: 5px;
}


.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    filter: brightness(70%);
    /* Initial darker effect */
    transition: filter 0.3s ease;
    /* Smooth transition effect */
}

.card:hover img {
    filter: brightness(100%);
    /* Bright on hover */
}

.card:hover {
    transform: translateY(-5px);
    /* Slight lift effect on hover */
    box-shadow: 3px 3px 10px rgba(80, 80, 80, 0.3), -3px -3px 10px rgba(0, 0, 0, 0.3);
}

.service-card ol {
    padding: 20px;
}


@media screen and (min-width: 800px) {


    .card {
        padding: 10px;
    }
}