body{
  background:#fff;
  color:#222;
  font-family:'Poppins', sans-serif;
}

/* ================= HERO ================= */

.about-hero{
  height:80vh;
  background:
  linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
  url("/assets/aboutus.png") center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:80px;
}

.about-hero h1{
  font-size:56px;
  font-weight:800;
  color:#ffffff;
}

.about-hero p{
  font-size:18px;
  color:#fff;
}


/* ================= ABOUT SECTION ================= */

.about-section{
  padding:70px 8%;
  background:
    linear-gradient(135deg, rgba(138,92,255,.05), rgba(255,255,255,.95)),
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,.03) 0,
      rgba(0,0,0,.03) 1px,
      transparent 1px,
      transparent 30px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(0,0,0,.03) 0,
      rgba(0,0,0,.03) 1px,
      transparent 1px,
      transparent 30px
    );
}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.about-image img{
  width:100%;
  border-radius:16px;
  box-shadow:
  0 10px 25px rgba(0,0,0,.12),
  0 0 25px rgba(184,92,255,.25);
}

.about-text h2{
  font-size:36px;
  margin-bottom:15px;
  color:#5f2cff;
}

.about-text h2::after{
  content:"";
  display:block;
  width:90px;
  height:3px;
  margin-top:12px;
  border-radius:3px;
  background: linear-gradient(90deg,#b85cff,#4f8cff);
}


.about-text p{
  color:#444;
  line-height:1.8;
  margin-bottom:18px;
}


/* ================= STATS ================= */

.about-stats{
  padding:80px 8%;
  background:
    linear-gradient(135deg, rgba(138,92,255,.04), rgba(255,255,255,.95)),
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,.03) 0,
      rgba(0,0,0,.03) 1px,
      transparent 1px,
      transparent 30px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(0,0,0,.03) 0,
      rgba(0,0,0,.03) 1px,
      transparent 1px,
      transparent 30px
    );
}

.stats-grid{
  display:flex;
  justify-content:center;
  gap:80px;
  text-align:center;
}

.stat h3{
  font-size:42px;
  background:linear-gradient(90deg,#b85cff,#4f8cff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.stat p{
  color:#555;
}


/* ================= RESPONSIVE ================= */

@media(max-width:768px){

.about-grid{
  grid-template-columns:1fr;
}

.about-hero h1{
  font-size:36px;
}

.stats-grid{
  flex-direction:column;
  gap:40px;
}