/* ------------------------------------------------------------------
   Custom overrides / additions on top of the original theme's main.css
   ------------------------------------------------------------------ */

/* Fix: the footer's two widget columns default to flex "stretch", so the
   shorter nav column gets pulled down to match the taller contact-info
   column, leaving a dead gap under the nav links. Align both to the top
   instead so each column only takes the height its own content needs. */
.footer-section .footer-widgets-wrapper.style1 .widget {
  align-items: flex-start;
}

/* ------------------------------------------------------------------
   Offcanvas mobile nav styling
   The original theme renders this menu via the jQuery meanmenu plugin,
   which injects its own markup/classes (.mean-container, .mean-nav, ...)
   and is styled by meanmenu.css. This template's offcanvas nav is built
   with plain React state instead (see NavMenu.jsx "mobile" variant), so
   we restyle it here to match the same look without needing jQuery.
   ------------------------------------------------------------------ */
.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.mobile-nav__list > li {
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.12));
}

.mobile-nav__list > li:last-child {
  border-bottom: none;
}

.mobile-nav__list a {
  display: inline-block;
  width: 100%;
  padding: 10px 0;
  color: var(--white, #fff) !important;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  text-transform: capitalize;
  transition: color 0.3s ease-in-out;
}

.mobile-nav__list a:hover {
  color: var(--theme, #ffb26e) !important;
}

.mobile-nav__toggle {
  background: none;
  border: none;
  color: var(--white, #fff);
  font-size: 18px;
  padding: 10px 4px;
  cursor: pointer;
  line-height: 1;
}

.mobile-nav__toggle:hover {
  color: var(--theme, #ffb26e);
}

.mobile-nav__list .submenu {
  list-style: none;
  margin: 0 0 8px 0;
  padding: 0 0 0 16px;
}

.mobile-nav__list .submenu li a {
  font-size: 15px;
  font-weight: 400;
  padding: 8px 0;
  opacity: 0.85;
}

.mobile-nav__list .submenu li a:hover {
  opacity: 1;
}
@media (max-width:1024px) {
   .mouse-cursor {display: none;}
   nav#mobile-menu {
    display: none;
   }
}