/* ====================================================== */
/* WHY SCIENCEPRENEUR SECTION */
/* Menjelaskan keunggulan platform */
/* ====================================================== */

.why-section{

/* background putih agar kontras dengan stats section */

background:white;

/* spacing */

padding:90px 0;

}


/* ====================================================== */
/* HEADER */
/* ====================================================== */

.why-header{

text-align:center;

margin-bottom:50px;

}


/* title section */

.why-title{

font-size:32px;

margin-bottom:10px;

}


/* ====================================================== */
/* GRID FEATURES */
/* ====================================================== */

.why-grid{

display:grid;

/* 4 kolom */

grid-template-columns:repeat(4,1fr);

gap:24px;

text-align:center;

}


/* ====================================================== */
/* FEATURE ICON */
/* ====================================================== */

.why-icon{

width:56px;

height:56px;

margin:auto;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

/* warna lembut */

background:rgba(0,200,180,0.15);

margin-bottom:12px;

}


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

.why-feature-title{

font-size:16px;

font-weight:700;

color:var(--primary-800);

margin-bottom:6px;

}


/* ====================================================== */
/* FEATURE DESCRIPTION */
/* ====================================================== */

.why-desc{

font-size:13px;

color:var(--neutral-500);

line-height:1.5;

}


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

@media (max-width: 992px) {

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

}

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

@media (max-width: 576px) {

  .why-section {
    padding: 60px 0;
  }

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

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}