@charset "utf-8";
/* CSS Document */


header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 5%;
background-color: transparent;
z-index: 1000;
transition: background-color 0.3s ease;
}

.logo {
height: 40px;
width: 300px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;

}

.menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
font-size: 16px;
}

.menu-toggle img {
width: 40px;
height: 40px;
}

.close-btn {
display: none;
background: none;
border: none;
cursor: pointer;
position: absolute;
top: 15px;
right: 15px;
z-index: 1001;
}

.close-btn img {
width: 40px;
height: 40px;
}

nav {
display: flex;
justify-content: flex-end;
}
/*nav-links*/
.nav-links {
list-style: none;
display: flex;
}

.nav-links li {
margin-left: 30px;
}

.nav-links a {
display: inline-block;
text-decoration: none;
color: var(--white);
text-shadow: 1px 1px 3px #000;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
}

.nav-links a:hover {
color: var(--light-gray);
transform: scale(1.2);
}
/*nav-links*/

/*nav-links2*/
.nav-links2 {
list-style: none;
display: flex;
}

.nav-links2 li {
margin-left: 30px;
}

.nav-links2 a {
text-decoration: none;
color: black;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
}

.nav-links2 a:hover {
color: var(--light-gray);
transform: scale(1.2);
}
/*nav-links2*/

@media screen and (max-width: 800px) {
.menu-toggle {
display: block;
}

.close-btn {
display: block;
}

nav {
position: fixed;
top: 0;
right: -100%;
width: 70%;
height: 100vh;
background-color: var(--black);
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
z-index: 1000;
display: block;
padding-top: 60px;

}

nav.active {
right: 0;
}

.nav-links {
flex-direction: column;
width: 100%;
padding: 0 20px;
}

.nav-links li {
margin: 15px 0;
text-align: left;
}

.nav-links a {
color: var(--white)
}

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
z-index: 999;
}

.overlay.active {
display: block;
}
}