/* Garantir que o corpo e o HTML ocupem toda a altura da janela */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}

/* Container que agrupa todas as seções */
.container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Altura total da viewport */
}

/* Estilo comum para todas as seções */
section {
    flex: 1; /* Cada seção ocupa uma parte igual da altura disponível */
    display: flex;
    justify-content: center; /* Centralizar horizontalmente */
    align-items: center; /* Centralizar verticalmente */
    color: white;
    font-size: 1.5em;
    text-align: center;
}

/* Cores de fundo diferentes para cada seção */
.section-1 {
    position: relative;
    background-color: #01b35b;
    flex: 1.8; 
}


.section-1 .logo{
    max-width: 50%;
    height: 35px;
    max-height: 100%;
    position: absolute;
    left: 9.91%;
    right: 70.69%;
    top: 9.05%;
    bottom: 93.22%;
}

.section-1 .img-banner{
    max-width: 100%;
    height: auto;
    max-height: 80%;
    position: absolute;
    left: 49.26%;
    right: 1.95%;
    top: 21%;
    bottom: 60.94%;
}

.section-1 .img-rastreie{
    max-width: 100%;
    height: auto;
    max-height: 30%;
    position: absolute;
    left: 9.74%;
    right: 55.68%;
    top: 25%;
    bottom: 80.29%;
}

.section-1 .img-simplifique {
    max-width: 100%;
    height: auto;
    max-height: 15%;
    position: absolute;
    left: 9.91%;
    right: 59.35%;
    top: 55%;
    bottom: 75.98%;
}

.section-1 .input-banner {
    max-width: 50%;
    height: 50px;
    max-height: 50%;
    position: absolute;
    left: 9.91%;
    right: 65.35%;
    top: 72%;
    padding: 10px 30px 10px 10px;
    background-repeat: no-repeat;
    background-position: right center;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    outline: none;
}

.section-1  .search-button {
    width: 80px;
    max-width: 100px; /* Defina a largura do botão conforme necessário */
    height: 50px; /* Ajuste a altura do botão conforme necessário */
    position: absolute;
    top: 72%; /* Ajuste a posição vertical do botão conforme necessário */
    left: 33.35%; /* Ajuste a posição horizontal do botão conforme necessário */
    background-image: url('assets/btn-search.svg'); /* Adicione a imagem como fundo do botão */
    background-repeat: no-repeat;
    background-position: center; /* Centralize a imagem dentro do botão */
    color: transparent; /* Oculte o texto do botão */
    border: none;
    padding: 0; /* Remova o preenchimento interno para que a imagem ocupe todo o espaço do botão */
    cursor: pointer; /* Altera o cursor para indicar que o botão é clicável */
    box-sizing: border-box; /* Garante que o tamanho total do botão inclua padding e borda */
}


.section-2 {
    position: relative;
    background-color: rgb(255, 255, 255);
    
}

.section-2 .center{
    position: absolute;
    max-width: 100%;
    height: 150px;
    max-height: 100%; 
}

.section-3 {
    position: relative;
    background-color: #01b35b;
    flex: 1.5; 
}

.section-3 .footer{
    position: absolute;
    max-width: 100%;
    height: 150px;
    max-height: 100%; 
}

.section-3 .footer1{
    position: absolute;
    left: 0%;
    max-width: 100%;
    max-height: 100%;
    top: 0%;
}

.section-3 .footer2{
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    right: 0%;
    bottom: 0%;
}

.section-3 .footertext{
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    right: 30%;
    top: 5%;
}

.section-4 {
    position: relative;
    background-color:#00482c;
    flex: 0.25; 
}

.section-4 .logofooter {
    max-width: 15%;
    height: 20px;
    max-height: 100%;
    position: absolute;
    left: 9.91%;
    right: 70.69%;
    top: 20%;

}

.section-4 .aurora-logstica-todos-os-direitos-reservados {
    overflow-wrap: break-word;
    font-family: 'Inter';
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
  }

.section-4 .group-406 {
    position: relative;
    margin: 1.3px 0 1.9px 0;
    display: flex;
    box-sizing: border-box;
}


/* Estilo responsivo para ajustar o tamanho do texto em telas menores */
@media (max-width: 600px) {
    section {
        font-size: 1.5em; /* Ajuste o tamanho do texto em telas pequenas */
        padding: 20px; /* Adicionar preenchimento para melhor espaçamento*/
    }

    .section-1 .img-rastreie{
        max-height: 22%;
        padding: 10px;
    }

    .section-1 .img-simplifique {
        max-height: 12%;
        padding: 6px;

    }

    .section-1 .img-banner{
         max-height: 0%; 
    }

    .section-1 .input-banner {
        max-width: 100%;
        width: 80%; /* Ajuste o valor conforme necessário para aumentar o tamanho do campo de entrada */
        max-height: 100%;
        padding: 10px 30px 10px 10px;

        background-repeat: no-repeat;
        background-position: right center;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
        outline: none;
    }


    .section-1  .search-button {
        width: 80px;
        max-width: 100px; /* Defina a largura do botão conforme necessário */
        height: 50px; /* Ajuste a altura do botão conforme necessário */
        position: absolute;
        top: 72%; /* Ajuste a posição vertical do botão conforme necessário */
        left: 70.35%; /* Ajuste a posição horizontal do botão conforme necessário */
        background-image: url('assets/btn-search.svg'); /* Adicione a imagem como fundo do botão */
        background-repeat: no-repeat;
        background-position: center; /* Centralize a imagem dentro do botão */
        color: transparent; /* Oculte o texto do botão */
        border: none;
        padding: 0; /* Remova o preenchimento interno para que a imagem ocupe todo o espaço do botão */
        cursor: pointer; /* Altera o cursor para indicar que o botão é clicável */
        box-sizing: border-box; /* Garante que o tamanho total do botão inclua padding e borda */
    }

    .section-2 .center{
        position: absolute;
        max-width: 168%;
        max-height: 100%; 
        right: 12.69%;
    }

    .section-3 .footertext{
        position: absolute;
        max-width: 100%;
        width: 95%;
        max-height: 100%;
        right: 3%;
        top: 15%;
    }

    .section-4 .logofooter {
        max-width: 100%;
        height: 20px;
        max-height: 100%;
        position: absolute;
        left: 30.91%;
        top: 10%;
    }

    .section-4 .aurora-logstica-todos-os-direitos-reservados {
        overflow-wrap: break-word;
        font-family: 'Inter';
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
      }
}