.beContainer[style*="color"] h1, .beContainer[style*="color"] h2,
.beContainer[style*="color"] h3, .beContainer[style*="color"] h4,
.beContainer[style*="color"] h5, .beContainer[style*="color"] h6 {
    color: var(--HeadingColor);
}


.beSwiper-container .swiper-imageContent {
    /* block editor styles reset */
    position: initial;
    top: initial;
    left: initial;
    right: initial;
    bottom: initial;
    margin: initial;
    display: initial;
    flex-direction: initial;
    justify-content: initial;
    align-items: initial;
    text-align: initial;
    background-color: initial;
    padding: initial;
    /* block editor styles reset */

    max-width: 1080px;
    margin: 0 auto;
    color: #fff;
    text-shadow: 2px 2px 2px rgba(25, 25, 25, 0.5);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50px;
    padding: 0 10px 0 10px;
}


.beSwiper-container .swiper-imageContent h1 {
    font-size: 50px;
    font-weight: 600;
    color: #fff;
}

.beSwiper-container .swiper-imageContent h2 {
    font-size: 40px;
    color: #fff;
}

@media screen and (max-width: 1023.9px) {
    .beSwiper-container .swiper-imageContent h1 {
        font-size: 35px;
    }

    .beSwiper-container .swiper-imageContent h2 {
        font-size: 30px;
        margin: 0px 0 15px 0;
    }
}


@media screen and (max-width: 767.9px) {
    .swiper-slide img {
        min-height: 300px;
        object-fit: cover;
    }
}

@media screen and (max-width: 680px) {
    .beSwiper-container .swiper-imageContent h1 {
        font-size: 28px;
    }

    .beSwiper-container .swiper-imageContent h2 {
        font-size: 26px;
        margin: 0px 0 12px 0;
    }
}

@media screen and (max-width: 500px) {
    .beSwiper-container .swiper-imageContent h1 {
        font-size: 24px;
    }

    .beSwiper-container .swiper-imageContent h2 {
        font-size: 22px;
    }
}