/* Global Styles */
body {
    overflow-x: hidden;
}

.container, .section, header {
    max-width: 100vw;
    overflow-x: hidden;
}

img, video {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Menu Items */
.menu-item {
    padding: 10px;
    background-color: #19A974;
    color: white;
    margin: 5px 0;
    border-radius: 5px;
    display: block;
    text-align: center;
  }
/* Focus styles for menu items */
.menu-item:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); /* Optional: add a subtle focus ring */
}

/* Mobile Top Bar */
.mobile-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #19a974;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  z-index: 1000;
  transition: all 0.4s ease; /* Smooth transition */
}

.mobile-top-bar.menu-active {
  background: white;
}

/* Mobile Logo */
.mobile-logo {
  height: 100%;
  display: flex;
  align-items: center;
  flex-grow: 1; /* Allow logo to take available space */
  max-width: calc(100% - 60px); /* Prevent overlap with hamburger */
}


.mobile-logo img {
  height: 70px; /* Fixed larger height */
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.hamburger {
    display: none; /* Hide the hamburger button by default */
    background: transparent;
    border: none;
    cursor: pointer;
    position: absolute;  /* Position the button absolutely */
    top: 20px;  /* Adjust the distance from the top */
    right: 15px;  /* Adjust the distance from the right */
    z-index: 15;  /* Ensure it's above other content */
  }
  
.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #ffffff;
    margin: 6px 0;
    transition: 0.4s;
  }

/* Black Bars When Menu Active */
.menu-active .bar1,
.menu-active .bar2,
.menu-active .bar3 {
  background-color: #111111;
}

/* Rotate first bar */
/* Transformations (Preserved from existing code) */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
  background-color: #111111 !important; /* Ensure black when transformed */
}
.change .bar2 {
  opacity: 0;
  background-color: #111111 !important;
}
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
  background-color: #111111 !important;
}

/* Mobile Menu - Full Screen */
.mobile-menu {
    display: none; /* Hide menu by default */
    position: fixed;
    flex-direction: column;
    align-items: center;
    top: 70px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 5;
    transition: transform 0.3s ease-in-out;
    transform: translateY(-100%); /* Start off-screen */
    padding-top: 50px
  }

/* Mobile Menu active state (visible when toggled) */
.mobile-menu.active {
    display: block;
    transform: translateY(0); /* Slide down into view */
    padding-top: 50px; /* Add some space for the menu items */
  }

.mobile-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
  }

.mobile-menu li {
    width: 80%; /* Make each item take up full width */
    text-align: center;
  }

/* Mobile Menu Items */
.mobile-menu .menu-item {
    padding: 15px;
    background-color: #19A974;
    color: white;
    margin: 10px 0;
    border-radius: 5px;
    display: block;
  }

/* Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {

    /* Hide the desktop menu on mobile */
    .desktop-menu {
        display: none; /* Hide desktop menu on mobile */
    }

    .mobile-top-bar {
      display: block;
    }
    /* Show the mobile menu button */
    .hamburger {
        display: block; /* Make the hamburger button visible */
    }
}

/* Desktop Devices (larger than 768px) */
@media (min-width: 769px) {
    /* Show the desktop menu */
    .desktop-menu {
        display: block; /* Show desktop menu */
    }

    /* Hide the mobile menu */
    .mobile-menu {
        display: none; /* Hide mobile menu */
    }
    .mobile-top-bar {
        display: none;
    }

    /* Hide the mobile menu button on desktop */
    .hamburger {
        display: none;
    }
}