/* ==========================================================
   INFOWORLD V2
   HEADER.CSS
========================================================== */

/* =====================================
   TOPBAR
===================================== */

.topbar{

    background:#0f172a;

    color:#fff;

    height:40px;

    display:flex;

    align-items:center;

    font-size:.85rem;

}

.topbar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.topbar-left,
.topbar-right{

    display:flex;

    align-items:center;

    gap:20px;

}

.topbar a{

    color:#fff;

    opacity:.85;

}

.topbar a:hover{

    opacity:1;

}

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

.site-header{

    position:sticky;

    top:0;

    z-index:999;

    background:#fff;

    box-shadow:0 2px 15px rgba(0,0,0,.05);

}

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

.header-top{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

/* =====================================
   LOGO
===================================== */

.logo{

    font-size:2rem;

    font-weight:800;

    color:var(--primary);

    white-space:nowrap;

}

.logo a{

    color:inherit;

}

.logo span{

    color:#111827;

}

/* =====================================
   SEARCH
===================================== */

.search-box{

    flex:1;

    max-width:500px;

    display:flex;

    align-items:center;

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

    border-radius:999px;

    overflow:hidden;

    background:#f8fafc;

}

.search-box input{

    flex:1;

    padding:14px 18px;

    border:none;

    background:transparent;

}

.search-box input::placeholder{

    color:#94a3b8;

}

.search-box button{

    background:var(--primary);

    color:#fff;

    padding:14px 24px;

    transition:.3s;

}

.search-box button:hover{

    background:var(--primary-dark);

}

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

.main-nav{

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

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

    background:#fff;

}

.main-nav ul{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:35px;

}

.main-nav li{

    position:relative;

}

.main-nav a{

    display:block;

    padding:18px 0;

    font-size:.95rem;

    font-weight:600;

    color:var(--text);

}

.main-nav a:hover{

    color:var(--primary);

}

.main-nav a.active{

    color:var(--primary);

}

/* underline */

.main-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:10px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

.main-nav a:hover::after{

    width:100%;

}

.main-nav a.active::after{

    width:100%;

}

/* =====================================
   DROPDOWN
===================================== */

.dropdown{

    position:absolute;

    top:100%;

    left:0;

    min-width:220px;

    background:#fff;

    border-radius:12px;

    box-shadow:var(--shadow);

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.3s;

}

.main-nav li:hover .dropdown{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown a{

    padding:14px 20px;

}

.dropdown a:hover{

    background:#f8fafc;

}


/* =====================================
   STICKY
===================================== */

.site-header.sticky{

    animation:headerDown .4s;

}

@keyframes headerDown{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:none;

    }

}

/* =====================================
   MOBILE BUTTON
===================================== */

.menu-toggle{

    display:none;

    width:45px;

    height:45px;

    justify-content:center;

    align-items:center;

    cursor:pointer;

}

.menu-toggle span{

display:block;

width:24px;

height:3px;

border-radius:5px;

background:#111827;

position:relative;

transition:.3s;

}

.menu-toggle span::before,
.menu-toggle span::after{

    content:"";

    position:absolute;

    left:0;

    width:24px;

    height:3px;

    background:#111827;

    border-radius:5px;

    transition:.3s;
}

.menu-toggle span::before{

    top:-8px;

}

.menu-toggle span::after{

    top:8px;

}

/* =====================================
   RESPONSIVE
===================================== */

@media(max-width:992px){

.header-top{

flex-wrap:wrap;

height:auto;

padding:20px 0;

}

.search-box{

max-width:none;

max-width:100%;

}

.main-nav ul{

gap:20px;

overflow:auto;

justify-content:flex-start;

padding-bottom:5px;

}

}

@media(max-width:768px){

.topbar{

display:none;

}

.header-top{

gap:20px;

}

.logo{

font-size:1.6rem;

}

.search-box{

order:3;

width:100%;

}

.menu-toggle{

display:flex;

}

.main-nav{

display:none;

}

}
/* ==========================================
BREAKING NEWS
========================================== */

.breaking{

background:#dc2626;

color:#fff;

overflow:hidden;

}

.breaking .container{

display:flex;

align-items:center;

}

.breaking-label{

padding:14px 22px;

background:#991b1b;

font-weight:700;

white-space:nowrap;

flex-shrink:0;

}

.breaking-text{

flex:1;

overflow:hidden;

position:relative;

}

.breaking-track{

display:flex;

align-items:center;

width:max-content;

animation:ticker 35s linear infinite;

}

.breaking-track:hover{

animation-play-state:paused;

}

.breaking-track span{

padding:0 40px;

white-space:nowrap;

font-size:.95rem;

}

.breaking-track span::before{

content:"●";

margin-right:15px;

color:#facc15;

}

@keyframes ticker{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}
/* ==========================================
MOBILE MENU
========================================== */

@media (max-width:768px){

.main-nav{

display:none;

position:absolute;

left:0;

right:0;

top:100%;

width:100%;

background:#fff;

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

z-index:999;

}

.main-nav.open{

display:block;

animation:menuFade .3s ease;

}

.main-nav ul{

display:flex;

flex-direction:column;

gap:0;

}

.main-nav li{

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

}

.main-nav a{

display:block;

padding:16px 20px;

}

}

@keyframes menuFade{

from{

opacity:0;

transform:translateY(-10px);

}

to{

opacity:1;

transform:none;

}

}
/* ==========================================
MENU ACTIVE
========================================== */

.menu-toggle.active span{

background:transparent;

}

.menu-toggle.active span::before{

top:0;

transform:rotate(45deg);

}

.menu-toggle.active span::after{

top:0;

transform:rotate(-45deg);

}
/* ==========================================
DARK BUTTON
========================================== */

.dark-toggle{

width:46px;

height:46px;

border:none;

border-radius:50%;

background:#f3f4f6;

cursor:pointer;

font-size:20px;

display:flex;

justify-content:center;

align-items:center;

transition:.3s;

margin-left:20px;

}

.dark-toggle:hover{

background:var(--primary);

color:#fff;

transform:rotate(180deg);

}
.logo img {
    width: 180px;
    height: auto;
    display: block;
}
@media(max-width:768px){

.logo img{
    width:140px;
}

}