.wrapper {
    margin: auto;
    width: 100%;
}

.cf:after {
    content: '';
    display: table;
    visibility: hidden;
    clear: both;
}

.slider {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
    margin-bottom: 0px!important;
}

.text-container {
    background-color: #fff;
    padding: 1em 1em 1em 0px;
	vertical-align: middle;
    min-width: 350px;
    height: 100%; /* Fill the height of the parent wrapper */
}

.slider__body {
    padding: 0 1em;
    vertical-align: middle;
    margin-top: 1em;
    min-width: 300px;
    height: 100%; 
    background-color: #4879AA;
}

.slider__image {
    vertical-align: middle;
    width:100%;
    max-width: 450px; 
    margin: auto;
}

.slider__image img {
    border-radius: 0%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slick-next:before, .slick-prev:before {
    font-family: inherit!important;
}

.slick-dots li {
    margin: 0;
}

.slick-dots li button:before {
    color: #1b354a!important;
    font-size: 14px;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
}


.responsive-container {
    position: relative;
    width: 100%;
    padding-bottom: 66.67%; 
    height: 0;
    overflow: hidden;
}
 
.responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Media Queries for Wrapper Width Adjustments */
@media only screen and (min-width: 1200px) {
    .wrapper {
        max-width: 1140px;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1199px) {
	.wrapper {
		max-width: 940px;
	}
}

@media only screen and (min-width: 800px) and (max-width: 1023px) {
	.wrapper{
		width: 100%;
	}
}

/* Adjust slider for larger screens */
@media only screen and (min-width: 749px) {
    .slider {
        display: table !important;
        width: 100%; /* Make each slider take up the full width */
        height: 100%; /* Make each slider take up the full height */
    }
    .text-container, .slider__body, .slider__image, .responsive-container {
        display: table-cell;
        margin: 0;
        height: 100%; /* Ensure children elements take up full height */
    }
}