#principal-banner{
    height: 500px;
    color: #fff;
}

#principal-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/banner2.jpg'); 
  background-position: center; 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  z-index: -1;
  height: 500px;
}

a { text-decoration: none; }

#principal-banner h1{
    margin-bottom: 0px; 
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
}

#principal-banner p{
    margin-top: 10px; 
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
}


#principal-banner-basico{
    height: 500px;
    color: #fff;
}

#principal-banner-basico::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/banner-basico.jpg'); 
  background-position: center; 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  z-index: -1;
  height: 500px;
}

#principal-banner-basico h1{
    margin-bottom: 0px; 
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
}

#principal-banner-basico p{
    margin-top: 10px; 
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
}


#principal-banner-higienizacao{
    height: 500px;
    color: #fff;
}

#principal-banner-higienizacao::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/banner-higienizacao.jpg'); 
  background-position: center; 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  z-index: -1;
  height: 500px;
}

#principal-banner-higienizacao h1{
    margin-bottom: 0px; 
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
}

#principal-banner-higienizacao p{
    margin-top: 10px; 
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
}


#principal-banner-polimento{
    background-image: url('../img/banner-polimento.jpg'); 
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
    color: #fff;
}

#principal-banner-polimento h1{
    margin-bottom: 0px; 
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
}

#principal-banner-polimento p{
    margin-top: 10px; 
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
}


#principal-banner-vitrificacao{
    background-image: url('../img/banner-vidrificacao.jpg'); 
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
    color: #fff;
}

#principal-banner-vitrificacao h1{
    margin-bottom: 0px; 
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
}

#principal-banner-vitrificacao p{
    margin-top: 10px; 
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
}


#btn_zap{
    font-family: 'Montserrat', sans-serif;
    width: 200px;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    background-image: linear-gradient(180deg, #25D366 0%, #0C8138 100%);
    font-size: 17px;
    cursor:pointer;
    color: #fff;
}

h2{
    margin-top: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    text-align: center;
    color: #fff;
    line-height: 30px;
}

#principal-cards{
    justify-content: center;display: flex;width: 100%;
}

.card{
    float: left;border: 1px solid #454545;border-radius: 10px;margin-right: 20px;
}

.card img{
    border-top-left-radius: 10px;border-top-right-radius: 10px;width: 380px;
}

.card h3{ font-family: 'Montserrat', sans-serif;color: #fff;margin-top: 0px; }
.card p { font-family: 'Montserrat', sans-serif;color: #fff;margin-top: 0px;margin-bottom: 5px; }

.saiba-mais{
    font-family: 'Montserrat', sans-serif;
    width: 100px;
    text-align: center;
    padding: 6px;
    border-radius: 10px;
    background: #23242b;
    font-size: 15px;
    color:#fff;
    border: 1px solid #393939;
    cursor:pointer;
}

#principal-diferenciais{
    background-image: url('../img/diferenciais.jpg'); 
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
    color: #fff;
    float: left;
    width: 100%;
    margin-top: 100px;
}

#principal-diferenciais h1{
    margin-bottom: 0px; 
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
}

#principal-diferenciais p{
    margin-top: 10px;font-family: 'Montserrat', sans-serif;font-size: 20px;margin-bottom: 0px;
}

#agendar{
    font-family: 'Montserrat', sans-serif;
    width: 150px;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    background-image: linear-gradient(180deg, #25D366 0%, #0C8138 100%);
    font-size: 17px;
    cursor:pointer;
}

#sub-banner{ padding: 100px 150px 0px; }
#sub-diferenciais{ padding: 100px 150px 0px; }

#principal-sobre{ padding-left: 160px;padding-right: 160px;color:#fff;font-family: 'Montserrat', sans-serif; }

