#mainBanner {
    position: relative;
}
#mainBanner .item {
    height: 650px;
    position: relative;
}
#mainBanner .item > img {
    position: absolute;
    left: 0;
    top: 00;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}
#mainBanner .owl-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    z-index: 9;
    transform: translateX(-50%);
    display: flex;
    gap: 30px;
}
#mainBanner .owl-dots button {
    padding: 7.5px !important;
    background: var(--color-vividOrange);
    border-radius: 50px;
}
#mainBanner .owl-dots button.active {
    background:var(--color-white);
}
#mainBanner .banner-content {
    position: relative;
    max-width: var(--container-width) !important;
    padding:50px 36px;
    margin: 0 auto;
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    right: 0;
}
#mainBanner .banner-content .banner-title {
    display: block;
    font-family: var(--font-futura);
    font-size: 75px;
    line-height: 80px;
    text-shadow: 0px 3px 8px #00000099;
    color: var(--color-white);
    text-wrap: balance;
}

@media(min-width:575px) {
    #mainBanner .item > img.mobile-bg {
        display: none;
    }
}
@media(max-width:767px) {
    #mainBanner .banner-content .banner-title {
        font-size: 40px;
        line-height: 45px;
    }
}
@media(max-width:575px) {
    #mainBanner .item > img.desk-bg {
        display: none;
    }
}