/* ================================================ */
/* 1. Base Body & Container                        */
/* ================================================ */
body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(to right, #111827, #1f2937);
  color: #fff;
}
.container { max-width: 1200px; margin: auto; }

/* ================================================ */
/* 2. Navbar Styling                                */
/* ================================================ */
nav.navbar {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
nav.navbar .navbar-brand {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f8fafc;
}
nav.navbar .navbar-brand img { filter: brightness(1.2); }

nav.navbar .nav-link {
  color: #d1d5db;
  margin-left: 1rem;
  transition: color 0.3s ease, background-color .3s ease;
}
nav.navbar .nav-link:hover { color: #ffffff; }
nav.navbar .nav-link.active { color: #00d9f5; font-weight: 600; }

/* Clean, default toggler (no custom bars) */
.navbar-toggler {
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  padding: .35rem .5rem;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.navbar-toggler:hover {
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.1);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
/* keep Bootstrap’s default .navbar-toggler-icon visible */

/* Mobile menu panel look */
@media (max-width: 991.98px){
  #mainNavbar{
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    margin-top: .75rem;
    padding: .75rem;
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
  }
  nav.navbar .nav-link{
    padding: .65rem .75rem;
    border-radius: 8px;
    margin-left: 0;
  }
  nav.navbar .nav-link:hover{ background: rgba(255,255,255,.06); }
  nav.navbar .nav-link.active{
    background: rgba(0,217,245,.12);
    color: #00d9f5;
  }
}

/* ================================================ */
/* 3. Footer Styling                                */
/* ================================================ */
.footer-gradient { background: linear-gradient(135deg, #1e293b, #0f172a); }
footer h5 { font-size: 1.25rem; font-weight: 600; color: #f8fafc; margin-bottom: 1rem; }

.footer-link {
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-link:hover,
.footer-link.active { color: #00d9f5; text-decoration: none; }

.footer-links-list { padding: 0; margin: 0; list-style: none; }
.footer-icon { color:#cbd5e1; transition: color .3s ease, transform .3s ease; display:inline-flex; align-items:center; }
.footer-icon:hover { color:#00d9f5; transform: translateY(-2px); }
footer hr { opacity: .2; margin-top:2rem; margin-bottom:2rem; }
footer p, footer a { font-size: .9rem; }

/* 3. Footer – Social Buttons */
.social-btn{
  width:45px; height:45px;
  background-color: rgba(255,255,255,.1);
  border-radius:50%;
  color:#cbd5e1; font-size:1.2rem; text-decoration:none;
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.social-btn i{ pointer-events:none; }
.social-btn:hover, .social-btn:focus{
  background-color: rgba(0,217,245,.15);
  color:#00d9f5;
  box-shadow: 0 4px 12px rgba(0,217,245,.4);
  transform: translateY(-2px);
}
.social-btn:active{ transform: translateY(0); box-shadow:none; }
.social-btn:focus-visible{ outline:2px solid #00d9f5; outline-offset:2px; }

/* ================================================ */
/* 4. Button & Form Link Overrides                 */
/* ================================================ */
.btn-outline-light{
  color:#f1f5f9; border-color:#f1f5f9;
  transition: background-color .3s ease, color .3s ease;
}
.btn-outline-light:hover{ background-color:#f1f5f9; color:#0f172a; }

/* ================================================ */
/* 5. Utility Classes                               */
/* ================================================ */
html, body { height: 100%; }
body { display:flex; flex-direction:column; }
main { flex:1; }