/* Header */

.header{
    background:#000;
    width:100%;
}

.header .container{
    display:flex;
    align-items:center;
    padding:20px 0;
    gap:40px;
}

.logo,
.navbar,
.header-actions{
    flex-shrink:0;
}

.logo h1,
.nav-links a,
.appointment-btn,
.phone-btn{
    white-space:nowrap;
}

/* Logo */

.logo h1{
    color:#d4af37;
    font-size:24px;
}

.logo span{
    display:block;
    color:#fff;
    font-size:12px;
    margin-top:4px;
}

/* Navigation */

.nav-links{
    display:flex;
    list-style:none;
    gap:25px;
    margin-left:120px;
}

.nav-links a{
    color:#fff;
    text-decoration:none;
    font-weight:500;
    transition:color .3s;
}

.nav-links a:focus,
.nav-links a:active{
    outline:none;
}

.nav-links a:hover{
    color:#d4af37;
}

.navbar{
    margin-left:auto;
}

/* Header Buttons */

.header-actions{
    display:flex;
    gap:10px;
}

.appointment-btn{
    background:#d4af37;
    color:#000;
    text-decoration:none;
    padding:15px 30px;
    border-radius:40px;
    font-weight:550;
    transition:.3s;
}

.appointment-btn:hover{
    background:#f1b706;
    opacity:.85;
}

.phone-btn{
    border:1px solid #d4af37;
    color:#d4af37;
    text-decoration:none;
    padding:14px 22px;
    border-radius:40px;
    font-weight:600;
    transition:.3s;
}

.phone-btn:hover{
    background:#d4af37;
    color:#000;
}

/* Mobile Menu */

.menu-toggle{
    color:#fff;
    font-size:40px;
    cursor:pointer;
    display:none;
}

.logo img{
    height:82px;
    width:auto;
    display:block;
}

/* Mobile */

@media (max-width:767px){

    .header .container{
        padding:15px 20px;
        justify-content:space-between;
        gap:15px;
        position:relative;
    }

    .logo img{
        height:70px;
        margin-left: -20px;
    }

    .navbar{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#000;
        padding:10px 0;
        z-index:999;
        margin-left:0;
        border-top:1px solid rgba(255,255,255,.1);
    }

    .navbar.active{
        display:block;
    }

    .nav-links{
        display:flex;
        flex-direction:column;
        gap:0;
        margin-left:0;
    }

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

    .nav-links a{
        display:block;
        text-align:center;
        padding:15px 20px;
    }

    .header-actions{
        display:none;
    }

    .menu-toggle{
        display:block;
        line-height:1;
        margin-right: -20px;
    }

}