.container-mainbanner {
    --home-title-top: 35%;
    --home-title-top-offset: 0%;
    position: relative;
    z-index: 0;
    text-align: center;
}

    .container-mainbanner .home-banner img {
        width: 100%;
        height: auto;
        visibility: hidden;
        top: 0;
    }

    .container-mainbanner .home-banner-desktop {
        background-image: url('../../Content/images/elements/Home-Banner-Desktop.webp');
        background-size: contain;
        background-repeat: no-repeat;
    }

        .container-mainbanner .home-banner-desktop .container-fluid {
            position: absolute;
            top: var(--home-title-top);
        }

            .container-mainbanner .home-banner-desktop .container-fluid h1 {
                font-family: var(--primary-font-family);
                font-size: 15vw;
                color: var(--bg-color);
            }

    .container-mainbanner .home-banner-mobile {
        background-image: url('../../Content/images/elements/Home-Banner-Mobile.jpg');
        background-size: contain;
        background-repeat: no-repeat;
    }

        .container-mainbanner .home-banner-mobile .container-fluid {
            position: absolute;
            top: 330px;
        }

            .container-mainbanner .home-banner-mobile .container-fluid h1 {
                font-family: var(--primary-font-family);
                font-size: 95px;
                line-height: 167px;
                color: #FFFFFF;
            }

    .container-mainbanner .about-us-desktop {
        background-image: url('../../Content/images/elements/about-company-desktop.webp');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .container-mainbanner .about-us-mobile {
        background-image: url('../../Content/images/elements/about-company-mobile.jpg');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .container-mainbanner .contact-us-desktop {
        background-image: url('../../Content/images/elements/contact-us-desktop.webp');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .container-mainbanner .contact-us-mobile {
        background-image: url('../../Content/images/elements/contact-us-mobile.webp');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .container-mainbanner .tncs-desktop {
        background-image: url('../../Content/images/elements/terms-conditions-desktop.webp');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .container-mainbanner .tncs-mobile {
        background-image: url('../../Content/images/elements/terms-conditions-mobile.webp');
        background-size: contain;
        background-repeat: no-repeat;
    }

@media (min-width: 1200px) and (max-width: 1399px) {
    .container-mainbanner .home-banner-desktop .container-fluid {
        top: calc(var(--home-title-top) + var(--home-title-top-offset));
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .container-mainbanner .home-banner-desktop .container-fluid {
        top: calc(var(--home-title-top) + 2 * var(--home-title-top-offset));
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .container-mainbanner .home-banner-desktop .container-fluid {
        top: calc(var(--home-title-top) + 3 * var(--home-title-top-offset));
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .container-mainbanner .home-banner-desktop .container-fluid {
        top: calc(var(--home-title-top) + 4 * var(--home-title-top-offset));
    }

    .container-mainbanner .home-banner-mobile .container-fluid {
        top: calc(var(--home-title-top) + 8%);
    }

        .container-mainbanner .home-banner-mobile .container-fluid h1 {
            font-size: 160px;
        }
}

@media (max-width: 575px) {
    .container-mainbanner .home-banner-desktop .container-fluid {
        top: calc(var(--home-title-top) + 4 * var(--home-title-top-offset));
    }

    .container-mainbanner .home-banner-mobile .container-fluid {
        top: 330px;
    }
}