#logo {
  height: auto;
  max-width: 200px;
  width: clamp(100px, 18vw, 200px);
  object-fit: contain;
}

/* Modern navbar - light to match logo */
.navbar-modern {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 0.5rem 0;
}
.navbar-modern .nav-link {
  color: #212529 !important;
  font-weight: 500;
  font-size: 0.95rem !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.375rem;
  transition: color 0.2s ease, background 0.2s ease;
}
.navbar-modern .nav-link:hover,
.navbar-modern .nav-link:focus {
  color: #0d6efd !important;
  background: rgba(0,0,0,0.06);
  text-decoration: none !important;
}
.navbar-modern .nav-link.active {
  color: #0d6efd !important;
  background: rgba(0,0,0,0.08);
}
.navbar-modern .dropdown-toggle::after {
  margin-left: 0.35em;
}
.navbar-modern .navbar-toggler {
  border-color: rgba(0,0,0,0.2);
}
.navbar-modern .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Register & Login in navbar */
.navbar-modern .nav-link-register {
  color: #495057 !important;
  font-weight: 500;
  padding: 0.45rem 1rem !important;
  border: 1.5px solid #dee2e6;
  border-radius: 2rem;
  background: transparent;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.navbar-modern .nav-link-register:hover {
  color: #0d6efd !important;
  background: rgba(13, 110, 253, 0.06);
  border-color: #0d6efd;
  box-shadow: 0 1px 4px rgba(13, 110, 253, 0.15);
}
.navbar-modern .nav-link-login {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%) !important;
  color: #fff !important;
  padding: 0.45rem 1.1rem !important;
  border-radius: 2rem;
  border: none;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.navbar-modern .nav-link-login:hover {
  background: linear-gradient(135deg, #0a58ca 0%, #084298 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.4);
  transform: translateY(-1px);
}
@media (max-width: 991.98px) {
  .navbar-auth {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0,0,0,0.08);
  }
}
.dropdown-modern {
  background: #fff !important;
  border: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin-top: 0.35rem !important;
}
.dropdown-modern .dropdown-item {
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  transition: background 0.15s ease;
}
.dropdown-modern .dropdown-item:hover {
  background: #f8f9fa;
}
.dropdown-modern .dropdown-divider {
  margin: 0.25rem 0;
}

ul li a{
    font-size: 20px !important;
}

ul li a:hover{
    color:violet !important;
    text-decoration: underline;
}



#main{
    background-image: url('../images/students.jpg');
    background-position: auto;
    background-repeat: no-repeat;
    background-size: cover;
}

#main .col-md-12 h1{
    text-shadow: 2px 2px black;
}
 
#main .mb-5 a{
    text-shadow: 2px 2px black;
}

#science{
    background-color: #cca0d3 !important;
}

#technology{
    background-color: #dae0a0 !important;
}

#engineering{
    background-color: #9ad9e3 !important;
}

#mathematics{
    background-color: #a9e8b7 !important;
}

.sectionmain{
    background-image: url('../images/computer.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


#ceo{
    width:300px !important;
    border-radius: 10px;
}

#ceomessage{
    font-size: 25px;;
}


.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
    left: 100%;
    top: 0;
}


.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    transition: 1.5s !important;
}
