@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap');



html{
    scroll-behavior: smooth;
}

a{text-decoration: none !important;}

body{font-family: 'Montserrat', sans-serif;}

.container-fluid{padding: 0;}

a.animated_easy{ background-image: linear-gradient(to right, #730db0, #6080ff); color: #fff; font-weight: 600; box-shadow: 0px 0px 0px 0px #6177f8; display: block; height: 34px; width: 34px; text-align: center; padding-top: 3px; border-radius: 100px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
a.animated_easy:hover{box-shadow: 0px 0px 10px 3px #6177f8;}

.animacao, #wtsapp a, .socialmidia a{
-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

header{ position: absolute; z-index: 3; width: 100%;}

.menudesktop{padding-top: 15px;}

header .navbar-head, header .navbarmenu-desk{text-align: right;}
header .telefones a{color: #fff; font-weight: 600; padding: 5px 5px 5px 26px; background-image: url("imgs/icon-h-phone.png"); background-repeat: no-repeat; background-position: left; margin-left: 37px; font-size: 1.2rem;}
header a.menuzera{ padding-right: 0 !important;}
header .navbarmenudesk{padding-top: 15px;}
header .navbarmenudesk a{ color: #fff; text-transform: uppercase; padding: 10px 20px 30px 20px; font-weight: 600; font-size: 1.3rem; margin-left: -4px; letter-spacing: 1px; background-image: url("imgs/bg-menu.png"); background-repeat: no-repeat; background-position: bottom left; -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;}
header .navbarmenudesk a:hover{ color: #6a80f0; background-position: bottom right}

header img{width: 60%;}

#wtsapp{ position: fixed; z-index: 999; bottom: 6%; right: 6%;}
#wtsapp a{ color: #40c951; background: #fff; display: block; font-size: 4rem; text-align: right; padding: 9px 12px; border-radius: 100px; box-shadow: 2px 2px 13px #00000047; height: 56px; width: 56px; z-index: 1; position: absolute; bottom: 0; right: 0;}
#wtsapp a:hover{ color: #fff; background: #40c951; width: 190px;}

#tooltiptext { font-family: 'Montserrat', sans-serif; color: #fff; text-align: left; padding: 5px 0; position: absolute; z-index: 14; right: 58px; letter-spacing: 0.5px; bottom: 15px; font-size: 1.5rem;  transition: all 1s ease-in-out;}

#banner {color: #fff; text-align: center;}
#banner h1{ text-transform: uppercase; padding: 0 0 25px 0; margin: 0 0 10px 0; font-size: 3rem; font-weight: 800; background-image: url("imgs/bg-h1-bnn.png"); background-repeat: no-repeat; background-position: center bottom;}
#banner p{font-size: 2rem; letter-spacing: 1px; padding-bottom: 30px;}
#banner .contbanner{ z-index: 15; width: 50%; margin-left: 25%; position: absolute; bottom: 25%;}
/* #banner .banner01, .banner02, .banner03{ height: 608px; background-repeat: no-repeat; background-position: center;} */
/* #banner .banner01{background-image: url("./imgs/banner-01.avif");} */
/* #banner .banner02{background-image: url("imgs/banner-02.avif");}
#banner .banner03{background-image: url("imgs/banner-03.avif");} */
#banner a.saibamais{ opacity: 0.9; background-image: linear-gradient(to right, #730db0, #6080ff); color: #fff; font-weight: 600; padding: 13px 50px; text-transform: uppercase; border-radius: 50px; box-shadow: 0px 0px 0px 0px #6177f8;  -webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
#banner a.saibamais:hover{ opacity: 1; box-shadow: 0px 0px 10px 3px #6177f8;}
#banner .carousel-indicators{z-index: 2;}

#destaques {padding: 100px 0;}
#destaques .boxs{height: 300px; text-align: center;  box-shadow: 0px 0px 13px 0px #00000033; border-radius: 8px; padding: 40px 20px; background-image: url("imgs/bg-destaque.jpg"); background-position: top; background-repeat: no-repeat; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}
#destaques .boxson{background-position: bottom; box-shadow: 0px 4px 6px 0px #00000070}
#destaques .boxson img{ padding: 10px; filter: brightness(20);}
#destaques .boxson h2{color: #fff;}
#destaques .boxson p{color: #fff;}

.entraupoff{opacity: 0;}
.entraupon01, .entraupon02, .entraupon03, .entraupon04{ animation: mymove 1s; animation-fill-mode: forwards;}
.entraupon02{ animation-delay: 0.3s;}
.entraupon03{ animation-delay: 0.7s;}
.entraupon04{ animation-delay: 1s;}        
@keyframes mymove{
    from {margin-top: 100px; opacity: 0;}
    to {margin-top: 0px; opacity: 1;}
}

.entraoff{opacity: 0;}
.entraleft01{ animation: mymove02 1.5s; animation-fill-mode: forwards;}  
@keyframes mymove02{
    from {right: 100px; opacity: 0;}
    to {right: 0px; opacity: 1;}
}
.entraright{ animation: mymove03 1.5s; animation-fill-mode: forwards;}  
@keyframes mymove03{
    from {left: 100px; opacity: 0;}
    to {left: 0px; opacity: 1;}
}


#destaques img{ width: 75px; padding: 0; filter: brightness(1);}
#destaques h2{ text-transform: uppercase; font-weight: 700; font-size: 1.4rem; letter-spacing: 0.5px; color: #6a10a1;}
#destaques p{font-size: 1.2rem; color: #4e4e4e;}

#sobrehome{background-color: #ededed; padding: 50px 0;}
#sobrehome h1{color: #6315ab; font-weight: 800; padding-top: 50px;}
#sobrehome p{text-align: justify; font-weight: 400; font-size: 2rem; letter-spacing: 0.5px; line-height: 3rem; padding: 20px 90px 20px 0px;}

#sobrehome span, .sobrepag span{ display: block;padding: 10px;margin: 5px 0;background: #dfdfdf;border-radius: 7px;}
#sobrehome ul, .sobrepag ul{ background: #dfdfdf; border-radius: 7px; padding: 10px 0px 12px 40px; font-size: 1.3rem; font-weight: 600; margin: -35px 0 -10px 0;}

#frase{background-image: url("imgs/home-prlx.jpg"); background-position: center; background-attachment: fixed; background-size: cover; text-align: center; padding: 120px 0;}
#frase q{color: #fff; font-size: 4.3rem; font-weight: 700; font-style: italic;}

footer{background-image: url("imgs/bg-rodape.jpg"); background-position: center; background-repeat: no-repeat;}
footer .container-fluid{ padding: 40px 0px;}

.assinatura img{ float: left; padding: 0px 20px 0px 0px; width: 110px;}
.assinatura p{ color: #fff; font-weight: 600; padding-top: 15px;}
.assinatura span{font-size: 1.2rem;}

footer h4{color: #fff; font-weight: 600; font-size: 1.5rem;}

footer .socialmidia a{ color: #6c10a0; font-size: 2.4rem; border-style: solid; border-width: 2.4px; border-radius: 8px; display: block; width: 40px; height: 40px; float: left; text-align: center; padding-top: 5px; margin-right: 6px; border-color: #6c10a0;}
footer .socialmidia a:hover{ background: #6c10a0; color: #fff;}

footer input[type=e-mail]{border-style: solid; border-width: 2.4px; border-radius: 8px; border-color: #6c10a0; background: none; padding: 7px;  width: 70%;  float: left;  margin-right: 5px;}

footer ::-webkit-input-placeholder { /* Edge */ color: #a94ddf; font-style: italic; font-size: 1.2rem;}  
footer :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #a94ddf; font-style: italic; font-size: 1.2rem;}
footer ::placeholder {color: #a94ddf; font-style: italic; font-size: 1.2rem;}
footer form button{font-size: 24px; background: #6c10a0; color: #fff; border-width: 0; border-radius: 7px; padding: 6px 7px 0 7px; float: left;}

#introducao-paginas{ background-attachment: fixed; background-size: cover; background-position: center; padding: 160px 0 0px 0;}
#introducao-paginas h1{ color: #fff; font-weight: 600;}
#introducao-paginas p{ color: #fff; letter-spacing: 0.5px; font-size: 1.6rem; line-height: 2.6rem; padding-bottom: 10px;}
#introducao-paginas hr{ width: 110px; text-align: left; left: 0; margin: 30px 0px 30px 3px;}
#introducao-paginas .bg-faixa{background-image: url("imgs/faixa.png"); background-repeat: no-repeat; background-position: center top; height: 169px;}
#introducao-paginas img{width: 400px;}
#introducao-paginas span{ float: left; position: absolute; padding: 4px 10px 10px 10px; color: #ffffff; text-shadow: 1px 2px 2px #000000ad;}


.servicosbg{background-image: url("imgs/bg-qs.jpg");}

#servicos .container-fluid{padding: 80px 0;}
#servicos h2{ font-size: 2.5rem; text-transform: uppercase; font-weight: 700; color: #6f23bf; background-image: url("imgs/bg-menu.png"); background-repeat: repeat-y; background-position: center left; background-position-x: -245px; padding-left: 25px;margin-bottom: 30px;}

#servicos ul{list-style: none; padding-left: 25px;}
#servicos li {padding: 7px 0; border-bottom-style: solid; border-width: 1px; border-color: #6f23bf36; }
#servicos img{ box-shadow: 0px 0px 7px 2px #0000002e; border-radius: 4px;}
#servicos .bg02{background-color: #ededed;}

#sobrehome .material-icons, #introducao-paginas .material-icons{ font-size: 3rem; text-shadow: 2px 2px 3px #00000057;}

#contatos h3{ color: #d8a2ff; font-size: 2rem; font-weight: 600;}
#pagcontato{    padding-bottom: 80px;}
#pagcontato .fa{ background: #6f23bf; font-size: 2rem; display: block; width: 28px; height: 28px; color: #fff; text-shadow: 2px 2px 3px #00000057; text-align: center; padding-top: 5px; border-radius: 4px; float: left; margin-right: 4px;}
#pagcontato input, #pagcontato select, #pagcontato textarea{background: none;border-width: 1px;border-style: solid;border-color: #ffffff78;border-radius: 4px;padding: 5px;width: 49%; margin-bottom: 22px;color: #fff;}
#pagcontato textarea{width: 99%;}
#pagcontato ::placeholder, #pagcontato label{ color: #d8a2ff; font-size: 1.2rem; font-style: italic;}
#pagcontato label{position: absolute; margin-top: -17px; font-weight: 100;}
#pagcontato option {background: #7120bda2;}
#pagcontato .enviarsub{ background: #fff; margin-top: -6px; color: #7212b3; text-transform: uppercase; letter-spacing: 2px; font-weight: 800; font-size: 1.2rem; transition: all 0.4s ease-in-out; border: 0;}
#pagcontato .enviarsub:hover{ background: #7212b3; color: #fff;}

#mapa {padding: 80px 0;}
#mapa iframe{ box-shadow: 0 0 12px #00000042;}

.menuhamburger{ float: right; font-size: 5rem; margin: 10px; color: linear-gradient(to right, #730db0, #6080ff);}
.overlay { height: 0%; width: 100%; position: fixed; z-index: 16; top: 0; left: 0;  background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(0,0,0,0.25);

overflow-y: hidden; transition: 0.5s;  }
.overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px;}
.overlay a { padding: 12px 8px; text-decoration: none; font-size: 21px; color: #fff; display: block; transition: 0.3s; text-transform: uppercase; font-weight: 400; letter-spacing: 1px; }
.overlay a:hover, .overlay a:focus { color: #f1f1f1;}
.overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px;}

.menuhamburger{ float: right; color: #fff; font-size: 4rem; margin: 10px; background: linear-gradient(to right, #a12eef 0%, #b2bcf3 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

@media screen and (max-height: 450px) { .overlay {overflow-y: auto;} .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; }
}

@media screen and (max-width: 1499px) and (min-width: 1024px){
    #banner .carousel-inner>.item>img{
        max-width: 140%;
        width: 140%;
    }
}

@media screen and (max-width: 1140px) {
    header .navbar-head {padding-right: 0; }
  }
  @media screen and (max-width: 1376px) {
    header .navbarmenudesk a{padding: 10px 15px 30px 15px;   }
    #destaques .col-md-8{  width: 85%;  margin-left: 7.5%;   }
  }


/* MOBILE CSS >>>>>>>>>> */

@media only screen and (max-width: 799px) {
    #banner .carousel-inner>.item>img{max-width: 500%;}
    .menudesktop, .desktop{ display: none;}
    header img{ width: 100%; margin-top: 10px;}
    .navemob img{ margin-top: 15px;}
    #banner h1{ font-size: 2.3rem;}
    #banner p{ font-size: 1.5rem; letter-spacing: 0;}
    #banner a.saibamais{ font-size: 1.2rem;}
    #banner .contbanner{ width: 65%; margin-left: 17%;}
    #destaques .boxs{ margin-bottom: 30px; height: auto;}
    footer{ background-repeat: repeat; background-position: left;}
    footer .socialmidia{ margin: 15px 0;}
    #pagcontato input, #pagcontato select, #pagcontato textarea{ width: 100%;}
    #introducao-paginas p{ font-size: 2rem; }      
}


@media screen and (min-width: 800px) {
    .mobile{ display: none;}
}