*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Segoe UI",Arial,sans-serif}

/* HERO */
.hero{height:90vh;position:relative}
.hero img{width:100%;height:100%;object-fit:cover}
.hero-content{
  position:absolute;inset:0;
  background:rgba(0,0,0,.45);
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  color:#fff;text-align:center
}
.hero-content h1{font-size:42px}
.hero-content a{
  margin-top:15px;
  background:#f37021;color:#fff;
  padding:12px 24px;text-decoration:none;
  border-radius:4px
}

/* EDGE */
.edge{padding:80px 16px;text-align:center}
.edge h2{margin-bottom:30px;font-size:28px}
.edge-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  max-width:420px;
  margin:auto
}
.box{
  min-height:120px;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  border-radius:6px;
  font-weight:500
}
.wide{grid-column:span 2}

/* STUDENT */
.student{
  padding:80px 20px;
  background:#f5f6fa;
  text-align:center
}
.student img{
  width:287px;
  border-radius:50%;
  margin-bottom:20px
}

/* CONTACT */
.contact{padding:80px 20px;text-align:center}
.contact form{
  max-width:480px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:12px
}
.contact input,.contact textarea{
  padding:10px
}
.contact button{
  padding:12px;
  background:#2f8ec1;
  color:#fff;border:none
}

/* FOOTER */
footer{
  background:#111;
  color:#fff;
  text-align:center;
  padding:15px
}

/* COLORS */
.red{background:#e6282a}
.orange{background:#f37021}
.yellow{background:#f6b23b}
.green{background:#7bbf3f}
.blue{background:#2f8ec1}
.purple{background:#3b3f6b}
.violet{background:#7a4fa3}

/* DESKTOP */
@media(min-width:768px){
  .edge-grid{
    max-width:1100px;
    grid-template-columns:repeat(3,1fr)
  }
  .wide{grid-column:span 3}
}