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

/* dots */
.vii-home-banner .flickity-page-dots {
    position:absolute; top:50%; left:var(--vii-gap-container);
    transform:translateY(-50%); width:67px;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
}
.vii-home-banner .flickity-page-dots .dot {
    background:none; border-radius:0; display:flex; align-items:center;
    margin:0; width:100%; height:22px;
    transition:all .4s ease;
}
.vii-home-banner .flickity-page-dots .dot:before {
    content:""; width:12px; height:2px;
    background:#fff; display:block;
    transition:all .4s ease;
}
body .vii-home-banner .flickity-page-dots .dot:where(.is-selected, :hover) {background:none;}
.vii-home-banner .flickity-page-dots .dot:hover:before {width:20px;}
.vii-home-banner .flickity-page-dots .dot.is-selected:before {width:100%;}

/* overlay */
/*.vii-home-banner__slide-media:before {*/
/*    background:linear-gradient(180deg, rgba(0, 0, 0, 0.696) -1.81%, rgba(0, 0, 0, 0.496) 66.94%, rgba(92, 92, 92, 0) 98.19%);*/
/*    mix-blend-mode:multiply; opacity:0.4; z-index:2;*/
/*}*/

/* separate content */
.vii-home-banner__content {padding:0 var(--vii-gap-container) 60px; max-width:700px;}

/* scroll down */
.vii-home-banner__scroll-down button {
    background:none; font-size:14px; font-weight:400;
    letter-spacing:-0.28px; color:var(--vii-color-text-primary-900-dark);
    border-radius:50px; padding:10px; gap:8px;
}
.vii-home-banner__scroll-down button:has(span) {padding-left:20px;}
.vii-home-banner__scroll-down button i {
    width:24px; border:1px solid #fff;
    font-size:10px;
}
.vii-home-banner__scroll-down button:hover {background:var(--vii-color-primary);}

/*********************************************
 * Home Banner > Slide
**********************************************/
.vii-home-banner__slide {width:100%;}

/* image */
/*@media only screen and (min-width:769px) {*/
/*    .vii-home-banner__slide-media.-image {transition:transform 10s ease;}*/
/*    .vii-home-banner__slide:not(.is-selected) .vii-home-banner__slide-media.-image {transform:scale(1.1);}*/
/*}*/

/* content */
.vii-home-banner__slide-content {
    padding-top:var(--vii-spacing-64);
    max-width:765px;
}

/* 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 (max-width:768px) {
    .vii-home-banner {
        --h:87.5vw;
    }
    .vii-home-banner__slide-inner {display:block; padding-bottom:0;}
    .vii-home-banner--height {height:auto;}

    /* set the same bg color as the first row */
    body:has(.vc_row.vii-bg-yellow:first-child) .vii-home-banner__slide-inner:has(.vii-home-banner__slide-content-item) {
        background:var(--vii-color-text-primary-900-dark);
    }

    /* dots */
    .vii-home-banner .flickity-page-dots {
        top:74vw; right:unset;
        left:50%; bottom:auto; transform:translateX(-50%);
        min-height:32px; flex-direction:row; gap:5px;
        width:auto;
    }
    .vii-home-banner .flickity-page-dots .dot {width:15px;}
    .vii-home-banner .flickity-page-dots .dot.is-selected {width:30px;}
    .vii-home-banner .flickity-page-dots .dot:before {width:100%;}

    /* image */
    .vii-home-banner__slide-media {
        height:var(--h);
        position:relative; transform:none;
    }

    /* content */
    .vii-home-banner__slide-content {text-align:left;}
    .vii-home-banner__slide-content-item {padding-top:0;}
    .vii-home-banner__slide-content-item br {display:none;}

    /* content item */
    .vii-home-banner__slide-content-item {position:relative;}

    /* separate content */
    .vii-home-banner__content {
        padding:var(--vii-spacing-default) 20px 0;
        position:relative; transform:none; inset:auto;
        text-align:left;
    }
}


/*********************************************
 * Home Banner Animation: sticky and scale up on scroll
**********************************************/
.vii-home-banner {
    position:sticky; top:0;
    --scroll-progress:0;
    --scale:clamp(1, calc((var(--scroll-progress) * 0.1) + 1), 1.1);
}
.site-content { background:var(--vii-color-bg);}
.vii-home-banner__slide-media.-image {transform:scale(var(--scale));}

@media only screen and (min-width:769px) {
    .vii-home-banner__slide-media.-image img {transition:transform 3s ease, opacity .8s ease;}
    .vii-home-banner__slide:not(.is-selected) .vii-home-banner__slide-media.-image img {transform:scale(1.1);}
    body:not(.page-loaded) .vii-home-banner__slide-media.-image img {opacity:0;}
}