@media only screen and (max-width: 768px) {

	body {
	  margin: 0;
	  font-family: Arial, sans-serif;
	}
		
	.mobileNavbar {
	  background-color: #000;
	  overflow: hidden;
	}
	.mobileNavbar {
		display: block;
		margin-top: 22px;
		margin-left: 8px;
	}

	.hamburger-menu {
	  display: inline-block;
	  cursor: pointer;
	  margin-top:5px;
	}

	.hamburger-icon {
	  width: 30px;
	  height: 3px;
	  background-color: #fff;
	  margin: 5px 10px;
	}

	.menu {
	  display: none;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: #694973;
	  padding-top: 60px; /* Adjust this value to your navbar height */
	}

	.menu a {
	  display: block;
	  color: #fff;
	  text-align: center;
	  padding: 20px;
	  text-decoration: none;
	  font-size: 20px;
	  text-transform: uppercase;
	}

	.menu a:hover {
	  background-color: #390343;
	}

	.close-button {
	  position: absolute;
	  top: 15px;
	  right: 30px;
	  background: none;
	  border: none;
	  cursor: pointer;
	  font-size: 30px;
	  font-weight: normal;
	  color: #fff;
	}

	@keyframes slide-in {
	  from {
		transform: translateX(100%);
	  }
	  to {
		transform: translateX(0);
	  }
	}

	/*
	@keyframes slide-out {
	  from {
		transform: translateX(0);
	  }
	  to {
		transform: translateX(100%);
	  }
	}
	*/

	/* Define slide-out animation (adjust as needed) */
	@keyframes slide-out {
	  to {
		transform: translateX(100%);
	  }
	}

}