/* ===========================
RESET
=========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Inter,Arial,sans-serif;
background:#f8fafc;
color:#111827;

}

.container{

width:95%;
max-width:1400px;
margin:auto;

}

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

.desktop-header{

background:#fff;

border-bottom:1px solid #e5e7eb;

box-shadow:0 10px 30px rgba(0,0,0,.05);

position:relative;

z-index:1000;

}

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

.desktop-top{

padding:20px 0;

}

.desktop-top-inner{

display:flex;

align-items:center;

gap:35px;

}

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

.logo{

display:flex;

align-items:center;

gap:18px;

text-decoration:none;

}

.logo img{

width:60px;
height:60px;

}

.logo-text h1{

font-size:38px;

font-weight:900;

color:#111827;

line-height:1;

}

.logo-text p{

margin-top:6px;

font-size:14px;

color:#64748b;

}

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

.search-form{

flex:1;

}

.search-box{

display:flex;

align-items:center;

height:60px;

background:#fff;

border:2px solid #dbeafe;

border-radius:18px;

overflow:hidden;

}

.search-box i{

width:60px;

text-align:center;

font-size:22px;

color:#2563eb;

}

.search-box input{

flex:1;

border:none;

outline:none;

font-size:16px;

}

.search-box button{

width:150px;

height:100%;

border:none;

background:#2563eb;

color:#fff;

font-weight:700;

cursor:pointer;

}
/* ===========================
ICONS
=========================== */

.header-actions{

display:flex;

gap:14px;

}

.action-btn{

position:relative;

width:58px;

height:58px;

border-radius:16px;

background:#f8fafc;

display:flex;

justify-content:center;

align-items:center;

text-decoration:none;

color:#334155;

transition:.25s;

}

.action-btn:hover{

background:#2563eb;

color:#fff;

}

.action-btn i{

font-size:24px;

}

.badge{

position:absolute;

top:-6px;

right:-6px;

background:#ef4444;

color:#fff;

border-radius:20px;

padding:3px 8px;

font-size:12px;

font-weight:700;

}

/* ===========================
MENU
=========================== */

.desktop-nav{

background:#fff;

border-top:1px solid #eef2f7;

transition:transform .35s ease;

}

.desktop-nav.hide{

transform:translateY(-100%);

}

.desktop-menu{

display:flex;

justify-content:center;

align-items:center;

gap:14px;

padding:18px 0;

}

.desktop-menu a{

display:flex;

align-items:center;

gap:10px;

padding:14px 24px;

border-radius:14px;

text-decoration:none;

font-size:16px;

font-weight:700;

color:#334155;

transition:.25s;

}

.desktop-menu a i{

color:#2563eb;

font-size:18px;

}

.desktop-menu a:hover,

.desktop-menu a.active{

background:#2563eb;

color:#fff;

}

.desktop-menu a:hover i,

.desktop-menu a.active i{

color:#fff;

}

/* ===========================
DESKTOP ONLY
=========================== */

@media(max-width:991px){

.desktop-header{

display:none;

}

}