/*-----------------------------------------------------------------------------------
    Mobile
-----------------------------------------------------------------------------------*/

@media (max-width: 1100px)
{
header{

    height: 100px;

    position: sticky;
    top:0px;

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

    padding:0 20px;

    background:var(--white);

    border-bottom:4px solid var(--accent);

}

.brand{
    display:flex;
    align-items:center;
    gap:5px;

}

.logo img{

    height:60px;

}

.company h1{

    color:var(--primary);
    font-size:2rem;
    letter-spacing:2px;

}

.company p{

    opacity: 100%;
    margin-left:3px;
    color:var(--primary);
    font-size:0.95rem;
    margin-bottom: 12px;
}

}

/*-----------------------------------------------------------------------------------
    Desktop
-----------------------------------------------------------------------------------*/
@media (min-width: 1100px)
{
header{

    height: 100px;

    position: sticky;
    top:0px;

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

    padding:0 40px;

    background:var(--white);

    border-bottom:4px solid var(--accent);
}

.brand{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo img{

    height:80px;

}

.company h1{

    color:var(--primary);
    font-size:2rem;
    letter-spacing:2px;

}

.company p{

    opacity: 100%;
    margin-left:3px;
    color:var(--primary);
    font-size:0.95rem;

}

}

.brand.animate {
    animation: brandBlendIn 1.5s ease;
}

.logo img.animate {
    animation: logoRotate 1.5s ease;
}