@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
scroll-behavior: smooth;
}
:root {
--clr: #F87530
}
#preloader {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: white;
z-index: 99;
display: grid;
place-items: center;
}
#preloader img {
width: 100%;
max-width: 150px;
}
#whats {
position: fixed;
bottom: 20px;
left: 20px;
color: white;
background-color: #25D366;
border-radius: 50%;
display: grid;
place-items: center;
height: 60px;
width: 60px;
font-size: 27px;
text-decoration: none;
box-shadow: 0 0px 10px rgba(0, 0, 0, .15);
}
.wpp-btn {
display: block;
width: fit-content;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
background-color: #25D366;
color: white;
padding: 10px 30px;
transition: .3s ease-in-out;
border-radius: 12px;
}
.wpp-btn:hover,
.wpp-btn:focus-visible {
transform: scale(1.05);
}
.wpp-btn span {
font-weight: 800;
}
.wpp-btn i {
margin-right: .5em;
}
.btn {
cursor: pointer;
border: none;
outline: none;
display: block;
font-size: 14px;
font-weight: 600;
padding: 10px 30px;
width: fit-content;
background-color: white;
color: black;
transition: .3s ease-in-out;
text-decoration: none;
}
.btn:hover,
.btn:focus-visible {
background-color: #111;
color: white;
}
body {
font-family: "Montserrat", sans-serif;
font-weight: 400;
}
section {
padding: 80px 0;
}
section h3 {
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
margin-bottom: .3em;
}
section h2 {
text-transform: uppercase;
font-size: 28px;
font-weight: 800;
}
section p {
font-size: 16px;
line-height: 1.5;
}
header {
padding: 15px 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
background-color: white; box-shadow: 0 0px 10px rgba(0, 0, 0, .15);
}
header #menu-open {
text-decoration: none;
background-color: var(--clr);
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
color: white;
display: none;
}
@media (max-width: 991px) {
header #menu-open {
display: flex;
}
header #menu {
display: block;
width: 100%;
}
header #menu ul {
margin-top: 1em;
flex-direction: column;
align-items: start;
gap: 10px;
}
header #menu #contact {
justify-content: start;
margin-top: 1em;
}
}
@media (min-width: 992px) {
header .container {
display: flex !important;
justify-content: space-between !important;
}
header .container>div {
flex-grow: 1;
}
}
header>div div {
display: flex;
align-items: center;
gap: 20px;
justify-content: space-between;
}
header .logo {
max-width: 100px;
}
header .logo_vendedor {
max-width: 80px;
}
header ul {
list-style-type: none;
display: flex;
gap: 20px;
align-items: center;
}
header ul li a {
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
text-decoration: none;
color: black;
}
header ul li a.wpp-btn {
border-radius: 20px;
padding: 5px 15px;
transform: none !important;
font-size: 13px !important;
padding-block: 0;
height: 30px;
display: flex;
align-items: center;
}
header ul li.socials {
display: flex;
gap: 10px;
}
header ul li.socials a {
background-color: var(--clr);
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin: 0 auto;
color: white;
}
header #contact {
display: flex;
align-items: center;
gap: 10px;
}
header #contact>div {
display: block;
}
header #contact i {
font-size: 24px;
color: var(--clr);
transform: scaleX(-1);
}
header #contact a {
text-decoration: none;
color: inherit;
}
header #contact h4 { font-size: 14px;
font-weight: 400;
}
header #contact h3 {
text-transform: uppercase;
font-size: 16px;
font-weight: 600;
}
#proteja {
padding: 70px 0;
background-size: 100%;
background-position: center 90%;
color: white;
margin-top: 90px;
position: relative;
z-index: 0;
}
#proteja #owl {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
#proteja #owl div:not(.owl-dots) {
height: 100%;
}
#proteja #owl .active img {
height: 100%;
width: 100%;
object-fit: cover;
animation: zoom 7s linear infinite;
}
#proteja #owl .banner1 {
object-position: center 95%;
}
#proteja #owl .banner2 {
object-position: right 75%;
}
@keyframes zoom {
from {
transform: scale(1)
}
to {
transform: scale(1.06);
}
}
#proteja h2 {
text-transform: uppercase;
font-weight: 600;
margin-bottom: 15px;
font-size: 16px;
}
#proteja h1 {
font-weight: 800;
margin-bottom: 10px;
font-size: 34px;
}
#proteja form {
width: 100%;
max-width: 450px;
margin-left: auto;
background-color: var(--clr);
display: flex;
flex-direction: column;
gap: 20px;
padding: 40px;
border-radius: 5px;
text-align: center;
}
@media (min-width: 768px) {
#proteja form {
margin-bottom: -120px;
}
}
@media (max-width: 767px) {
#proteja #owl .banner1, #proteja #owl .banner2 {
object-position: 30% top;
}
#proteja {
text-align: center;
padding: 0;
background-image: none;
overflow: hidden;
}
#proteja #owl {
height: 55%;
}
#proteja .container {
max-width: none;
padding: 0;
}
#proteja .wpp-btn {
margin: 0 auto;
}
#proteja form {
border-radius: 0;
max-width: none;
}
#proteja .row>div:first-child {
padding: 200px 20px;
padding-bottom: 100px;
}
#proteja .row>div:nth-child(2) {
margin-top: 0;
padding: 0;
}
}
@media (max-width: 425px) {
#proteja h1 {
font-size: 27px;
}
#proteja h2 {
font-size: 14px;
}
}
#proteja form h1 {
color: white;
margin-bottom: 0px;    
}
#proteja form>div { }
#proteja form input {
width: 100%;
border: none;
outline: none;
background-color: rgba(255, 255, 255, .3);
padding: 10px;
color: white;
margin-bottom: 15px;
}
#proteja form input::placeholder {
color: white;
}
#proteja form .btn {
margin: 0 auto;
width: 100%;
background-color: #FFF;
color: #000;
text-transform: uppercase;
}
#coberturas {
text-align: center;
font-size: 14px;
}
#coberturas p {
margin-top: 1em;
margin-bottom: 1em;
}
#coberturas .wpp-btn {
margin: 0 auto;
margin-bottom: 2em;
}
#coberturas .cobertura {
text-align: center;
}
#coberturas .cobertura h4 {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
position: relative;
}
#coberturas .cobertura h4::after {
position: absolute;
content: '';
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
height: 2px;
width: 50px;
background: var(--clr);
}
#coberturas .cobertura i {
background-color: var(--clr);
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin: 0 auto;
color: white;
font-size: 24px;
margin-bottom: 10px;
}
#cta {
color: white;
background-color: var(--clr);
text-align: center;
padding: 40px 0;
}
#cta .btn {
margin: 0 auto;
margin-top: 30px;
}
#cta .btn span {
font-weight: 800;
}
#cta h2 {
font-weight: 500;
position: relative;
}
#cta h2::after {
position: absolute;
content: '';
left: 50%;
top: 100%;
transform: translateX(-50%) translateY(10px);
width: 50px;
height: 2px;
background-color: white;
}
#cta h2 b {
font-weight: 700;
}
#cta h3 {
margin-bottom: 0;
}
#cta h3 span {
font-weight: 800;
}
#cta .ctais {
margin-top: 40px;
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
@media (max-width: 767px) {
#cta .ctais {
justify-content: space-around;
}
}
#cta .ctais .ctai {
display: flex;
gap: 10px;
align-items: center;
text-align: left;
}
#cta .ctais .ctai i {
font-size: 21px;
}
#categorias {
font-size: 14px;
}
#categorias p {
margin-top: 1em;
margin-bottom: 1em;
}
#categorias .categorias {
display: flex;
gap: 30px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
@media (max-width: 991px) {
#categorias .categorias {
justify-content: space-around;
}
}
#categorias .categoria {
text-align: center;
flex: 0 0 30%;
}
#categorias .categoria h4 {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
position: relative;
}
#categorias .categoria h4::after {
position: absolute;
content: '';
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
height: 2px;
width: 50px;
background: var(--clr);
}
#categorias .categoria i {
background-color: #111;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
color: white;
font-size: 24px;
margin-bottom: 10px;
}
#sobre {
background-color: var(--clr);
color: white;
padding: 0;
}
#sobre>div>div>div {
position: relative;
}
#sobre img {
width: 100%;
height: 100%;
top: 0;
right: 0;
object-fit: cover;
object-position: top left;
}
@media (min-width: 992px) {
#sobre img {
position: absolute;
width: calc(100% + 150px);
}
#sobre .col-lg-6 {
padding-left: 40px;
}
}
@media (max-width: 991px) {
#sobre {
overflow: hidden;
}
#sobre .col-lg-6:first-child {
padding: 0 !important;
}
#sobre img {
width: calc(100% + 280px);
margin-left: -140px
}
#categorias {
text-align: center;
}
#categorias .wpp-btn {
margin: 0 auto;
}
#categorias .categorias {
margin-top: 2em;
}
}
@media (max-width: 768px) {
#sobre img {
width: calc(100% + 200px);
margin-left: -100px
}
}
#sobre .col-lg-6 {
padding-block: 80px;
}
#sobre p {
text-align: justify;
margin: 1em 0;
}
footer {
background-color: #111111;
color: white;
padding: 10px 0;
text-align: center;
}
footer .footer {
padding: 40px 0;
}
footer img {
filter: brightness(0) invert(1);
max-width: 100px;
margin-bottom: 1em;
}
footer p {
font-size: 14px;
font-weight: 600px;
}
footer a {
text-decoration: none;
color: white;
}
footer i {
margin-right: 5px;
}
footer .copyright {
padding-bottom: 40px;
}
a:link, a:active, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}