/* ==========================
        NAVIGATION BAR
========================== */

.navbar{
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;
    padding: 15px 0;

    background: linear-gradient(
        to bottom,
        #f7e4be 0%,
        #d8c49b 55%,
        #bbaa91 100%
    );

    border-bottom: 4px solid #7d4d22;
    box-shadow: 0 8px 25px rgba(0,0,0,.18);
}

.navbar .container{
    max-width: 1200px;
    margin: auto;
    padding: 0 40px;

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

/* Logo */

.logo{
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-img{
    width: 58px;
    height: 58px;
    object-fit: contain;
    transition: .35s;
}

.logo:hover .logo-img{
    transform: rotate(-6deg) scale(1.08);
}

.logo-text{
    font-family: Georgia, serif;
    font-size: 1.7rem;
    font-weight: bold;
    color: #4b2d18;
    letter-spacing: 1px;
}

/* Navigation */

.nav-links{
    display: flex;
    align-items: center;
    gap: 18px;
    list-style: none;
}

.nav-links li{
    list-style: none;
}

.nav-links a{
    position: relative;

    text-decoration: none;
    color: #4b2d18;
    font-size: 1rem;
    font-weight: 600;

    padding: 10px 18px;
    border-radius: 40px;

    transition: .35s;
}

/* Hover */

.nav-links a:hover{
    background: rgba(125,77,34,.12);
    color: #7d4d22;
}

/* Active */



/* Elegant underline */

.nav-links a::after{
    content: "";
    position: absolute;
    bottom: 5px;
    left: 50%;

    width: 0;
    height: 2px;

    background: #7d4d22;
    transition: .35s;
    transform: translateX(-50%);
}

.nav-links a:hover::after{
    width: 60%;
}

.nav-links a.active::after{
    display: none;
}

/* Responsive */

@media(max-width:768px){

    .navbar .container{
        flex-direction: column;
        gap: 15px;
    }

    .nav-links{
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .logo-text{
        font-size: 1.4rem;
    }
}



.navbar a{
    font-family:"Cormorant Garamond", serif;
    font-size:1.35rem;
    font-weight:600;
    letter-spacing:1.2px;
    text-transform:uppercase;
}
.navbar a{
    font-weight: bold;
}