.about-hero{
  position:relative;
  width:100%;
  background:#000;      /* side gap হলে সুন্দর দেখাবে */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 0;       /* height এর বদলে padding */
}

}

/* dark overlay */
.about-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

/* heading */
.about-hero h1{
  position:relative;
  z-index:2;
  color:#fff;
  font-size:42px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
}


.about-content{
  max-width:1100px;
  margin:60px auto;
  padding:0 20px;
  font-family:'Poppins', Arial, sans-serif;
}


.about-content p{
  font-size:16px;
  line-height:1.9;
  color:#444;
  margin-bottom:22px;
  text-align:justify;
}

.about-content strong{
  color:#c49b63;   /* premium gold */
  font-weight:600;
}

.about-content p{
  opacity:0;
  transform:translateY(20px);
  animation:fadeUp .8s ease forwards;
}

.about-content p:nth-child(1){animation-delay:.2s}
.about-content p:nth-child(2){animation-delay:.4s}
.about-content p:nth-child(3){animation-delay:.6s}
.about-content p:nth-child(4){animation-delay:.8s}

@keyframes fadeUp{
  to{
    opacity:1;
    transform:none;
  }
}

@media(max-width:768px){
  .about-hero{
    height:220px;
  }

  .about-hero h1{
    font-size:28px;
    text-align:center;
    padding:0 15px;
  }

  .about-content p{
    font-size:15px;
  }
}