header.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 3rem;
  background-color: #fff;
  flex-wrap: wrap;
  box-shadow: 0px 8px 14px 0px #0000000F;
  width: -webkit-fill-available;
  position: fixed;
  z-index: 999;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  color: #009fe3;
  font-weight: bold;
  flex: 1 1 100px;
}

nav.nav-links {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  flex: 1 1 450px;
}

nav.nav-links a {
  text-decoration: none;
  color: #111827;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  vertical-align: middle;
}

nav.nav-links a.active {
  color: #009fe3;
}

.auth-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  position: relative;
}

.auth-btn {
  position: relative;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.auth-container {
  position: relative;
}

.auth-container:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


.login-btn,
.signup-btn {
  border: 1px solid #009fe3;
  background: #fff;
  color: black;
  padding: 0.5rem 1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: Montserrat;
  font-size: 16px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.login-btn::before {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAASCAYAAAC5DOVpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADaSURBVHgBrZJLCsJADIbTVnCl4Ep8LLyLe/ceoAs3BXfeSE/RU3iCupaCuNRqoikM6TwytD98DDMkfzIzAehqg3yUnJGkTUwsZi8kRSrwa41kSIlsbQE5V1xCWNRIzfE/pSJgxOsdwiKTp3kgzTKj6iA6iSJHpHEUuIFxTY12nGAzjDYjFQ5Dq9kV9LPVuMzat3lDnHp9UMEdqa7pU+4w6pjJOZtYkh68zyCyiwMnjJXx3s56SZrVvC4gLLr6Sh7IPY0JtV6BfwSmyAy5IHtX0Bz+n6AZ4NIs+AWLW03kUEbjZQAAAABJRU5ErkJggg==);
}

.signup-btn::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNiAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguMDIyIDkuNUMxMi4wNzc0IDkuNSAxNS4yNzIgMTMuMDIzMSAxNS4yNzIgMTcuMjVDMTUuMjcyIDE3LjY2NDIgMTQuOTM2MiAxOCAxNC41MjIgMThIMS41MjJDMS4xMDc3OSAxOCAwLjc3MjAwMyAxNy42NjQyIDAuNzcyMDAzIDE3LjI1QzAuNzcyMDAzIDEzLjAyMzEgMy45NjY1NyA5LjUgOC4wMjIgOS41Wk04LjAyMiAxMUM1LjEyNDM4IDExIDIuNjU1OTUgMTMuMzYxMSAyLjMxMzAyIDE2LjVIMTMuNzMxQzEzLjM4ODEgMTMuMzYxMSAxMC45MTk2IDExIDguMDIyIDExWk04LjAyMiAwQzEwLjM2OTIgMCAxMi4yNzIgMS45MDI3OCAxMi4yNzIgNC4yNUMxMi4yNzIgNi41OTcyMiAxMC4zNjkyIDguNSA4LjAyMiA4LjVDNS42NzQ3OSA4LjUgMy43NzIgNi41OTcyMSAzLjc3MiA0LjI1QzMuNzcyIDEuOTAyNzkgNS42NzQ3OSAwIDguMDIyIDBaTTguMDIyIDEuNUM2LjUwMzIyIDEuNSA1LjI3MiAyLjczMTIyIDUuMjcyIDQuMjVDNS4yNzIgNS43Njg3OCA2LjUwMzIyIDcgOC4wMjIgN0M5LjU0MDc2IDcgMTAuNzcyIDUuNzY4NzggMTAuNzcyIDQuMjVDMTAuNzcyIDIuNzMxMjIgOS41NDA3NiAxLjUgOC4wMjIgMS41WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
}

.login-btn::after,
.signup-btn::after {
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxNSAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjQ3OTMgMS4xMTA3N0MxNC44Njk3IDEuNTAxMTkgMTQuODY5NSAyLjEzNDI4IDE0LjQ3OTMgMi41MjQ4M0w4LjExNTAzIDguODg5MDlDNy43MjQ1MSA5LjI3OTYxIDcuMDkxNDkgOS4yNzk2MSA2LjcwMDk3IDguODg5MDlMMC4zMzY3MTEgMi41MjQ4M0MtMC4wNTM1MTY0IDIuMTM0MjggLTAuMDUzNzE0OCAxLjUwMTE5IDAuMzM2NzExIDEuMTEwNzdDMC43MjcxMzcgMC43MjAzNDMgMS4zNjAyMyAwLjcyMDU0IDEuNzUwNzcgMS4xMTA3N0w3LjQwOCA2Ljc2Nzk5TDEzLjA2NTIgMS4xMTA3N0MxMy40NTU4IDAuNzIwNTQxIDE0LjA4ODkgMC43MjAzNDMgMTQuNDc5MyAxLjExMDc3WiIgZmlsbD0iIzExMTgyNyIvPgo8L3N2Zz4K);
}

