@import url('style.css');

.head {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 90%;
}

.head-search,
.redes-head,
.acessibilidade-head {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: var(--inputs-bg) !important;
}

:root {
    --animation-duration: 0.4s;
}

.blur-header {
    background: var(--branco) !important;
    transition: background var(--animation-duration) ease;
}

#main-header {
    transition: all 0.4s ease;
}

#search-bar {
    position: fixed;
    top: 4rem;
    left: 0;
    right: 0;
    z-index: 50;
    transition: all 0.4s ease;
    transition: transform var(--animation-duration) ease, opacity var(--animation-duration) ease;
}

.hidden-search-bar {
    transform: translateY(-100%);
    opacity: 0;
}

.visible-search-bar {
    transform: translateY(0);
    opacity: 1;
}

.no-blur {
    backdrop-filter: none;
    transition: backdrop-filter var(--animation-duration) ease;
}

@media (max-width: 768px) {
    #search-bar {
        z-index: 1;
    }

    #mobile-menu {
        z-index: 9999999;
    }

    .redes-head,
    .acessibilidade-head {
        display: none !important;
    }

    #search-bar {
        display: block !important;
        margin-top: 1rem !important;
        z-index: 99999999999999 !important;
    }


    .main-content {
        margin-top: 6rem !important;
    }
}

.img-logo-nav {
    height: 8rem;
}