@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* MENU */
.menu {
    background-color: black;
    color: var(--corSecundaria);
    min-height: 100px;
    font-size: 18px;
}

    .menu .sanduiche {
        color: var(--corSecundaria);
        font-size: 30px;
    }

    .menu li {
        padding-left: 40px;
    }

    .menu a {
        color: var(--corSecundaria) !important;
        -webkit-transition: all var(--velocidadeTransition) ease-in-out 0s;
    }

        .menu a:hover {
            color: var(--corPrimaria) !important;
            -webkit-transition: all var(--velocidadeTransition) ease-in-out 0s;
        }

    .menu .active {
        color: var(--corSecundaria) !important;
        -webkit-transition: all var(--velocidadeTransition) ease-in-out 0s;
    }

    .menu .logo {
        font-size: 20px;
    }

        .menu .logo img {
            width: 250px;
            height: auto;
        }

/* HOME */

.home {
    position: relative;
    height: 100%;
}

    .home .hero-image {
        position: relative;
        display: inline-block;
        position: relative; /* Essencial para posicionar o sombreamento sobre a imagem */
        width: 100%; /* Garante que o contêiner ocupe a largura total */
        overflow: hidden; /* Garante que nada transborde do contêiner */
    }

        .home .hero-image img {
            display: block;
            width: 100%;
            display: block; /* Remove espaços extras abaixo da imagem */
            width: 100%;
            height: 100%;
            object-fit: cover; /* Garante que a imagem cubra o contêiner sem distorção */
            position: absolute; /* Posiciona a imagem dentro do contêiner relativo */
            top: 0;
            left: 0;
            z-index: 1; /* Garante que a imagem esteja sob o sombreamento e o texto */
        }

.hero-image::before {
    content: ''; /* Essencial para pseudo-elementos */
    position: absolute; /* Permite posicionar o sombreamento sobre a imagem */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 5%, /* Começa com preto bem escuro no topo (70% de opacidade) */
    rgba(0, 0, 0, 0.6) 50%, /* Meio termo com opacidade moderada (40%) */
    rgba(0, 0, 0, 0.6) 100%); /* Termina com preto bem transparente na base (10%) */
    z-index: 2; /* Coloca o sombreamento acima da imagem */
}


.home .hero-image .texto {
    text-align: left;
    color: rgb(220,220,220);
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    position: absolute;
    bottom: 0;
    position: relative; /* Ou absolute, dependendo do seu layout desejado */


    padding: 20px;
    z-index: 3; /* Coloca o texto acima do sombreamento */
    /* Para centralizar o texto vertical e horizontalmente */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 100%;
}

    .home .hero-image .texto h1 {
        font-weight: 600;
    }

    .home .hero-image .texto h2 {
        font-family: "Inter", sans-serif;
        font-weight: 300;
    }

    .home .hero-image .texto h3 {
        font-family: "inter", sans-serif;
        font-weight: 200;
    }

/*SOBRE NOS*/
.sobrenos img {
    border-color: var(--corSecundaria);
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    width: 100%;
    margin: 0 0 5% 0;
}

.sobrenos .texto {
    text-align: justify;
    font-size: 18px;
    color: var(--corCinzaEscuro);
}

.sobrenos .valores {
    text-align: center;
    font-size: 14px;
    color: var(--corCinzaEscuro);
    padding: 5% 20% 0 20% !important;
}

    .sobrenos .valores img {
        width: 64px;
        height: 64px;
        border: none;
        margin: 5%;
    }


/* PRODUTOS E SERVIÇOS */
.produtos-servicos .cartao {
    text-align: center;
    color: white;
}

    .produtos-servicos .cartao .esquerda {
        background-color: var(--corSecundaria);
        padding: 0% 12% 0% 12%;
        border-radius: 10px;
    }

    .produtos-servicos .cartao .central {
        background-color: var(--corSecundaria);
        padding: 0% 12% 0% 12%;
        border-radius: 10px;
    }

    .produtos-servicos .cartao .direita {
        background-color: var(--corSecundaria);
        padding: 0% 12% 0% 12%;
        border-radius: 10px;
    }

    .produtos-servicos .cartao .titulo {
        position: relative;
        height: 100px; /* ou defina um valor fixo, ex: 300px */
        font-size: 18px;
    }

    .produtos-servicos .cartao .titulo-wrapper {
        font-size: 20px;
        font-weight: 500;
        color: white;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        text-align: center;
        border: none;
        text-decoration: none;
    }


    .produtos-servicos .cartao .icone {
        padding: 0px 0px 30px 0px;
    }

        .produtos-servicos .cartao .icone img {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }

.produtos-servicos .descricao {
    height: 250px;
}

    .produtos-servicos .descricao p {
        font-size: 16px;
        padding-bottom: 20px;
    }

/*GALERIA*/
.galeria .espacamento {
    text-align: center;
}

.galeria img {
    width: auto;
    height: 240px;
    text-align: center;
}

.galeria h2 {
    text-align: center;
    font-size: 16px;
    color: var(--corPrimaria);
    font-weight: 600;
    padding: 5% 10% 0 10%;
}

.galeria h3 {
    text-align: center;
    font-size: 16px;
    color: var(--corSecundaria);
    font-weight: 500;
    padding: 0 10% 0 10%;
}


/*CONTATO*/
.contato .imgContato {
    width: 100%;
    border-radius: 10px;
}

.contato .detalhes .telefone {
    font-size: 28px;
    color: var(--corPrimaria);
}

