/* =========================
   MENU – BASE DESIGN
========================= */

.navbar-nav .nav-link {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #f5f9ff;            /* dark slate */
  transition: all 0.3s ease;
}
.hvr-underline-from-left::before {
  background-color: #2563eb;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.is-active {
  color: #2563eb;            /* soft blue */
}
/* ===============================
   DESKTOP MENU (BLACK BG SAFE)
================================ */
@media (min-width: 992px) {
  .sd-offcanvas-menu {
    position: static;
    height: auto;
    width: auto;
    background: transparent; /* desktop black navbar safe */
    box-shadow: none;
    padding: 0;
    transform: none;
  }
}

/* ===============================
   MOBILE OFFCANVAS MENU
   Right → Left | Min-width: 320px
================================ */
@media (max-width: 991px) {

  body.menu-open {
    overflow: hidden;
  }

  /* OFFCANVAS PANEL */
  .sd-offcanvas-menu {
    position: fixed;
    top: 0;
    right: -300px;                 /* RIGHT se hidden */
    left: auto;
    width: 300px;
    max-width: 85%;
    height: 100vh;
    background: #ffffff;
    z-index: 10001;
    overflow-y: auto;
    transition: transform 0.35s ease;
    box-shadow: -5px 0 20px rgba(0,0,0,0.3);
    padding: 70px 15px 20px;       /* top space for header */
    transform: translateX(0);
  }

  /* OPEN STATE */
  .sd-offcanvas-menu.show {
    transform: translateX(-300px); /* slide in */
  }

  /* MENU LIST */
  .sd-offcanvas-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .sd-offcanvas-menu li {
    border-bottom: 1px solid #eee;
  }

  .sd-offcanvas-menu a {
    display: block;
    padding: 14px 12px;
    font-size: 16px;
    font-weight: 600;
    color: #111;
    text-decoration: none;
  }

  .sd-offcanvas-menu a:hover,
  .sd-offcanvas-menu a.is-active {
    background: #f5f7fa;
    color: #2563eb;
  }

  /* OVERLAY */
  .sd-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
  }

  .sd-menu-overlay.show {
    opacity: 1;
    visibility: visible;
  }

  /* HEADER / LOGO FIX */
  .header {
    position: relative;
    z-index: 10002;
  }

  /* TOGGLER */
  .navbar-toggler {
    border: none;
    outline: none;
    z-index: 10003;
  }
}