/* ====================================================== */
/* SERVICES SECTION */
/* Section ini menjelaskan 6 pilar layanan SciencePreneur */
/* ====================================================== */

.services-section{

/* background abu ringan agar kontras dengan about */
background:var(--neutral-100);

/* spacing */
padding:100px 0;

}


/* ====================================================== */
/* HEADER AREA */
/* label + title */
/* ====================================================== */

.services-header{

text-align:center;

margin-bottom:50px;

}


/* label kecil */

.services-label{

font-size:12px;

text-transform:uppercase;

letter-spacing:2px;

color:var(--accent-500);

font-weight:700;

margin-bottom:10px;

}


/* judul utama */

.services-title{

font-size:34px;

margin-bottom:12px;

}


/* deskripsi section */

.services-desc{

font-size:16px;

color:var(--neutral-500);

max-width:600px;

margin:auto;

}


/* ====================================================== */
/* GRID LAYOUT */
/* ====================================================== */

.services-grid{

display:grid;

/* 3 kolom */
grid-template-columns:repeat(3,1fr);

/* jarak antar card */
gap:24px;

margin-top:40px;

}


/* ====================================================== */
/* SERVICE CARD */
/* ====================================================== */

.service-card{
display:flex;
flex-direction:column;
justify-content:space-between;
background:white;

border-radius:16px;

padding:28px;

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

box-shadow:var(--shadow-sm);

transition:all .3s ease;

cursor:pointer;

position:relative;

overflow:hidden;

}


/* garis aksen di atas card */

.service-card::before{

content:"";

position:absolute;

top:0;

left:0;

right:0;

height:3px;

background:linear-gradient(
90deg,
var(--accent-500),
var(--primary-500)
);

opacity:0.6;

}


/* efek hover */

.service-card:hover{

transform:translateY(-6px);

box-shadow:var(--shadow-lg);

}


/* ====================================================== */
/* ICON AREA */
/* ====================================================== */

.service-icon{

width:54px;

height:54px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

/* warna lembut */

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

margin-bottom:16px;

}


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

.service-title{

font-size:18px;

margin-bottom:8px;

}


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

.service-desc{

font-size:14px;

color:var(--neutral-500);

margin-bottom:14px;

line-height:1.6;

}


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

.service-link{

color:var(--accent-500);

font-weight:600;

font-size:14px;

}


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

@media (max-width: 992px) {

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

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

}

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

@media (max-width: 576px) {

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

  .services-grid {
    grid-template-columns: 1fr;
  }

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

}