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

.about{

  position:relative;

  padding:
  140px 7vw;

  background:
  #050505;

  overflow:hidden;

}

/* subtle glow */

.about::before{

  content:"";

  position:absolute;

  top:50%;
  left:50%;

  width:700px;
  height:700px;

  background:
  radial-gradient(
  circle,
  rgba(255,120,40,0.08),
  transparent 70%
  );

  transform:
  translate(-50%,-50%);

  pointer-events:none;

}

/* =========================
   CONTAINER
========================= */

.about-container{

  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
  1.15fr .85fr;

  gap:70px;

  align-items:center;

}

/* =========================
   IMAGE
========================= */

.about-image{

  position:relative;

  overflow:hidden;

  border-radius:42px;

  border:
  1px solid rgba(255,255,255,0.06);

  box-shadow:
  0 30px 90px rgba(0,0,0,0.42);

}

.about-image img{

  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  filter:
  brightness(.92)
  contrast(1.02)
  saturate(.96);

  transform:
  scale(1.02);

}

/* overlay */

.about-image::after{

  content:"";

  position:absolute;
  inset:0;

  background:
  linear-gradient(
  180deg,
  rgba(0,0,0,.04),
  rgba(0,0,0,.28)
  );

}

/* =========================
   CONTENT
========================= */

.about-content{

  position:relative;

  padding:
  38px;

  border-radius:38px;

  background:
  rgba(255,255,255,0.03);

  backdrop-filter:
  blur(20px);

  border:
  1px solid rgba(255,255,255,0.07);

  box-shadow:
  0 20px 60px rgba(0,0,0,0.22);

}

/* =========================
   LABEL
========================= */

.about-label{

  font-size:.82rem;

  letter-spacing:8px;

  text-transform:uppercase;

  color:
  rgba(255,180,120,0.82);

  margin-bottom:22px;

}

/* =========================
   TITLE
========================= */

.about-title{

  font-size:
  clamp(2.2rem,3vw,3.8rem);

  line-height:1.06;

  font-weight:300;

  color:#fff;

  margin-bottom:26px;

}

/* =========================
   LINE
========================= */

.about-line{

  width:110px;
  height:1px;

  background:
  rgba(255,255,255,0.14);

  margin-bottom:34px;

  position:relative;

}

.about-line::after{

  content:"";

  position:absolute;

  top:50%;
  left:100%;

  width:8px;
  height:8px;

  border-radius:50%;

  background:
  rgba(255,150,70,0.95);

  transform:
  translateY(-50%);

}

/* =========================
   TEXT
========================= */

.about-text{

  font-size:1rem;

  line-height:1.9;

  color:
  rgba(255,255,255,0.70);

  margin-bottom:24px;

}

/* =========================
   MOBILE
========================= */

@media(max-width:980px){

  .about{

    padding:
    100px 24px;

  }

  .about-container{

    grid-template-columns:
    1fr;

    gap:38px;

  }

  .about-content{

    padding:
    30px 24px;

    border-radius:30px;

  }

  .about-title{

    font-size:2.6rem;

  }

  .about-text{

    font-size:.98rem;

    line-height:1.8;

  }

}