.signup-btn::after {
  filter: invert(1);
}

.login-btn {
  border: 1px solid #111827;
  width: 131px;
}

.signup-btn {
  background-color: #009fe3;
  color: #fff;
  width: 145px;
}

.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 1000;
  margin-top: 0.25rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-menu .option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px dashed #ddd;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  color: #111827;
}

.dropdown-menu .option:last-child {
  border-bottom: none;
}

.dropdown-menu .option:hover {
  background-color: #00A2ED;
  color: white;
}

.dropdown-menu .option:hover::before {
  filter: invert(1);
}

.auth-container:hover .dropdown-menu,
.auth-container:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.navbar-toggle {
  display: none;
}

@media (max-width: 992px) {
  header.navbar {
    flex-direction: row;
    align-items: stretch;
    padding: 0.5rem 1rem;
    position: fixed;
    width: 100vw;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9999;
  }

  .logo {
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
  }

  .navbar-toggle {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    background: none;
    border: none;
    font-size: 2rem;
    color: #009fe3;
    cursor: pointer;
    margin-left: auto;
    margin-bottom: 0.5rem;
  }

  nav.nav-links,
  .auth-buttons {
    display: none;
    width: 100%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    margin-bottom: 0.5rem;
    transition: max-height 0.4s cubic-bezier(.4, 0, .2, 1), opacity 0.3s;
  }

  nav.nav-links.open,
  .auth-buttons.open {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: max-height 0.4s cubic-bezier(.4, 0, .2, 1), opacity 0.3s;
  }

  nav.nav-links a, .auth-buttons button {
    width: 100%;
    text-align: left;
    padding: 0.75rem 0.5rem;
    font-size: 1.1rem;
    border-radius: 6px;
  }
}

/* Even more compact for mobile */
@media (max-width: 600px) {
  header.navbar {
    padding: 0.5rem 0.5rem;
  }

  .logo {
    font-size: 1.1rem;
  }

  nav.nav-links a, .auth-buttons button {
    font-size: 1rem;
    padding: 0.7rem 0.5rem;
  }
}

