/*carousel of tiles url css*/
.carouselCard {
    padding: 0 0;
    max-width: 500px;
    width: 100%;
    box-sizing: content-box;
}

.carouselCardImageWrapper {
    display: block;
    width: 100%;
    text-align: center;
    position: relative;
    max-height: 500px; /*so the image doesnt take a whole page width*/
}

.carouselCardImage {
    margin-top: auto;
    margin-bottom: auto;
    object-fit: contain;
    width: 100%;
    max-height: 100%;
    position: relative;
    z-index: 1
}

.carouselCardText {
    font-size: 1.5rem;
    font-weight: 600;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 0.3rem;
    padding-top: 0.3rem;
    background-color: #589ed3;
    color: white;
    text-align: center;
    display: -webkit-box; /* Enables the use of -webkit-line-clamp */
    -webkit-line-clamp: 2; /* Limits text to 2 lines */
    -webkit-box-orient: vertical; /* Specifies the box orientation */
    overflow: hidden; /* Hides any overflowing text */
    text-overflow: ellipsis; /* Adds ellipsis (…) for overflowed text */
}

.ui.one.cards .card .carouselCardText,
.ui.two.cards .card .carouselCardText,
.ui.three.cards .card .carouselCardText,
.ui.four.cards .card .carouselCardText {
    font-size: 1.5rem;
}

.ui.five.cards .card .carouselCardText {
    font-size: 1.4rem;
}

.ui.six.cards .card .carouselCardText {
    font-size: 1.2rem;
    padding-bottom: 0.2rem;
    padding-top: 0.2rem;
}

.ui.seven.cards .card .carouselCardText,
.ui.eight.cards .card .carouselCardText,
.ui.nine.cards .card .carouselCardText,
.ui.ten.cards .card .carouselCardText {
    font-size: 1rem;
    padding-bottom: 0.2rem;
    padding-top: 0.2rem;
}

.ui.card, .ui.cards > .cardNoBorder {
    border: none !important;
    box-shadow: none !important;
}

.hlnkCardClass {
    display: grid;
    height: 100%;
}


.carouselTileUrlsWrapper {
    position: relative;
    transition: transform 0.1s ease, z-index 0.1s ease;
    transform-origin: center; /* Ensures scaling happens around the center */
}

@media only screen and (min-width:768px) {
    .isHoverEffectEnable:hover {
        transform: scale(1.4); /* Slightly increase the size */
        z-index: 2000 !important; /* Bring the hovered tile above others */
    }
}

.carousel-inner {
    overflow: hidden;
    z-index: 3;
}

    .carousel-inner:has(.isHoverEffectEnable:hover) {
        overflow: unset;
    }
/*end of carousel of tiles url css*/