* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',Tahoma,sans-serif; }

:root {
	--primary:#1a4f72;
	--secondary:#3a7bb8;
	--accent:#00b894;
	--light:#f5f7fa; 
	--dark:#2d3436; 
	--text:#2d3436; 
	--text-light:#878787;
	--border:#e1e8ed;
	--header-height: 60px;
	--mega-menu-height: 50px;
}

html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
  background:var(--light);
  color:var(--text);
  line-height:1.6;
}

main {
  flex: 1; /* push footer down */
  display:flex;
  flex-direction:column;
}

/* Header */
header {
  background:linear-gradient(to right,var(--primary),var(--secondary));
  color:white; padding:1rem; position:sticky; top:0; z-index:1000;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
}
.header-container {
  display:flex; justify-content:space-between; align-items:center;
  max-width:1200px; margin:0 auto; flex-wrap:wrap;
}
.logo { display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:1.5rem; }
.logo i { color:var(--accent); }
.nav-toggle { display:none; background:none; border:none; color:white; font-size:1.5rem; cursor:pointer; }
nav ul { display:flex; list-style:none; gap:1.5rem; }
nav a { color:white; text-decoration:none; font-weight:500; display:flex; gap:.3rem; align-items:center; }
nav a:hover { color:var(--accent); }


    /* Page Title - Centered and Different Style */
    .pageTitle {
      background: #f8f9fa;
      color: #495057;
      text-align: center;
      width: 100%;
      margin: 0.5rem auto;
      border-left: 4px solid var(--accent);
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .pageTitle h1 {
      font-size: 1.5rem;
      font-weight: 600;
      margin: 0;
      color: var(--primary);
      letter-spacing: 0.5px;
    }


/* Mega Menu Styles */
.mega-menu-container {
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: sticky;
  top: var(--header-height);
  z-index: 999;
}

.menu-trigger {
  display: none;
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--primary);
  color: white;
  border: none;
  text-align: left;
  font-weight: 500;
  cursor: pointer;
}

.mega-menu {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.mega-menu > ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.mega-menu > ul > li {
  position: relative;
  flex: 1;
  text-align: center;
}

.mega-menu > ul > li > a {
  display: block;
  padding: 1rem 0.5rem;
  color: var(--dark);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.mega-menu > ul > li > a:hover,
.mega-menu > ul > li > a:focus {
  background: var(--light);
  border-bottom: 3px solid var(--accent);
}

/* Dropdown styles */
.mega-menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  background: white;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  list-style: none;
  padding: 0.5rem 0;
  z-index: 1000;
  text-align: left;
}

.mega-menu > ul > li:hover > ul {
  display: block;
}

.mega-menu ul ul li {
  width: 100%;
}

.mega-menu ul ul a {
  display: block;
  padding: 0.8rem 1rem;
  color: var(--text);
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.mega-menu ul ul a:hover {
  background: var(--light);
  color: var(--primary);
  padding-left: 1.5rem;
}


    /* Links grid */
    .links {
      display: grid;
      gap: .5rem;
      margin-top: 1rem;
    }
    .links a {
      color: var(--secondary);
      text-decoration: none;
      font-weight: 500;
    }
    .links a:hover {
      color: var(--accent);
      text-decoration: underline;
    }


/* Footer */
footer { background:var(--primary); color:white; padding:2rem 1rem; margin-top:auto; }
.footer-container {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem;
}
.footer-section h3 { margin-bottom:1rem; font-size:1.2rem; }
.footer-section a { color:rgba(255,255,255,.8); text-decoration:none; }
.footer-section a:hover { color:white; text-decoration:underline; }
.footer-bottom { text-align:center; padding-top:2rem; border-top:1px solid rgba(255,255,255,.1); font-size:.9rem; }

/* Responsive */
@media (max-width:992px) {
  .mega-menu > ul {
    flex-wrap: wrap;
  }
  
  .mega-menu > ul > li {
    flex: 1 1 33.333%;
  }
}

@media (max-width:768px) {
  .nav-toggle{display:block;}
  nav{display:none;width:100%;margin-top:1rem;}
  nav.active{display:block;}
  nav ul{flex-direction:column;gap:.5rem;}
  
      .pageTitle {
        margin: 1.5rem auto;
        padding: 1.2rem 1rem;
      }
      
      .pageTitle h1 {
        font-size: 1.6rem;
      }

  
  .menu-trigger {
    display: block;
  }
  
  .mega-menu {
    display: none;
    flex-direction: column;
  }
  
  .mega-menu.active {
    display: flex;
  }
  
  .mega-menu > ul {
    flex-direction: column;
  }
  
  .mega-menu > ul > li {
    text-align: left;
    flex: 1;
  }
  
  .mega-menu ul ul {
    position: static;
    width: 100%;
    box-shadow: none;
    padding-left: 1.5rem;
    display: none;
  }
  
  .mega-menu > ul > li:hover > ul {
    display: none;
  }
  
  .mega-menu .submenu-active {
    display: block;
  }
}

@media (max-width:576px) {
      .pageTitle h1 {
        font-size: 1.4rem;
      }

  .mega-menu > ul > li {
    flex: 1 1 100%;
  }
}