:root{
    --nb-single-banner-18-text-color: var(--nb-color-white);
}

.nb-single-banner-18{

    .nb-img-wrapper{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    > .nb-content-wrapper{

        &.center{
            left: 50%;
            top:50%;
            position:absolute;
            transform: translate(-50%, -50%);
            text-align: center;
            width: calc(100% - 2 * var(--nb-gutter-x));
        }

        &.right{
            left: unset;
            right: 50px;
            text-align: right;
        }

        position: absolute;

        .nb-display{
            line-height: 1;
            color: var(--nb-single-banner-18-text-color);
        }

        .nb-sub-heading{
            color: var(--nb-single-banner-18-text-color);
        }

        > * + *{
            margin-top: 20px;
        }

        .bi-facebook:before{
            content: "\ea41";
        }

        .bi-tiktok:before{
            content: "\e9c2";
        }

        .bi-twitter:before{
            content: "\e9c8";
        }
    }

    .nb-logo{
        position:absolute;
        top:60px;
        left:50%;
        transform: translateX(-50%);
        text-align: center;
        .nb-img{
            filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
        }
    }

    .nb-social-icons-wrapper{
        bottom:60px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }

    .nb-social-icons-wrapper .nb-link{
        color:var(--nb-color-white);
    }

    .nb-social-icons-wrapper .nb-footer-social-networks .nb-footer-social-networks-wrapper .nb-link > *{
        background-color:transparent;
        width:auto;
        height:auto;
    }

    .nb-social-icons-wrapper .nb-footer-social-networks-wrapper{
        gap:16px;
    }

    .nb-social-icons-wrapper .nb-icon{
        width:20px;
    }

    .nb-social-icons-wrapper .nb-footer-social-networks .nb-footer-social-networks-title{
        margin-bottom:20px;
    }
}


@media screen and (max-width: 992px) {
    .nb-single-banner-18 {
        .nb-sub-heading.nb-sub-heading-l {
            font-size: var(--nb-font-size-16);
        }

        .nb-social-icons-wrapper {
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
        }

        .nb-logo {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
        }
    }
}