.contato .detalhes .email a {
    font-size: 18px;
    color: var(--corPrimaria);
    text-decoration: none;
    transition: var(--velocidadeTransition);
}

    .contato .detalhes .email a :active {
        text-decoration: none;
    }

    .contato .detalhes .email a :visited {
        text-decoration: none;
    }

    .contato .detalhes .email a:hover {
        text-decoration: none;
        transition: var(--velocidadeTransition);
        color: var(--corSecundaria);
    }

.contato .detalhes .mensagem {
    margin: 40px 0px 0px 0px;
}

    .contato .detalhes .mensagem input {
        margin: 10px 0px 10px 0px;
    }

    .contato .detalhes .mensagem .botao {
        margin: 40px 0px 0px 0px;
    }

.contato .detalhes .iconesSociais div {
    cursor: pointer;
}

.contato .detalhes .iconesSociais svg {
    fill: var(--corPrimaria);
    width: 50px;
    height: 30px;
    padding-left: 10px;
    transition: var(--velocidadeTransition);
}

    .contato .detalhes .iconesSociais svg path, .contato .iconesSociais svg circle {
        transition: var(--velocidadeTransition);
        fill: var(--CinzaClaroTexto);
    }

    .contato .detalhes .iconesSociais svg:hover path, .contato .iconesSociais svg:hover circle {
        transition: var(--velocidadeTransition);
        fill: var(--corSecundaria);
    }

/*LOCALIZACAO*/
.localizacao .endereco {
    background-color: var(--corSecundaria);
    color: white;
    text-align: center;
    border-radius: 10px;
    height: 350px;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .localizacao .endereco .texto {
        vertical-align: middle;
        padding: 0% 3% 0% 3%;
    }

.localizacao .mapa iframe {
    border-color: var(--corSecundaria) !important;
    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
    width: 100%;
    height: 350px;
}


/*---- VERSÃO MOBILE -----*/
@media screen and (max-width: 767px) {

    /*MENU*/
    .menu {
        min-height: 60px;
        font-size: 12px;
        padding: 10px 0 10px 0;
    }

        .menu .logo {
            font-size: 10px;
        }

            .menu .logo img {
                width: 120px;
            }

    /*CONTENTOR*/
    .contentor {
        padding-top: 10px;
        padding-bottom: 10px;
    }

        .contentor .titulo {
            padding-bottom: 30px;
        }

    /*HOME*/
    .home .hero-image {
        padding-top: 60px;
    }

        .home .hero-image .texto {
            padding-right: 0%;
            padding-left: 10px;
            text-align: center;
        }

            .home .hero-image .texto h1 {
                font-size: 40px;
                padding-bottom: 5%;
            }

            .home .hero-image .texto h2 {
                font-size: 18px;
                padding-bottom: 5%;
            }

            .home .hero-image .texto h3 {
                font-size: 18px;
                padding-bottom: 5%;
            }

    /*PRODUTOS*/
    .produtos-servicos .descricao {
        height: auto;
    }

    .produtos-servicos .cartao .esquerda {
        margin: 0% 0% 10% 0%;
    }

    .produtos-servicos .cartao .central {
        margin: 0% 0% 10% 0%;
    }

    .produtos-servicos .cartao .direita {
        margin: 0% 0% 10% 0%;
    }

    /*CONTATO*/
    .contato .detalhes {
        padding-top: 20px;
    }

        .contato .detalhes .telefone {
            font-size: 20px;
        }

    /*LOCALIZACAO*/
    .localizacao .endereco {
        height: 100%;
        padding: 10px;
    }

    .localizacao .espacamento {
        padding-bottom: 10px;
    }
}

/*---- VERSÃO TABLET -----*/
@media screen and (min-width: 768px) and (max-width: 991px) {
    .menu {
        min-height: 80px;
    }

        .menu .logo {
            font-size: 10px;
        }

            .menu .logo img {
                width: 200px;
            }

    .home .hero-image .texto {
        padding-right: 10%;
    }

        .home .hero-image .texto h1 {
            font-size: 45px;
            padding-bottom: 5%;
        }

        .home .hero-image .texto h2 {
            font-size: 20px;
            padding-bottom: 5%;
        }

        .home .hero-image .texto h3 {
            font-size: 16px;
            padding-bottom: 5%;
        }

    .contato .detalhes {
        padding-top: 20px;
    }

    .produtos-servicos .descricao {
        height: auto;
    }

    .produtos-servicos .cartao .esquerda {
        margin: 0% 0% 10% 0%;
    }

    .produtos-servicos .cartao .central {
        margin: 0% 0% 10% 0%;
    }

    .produtos-servicos .cartao .direita {
        margin: 0% 0% 10% 0%;
    }
}

/*---- VERSÃO DESKTOP -----*/
@media screen and (min-width: 992px) {

    .home .hero-image .texto {
        padding-right: 40%;
    }

        .home .hero-image .texto h1 {
            font-size: 60px;
            padding-bottom: 5%;
        }

        .home .hero-image .texto h2 {
            font-size: 24px;
            padding-bottom: 5%;
        }

        .home .hero-image .texto h3 {
            font-size: 22px;
            padding-bottom: 5%;
        }

    .produtos-servicos .cartao .esquerda {
        margin: 0% 10% 0% 0%;
    }

    .produtos-servicos .cartao .central {
        margin: 0% 5% 0% 5%;
    }

    .produtos-servicos .cartao .direita {
        margin: 0% 0% 0% 10%;
    }
}

@media screen and (min-width: 1200px) {


    .home .hero-image .texto h1 {
        font-size: 50px;
        padding-bottom: 10%;
    }

    .home .hero-image .texto h2 {
        font-size: 24px;
        padding-bottom: 10%;
    }

    .home .hero-image .texto h3 {
        font-size: 20px;
        padding-bottom: 10%;
    }
}