/* =========================================
        MSAA CONSULTING
        HEADER
========================================= */


.header{

    position: fixed;

    top: 0;
    right: 0;
    left: 0;

    width: 100%;

    z-index: 9999;

    background:
        rgba(255, 255, 255, 0.94);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    border-bottom:
        1px solid
        rgba(18, 61, 114, 0.07);

    box-shadow:
        0 8px 35px
        rgba(10, 34, 64, 0.07);
}



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


.header-container{

    min-height: 110px;

    display: grid;

    grid-template-columns:
        210px
        1fr
        190px;

    align-items: center;

    gap: 30px;

}



/* =========================================
        SIGNATURE
========================================= */


.brand{

    display: flex;

    align-items: center;

    justify-content: flex-start;

    width: 100%;

}



.signature-logo{

    width: 190px;

    max-width: 100%;

    height: 88px;

    object-fit: contain;

    object-position:
        center;

    display: block;

    transition:
        transform 0.3s ease;

}



.brand:hover .signature-logo{

    transform:
        scale(1.03);

}



/* =========================================
        NAVIGATION
========================================= */


.navbar{

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;

}



/* =========================================
        NAVIGATION ICON
========================================= */


.nav-item{

    position: relative;

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color:
        var(--primary-color);

    font-size: 23px;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;

}



/* Hover */

.nav-item:hover{

    color:
        #ffffff;

    background:
        var(--primary-color);

    transform:
        translateY(-4px);

    box-shadow:
        0 10px 25px
        rgba(18, 61, 114, 0.20);

}



/* Active page */

.nav-item.active{

    color:
        #ffffff;

    background:
        var(--primary-color);

    box-shadow:
        0 8px 22px
        rgba(18, 61, 114, 0.18);

}



/* =========================================
        ICON TOOLTIP
========================================= */


.nav-item::after{

    content:
        attr(data-title);

    position: absolute;

    top: calc(100% + 12px);

    left: 50%;

    transform:
        translateX(-50%)
        translateY(-5px);

    min-width:
        max-content;

    padding:
        7px 13px;

    border-radius:
        8px;

    background:
        var(--dark-blue);

    color:
        #ffffff;

    font-family:
        'Cairo',
        sans-serif;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1.4;

    white-space:
        nowrap;

    opacity: 0;

    visibility:
        hidden;

    pointer-events:
        none;

    box-shadow:
        0 8px 20px
        rgba(10, 34, 64, 0.16);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;

}



/* Tooltip Arrow */

.nav-item::before{

    content: "";

    position: absolute;

    top:
        calc(100% + 5px);

    left: 50%;

    transform:
        translateX(-50%);

    border-left:
        6px solid transparent;

    border-right:
        6px solid transparent;

    border-bottom:
        7px solid
        var(--dark-blue);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.25s ease;

}



/* Show Tooltip */

.nav-item:hover::after{

    opacity: 1;

    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);

}



.nav-item:hover::before{

    opacity: 1;

    visibility: visible;

}



/* =========================================
        CONSULTATION BUTTON
========================================= */


.header-btn{

    min-height: 55px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        0 25px;

    border-radius:
        50px;

    background:
        linear-gradient(
            135deg,
            var(--primary-color),
            var(--dark-blue)
        );

    color:
        #ffffff;

    font-size:
        15px;

    font-weight:
        700;

    white-space:
        nowrap;

    box-shadow:
        0 12px 28px
        rgba(18, 61, 114, 0.20);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}



.header-btn i{

    font-size:
        18px;

}



.header-btn:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 17px 35px
        rgba(18, 61, 114, 0.27);

}