.dropdown-menu #corporate::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNyAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjM2NSAzLjcwNTg4QzEyLjM2NSAyLjYxODU3IDExLjk0NjIgMS42MzQxOSAxMS4yNzQ0IDAuODk3NTE4QzExLjYzNjkgMC4zNTM4NiAxMi4yNCAwIDEyLjkyNzUgMEMxNC4wMzM3IDAgMTQuOTMwNiAwLjkyMzI1NCAxNC45MzA2IDIuMDYyMDRDMTQuOTMwNiAzLjIwMDgzIDE0LjAzMzcgNC4xMjQwOCAxMi45Mjc1IDQuMTI0MDhDMTIuNzE4MSA0LjEyNDA4IDEyLjUyMTIgNC4wODIyNiAxMi4zMzM3IDQuMDIxMTRDMTIuMzQzMSAzLjkxODIgMTIuMzY1IDMuODE1MjYgMTIuMzY1IDMuNzA1ODhaTTguMzY0OTkgNi41ODgyNEM5LjkxMTg3IDYuNTg4MjQgMTEuMTY1IDUuMjk4MjUgMTEuMTY1IDMuNzA1ODhDMTEuMTY1IDIuMTEzNTEgOS45MTE4NyAwLjgyMzUzIDguMzY0OTkgMC44MjM1M0M2LjgxODEyIDAuODIzNTMgNS41NjQ5OSAyLjExMzUxIDUuNTY0OTkgMy43MDU4OEM1LjU2NDk5IDUuMjk4MjUgNi44MTgxMiA2LjU4ODI0IDguMzY0OTkgNi41ODgyNFpNOC4zNjQ5OSA4LjM0Nzg5QzQuOTM2ODcgOC4zNDc4OSAzLjU2NDk5IDkuMDUyMzkgMy41NjQ5OSAxMS4xNzIzVjE0SDEzLjE2NVYxMS4xNzIzQzEzLjE2NSA5LjAzOTUyIDExLjc5MzEgOC4zNDc4OSA4LjM2NDk5IDguMzQ3ODlaTTQuNzM5OTkgNS40MjA1QzQuNDUyNDkgNS40MDEyIDQuMTQ2MjQgNS4zODgzMyAzLjgwMjQ5IDUuMzg4MzNDMS4zNDkzNyA1LjM4ODMzIDAuMzY0OTkgNS44OTMzOCAwLjM2NDk5IDcuNDA4NTVWOS44ODIzNUgyLjUzMzc0QzMuMDU1NjEgOC4wMjI5OCA0LjczMzc0IDcuNDE0OTggNi4yOTkzNyA3LjIxMjMyQzUuNjE4MTEgNi43ODc2OCA1LjA3NDM3IDYuMTY2ODIgNC43Mzk5OSA1LjQyMDVaTTMuODAyNDkgNC4xMjczQzQuMDExODcgNC4xMjczIDQuMjA4NzQgNC4wODU0OCA0LjM5NjI0IDQuMDI0MzZDNC4zODY4NyAzLjkxODIgNC4zNjQ5OSAzLjgxNTI2IDQuMzY0OTkgMy43MDU4OEM0LjM2NDk5IDIuNjE4NTcgNC43ODM3NCAxLjYzNDE5IDUuNDU1NjIgMC44OTc1MThDNS4wOTMxMSAwLjM1NzA3NyA0LjQ4OTk5IDAgMy44MDI0OSAwQzIuNjk2MjQgMCAxLjc5OTM3IDAuOTIzMjU0IDEuNzk5MzcgMi4wNjIwNEMxLjc5OTM3IDMuMjAwODMgMi42OTMxMiA0LjEyNzMgMy44MDI0OSA0LjEyNzNaTTEyLjkyNzUgNS4zODUxMUMxMi41ODM3IDUuMzg1MTEgMTIuMjc3NSA1LjM5Nzk4IDExLjk5IDUuNDIwNUMxMS42NTU2IDYuMTY2ODIgMTEuMTA4NyA2Ljc4NzY4IDEwLjQzMDYgNy4yMTIzMkMxMS45OTYyIDcuNDExNzYgMTMuNjc0NCA4LjAyMjk4IDE0LjE5NjIgOS44ODIzNUgxNi4zNjVWNy40MDg1NUMxNi4zNjUgNS44ODA1MiAxNS4zODM3IDUuMzg1MTEgMTIuOTI3NSA1LjM4NTExWiIgZmlsbD0iIzExMTgyNyIvPgo8L3N2Zz4K);
}

