/* ==================================================
   TECHHUB SOLUTIONS
   HEADER CSS
================================================== */

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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
    background:#ffffff;
    color:#111111;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

img{
    display:block;
    max-width:100%;
}

/* ==========================
   ROOT
========================== */

:root{

    --primary:#002147;

    --secondary:#ffb400;

    --white:#ffffff;

    --black:#111111;

    --text:#666666;

    --transition:.3s ease;

}

/* ==========================
   CONTAINER
========================== */

.container{

    width:100%;

    max-width:1320px;

    margin:0 auto;

    padding:0 15px;

}

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

.top-header{

    background:var(--primary);

}

.top-header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:50px;

}

.top-header-left,
.top-header-right{

    display:flex;

    align-items:center;

    gap:20px;

}

.top-header a{

    color:var(--white);

    font-size:14px;

    transition:var(--transition);

}

.top-header a:hover{

    opacity:.8;

}

.top-header i{

    color:var(--secondary);

    margin-right:8px;

}

.phone-number{

    font-weight:600;

}

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

.main-header{

    background:var(--white);

    position:sticky;

    top:0;

    z-index:9999;

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

}

.main-header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:90px;

}

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

.logo-area a{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo-area img{

    width:60px;

    height:60px;

    object-fit:contain;

}

.logo-text h2{

    font-size:24px;

    font-weight:700;

    color:var(--primary);

    line-height:1.2;

}

.logo-text p{

    font-size:13px;

    color:var(--text);

}

/* ==========================
   APPLY BUTTON
========================== */

.apply-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:48px;

    padding:0 24px;

    background:var(--secondary);

    color:var(--primary);

    border-radius:8px;

    font-weight:700;

    transition:var(--transition);

}

.apply-btn:hover{

    transform:translateY(-3px);

}