/* ========================================
   ABOUT HERO SECTION (Unified)
   ======================================== */

.about-hero{ position:relative; min-height:25vh; display:flex; align-items:center; overflow:hidden; background: linear-gradient(135deg, #0b5ed7 0%, #1d6fe2 25%, #1e88f7 50%, #1665c1 75%, #0a58ca 100%); }

.about-hero-bg{ position:relative; width:100%; height:100%; background:
  linear-gradient(135deg, rgba(11,94,215,.75) 0%, rgba(29,111,226,.6) 25%, rgba(30,136,247,.6) 75%, rgba(10,88,202,.75) 100%),
  url('/img/hero/hero-2.jpg') center/cover no-repeat; }

.about-hero-overlay{ position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.25); z-index:1; }

.floating-elements{ position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; z-index:2; }
.floating-icon{ position:absolute; color:rgba(255,255,255,0.1); animation:float 6s ease-in-out infinite; }
.floating-elements .floating-icon:nth-child(1){ top:10%; left:10%; animation-delay:0s; }
.floating-elements .floating-icon:nth-child(2){ top:20%; right:15%; animation-delay:1s; }
.floating-elements .floating-icon:nth-child(3){ bottom:30%; left:5%; animation-delay:2s; }
.floating-elements .floating-icon:nth-child(4){ bottom:20%; right:20%; animation-delay:3s; }
.floating-elements .floating-icon:nth-child(5){ top:50%; left:50%; animation-delay:4s; }

.about-content-wrapper{ background:rgba(6, 44, 92, .9); border-radius:20px; padding:3rem; backdrop-filter:blur(10px); box-shadow:0 20px 60px rgba(0,0,0,.3); position:relative; z-index:10; }
.about-content{ position:relative; z-index:10; text-align:center; }
.about-title{ font-weight:800; letter-spacing:-1px; }
.eyebrow{ font-weight:600; letter-spacing:1px; text-transform:uppercase; font-size:.9rem; }

.hero-buttons .btn{ padding:.95rem 1.65rem; font-weight:600; border-radius:999px; transition:all .3s ease; }
.hero-buttons .btn:hover{ transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,.15); }

.about-stats-section{ margin-top:3rem; padding-top:2rem; }
.stat-item{ text-align:center; color:white; }
.stat-number{ display:block; font-size:2rem; font-weight:800; margin-bottom:.5rem; }
.stat-label{ font-size:.9rem; opacity:.9; }

@keyframes float{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-20px) rotate(180deg); } }

@media (max-width:768px){
  .about-hero{ min-height:25vh; }
  .about-content-wrapper{ padding:2rem; margin:1rem; }
  .hero-buttons{ display:flex; flex-direction:column; gap:1rem; }
  .hero-buttons .btn{ width:100%; }
  .about-stats-section{ margin-top:2rem; padding-top:1.5rem; }
  .stat-number{ font-size:1.5rem; }
  .floating-elements{ display:none; }
}
