.scroll .carousel-inner {
    position: relative;
    width: 100%;
    overflow: inherit!important;
}
.scrolls.modal {
            background: #00000075;
            z-index: 9999;
        }
        .scrolls .scroll .carousel-control-next, .scrolls .scroll .carousel-control-prev {
            top: inherit;
            bottom: 50%;
            opacity: 1 !important;
            width: unset;
        }
        .scrolls .scroll .carousel-control-prev {
            left: -40px;
        }
        .scrolls .scroll .carousel-control-next {
            left: unset;
            opacity: 1;
            right: -40px;
        }
        .scrolls .scroll .carousel .carousel-item img {
            height: 500px;
            width: 100%;
            object-fit: cover;
        }
        .scrolls .modal-dialog {
            margin: 6.75rem auto;
        }
        .scrolls .modal-content {
            background: transparent;
            border: none;
        }
        .scrolls .modal-header {
            border: none;
        }
        .scrolls .close-btn {
            position: absolute;
            right: -50px;
            top: 3%;
        }
        @media (max-width: 991px){
         .scrolls .scroll .carousel .carousel-item img {
            height: auto;
         }
         .scrolls .close-btn {
            top: 5%;
         }
        }
        @media (max-width: 576px){
         .scrolls .close-btn {
            right: 4%;
            top: 5%;
            width: 30px;
            z-index: 9;
         }
         .scrolls .scroll .carousel-control-prev {
            left: 0;
         }
         .scrolls .scroll .carousel-control-next {
            right: 0;
         }
        }