/* HERO */

.hero{
  position:relative;
  height:85vh;
  overflow:hidden;
}

.hero-bg{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-overlay{
  position:absolute;
  inset:0;

  background:
  rgba(0,0,0,.4);
}

.hero-content{

  position:absolute;

  top:50%;
  left:50%;

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

  text-align:center;

  color:white;

  width:90%;
}

.hero-subtitle{
  font-size:18px;
  letter-spacing:3px;
  margin-bottom:15px;
}

.hero-content h1{

  font-size:70px;

  color:#FFD166;

  line-height:1.1;

  margin-bottom:15px;
}

.hero-content h3{

  font-size:28px;

  margin-bottom:20px;
}

.hero-desc{

  font-size:18px;

  max-width:700px;

  margin:auto;

  line-height:1.8;
}

/* WHY SCHOOL */

.why-school{

  padding:80px 10%;

  text-align:center;

  background:#fff;
}

.why-school h2{

  font-size:40px;

  color:#198754;

  margin-bottom:50px;

  font-weight:700;
}

.why-container{

  display:grid;

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

  gap:30px;

  max-width:1200px;

  margin:auto;
}

.why-card{

  background:white;

  padding:30px;

  border-radius:20px;

  box-shadow:
  0 10px 30px rgba(0,0,0,.08);

  transition:.3s;
}

.why-card:hover{
  transform:translateY(-8px);
}

.why-card h3{
  color:#000;
  margin-bottom:15px;
}

.why-card p{
  color:#666;
  line-height:1.7;
}

/* METODE */

.learning-method{

  padding:90px 10%;

  display:grid;

  grid-template-columns:
  1fr 1fr;

  gap:70px;

  align-items:start;

  background:white;
}

.section-tag{

  color:#D97706;

  font-size:14px;

  font-weight:600;

  letter-spacing:2px;
}

.method-left h2{

  font-size:48px;

  color:#198754;

  margin:15px 0;
}

.method-left p{

  color:#666;

  line-height:1.8;
}

.method-item{

  padding:20px 0;

  border-bottom:
  1px solid #e5e7eb;
}

.method-item h3{
  color:#198754;
  margin-bottom:8px;
}

.method-item p{
  color:#666;
  line-height:1.7;
}

/* EDUCATION */

.education{
  padding:90px 50px;
  background:#fff;
}

.education-title{

  text-align:center;

  font-size:48px;

  font-weight:700;

  color:#1f2937;

  margin-bottom:50px;
}

.education-container{

  display:grid;

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

  gap:30px;
}

.education-card{

  position:relative;

  aspect-ratio:1/1;

  overflow:hidden;

  border-radius:15px;

  cursor:pointer;
}

.education-card img{

  width:100%;

  height:100%;

  object-fit:cover;

  transition:.5s;
}

.education-card::before{

  content:'';

  position:absolute;

  inset:0;

  background:
  linear-gradient(
  to top,
  rgba(0,0,0,.75) 0%,
  rgba(0,0,0,.45) 30%,
  rgba(0,0,0,0) 60%
  );

  z-index:1;
}

.education-overlay{

  position:absolute;

  left:25px;
  right:25px;
  bottom:25px;

  color:white;

  z-index:2;
}

.education-overlay h3{

  font-size:24px;

  font-weight:700;

  margin-bottom:8px;
}

.education-overlay p{

  font-size:14px;

  line-height:1.6;

  max-width:220px;
}

.education-card:hover img{
  transform:scale(1.08);
}

.education-card:hover{

  transform:translateY(-8px);

  transition:.4s;
}

/* RESPONSIVE */

@media(max-width:768px){

  .learning-method{
    grid-template-columns:1fr;
    gap:40px;
  }

  .method-left h2{
    font-size:36px;
  }

  .education-container{
    grid-template-columns:1fr;
  }

  .education-title{
    font-size:36px;
  }

}