body { 
       font-family: 'Poppins', sans-serif; scroll-behavior: smooth; 
      scroll-behavior: smooth; 
      line-height: 1.0;
    }
    .hero-bg { 
      background: linear-gradient(135deg, 
        rgba(0, 32, 96, 0.9) 0%, 
        rgba(0, 64, 133, 0.85) 30%,
        rgba(220, 38, 38, 0.75) 70%,
        rgba(127, 167, 196, 0.65) 100%),
        url('images/8.jpg') center/cover; 
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
    }
    .hero-bg::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(220, 38, 38, 0.2) 0%, transparent 50%),
        linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 100%);
    }
    .hero-content {
      position: relative;
      z-index: 10;
    }
    .hero-badge {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }
    .hero-title {
      text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      letter-spacing: -0.02em;
    }
    .hero-description {
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    .hero-buttons {
      gap: 1.5rem;
    }
    .hero-btn {
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(10px);
    }
    .hero-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s;
    }
    .hero-btn:hover::before {
      left: 100%;
    }
    .floating-shapes {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      z-index: 1;
    }
    .shape {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      animation: float 6s ease-in-out infinite;
    }
    .shape:nth-child(1) {
      width: 80px;
      height: 80px;
      top: 20%;
      left: 10%;
      animation-delay: 0s;
    }
    .shape:nth-child(2) {
      width: 60px;
      height: 60px;
      top: 60%;
      right: 10%;
      animation-delay: 2s;
    }
    .shape:nth-child(3) {
      width: 40px;
      height: 40px;
      bottom: 20%;
      left: 30%;
      animation-delay: 4s;
    }
    .about-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    .about-image-wrapper {
      position: relative;
      overflow: hidden;
    }
    .about-image-wrapper::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);
      border-radius: 1.5rem;
      z-index: -1;
      animation: gradient-rotate 3s linear infinite;
    }
    @keyframes gradient-rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .about-stat {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .value-item {
      position: relative;
      overflow: hidden;
    }
    .value-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
      transition: left 0.5s;
    }
    .value-item:hover::before {
      left: 100%;
    }
    .text-gradient {
      background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .btn-primary {
      background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
    }
    .btn-secondary {
      background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
    }
    .btn-secondary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
    }
    .card-hover {
      transition: all 0.3s ease;
      border: 1px solid transparent;
    }
    .card-hover:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      border-color: #3b82f6;
    }
    .section-gradient {
      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    }
    .header-sticky {
      backdrop-filter: blur(10px);
      background: rgba(220, 38, 38, 0.95);
    }