@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
body{
  margin: 0px;
  margin-top: 77px;
  font-size: 20px;
  font-family: 'Segoe UI', sans-serif;
  background-color: rgb(250, 250, 255);
}


.navbar{
  position: fixed;
  z-index: 2;
  top: 0px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: rgb(128, 0, 0);
}
.navbar > :nth-child(2){
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.navbar a{
  color: rgb(255, 255, 255);
  text-decoration: none;
  background-color: rgb(128, 0, 0) ;
  font-size: 20px;
  width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.navbar a:hover {
  background-color: rgb(100, 0, 0);
}
.active{
  text-decoration: underline !important;
}
.navbar img{
  width: 60px;
  padding: 10px;
}
#links{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 2px 0;
}

.hero {
  text-align: center;
  padding: 50px 20px;
  background-color: maroon;
  color: white;
}

.admissions-details, .requirements {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.admissions-details h2, .requirements h2 {
  color: maroon;
}

.admissions-details ol, .requirements ul {
  margin: 10px 0;
  padding-left: 20px;
}

.admissions-details li, .requirements li {
  margin: 5px 0;
}

.cta {
  text-align: center;
  padding: 30px 20px;
  background-color: #e0f2fe;
  border-radius: 8px;
  margin: 20px auto;
}

.cta .btn {
  background-color: maroon;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
}

.cta .btn:hover {
  background-color: #a00000;
}

footer {
  text-align: center;
}

/*Responsive*/
@media (max-width: 768px) {
  /* Navbar Dropdown */
  #links{
      display: none;
      position: absolute;
      top: 65px;
      right: -10px;
      z-index: 5;
      height: 0;
      overflow: auto;
      animation: dropAnimation 0.5s ease-out;
  }
  #links a{
      background-color: rgb(100, 0, 0);
  }

  #links.show {
      display: flex;
      flex-direction: column;
      height: 300px;
  }        

  .hamburger {
      display: flex;
      padding: 10px;
      margin-right: 20px;
      border: 1px solid rgb(255, 255, 255);
      border-radius: 5px;
  }
  .hamburger:hover{
      background-color: rgb(100, 0, 0);
  }
  

  @keyframes dropAnimation {
      from{
          height: 0;
      }
      to{
          height: 300px;
      }
  }
}

@media (max-width: 1200px) {
  .navbar a {
      padding: 10px;
      text-align: center;
      font-size: 20px;
  }
}
@media (max-width: 320px) {
  .gallery-grid {
      display: block
  }
  .gallery-item {
      margin-bottom: 10px;
  }
}
/* General styles for the mode toggle button */
.mode-toggle {
  background-color: maroon;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
}
.mode-toggle img{
  width: 20px;
}

.mode-toggle:hover {
  background-color: #a00000;
}

/* Default light mode styles */
body {
  background-color: #ffffff;
  color: #000000;
}

.navbar {
  background-color: maroon;
  color: white;
}

.navbar a {
  color: white;
}

.mode-toggle img {
  width: 20px;
  height: 20px;
}

/* Dark mode styles */
body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}
body.dark-mode .requirements {
  background-color: #121212;
  color: #ffffff;
}
body.dark-mode .admissions-details {
  background-color: #121212;
  color: #ffffff;
}
body.dark-mode .cta {
  background-color: #121212;
  color: #ffffff;
}

body.dark-mode .navbar {
  background-color: #1e1e1e;
}

body.dark-mode .navbar a {
  color: #ffffff;
}

body.dark-mode .mode-toggle img {
  filter: invert(1); /* Invert the icon color for better visibility */
}