.dropdown-menu #institute::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE5MF84OSkiPgo8cGF0aCBkPSJNMTIuMjE1NCAyLjY0ODkyVjAuNjcyNDg1SDQuNTE0NTdWMi42NDg5NUgxLjYwOTEzVjMuNjI4NTVIMi42MDg5NFY2LjE3NTUyVjYuMjA4MTdIMy4wOTg3MkgzLjU4ODUxSDEzLjE0MTVIMTMuNjMxM0gxNC4xMjFWNi4xNzU1MlYzLjYyODU1SDE1LjIyNDdWMi42NDg5MkgxMi4yMTU0Wk01LjUwNzg1IDUuMzk5OTlINC42MjYyMlY0LjUxODM2SDUuNTA3ODVWNS4zOTk5OVpNNy4xNTY4NSA1LjM5OTk5SDYuMjc1MjJWNC41MTgzNkg3LjE1Njg1VjUuMzk5OTlaTTguODA1ODIgNS4zOTk5OUg3LjkyNDE5VjQuNTE4MzZIOC44MDU4MlY1LjM5OTk5Wk0xMC40NTQ4IDUuMzk5OTlIOS41NzMxNlY0LjUxODM2SDEwLjQ1NDhWNS4zOTk5OVpNMTIuMTAzOCA1LjM5OTk5SDExLjIyMjJWNC41MTgzNkgxMi4xMDM4VjUuMzk5OTlaIiBmaWxsPSIjMTExODI3Ii8+CjxwYXRoIGQ9Ik0xNC44NjMgMTQuMzQ3OVY3LjE1NTA5SDE0LjM3MzJIMTQuMTIxMUgyLjYwODlIMi4zNTY4SDEuODY3MDJWMTQuMzQ3OUgwLjM2NDk5VjE1LjMyNzVIMS44NjcwMkg2Ljk4Mzc3SDkuNzQ2MjFIMTQuODYzSDE2LjM2NVYxNC4zNDc5SDE0Ljg2M1pNNC42MTU0MyAxMC41MDZIMy43MzM4VjkuNjI0MzRINC42MTU0M1YxMC41MDZaTTQuNjE1NDMgOC45MDU5N0gzLjczMzhWOC4wMjQzNEg0LjYxNTQzVjguOTA1OTdaTTYuMjY0NDMgMTAuNTA2SDUuMzgyOFY5LjYyNDM0SDYuMjY0NDNWMTAuNTA2Wk02LjI2NDQzIDguOTA1OTdINS4zODI4VjguMDI0MzRINi4yNjQ0M1Y4LjkwNTk3Wk04LjY4MDc0IDguMDI0MzFIOS41NjIzN1Y4LjkwNTkzSDguNjgwNzRWOC4wMjQzMVpNOC42ODA3NCA5LjYyNDMxSDkuNTYyMzdWMTAuNTA1OUg4LjY4MDc0VjkuNjI0MzFaTTcuMDMxNzcgOC4wMjQzMUg3LjkxMzRWOC45MDU5M0g3LjAzMTc3VjguMDI0MzFaTTcuMDMxNzcgOS42MjQzMUg3LjkxMzRWMTAuNTA1OUg3LjAzMTc3VjkuNjI0MzFaTTkuNzQ2MjEgMTQuMzQ3OUg4Ljc2NjYxVjEyLjMzNDVINy45NjMzN1YxNC4zNDc5SDYuOTgzNzdWMTEuMzU0OUg5Ljc0NjIxVjE0LjM0NzlaTTExLjIxMTQgMTAuNTA2SDEwLjMyOTdWOS42MjQzNEgxMS4yMTE0VjEwLjUwNlpNMTEuMjExNCA4LjkwNTk3SDEwLjMyOTdWOC4wMjQzNEgxMS4yMTE0VjguOTA1OTdaTTEyLjg2MDMgMTAuNTA2SDExLjk3ODdWOS42MjQzNEgxMi44NjAzVjEwLjUwNlpNMTIuODYwMyA4LjkwNTk3SDExLjk3ODdWOC4wMjQzNEgxMi44NjAzVjguOTA1OTdaIiBmaWxsPSIjMTExODI3Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMTkwXzg5Ij4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4zNjQ5OSkiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K);
}

