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

/*==============================
Top Bar
==============================*/

.top-bar{
    background: var(--primary);
    color: var(--white);
    padding: 12px 0;
    font-size: 15px;
}

.top-container{
    width: min(1200px,92%);
    margin: auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.top-info,
.top-social{
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-info a,
.top-social a{
    color: var(--white);
    transition: .3s;
}

.top-info a:hover,
.top-social a:hover{
    color: var(--secondary);
}

.top-info i,
.top-social i{
    margin-left: 8px;
}

/*==============================
Main Header
==============================*/

#main-header{
    position: sticky;
    top: 0;
    z-index: 999;

    background: transparent;

    padding: 15px 0;

    transition: .4s;
}

#main-header.scrolled{
    padding:8px 0;
    backdrop-filter:blur(15px);
    background: rgba(255,255,255,.95);

    backdrop-filter: blur(12px);

    box-shadow: 0 10px 25px rgba(0,0,0,.08);

}
/*==============================
Header Container
==============================*/

.header-container{

    width:min(1200px,92%);

    margin:auto;

    height:82px;

    background:#fff;

    border-radius:60px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 28px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

/*==============================
Logo
==============================*/

.logo-section{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo-circle{

    width:60px;

    height:60px;

    border-radius:50%;

    overflow:hidden;

    flex-shrink:0;

    background:#fff;

}

.logo-circle img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.logo-text h2{

    color:var(--primary);

    font-size:24px;

    font-weight:900;

    line-height:1.2;

}

.logo-text span{

    color:var(--secondary);

    font-size:14px;

    font-weight:700;

}

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

.nav-links{

    display:flex;

    align-items:center;

    gap:35px;

}

.nav-links li{

    position:relative;

}

.nav-links a{

    color:var(--dark);

    font-size:17px;

    font-weight:700;

    transition:.3s;

}

.nav-links a::after{

    content:"";

    position:absolute;

    right:0;

    bottom:-8px;

    width:0;

    height:3px;

    background:var(--secondary);

    border-radius:10px;

    transition:.35s;

}

.nav-links a:hover,

.nav-links a.active{

    color:var(--primary);

}

.nav-links a:hover::after,

.nav-links a.active::after{

    width:100%;

}

/*==============================
Header Tools
==============================*/

.header-tools{

    display:flex;

    align-items:center;

    gap:12px;

}

.tool-link,
.mode-btn,
.mobile-menu-btn{

    width:44px;

    height:44px;

    border:none;

    border-radius:50%;

    background:#f5f6fa;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.35s;

}

.tool-link:hover,
.mode-btn:hover,
.mobile-menu-btn:hover{

    background:var(--secondary);

    color:#fff;

    transform:translateY(-3px);

}

.mobile-menu-btn{

    display:none;

}
/*==================================================
            HEADER RESPONSIVE
==================================================*/

@media (max-width:992px){

.header-container{

height:75px;

padding:0 20px;

}

.logo-text{

display:none;

}

.mobile-menu-btn{

display:flex;

}

.nav-links{

position:fixed;

top:0;

right:-100%;

width:300px;

height:100vh;

background:#fff;

flex-direction:column;

justify-content:flex-start;

align-items:center;

padding-top:120px;

gap:28px;

box-shadow:-10px 0 35px rgba(0,0,0,.12);

transition:.4s;

z-index:999;

}

.nav-links.active{

right:0;

}

.nav-links li{

width:100%;

text-align:center;

}

.nav-links a{

display:block;

padding:12px;

font-size:18px;

}

}

@media (max-width:768px){

.top-container{

flex-direction:column;

gap:10px;

text-align:center;

}

.top-info{

flex-direction:column;

gap:10px;

}

.header-container{

width:95%;

}

.logo-circle{

width:52px;

height:52px;

}

}

@media (max-width:480px){

.top-bar{

display:none;

}

.header-container{

height:70px;

padding:0 15px;

}

.tool-link,

.mode-btn,

.mobile-menu-btn{

width:40px;

height:40px;

font-size:16px;

}

}