/* ================= ABOUT SECTION ================= */
.about-section{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(40px,8vw,100px);
  padding:clamp(50px,6vw,80px) 16px;
  background:url('assets/images/a4.webp') center / cover no-repeat;
  color:#fff;
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  isolation:isolate;
}

/* ================= IMAGE STACK ================= */
.image-stack{
  position:relative;
  width:400px;
  height:500px;
  flex-shrink:0;
}

.diamond{
  position:absolute;
  width:300px;
  height:300px;
  overflow:hidden;
  transform:rotate(45deg);
  border:4px solid #130b2b;
  background:#000;
}

.diamond img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:rotate(-45deg) scale(1.1);
}

/* Positions */
.diamond.main{
  top:0;
  left:50px;
  z-index:2;
}

.diamond.second,
.diamond.third{
  width:200px;
  height:200px;
  bottom:50px;
  filter:grayscale(100%);
  opacity:.9;
}

.diamond.second{ left:-40px; }
.diamond.third{ right:-40px; }

/* ================= CONTENT ================= */
.about-content{
  max-width:560px;
  contain:layout style;
}

.about-content h1{
  font-size:36px;
  letter-spacing:2px;
  margin:0 0 8px;
}

.about-content .highlight{
  color:#ffd700;
}

.about-content h2{
  font-size:48px;
  color:#c94c7b;
  margin:0 0 24px;
  line-height:1.2;
}

.about-content p{
  font-size:15px;
  line-height:1.8;
  margin-bottom:20px;
  color:#e0e0e0;
}

/* ================= STATS ================= */
.about-stats{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:8px;
}

.experience{
  font-size:50px;
  font-weight:700;
  color:#3b9df5;
  line-height:1;
}

.years{
  font-size:22px;
  color:#bbb;
}

.years strong{
  color:#fff;
}

/* ================= BUTTON ================= */
.about-btn{
  display:inline-block;
  margin-top:30px;
  padding:12px 32px;
  border:2px solid #c94c7b;
  border-radius:50px;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition:background-color .25s ease, color .25s ease;
}

.about-btn:hover{
  background:#c94c7b;
  color:#fff;
}

.about-btn:focus-visible{
  outline:3px solid #ffd700;
  outline-offset:4px;
}

/* ================= RESPONSIVE ================= */
@media (max-width:768px){
  .about-section{
    flex-direction:column;
    text-align:center;
  }

  .image-stack{
    width:260px;
    height:330px;
  }

  .diamond.main{
    width:200px;
    height:200px;
    left:30px;
  }

  .diamond.second,
  .diamond.third{
    width:130px;
    height:130px;
    bottom:20px;
  }

  .diamond.second{ left:-20px; }
  .diamond.third{ right:-20px; }

  .about-content h2{ font-size:32px; }
  .experience{ font-size:40px; }
  .years{ font-size:18px; }
}