#home-page-carousel-container {
    width: 100%;
    height: 450px;
    display: flex;
    position: relative;
}
#home-page-carousel-left,
#home-page-carousel-right {
    width: 50%;
    height: 100%;
}
/* left */
#home-page-carousel-left {
    background-image: url(https://www.woodbridgegroup.com/user_area/content_media/raw/BannerCarouselImage.png?w=1903&quality=80);
}
#home-page-carousel-left-inner {
    box-sizing: content-box;
    height: calc(100% - 80px - 52px);
    width: 100%;
    max-width: 481px;
    margin: 80px 0 52px auto;
    padding-left: 32px;
    text-align: center;
    color: white;
}
#home-page-carousel-left-inner h1 {
    margin: 0;
    padding-right: 32px;
    font-size: 38px;
    text-transform: none;
}
#home-page-carousel-left-inner #home-page-carousel-left-inner-arrow {
    width: 100%;
    max-width: 450px;
    height: 50px;
    margin-top: 52px;
    margin-left: auto;
    background-color: #EB6A18;
    position: relative;
}
#home-page-carousel-left-inner #home-page-carousel-left-inner-arrow::after {
    content: "";
    display: block;
    width: 35.2px;
    height: 35.2px;
    background-color: #EB6A18;
    position: absolute;
    right: -17.8px;
    top: 7.4px;
    transform: rotate(45deg);
    z-index: 1;
}
#home-page-carousel-left-inner-arrow-text-container {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}
#home-page-carousel-left-arrow-text-scroll-container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: top 1s ease-in-out;
}
#home-page-carousel-left-inner-arrow-text-container p {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    font-size: 28px;
    font-weight: 400;
    margin: 0;
    text-transform: uppercase;
}
/* right */
#home-page-carousel-right {
    overflow: hidden;
}
#home-page-carousel-right-inner {
    width: 100%;
    position: relative;
    top: 0;
    transition: top 1s ease-in-out;
}
.carousel-image-container {
    width: 100%;
    height: 450px;
}
.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* navigation */
#home-page-carousel-navigation {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    max-width: 962px;
    padding: 0 32px;
    margin: 18px auto 0;
    gap: 12px;
}
#home-page-carousel-navigation .home-page-carousel-navigation-button {
    background-color: #323E48;
    border: none;
    flex-grow: 1;
    height: 12px;
}
#home-page-carousel-navigation .home-page-carousel-navigation-button.active {
    background-color: #EB6A18;
}

@media screen and (max-width: 1025px) {
    #home-page-carousel-left,
    #home-page-carousel-right {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    #home-page-carousel-left {
        background-image: none;
        z-index: 2;   
    }
    #home-page-carousel-left-inner {
        width: calc(100% - (2 * 32px));
        height: calc(100% - 32px - 52px);
        max-width: 962px;
        padding: 0 32px;
        margin: 32px auto 52px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }
    #home-page-carousel-left-inner #home-page-carousel-left-inner-arrow {
        width: calc(100% - 50px);
        margin: 32px 25px 0;
    }
    #home-page-carousel-left-inner #home-page-carousel-left-inner-arrow::before {
        content: "";
        display: block;
        width: 35.2px;
        height: 35.2px;
        background-color: #EB6A18;
        position: absolute;
        left: -17.8px;
        top: 7.4px;
        transform: rotate(45deg);
        z-index: 1;
    }
    #home-page-carousel-left-inner h1 {
        padding-right: 0;
        text-shadow: 1px 1px 10px black;
    }
}

@media screen and (max-width: 566px) {
    #home-page-carousel-left-inner-arrow-text-container p {
        font-size: 20px;
        position: relative;
        z-index: 2;
    }
}