/*
==================================================
Rumos Answer

Filename : header.css
File Path: /wp-content/themes/rumos-answer/assets/css/header.css

Build    : 004-025
Author   : Rumos
==================================================
*/

/* ==========================================
   Header
========================================== */

.ra-header{

    position:sticky;

    top:0;

    width:100%;

    height:68px;

    background:#ffffff;

    border-bottom:1px solid #F3F4F6;

    z-index:1000;

}

.ra-header .ra-container{

    max-width:1440px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:100%;

    padding:0 40px;

}

/* ==========================================
   Brand Logo
========================================== */

.ra-logo{

    margin:0;

}

.ra-logo a{

    display:inline-flex;

    align-items:center;

    text-decoration:none;

    font-size:2rem;

    line-height:1;

}

.ra-logo-rumos{

    color:#111827;

    font-weight:700;

}

.ra-logo-answer{

    margin-left:6px;

    color:#5B5CF0;

    font-weight:800;

    letter-spacing:-0.5px;

}

/* ==========================================
   Navigation
========================================== */

.ra-nav{

    margin-left:auto;

}

.ra-nav ul{

    display:flex;

    align-items:center;

    gap:36px;

    margin:0;

    padding:0;

    list-style:none;

}

.ra-nav a{

    position:relative;

    color:#6B7280;

    font-size:15px;

    font-weight:500;

    text-decoration:none;

    transition:color .25s ease;

}

.ra-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#5B5CF0;

    transition:width .25s ease;

}

.ra-nav a:hover{

    color:#111827;

}

.ra-nav a:hover::after{

    width:100%;

}

/* ==========================================
   Mobile
========================================== */

@media (max-width:768px){

    .ra-header{

        height:64px;

    }

    .ra-header .ra-container{

        padding:0 20px;

    }

    .ra-logo a{

        font-size:1.6rem;

    }

    .ra-nav ul{

        gap:20px;

    }

    .ra-nav a{

        font-size:14px;

    }

}