/* ===============================
PAGE CONTAINER
================================ */
.education-hero{
  padding:100px 8% 60px;
  max-width:1000px;
}

.education-hero h1{
  font-size:clamp(3rem,10vw,7rem);
  font-weight:800;
  letter-spacing:.1em;
  color:#ff7070;
  line-height:.95;
  margin:0;
}

.education-hero p{
  margin-top:20px;
  font-size:1.3rem;
  color:rgba(255,112,112,.75);
  max-width:700px;
  line-height:1.6;
}

.edu-ribbon::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:80px;
  background:linear-gradient(to bottom,transparent,#3b0000);
}

/* ===============================
IMAGE RIBBON
================================ */

.edu-ribbon{
  width:100%;
  height:260px;
  margin-top:80px;
  overflow:hidden;
  position:relative;
}

.edu-ribbon-track{
  width:100%;
  height:100%;
  position:relative;
}

.edu-slide{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1s ease;
}

.edu-slide.active{
  opacity:1;
}

/* ===============================
SPLIT SECTION
================================ */

.edu-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  padding:100px 8% 120px;
}

/* ===============================
CARD STYLE
================================ */

.edu-card{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-radius:28px;
  padding:40px 46px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
  border:1px solid rgba(255,112,112,.18);
  transition:transform .35s ease, box-shadow .35s ease;
}

.edu-card:hover{
  transform:translateY(-10px);
  box-shadow:
    0 40px 120px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.edu-card h2{
  font-size:2rem;
  margin-bottom:12px;
  color:#ff7070;
  line-height:1.1;
}

.edu-sub{
  font-size:1.1rem;
  margin-bottom:12px;
  color:rgba(255,112,112,.8);
}

.edu-card p{
  font-size:1.1rem;
  line-height:1.7;
  color:rgba(255,255,255,.9);
}

/* ===============================
BUTTONS
================================ */

.edu-button,
.athletic-button{
  display:inline-block;
  margin-top:20px;
  padding:12px 22px;
  border-radius:10px;
  font-size:.95rem;
  font-weight:600;
  text-decoration:none;
  transition:all .25s ease;
}

.edu-button{
  color:#ff7070;
  border:1px solid rgba(255,112,112,.5);
}

.edu-button:hover{
  background:#ff7070;
  color:white;
}

.athletic-button{
  color:#ff7070;
  border:1px solid rgba(255,112,112,.5);
}

.athletic-button:hover{
  background:#ff7070;
  color:white;
}

/* ===============================
TABLET
================================ */

@media (max-width:1000px){

  .edu-ribbon{
    height:220px;
    margin-top:70px;
  }

  .education-hero{
    padding:70px 6% 40px;
  }

  .education-hero h1{
    font-size:clamp(2.8rem,9vw,4.5rem);
  }

  .education-hero p{
    font-size:1.15rem;
  }

  .edu-split{
    grid-template-columns:1fr;
    gap:32px;
    padding:70px 6% 90px;
  }

  .edu-card{
    padding:32px;
  }
}

/* ===============================
SMALL MOBILE
================================ */

@media (max-width:600px){

  .edu-ribbon{
    height:180px;
    margin-top:64px;
  }

  .edu-ribbon::after{
    height:55px;
  }

  .education-hero{
    padding:50px 5% 32px;
  }

  .education-hero h1{
    font-size:clamp(2.2rem,11vw,3.3rem);
    letter-spacing:.05em;
  }

  .education-hero p{
    margin-top:14px;
    font-size:1rem;
  }

  .edu-split{
    gap:22px;
    padding:50px 5% 65px;
  }

  .edu-card{
    padding:24px 20px;
    border-radius:22px;
  }

  .edu-card h2{
    font-size:1.5rem;
  }

  .edu-sub{
    font-size:1rem;
  }

  .edu-card p{
    font-size:1rem;
    line-height:1.6;
  }

  .edu-button,
  .athletic-button{
    width:100%;
    text-align:center;
    padding:14px 18px;
    font-size:.92rem;
  }
}