/* Base */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body{
  background: #f4f7fb;
  color: #333;
}

/* Sections */
section{
  padding: 70px 50px;
  text-align: center;
}

/* Hero */
.hero{
  height: 90vh;
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url('https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?q=80&w=1200&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

.hero-content h1{
  font-size: 50px;
  margin-bottom: 20px;
}

.hero-content p{
  font-size: 20px;
  margin-bottom: 20px;
}

.btn{
  background: #0b5ed7;
  color: white;
  padding: 12px 25px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  display: inline-block;
  transition: transform .15s ease, background .15s ease;
}

.btn:hover{
  transform: translateY(-1px);
  background: #084bb8;
}

/* Cards (courses cards on index.html) */
.course-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.course-card{
  background: white;
  padding: 30px;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition: 0.25s;
}

.course-card:hover{
  transform: translateY(-10px);
}

.course-card h3{
  color: #0b5ed7;
  margin-bottom: 10px;
}

/* Admission */
#admission button{
  margin-top: 20px;
  padding: 12px 25px;
  border: none;
  background: #0b5ed7;
  color: white;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: transform .15s ease, background .15s ease;
}

#admission button:hover{
  transform: translateY(-1px);
  background: #084bb8;
}

/* Footer */
footer{
  background: #0b5ed7;
  color: white;
  text-align: center;
  padding: 20px;
}

/* Popup */
.popup{
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.popup-content{
  background: white;
  padding: 30px;
  width: 520px;
  max-width: calc(100% - 30px);
  border-radius: 14px;
  position: relative;
}

.close{
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 28px;
  cursor: pointer;
  color: #0b5ed7;
}

.popup-content form{
  display: flex;
  flex-direction: column;
}

.popup-content input,
.popup-content textarea,
.popup-content select{
  margin: 10px 0;
  padding: 12px;
  border: 1px solid #dde5f2;
  border-radius: 8px;
}

.popup-content textarea{
  min-height: 90px;
  resize: vertical;
}

.popup-content button{
  background: #0b5ed7;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
}

.popup-content button:hover{
  background: #084bb8;
}

/* Responsive */
@media(max-width: 768px){
  section{
    padding: 50px 20px;
  }
  .hero-content h1{
    font-size: 35px;
  }
}

/* Extra: MLT/OPT/Physio pages share similar layout classes */
.mlt-course{
  padding: 70px 50px;
  background: #ffffff;
}

.mlt-course h2{
  text-align: center;
  color: #0b5ed7;
  margin-bottom: 40px;
  font-size: 36px;
}

.mlt-container{
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.mlt-image img{
  width: 100%;
  max-width: 500px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.mlt-content{
  flex: 1;
}

.mlt-content h3{
  color: #0b5ed7;
  margin-top: 20px;
  margin-bottom: 10px;
}

.mlt-content p,
.mlt-content li{
  font-size: 17px;
  line-height: 1.7;
}

.mlt-course-section{
  width:100%;
  padding:80px 8%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:50px;
  background:#f5f7fa;
  flex-wrap:wrap;
}

.mlt-left img{
  width:500px;
  max-width:100%;
  border-radius:20px;
  box-shadow:0 5px 20px rgba(0,0,0,0.15);
}

.mlt-right{
  flex:1;
  min-width:300px;
}

.mlt-right h1{
  font-size:45px;
  color:#0d1b2a;
  margin-bottom:20px;
}

.mlt-right p{
  font-size:18px;
  line-height:1.8;
  color:#444;
  margin-bottom:30px;
}

.mlt-details{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:30px;
}

.detail-box{
  background:white;
  padding:20px 25px;
  border-radius:15px;
  box-shadow:0 3px 10px rgba(0,0,0,0.08);
  min-width:160px;
}

.detail-box h3{
  color:#0077b6;
  margin-bottom:10px;
}

.detail-box span{
  font-size:16px;
  color:#333;
}

.mlt-btn{
  display:inline-block;
  padding:14px 35px;
  background:#00b4d8;
  color:white;
  text-decoration:none;
  transition:0.3s;
  border-radius: 10px;
}

.mlt-btn:hover{
  background:#0077b6;
}

@media(max-width:768px){
  .mlt-course-section{
    text-align:center;
  }
  .mlt-right h1{
    font-size:34px;
  }
  .mlt-details{
    justify-content:center;
  }
}