body {
    margin: 0;
padding:0;
    font-family: 'Poppins', sans-serif;
    background: #efeffe;
}

/* HEADER */
.header {
       background: rgba(3,10,40,1);
padding:0.2rem 0.5rem;   
 position: fixed;
color: white;
   width:100%;
z-index:1000;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
   padding:15px;
    max-width: 1200px;
color: white;
   
}

nav{position:relative;}
.nav-links {list-style:none; display:flex; gap:15px; margin:10px; padding:10px; }
.nav-links li a {margin-left:10px; 
text-decoration: none; color: #fff; font-weight:500; 
transition:; color: 0.3s ease; }
.btn { padding:1px 2px; background: #ff9800; color: #fff; 
border-radius: 4px; }

.nav-links li a:hover{ color: #00bcde;}
.menu-toggle {position:relative; 
    z-index:1001;
     display:none; background:transparent;
     box-shadow:none;
border:none; font-size: 20px; color:white; 
cursor: pointer; }



footer { padding: 15px; text-align: center; background:rgba(3,10,20,1); color: #ccc; }



/* RESPONSIVE */
@media (max-width:768px) {
.container{width:80%;
}
   
.nav-links {display:none; flex-direction:column;
justify-content:flex-start;  
background:#ff9800;
position:fixed;
right:15px;
top:60px;
width:120px;
border-radius:10px;
margin:0;
padding:0px;
z-index:999;}

.nav-links.show{display: flex; right:0; margin:0;
padding:0;}
.menu-toggle{padding-top:10px; display:block; }
.nav-links  li {margin:5px; gap:0;}


.nav-links a {margin:0px; padding:0; gap:2px;}
}