/* ====================================================== */
/* ABOUT SECTION */
/* Section ini menjelaskan apa itu SciencePreneur */
/* ====================================================== */

.about-section{

/* background putih agar kontras dengan hero */
background:white;

/* spacing atas bawah */
padding:90px 0;

}


/* ====================================================== */
/* GRID LAYOUT */
/* Layout dua kolom */
/* ====================================================== */

.about-grid{

display:grid;

/* dua kolom */
grid-template-columns:1fr 1fr;

/* jarak antar kolom */
gap:50px;

/* align vertical */
align-items:center;

}


/* ====================================================== */
/* LABEL KECIL */
/* contoh: Tentang Platform */
/* ====================================================== */

.about-label{

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

color:var(--accent-500);

font-weight:700;

margin-bottom:10px;

}


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

.about-title{

font-size:34px;

margin-bottom:20px;

}


/* ====================================================== */
/* PARAGRAPH */
/* ====================================================== */

.about-text p{

font-size:16px;

color:var(--neutral-500);

margin-bottom:14px;

line-height:1.8;

}


/* ====================================================== */
/* CTA LINK */
/* ====================================================== */

.about-link{

color:var(--accent-500);

font-weight:600;

font-size:15px;

}


/* ====================================================== */
/* VISUAL BOX */
/* placeholder video atau ilustrasi */
/* ====================================================== */

.about-visual{

height:280px;

border-radius:20px;

background:linear-gradient(
135deg,
var(--primary-50),
var(--accent-100)
);

display:flex;

align-items:center;

justify-content:center;

border:1px solid var(--neutral-300);

}


/* teks placeholder visual */

.about-visual-content{

text-align:center;

font-size:28px;

color:var(--neutral-500);

}

.about-visual-content p{

font-size:14px;

margin-top:10px;

}


/* ====================================================== */
/* RESPONSIVE - TABLET                                    */
/* ====================================================== */

@media (max-width: 992px) {

  .about-section {
    padding: 70px 0;
  }

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

  /* visual appears above text on tablet */
  .about-visual {
    order: -1;
    height: 220px;
  }

}

/* ====================================================== */
/* RESPONSIVE - MOBILE                                    */
/* ====================================================== */

@media (max-width: 576px) {

  .about-section {
    padding: 50px 0;
  }

  .about-title {
    font-size: 26px;
  }

  .about-visual {
    height: 180px;
  }

}