@charset "utf-8";
/* CSS Document */

 :root {
      --primary-color: #0a58ca;
      --secondary-color: #6610f2;
      --accent-color: #198754;
      --light-bg: #f8f9fa;
    }

    body {
      font-family: 'Poppins', sans-serif;
      background-color: var(--light-bg);
      scroll-behavior: smooth;
    }

    /* Navbar */
/* Base Navbar */
.navbar {
  background-color: #fff;
  box-shadow: 0 2px 8px rgb(32 20 20 / 25%);
}
.logo {
font-family: Verdana, Geneva, sans-serif;
font-size: 25px;
letter-spacing: -1.2px;
word-spacing: 2.6px;
font-weight: 700;
text-decoration: none;
font-style: normal;
font-variant: small-caps;
text-transform: none;
}
.navbar-brand {
  font-weight: 700;
  color: var(--primary-color);
}
/* Default nav links */
.nav-link {
  color: #333;
  font-weight: 500;
  transition: color 0.2s ease;
}

/* Hover effect */
.nav-link:hover {
  color: var(--primary-color);
}

/* Active state (highlighted menu item) */
.nav-link.active {
  color: var(--primary-color) !important;
  font-weight: 600;

}


/* Offcanvas Right Menu (Mobile) */
.offcanvas-menu {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100%;
  background: linear-gradient(98deg, #eeeeee 0%, #ffffff 100%);
  box-shadow: -6px 0 25px rgba(0, 0, 0, 0.15);
  padding: 1.25rem;
  transition: right 0.3s ease-in-out;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.offcanvas-menu.show {
  right: 0;
}

/* Highlight active link */
.offcanvas-menu .nav-link.active {
  color: var(--primary-color);
  font-weight: 600;
}

/* Close button */
.offcanvas-menu .btn-close {
  align-self: flex-end;
  margin-bottom: 1rem;
}

/* Desktop menu should be visible normally */
@media (min-width: 992px) {
  #desktopMenu {
    display: flex !important;
  }
}
@media (max-width: 991.98px) {
  .offcanvas-menu .btn.btn-primary {
    display: block;
    width: 93%;
    text-align: center;
    margin-top: 0.75rem;
  }
}

 /* Footer */
    footer {
      background: var(--primary-color);
      color: white;
      padding: 40px 0;
    }
    footer a {
      color: #fff;
      text-decoration: none;
      opacity: 0.9;
    }
    footer a:hover { opacity: 1; }