@media (min-width: 0px) and (max-width: 484px) {

    #principal-sobre{ padding: 10px; }
    #principal-sobre li{ font-size: 14px; }

    #principal-cards{ display:block!important; }
    #sub-banner{ padding: 100px 10px 0px; }
    #sub-banner img{ width: 300px; } 

    #principal-banner{ height: 350px; }
    #principal-banner::before { opacity: 0.3; height: 350px; }
    #principal-banner h1{ font-size: 17px; }
    #principal-banner p{ font-size: 13px; }

    #principal-banner-basico{ height: 380px; }
    #principal-banner-basico::before { opacity: 0.3; height: 380px; }
    #principal-banner-basico h1{ font-size: 17px; }
    #principal-banner-basico p{ font-size: 13px; }

    #principal-banner-higienizacao{ height: 400px; }
    #principal-banner-higienizacao::before { opacity: 0.3; height: 400px; }
    #principal-banner-higienizacao h1{ font-size: 17px; }
    #principal-banner-higienizacao p{ font-size: 13px; }

    #principal-banner-vitrificacao{ height: 400px; }
    #principal-banner-vitrificacao h1{ font-size: 17px; }
    #principal-banner-vitrificacao p{ font-size: 13px; }

    

    #sub-diferenciais{ padding: 10px }

    h2{ font-size: 30px; }

    #sub-cards{ padding: 10px; }
    .card{ width: 100%; margin-right: 0px; margin-bottom: 10px; }
    .card img{ width: 100%; }

    #principal-diferenciais{ margin-top: 10px; }
    #principal-diferenciais p{ font-size: 15px; }
    
}

@media (min-width: 484px) and (max-width: 650px) {

    #principal-cards{ display:block!important; float: left; }
    #sub-banner{ padding: 100px 10px 0px; }
    #sub-banner img{ width: 300px; } 
    #principal-banner h1{ font-size: 22px; }
    #principal-banner p{ font-size: 16px; }
    #sub-diferenciais{ padding: 10px }

    #principal-sobre{ padding: 10px; }
    #principal-sobre li{ font-size: 14px; }

    h2{ font-size: 30px; }

    #principal-banner-basico{ height: 380px; }
    #principal-banner-basico::before { opacity: 0.3; height: 380px; }
    #principal-banner-basico h1{ font-size: 17px; }
    #principal-banner-basico p{ font-size: 13px; }

    #principal-banner-higienizacao{ height: 400px; }
    #principal-banner-higienizacao::before { opacity: 0.3; height: 400px; }
    #principal-banner-higienizacao h1{ font-size: 17px; }
    #principal-banner-higienizacao p{ font-size: 13px; }

    #principal-banner-vitrificacao{ height: 400px; }
    #principal-banner-vitrificacao h1{ font-size: 20px; }
    #principal-banner-vitrificacao p{ font-size: 13px; }
    

    #principal-banner{ height: 350px; }
    #principal-banner::before { opacity: 0.3; height: 350px; }

    #sub-cards{ float: left; padding: 10px; }
    .card{ width: 49%; margin-right: 0px; margin-bottom: 10px; }
    .card img{ width: 100%; }

    #principal-diferenciais{ margin-top: 10px; }
    #principal-diferenciais p{ font-size: 15px; }

    .card1{ margin-right: 1%; }
    .card3{ margin-right: 1%; }
    .card h3{ font-size: 14px; }
    .card p{ font-size: 10px; }
    
}

@media (min-width: 650px) and (max-width: 800px) {

    #principal-cards{ display:block!important; float: left; }
    #sub-banner{ padding: 100px 10px 0px; }
    #sub-banner img{ width: 300px; } 
    #principal-banner h1{ font-size: 28px; }
    #principal-banner p{ font-size: 20px; }
    #sub-diferenciais{ padding: 10px }

    #principal-sobre{ padding: 10px; }
    #principal-sobre li{ font-size: 14px; }

    h2{ font-size: 30px; }

    #principal-banner-basico{ height: 380px; }
    #principal-banner-basico::before { opacity: 0.3; height: 380px; }
    #principal-banner-basico h1{ font-size: 30px; }
    #principal-banner-basico p{ font-size: 20px; }

    #principal-banner-higienizacao{ height: 400px; }
    #principal-banner-higienizacao::before { opacity: 0.3; height: 400px; }
    #principal-banner-higienizacao h1{ font-size: 30px; }
    #principal-banner-higienizacao p{ font-size: 20px; }

    #principal-banner-vitrificacao{ height: 400px; }
    #principal-banner-vitrificacao h1{ font-size: 30px; }
    #principal-banner-vitrificacao p{ font-size: 13px; }

    #principal-banner{ height: 350px; }
    #principal-banner::before { opacity: 0.3; height: 350px; }

    #sub-cards{ float: left; padding: 10px; }
    .card{ width: 49%; margin-right: 0px; margin-bottom: 10px; }
    .card img{ width: 100%; }

    #principal-diferenciais{ margin-top: 10px; }
    #principal-diferenciais p{ font-size: 15px; }

    .card1{ margin-right: 1%; }
    .card3{ margin-right: 1%; }
    .card h3{ font-size: 20px; }
    .card p{ font-size: 14px; }
    
}