.dropdown-menu #teacher::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE5MF8xNzYpIj4KPHBhdGggZD0iTTE2LjM1MzIgMC4xODQ5MDZINy44NDc3N0M3LjU2NDggMC4xODQ5MDYgNy4zMzU5NCAwLjQxNDQ4NiA3LjMzNTk0IDAuNjk3MDMyVjQuMzA5MjRMNy43MDYwMSAzLjg3NjU2QzcuODgxNzQgMy42NzA4NSA4LjExMzQxIDMuNTQ0IDguMzU5NjMgMy40OTFWMS4yMDg5NkgxNS44NDEzVjcuODk1OTlIOC4zNTk2N1Y2Ljc3NjU5TDguMTI5MTcgNy4wNDYxM0M3LjkyNzc0IDcuMjgxMTcgNy42NDM0IDcuNDI3MDIgNy4zMzU5NCA3LjQ1NTc1VjguNDA3OTVDNy4zMzU5NCA4LjY5MDQ5IDcuNTY0OCA4LjkxOTc4IDcuODQ3NzcgOC45MTk3OEgxMC42MTAxTDkuMjA2NzEgMTUuMjkxMkM5LjE0Mzg0IDE1LjU3NjkgOS4zMjQ0MSAxNS44NTk1IDkuNjEwMzYgMTUuOTIyNUM5Ljg5MzcyIDE1Ljk4NDggMTAuMTc4NyAxNS44MDQ4IDEwLjI0MDkgMTUuNTE5M0wxMS42OTQ0IDguOTE5ODFIMTIuNTM5NEwxMy45OTI5IDE1LjUxOTNDMTQuMDQ3NCAxNS43NjY0IDE0LjI2NjUgMTUuOTM1IDE0LjUwOTYgMTUuOTM0N0MxNC41NDczIDE1LjkzNDcgMTQuNTg1OSAxNS45MzA5IDE0LjYyNCAxNS45MjI1QzE0LjkxIDE1Ljg1OTUgMTUuMDkwNSAxNS41NzY5IDE1LjAyNzEgMTUuMjkxMkwxMy42MjM5IDguOTE5NzhIMTYuMzUzMkMxNi42MzU5IDguOTE5NzggMTYuODY1MSA4LjY5MDQ5IDE2Ljg2NTEgOC40MDc5NVYwLjY5NzAzMkMxNi44NjUgMC40MTQ0ODYgMTYuNjM1OSAwLjE4NDkwNiAxNi4zNTMyIDAuMTg0OTA2WiIgZmlsbD0iIzExMTgyNyIvPgo8cGF0aCBkPSJNMTIuMjg3NCAzLjE3NTE2QzEyLjI0NyAzLjA3MzQ4IDEyLjEzMjcgMy4wMjM1NSAxMi4wMzEgMy4wNjM4TDkuMDE1NTEgNC4xMjgxN0M4LjczODc1IDMuOTEzODkgOC4zMzk0NiAzLjk1MjE3IDguMTA4NjcgNC4yMjA1OUw3LjE1MTggNS4zMzgwMkw2LjMwMzM0IDQuNjEwNzRDNi4zMDg5NCA0LjY3MDggNi4zMjE2NSA0LjcyOTE2IDYuMzIxNjUgNC43OTA3OFY2LjM2OTYzTDYuNzkzNyA2Ljc3NDA5QzcuMDczODIgNy4wMTQwMSA3LjQ5Mjg3IDYuOTc2OTMgNy43MjcwOSA2LjcwMjIzTDguODY2MjMgNS4zNzAxNkw5Ljc4NDk0IDQuODMyN0wxMi4yMDI3IDMuNDE4MTFDMTIuMjg2MyAzLjM2OTkyIDEyLjMyMzQgMy4yNjY5MyAxMi4yODc0IDMuMTc1MTZaIiBmaWxsPSIjMTExODI3Ii8+CjxwYXRoIGQ9Ik00LjQ1OTA0IDMuNDU4MjhIMy44OTA3OEMzLjQ1NTY4IDMuNDU4MjggMy4wNzMwOSAzLjY2OTc1IDIuODI5OTEgMy45OTIwOEwxLjA4NTU5IDUuNTk4MDRDMC44MTM4MDUgNS44NDAxNCAwLjc4OTE1NCA2LjI1OTUxIDEuMDMzOSA2LjUzMjkzTDIuNDU3MDMgOC4xMjEzOUMyLjY5OTY1IDguMzkzMDUgMy4xMTk2NSA4LjQxNzA4IDMuMzkxNCA4LjE3MjkyQzMuNjYzODggNy45Mjg3MiAzLjY4Njg5IDcuNTEwNDYgMy40NDI3MyA3LjIzODMxTDIuNDYxOCA2LjE0MjkyTDMuODU1MTEgNC44OTYxNUwzLjA0MzYzIDUuOTk4NjRMMy44Mzc0MiA2Ljg4NDg5QzQuMjc2MDUgNy4zNzUwNCA0LjIzNDY5IDguMTI4MTYgMy43NDQ3NiA4LjU2NzExQzMuNDEwMjcgOC44NjY5OSAyLjk1Mzc5IDguOTM3MzUgMi41NTgwNSA4Ljc5OTA1QzIuNTU4MDUgOC43OTkwNSAyLjU2NDIgMTEuODYxMiAyLjU2NDIgMTUuMTQwNUMyLjU2NDIgMTUuNTc5MiAyLjkxOTcyIDE1LjkzNDcgMy4zNTgzOCAxNS45MzQ3QzMuNzk2NTggMTUuOTM0NyA0LjE1MjU2IDE1LjU3OTIgNC4xNTI1NiAxNS4xNDA1QzQuMTUyNTYgMTEuODYyMiA0LjE1MjU2IDEzLjczMyA0LjE1MjU2IDEwLjQwNzNINC42ODIzMUM0LjY4MjMxIDEzLjczMDYgNC42ODIzMSAxMS44NjEyIDQuNjgyMzEgMTUuMTQwNUM0LjY4MjMxIDE1LjM2OTUgNC42MTg0NiAxNS41ODE2IDQuNTE2NjUgMTUuNzY5M0M0LjY0OTkxIDE1Ljg3MTggNC44MTU3MyAxNS45MzQ3IDQuOTk2NDcgMTUuOTM0N0M1LjQzNTM2IDE1LjkzNDcgNS43OTA4OCAxNS41NzkyIDUuNzkwODggMTUuMTQwNUM1Ljc5MDg4IDExLjg2MjIgNS43OTE4OSAxMy4yMzY1IDUuNzkxODkgNC43OTA3NEM1Ljc5MTk2IDQuMDU0ODMgNS4xOTUzOCAzLjQ1ODI4IDQuNDU5MDQgMy40NTgyOFoiIGZpbGw9IiMxMTE4MjciLz4KPHBhdGggZD0iTTMuNDY3MjMgMi45ODE2NkMzLjY3OTU5IDMuMDkyMDMgMy45MTc5OSAzLjE2MDUzIDQuMTc0MDkgMy4xNjA1M0M0LjQzMDg0IDMuMTYwNTMgNC42NjkyNSAzLjA5MjAzIDQuODgyMjIgMi45ODE0NkM1LjM3OTMgMi43MjM5MyA1LjcyMTk0IDIuMjExMjEgNS43MjE5NCAxLjYxMjgxQzUuNzIxOTQgMC43NTc5NzggNS4wMjg5NSAwLjA2NTIxNjEgNC4xNzQwNiAwLjA2NTIxNjFDMy4zMTkyOSAwLjA2NTIxNjEgMi42MjY0NiAwLjc1Nzk3OCAyLjYyNjQ2IDEuNjEyODFDMi42MjY1IDIuMjExNTQgMi45Njk0OSAyLjcyNDQ1IDMuNDY3MjMgMi45ODE2NloiIGZpbGw9IiMxMTE4MjciLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8xOTBfMTc2Ij4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC44NjQ5OSkiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K);
}

