* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
}

header {
background-color: #f8f8f8; /* Light background color */
padding: 15px;
width: 100%; /* Ensure it stretches across the entire width*/
z-index: 999;
}

.header-container {
  display: flex;
  justify-content: space-between;  /* Distribute space between logo and hamburger menu */
  align-items: center;  /* Vertically center items */
  padding: 10px 20px;  /* Adjust padding as necessary */
  height: 60px;  /* Adjust height of the header */
}

.logo-container {
display: flex; /* Keeps logo centered */
/*position: fixed;*/
z-index: 1000;
padding:10px;*/
top: 0;
left: 0;
width: 100%;
align-items: center;
}

.menu-container {
display: flex; /* Keeps logo centered */
z-index: 9999;
align-items:  center;
justify-content: flex-end;
}


.logo {
/*position: fixed;*/
z-index: 9999;
padding-left: 10px;
max-width: 100px; /* Limit the width of the logo */
height: 80px; /* Maintain aspect ratio */
}

.menu-icon {
z-index: 9999;
display: flex; /* Hide by default, shown only on mobile */
cursor: pointer;
/*padding-right: 30px;*/
width: 30px;
height: 25px;
position: absolute;
flex-direction: column;
justify-content: space-around;
}

.menu-icon .line{
background-color: #333;
height: 4px;
width: 100%;
}


.menu-icon:hover .line{
background-color: #ddd;
}

/* Navigation Menu Styling */
.menu {
display:none; /* Hide the menu by default */
position: absolute;
top: 120px; /* Adjust this value to position the menu below the header */
right: 20px;
background-color: #AFABAB;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 10px;
width: 250px;
border-radius: 8px;
}


/* Menu Items Styling */
.menu ul {
list-style-type: none;
padding: 0;
}

.menu ul li {
margin: 15px 0;
}

.menu ul li a {
cursor: pointer;
text-decoration: none;
position: relative;
z-index: 10;
color: white;
font-size: 15px;
font-family:sans-serif;
padding: 5px 10px;
display: block;
}

/* Show the menu when "show" class is added */
.menu.show {
display: block;
}

/* Responsive design: Show menu icon on mobile */
@media (max-width: 768px) {
.menu-icon {
 display: flex; /* Show the hamburger menu icon on smaller screens */
}

/* On larger screens, show the hamburger icon on the right side */
@media (min-width: 769px) {
 .menu-icon {
     display: flex; /* Ensure hamburger icon is shown on larger screens */
 }