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

.header{

position:fixed;
top:0;
left:0;
width:100%;

z-index:9999;

background:rgba(255,255,255,.88);

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(0,0,0,.06);

transition:.35s ease;

}

.header.sticky{

background:rgba(255,255,255,.96);

box-shadow:0 15px 40px rgba(15,23,42,.08);

}

.header .container{

height:82px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

display:flex;

align-items:center;

gap:14px;

flex-shrink:0;

}

.logo img{

width:54px;

height:54px;

object-fit:contain;

}

.logo h2{

font-size:25px;

font-weight:700;

color:#0F172A;

line-height:1.1;

}

.logo span{

display:block;

font-size:12px;

color:#64748B;

margin-top:2px;

}

.navbar{

margin-left:auto;

}

.navbar>ul{

display:flex;

align-items:center;

gap:32px;

}

.navbar>ul>li{

position:relative;

}

.navbar a{

display:flex;

align-items:center;

gap:8px;

font-weight:500;

font-size:15px;

color:#0F172A;

transition:.3s;

}

.navbar a:hover{

color:#2563EB;

}

.header-action{

display:flex;

align-items:center;

gap:18px;

margin-left:35px;

}

.mobile-toggle{

display:none;

width:46px;

height:46px;

border-radius:12px;

background:#EFF6FF;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

cursor:pointer;

transition:.3s;

}

.mobile-toggle:hover{

background:#DBEAFE;

}

.mega-menu{

position:absolute;

top:70px;

left:0;

width:280px;

background:#fff;

border-radius:18px;

padding:18px;

box-shadow:

0 25px 60px rgba(15,23,42,.12);

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:.3s;

}

.dropdown:hover .mega-menu{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.mega-menu li{

margin:8px 0;

}

.mega-menu a{

padding:12px 15px;

border-radius:10px;

display:flex;

transition:.25s;

}

.mega-menu a:hover{

background:#EFF6FF;

}

.dropdown>a i{

font-size:12px;

transition:.3s;

}

.dropdown:hover>a i{

transform:rotate(180deg);

}

.header-search{

display:none;

align-items:center;

gap:10px;

background:#F8FAFC;

padding:10px 18px;

border-radius:999px;

}

.header-search input{

border:none;

background:none;

outline:none;

width:220px;

}

.hero{

margin-top:82px;

}