:root{
  --primary:#0b2c5d;
  --accent:#1f6feb;
  --bg:#f5f7fa;
  --text:#1f2937;
  --muted:#6b7280;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter, system-ui, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

header{
  background:linear-gradient(135deg,var(--primary),#020b1c);
  color:#fff;
}

.container{max-width:900px;margin:0 auto;padding:0 20px}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  text-align:right;
  color: #ffffff;
  font-size: 16px;
  
  cursor: pointer;
}

@media (max-width: 768px) {

  .menu-toggle {
    display: block;
  }

  .topbar nav {
    display: none;
    width: 100%;
  }

  .topbar {
    flex-wrap: wrap;
  }

  .topbar nav ul {
    flex-direction: column;
text-align:justify;
    gap: 10px;
    padding-top: 10px;
  }
}

.topbar nav.open {
  display: block;
}

nav ul{list-style:none;display:flex;gap:70px;margin:30;padding:30}
nav a{color:#e5e7eb;text-decoration:none;font-weight:500}
nav a:hover{color:#fff}

.subtitle a {
  font-size: 18px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 768px) {
  .subtitle a {
    font-size: 12px;  
    color: #ffffff;
    line-height: 1.3;
    text-decoration: none;
  }
}


.hero{text-align:center;padding:5px 0}
.hero h2{font-size:2.2rem;margin-bottom:6px}
.hero p{color:#d1d5db}

main{padding:50px 0}
main p {
  text-align: justify;
}

main h2 {
  margin-top: 0px; 
}

section{
  background:#fff;
  border-radius:16px;
  padding:35px;
  box-shadow:0 10px 30px rgba(0,0,0,.08)
}

/*.grid p{
  max-width:700px;
  margin:0 auto 1.2em;
  text-align:justify;
text-justify:inter-word;
}*/

.grid p{
  margin-bottom: 1.2em;
text-align:justify;
}

.teacher-list {
  list-style: none;
  padding: 0;
}

.teacher-list li {
  margin: 10px 0;
}

.teacher-list a {
  font-size: 18px;
  color: #2563eb;
  text-decoration: none;
}

.teacher-list a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .columns {
    flex-direction: column;

  }
}

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    gap: 12px;
  }
}

nav ul li {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #111827;
  padding: 10px 0;
  min-width: 220px;
  border-radius: 6px;
  z-index: 1000;
}

.dropdown-menu li {
  list-style: none;
}

.dropdown-menu a {
  display: block;
  padding: 8px 16px;
  color: #e5e7eb;
  text-decoration: none;
  font-size: 15px;
}

.dropdown-menu a:hover {
  background-color: #1f2933;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
}

.float-left {
  float: left; 
  margin: 0 15px 15px 0; 
}

.float-right {
  float: right; 
   margin-left: 40px; 
}


.clear-both {
  clear: both;
}

.columns {
  display: flex;
  gap: 40px;
}

@media (max-width: 768px) {
  .columns {

text-align: left;
    gap: 0; 
  }
}

.column {
  flex: 1;
}

figure {
  text-align: center; 
}

figcaption {
  font-size: 1.05rem;
  color: var(--text);       
  font-style: italic;
  line-height: 1.4;
}


footer{
  background:#020617;
  color:#9ca3af;
  text-align:center;
  padding:30px 0;
  margin-top:60px
}

footer a{color:#facc15;text-decoration:none}