#section-carousel
{
    direction: rtl;
    margin-top: 0.8vh;
}

.carousel-item 
{
    height: 470px;
    width: 100%;
}

.carousel-item.active {
    width: 100%;
}
.carousel-item.active.carousel-item-left a {
    width: 100%;
    padding: 0;
    margin: 0;
}

.carousel-item img
{
    height: 100%;
    width: 100%;
}

#site-carousel {
    width: 100%;
}

.carousel-control-prev-icon 
{
    background-image: url("../../img/general/carousel/move-to-prev.png");
    height: 4.5vh;
    width: 2rem;
}

.carousel-control-next-icon 
{
    background-image: url("../../img/general/carousel/move-to-next.png");
    height: 4.5vh;
    width: 2rem;
}


.carousel-indicators li 
{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #cccccc;
}

.carousel-indicators .active
{
    background-color: var(--orange);
}



#banner-images
{
    height: 470px;
}


#banner-images img
{
    width: 100%;
    height: 100%;
}

#top-image, #bottom-image
{
    height: 232.8px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#top-image
{
    margin-bottom: 0.7vh;

}

#bottom-image
{
    height: 232px;
}

@media (max-width: 1366px) and (min-width:1200px) {
    .carousel-item {
        height: 400px;
    }

    #top-image, #bottom-image {
        height: 198px;
    }

    #section-carousel > div.row {
        height: 400px;
    }
}

@media (max-width: 1200px) {

    #section-carousel
    {
        margin-top: 2.7rem;
    }

    #section-carousel .carousel-item 
    {
        height: 200px;
    }

    .carousel-indicators li 
    {
        width: 10px;
        height: 10px;
        text-align: center;
    }
    
}
@media screen and (max-width: 1200px) {
    #section-carousel > .row .col-xl-8 {
        padding-left: 0;
    }
}
@media screen and (max-width: 992px){
    #section-carousel {
        margin-top: 4.5rem;
    }
}

@media screen and (max-width: 450px){
    #section-carousel {
        margin-top: 2.5rem;
    }
}