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

#header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:99999;

    transition:.35s ease;

    padding:22px 0;

}


/* =======================================================
QUANDO ROLAR A PÁGINA
======================================================= */

#header.scroll{

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(18px);

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

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    padding:14px 0;

}


/* =======================================================
NAVBAR
======================================================= */

.navbar-spaox{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


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

.logo{

    position:relative;

    display:block;

    width:400px;      /* ajuste conforme sua logo */

    height:100px;     /* altura da maior logo */

}

/* As duas logos */

.logo img{

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    transition:.35s ease;

    height: 90px;

}

/* Logo do topo */

.logo-top{

    height:90px;

    opacity:1;

    visibility:visible;

     width:340px; 

}

/* Logo do scroll */

.logo-scroll{

    height:70px;

    opacity:0;

    visibility:hidden;

}

/* ==========================================
SCROLL
========================================== */

#header.scroll .logo-top{

    opacity:0;

    visibility:hidden;

}

#header.scroll .logo-scroll{

    opacity:1;

    visibility:visible;

}

/* =======================================================
MENU
======================================================= */

.menu{

    display:flex;

    align-items:center;

    gap:42px;

    margin:0;

    padding:0;

    list-style:none;

}


/* =======================================================
LINKS
======================================================= */

.menu > li > a{

    position:relative;

    color:#FFF;

    font-size:16px;

    font-weight:500;

    text-decoration:none;

    transition:.3s;

}


#header.scroll .menu a{

    color:#1d2f58;

}


/* =======================================================
EFEITO HOVER
======================================================= */

.menu > li > a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-12px;

    width:0;

    height:3px;

    background:#fe904c;

    border-radius:10px;

    transition:.35s;

}

.menu > li > a:hover::after{

    width:100%;

}


/* =======================================================
LINK ATIVO
======================================================= */

.menu .active::after{

    width:100%;

}


/* =======================================================
ÍCONE
======================================================= */

.menu i{

    font-size:12px;

    margin-left:6px;

}


/* =======================================================
BOTÃO
======================================================= */

.btn-menu{

    display:flex;

    align-items:center;

    gap:12px;

    background:#fe904c;

    color:#ffffff;

    padding:15px 26px;

    border-radius:14px;

    font-weight:600;

    transition:.30s;

    box-shadow:0 10px 30px rgba(254,144,76,.25);

}


.btn-menu:hover{

    transform:translateY(-3px);

    background:#ff7d28;

    color:#ffffff;

    box-shadow:0 15px 40px rgba(254,144,76,.40);

}


/* =======================================================
ÍCONE BOTÃO
======================================================= */

.btn-menu i{

    font-size:18px;

}


/* =======================================================
ANIMAÇÃO LINKS
======================================================= */

.menu > li > a:hover{

    color:#fe904c;

}

#header.scroll .menu a:hover{

    color:#fe904c;

}


/* ===================================
DROPDOWN
=================================== */
.dropdown-menu{

    list-style:none;

    margin:0;

    padding:12px 0;

}

.dropdown{

    position:relative;

}

.dropdown-menu{

    display:block;

}

.dropdown > a{

    display:flex;

    align-items:center;

    gap:8px;

}

.dropdown > a i{

    font-size:11px;

    transition:.3s;

}

.dropdown:hover > a i{

    transform:rotate(180deg);

}

/*===========================*/
.dropdown{
    position: relative;

}
.dropdown-menu{

    position:absolute;

    top:100%;

margin-top:18px;

    left:0;

    min-width:290px;

    padding:15px 0;

    background:#FFF;

    border-radius:18px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.12);

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.35s;

    z-index:99999;

}

.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/*===========================*/

.dropdown-menu li{

    list-style:none;

}

.dropdown-menu a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 24px;

    color:#1D2F58;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    transition:.3s;

    position:relative;

}

.dropdown-menu a i{

    color:#FE904C;

    width:22px;

    text-align:center;

    font-size:17px;

}

.dropdown-menu a::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:4px;

    height:0;

    background:#FE904C;

    border-radius:0 4px 4px 0;

    transition:.3s;

}

