/*==========================================================
  SECTION 3 : TOP HEADER
==========================================================*/
.opbar{
    position:sticky;
    top:40px; /* height of announcement bar */
    z-index:1031;
}
.topbar{

    /*position:relative;
    z-index:999;*/

    background:#ffffff;

    border-bottom:1px solid var(--border);

    min-height:50px;

    /*display:flex;*/

    align-items:center;
    transition:all .35s ease;

}

.topbar .container{

    width:100%;

}

.topbar .row{

    min-height:50px;

}

/*----------------------------------
Left Menu
----------------------------------*/

.topbar-left{

    display:flex;

    align-items:center;

    gap:25px;

    flex-wrap:wrap;

}

.topbar-left li{

    display:flex;

    align-items:center;

}

.topbar-left a{

    color:var(--text);

    font-size:14px;

    font-weight:500;

    transition:.3s;

}

.topbar-left a:hover{

    color:var(--primary);

}

.topbar-left i{

    color:var(--primary);

    margin-right:8px;

    font-size:15px;

}

/*----------------------------------
City Selector
----------------------------------*/

.city-select{

    border:none;

    background:transparent;

    color:var(--heading);

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    padding-right:20px;

    appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23666'%3E%3Cpath d='M2 5l5 5 5-5'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right center;

}

.city-select:focus{

    outline:none;

}

.topbar-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:20px;
}

.topbar-social-wrap{
    display:flex;
    align-items:center;
    gap:12px;
}

.topbar-follow{
    font-size:13px;
    font-weight:600;
    color:#666;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.topbar-social{
    display:flex;
    align-items:center;
    gap:8px;
}

.topbar-social a{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f7f7f7;
    color:#555;
    text-decoration:none;
    transition:.35s ease;
}

.topbar-social a:hover{
    background:var(--primary);
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(255,45,117,.25);
}

.topbar-whatsapp{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:190px;
    height:46px;
    padding:0 24px;
    border-radius:50px;
    background:linear-gradient(135deg,#25D366,#18b655);
    color:#fff;
    font-weight:600;
    text-decoration:none;
    transition:.35s ease;
}

.topbar-whatsapp:hover{
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(37,211,102,.35);
}

@media (max-width:991px){

    .topbar-right{
        justify-content:center;
        flex-wrap:wrap;
        gap:15px;
    }

    .topbar-follow{
        display:none;
    }
}

@media (max-width:576px){

    .topbar-social{
        display:none;
    }

    .topbar-whatsapp{
        width:100%;
        max-width:260px;
    }
}
/*----------------------------------
Login Register
----------------------------------*/

.topbar-right .login-link{

    padding:8px 18px;

    border-radius:30px;

    border:1px solid var(--border);

    transition:.3s;

}

.topbar-right .login-link:hover{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}

/*----------------------------------
Divider
----------------------------------*/

.topbar-divider{

    width:1px;

    height:18px;

    background:#ddd;

}

/*----------------------------------
Hover
----------------------------------*/

.bhs-topbar:hover{

    box-shadow:0 6px 18px rgba(0,0,0,.05);

}

/*----------------------------------
Tablet
----------------------------------*/

@media(max-width:991px){

.topbar-left{

gap:12px;

}

.topbar-right{

justify-content:center;

margin-top:8px;

gap:12px;

}

}

/*----------------------------------
Mobile
----------------------------------*/

@media(max-width:767px){

.bhs-topbar{

display:none;

}

}

/*----------------------------------
Small Mobile
----------------------------------*/

@media(max-width:575px){

.city-select{

font-size:13px;

}

.topbar-left a,

.topbar-right a{

font-size:13px;

}

}