#projectCarousel {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%; /* Limit the width to the viewport width */
    padding: 0;
    margin: 0;
    height: 100%;
    top: 7vh;
}

#projectCarousel .carousel-inner {
    background-color: var(--blue-bg);
    /* background-color: red; */
}

#projectCarousel .carousel-item {
  transition-timing-function: ease-in-out;
}

#projectCarousel .carousel-control-next, #projectCarousel .carousel-control-prev {
    height: 80vh;
    width: 5%;
    padding: 0;
    margin: 0;
}

#projectCarousel .carousel-arrow {
    height: 8%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color:rgba(0,0,0,0.3);
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    margin-right: 10%;
}

.carousel-control-next:focus-visible .carousel-arrow,
.carousel-control-prev:focus-visible .carousel-arrow {
  outline: 3px solid var(--blue-bg);
  outline-offset: 4px;
}


.bg-img {
    top: 10vh;
    width: 100%;
    margin: 0 auto;
    height: 90vh;
    object-fit: cover;
}

@keyframes scrollImage {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-100% + 100vw));
    }
}