/*********************************************
 * Home Banner
**********************************************/
body.page-template-has-home-banner {
    --white-decoration-height:140px;
}
body.page-template-has-home-banner .site-header {z-index:10; position:sticky; top:var(--admin-bar-height);}
body.page-template-has-home-banner .site-content {z-index:30; background:var(--ifs-color-bg)}
body.page-template-has-home-banner .site-footer {z-index:20;}

/* home banner */
.ifs-home-banner {
    --delay:0ms;
    --line-decoration-width:72px;
    --height-content:450px;
    --spacing-bottom:0px;
    --circle-url:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAyMyIgaGVpZ2h0PSI3NzIiIHZpZXdCb3g9IjAgMCAxMDIzIDc3MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9InBhdGgtMS1pbnNpZGUtMV8yMDEyXzEzNCIgZmlsbD0id2hpdGUiPgo8cGF0aCBkPSJNOTUyLjMwOSA3NzEuMTE3Qzk5Ny4yMjYgNjk1LjAxNSAxMDIzIDYwNi4yNjggMTAyMyA1MTEuNUMxMDIzIDIyOS4wMDYgNzkzLjk5NCAwIDUxMS41IDBDMjI5LjAwNiAwIDAgMjI5LjAwNiAwIDUxMS41QzAgNjA2LjI2NyAyNS43NzI4IDY5NS4wMTUgNzAuNjkwNCA3NzEuMTE3QzE1Ni45MjkgNjM1LjYyNSAzMjIuMDE2IDU0NCA1MTEuNSA1NDRDNzAwLjk4NCA1NDQgODY2LjA3IDYzNS42MjUgOTUyLjMwOSA3NzEuMTE3WiIvPgo8L21hc2s+CjxwYXRoIGQ9Ik05NTIuMzA5IDc3MS4xMTdDOTk3LjIyNiA2OTUuMDE1IDEwMjMgNjA2LjI2OCAxMDIzIDUxMS41QzEwMjMgMjI5LjAwNiA3OTMuOTk0IDAgNTExLjUgMEMyMjkuMDA2IDAgMCAyMjkuMDA2IDAgNTExLjVDMCA2MDYuMjY3IDI1Ljc3MjggNjk1LjAxNSA3MC42OTA0IDc3MS4xMTdDMTU2LjkyOSA2MzUuNjI1IDMyMi4wMTYgNTQ0IDUxMS41IDU0NEM3MDAuOTg0IDU0NCA4NjYuMDcgNjM1LjYyNSA5NTIuMzA5IDc3MS4xMTdaIiBmaWxsPSJ1cmwoI3BhaW50MF9yYWRpYWxfMjAxMl8xMzQpIi8+CjxwYXRoIGQ9Ik05NTIuMzA5IDc3MS4xMTdMOTUzLjE3IDc3MS42MjVMOTUyLjM0MSA3NzMuMDNMOTUxLjQ2NSA3NzEuNjU0TDk1Mi4zMDkgNzcxLjExN1pNNzAuNjkwNCA3NzEuMTE3TDcxLjUzNCA3NzEuNjU0TDcwLjY1ODMgNzczLjAzTDY5LjgyOTIgNzcxLjYyNUw3MC42OTA0IDc3MS4xMTdaTTk1Mi4zMDkgNzcxLjExN0w5NTEuNDQ3IDc3MC42MDlDOTk2LjI3NyA2OTQuNjU2IDEwMjIgNjA2LjA4NCAxMDIyIDUxMS41SDEwMjNIMTAyNEMxMDI0IDYwNi40NTEgOTk4LjE3NiA2OTUuMzczIDk1My4xNyA3NzEuNjI1TDk1Mi4zMDkgNzcxLjExN1pNMTAyMyA1MTEuNUgxMDIyQzEwMjIgMjI5LjU1OSA3OTMuNDQxIDEgNTExLjUgMVYwVi0xQzc5NC41NDYgLTEgMTAyNCAyMjguNDU0IDEwMjQgNTExLjVIMTAyM1pNNTExLjUgMFYxQzIyOS41NTkgMSAxIDIyOS41NTkgMSA1MTEuNUgwSC0xQy0xIDIyOC40NTQgMjI4LjQ1NCAtMSA1MTEuNSAtMVYwWk0wIDUxMS41SDFDMSA2MDYuMDg0IDI2LjcyMjQgNjk0LjY1NiA3MS41NTE2IDc3MC42MDlMNzAuNjkwNCA3NzEuMTE3TDY5LjgyOTIgNzcxLjYyNUMyNC44MjMyIDY5NS4zNzMgLTEgNjA2LjQ1MSAtMSA1MTEuNUgwWk03MC42OTA0IDc3MS4xMTdMNjkuODQ2OCA3NzAuNThDMTU2LjI4MyA2MzQuNzc3IDMyMS43MDEgNTQzIDUxMS41IDU0M1Y1NDRWNTQ1QzMyMi4zMyA1NDUgMTU3LjU3NSA2MzYuNDcyIDcxLjUzNCA3NzEuNjU0TDcwLjY5MDQgNzcxLjExN1pNNTExLjUgNTQ0VjU0M0M3MDEuMjk5IDU0MyA4NjYuNzE2IDYzNC43NzcgOTUzLjE1MiA3NzAuNThMOTUyLjMwOSA3NzEuMTE3TDk1MS40NjUgNzcxLjY1NEM4NjUuNDI0IDYzNi40NzIgNzAwLjY3IDU0NSA1MTEuNSA1NDVWNTQ0WiIgZmlsbD0id2hpdGUiIG1hc2s9InVybCgjcGF0aC0xLWluc2lkZS0xXzIwMTJfMTM0KSIvPgo8ZGVmcz4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDBfcmFkaWFsXzIwMTJfMTM0IiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDUxMS41IDM0OC41MDEpIHJvdGF0ZSg5MCkgc2NhbGUoNDE5IDI4MDAuOTMpIj4KPHN0b3Agc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMC4xIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMC44Ii8+CjwvcmFkaWFsR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==);

    margin-top:calc(-1 * var(--admin-bar-height));
}
.ifs-home-banner__inner {
    padding-top:calc(var(--ifs-header-height) + 60px);
    padding-bottom:var(--white-decoration-height);
}

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