.dropdown-menu #student::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQuNTEzMDYgNy4yMzU5NkM0LjUxMzA2IDcuOTYyMzcgNC45NTUyNSA4LjU4OTU2IDUuNTkxNTkgOC43NzA1NkM2LjA2ODUzIDEwLjA5NDYgNy4zMjgyOCAxMC45ODIzIDguNzM0NzggMTAuOTgyM0MxMC4xNDEzIDEwLjk4MjMgMTEuNDAxIDEwLjA5NDYgMTEuODc3OSA4Ljc3MDU2QzEyLjUxNDMgOC41ODk1NiAxMi45NTY1IDcuOTYyNjIgMTIuOTU2NSA3LjIzNTk2QzEyLjk1NjUgNi43NDU2MiAxMi43NDYxIDYuMjc4MDkgMTIuMzkyMSA1Ljk3ODIxTDEyLjQ0NCA1LjY5OTQzQzEyLjQ0NCA1LjU5NTU5IDEyLjQzNjggNS40OTQxOCAxMi40Mjg3IDUuMzkyNTJMMTIuNDIyIDUuMzExNDlMMTIuMzUyOSA1LjM1NDQzQzExLjM4ODIgNS45NTI3NCA5LjgyNTIyIDYuMjIwMzcgOC43MDQzMSA2LjIyMDM3QzcuNjE1MjUgNi4yMjAzNyA2LjA4MjU5IDUuOTYzNjggNS4xMTM2MiA1LjM5MDEyTDUuMDQzMDMgNS4zNzE2OEw1LjAzNzE2IDUuNDUxNDlDNS4wMzExNiA1LjUzMzc0IDUuMDI1MTYgNS42MTU3NCA1LjAyNiA1LjcwODY4TDUuMDc3IDUuOTc4OTZDNC43MjMzMSA2LjI3ODg0IDQuNTEzMDYgNi43NDYxMiA0LjUxMzA2IDcuMjM1OTZaIiBmaWxsPSIjMTExODI3Ii8+CjxwYXRoIGQ9Ik0xMS45OTQ3IDExLjkwODdDMTEuNjkzNiAxMS43MjIxIDExLjQwOTMgMTEuNTQ1OSAxMS4xNzkgMTEuMzY0TDExLjE0OTggMTEuMzQwOUwxMS4xMTk0IDExLjM2MjVDMTAuOTA0MiAxMS41MTYxIDEwLjE0NDMgMTIuMzA1MyA5LjUyNDkxIDEyLjk2MTZMOS4xODI4OCAxMi4yOTY4TDkuMzYwOTEgMTIuMTY5NVYxMS41MTc4SDguMTA4NzJWMTIuMTY5NUw4LjI4Njc1IDEyLjI5NjhMNy45NDQ2IDEyLjk2MTlDNy4zMjUwNyAxMi4zMDUzIDYuNTY0NzkgMTEuNTE2MSA2LjM0OTc5IDExLjM2MjVMNi4zMTkzOCAxMS4zNDA5TDYuMjkwMSAxMS4zNjRDNi4wNTk4NSAxMS41NDU5IDUuNzc1NDQgMTEuNzIyMSA1LjQ3NDQxIDExLjkwODdDNC41MzYgMTIuNDkwMiAzLjQ3MjQ3IDEzLjE0OTIgMy40NzI0NyAxNC4zMjU3QzMuNDcyNDcgMTUuMDIwOCA1LjEwNSAxNiA4LjczNDYgMTZDMTIuMzY0MiAxNiAxMy45OTY3IDE1LjAyMDggMTMuOTk2NyAxNC4zMjU3QzEzLjk5NjcgMTMuMTQ5MiAxMi45MzMxIDEyLjQ5MDIgMTEuOTk0NyAxMS45MDg3WiIgZmlsbD0iIzExMTgyNyIvPgo8cGF0aCBkPSJNNC45Nzk2OCA0LjExOTVDNC45Nzk2OCA0LjcwMjI4IDYuNzMzMzcgNS40NDE1NiA4LjcwNDMxIDUuNDQxNTZDMTAuNjc1MiA1LjQ0MTU2IDEyLjQyODkgNC43MDIzMSAxMi40Mjg5IDQuMTE5NVYzLjMxNjE5TDEzLjc4ODQgMi43NjNWNC41MTE4MUMxMy42MyA0LjUzNjU2IDEzLjUwODMgNC42NzM4NyAxMy41MDgzIDQuODM4MzhDMTMuNTA4MyA0Ljk3OTA5IDEzLjYwMSA1LjEwMTg3IDEzLjczNDYgNS4xNDYyNUwxMy40NjQyIDYuOTMwOTdIMTQuNzM2MkwxNC40NjU4IDUuMTQ2MjVDMTQuNTk5MyA1LjEwMTg0IDE0LjY5MTggNC45NzkwNiAxNC42OTE4IDQuODM4MzhDMTQuNjkxOCA0LjY3MjkxIDE0LjU2OTQgNC41MzUzNCAxNC40MTAxIDQuNTExMzFMMTQuNDAzNiAyLjQxMTQxQzE0LjQxNDcgMi4zOTIgMTQuNDE0NyAyLjM3MTg0IDE0LjQxNDcgMi4zNjExOUMxNC40MTQ3IDIuMzUwNSAxNC40MTQ3IDIuMzMwNjMgMTQuNDEwMSAyLjMzMDYzSDE0LjQxQzE0LjQwMTggMi4yNTQxOSAxNC4zNDcyIDIuMTg2NSAxNC4yNjc1IDIuMTU0TDEzLjkwNzMgMi4wMDY1TDkuMjI1OTYgMC4xMDExODdDOS4wNjM3NyAwLjAzNDkzNzUgOC44ODM0MyAwIDguNzA0MzEgMEM4LjUyNTE4IDAgOC4zNDQ4NyAwLjAzNDkzNzUgOC4xODI3NCAwLjEwMTE4N0wzLjE0MTA2IDIuMTU0MjVDMy4wNTE1OSAyLjE5MDg3IDIuOTkzNzcgMi4yNzIxNiAyLjk5Mzc3IDIuMzYxMTlDMi45OTM3NyAyLjQ1IDMuMDUxNTIgMi41MzEyOCAzLjE0MTE1IDIuNTY4MzhMNC45Nzk2OCAzLjMxNjEyVjQuMTE5NVoiIGZpbGw9IiMxMTE4MjciLz4KPC9zdmc+Cg==);
}

