.navbar{

width:100%;
padding:20px 0;

position:fixed;

top:0;

z-index:10;

background:rgba(20,20,22,.6);
backdrop-filter:blur(10px);

}

.nav-container{

width:90%;
max-width:1200px;

margin:auto;

display:flex;
align-items:center;
justify-content:space-between;

}

.logo img{
height:110px;
width: 250px;
}

.nav-links{

display:flex;
gap:30px;

}

.nav-links a{

text-decoration:none;
color:var(--text-secondary);

font-size:15px;

transition:.3s;

}

.nav-links a:hover{

color:white;

}

.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1001;
}

.hamburger {
    display: block;
    position: relative;
    width: 25px;
    height: 2px;
    background-color: black;
    transition: transform 0.3s ease;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: black;
    transition: top 0.3s ease, bottom 0.3s ease, transform 0.3s ease;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    bottom: -8px;
}


@media (max-width: 992px) {
    .nav-toggle {
        display: block;
    }

    .header-right {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100%;
        background-color: #D6D3A3;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
        transition: right 0.4s ease-in-out;
        padding-top: 60px;
    }

    .header-right.active {
        right: 0;
    }

    .nav {
        flex-direction: column;
        gap: 25px;
        align-items: center;
    }

    .nav-divider {
        display: none;
    }

    .tagline {
        color: black;
        text-align: center;
        font-size: 16px;
        padding: 0 20px;
    }

    .nav-toggle.active .hamburger {
        transform: rotate(45deg);
    }

    .nav-toggle.active .hamburger::before {
        top: 0;
        transform: rotate(90deg);
    }

    .nav-toggle.active .hamburger::after {
        bottom: 0;
        transform: rotate(90deg);
    }
}

@media (max-width: 768px) {
    .logo img {
        height: 90px;
        width: 200px;
    }
}