/* content */
.ifs-home-banner__content {
    width:calc(100% - 2 * var(--ifs-menu-col-width));
    padding:0 var(--ifs-gap-container);
}
.ifs-home-banner__content .block:before {
    content:"";
    width:calc(var(--ifs-100vw) - 2 * var(--ifs-menu-col-width)); height:1px; background:rgba(255, 255, 255, .2);
    position:absolute; left:50%; bottom:0; transform:translateX(-50%);
    transition:width 0.6s ease 0.6s;
}
.ifs-home-banner__content-title.block:before {transition-delay:1.5s;}
.ifs-home-banner__content-title {
    --ifs-size-h1:var(--ifs-size-64);
    line-height:1.0625 !important; font-weight:600 !important;
    max-width:690px; padding-bottom:30px;
}
.ifs-home-banner__content-title > span {gap:0 12px; max-height:calc(3 * var(--ifs-size-h1) * var(--ifs-heading-line-height));}
.ifs-home-banner__content-description {max-width:478px; padding-bottom:18px; margin-bottom:28px;}
.ifs-home-banner__content-description span {transition:all 0.8s ease;}
.ifs-home-banner__content-button {padding-bottom:28px;}
.ifs-home-banner__content .ifs-home-banner__content-button:before {width:var(--ifs-100vw);}

/* decoration > line */
.ifs-home-banner__decoration-line {
    width:var(--line-decoration-width); height:calc(100% - var(--ifs-header-height) - var(--admin-bar-height) - 1px);
    border:1px solid rgba(255, 255, 255, .2); border-top:none;border-bottom:none;
    padding-bottom:var(--spacing-bottom);
    transition:all 1.2s ease;
}
.ifs-home-banner__decoration-line i {border-bottom:1px solid rgba(255, 255, 255, .2);}
.ifs-home-banner__decoration-line i:before {
    content:"";
    position:absolute; inset:-20000%;
    background-image:repeating-linear-gradient(to bottom,
    rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 1px,
    transparent 1px, transparent 5px
    ); background-repeat:no-repeat;
    transform:rotate(45deg); transform-origin:50% 50%;
}
.ifs-home-banner__decoration-line.left {left:calc(var(--ifs-menu-col-width) - var(--line-decoration-width) + 1px)}
.ifs-home-banner__decoration-line.right {right:calc(var(--ifs-menu-col-width) - var(--line-decoration-width) + 1px)}

