/* ==========================================================================
   Section 1:Banner (#banner) 
========================================================================== */#banner { position: relative; width: 100%; height: 100vh; min-height: 700px; overflow: hidden; background: #ffffff; display: flex; align-items: flex-end; padding-bottom: 120px; }
#banner .main-slider { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
#banner .item { position: relative; display: flex; align-items: center; padding-bottom: 120px; overflow: hidden; width: 100%; height: 100%; }
#banner .full-link { position: absolute; inset: 0; z-index: 20; }
#banner .img.banner-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.9; transform: scale(1.05); transition: transform 6s ease-out; z-index: 0; }
#banner .swiper-slide-active .img.banner-bg { transform: scale(1); animation: heroZoom 25s ease-out infinite alternate; }
#banner .swiper-slide-active .img.banner-bg video { object-position: 50% 50%; object-fit: cover; width: 100%; height: 100%; }
#banner .banner-overlay { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 40%,rgba(139,168,180,0.6) 100%); z-index: 1; pointer-events: none; }
#banner .banner-deco-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; flex-direction: column; justify-content: center; overflow: hidden; mix-blend-mode: hard-light; }
#banner .workframe.w-full { z-index: 3; }
#banner .deco-row { font-family: 'Poppins',sans-serif; font-size: 15vw; font-weight: 900; color: #d1e224; text-transform: uppercase; white-space: nowrap; line-height: 1; letter-spacing: 0.4em; opacity: 0.25; margin: -2vh 0; mix-blend-mode: overlay; text-shadow: 2px 2px 10px rgba(0,0,0,0.1); }
#banner .row-1 { transform: translateX(-5%); animation: scrollTextLeft 30s linear infinite; color: #a4f276; }
#banner .row-2 { transform: translateX(-15%); animation: scrollTextRight 35s linear infinite; }
#banner .info {position: relative;z-index: 10;width: min(650px,100%);pointer-events: auto;margin-left: 10vw;margin-top: 11vw;}
#banner .info .h3.hero-tag {display: inline-block;color: #ffffff;font-size: 60px;font-weight: 900;padding: 0;margin: 0 0 16px 0;letter-spacing: 0.05em;line-height: 1.4;box-shadow: 0 10px 25px rgba(0,0,0,0.08);text-shadow: 1px 4px 9px rgb(0 0 0/48%);}
#banner .banner-pagination-custom {display: flex;gap: 8px;margin-bottom: 24px;padding-left: 5px;z-index: 30;pointer-events: auto;align-items: center;height: 20px;position: absolute;bottom: 8vw;left: 10.5vw;}
#banner .banner-pagination-custom .swiper-pagination-bullet { display: block; width: 24px; height: 3px; background: #fff; border-radius: 2px; opacity: 0.4; margin: 0 !important; cursor: pointer; transition: all 0.3s; }
#banner .banner-pagination-custom .swiper-pagination-bullet-active { background: #d1e224; opacity: 1; }
#banner .hero-desc {color: #fff;font-size: 16px;line-height: 1.8;margin-bottom: 30px;font-weight: 400;text-shadow: 0 2px 4px rgba(0,0,0,0.3);letter-spacing: 0.05em;background-image: linear-gradient(135deg, rgb(63 179 94 / 66%) 0%, rgb(107 214 127 / 81%) 45%, rgb(255 193 7 / 82%) 100%);padding: 20px;border-radius: 20px 0;}
#banner .banner-static-elements { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 15; pointer-events: none; display: flex; align-items: center; }
#banner .banner-side-text { position: absolute; right: 24px; top: 50%; transform: translateY(0%); z-index: 15; text-align: right; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.4); pointer-events: none; border-left: #ffffff 2px solid; padding-left: 14px; }
#banner .banner-side-text-wrapper { transition-delay: 0.3s; width: 100%; }
#banner .side-title { font-size: 14px; font-weight: 400; letter-spacing: 0.1em; margin-bottom: 0; background: #43b358; text-align: center; padding: 5px 0; border-radius: 666px; text-shadow: none; }
#banner .side-sub { font-size: 24px; font-weight: 700; letter-spacing: 0.1em; }
#banner .scroll-indicator { position: absolute; bottom: 80px; right: 50px; display: flex; align-items: center; gap: 16px; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: 0.2em; z-index: 30; transform: rotate(90deg); transform-origin: right center; font-family: 'Poppins',sans-serif; text-shadow: 0 2px 4px rgba(0,0,0,0.5); text-decoration: none; cursor: pointer; transition: opacity 0.3s; pointer-events: auto; line-height: 1; justify-content: center; }
#banner .scroll-indicator:hover { opacity: 0.7; }
#banner .scroll-indicator .line { width: 80px; height: 2px; background: rgba(255,255,255,0.3); position: relative; overflow: hidden; }
#banner .scroll-indicator .line::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: #fff; animation: scrollLine 2s infinite ease-in-out; }
.banner-swiper { opacity: 0; visibility: hidden; transition: opacity .4s ease; }
.banner-swiper.is-ready { opacity: 1; visibility: visible; }
/* ==========================================================================
   Animations & Keyframes
========================================================================== */@keyframes heroZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.15); }
}
@keyframes scrollLine {
  0% { left: -100%; }
  100% { left: 100%; }
}
@keyframes scrollTextLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes scrollTextRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
@keyframes aboutFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
}
@keyframes aboutWaveMove {
  0% { background-position: 0 0; }
  100% { background-position: 84px 0; }
}
@keyframes badgeBreath {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes badgeRing {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@media (max-width:1024px) {
  #banner .swiper-slide { align-items: center; padding-bottom: 0; justify-content: center; }
  #banner .banner-inner { max-width: 100%; text-align: center; margin: 0 auto; }
  #banner .hero-tag-box { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  #banner .banner-pagination-custom { justify-content: center; padding-left: 0; display: none; }
  #banner .banner-side-text { display: none; }
}
@media screen and (max-width:768px) {
  #banner .deco-row { font-size: 20vw; }
  #banner .hero-tag { font-size: 28px; }
  #banner .info .h3.hero-tag {font-size: 34px;}
}
@media (max-width:640px) {
  #banner .hero-tag { font-size: 24px; padding: 4px 16px; }
  #banner .hero-desc { font-size: 14px; width: 90%; margin: 0 auto; }
  #banner .scroll-indicator {right: 47%;bottom: 40px;font-size: 10px;}
  #banner .banner-deco-layer { mix-blend-mode: unset; background: rgb(23 57 32/32%); }
  #banner .scroll-indicator .line{
    width: 26px;
}
}