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

.header-main{
    background:#ffffff;
    border-bottom:1px solid #e5e7eb;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
    position:relative;
    z-index:100;
}

.header-main .container{
    max-width:1280px;
    margin:0 auto;

    padding:14px 20px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;
}

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

.menu-toggle{
    width:44px;
    height:44px;

    border:none;
    background:transparent;

    cursor:pointer;

    font-size:24px;
    color:#111827;

    border-radius:8px;

    transition:.3s;
}

.menu-toggle:hover{
    background:#f3f4f6;
}

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

.logo{
    flex:1;

    display:flex;
    align-items:center;
    justify-content:center;
}

.logo a{
    display:flex;
    align-items:center;
}

.logo img{
    height:72px;
    width:auto;
    display:block;
}

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

.header-tools{
    display:flex;
    align-items:center;
    gap:12px;

    flex-shrink:0;
}

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

.search-toggle{
    width:42px;
    height:42px;

    border:1px solid #d1d5db;
    border-radius:8px;

    background:#ffffff;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:18px;

    transition:.3s;
}

.search-toggle:hover{
    background:#f3f4f6;
}

/* ==========================================
   AI BUTTON
========================================== */

.ai-btn{
    text-decoration:none;

    background:#0b2d5c;
    color:#ffffff;

    font-size:14px;
    font-weight:700;

    padding:10px 16px;

    border-radius:6px;

    transition:.3s;
}

.ai-btn:hover{
    background:#09244a;
}

/* ==========================================
   LOGIN BUTTON
========================================== */

.login-btn{
    text-decoration:none;

    color:#374151;

    font-size:14px;
    font-weight:600;

    padding:10px 18px;

    border:1px solid #d1d5db;
    border-radius:6px;

    transition:.3s;
}

.login-btn:hover{
    background:#f3f4f6;
}

/* ==========================================
   SUBSCRIBE BUTTON
========================================== */

.subscribe-btn{
    text-decoration:none;

    background:#c62828;
    color:#ffffff;

    font-size:14px;
    font-weight:700;

    padding:10px 20px;

    border-radius:6px;

    transition:.3s;
}

.subscribe-btn:hover{
    background:#a91f1f;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width:992px){

    .logo img{
        height:60px;
    }

    .ai-btn{
        display:none;
    }
}

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

@media (max-width:768px){

    .header-main .container{
        padding:12px 15px;
        gap:10px;
    }

    .logo{
        justify-content:flex-start;
    }

    .logo img{
        height:48px;
    }

    .login-btn{
        display:none;
    }

    .ai-btn{
        display:none;
    }

    .subscribe-btn{
        padding:8px 14px;
        font-size:13px;
    }

    .search-toggle{
        width:38px;
        height:38px;
    }
}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width:480px){

    .subscribe-btn{
        display:none;
    }

    .logo img{
        height:42px;
    }
}