body{
    font-family: sans-serif;
    background-color: white;
    overflow: hidden;
}
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #fff;
    overflow-x: hidden; /* Evita rolagem horizontal */
    padding-top: env(safe-area-inset-top); /* Espaço para a barra de status */
    padding-bottom: env(safe-area-inset-bottom); /* Espaço para a barra de navegação */
    padding-left: env(safe-area-inset-left); /* Espaço para bordas laterais (iPhone X e superiores) */
    padding-right: env(safe-area-inset-right);
}


.corpo{
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 80px);
    top: 80px;
    left: 0px;
    overflow-y: scroll; /* Add this line to enable scrolling */
    overflow-x: hidden;
    z-index: -1;
}
/* Custom scrollbar styles */
.corpo::-webkit-scrollbar {
    width: 8px;
}

.corpo::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.corpo::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.corpo::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.top{
    position: absolute;
    height: 80px;
    width: 100%;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.559);
    display: flex; /* Torna o container flexível */ /* Espaçamento entre as divs */
    flex-wrap: nowrap; /* Permite quebrar linha quando necessário */
    gap: calc(14.6vw - 20px) ;
}

.clicksobre{
    position: absolute;
    top: 0px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 30px;
    height: 20px;
    width: 55px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.clickmetalo{
    position: absolute;
    top: 0px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 30px;
    height: 20px;
    width: 155px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.clickorçamento{
    position: absolute;
    top: 0px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 30px;
    height: 20px;
    width: 100px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.clicktrabalhos{
    position: absolute;
    top: 0px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 30px;
    height: 20px;
    width: 90px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.clicknovidades{
    position: absolute;
    top: 0px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 30px;
    height: 20px;
    width: 100px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.boxsobre{
    position: absolute;
    transform: translate(-50%, 0);
    height: 80px;
    width: 70px;
    background-color: #006494;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.559);
    border-radius: 30px;
    transition: 0.3s ease-in-out;
}

.boxmetalo{
    position: absolute;
    transform: translate(-50%, 0);
    height: 80px;
    width: 165px;
    background-color: #006494;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.559);
    border-radius: 30px;
    transition: 0.3s ease-in-out;
}

.boxorçamento{
    position: absolute;
    transform: translate(-50%, 0);
    height: 80px;
    width: 110px;
    background-color: #006494;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.559);
    border-radius: 30px;
    transition: 0.3s ease-in-out;
}

.boxtrabalhos{
    position: absolute;
    transform: translate(-50%, 0);
    height: 80px;
    width: 100px;
    background-color: #006494;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.559);
    border-radius: 30px;
    transition: 0.3s ease-in-out;
}

.boxnovidades{
    position: absolute;
    transform: translate(-50%, 0);
    height: 80px;
    width: 110px;
    background-color: #006494;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.559);
    border-radius: 30px;
    transition: 0.3s ease-in-out; 
}

.divmenu{
    position: relative;
    left: 90%;
    justify-content: center;
    transform: translate(-50%, 0);
}

.menu{
    position: absolute;
    height: 70px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
}

.clickmenu{
    position: absolute;
    height: 70px;
    width: 70px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.divlogo{
    position: fixed; /* Garante que a imagem seja posicionada em relação ao contêiner */
    z-index: 1;
    transform: translate(-50%,-50%);
    left: calc(70px + 3vw);
    top: 50%;
    height: 50px;
    width: 50px;
}

.logo{
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    height: 60px;
    width: auto;
}

.clicklogo{
    position: absolute;
    transform: translate(-50%,-50%);
    background-color: transparent;
    left: 50%;
    top: 50%;
    height: 60px;
    width: 170px;
    cursor: pointer;
}

.divtop{
    position: relative;
    transform: translate(-50%,-50%);
    top: 62%;
    left: 23%;
    justify-content: center;
    width: auto;
    height: auto;
    white-space: nowrap;
    transition: 0.3s ease-in-out;
}

.top h3{
    transition: 0.3s ease-in-out;
    color: #1b233d;
}

.telemenu{
    position: absolute;
    background-color: white;
    transform: translate(-100%,0%);
    height: 240px;
    width: 70vw;
    border-radius: 10px;
    top: 10px;
    left: 82vw;
    font-size: calc(10px + 1vw);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.559);
}

.telemenuboxsobrediv{
    position: absolute;
    background-color: #006494;
    transform: translate(-50%,-50%);
    height: 60px;
    width: 70vw;
    left: 50%;
    top: 30px;
    border-radius: 10px 10px 0px 0px;
    transition: 0.3s ease-in-out;
}

.telemenuboxmetalodiv{
    position: absolute;
    background-color: #006494;
    transform: translate(-50%,-50%);
    height: 60px;
    width: 70vw;
    left: 50%;
    top: 90px;
    transition: 0.3s ease-in-out;
}

.telemenuboxorçamentodiv{
    position: absolute;
    background-color: #006494;
    transform: translate(-50%,-50%);
    height: 60px;
    width: 70vw;
    left: 50%;
    top: 210PX;
    transition: 0.3s ease-in-out;
    border-radius: 0px 0px 10px 10px;
}

.telemenuboxcatalogodiv{
    position: absolute;
    background-color: #006494;
    transform: translate(-50%,-50%);
    height: 60px;
    width: 70vw;
    left: 50%;
    top: 210px;
    transition: 0.3s ease-in-out;
}

.telemenuboxnovidadesdiv{
    position: absolute;
    background-color: #006494;
    transform: translate(-50%,-50%);
    height: 60px;
    width: 70vw;
    left: 50%;
    top: 150px;
    transition: 0.3s ease-in-out;
}

.telesobrediv{
    position: absolute;
    left: 50%;
    top: 30px;
    height: 60px;
    width: 70vw;
    place-items: center;
    transform: translate(-50%,-50%);
    border-top: 2px solid black;
    border-radius: 10px 10px 0px 0px;
    border-bottom: 2px solid black;
}

.telemetalodiv{
    position: absolute;
    left: 50%;
    top: 90px;
    height: 60px;
    width: 70vw;
    place-items: center;
    transform: translate(-50%,-50%);
    border-bottom: 2px solid black; 
}

.teleorçamentodiv{
    position: absolute;
    left: 50%;
    top: 210px;
    height: 60px;
    width: 70vw;
    place-items: center;
    transform: translate(-50%,-50%);
    border-radius: 10px;
    border-bottom: 2px solid black; 
}

.telecatalgodiv{
    position: absolute;
    left: 50%;
    top: 210px;
    height: 60px;
    width: 70vw;
    place-items: center;
    transform: translate(-50%,-50%);
}

.telenovidadesdiv{
    position: absolute;
    left: 50%;
    top: 150px;
    height: 60px;
    width: 70vw;
    place-items: center;
    transform: translate(-50%,-50%);
    border-bottom: 2px solid black; 
}

.clicktelesobre{
    position: absolute;
    transform: translate(-50%,-50%);
    height: 30px;
    width: 70vw;
    top: 30px;
    left: 50%;
    cursor: pointer;
}

.clicktelemetalo{
    position: absolute;
    transform: translate(-50%,-50%);
    height: 40px;
    width: 70vw;
    top: 30px;
    left: 50%;
    cursor: pointer;
}

.clickteleorçamento{
    position: absolute;
    transform: translate(-50%,-50%);
    height: 40px;
    width: 70vw;
    top: 30px;
    left: 50%;
    cursor: pointer;
}

.clicktelecatalgo{
    position: absolute;
    transform: translate(-50%,-50%);
    height: 40px;
    width: 70vw;
    top: 30px;
    left: 50%;
    cursor: pointer;
}

.clicktelenovidades{
    position: absolute;
    transform: translate(-50%,-50%);
    height: 40px;
    width: 70vw;
    top: 30px;
    left: 50%;
    cursor: pointer;  
}

.contact-toggle-bar {
    display: block; /* Esconde o botão por padrão */
}