/* Mobile fixes */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

.content-container {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

.hamburger-menu {
  display: flex !important;
  z-index: 1000 !important;
  cursor: pointer !important;
}

.hamburger-menu span {
  background-color: #4361EE !important;
}

@media (max-width: 768px) {
  nav {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    left: auto !important;
    width: 80% !important;
    height: 100vh !important;
    transition: right 0.3s ease !important;
    z-index: 999 !important;
    transform: translateX(0%);
  }
  
  nav.active {
    right: 0 !important;
  }
  
  .menu-overlay {
    z-index: 998 !important;
  }
  
  /*
  header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
    */
  
  .hero, .features-section, .section-header {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

 
} 

.hamburger-menu.active span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}

@media (max-width: 480px) {
   .hamburger-menu.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
  }
 
  .hamburger-menu.active span:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
  }
}


@media (min-width: 769px) and (max-width: 1199px) {
    .logo {
      left: 20px;
      right: auto;
    }
    nav {
      right: 20px;
        left: auto;
    }
} 
@media (min-width: 769px) and (max-width: 850px) {
  .logo .logo-icon {
    width: 140px;
    height: auto;
    max-height: 50px;
  }
}
@media (min-width: 1200px)  {
  header {
    flex-direction: row-reverse;
  }
  nav {
    left: auto;
    right: 20px;
    transform: translateX(0%);
  }
}

@media (min-width: 769px) {
  .hamburger-menu {
    display: none !important;
  }
  .menu-overlay.active {
    display: none;
  }
  
}