.multi-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: auto; /* Allow height to be set dynamically */
}

.multi-carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}

.multi-carousel .item {
    flex: 0 0 auto; /* Prevent shrinking */
    width: calc(100% / 3 - 10px); /* Width for 3 items, accounting for gap */
    margin-right: 10px; /* Gap between items */
}

/* Remove margin-right on the last item */
.multi-carousel .item:last-child {
    margin-right: 0; /* No margin on the last item */
}

.multi-carousel .leftLst,
.multi-carousel .rightLst {
    position: absolute; /* Position them absolutely */
    top: 50%; /* Center them vertically */
    transform: translateY(-50%); /* Adjust positioning */
    background-color: #c60303; /* Change background color on hover */
    color: white;
    border-radius: 50%; /* Rounded corners for a better look */
    width: 50px; /* Width of the arrow button */
    height: 50px; /* Height of the arrow button */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    cursor: pointer; /* Change cursor to pointer on hover */
    z-index: 10; /* Ensure they are on top of other elements */
    transition: background-color 0.3s; /* Smooth background color transition */
}

.multi-carousel .leftLst:hover,
.multi-carousel .rightLst:hover {
    background-color: #940101; /* Semi-transparent white background */
}

/* Position the arrows */
.multi-carousel .leftLst {
    left: 10px; /* Left arrow position */
}

.multi-carousel .rightLst {
    right: 10px; /* Right arrow position */
}


.our-team .multi-carousel {
    position: relative;
    overflow: hidden;
}

.our-team .multi-carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.our-team .item, .restoration-projects .item {
    width: 20%;
    flex: 1 0 auto;
    margin-right: 10px;
    opacity: 0; /* Initial state with opacity 0 */
    transition: opacity 1s ease-in-out; /* Opacity transition */
}

.our-team .card, .restoration-projects .card {
    transition: unset;
    transform: unset !important;
}

.our-team .card:hover, .restoration-projects .card:hover {
    box-shadow: unset;
    transform: unset; /* Optional: slight upward movement on hover */
}

.our-team .fade-in, .restoration-projects .fade-in {
    opacity: 1; /* Set to full opacity when visible */
}

.restoration-projects .card-img-top {
    max-height: unset;
}

.restoration-projects .item {
    /*opacity: 0; !* Start invisible *!*/
    transform: translateY(70px); /* Start lower for bottom-to-top effect */
    transition: opacity 1.5s ease, transform 1.5s ease;
}

.restoration-projects .item .visible {
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Move to original position */
}

/* Apply margin to every even item */
.restoration-projects .item:nth-child(even) {
    margin-top: 10%; /* Margin-top for even items */
}

/* Reset margin for visible items */
.restoration-projects .item .visible:nth-child(even) {
    margin-top: 0; /* Remove margin when the item is visible */
}

@media (max-width: 600px) {
    .restoration-projects .item {
        width: calc(50% - 10px); /* Adjust the width of each item to 50% */
        margin: 5px; /* Adjust the spacing between items */
    }

    .restoration-projects .multi-carousel-inner {
        display: flex;
        flex-wrap: wrap; /* Allow items to wrap into multiple rows */
    }
}