.dropdown-menu a:hover{

    background:#F7F9FC;

    padding-left:32px;

    color:#102247;

}

.dropdown-menu a:hover::before{

    height:70%;

}

.menu-toggle{

    display:none;

}

/* =======================================================
MOBILE
======================================================= */

@media (max-width:991px){

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

    #header{

        background:#FFF;
        padding:20px 0;
        box-shadow:0 10px 30px rgba(0,0,0,.08);

    }

    #header.scroll{

        background:#FFF;
        padding:20px 0;
        box-shadow:0 10px 30px rgba(0,0,0,.08);

    }


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

.logo{

    width:230px;

    height:60px;

    display:flex;

    align-items:center;

    position:relative;
    overflow:hidden;

}

/* Esconde a logo do HERO */

.logo-top{

    display:none !important;

}

/* Sempre mostra a logo reduzida */

.logo-scroll{

display:block !important;

    position:relative;

    top:auto;
    left:auto;

    transform:none;

    width:100%;
    height:100%;

    object-fit:contain;

    opacity:1 !important;
    visibility:visible !important;

}

/* Mesmo após scroll continua igual */

#header.scroll .logo-top{

    display:none !important;

}

#header.scroll .logo-scroll{

    display:block !important;

    opacity:1 !important;

    visibility:visible !important;

}

    /* ===========================
       BOTÃO HAMBURGUER
    =========================== */

    .menu-toggle{

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        width:50px;

        height:50px;

        background:none;

        border:none;

        cursor:pointer;

        padding:0;

        z-index:100000;

    }

    .menu-toggle span{

        width:28px;

        height:3px;

        margin:3px 0;

        border-radius:20px;

        background:#1D2F58;

        transition:.35s;

    }

    #header.scroll .menu-toggle span{

        background:#1D2F58;

    }

    /* ===========================
       ANIMAÇÃO DO X
    =========================== */

    .menu-toggle.active span:nth-child(1){

        transform:translateY(9px) rotate(45deg);

    }

    .menu-toggle.active span:nth-child(2){

        opacity:0;

    }

    .menu-toggle.active span:nth-child(3){

        transform:translateY(-9px) rotate(-45deg);

    }

    /* ===========================
       MENU
    =========================== */

    .menu{

        position:fixed;

        top:0;

        right:-100%;

        width:320px;

        max-width:85%;

        height:100vh;

        background:#FFF;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        justify-content:flex-start;

        padding:95px 30px 40px;

        gap:0;

        transition:.35s;

        box-shadow:-15px 0 40px rgba(0,0,0,.15);

        z-index:99999;

    }

    .menu.active{

        right:0;

    }

    .menu li{

        width:100%;

        list-style:none;

    }

    .menu > li > a{

        display:flex;

        justify-content:space-between;

        align-items:center;

        width:100%;

        padding:18px 0;

        color:#1D2F58 !important;

        font-size:16px;

        border-bottom:1px solid #ECECEC;

    }

    .menu > li > a::after{

        display:none;

    }

    /* ===========================
       DROPDOWN
    =========================== */

    .dropdown{

        width:100%;

    }

    .dropdown-menu{

        position:static;

        display:none;

        opacity:1;

        visibility:visible;

        transform:none;

        margin:0;

        padding:0;

        min-width:100%;

        background:none;

        box-shadow:none;

        border-radius:0;

    }

    .dropdown.active .dropdown-menu{

        display:block;

    }

    .dropdown-menu li{

        width:100%;

    }

    .dropdown-menu a{

        padding:12px 0 12px 20px;

        color:#1D2F58;

        font-size:14px;

    }

    .dropdown-menu a::before{

        display:none;

    }

    /* ===========================
       OVERLAY
    =========================== */

    .menu-overlay{

        position:fixed;

        inset:0;

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

        opacity:0;

        visibility:hidden;

        transition:.35s;

        z-index:99998;

    }

    .menu-overlay.active{

        opacity:1;

        visibility:visible;

    }

}