:root {
    color-scheme: light;
    overflow-x: hidden
}
@import url("https://use.typekit.net/zdw0wby.css");

h1,h3,h5 {
    font-family: mundial, sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.1;
    margin: 0;
}
h2,h4,h6 {
    font-family: mundial, sans-serif;
    font-weight: 400;
    font-style: italic;
    line-height: 1.2;
    opacity: 0.6;
    margin: 0;
}
p {
    font-family: mundial, sans-serif;
    font-weight: 400;
    font-style: normal;
}
p span {
    font-family: mundial, sans-serif;
    font-weight: 400;
    font-style: italic;
    opacity: 0.6;
    font-size: 0.9em;
    line-height: 1em;
}
span {
    opacity: 0.6;
    font-size: 0.9em;
}
section.topo {
    background: url(../images/bg/br2w-bg-vasel.webp);
    background-position: center right;
    background-size: cover;
}
section.beneficios {
    background: url(../images/bg/ceu.webp);
    background-position: bottom center;
    background-size: cover, auto;
    background-repeat: no-repeat;
    background-color: #c5d8ed;
    top: -150px;
    padding-top: 100px;
    position: relative;
    color: #000000;
    margin-bottom: -150px;
    background-attachment: local; /* Ensures the background stays at the bottom */
}
section.beneficios h1, section.beneficios h2, section.beneficios h3, section.beneficios h4, section.beneficios h5, section.beneficios h6 {
    color: #333333;
}
section.beneficios h2, section.beneficios h4, section.beneficios h6 {
    opacity: 0.6;
}

.bg-vermelho {
    background: #CF3416;
    background: linear-gradient(103deg, rgba(207, 52, 22, 1) 0%, rgba(155, 28, 0, 1) 45%, rgba(207, 52, 22, 1) 45%, rgba(155, 28, 0, 1) 100%);
}

.bg-vermelho2 {
    background: #CF3416;
    background: linear-gradient(103deg, rgba(207, 52, 22, 1) 0%, rgba(155, 28, 0, 1));
}
.branco {
    color: #fff;
}
.diagonal {
    /*clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);*/
    top: -100px;
    position: relative;
    bottom: -60px;
    z-index: 5;
}
.logo {
    max-width: 350px;
    margin: 30px 0;
}
.img-full {
    width: 100%;
}

/*
.diagonal::before,
.diagonal::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 10px;
    background-color: #9B1C00;
    transform-origin: left;
}

.diagonal::before {
    top: 38px;
    transform: rotate(-1deg);
}

.diagonal::after {
    bottom: 0;
    transform: rotate(-1deg);
}
*/
ul.beneficios {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
ul.beneficios li {
    background-color: #fff;
    color: #000000;
    border: solid 2px #CF3416;
    border-radius: 10px;
    padding: 10px 20px;
    text-align: center;
    margin-bottom: 20px;
    width: fit-content;
    font-weight: 700;
    line-height: 1.2em;
    display: inline-block; /* Ensures items are side by side */
    margin-right: 10px; /* Adds spacing between items */
    vertical-align: top; /* Aligns items properly */
}
ul.beneficios li span {
    font-weight: 400;
    font-style: italic;
    color: #CF3416;
}
.vermelho {
    color: #CF3416 !important;
}
.siemens {
    color: #089C9C !important;
}
.imagem-final {
    margin-top: -250px;
}
.colchete {
    height: 100%; 
    max-height: 3em; 
}
footer {
    margin-top:-360px;
    z-index: 9;
    position: relative;
}
.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
    font-size:30px;
	box-shadow: 2px 2px 3px #999;
    z-index:9990;
}

.my-float{
	margin-top:16px;
}
@media (max-width: 980px) {
    section.beneficios {
        background-size: auto;
        top: -150px;
        text-align: center;
    }
    .imagem-final {
        margin-top: -150px;
    }
    .bg-vermelho {
        background: #CF3416;
        background: linear-gradient(175deg, rgba(207, 52, 22, 1) 0%, rgba(155, 28, 0, 1) 49%, rgba(207, 52, 22, 1) 49%, rgba(155, 28, 0, 1) 100%);
    }
    section.topo {
        background: url(../images/bg/br2w-bg-mobile.webp);
        background-position: center right;
        background-size: cover;
        min-height: 820px;
        position: relative; /* Ensure the section is positioned for the overlay */
    }
    section.topo::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50%; /* Adjust the height as needed */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
        z-index: 1; /* Ensure the gradient is below the content */
    }
    section.topo * {
        position: relative;
        z-index: 2; /* Ensure the text and other content are above the gradient */
    }
    .destaque {
        max-width: 80%;
        margin: 20px auto;
    }
    footer {
        margin-top:0px;
        z-index: 9;
        position: relative;
    }
}
@media (min-width: 1300px) {
    .imagem-final {
        margin-top: -300px;
    }
}
@media (min-width: 1600px) {
    .imagem-final {
        margin-top: -400px;
    }
}
@media (min-width: 1900px) {
    .imagem-final {
        margin-top: -500px;
    }
}
@media (min-width: 2100px) {
    .imagem-final {
        margin-top: -500px;
    }
}