.hero-header {
  position: relative;
  min-height: 600px; /* desktop */
  color: #fff;
  z-index: 1;
}

.hero-video-wrapper {
  position: absolute;
  inset: 0;
  height: 600px; /* desktop height */
  overflow: hidden;
  z-index: -2;
}

.hero-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  height: 600px; /* desktop height */
  background: rgba(0, 0, 0, 0.35);
  z-index: -1;
}

/* NAVBAR STYLE */
.hero-navbar {
  padding-top: 15px;
}

.hero-logo {
  height: 50px;
  width: auto;
}

/* Desktop menu white over the video */
.hero-menu .nav-link {
  color: #ffffff;
  padding: 0 15px;
  font-weight: 500;
	font-family: cairo;
}

.hero-menu .nav-link:hover {
  color: #f5f5f5;
}


/* DESKTOP DROPDOWN */
.hero-menu .nav-item.dropdown {
  position: relative;
}

.hero-menu .submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 200px;
  background: #ffffff;
  padding: 0.5rem 0;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 2000;
}

.hero-menu .submenu .dropdown-item {
  display: block;
  padding: 0.4rem 1rem;
  color: #333;
  white-space: nowrap;
  text-decoration: none;
}

.hero-menu .submenu .dropdown-item:hover {
  background: #f5f5f5;
}

/* show on hover (desktop only) */
@media (min-width: 992px) {
  .hero-menu .nav-item.dropdown:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}



/* MOBILE TOGGLER (THREE DASHES) */
.navbar-toggler {
  border: none;
  background: transparent;
  padding: 0;
}

.toggler-bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
}

.toggler-bars span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: #ffffff; /* white dashes over video */
}

/* OFFCANVAS MENU (SLIDE FROM RIGHT) */
.offcanvas-menu {
  position: fixed;
  top: 0;
  right: -260px;       /* hidden by default */
  width: 260px;
  height: 100%;
  background: #ffffff;
  color: #333;
  padding: 1.5rem;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease;
  z-index: 999999;
}

.offcanvas-menu.open {
  right: 0;
}

.offcanvas-menu .nav-link {
  color: #333;
  font-weight: 500;
  padding: 0.5rem 0;
}

.offcanvas-menu .nav-link:hover {
  color: #007b5e;
}

.offcanvas-close {
  border: none;
  background: transparent;
  font-size: 2rem;
  line-height: 1;
  color: #333;
  padding: 0;
  margin-bottom: 1rem;
}

/* Backdrop when mobile menu is open */
.offcanvas-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1040;
}

.offcanvas-backdrop.show {
  opacity: 1;
  visibility: visible;
}

/* Prevent scroll when menu open */
body.offcanvas-open {
  overflow: hidden;
}



/* MOBILE COLLAPSIBLE SUBMENU */
.offcanvas-menu .has-submenu > .mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.offcanvas-menu .has-submenu.open > .mobile-submenu {
  max-height: 400px; /* just needs to be big enough */
}


    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        flex-direction: row-reverse;
		
    }

.nav-item { padding: 10px; padding-top: 0px;}

.submenu-toggle-icon {
  font-size: 0.8rem;
}

.submenu { list-style: none;}
.submenu li { text-align: right;}


.lang a { color: #fff;
text-decoration: none;}


/* Mobile heights */
@media (max-width: 767.98px) {
  .hero-header {
    min-height: 350px;
  }
  .hero-video-wrapper,
  .hero-overlay {
    height: 350px; /* mobile height */
  }
	
	.nav-item { text-align: right; font-family: cairo}
	
	

}