/*==========================
HEADER
===========================*/

.site-header{

    background:var(--primary);

    position:sticky;

    top:0;

    z-index:9999;

    box-shadow:var(--shadow);

}

.header-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    height:85px;

}

.site-logo{

    flex:0 0 170px;

}

.site-logo img{

    width:170px;

    height:auto;

    display:block;

}

/*==========================
Navigation
===========================*/

.main-navigation{

    flex:1;

}

.main-menu{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:28px;

}

.main-menu li{

    position:relative;

    list-style:none;

}

.main-menu li a{

    color:#fff;

    font-size:16px;

    font-weight:600;

    padding:30px 0;

    display:block;

    transition:.3s;

}

.main-menu li a:hover{

    color:var(--secondary);

}

/*==========================
Dropdown
===========================*/

.main-menu ul{

    position:absolute;

    top:100%;

    left:0;

    width:240px;

    background:#fff;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    box-shadow:var(--shadow);

}

.main-menu li:hover>ul{

    opacity:1;

    visibility:visible;

}

.main-menu ul li{

    width:100%;

}

.main-menu ul li a{

    color:#333;

    padding:12px 18px;

}

.main-menu ul li a:hover{

    background:#f6f6f6;

    color:var(--primary);

}

/*==========================
Buttons
===========================*/

.header-buttons{

    display:flex;

    gap:12px;

    flex-shrink:0;

}

.btn-login,
.btn-register,
.btn-whatsapp{

    padding:11px 18px;

    border-radius:6px;

    font-weight:600;

}

.btn-login{

    color:#fff;

    border:2px solid #fff;

}

.btn-register{

    background:#FFD54A;

    color:#111;

}

.btn-whatsapp{

    background:#25D366;

    color:#fff;

}