.home-banner{ margin-top: 5px; margin-bottom: 15px}
.embla { }
.embla__viewport { width: 100%;}
.embla__viewport.is-draggable {cursor: move;cursor: grab;}
.embla__viewport.is-dragging {cursor: grabbing;}
.embla__container {display: flex;user-select: none;-webkit-touch-callout: none; -khtml-user-select: none; -webkit-tap-highlight-color: transparent;}
.embla__slide { position: relative; flex: 0 0 100%; }
.embla__slide img{ width: 100%; max-width: 100%;     height: 220px;object-fit: cover}

.home-banner .embla{ overflow: hidden;  }
.home-banner .embla__slide{   opacity: 0.2; -webkit-transition: opacity 1s ease; transition: opacity 1s ease;}
.home-banner .embla__slide.is-selected{ opacity: 1}

.home-banner .slide-text{position: absolute;z-index: 10;background: #00a7e15c;top: 70px;bottom: 40px; left: 0; right: 0; margin: auto; display: flex; padding: 20px; flex-direction: column; justify-content: center; color: #fff;}
.home-banner .slide-text span{display: block}
.home-banner .slide-text span:nth-child(1){ font-size: 22px; font-weight: 700}
.home-banner .slide-text span:nth-child(2){ font-size: 18px; font-weight: 600; padding-left: 15px}
.home-banner .slide-text span:nth-child(3){ font-size: 14px; margin-top: 10px}
.home-banner .slide-text img{ display: block; position: absolute; width: 100px; height: auto; right: 20px; top: -40px; object-fit: unset}

.home-banner .slide-text-delivery{position: absolute;z-index: 10;top: 20px;bottom: 20px; left: 0;   margin: auto; display: flex; flex-direction: column; justify-content: center; color: #fff; width: 240px;}
.home-banner .slide-text-delivery span{ padding-left: 20px}
.home-banner .slide-text-delivery span:nth-child(1){ font-size: 22px; padding-top: 5px; padding-bottom: 5px; font-weight: 700; background: rgb(228 61 58 / 69%); border-radius: 0 60px 60px 0}
.home-banner .slide-text-delivery span:nth-child(2){ font-size: 16px; padding-top: 15px; padding-bottom: 15px; font-weight: 700; }
.home-banner .slide-text-delivery span:nth-child(3){ font-size: 13px;  font-weight: 300;  padding-top: 10px; border-top: 1px solid #fff; line-height: 1.3; padding-left: 0; margin-left: 20px}


.home-banner .slide-text-opt{position: absolute;z-index: 10;top: 20px;bottom: 20px; left: 0;   margin: auto; display: flex; flex-direction: column; justify-content: center;  width: 280px;}
.home-banner .slide-text-opt { padding-left: 20px}
.home-banner .slide-text-opt span:nth-child(1){ font-size: 28px; padding-top: 5px;  font-weight: 900;  border-radius: 0 60px 60px 0; line-height: 1.1}
.home-banner .slide-text-opt span:nth-child(2){ font-size: 18px;  padding-bottom: 15px; font-weight: 300;  }
.home-banner .slide-text-opt a{ font-size: 13px;  font-weight: 600; background: rgb(228 61 58 / 69%); color: #fff; display: block;     width: 140px;padding: 10px 15px;border-radius: 20px;text-align: center; box-shadow: 0px 16px 7px -9px rgb(43 65 92 / 18%)  }



.home-banner .embla__button{ display: block;   width: 24px; height: 24px; position: absolute; border: 1px solid #fff; background: none;
    margin: auto; bottom: 20px; cursor: pointer}
.home-banner .embla__button.hide{ opacity: .5}

.home-banner .embla__button svg{ display: block; width:60%; height: auto; position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto }
.home-banner .embla__button--next{ right: 15px;}
.home-banner .embla__button--prev{ right: 55px; transform: rotate(180deg)}

/***/
.home-slider-nav .nav-slider-item{ padding: 10px;   font-size: 13px; flex-basis: 50%; color: rgb(40 41 42 / 70%); cursor: pointer}
.home-slider-nav .nav-slider-item.is-selected{  color: rgb(40 41 42 / 100%)}
.home-slider-nav .nav-slider-item:before,
.home-slider-nav .nav-slider-item:after{ content:""; display: block; position: absolute; bottom: 0; height: 5px;  }
.home-slider-nav .nav-slider-item:before{ left: 50%; right: 50%; transition: all .3s ease; background: #28292A; opacity: 0 }
.home-slider-nav .nav-slider-item:after{background: rgba(0, 167, 225, 0.3); left: 0; right: 0; }
.home-slider-nav .nav-slider-item.is-selected:before{ left: 0; right: 0; opacity: 1 }
.home-slider-nav .nav-slider-item.is-selected:before{ left: 0; right: 0; opacity: 1 }


@media only screen and (min-width: 480px) {

    .home-banner .slide-text img{ width: 140px;}
    .home-banner .slide-text span:nth-child(1){ font-size: 24px; line-height: 1}

}

@media only screen and (min-width: 768px) {
    .home-banner .embla__slide img{ height: auto}
    .home-banner .slide-text {padding: 20px 200px 20px 60px; height: 120px; top: auto; bottom: 40px}
    .home-banner .slide-text span:nth-child(1){ font-size: 42px;}
    .home-banner .slide-text span:nth-child(2){ font-size: 28px;}
    .home-banner .slide-text img{ width: 200px; right: 60px}

    .home-banner .slide-text-delivery{ width: 360px}
    .home-banner .slide-text-delivery span{ padding-left: 80px}
    .home-banner .slide-text-delivery span:nth-child(1){ font-size: 26px; padding-top: 10px; padding-bottom: 10px; }
    .home-banner .slide-text-delivery span:nth-child(2){ font-size: 18px;  }
    .home-banner .slide-text-delivery span:nth-child(3){ font-size: 14px;   padding-top: 10px;   padding-left: 0; margin-left:80px}

    .home-banner .slide-text-opt { padding-left: 100px; max-width: none; width: auto; line-height: 1.1 }
    .home-banner .slide-text-opt span:nth-child(1) { font-size: 36px}
    .home-banner .slide-text-opt span:nth-child(2) { font-size: 26px}
    .home-banner .slide-text-opt a{ margin-top: 20px}




    .home-slider-nav .nav-slider-item{ text-align: center; padding: 15px 10px }

    .home-banner .embla__button{ width: 32px; height: 32px;  top: calc(50% - 13px); bottom: auto;}
    .home-banner .embla__button--next{ right: 15px;}
    .home-banner .embla__button--prev{ left: 15px; right: auto}

}
@media only screen and (min-width: 1024px) {
    .home-banner .slide-text {padding: 20px 250px 20px 80px; height: 140px;  bottom: 80px}
    .home-banner .slide-text span:nth-child(1){ font-size: 52px;}
    .home-banner .slide-text span:nth-child(2){ font-size: 32px; line-height: 1}
    .home-banner .slide-text span:nth-child(3){ font-size: 18px;}
    .home-banner .slide-text img{ width: 270px; right: 80px}

    .home-banner .slide-text-delivery{ width: 480px; bottom: 70px}
    .home-banner .slide-text-delivery span{ padding-left: 110px}
    .home-banner .slide-text-delivery span:nth-child(1){ font-size: 32px;  }
    .home-banner .slide-text-delivery span:nth-child(2){ font-size: 22px;  padding-top: 20px;padding-bottom: 20px;}
    .home-banner .slide-text-delivery span:nth-child(3){ font-size: 16px;   padding-top: 15px;   padding-left: 0; margin-left:110px}

    .home-slider-nav .nav-slider-item{ font-size: 14px;  padding: 20px 10px }

    .home-banner .slide-text-opt { padding-left: 150px;  }
    .home-banner .slide-text-opt span:nth-child(1) { font-size: 66px}
    .home-banner .slide-text-opt span:nth-child(2) { font-size: 38px}
    .home-banner .slide-text-opt a{ margin-top: 20px; padding: 15px}


}

@media only screen and (min-width: 1320px) {
    .home-banner .embla{  border-radius: 6px;}

    .home-banner .slide-text {padding: 40px 600px 40px 140px; height: 160px;  bottom: 80px}
    .home-banner .slide-text span:nth-child(1){ font-size: 62px;}
    .home-banner .slide-text span:nth-child(2){ font-size: 42px; padding-left: 40px}
    .home-banner .slide-text span:nth-child(3){ font-size: 22px;}
    .home-banner .slide-text img{width: 400px;right: 130px;top: auto;bottom: -40px;}
    .home-slider-nav .nav-slider-item{ font-size: 16px;  padding: 20px 10px }

    .home-banner .slide-text-delivery{ width: 640px; bottom: 70px}
    .home-banner .slide-text-delivery span{ padding-left: 160px}
    .home-banner .slide-text-delivery span:nth-child(1){ font-size: 46px; line-height: 1.2  }
    .home-banner .slide-text-delivery span:nth-child(2){ font-size: 30px;  padding-top: 30px; padding-bottom: 30px}
    .home-banner .slide-text-delivery span:nth-child(3){ font-size: 20px;     padding-left: 0; margin-left:160px}

    .home-banner .embla__button{ width: 34px; height: 34px;}
    .home-banner .embla__button--next{ right: 25px;}
    .home-banner .embla__button--prev{ left: 25px;}
}