/* ==========================================================================
   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(580px,100%);pointer-events: auto;margin-left: 10vw;margin-top: 21vw;}
#banner .btn-primary.mt-20{display:none;}
#banner .info .h3.hero-tag {display: inline-block;color: #ffffff;font-size: 2.5rem;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: #ffffff;font-size: 16px;line-height: 1.8;margin-bottom: 10px;font-weight: 400;text-shadow: 0 2px 4px rgba(0,0,0,0.3);letter-spacing: 0.05em;background-image: linear-gradient(89deg, rgb(55 145 71 / 70%) 0%, rgb(65 150 81 / 77%) 45%, rgb(0 0 0 / 0%) 100%);padding: 20px;border-radius: 0px 0;border-left: rgb(255 255 255 / 61%) 3px solid;}

#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: -10vw;transform: translateY(-6vw);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;background: linear-gradient(89deg, rgb(55 145 71 / 57%) 0%, rgb(65 150 81 / 56%) 45%, rgb(0 0 0 / 0%) 100%);padding: 11px 20px;}
#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;text-align: left;padding: 0;border-radius: 666px;text-shadow: none;}
#banner .side-sub {font-size: 1.25rem;font-weight: 500;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:1470px){
  #banner .info{margin-left: 5vw;margin-top: 20vw;}
  #banner .banner-side-text{right: 0vw;transform: translateY(-8vw);}
}
@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;padding: 20px 10px;text-align: center;}
  #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;}
}