/*********************************************
 * Home Banner
**********************************************/
/* Variable */
.bb-home-banner {
    --hb-height:calc(100vh - var(--hb-spacing-padding-top) - var(--bb-spacing-45));
    --hb-spacing-padding-top:50px;
    --hb-spacing-content-left:75px;
    --hb-height-main-content:165px;
    --hb-width-bottom-content:380px;

    --hb-width-dots:200px;
    --hb-dot-size:24px;

    --hb-width-button:270px;
    --hb-height-content-bottom-slider:107px;

    padding:var(--hb-spacing-padding-top) var(--bb-spacing-padding) var(--bb-spacing-45);
}

/* General */
.bb-home-banner__inner {border-radius:20px;}
.bb-home-banner__inner:before {
    content:""; z-index:1;
    width:100%; height:1px; background:rgba(255, 255, 255, .5);
    position:absolute; left:0; bottom:var(--hb-height-content-bottom-slider);
}
.bb-home-banner__inner:after {
    content:"";
    width:45px; height:45px; border-radius:23px; pointer-events:none;
    position:absolute;top:50px; left:0; z-index:2;
    box-shadow:-23px -23px 0 0 var(--bb-color-gray);
}
.bb-home-banner--height {min-height:var(--hb-height); width:100%;}

/* Main content */
.bb-home-banner__content {
    bottom:calc(var(--hb-height-content-bottom-slider) + var(--bb-spacing-80));
    left:var(--hb-spacing-content-left); right:var(--hb-spacing-content-left);
    max-width:1024px;
}
.bb-home-banner:not(.loaded) .bb-home-banner__content {opacity:0; transform:translateY(10px);}
@media only screen and (min-width:1440px) {
    .bb-home-banner__content {--bb-size-h1:65px;}
}
@media only screen and (min-width:1801px) {
    .bb-home-banner__content {--bb-size-h1:80px;}
}

/* Content bottom */
.bb-home-banner__content-bottom {
    background:#fff; border-radius:20px 0 20px 0;
    width:var(--hb-width-bottom-content); padding:35px var(--bb-gap-container); min-height:220px;
    right:var(--bb-spacing-padding); bottom:var(--bb-spacing-45);
}


/*********************************************
 * Home Banner > Slide
**********************************************/
/* Content */
.bb-home-banner__slide-inner {
    padding:calc(100px + var(--bb-spacing-45) + var(--bb-spacing-80) + var(--hb-height-main-content)) 0 0;
}
.bb-home-banner__slide-content {
    width:calc(100% - var(--hb-width-bottom-content) - var(--bb-gap-container));
    max-width:662px;
}


/* Background image */
.bb-home-banner__slide-media:before, .bb-home-banner__slide-media:after {pointer-events:none; z-index:1;}
.bb-home-banner__slide-media:before {background:rgba(0, 35, 67, .4);}
.bb-home-banner__slide-media:after {
    background:linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #001c41 100%);
    opacity:.3; bottom:12%;
}

/* Content bottom */
.bb-home-banner:not(.loaded) .bb-home-banner__slide-content-bottom {opacity:0; transform:translateY(10px);}
.bb-home-banner__slide-content-bottom {
    padding:0 var(--hb-width-bottom-content) 0 var(--hb-width-dots);
    min-height:var(--hb-height-content-bottom-slider);
}
.bb-home-banner__slide-content-title {
    --bb-spacing-heading:0;
    padding:15px 50px; width:calc(100% - var(--hb-width-button));
}
.bb-home-banner__slide-content-title.no-button {width:100%;}

