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

* {
    font-family: 'Roboto';
}

body {
    position: relative;
    overflow: hidden;
}

.bg {
    background: url(/assets/img/bg-desk.webp) center center no-repeat;
    background-size: cover;
    transform: scale(1);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

@media(min-width: 991px) {
    .bg {
        animation: zoomOut 5s ease-out forwards;
        position: absolute;
    }
}

@media(max-width: 991px) {
    body {
        background: url(/assets/img/bg-mobile.webp) center center no-repeat;
        background-size: cover;
    }

    .bg {
        background: url(/assets/img/bg-mobile.webp) center center no-repeat;
        background-size: cover;
    }
}

/* @keyframes zoomOut {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
} */

img {
    max-width: 100%;
}

.conteudo {
    position: relative;
    z-index: 2;
}

.container {
    height: 100vh;
    position: relative;
}

.load {
    max-width: 30%;
    margin-right: 45px;
}

@media(max-width:991px) {
    .load {
        max-width: 50%;
    }
}

.loader {
    color: #fff;
    font-size: 10px;
    /* Tamanho base consistente */
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    animation: mulShdSpin 1.3s infinite linear;
    transform: translateZ(0);
}

@keyframes mulShdSpin {

    0%,
    100% {
        box-shadow:
            0 -3em 0 0.5em,
            2em -2em 0 0em,
            3em 0 0 -0.5em,
            2em 2em 0 -0.5em,
            0 3em 0 -0.5em,
            -2em 2em 0 -0.5em,
            -3em 0 0 -0.5em,
            -2em -2em 0 0;
    }

    12.5% {
        box-shadow:
            0 -3em 0 0,
            2em -2em 0 0.5em,
            3em 0 0 0,
            2em 2em 0 -0.5em,
            0 3em 0 -0.5em,
            -2em 2em 0 -0.5em,
            -3em 0 0 -0.5em,
            -2em -2em 0 -0.5em;
    }

    25% {
        box-shadow:
            0 -3em 0 -0.5em,
            2em -2em 0 0,
            3em 0 0 0.5em,
            2em 2em 0 0,
            0 3em 0 -0.5em,
            -2em 2em 0 -0.5em,
            -3em 0 0 -0.5em,
            -2em -2em 0 -0.5em;
    }

    37.5% {
        box-shadow:
            0 -3em 0 -0.5em,
            2em -2em 0 -0.5em,
            3em 0 0 0,
            2em 2em 0 0.5em,
            0 3em 0 0,
            -2em 2em 0 -0.5em,
            -3em 0 0 -0.5em,
            -2em -2em 0 -0.5em;
    }

    50% {
        box-shadow:
            0 -3em 0 -0.5em,
            2em -2em 0 -0.5em,
            3em 0 0 -0.5em,
            2em 2em 0 0,
            0 3em 0 0.5em,
            -2em 2em 0 0,
            -3em 0 0 -0.5em,
            -2em -2em 0 -0.5em;
    }

    62.5% {
        box-shadow:
            0 -3em 0 -0.5em,
            2em -2em 0 -0.5em,
            3em 0 0 -0.5em,
            2em 2em 0 -0.5em,
            0 3em 0 0,
            -2em 2em 0 0.5em,
            -3em 0 0 0,
            -2em -2em 0 -0.5em;
    }

    75% {
        box-shadow:
            0 -3em 0 -0.5em,
            2em -2em 0 -0.5em,
            3em 0 0 -0.5em,
            2em 2em 0 -0.5em,
            0 3em 0 -0.5em,
            -2em 2em 0 0,
            -3em 0 0 0.5em,
            -2em -2em 0 0;
    }

    87.5% {
        box-shadow:
            0 -3em 0 0,
            2em -2em 0 -0.5em,
            3em 0 0 -0.5em,
            2em 2em 0 -0.5em,
            0 3em 0 -0.5em,
            -2em 2em 0 0,
            -3em 0 0 0,
            -2em -2em 0 0.5em;
    }
}


.logo {
    opacity: 0.6 !important;
}

.contact {
    max-width: 45%;
    float: right;
    margin-top: 30px;
}

.frase-footer {
    position: absolute;
    left: 5%;
    bottom: 80px;
    max-width: 400px;
}

@media(max-width: 1600px) {
    .frase-footer {
        bottom: 30px;
    }
}

@media(max-width:991px) {
    .frase-footer {
        position: inherit;
    }
}

.frase-footer p {
    color: #1e431e;
    font-size: 30px;
}

@media(max-width:991px) {
    .frase-footer p {
        color: #fff;
        font-size: 20px;
    }
}

.telefone {
    font-size: 40px;
    color: #fff;
    position: absolute;
    right: 0;
    bottom: 30px;
}

@media(max-width: 1600px) {
    .telefone {
        right: -20px;
        bottom: 20px;
    }
}

@media(max-width: 991px) {
    .telefone {
        position: inherit;
        clear: both;
        text-align: right;
        font-size: 20px;
    }
}