@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');

body {
    margin: 0;
    padding: 0;
}

.menu-toggle,
.mobile-voltar,
.mobile-menu,
.menu-overlay{

    display:none;
}

header {
    background-color: #152638;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    height: 96px;
    font-family: 'Montserrat', sans-serif;
    box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.1), 0px 2px 2px rgba(0, 0, 0, 0.1);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1000;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-logo-link {
    text-decoration: none !important;
    display: flex;
    gap: 14px;
    align-items: center;
}

.logo-letter {
    width: 33px;
    height: 33px;
    background-color: #ffffff;
    border-radius: 4.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #152637;
    font-weight: 700;
    font-size: 22.6px;
    line-height: 1;
}

.logo-letter.last {
    background-color: #53ceb9;
}

.header-title {
    color: #ffffff;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.2;
    margin: 0;
    white-space: pre-wrap;
    text-align: left;
}

.header-nav {
    display: flex;
    gap: 32px;
    height: 100%;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.375px;
    position: relative;
    padding: 0 8px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.nav-item:hover {
    color: #53ceb9 !important;
}

.nav-item.active {
    color: #53ceb9 !important;
}

.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 2px;
    right: 2px;
    height: 4px;
    background-color: #53ceb9;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.nav-item-dropdown {
    display: flex;
    align-items: center;
    gap: 4px;
}

.chevron-down {
    width: 14px;
    height: 14px;
    fill: currentColor;
    margin-top: -2px;
}

@media (max-width: 991px) {
    .custom-header {
        height: auto;
        flex-direction: column;
        padding: 16px 24px;
        gap: 16px;
    }
    .header-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        height: auto;
    }
    .header-title{

        display:none;
    }
    .nav-item {
        height: 40px;
    }
    .nav-item.active::after {
        border-radius: 6px;
    }
}

@media (max-width: 900px){

    .header-nav{

        display:none;
    }

    .header-title{

        display:none;
    }

    .menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:none;
    background:transparent;
    cursor:pointer;
    position: relative;
    z-index: 2000;
}

.menu-toggle span{
    position:absolute;
    width:28px;
    height:3px;
    background: #ffffff;
    border-radius:4px;
    object-fit:contain; 
    
}
 .menu-toggle span:first-child{

    transform:translateY(-7px);
}

.menu-toggle span:last-child{

    transform:translateY(7px);
}


    .mobile-menu{

        display:flex;

        flex-direction:column;

        position:fixed;

        top:0;

        right:-300px;

        width:280px;

        height:100vh;

        background:#152638;

        transition:right .3s;

        z-index:1002;

        padding-top:100px;
    }

    .mobile-menu.active{

        right:0;
    }

    .mobile-menu a{

        color:white;

        text-decoration:none;

        padding:20px 30px;

        border-bottom:1px solid rgba(255,255,255,.08);

        font-size:18px;
    }

    .mobile-menu a:hover{

        background:#1f3448;
    }

    .menu-overlay{

        display:block;

        position:fixed;

        inset:0;

        background:rgba(0,0,0,.45);

        opacity:0;

        visibility:hidden;

        transition:.3s;

        z-index:1001;
    }

    .menu-overlay.active{

        opacity:1;

        visibility:visible;
    }
    .mobile-voltar{
    display:flex;

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

    width:44px;
    height:44px;

    background:transparent;
    border:none;
    cursor:pointer;

    position:fixed;

    top:26px;
    right:24px;

    z-index:3001;

    opacity:0;
    visibility:hidden;

    transition:.3s;
}

.mobile-voltar.active{
    opacity:1;
    visibility:visible;
}

.mobile-voltar span{
    position:absolute;

    width:28px;
    height:3px;

    background:#fff;
    border-radius:4px;
}

.mobile-voltar span:first-child{
    transform:rotate(45deg);
}

.mobile-voltar span:last-child{
    transform:rotate(-45deg);
}
}