@media (min-width: 800px) and (max-width: 1000px) {

    #principal-cards{ display:block!important; float: left; }
    #sub-banner{ padding: 100px 10px 0px; }
    #sub-banner img{ width: 300px; } 
    #principal-banner h1{ font-size: 35px; }
    #principal-banner p{ font-size: 22px; }
    #sub-diferenciais{ padding: 10px }

    #principal-sobre{ padding: 10px; }
    #principal-sobre li{ font-size: 14px; }

    h2{ font-size: 30px; }

    #principal-banner-basico{ height: 380px; }
    #principal-banner-basico::before { opacity: 0.3; height: 380px; }
    #principal-banner-basico h1{ font-size: 30px; }
    #principal-banner-basico p{ font-size: 20px; }

    #principal-banner-higienizacao{ height: 400px; }
    #principal-banner-higienizacao::before { opacity: 0.3; height: 400px; }
    #principal-banner-higienizacao h1{ font-size: 30px; }
    #principal-banner-higienizacao p{ font-size: 20px; }

    #principal-banner-vitrificacao{ height: 400px; }

    #principal-banner{ height: 450px; }
    #principal-banner::before { opacity: 0.3; height: 450px; }

    #sub-cards{ float: left; padding: 10px; }
    .card{ width: 49%; margin-right: 0px; margin-bottom: 10px; }
    .card img{ width: 100%; }

    #principal-diferenciais{ margin-top: 10px; }
    #principal-diferenciais p{ font-size: 15px; }

    .card1{ margin-right: 1%; }
    .card3{ margin-right: 1%; }
    .card h3{ font-size: 23px; }
    .card p{ font-size: 16px; }
    
}

@media (min-width: 1000px) and (max-width: 1100px) {
    #sub-cards{ float: left; padding: 10px; }
    .card{ width: 24%; margin-right: 0px; margin-bottom: 10px; }
    .card img{ width: 100%; }
    .card1{ margin-right: 1%; }
    .card2{ margin-right: 1%; }
    .card3{ margin-right: 1%; }
    .card h3{ font-size: 16px; }
    .card p{ font-size: 10px; }
    .card img{ width: 100%; }
    .saiba-mais{ width: 70px; font-size: 12px; }
}

@media (min-width: 1100px) and (max-width: 1200px) {
    #sub-cards{ float: left; padding: 10px; }
    .card{ width: 24%; margin-right: 0px; margin-bottom: 10px; }
    .card img{ width: 100%; }
    .card1{ margin-right: 1%; }
    .card2{ margin-right: 1%; }
    .card3{ margin-right: 1%; }
    .card h3{ font-size: 18px; }
    .card p{ font-size: 11px; }
    .card img{ width: 100%; }
    .saiba-mais{ width: 70px; font-size: 12px; }
}

@media (min-width: 1200px) and (max-width: 1300px) {
    #sub-cards{ float: left; padding: 10px; }
    .card{ width: 24%; margin-right: 0px; margin-bottom: 10px; }
    .card img{ width: 100%; }
    .card1{ margin-right: 1%; }
    .card2{ margin-right: 1%; }
    .card3{ margin-right: 1%; }
    .card h3{ font-size: 20px; }
    .card p{ font-size: 13px; }
    .card img{ width: 100%; }
    .saiba-mais{ width: 90px; font-size: 14px; }
}

@media (min-width: 1300px) and (max-width: 1400px) {
    #sub-cards{ float: left; padding: 10px; }
    .card{ width: 24%; margin-right: 0px; margin-bottom: 10px; }
    .card img{ width: 100%; }
    .card1{ margin-right: 1%; }
    .card2{ margin-right: 1%; }
    .card3{ margin-right: 1%; }
    .card h3{ font-size: 22px; }
    .card p{ font-size: 14px; }
    .card img{ width: 100%; }
    .saiba-mais{ width: 100px; font-size: 15px; }
}

@media (min-width: 1400px) and (max-width: 1608px) {
    #sub-cards{ float: left; padding: 10px; }
    .card{ width: 24%; margin-right: 0px; margin-bottom: 10px; }
    .card img{ width: 100%; }
    .card1{ margin-right: 1%; }
    .card2{ margin-right: 1%; }
    .card3{ margin-right: 1%; }
    .card h3{ font-size: 24px; }
    .card p{ font-size: 15px; }
    .card img{ width: 100%; }
    .saiba-mais{ width: 100px; font-size: 15px; }
}