/* banner */
#banner {padding: 0;width: 100%;z-index: 3;}
#banner .item {height: 100vh;}
#banner .main-slider { }
#banner .item .clip >* { min-width: 100%; width: 100%; }
#banner .item .clip .bgBox {}
#banner .item .clip iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .item .clip video { overflow: hidden; position: absolute; width: 100%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
#banner .item .info >div { margin: auto; width: calc(100% - 60px); }
#banner .item .info >div .txt { -webkit-transition-delay: .2s; transition-delay: .2s; transform: scaleX(0); -webkit-transform: scaleX(0); transform-origin: 0 0; -webkit-transform-origin: 0 0; }
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info >div .txt >* { padding: 10px 15px; max-width: calc(100% - 30px); font-size: 18px; }
#banner .item .info >div .txt h3 { margin-bottom: 15px; line-height: 120%; font-size: 35px; }

#banner .item.slick-current .clip .bgBox {-webkit-animation: scale_banner 6s linear infinite;animation: scale_banner 6s linear infinite;}
#banner .item.slick-current .info >div .txt { transform: scaleX(1); -webkit-transform: scaleX(1); }


#banner .item .Txt {z-index: 10;text-align: center;width: 100%;height: 100%;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;align-items: center;justify-content: center;align-content: center;}
#banner .item .Txt .badge { display: inline-block; background-color: var(--brand-primary); color: var(--white); padding: 0.5rem 1.5rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 900; margin-bottom: 2rem; letter-spacing: 0.2em; text-transform: uppercase; box-shadow: 0 25px 50px -12px rgba(54,72,89,0.5); }
#banner .item .Txt .title {font-size: 2.2rem;font-weight: 600;color: var(--white);margin-bottom: 1rem;line-height: 0.4;letter-spacing: 0.05em;text-shadow: 10px 10px 30px rgba(255,255,255,0.15),5px 5px 6px rgb(0 0 0);text-align: center;}
#banner .item .Txt .title .accent-text {color: #c3fffc;vertical-align: initial;font-size: 2.2rem;}
#banner .item .Txt .text {font-size: 1.25rem;color: var(--white);margin-bottom: 3rem;max-width: 20rem;margin-left: auto;margin-right: auto;font-weight: 500;line-height: 1.625;text-align: center;letter-spacing: 2px;}
#banner .item .Txt .hero-btns {display: flex;flex-direction: row;gap: 1.5rem;align-items: center;justify-content: center;}

/* Buttons */
#banner .item .Txt a {background-color: #12b508;color: var(--white);text-decoration: none;display: inline-flex;align-items: center;gap: 0.5rem;box-shadow: 0 10px 15px -3px rgba(54,72,89,0.3);padding: 1.05rem 2rem;font-size: 1.25rem;font-weight: 900;cursor: pointer;transition: all 0.3s ease;border-radius: 9999px;}
#banner .item .Txt a span { color: var(--white); font-weight: 600; letter-spacing: 2px; }
#banner .item .Txt a svg { width: 20px; height: 20px; color: #fff; }
#banner .item .Txt a.btn-line svg { fill: #fff; }
#banner .item .Txt a:hover { background-color: rgba(54,72,89,0.9); transform: scale(1.05); }
#banner .item .Txt a:active { transform: scale(0.95); }
#banner .item .Txt a i { width: 1rem; height: 1rem; color: var(--brand-secondary); }
#banner .item .Txt a .btn-large { padding: 1.25rem 3rem; border-radius: 1rem; font-size: 1.25rem; font-weight: 900; }
#banner .item .Txt a.btn-outline { background-color: rgba(255,255,255,0.1); backdrop-filter: blur(20px); color: var(--white); border: 1px solid rgba(255,255,255,0.2); }
#banner .item .Txt a.btn-outline:hover { background-color: rgba(255,255,255,0.2); transform: scale(1.05); }
#banner .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom,rgba(0,0,0,0.4),transparent,rgba(0,0,0,0.6)); z-index: 1; }
@media (min-width:1140px) {
  #banner .item .Txt .text { font-size: 1.4rem; }
  #banner .item .Txt .title,#banner .item .Txt .title .accent-text {font-size: 4rem;}
}
@media screen and (max-width: 1280px){
	#banner {padding-top: 80px;}
}
@media screen and (max-width: 1140px){
	#banner .item {height: 90vh;}
  #banner .item .Txt .title,#banner .item .Txt .title .accent-text {font-size: 2.4rem;}
}
@media screen and (max-width: 980px){
	#banner .item {height: 50vh;}
    #banner .item .clip .bgBox{background-position: 25% 50%;}
#banner .item .Txt a{
    padding: 1.05rem 1.2rem;
}
}

@media (max-width:640px) {
#banner .item .Txt a{
    padding: .55rem 1.2rem;
}
    #banner .item .Txt a span{font-size:14px;}
    #banner .item .Txt{top: 140px;}
  #banner .item .Txt .hero-btns {flex-direction: row;gap: .8rem;}
	#banner .item {height: 60vh;}
    #banner .item .Txt .text{margin-bottom: 1.5rem;}
    #banner .item .Txt .title{margin:0}
}