.about-hero{
      background: radial-gradient(900px 500px at 10% 10%, rgba(26,188,156,.18), transparent 55%),
                  radial-gradient(900px 500px at 90% 30%, rgba(52,152,219,.18), transparent 55%),
                  linear-gradient(135deg, var(--primary-color) 0%, #1a2530 100%);
      color:#fff;
      padding: 80px 0 60px;
      margin-bottom: 20px;
      position: relative;
      overflow:hidden;
    }
    .about-hero .badge{
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.18);
      font-weight: 600;
      padding: .55rem .9rem;
      border-radius: 999px;
    }
    .about-hero-title{
      font-family: 'Syne', sans-serif;
      font-weight: 500;
      letter-spacing: .1px;
      font-size: clamp(2rem, 4vw, 3.2rem);
      line-height: 1.1;
      margin: 14px 0 14px;
    }
    .about-hero-subtitle{
      opacity: .92;
      font-size: 1.1rem;
      max-width: 60ch;
    }
    
        
    
    
    .about-hero-card{
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 16px;
      padding: 22px;
      box-shadow: 0 20px 60px rgba(0,0,0,.25);
      backdrop-filter: blur(10px);
    }

    .about-section{
      padding: 40px 0;
    }

    .about-kpi{
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 14px;
      padding: 18px;
      height: 100%;
      background: #fff;
      box-shadow: 0 10px 24px rgba(0,0,0,.04);
    }
    .about-kpi .num{
      font-family: 'Syne', sans-serif;
      font-weight: 600;
      font-size: 1.8rem;
      color: var(--secondary-color);
      line-height: 1;
    }

    .about-card{
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 16px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 12px 30px rgba(0,0,0,.05);
      height: 100%;
    }
    .about-card .top{
      padding: 18px 18px 0 18px;
    }
    .about-card .icon{
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(26,188,156,.12);
      color: var(--accent-color);
      font-size: 1.3rem;
    }
    .about-card .body{
      padding: 14px 18px 18px;
    }

    .timeline{
      position: relative;
      padding-left: 18px;
    }
    .timeline:before{
      content:"";
      position:absolute;
      left: 7px;
      top: 6px;
      bottom: 6px;
      width: 2px;
      background: rgba(26,188,156,.35);
    }
    .timeline-item{
      position: relative;
      padding: 14px 14px 14px 22px;
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(0,0,0,.04);
      margin-bottom: 14px;
    }
    .timeline-item:before{
      content:"";
      position:absolute;
      left: -3px;
      top: 18px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--accent-color);
      box-shadow: 0 0 0 4px rgba(26,188,156,.18);
    }
    .timeline-item .year{
      font-family:'Syne',sans-serif;
      font-weight: 650;
      color: var(--primary-color);
      letter-spacing: .2px;
      font-size: 1.05rem;
      margin-bottom: 4px;
    }

    .value-pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      border: 1px solid rgba(0,0,0,.08);
      background: #fff;
      padding: 10px 12px;
      border-radius: 999px;
      margin: 6px 8px 0 0;
      box-shadow: 0 10px 24px rgba(0,0,0,.04);
    }
    .value-pill i{
      color: var(--accent-color);
    }

    .about-cta{
      background: rgba(26,188,156,.08);
      border: 1px solid rgba(26,188,156,.18);
      border-radius: 18px;
      padding: 26px;
    }
    
    /* How SEIPID Works (Process) */
    .process-wrap{
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 12px 30px rgba(0,0,0,.05);
      overflow: hidden;
    }
    
    .process-head{
      padding: 18px 18px 12px;
      border-bottom: 1px solid rgba(0,0,0,.06);
    }
    
    .process-head h3{
      margin: 0;
      font-family: 'Syne', sans-serif;
      font-weight: 650;
      color: var(--primary-color);
    }
    
    .process-head p{
      margin: 6px 0 0;
    }
    
    .process-steps{
      padding: 16px 18px 18px;
    }
    
    .process-step{
      display: flex;
      gap: 14px;
      padding: 14px;
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(0,0,0,.04);
      margin-bottom: 12px;
    }
    
    .process-step:last-child{ margin-bottom: 0; }
    
    .step-badge{
      flex: 0 0 auto;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(26,188,156,.12);
      color: var(--accent-color);
      font-size: 1.1rem;
    }
    
    .step-title{
      font-weight: 650;
      color: var(--primary-color);
      margin-bottom: 4px;
    }
    
    .step-meta{
      font-size: .92rem;
      color: #6c757d;
      margin: 0;
    }
    
    .process-note{
      margin-top: 14px;
      padding: 14px 16px;
      border-radius: 14px;
      border: 1px solid rgba(26,188,156,.18);
      background: rgba(26,188,156,.08);
    }


    @media (max-width: 768px){
      .about-hero{ padding: 60px 0 45px; }
    }
    
    <!-- About Page Specific CSS -->
        .sectionx-heading {
            color: var(--primary-color);
            font-weight: 700;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .sectionx-heading:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background-color: var(--accent-color);
        }
        
        .about-content {
            line-height: 1.8;
            font-size: 1.1rem;
        }
        
        .mission-visionn-card {
            border: none;
            border-radius: 10px;
            padding: 30px;
            height: 100%;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            transition: transform 0.3s;
        }
        
        .mission-visionn-card:hover {
            transform: translateY(-5px);
        }
        
        .mission-visionn-card .card-icon {
            font-size: 1.8rem;
            color: var(--accent-color);
            margin-bottom: 15px;
        }
        
        .timelines {
            position: relative;
            padding-left: 30px;
        }
        
        .timelines:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--accent-color);
        }
        
        .timelines-item {
            position: relative;
            margin-bottom: 10px;
        }
        
        .timelines-item:before {
            content: '';
            position: absolute;
            left: -36px;
            top: 5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--accent-color);
            border: 3px solid white;
            box-shadow: 0 0 0 3px var(--accent-color);
        }
        
        .value-card {
            text-align: center;
            padding: 30px 20px;
            border-radius: 10px;
            background: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            height: 100%;
            transition: all 0.3s;
        }
        
        .value-card:hover {
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        
        .value-icon {
            font-size: 2.5rem;
            color: var(--accent-color);
            margin-bottom: 20px;
        }
    
    
    /* =========================
   WHY SEIPID Sections
    ========================= */
    .why-seipid{
      position: relative;
      padding-top: 10px;
    }
    
    .why-seipid-alt{
      padding-top: 0;
    }
    
    .why-row{
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 12px 30px rgba(0,0,0,.05);
      padding: 22px;
    }
    
    .why-row-reverse{
      /* reverse layout on desktop only */
    }
    
    .why-points{
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }
    
    .why-point{
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 14px;
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(0,0,0,.04);
    }
    
    .why-point i{
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(26,188,156,.12);
      color: var(--accent-color);
      font-size: 1.1rem;
      flex: 0 0 auto;
    }
    
    .why-title{
      font-weight: 650;
      color: var(--primary-color);
      margin-bottom: 4px;
    }
    
    .why-text{
      color: #6c757d;
      font-size: .95rem;
      margin: 0;
    }
    
    /* Visual Side */
    .why-visual{
      position: relative;
      min-height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .why-icon-bubble{
      position: absolute;
      top: 8px;
      right: 10px;
      width: 58px;
      height: 58px;
      border-radius: 18px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(26,188,156,.14);
      color: var(--accent-color);
      box-shadow: 0 12px 30px rgba(0,0,0,.08);
      border: 1px solid rgba(26,188,156,.20);
    }
    
    .why-icon-bubble i{
      font-size: 1.45rem;
    }
    
    .why-visual-left .why-icon-bubble{
      left: 10px;
      right: auto;
    }
    
    .why-visual-card{
      width: 100%;
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 16px;
      padding: 18px;
      background: radial-gradient(800px 400px at 20% 20%, rgba(26,188,156,.10), transparent 55%),
                  radial-gradient(800px 400px at 80% 30%, rgba(52,152,219,.10), transparent 55%),
                  #fff;
      box-shadow: 0 18px 46px rgba(0,0,0,.07);
    }
    
    .why-visual-card .mono{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(0,0,0,.04);
      display: inline-block;
      margin-top: 8px;
      color: #1f2d3d;
    }
    
    /* Mini grid (Section 2) */
    .why-mini-grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 12px;
      margin-top: 16px;
    }
    
    .mini-card{
      display:flex;
      gap: 12px;
      padding: 14px;
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(0,0,0,.04);
    }
    
    .mini-ico{
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(52,152,219,.12);
      color: var(--secondary-color);
      font-size: 1.05rem;
      flex: 0 0 auto;
    }
    
    .mini-title{
      font-weight: 650;
      color: var(--primary-color);
      margin-bottom: 4px;
    }
    
    .mini-text{
      color: #6c757d;
      font-size: .95rem;
      margin: 0;
    }
    
    /* =========================
       Scroll Reveal Animations
    ========================= */
    .reveal-on-scroll{
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .55s ease, transform .55s ease;
    }
    
    .reveal-on-scroll.is-visible{
      opacity: 1;
      transform: translateY(0);
    }
    
    /* Left / right emphasis */
    .why-row .col-lg-7{
      opacity: 0;
      transform: translateX(-18px);
      transition: opacity .6s ease, transform .6s ease;
    }
    .why-row .col-lg-5{
      opacity: 0;
      transform: translateX(18px);
      transition: opacity .6s ease, transform .6s ease;
    }
    
    .reveal-on-scroll.is-visible .col-lg-7,
    .reveal-on-scroll.is-visible .col-lg-5{
      opacity: 1;
      transform: translateX(0);
    }
    
    /* Reverse section: icon first */
    .why-row-reverse .col-lg-5{ transform: translateX(-18px); }
    .why-row-reverse .col-lg-7{ transform: translateX(18px); }
    
    @media (max-width: 991px){
      .why-row{
        padding: 18px;
      }
      .why-mini-grid{
        grid-template-columns: 1fr;
      }
      .why-visual{
        min-height: 180px;
      }
      /* On mobile: remove left/right slide to avoid weirdness */
      .why-row .col-lg-7,
      .why-row .col-lg-5,
      .why-row-reverse .col-lg-5,
      .why-row-reverse .col-lg-7{
        transform: translateY(10px);
      }
      .reveal-on-scroll.is-visible .col-lg-7,
      .reveal-on-scroll.is-visible .col-lg-5{
        transform: translateY(0);
      }
    }