.card .img-fit {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.card-img-top {
    width: 100%;
    height: 40vh;
    object-fit: cover;
}


.card {
    height:100%; /* Should pull to same hegith*/
}

 .ul {
        list-style-image: url('./images/sampleimages/sqpurple.gif');
        /*background-image: url('../images/sampleimages/sqpurple.gif');*/
    }

.card-body {
    display:flex;
    height:100%;
    flex-direction: column;
}

.card-text {
    flex-grow: 1;
}

@media (max-wdth: 767.98px) {
    .card .img-fit {
        aspect-ratio: 1.45 / 1;
    }
}


.color-with-marker {
    list-style-position: inside;
}

    .color-with-marker ::marker {
        color: red;
    }

.color-with-pseudo {
    list-style: none;
    list-style-position: inside;
}

    .color-with-pseudo li::before {
        content: "•";
        font-size: 130%;
        line-height: 0;
        margin: 0 0.3rem 0 -0.25rem;
        position: relative;
        top: 0.08rem;
        color: red;
    }

.color-with-svg {
    list-style: none;
}

    .color-with-svg li::before {
        content: "";
        width: 1em;
        height: 1em;
        display: inline-block;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='red'/%3E%3C/svg%3E");
        background-size: 38%;
        background-repeat: no-repeat;
        background-position: left center;
        position: relative;
        top: 0.08rem;
    }

/* Custom Li Font size */
.theFont li {
    font-size: 14px !important;
}

.carousel-inner .carousel-item {
    height: 500px; /* Or any desired fixed height in px, vh, etc. */
    overflow: hidden; /* Hides any overflowing parts of the image */
}

    .carousel-inner .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Crops the image to cover the container while maintaining aspect ratio */
        object-position: center; /* Centers the image within the container */
    }