* {
    margin: 0;
    padding: 0;
    box-sizing: 0;
}

html {
    scroll-behavior: smooth;
}

body {font-family: Arial, Helvetica, sans-serif;}

a {text-decoration: none; color: darkblue;}

nav {margin: auto;}
nav ul li {color: white; font-weight: bold; display: inline-block; padding: 10px; text-align: center; cursor: pointer; margin: auto;}
nav ul li:hover {background-color: green;}

ul li {margin-left: 40px; line-height: 2rem;}

p {line-height: 2rem; text-align: justify; opacity: 0.9;}

input, textarea {padding: 10px; border-radius: 10px; font-size: 14px; border: 1px solid darkblue; width: 99%;}

button {padding: 15px 25px; border-radius: 25px; border: 0px; color: white; font-weight: bold; font-size: 1.1rem; cursor: pointer;}
button:hover {opacity: 0.8;}

h1 {color: white; font-size: 3.5rem; text-align: center; padding: 15px; font-family: 'Franklin Gothic Medium', 'Arial Narrow';}
.fraseTitulo {color: white; font-size: 1.5rem; text-align: center; padding: 10px;}

.fotoBanner {
    width: 730px; height: 450px; opacity: 0.8;
    border-radius: 10px;
    background-image: url('../img/banner.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.barraSuperior {position: sticky; top: 0; z-index: 9999999;}

.barraMenu {width: auto;}

.nomeBarraSuperior {font-size: 1.2rem;}
.fraseBarraSuperior {font-size: 0.9rem;}


.barra1Titulo {width: 40px; height: 20px; border-radius: 5px;}
.barra2Titulo {width: auto; height: 20px; border-radius: 5px;}
.barraTextoTitulo {font-weight: bold; font-size: 1.2rem;}


.invisivel {visibility: hidden;}


.btnVerde {background-color: green;}
.btnPreto {background-color: black;}



.sombraPreta {
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:    0px 0px 5px rgba(0, 0, 0, 0.4);
    box-shadow:         0px 0px 5px rgba(0, 0, 0, 0.4);
}


.colConteudo {width: 80%;}
.col2 {width: 47%;}
.col3 {width: 31%;}
.col4 {width: 20%;}

.ladoALado {display: inline-table; vertical-align: top;}

.linhaBranca {border: 0px; border: 1px solid white;}

.negrito {font-weight: bold;}

.margemAuto {margin: auto;}
.margem10 {margin: 10px;}
.margem20 {margin: 20px;}

.padding5 {padding: 5px;}
.padding10 {padding: 10px;}
.padding20 {padding: 20px;}

.bordaRedonda {border-radius: 10px;}

.branco {color: white;}
.verde {color: green;}

.centro {text-align: center;}
.esquerda {text-align: left;}

.fonteMaior {font-size: 1.2rem;}

.divHoverCinza:hover {background-color: #bcbcbc;}

.bordaCinza {border: 1px solid #bcbcbc;}



.voltarTopo {position: fixed; bottom: 70px; right: 15px; cursor: pointer; display: none;}
.btnWhatsApp {background-color: green; padding: 10px; border-radius: 40px; position: fixed; bottom: 10px; right: 10px; cursor: pointer;}



.fundoAzulEscuro {background-color: darkblue;}
.fundoBranco {background-color: white;}
.fundoVerde {background-color: green;}


.displayFlex {display: flex;}
.displayFlexCentro {align-items: center;}
.displayFlexJustCentro {justify-content: center;}
.displayFlexSpaceBetween {justify-content: space-between;}
.displayFlexSpaceAround {justify-content: space-around;}
.flexGrow1 {flex-grow: 1;}
.gap10 {gap: 10px;}
.gap80 {gap: 80px;}

.displayGrid3Col {
    display: grid; gap: 5px; box-sizing: 0;
}


.svg20 { height: 20px; width: 20px; text-align: center; vertical-align: top; }
.svg30 { height: 30px; width: 30px; text-align: center; vertical-align: top; }
.svg50 { height: 50px; width: 50px; text-align: center; vertical-align: top; }
.svg100 { height: 100px; width: 100px; text-align: center; vertical-align: top; }
.svgBranco { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }




/* Extra small (mobile) */
@media (min-width: 320px) {
    .colConteudo {width: 98%;}
    .displayGrid3Col {grid-template-columns: 100%;}
}

/* Small (landscape phones) */
@media (min-width: 576px) {
    .colConteudo {width: 98%;}
}

/* Medium (tablets) */
@media (min-width: 768px) {
    .colConteudo {width: 90%;}
    .displayGrid3Col {grid-template-columns: 50% 50%;}
}

/* Large (laptops) */
@media (min-width: 992px) {
    .colConteudo {width: 80%;}
    .displayGrid3Col {grid-template-columns: 33% 33% 33%;}
}

/* Extra large (desktops grandes) */
@media (min-width: 1200px) {
    .colConteudo {width: 80%;}
}

/* Extra extra large (telas enormes) */
@media (min-width: 1400px) {
    .colConteudo {width: 70%;}
}