/* Button */
.bb-home-banner__slide-content-button {width:var(--hb-width-button); padding:5px 20px;}
.bb-home-banner__slide-content-button:before {
    content:""; display:block;
    width:1px; height:var(--hb-height-content-bottom-slider); background:rgba(255, 255, 255, .5);
    position:absolute; left:0; top:50%; transform:translateY(-50%);
}
.bb-home-banner__slide-content-button a {padding-right:65px;}
.bb-home-banner__slide-content-button a:before {
    font-family:var(--bb-font-icomoon); content:"\e90d";
    width:44px; aspect-ratio:1; border-radius:50px;
    text-align:center; line-height:44px;
    background:#fff; color:var(--bb-color-blue);
    position:absolute; right:0; top:50%; transform:translateY(-50%);
    font-size:12px; font-weight:700;
    transition:var(--bb-transition);
}
.bb-home-banner__slide-content-button a:hover:before,
.bb-home-banner__slide-content-button a:focus:before {background:var(--bb-color-primary); color:#fff;}

/* Avoid CLS */
.bb-home-banner__slider-inner:not(.flickity-enabled) .bb-home-banner__slide:not(:first-child) {display:none;}


/*********************************************
 * Home Banner > Custom dots
**********************************************/
.bb-home-banner ol.flickity-page-dots {
    position:absolute; bottom:0; left:0;
    display:flex; align-items:center; justify-content:center; gap:7px;
    width:var(--hb-width-dots); min-height:var(--hb-height-content-bottom-slider);
    padding:5px 10px; border-right:1px solid rgba(255, 255, 255, .5);
}


.bb-home-banner ol.flickity-page-dots li {
    margin:0; background:rgba(0, 0, 0, 0) !important;
    width:auto; height:auto; border-radius:0;
}
.bb-home-banner__dot svg {
    width:var(--hb-dot-size); aspect-ratio:1;transform:rotate(-90deg);
    fill:rgba(0, 0, 0, 0); stroke-width:2px;
    stroke:rgba(255, 255, 255, .5);
}
.bb-home-banner.loaded .bb-home-banner__dot svg .circle {
    stroke-dasharray:calc(var(--hb-dot-size) * 3.142);
    stroke-dashoffset:calc(var(--hb-dot-size) * 3.142);
    stroke:#fff;
}
.bb-home-banner__dot:before {
    content:"";
    width:7px; aspect-ratio:1; background:#fff; border-radius:50%;
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
}

/* Animation */
@keyframes show-circle {
    to {opacity:1;}
}
@keyframes hide-circle {
    to {opacity:0;}
}
@keyframes run-circle {
    to {stroke-dashoffset:0;}
}
@keyframes reset-circle {
    to {stroke-dashoffset:calc(var(--hb-dot-size) * 3.142);}
}

.bb-home-banner__dot svg {animation:hide-circle .2s linear forwards;}
.is-selected .bb-home-banner__dot svg {animation:show-circle .2s linear forwards;}
.bb-home-banner__dot svg .circle {animation:reset-circle var(--hb-transition) linear forwards;}
.is-selected .bb-home-banner__dot svg .circle {animation:run-circle var(--hb-transition) .2s linear forwards;}


/*********************************************
 * Home Banner Responsive
**********************************************/
@media only screen and (max-width:1800px) {
    .bb-home-banner {
        --bb-spacing-45:var(--bb-spacing-padding);
    }
    .bb-home-banner__content {--bb-spacing-80:50px;}
}
@media only screen and (max-width:1439px) {
    .bb-home-banner {
        --hb-spacing-content-left:var(--bb-gap-container);
        --hb-width-bottom-content:300px;
        --hb-width-button:200px;
        --hb-height-content-bottom-slider:80px;
        padding-bottom:var(--bb-spacing-padding);
    }
    .bb-home-banner__slide-content-title {padding-left:20px; padding-right:20px;}
    .bb-home-banner__content-bottom {padding:30px 20px;}
    .bb-home-banner__slide-content-button a {padding-right:55px;}
    .bb-home-banner__slide-content-button a:before {width:40px; line-height:40px;}
}
@media only screen and (max-width:1180px) {
    .bb-home-banner {
        --hb-spacing-padding-top:10px;
        --bb-size-h3:20px;
    }

    .bb-home-banner__inner:after {top:60px}
}
@media only screen and (max-width:1024px) {
    .bb-home-banner {
        --hb-height:clamp(350px, 72.5vh, 616px);
        --hb-height-content-bottom-slider:70px;
        --hb-width-dots:100%;
        --bb-spacing-45:40px;
        padding-bottom:var(--bb-spacing-45);
    }
    .bb-home-banner__inner:before {opacity:0;}
    .bb-home-banner__content-bottom {
        position:static;
        margin-top:var(--bb-spacing-padding); width:100%; border-radius:20px;
    }

    /* Slider */
    .bb-home-banner__slide-inner {
        border-radius:20px; overflow:hidden;
        padding-top:calc((var(--hb-height) + var(--hb-height-main-content)) / 2 + 6vh + 55px);
    }
    .bb-home-banner__slide-content-bottom {
        border:none; gap:20px;
        padding-left:var(--hb-spacing-content-left); padding-right:var(--hb-spacing-content-left);
    }
    .bb-home-banner__slide-content-title, .bb-home-banner__slide-content-button {padding-left:0; padding-right:0;}
    .bb-home-banner__slide-content-button {justify-content:flex-end;}
    .bb-home-banner__slide-content-button:before {display:none;}

    /* Dots */
    .bb-home-banner ol.flickity-page-dots {
        min-height:26px;
        bottom:var(--hb-height-content-bottom-slider); left:50%; transform:translateX(-50%);
        padding:0; border-right:none; width:unset;
    }
    .bb-home-banner ol.flickity-page-dots:before, .bb-home-banner ol.flickity-page-dots:after {
        content:""; display:block;
        width:calc(var(--bb-100vw) / 2 - 50%); height:1px; background:rgba(255, 255, 255, .5);
        position:absolute; top:50%; transform:translateY(-50%);
    }
    .bb-home-banner ol.flickity-page-dots:before {right:calc(100% + var(--bb-gap-container));}
    .bb-home-banner ol.flickity-page-dots:after {left:calc(100% + var(--bb-gap-container));}
}
@media only screen and (max-width:480px) {
    /* Content */
    .bb-home-banner__content {
        top:50%; transform:translateY(calc(-50% + 3vh)); bottom:auto;
        text-align:center;
    }

    /* Slider */
    .bb-home-banner__slide-content-button,
    .bb-home-banner__slide-content-title {width:auto;}
    .bb-home-banner__slide-content-button a {padding-right:40px; font-size:0;}
    .bb-home-banner__content-bottom {--bb-size-h3:25px;}
}