#header{

height:var(--header-height);

display:flex;

justify-content:space-between;

align-items:center;

padding:0 35px;

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

background:#182234;

}

.headerLeft h2{

font-size:40px;

font-weight:800;

}

.headerRight{

display:flex;

align-items:center;

gap:25px;

}

.searchBox{

display:flex;

align-items:center;

gap:12px;

background:#24304A;

padding:12px 18px;

border-radius:14px;

min-width:320px;

}

.searchBox input{

background:transparent;

border:none;

outline:none;

color:white;

width:100%;

font-size:15px;

}

.userInfo{

display:flex;

align-items:center;

gap:18px;

}

.userInfo button{

background:var(--danger);

padding:10px 18px;

border-radius:10px;

color:white;

font-weight:700;

}

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

@media (max-width: 900px) {

    #header {
        height: auto;
        min-height: var(--header-height);
        padding: 16px 20px;
        gap: 18px;
        flex-wrap: wrap;
    }

    .headerLeft {
        min-width: 0;
    }

    .headerLeft h2 {
        font-size: 30px;
    }

    .headerRight {
        min-width: 0;
        flex-wrap: wrap;
        gap: 12px;
    }

    .searchBox {
        min-width: 220px;
        max-width: 100%;
    }

}

@media (max-width: 600px) {

    #header {
        padding: 14px;
        align-items: flex-start;
        flex-direction: column;
    }

    .headerLeft,
    .headerRight {
        width: 100%;
    }

    .headerLeft h2 {
        font-size: 24px;
    }

    .headerRight {
        align-items: stretch;
        flex-direction: column;
    }

    .searchBox {
        width: 100%;
        min-width: 0;
    }

    .userInfo {
        justify-content: space-between;
        width: 100%;
    }

}