body {
  font-family: 'Inter', Arial, sans-serif;
  background: #f7f8fa;
  margin: 0;
  color: #18181b;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 16px;
}

header {
  background: #fff;
  padding: 24px 0;
  border-bottom: 1px solid #ececec;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-weight: bold;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

nav {
  display: flex;
  gap: 32px;
  align-items: center;
}

nav a {
  text-decoration: none;
  color: #18181b;
  font-weight: 500;
  padding: 8px 0;
  transition: color 0.2s;
}

nav a:hover {
  color: #2563eb;
}

.auth-buttons {
  display: flex;
  gap: 12px;
}

.btn {
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-signup {
  background: #18181b;
  color: #fff;
}

.btn-login {
  background: #fff;
  color: #18181b;
  border: 1px solid #ececec;
}

.hero {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  margin-top: 32px;
  position: relative;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 420px;
}

.hero-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

.hero-content {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 40px;
  background: linear-gradient(90deg, rgba(24, 24, 27, 0.7) 0%, rgba(24, 24, 27, 0.1) 100%);
  color: #fff;
}

.hero-content .featured {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.8;
  margin-bottom: 8px;
  display: block;
}

.hero-content h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 16px 0;
  line-height: 1.2;
}

.hero-content p {
  font-size: 1.1rem;
  margin: 0 0 16px 0;
  opacity: 0.95;
  max-width: 600px;
}

.arrow {
  position: absolute;
  right: 40px;
  bottom: 40px;
  font-size: 2rem;
  background: #fff;
  color: #18181b;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.section-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 48px 0 24px 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}

.blog-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}

.blog-card:hover {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.blog-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.blog-card-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blog-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.blog-card-desc {
  font-size: 0.98rem;
  color: #52525b;
  margin-bottom: 16px;
  flex: 1;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: #71717a;
  margin-top: 8px;
}

.blog-card-meta img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 6px;
}

.loading {
  text-align: center;
  margin: 40px 0;
}

.footer-section {
  background: #043a51;
  color: #fff;
  padding: 3rem 0 0 0;
  font-family: Open Sans, Arial, sans-serif;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 4rem 2rem 4rem;
  gap: 2rem;
}

.footer-col {
  flex: 1 1 220px;
  min-width: 220px;
  margin-bottom: 2rem;
}

.footer-brand {
  flex: 2 1 350px;
}

.footer-brand p {
  font-family: Inter;
  font-weight: 500;
  font-size: 16px;
  line-height: 160%;
  letter-spacing: -3%;
}

.footer-logo {
  display: flex;
  align-items: center;
  font-size: 2.2rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
  color: #b9c7cc;
}

.footer-logo-icon {
  font-size: 2.5rem;
  margin-right: 0.5rem;
}

.footer-logo-text {
  font-size: 2.2rem;
  font-family: Montserrat, Arial, sans-serif;
}

.footer-col h3 {
  margin-bottom: 1.5rem;
  color: #fff;
  font-weight: 600;
  font-size: 17px;
  line-height: 100%;
  letter-spacing: -3%;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 1rem;
  font-family: Open Sans;
  font-weight: 400;
  font-size: 16px;
  line-height: 160%;
  letter-spacing: -3%;
}

.footer-col ul li a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-col ul li a:hover {
  color: #00aaf7;
}

.footer-contact .footer-icon {
  margin-right: 0.7rem;
  font-size: 1.2rem;
  vertical-align: middle;
}

.footer-social {
  margin-top: 1.5rem;
  display: flex;
  gap: 1.2rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #0e5a7a;
  transition: background 0.2s, border 0.2s;
}

.footer-social a:hover {
  background: #00aaf7;
  border-color: #00aaf7;
}

.footer-social img {
  width: 20px;
  height: 20px;
}

.footer-bottom {
  border-top: 1px solid #0e5a7a;
  text-align: center;
  margin-top: 1rem;
  font-family: Inter;
  font-weight: 500;
  font-size: 16px;
  line-height: 160%;
  letter-spacing: -3%;
  padding: 1rem 0;
}

/* Footer Section */
@media (max-width: 992px) {
  .footer-container {
    flex-direction: column;
    padding: 0 1.5rem 2rem 1.5rem;
    gap: 0;
  }

  .footer-col {
    margin-bottom: 1.5rem;
  }

  .footer-brand {
    margin-bottom: 2rem;
  }
}

@media (max-width: 600px) {
  .footer-section {
    padding: 2rem 2rem 0 2rem;
  }

  .footer-container {
    padding: 0 0.5rem 1.5rem 0.5rem;
  }

  .footer-logo {
    font-size: 1.3rem;
  }

  .footer-logo-text {
    font-size: 1.3rem;
  }

  .footer-brand {
    flex: 0;
  }

  .footer-col {
    flex: 0;
  }

  .footer-col h3 {
    font-size: 1.1rem;
  }

  .footer-bottom {
    font-size: 1rem;
    padding: 1rem 0 0.7rem 0;
  }
}