/****************************
 * Header
*****************************/
.site-banner {
    --bg-linear:linear-gradient(to bottom, transparent 60.27%, var(--vii-color-dark) 82%);

    min-height:clamp(300px, 52.083vw, calc(100vh - var(--height-tradding-view, 0px)));
}
.site-banner-bg {
    left:var(--vii-gap-container);right:var(--vii-gap-container);
}
.site-banner-bg::after {
    background-image:var(--bg-linear);
}
.site-title-description {
    padding-top:calc(20px + var(--vii-header-height) + var(--vii-header-offset));padding-bottom:64px;
}
.site-title {
    max-width:627px;
    padding-right:40px;
}
.site-description {max-width:505px;}
.site-title-description .wpb_content_element {margin-bottom:0;}


/****************************
 * Responsive Header
*****************************/
@media only screen and (min-width:1770px) {
    .site-title {max-width:41.66vw;}
    .site-description {max-width:29.07vw;}
}
@media only screen and (min-width:769px) {
    .site-banner-bg .banner-mobile {display:none;}
}
@media only screen and (max-width:1024px) {
    .site-banner {
        --bg-linear:linear-gradient(to bottom, transparent 30.27%, var(--vii-color-dark) 82%);

        min-height:clamp(400px, 70vw, calc(100vh - var(--height-tradding-view, 0px) - var(--vii-header-height)));
    }
    .site-title-description {
        text-align:center;
        gap:var(--vii-gap-container);
        height:max-content;
        margin-top:auto;
    }
    .site-title {max-width:unset;width:100%;padding-right:0;}
    .site-description {max-width:unset;width:100%;}
}
@media only screen and (max-width:768px) {
    .site-banner-bg .banner-desktop {display:none;}
}
@media only screen and (max-width:768px) {
    .site-title-description {
        flex-direction:column;align-items:flex-start;justify-content:flex-end;
        padding-top:32px;padding-bottom:32px;gap:32px;
    }
}
@media only screen and (max-width:480px) {
    .site-banner {
        --bg-linear:linear-gradient(to bottom, transparent 14.27%, var(--vii-color-dark) 71%);
    }
}