/* decoration > white shape */
.ifs-home-banner {position:sticky; top:0; left:0; z-index:1}
.site-header:has(.ifs-home-banner) + .site-content .site-content__main {
    position:relative; z-index:2; border-radius:0; margin-bottom:0;
    background:var(--ifs-color-bg); padding-top:var(--ifs-spacing-64);
}
.site-header:has(.ifs-home-banner) + .site-content .site-content__main:before {
    content:""; opacity:0; transform:translateY(100%);
    width:100%; height:var(--white-decoration-height); background:var(--ifs-color-bg);
    position:absolute; left:0; bottom:100%;
    clip-path:polygon(0 0, 10% 0, 10% 28.57%, 20% 28.57%, 20% 50%, 30% 50%, 30% 71.43%, 40% 71.43%, 40% 100%, 60% 100%, 60% 71.43%, 70% 71.43%, 70% 50%, 80% 50%, 80% 28.57%, 90% 28.57%, 90% 0, 100% 0, 100% 100%, 0 100%);
    transition:all 0.8s ease 1.2s;
}
.site-header:has(.ifs-home-banner.show-button) + .site-content .site-content__main:before {
    opacity:1; transform:translateY(0);
}

/* decoration > circle */
.ifs-home-banner__decoration-circle {
    width:calc(var(--ifs-100vw) - 2 * var(--ifs-menu-col-width)); aspect-ratio:1023/772;
    background-image:var(--circle-url); background-size:contain; background-repeat:no-repeat; background-position:center;
    bottom:var(--spacing-bottom);
    opacity:0.2; transition:all 1.2s ease;
}

/* separate content */
.ifs-home-banner.use-separated-content [data-slide-content] {
    position:absolute; inset:0; pointer-events:none;
    transition:opacity 0.45s ease-in-out;
}
.ifs-home-banner.use-separated-content[data-slide-content].active {opacity:1; pointer-events:auto;}

/* slider */
.ifs-home-banner__slide-media:before {
    opacity:0.9; z-index:2; bottom:50%;
    background:linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 100%);
}
.ifs-home-banner .flickity-page-dots {
    position:absolute; top:50%; right:32px;
    transform:translateY(-50%); width:auto; padding:8px; min-height:60px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; border-radius:40px;
    background:#fff; box-shadow:0 0 5px 0 rgba(0, 0, 0, .1);
}

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


/*********************************************
 * Home Banner > animation
**********************************************/
/* First screen */
.ifs-home-banner__content-title > span > span > i {
    transform:translateY(100%);
    transition:transform 0.4s ease var(--delay);
}
.ifs-home-banner__content-description span {transform:translateY(50%); opacity:0;}
.ifs-home-banner__content-button-inner {
    transform:translateY(50%); opacity:0;
    transition:all 0.8s ease
}
.ifs-home-banner .flickity-page-dots {opacity:0; transition:opacity 0.3s ease 1.2s}
.ifs-home-banner:not(.show-decoration) .ifs-home-banner__decoration-line {opacity:0; transform:translateY(10%);}
.ifs-home-banner:not(.show-decoration) .ifs-home-banner__decoration-circle {opacity:0; transform:translate(-50%, -10%);}
.ifs-home-banner:not(.show-title) .ifs-home-banner__content-title:before,
.ifs-home-banner:not(.show-description) .ifs-home-banner__content-description:before,
.ifs-home-banner:not(.show-button) .ifs-home-banner__content-button:before {width:0;}

