/* styles.css - Simple modern styling */
:root{
  --accent:#0ea5a4;
  --dark:#073642;
  --muted:#6b7280;
  --card:#ffffff;
  --bg:#f7fafc;
  --rounded:14px;
}
*{box-sizing:border-box}
body{font-family:'Poppins',system-ui,Segoe UI,Roboto,Helvetica,Arial; margin:0; background:var(--bg); color:var(--dark); line-height:1.45}
.header{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px 28px; background:linear-gradient(90deg,#ffffff 0%, #e6fffa 100%);
  box-shadow:0 6px 20px rgba(10,10,10,0.05);
  position:sticky; top:0; z-index:40;
}
.logo img{height:56px}
.nav a{margin-left:18px; color:var(--dark); text-decoration:none; font-weight:600}
.hero{
  display:flex; gap:30px; align-items:center; padding:40px 6%;
}
.hero .left{flex:0.5}
.hero h1{font-size:36px; margin:6px 0 12px}
.hero p{color:var(--muted); margin:0 0 18px; max-width:64ch}
.hero .class-img{flex:1.5; border-radius:18px; overflow:hidden; box-shadow:0 12px 30px rgba(2,6,23,0.08)}
.hero .class-img img{width:100%; display:block; height:100%; object-fit:cover; min-height:280px}

/* cards */
.info-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:4% 6%}
.card{background:var(--card); padding:20px; border-radius:12px; box-shadow:0 8px 22px rgba(2,6,23,0.06); min-height:500px; display:flex; flex-direction:column}
.card h3{margin:0 0 10px; text-align:center; color:var(--accent)}
.card p{color:var(--muted); margin:0; flex:1}

/* carousel */
.carousel{padding:20px 6%;}
.carousel .wrap{position:relative; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 8px 24px rgba(2,6,23,0.06)}
.carousel img{width:100%; display:block; height:50%; object-fit:cover}
.carousel .dots{position:absolute; left:50%; transform:translateX(-50%); bottom:10px; display:flex; gap:6px}
.carousel .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.6); cursor:pointer; border:2px solid rgba(0,0,0,0.08)}
.carousel .dot.active{background:var(--accent)}

/* fame */
.fame{display:flex; gap:20px; padding:40px 6%;}
.fame .left{flex:0.5; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:28px; color:var(--dark)}
.fame .right{flex:2; display:flex; align-items:center; justify-content:center}
.fame img{max-width:1000px; border-radius:5%; border:1px solid #fff; box-shadow:0 10px 30px rgba(2,6,23,0.08)}

/* contact */
.contact{background:#fff; padding:32px 6%; display:flex; gap:30px; align-items:flex-start; flex-wrap:wrap}
.contact .left{flex:1; min-width:260px}
.contact h2{margin:0 0 10px}
.contact pre{background:transparent; white-space:pre-wrap; font-family:inherit; color:var(--muted); padding:0; margin:0}
.social{display:flex; gap:12px; margin-top:12px}
.social a{display:inline-flex; align-items:center; justify-content:center; width:44px;height:44px;border-radius:8px;background:var(--accent); color:#fff; text-decoration:none; font-weight:700}

/* footer */
footer{padding:18px; text-align:center; color:var(--muted)}
@media(max-width:900px){
  .hero{flex-direction:column; padding:24px}
  .info-cards{grid-template-columns:1fr; padding:24px}
  .fame{flex-direction:column; padding:24px}
}