/*********************************************
 * Home Banner
**********************************************/
/* general */
.vii-home-banner {
    --scroll-progress:0;
    --btn-scroll-down:0px;
    --spacing-bottom:36px;
    --spacing-top: calc(var(--vii-header-height) + var(--admin-bar-height) + var(--vii-spacing-48));

    position:sticky; top:0; left:0; z-index:1; margin-top:calc(-1 * var(--admin-bar-height));
    min-height:calc(2 * var(--vii-100vh));
}
.vii-home-banner__inner {
    padding: var(--spacing-top) var(--vii-gap-container) calc(var(--spacing-bottom) + var(--btn-scroll-down));
}
.site-content__wrapper {position:relative; z-index:2; background:var(--vii-color-bg);}


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

/* dots */
.vii-home-banner .flickity-page-dots {
    position:absolute; right:9px;
    top:calc((var(--vii-100vh) - var(--admin-bar-height)) / 2);
    transform:translateY(-50%); width:auto; padding:8px; min-height:48px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; border-radius:40px;
    background:#fff; box-shadow:0 0 5px 0 rgba(0, 0, 0, .1);
}
.vii-home-banner .flickity-page-dots .flickity-page-dot {box-shadow:none; margin:0;}
.vii-home-banner .flickity-page-dots .flickity-page-dot.is-selected,
.vii-home-banner .flickity-page-dots .flickity-page-dot:hover {background:var(--vii-color-primary);}

/* overlay */
.vii-home-banner__slide-media:before {
    bottom:70%; background:linear-gradient(to bottom, #619BE0 0%, rgba(0,0,0,0) 100%);
     z-index:2;
}
.vii-home-banner__slide-media:after {
    top:50%; background:linear-gradient(to top, #000 0%, rgba(0,0,0,0) 100%);
    z-index:2; opacity:0.4; pointer-events:none;
}
.vii-home-banner__slide-inner:before {background:rgba(0,0,0,.05); z-index:1;}

/* content */
.vii-home-banner__content {max-width:715px; margin-left:auto; margin-right:auto;}
.vii-home-banner__content-inner {
    width:100%; height:100%;
    display:flex; flex-direction:column; justify-content:space-between; align-items:center; gap:32px;
}
.vii-home-banner__content-inner:before {content:''}
.vii-home-banner__content-title {gap:0 8px;}
.vii-home-banner__content-title i {padding:1px;}
.vii-home-banner__content-description {max-width:628px;}
.vii-home-banner__content-inner:not(:has(.vii-home-banner__content-description)) {justify-content:center;}
.vii-home-banner__content-inner:not(:has(.vii-home-banner__content-description)):before {display:none;}

/* slide */
.vii-home-banner__slide-media.-image img {transform:scale(calc(1 + 0.4 * var(--scroll-progress)));}

/* 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;
}

/* scroll down button */
.vii-home-banner:has([data-scroll-down]) {
    --btn-scroll-down:90px;
}
.vii-home-banner__btn-scroll-down {height:var(--btn-scroll-down); aspect-ratio:221/90;}
[data-scroll-down] {
    height:var(--btn-scroll-down); aspect-ratio:221/90; background:rgba(0,0,0,0);
    padding:20px 20px 10px;
}
[data-scroll-down] i {font-size:10px; bottom:12px; animation:moveDown 1.2s infinite ease;}
[data-scroll-down]:before {
    content:'';
    width:100%; aspect-ratio:1; pointer-events:none;
    border-radius:50%; border:1px dashed #fff;
    position:absolute; top:0; left:0;
}
@keyframes moveDown {
    0% {bottom:15px; opacity:0}
    33.33% {bottom:12px; opacity:1}
    66.67% {bottom:12px;opacity:1}
    100% {bottom:9px;opacity:0}
}

/* show/hide image desktop/mobile */
.vii-home-banner__slide-media.-image img.is-mobile {display:none;}
@media only screen and (max-width:768px) {
    .vii-home-banner__slide-media.-image.has-image-mobile img.is-desktop {display:none;}
    .vii-home-banner__slide-media.-image.has-image-mobile img.is-mobile {display:block;}
}

/*********************************************
 * Home Banner Responsive
**********************************************/
@media only screen and (min-width:1700px) {
    .vii-home-banner__content {max-width:clamp(800px, 50vw, 2000px);}
    .vii-home-banner__content-description {max-width:clamp(700px,42vw, 1500px);}

    .vii-home-banner:has([data-scroll-down]) {--btn-scroll-down:4vw;}
    [data-scroll-down] {padding-bottom:24px;}
    [data-scroll-down] i {font-size:0.6vw;}
}
@media only screen and (max-width:1024px) {
    .vii-home-banner {min-height:var(--vii-100vh);}
}
@media only screen and (max-width:768px) {
    .vii-home-banner__inner {padding-top:clamp(calc(var(--spacing-bottom) + var(--btn-scroll-down)), var(--spacing-top), 500px);}

    /* layer */
    .vii-home-banner__slide-inner:before {background:rgba(0,0,0,.2);}

    /* scroll down button */
    .vii-home-banner:has([data-scroll-down]) {--btn-scroll-down:72px;}
    .vii-home-banner:has(.vii-home-banner__slide:nth-child(2)) {--btn-scroll-down:36px;}
    .vii-home-banner:has(.vii-home-banner__slide:nth-child(2)) .vii-home-banner__btn-scroll-down {
        display:none;
    }
    [data-scroll-down] {padding:5px 15px;}

    /* dots */
    .vii-home-banner .flickity-page-dots {
        top:unset; right:auto; left:50%; bottom:24px; transform:translateX(-50%);
        min-height:32px; flex-direction:row; gap:12px; padding:8px 12px;
    }

    /* content */
    .vii-home-banner__content-description br {display:none;}
}
@media only screen and (max-width:480px) {
    /* scroll down button */
    .vii-home-banner:has([data-scroll-down]) {--btn-scroll-down:60px;}
    [data-scroll-down] {font-size:14px;}
    [data-scroll-down] i {transform:translateY(4px)}
}