.mobile-menu-icon {
    display: none;
}

.mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background-color: white;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    padding: 0; /* Remove o padding quando o menu está escondido */
    transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
    z-index: 999;
}

.icon-x {
    display: none;
}

/* Início Media Query */

@media screen and (max-width: 1170px) {
    .nav-list,
    .navbar .btn-contato {
        display: none;
    }

    header {
        width: 100%;
        padding: 2px 4%;
        background-color: white;
        position: fixed;
        z-index: 1000;
    }

    #content {
        padding-top: 70px;
    }

    .logo {
        margin-left: 5px;
        max-width: 150px;
    }

    .mobile-menu-icon {
        display: flex;
        /* padding: .5rem 1rem;
        font-size: 1.5rem;
        border: none;
        background: none; */
        cursor: pointer;

        width: 28px;
        height: 25px;
        margin-top: 10px;
        /* margin-right: 15px; */
        flex-direction: column;
        justify-content: space-between;
    }

    .linha {
        width: 23.5px;
        height: 5px;
        background-color: black;
        transition: .2s;
    }

    .linha1 {
        transform: rotateZ(0deg);
        transform-origin: left bottom;
    }
    .linha3 {
        transform: rotateZ(0deg);
        transform-origin: left top;
    }

    .open .linha1{
        transform: rotateZ(45deg);
        transform-origin: left bottom;
    }

    .open .linha2{
        width: 0;
    }

    .open .linha3{
        transform: rotateZ(-45deg);
        transform-origin: left top;
    }

    .mobile-menu {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        background-color: white;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        padding: 0; /* Remove o padding quando o menu está escondido */
        transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
    }

    .mobile-menu.active {
        max-height: 300px; /* Ajuste conforme necessário */
        opacity: 1;
        visibility: visible;
        padding: 1%; /* Adiciona o padding de volta quando o menu está ativo */
        z-index: 999;
    }

    .mobile-nav-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 2px;
        width: 100%;
    }

    .mobile-nav-list .nav-item {
        list-style: none;
        text-align: end;
        position: relative;
    }

    .mobile-nav-list .nav-item::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px; /* Espessura da linha */
        background-color: #ddd; /* Cor da linha, ajuste conforme necessário */
    }

    .btn-contato {
        align-self: flex-end;
        margin-bottom: 5px;
    }

    .mobile-menu-icon.open .icon-hamburguer {
        display: none;
    }

    .mobile-menu-icon.open .icon-x {
        display: block;
    }




    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0);
        z-index: -1;
      }
      
      .mobile-menu.active ~ .mobile-menu-overlay {
        display: block;
      }


}

/* Fim Media Query */