@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Asimovian&family=Special+Gothic+Expanded+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Asimovian&family=Special+Gothic+Expanded+One&display=swap');

*{
    border: 0;
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

body{
    background-image: url(imgs/Background.png);
}


.navbar{
    width: 100%;
    height: 100px;
    max-height: 6vh;
    display: flex;
    background-color: rgba(85, 56, 122, 0.5);
    text-align: center;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
}

.contentNavbar{
    width: 95%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-between;
}

.navbar .logo{
    height: 5vh;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    align-items: center;
}

.navbar .logo a{
    width: 100%;
    height: 100%;
    display: flex;
     font-family: "Archivo Black", sans-serif;
    font-weight: bolder;
    font-style: normal;
    letter-spacing: 2pt;
    font-size: 20pt;
    color: white;
    text-decoration: none;
    text-align: center;
    align-items: center;
    justify-content: center;
    align-items: center;
}

.navbar .logo img{
    height: 100%;
}

.navbar .optionsNavbar{
    width: 25%;
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
}

.navbar .optionsNavbar a{
    text-decoration: none;
    color: white;
    font-family: "Special Gothic Expanded One", sans-serif;
    font-weight: 400px;
    font-size: 11pt;
    letter-spacing: 1px;
}

.slogan{
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    align-content: center;
    margin-top: 180px;
    color: white;
}

.slogan .textoSlogan{
    width: 88%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.slogan .textoSlogan .sloganMain{
    width: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;

    font-family: "Special Gothic Expanded One", sans-serif;
    font-weight: 400px;
    font-size: 60pt;
    letter-spacing: 1px;
    text-shadow: 2px 4px 18px rgba(0,0,0,0.57);
}

.slogan .textoSlogan .subSlogan{
    width: 80%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-top: 2%;

    font-family: "Special Gothic Expanded One", sans-serif;
    font-weight: 400px;
    font-size: 22pt;
    letter-spacing: 1px;
    color: rgb(85, 56, 122);
}

.sloganButton {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 0; /* Espaço para a sombra não cortar */
    margin-top: 3%;
}

.btn-gradient {
    display: inline-block;
    text-decoration: none;
    color: white;
    font-family: "Special Gothic Expanded One", sans-serif;
    font-weight: bolder;
    font-size: 20pt;
    letter-spacing: 2pt;

    /* 1. O Formato do Botão */
    padding: 30px 60px;
    border-radius: 50px; /* Deixa as pontas totalmente redondas */

    /* 2. O Gradiente (Ajustado pelas cores da imagem) */
    background: linear-gradient(to right, #9db4ff, #ca9eff, #ff9eeb);

    /* 3. A Sombra (Box Shadow) 
       Usando os parâmetros do seu Photoshop anterior:
       Distância 13px, Tamanho 57px, Opacidade 29%
    */
    box-shadow: 0px 13px 45px rgba(76, 45, 126, 0.35);

    /* Transição suave para o hover */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efeito ao passar o mouse */
.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0px 15px 50px rgba(76, 45, 126, 0.45);
}

.servicos{
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-top: 15%;
}

.contentServicos{
    width: 80%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.topicServicos{
    background-color: rgb(85, 56, 122);
    border-radius: 50px;
    display: flex;
    width: 38%;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 2%;

    font-family: "Special Gothic Expanded One", sans-serif;
    font-weight: bolder;
    font-size: 25pt;
    letter-spacing: 3pt;
    color: white;
}


.contentCards{
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 3%;
}

.cardsServicos{
    width: 95%;
    margin-top: 3%;
    display: flex;
    text-align: center;
    align-items: center;
    color: white;
}

.card{
    background-color: rgb(85, 56, 122);
    border-radius: 80px;
    padding: 1%;
    padding-top: 2%;
    padding-bottom: 4%;
    display: flex;
    width: 44%;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.tituloCard{
    font-family: "Special Gothic Expanded One", sans-serif;
    font-weight: bolder;
    font-size: 50pt;
    letter-spacing: 3pt;
    display: flex;
    width: 95%;
    text-align: center;
    align-items: center;
    justify-content: center;

}

.textoCard{
    font-family: "Special Gothic Expanded One", sans-serif;
    font-weight: 400px;
    font-size: 25pt;
    display: flex;
    width: 80%;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-top: 2%;
}


.card2{
    background-color: rgb(255, 255, 255);
    color: rgb(85, 56, 122);
    border-radius: 80px;
    padding: 1%;
    padding-top: 2%;
    padding-bottom: 4%;
    display: flex;
    width: 44%;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.tituloCard2{
    font-family: "Special Gothic Expanded One", sans-serif;
    font-weight: bolder;
    font-size: 50pt;
    letter-spacing: 3pt;
    display: flex;
    width: 95%;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.textoCard2{
    font-family: "Special Gothic Expanded One", sans-serif;
    font-weight: 400px;
    font-size: 25pt;
    display: flex;
    width: 80%;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-top: 2%;
}

.etapas{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 5%;
}

.etapas img{
    width: 50%;
}

.etapas1234{
    display: flex;
    width: 95%;
    margin-left: 5%;
}

.etapas1234 img{
    width: 50%;
    margin-top: 2%;
    text-align: center;
}

.etapacontent{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 95%;
}

.etapacontent img{
    width: 70%;
    margin-top: 5%;
}


.sobreNos{
    margin-top: 5%;
    color: white;
    display: flex;
    width: 100%;
    text-align: left;
    align-items: center;
    justify-content: center;
}

.contentSobreNos{
    width: 90%;
    display: flex;
    flex-direction: column;
}

.contentSobreNos h1{
    font-family: "Special Gothic Expanded One", sans-serif;
    font-weight: bolder;
    font-size: 50pt;
    letter-spacing: 3pt;
    display: flex;
    width: 100%;
    text-shadow: 2px 4px 18px rgba(0,0,0,0.57);
}

.contentSobreNos p{
    display: flex;
    width: 100%;
    font-family: "Special Gothic Expanded One", sans-serif;
    font-weight: 400px;
    font-size: 25pt;
    margin-top: 5px;
    text-shadow: 2px 4px 18px rgba(0,0,0,0.57);
}

.whatsButton{
    position: fixed;
    top: 85vh;
    left: 92vw;
}

.whatsButton a{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
}

.whatsButton a img{
    width: 8vh;
}

.footer{
    width: 100%;
    height: 100px;
    max-height: 6vh;
    display: flex;
    background-color: rgb(85, 56, 122);
    text-align: center;
    align-items: center;
    justify-content: center;
    padding-top: 1%;
    padding-bottom: 1%;
}

.contentFooter{
    width: 95%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-between;
}

.footer .logo{
    height: 6vh;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    align-items: center;
}

.footer .logo a{
    width: 100%;
    height: 100%;
    display: flex;
     font-family: "Archivo Black", sans-serif;
    font-weight: bolder;
    font-style: normal;
    letter-spacing: 2pt;
    font-size: 20pt;
    color: white;
    text-decoration: none;
    text-align: center;
    align-items: center;
    justify-content: center;
    align-items: center;
}

.footer .logo img{
    height: 100%;
}

.footer .optionsFooter{
    width: 25%;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    align-items: center;
}

.footer .optionsFooter a{
    text-decoration: none;
    color: white;
    font-family: "Special Gothic Expanded One", sans-serif;
    font-weight: 400px;
    font-size: 11pt;
    letter-spacing: 1px;
}

.optionsFooter a img{
    width: 5vh;
}

















@media screen and ( max-width: 1200px) {
    .navbar{
    width: 100%;
    height: 100px;
    max-height: 6vh;
    display: flex;
    background-color: rgb(85, 56, 122);
    text-align: center;
    align-items: center;
    justify-content: center;
    }

    .contentNavbar{
        width: 95%;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .navbar .logo{
        height: 6vh;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        align-items: center;
    }

    .navbar .logo a{
        width: 100%;
        height: 100%;
        display: flex;
        font-family: "Archivo Black", sans-serif;
        font-weight: bolder;
        font-style: normal;
        letter-spacing: 2pt;
        font-size: 20pt;
        color: white;
        text-decoration: none;
        text-align: center;
        align-items: center;
        justify-content: center;
        align-items: center;
    }

    .navbar .logo img{
        height: 100%;
    }

    .navbar .optionsNavbar{
        display: none;
    }

    .navbar .optionsNavbar a{
        text-decoration: none;
        color: white;
        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: 400px;
        font-size: 11pt;
        letter-spacing: 1px;
    }

    .slogan{
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
        align-content: center;
        margin-top: 150px;
        color: white;
    }

    .slogan .textoSlogan{
        width: 88%;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .slogan .textoSlogan .sloganMain{
        width: 100%;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;

        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: 400px;
        font-size: 30pt;
        letter-spacing: 1px;
        text-shadow: -17px 20px 54px rgba(76, 45, 126, 0.33);

        filter: drop-shadow(0px 13px 25px rgba(76, 45, 126, 0.29));
    }

    .slogan .textoSlogan .subSlogan{
        width: 80%;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        margin-top: 2%;

        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: 400px;
        font-size: 12pt;
        letter-spacing: 1px;
        color: rgb(85, 56, 122);
    }

    .sloganButton {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 40px 0; /* Espaço para a sombra não cortar */
        margin-top: 3%;
    }

    .btn-gradient {
        display: inline-block;
        text-decoration: none;
        color: white;
        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: bolder;
        font-size: 20pt;
        letter-spacing: 2pt;

        /* 1. O Formato do Botão */
        padding: 30px 60px;
        border-radius: 50px; /* Deixa as pontas totalmente redondas */

        /* 2. O Gradiente (Ajustado pelas cores da imagem) */
        background: linear-gradient(to right, #9db4ff, #ca9eff, #ff9eeb);

        /* 3. A Sombra (Box Shadow) 
        Usando os parâmetros do seu Photoshop anterior:
        Distância 13px, Tamanho 57px, Opacidade 29%
        */
        box-shadow: 0px 13px 45px rgba(76, 45, 126, 0.35);

        /* Transição suave para o hover */
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    /* Efeito ao passar o mouse */
    .btn-gradient:hover {
        transform: translateY(-2px);
        box-shadow: 0px 15px 50px rgba(76, 45, 126, 0.45);
    }

    .servicos{
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
        margin-top: 15%;
    }

    .contentServicos{
        width: 80%;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .topicServicos{
        background-color: rgb(85, 56, 122);
        border-radius: 50px;
        display: flex;
        width: 38%;
        text-align: center;
        align-items: center;
        justify-content: center;
        padding: 2%;

        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: bolder;
        font-size: 12pt;
        letter-spacing: 3pt;
        color: white;
    }


    .contentCards{
        display: flex;
        width: 100%;
        justify-content: space-between;
        margin-top: 3%;
    }

    .cardsServicos{
        width: 95%;
        margin-top: 3%;
        display: flex;
        text-align: center;
        align-items: center;
        color: white;
    }

    .card{
        background-color: rgb(85, 56, 122);
        border-radius: 80px;
        padding: 1%;
        padding-top: 2%;
        padding-bottom: 4%;
        display: flex;
        width: 44%;
        text-align: center;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .tituloCard{
        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: bolder;
        font-size: 20pt;
        letter-spacing: 3pt;
        display: flex;
        width: 95%;
        text-align: center;
        align-items: center;
        justify-content: center;

    }

    .textoCard{
        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: 400px;
        font-size: 15pt;
        display: flex;
        width: 80%;
        text-align: center;
        align-items: center;
        justify-content: center;
        margin-top: 2%;
    }


    .card2{
        background-color: rgb(255, 255, 255);
        color: rgb(85, 56, 122);
        border-radius: 80px;
        padding: 1%;
        padding-top: 2%;
        padding-bottom: 4%;
        display: flex;
        width: 44%;
        text-align: center;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .tituloCard2{
        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: bolder;
        font-size: 20pt;
        letter-spacing: 3pt;
        display: flex;
        width: 95%;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .textoCard2{
        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: 400px;
        font-size: 15pt;
        display: flex;
        width: 80%;
        text-align: center;
        align-items: center;
        justify-content: center;
        margin-top: 2%;
    }

    .sobreNos{
        margin-top: 5%;
        color: white;
        display: flex;
        width: 100%;
        text-align: left;
        align-items: center;
        justify-content: center;
    }

    .contentSobreNos{
        width: 95%;
        display: flex;
        flex-direction: column;
    }

    .contentSobreNos h1{
        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: bolder;
        font-size: 40pt;
        letter-spacing: 3pt;
        display: flex;
        width: 100%;
    }

    .contentSobreNos p{
        display: flex;
        width: 100%;
        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: 400px;
        font-size: 20pt;
        margin-top: 5px;
    }



    .footer{
        width: 100%;
        height: 100px;
        max-height: 6vh;
        display: flex;
        background-color: rgb(85, 56, 122);
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .contentFooter{
        width: 95%;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: space-between;
    }

    .footer .logo{
        height: 6vh;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        align-items: center;
    }

    .footer .logo a{
        width: 100%;
        height: 100%;
        display: flex;
        font-family: "Archivo Black", sans-serif;
        font-weight: bolder;
        font-style: normal;
        letter-spacing: 2pt;
        font-size: 20pt;
        color: white;
        text-decoration: none;
        text-align: center;
        align-items: center;
        justify-content: center;
        align-items: center;
    }

    .footer .logo img{
        height: 100%;
    }

    .footer .optionsFooter{
        width: 25%;
        display: flex;
        justify-content: space-between;
        text-align: center;
        align-items: center;
    }

    .footer .optionsFooter a{
        text-decoration: none;
        color: white;
        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: 400px;
        font-size: 11pt;
        letter-spacing: 1px;
    }

    .whatsButton{
        position: fixed;
        top: 85vh;
        left: 85vw;
    }

    .whatsButton a{
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
    }
}












































@media screen and ( max-width: 768px) {
    .navbar{
    width: 100%;
    height: 100px;
    max-height: 6vh;
    display: flex;
    background-color: rgb(85, 56, 122);
    text-align: center;
    align-items: center;
    justify-content: center;
    }

    .contentNavbar{
        width: 95%;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .navbar .logo{
        height: 6vh;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        align-items: center;
    }

    .navbar .logo a{
        width: 100%;
        height: 100%;
        display: flex;
        font-family: "Archivo Black", sans-serif;
        font-weight: bolder;
        font-style: normal;
        letter-spacing: 2pt;
        font-size: 20pt;
        color: white;
        text-decoration: none;
        text-align: center;
        align-items: center;
        justify-content: center;
        align-items: center;
    }

    .navbar .logo img{
        height: 100%;
    }

    .navbar .optionsNavbar{
        display: none;
    }

    .navbar .optionsNavbar a{
        text-decoration: none;
        color: white;
        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: 400px;
        font-size: 11pt;
        letter-spacing: 1px;
    }

    .slogan{
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
        align-content: center;
        margin-top: 140px;
        color: white;
    }

    .slogan .textoSlogan{
        width: 88%;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .slogan .textoSlogan .sloganMain{
        width: 100%;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;

        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: 400px;
        font-size: 20pt;
        letter-spacing: 1px;
        text-shadow: -17px 20px 54px rgba(76, 45, 126, 0.33);

        filter: drop-shadow(0px 13px 25px rgba(76, 45, 126, 0.29));
    }

    .slogan .textoSlogan .subSlogan{
        width: 80%;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        margin-top: 2%;

        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: 400px;
        font-size: 12pt;
        letter-spacing: 1px;
        color: rgb(85, 56, 122);
    }

    .sloganButton {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 40px 0; /* Espaço para a sombra não cortar */
        margin-top: 3%;
    }

    .btn-gradient {
        display: inline-block;
        text-decoration: none;
        color: white;
        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: bolder;
        font-size: 20pt;
        letter-spacing: 2pt;

        /* 1. O Formato do Botão */
        padding: 30px 60px;
        border-radius: 50px; /* Deixa as pontas totalmente redondas */

        /* 2. O Gradiente (Ajustado pelas cores da imagem) */
        background: linear-gradient(to right, #9db4ff, #ca9eff, #ff9eeb);

        /* 3. A Sombra (Box Shadow) 
        Usando os parâmetros do seu Photoshop anterior:
        Distância 13px, Tamanho 57px, Opacidade 29%
        */
        box-shadow: 0px 13px 45px rgba(76, 45, 126, 0.35);

        /* Transição suave para o hover */
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    /* Efeito ao passar o mouse */
    .btn-gradient:hover {
        transform: translateY(-2px);
        box-shadow: 0px 15px 50px rgba(76, 45, 126, 0.45);
    }

    .servicos{
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
        margin-top: 15%;
    }

    .contentServicos{
        width: 80%;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .topicServicos{
        background-color: rgb(85, 56, 122);
        border-radius: 50px;
        display: flex;
        width: 60%;
        text-align: center;
        align-items: center;
        justify-content: center;
        padding: 2%;

        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: bolder;
        font-size: 16pt;
        letter-spacing: 3pt;
        color: white;
    }


    .contentCards{
        display: flex;
        flex-direction: column;
        width: 100%;
        text-align: center;
        align-items: center;
        justify-content: center;
        margin-top: 3%;
    }

    .cardsServicos{
        width: 95%;
        margin-top: 3%;
        display: flex;
        text-align: center;
        align-items: center;
        color: white;
    }

    .card{
        background-color: rgba(85, 56, 122, 0.5);
        border-radius: 80px;
        padding: 1%;
        padding-top: 2%;
        padding-bottom: 4%;
        display: flex;
        width: 80%;
        height: 50vh;
        text-align: center;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .tituloCard{
        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: bolder;
        font-size: 20pt;
        letter-spacing: 3pt;
        display: flex;
        width: 95%;
        text-align: center;
        align-items: center;
        justify-content: center;

    }

    .textoCard{
        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: 400px;
        font-size: 15pt;
        display: flex;
        width: 80%;
        text-align: center;
        align-items: center;
        justify-content: center;
        margin-top: 2%;
    }


    .card2{
        background-color: rgba(255, 255, 255, 0.9);
        color: rgb(85, 56, 122);
        border-radius: 80px;
        padding: 1%;
        padding-top: 2%;
        padding-bottom: 4%;
        display: flex;
        width: 80%;
        height: 50vh;
        margin-top: 2%;
        text-align: center;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .tituloCard2{
        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: bolder;
        font-size: 20pt;
        letter-spacing: 3pt;
        display: flex;
        width: 95%;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .textoCard2{
        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: 400px;
        font-size: 15pt;
        display: flex;
        width: 80%;
        text-align: center;
        align-items: center;
        justify-content: center;
        margin-top: 2%;
    }

    .sobreNos{
        margin-top: 5%;
        color: white;
        display: flex;
        width: 100%;
        text-align: left;
        align-items: center;
        justify-content: center;
    }

    .contentSobreNos{
        width: 95%;
        display: flex;
        flex-direction: column;
    }

    .contentSobreNos h1{
        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: bolder;
        font-size: 40pt;
        letter-spacing: 3pt;
        display: flex;
        width: 100%;
    }

    .contentSobreNos p{
        display: flex;
        width: 100%;
        font-family: "Special Gothic Expanded One", sans-serif;
        font-weight: 400px;
        font-size: 20pt;
        margin-top: 5px;
    }

    .whatsButton{
        position: fixed;
        top: 85vh;
        left: 81vw;
    }

    .whatsButton a{
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
    }
}