/*********************************************
 * Home Banner
**********************************************/
/* general */
.vii-home-banner {
    --spacing-bottom:40px;
    --spacing-top:var(--vii-spacing-96);
    --decor-image-height:250px;
    --decor-image-width:calc(var(--decor-image-height) * 408 / 250);
}
.vii-home-banner__inner {
    gap:var(--vii-gap-container);
    padding:calc(var(--height-tradding-view) + var(--vii-header-offset) + var(--vii-header-height) + var(--spacing-top)) var(--vii-gap-container) var(--spacing-bottom);
}
.vii-home-banner__content-bottom {gap:var(--vii-gap-container);}

/* banner height */
.vii-home-banner--height {height:calc(var(--vii-100vh) - var(--admin-bar-height)); width:100%;}

/* slider */
.vii-home-banner__slide:before {background:rgba(0,0,0,.1); z-index:1}
.vii-home-banner__slide-media:before, .vii-home-banner__slide-media:after {content:''; position:absolute; left:0;}
.vii-home-banner__slide-media:before {
    width:69%; height:100%; background:linear-gradient(to right, #000 0%, rgba(0,0,0,0) 100%);
    top:0; z-index:1; opacity:0.6;
}
.vii-home-banner__slide-media:after {
    width:100%; height:60%; background:linear-gradient(to top, #000 0%, rgba(0,0,0,0) 100%);
    bottom:0; z-index:2; opacity:0.75;
}

/* content */
.vii-home-banner__content-inner {
    --vii-spacing-heading:12px;
    --vii-spacing-paragraph:24px;
    max-width:670px;
}

/* image bottom */
.vii-home-banner__content-bottom-decor-image {width:var(--decor-image-width); height:var(--decor-image-height);}

/* review */
.vii-home-banner__content-bottom-reviews {width:calc(100% - var(--decor-image-width)); max-width:555px;}
.vii-home-banner__content-bottom-reviews-heading + .vii-home-banner__content-bottom-reviews-images:has(*) {padding-top:12px;}
.vii-home-banner__content-bottom-reviews-images {gap:16px;}
.vii-home-banner__content-bottom-reviews-image {height:67px;}
.vii-home-banner__content-bottom-reviews-image img {width:auto;}

/* dots */
.vii-home-banner__dots {
    right:var(--vii-gap-container); gap:12px; padding:16px 8px; min-height:60px;
    background:#fff; border-radius:40px; box-shadow:0 0 5px 0 rgba(0, 0, 0, .1);
}
.vii-home-banner__dots .dot {width:10px; background:var(--vii-color-yellow); cursor:pointer; opacity:0.4;}
.vii-home-banner__dots .dot.active, .vii-home-banner__dots .dot:hover {opacity:1}
.vii-home-banner__dots .dot.active {background:var(--vii-color-black);}
.vii-home-banner:has(.vii-home-banner__content-inner.content-position-right) .vii-home-banner__dots {right:7px;}

/* separate content */
.vii-home-banner.use-separated-content .vii-home-banner__content-inner {
    position:absolute; top:0; left:0; right:0;
    opacity:0; pointer-events:none;
    transition:opacity 0.45s ease-in-out;
}
.vii-home-banner.use-separated-content .vii-home-banner__content-inner.active {
    opacity:1; pointer-events:auto;
}

/* large */
@media only screen and (min-width:1700px) {
    .vii-home-banner {--decor-image-height:12.5vw;}
    .vii-home-banner__content-inner {max-width:40vw;}
    .vii-home-banner__content-bottom-reviews {max-width:26.5vw;}
    .vii-home-banner__content-bottom-reviews-image {height:3vw;}
}



/*********************************************
 * Home Banner Responsive
**********************************************/
@media only screen and (max-width:1180px) {
    .vii-home-banner {
        --spacing-top:var(--spacing-bottom);
        --decor-image-height:clamp(200px, 20vw, 250px);
    }
}
@media only screen and (max-width:1023px) {
    .vii-home-banner__inner {height:auto; min-height:calc(var(--vii-100vh) - var(--admin-bar-height)); gap:40px;}
    .vii-home-banner__content-inner {
        margin: 0 auto; text-align:center;
        min-height:calc(var(--vii-100vh) - var(--admin-bar-height) - 2*var(--spacing-top) - var(--decor-image-height) - var(--vii-header-height) - var(--vii-header-offset) - var(--height-tradding-view) - 40px - 24px);
    }
    .vii-home-banner__content-bottom {flex-direction:column; align-items:center; gap:40px;}
    .vii-home-banner__content-bottom-reviews {
        padding-top:calc(var(--spacing-bottom) + 24px);
        max-width:100%; width:100%;
    }
    .vii-home-banner__content-bottom-reviews-heading {text-align:center;}
    .vii-home-banner__content-bottom-reviews-images {justify-content:center;}

    /* dots */
    .vii-home-banner__dots {
        min-height:unset; min-width:48px; padding:8px 16px;
        top:calc(var(--vii-100vh) - var(--admin-bar-height) - 20px);right:50%; transform: translate(50%, -100%);
        flex-direction:row;
    }
    .vii-home-banner__dots .dot {width:10px;}

    /* layout without review */
    .vii-home-banner__content-bottom:not(:has(.vii-home-banner__content-bottom-reviews)) {padding-bottom:24px;}
}
@media only screen and (max-width:768px) {
    .vii-home-banner {
        --decor-image-height: clamp(150px, 25vw, 250px);
    }
}
@media only screen and (max-width:480px) {
    .vii-home-banner__content-bottom-reviews-images {gap:20px;}
    .vii-home-banner__content-bottom-reviews-image {width:calc(50% - 10px);}
}
@media only screen and (max-height:810px) and (min-width:1024px) {
    .vii-home-banner {
        --spacing-top: 6vh;
        --decor-image-height: clamp(150px, 25vh, 250px);
    }
}