/* Wonjuvet — Responsive */
@media (max-width:1199.98px){
  .section{padding:70px 0}
  .hero{min-height:80vh}
}
@media (max-width:991.98px){
  .topbar{font-size:.72rem;padding:6px 0}
  .topbar .tb-left span{margin-right:12px;font-size:.7rem}
  .topbar .tb-left span:nth-child(3){display:none}
  .navbar-c{padding:8px 0}
  .navbar-c .navbar-brand img{height:60px}
  .navbar-c .navbar-collapse{
    background:#fff;padding:14px 10px;border-radius:0;margin-top:12px;
    box-shadow:0 10px 30px rgba(10,77,140,.12);
    border-top:3px solid var(--secondary);
  }
  .navbar-c .navbar-nav{gap:2px}
  .navbar-c .nav-link{
    margin:0;padding:12px 16px!important;border-left:3px solid transparent;
    transition:var(--transition);
  }
  .navbar-c .nav-link::after{display:none}
  .navbar-c .nav-link:hover,.navbar-c .nav-link.active{
    background:var(--brand-gradient-soft);border-left-color:var(--secondary);
    color:var(--primary)!important;padding-left:22px!important;
  }
  .lang-switch{margin:14px 16px 4px;width:fit-content}
  .hero{text-align:center;min-height:70vh;padding:120px 0 80px}
  .hero p.lead{margin-left:auto;margin-right:auto}
  .section{padding:60px 0}
  .timeline::before{left:20px}
  .timeline-item{width:100%;left:0!important;padding:14px 20px 14px 50px;text-align:left!important}
  .timeline-item .dot{left:12px!important;right:auto!important}
  .about-img{margin-bottom:30px}
  .page-hero{padding:120px 0 60px}
  .footer .brand img{height:64px}
}
@media (max-width:767.98px){
  .section{padding:50px 0}
  .section-title{margin-bottom:40px}
  .hero h1{font-size:2rem}
  .hero p.lead{font-size:1rem}
  .stat-item .num{font-size:2.2rem}
  .contact-card{padding:24px}
  .cta-section{padding:50px 20px}
  .footer{padding:50px 0 0}
  .feature-card{padding:28px 22px}
  #backToTop{bottom:20px;right:20px;width:42px;height:42px}
  .hero-title{font-size:1.7rem}
  .hero-sub{font-size:.9rem;margin-bottom:20px}
  .btn-hero{padding:11px 22px;font-size:.78rem;min-width:140px}
  .hero-eyebrow{font-size:.7rem;letter-spacing:2px}
}
@media (max-width:575.98px){
  .topbar .tb-left span:nth-child(2){display:none}
  .topbar .tb-right a{margin-left:10px}
  .hero{min-height:auto;padding:110px 0 60px}
  .hero h1{font-size:1.75rem}
  .section-title h2{font-size:1.6rem}
  .navbar-c .navbar-brand img{height:54px}
  .btn-primary-c,.btn-secondary-c,.btn-outline-c{padding:10px 22px;font-size:.9rem}
  .hero-actions{gap:10px}
  .btn-hero{min-width:0;flex:1 1 45%}
  .footer .brand img{height:58px}
}