/* =========================
   ABOUT PAGE
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Inter',sans-serif;
  background:#050816;
  color:#fff;
  overflow-x:hidden;
}

/* MAIN SECTION */

.about-page{

  max-width:1300px;

  margin:auto;

  padding:120px 50px 80px;
}

/* HEADER */

.about-header{

  text-align:center;

  margin-bottom:70px;
}

.about-header h1{

  font-size:3.5rem;

  margin-bottom:20px;

  background:
    linear-gradient(
      90deg,
      #ffffff,
      #8b5cf6
    );

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;
}

.about-header p{

  max-width:750px;

  margin:auto;

  color:#94a3b8;

  line-height:1.8;

  font-size:1.05rem;
}

/* CONTENT */

.about-container{

  display:grid;

  grid-template-columns:
  350px 1fr;

  gap:40px;

  align-items:center;
}

/* IMAGE */

.about-image{

  text-align:center;
}

.about-image img{

  width:100%;

  max-width:320px;

  border-radius:30px;

  border:
    2px solid rgba(139,92,246,.4);

  box-shadow:
    0 0 40px rgba(139,92,246,.25);
}

/* CARD */

.about-content{

  background:
    rgba(255,255,255,.03);

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:28px;

  padding:40px;

  backdrop-filter:blur(15px);
}

.about-content h2{

  font-size:2rem;

  margin-bottom:20px;
}

.about-content p{

  color:#cbd5e1;

  line-height:1.9;

  margin-bottom:18px;
}

/* HIGHLIGHTS */

.about-highlights{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(180px,1fr));

  gap:20px;

  margin-top:30px;
}

.highlight-box{

  background:
    rgba(255,255,255,.04);

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:18px;

  padding:25px;

  text-align:center;

  transition:.4s;
}

.highlight-box:hover{

  transform:
    translateY(-8px);

  border-color:
    rgba(139,92,246,.4);

  box-shadow:
    0 0 25px rgba(139,92,246,.18);
}

.highlight-box i{

  font-size:2rem;

  color:#8b5cf6;

  margin-bottom:12px;
}

.highlight-box h3{

  font-size:1.4rem;

  margin-bottom:8px;
}

.highlight-box span{

  color:#94a3b8;
}

/* EXPERIENCE */

.about-timeline{

  margin-top:70px;
}

.about-timeline h2{

  text-align:center;

  margin-bottom:40px;

  font-size:2rem;
}

.timeline-item{

  background:
    rgba(255,255,255,.03);

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:20px;

  padding:25px;

  margin-bottom:20px;

  transition:.4s;
}

.timeline-item:hover{

  transform:
    translateX(8px);

  border-color:
    rgba(139,92,246,.4);
}

.timeline-item h3{

  margin-bottom:8px;
}

.timeline-item span{

  color:#8b5cf6;

  font-size:.9rem;
}

.timeline-item p{

  color:#94a3b8;

  margin-top:10px;

  line-height:1.7;
}

/* BUTTON */

.about-btn{

  text-align:center;

  margin-top:60px;
}

.about-btn a{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:15px 30px;

  border-radius:50px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #8b5cf6
    );

  color:#fff;

  font-weight:600;

  text-decoration:none;

  transition:.4s;
}

.about-btn a:hover{

  transform:
    translateY(-4px);

  box-shadow:
    0 10px 30px rgba(139,92,246,.3);
}

/* MOBILE */

@media(max-width:992px){

  .about-container{

    grid-template-columns:1fr;

    text-align:center;
  }

  .about-image{

    order:-1;
  }
}

@media(max-width:768px){

  .about-page{

    padding:100px 20px 60px;
  }

  .about-header h1{

    font-size:2.4rem;
  }

  .about-content{

    padding:25px;
  }
}