/* animation */
.ifs-home-banner.show-title .ifs-home-banner__content-title > span > span > i {
    transform:translateY(-0.125em);
}
.ifs-home-banner.show-description .ifs-home-banner__content-description span,
.ifs-home-banner.show-button .ifs-home-banner__content-button-inner {transform:translateY(0); opacity:1}
.ifs-home-banner.show-button .flickity-page-dots {opacity:1;}


/*********************************************
 * Home Banner Responsive
**********************************************/
/* Large screen */
@media only screen and (min-width:1800px) {
    body.page-template-has-home-banner {--white-decoration-height:clamp(140px, 6.25vw, 600px);}
    .ifs-home-banner {--line-decoration-width:clamp(72px, 4vw, 300px);}
    .ifs-home-banner__content-title {max-width:39vw;}
    .ifs-home-banner__content-title > span {gap:0 0.8vw}
    .ifs-home-banner__content-description {max-width:28vw}
}
@media only screen and (min-width:1800px) and (max-height:850px) {
    body.page-template-has-home-banner {--white-decoration-height:120px;}
    .ifs-home-banner__inner {padding-bottom:calc(var(--white-decoration-height) - 32px)}
}

/* small desktop */
@media only screen and (max-height:720px) {
    body.page-template-has-home-banner {--white-decoration-height:16vh;}
    .ifs-home-banner__content-title {
        --ifs-spacing-heading:20px;
        --ifs-size-h1:7.5vh;

        max-width:80vh; padding-bottom:20px;
    }
    .ifs-home-banner__content-description {font-size:2.5vh;max-width:65vh;margin-bottom:20px;}
    .ifs-home-banner__content-button {padding-bottom:20px;}
}

@media only screen and (max-width:1180px) {
    body.page-template-has-home-banner {--white-decoration-height:100px;}
    .ifs-home-banner {
        --ifs-menu-col-width:40px;
        --line-decoration-width:40px;
    }

    /* decoration */
    .ifs-home-banner__decoration-line:before {transform-origin:100% 50%;}
    .ifs-home-banner__decoration-line.left {
        left:calc(var(--ifs-menu-col-width) - var(--line-decoration-width));
        border-left:none;
    }
    .ifs-home-banner__decoration-line.right {
        right:calc(var(--ifs-menu-col-width) - var(--line-decoration-width));
        border-right:none;
    }

    /* dots */
    .ifs-home-banner .flickity-page-dots {
        top:unset; right:unset;
        left:50%; bottom:20px; transform:translateX(-50%);
        min-height:32px; flex-direction:row; gap:5px;
    }
}
@media only screen and (max-width:1024px) {
    body.page-template-has-home-banner {--white-decoration-height:72px;}
    .ifs-home-banner {
        --ifs-menu-col-width:20px;
        --line-decoration-width:20px;
    }
    .site-header:has(.ifs-home-banner) + .site-content .site-content__main:before {
        clip-path:polygon(0 0, 12.5% 0, 12.5% 33.33%, 25% 33.33%, 25% 66.67%, 37.5% 66.67%, 37.5% 100%, 62.5% 100%, 62.5% 66.67%, 75% 66.67%, 75% 33.33%, 87.5% 33.33%, 87.5% 0, 100% 0, 100% 100%, 0 100%);
    }
}
@media only screen and (max-width:768px) {
    .ifs-home-banner__content-title > span {max-height:calc(5 * var(--ifs-size-h1) * var(--ifs-heading-line-height) + 0.35em);}
}
@media only screen and (max-width:480px) {
    body.page-template-has-home-banner {--white-decoration-height:40px;}
    .ifs-home-banner {
        --ifs-menu-col-width:12px;
        --line-decoration-width:12px;
    }
    .ifs-home-banner__inner:has(.flickity-page-dots) {padding-bottom:calc(var(--white-decoration-height) + 48px)}
    .ifs-home-banner__content-title {--ifs-size-h1:40px; padding-bottom:18px;}
    .ifs-home-banner__content-title > span {gap:0 8px;}
    .ifs-home-banner__content-description {padding-bottom:24px;}
    .ifs-home-banner__decoration-circle {opacity:0}
    .ifs-home-banner__slide-media:before {bottom:0}
    .ifs-home-banner .flickity-page-dots {bottom:32px;}
}