/* style.css */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; color: #333; line-height: 1.6; }

.banner { 
    width: 100%; height: 200px; 
    background: linear-gradient(135deg, #003366, #00509d); 
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 2rem; font-weight: bold;
}



.top-section { display: flex; flex-wrap: wrap; }
.text-box { flex: 1; min-width: 300px; padding: 40px; background: #f0f7ff; }
.text-box:nth-child(2) { background: #e1efff; }

.bottom-section { display: flex; flex-wrap: wrap; }
.col { flex: 1; min-width: 250px; padding: 20px; text-align: center; border: 1px solid #b3d7ff; }
.col img { width: 50%; height: auto; object-fit: cover; background: #007bff; margin-bottom: 10px; }

footer { background: linear-gradient(135deg, #003366, #00509d);  color: white; text-align: center; padding: 20px; }

footer a {
    color: #ffffff;         /* Default color (white) */
    text-decoration: underline;
    font-weight: bold;
}

footer a:visited {
    color: white;         /* Color for already visited links */
}

footer a:hover {
    color: #e3f2fd;         /* Color when hovering */
    text-decoration: none;
}

footer a:active {
    color: white;         /* Color when clicked */
}
@media (max-width: 768px) {
    .text-box { flex: 100%; }
}

/* --- Dropdown Menu Styles --- */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #e3f2fd;
  color: black;
  padding: 12px 24px;
  border: 1px solid #bbdefb;
  cursor: pointer;
  font-size: 16px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #e3f2fd;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
  z-index: 1000; /* Increased to ensure it stays on top of other content */
  max-height: 200px;    /* 5 items * ~40px per item height */
  overflow-y: auto;     /* Adds the scrollbar when the list exceeds 200px */
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #bbdefb;
}

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