:root{
--primary:#205C88;
--white:#ffffff;
--black:#000000;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Poppins;background:#fff;color:#000}

header{
position:fixed;width:100%;padding:20px 60px;
display:flex;justify-content:space-between;align-items:center;
background:rgba(255,255,255,0.9);backdrop-filter:blur(10px);
z-index:1000;transition:.3s
}

header.scrolled{box-shadow:0 5px 20px rgba(0,0,0,0.1)}

header img{height:45px}
header a{margin-left:25px;text-decoration:none;color:#000;font-weight:500}

.logo {

}
.hero{
height:100vh;
display:flex;align-items:center;
padding:0 10%;
position:relative
}

.hero::after{
content:'';
position:absolute;
inset:0;
background:rgba(32,92,136,0.9);
}

.hero-content{position:relative;color:#ffffff;max-width:700px;z-index:1}
.hero h1{font-size:32px}
.hero p{margin-top:40px;font-size:22px}

section{padding:100px 10%;}
#solucao{background-color:#6495ED;}
.desafio{background:url('imagens/bg2.png') center/cover fixed;}
.desafio p{font-size:22px}
.title{font-size:34px;color:#black;margin-bottom:10px;z-index:1;}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px}

.card1{
background:#fff;padding:25px;border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.9);
transform:translateY(40px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
align-items:center;
text-align: center;
animation-timeline: view();
animation-range: entry 30% cover 40%;
}

.card2{
background:#fff;padding:25px;border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.9);
transform:translateY(40px);
transition:0.4s
align-items:center;
text-align: center;
animation-timeline: view();
animation-range: entry 30% cover 40%;
}

.card3{
background:#fff;padding:25px;border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.9);
transform:translateY(40px);
transition:0.4s
align-items:center;
text-align: center;
animation-timeline: view();
animation-range: entry 30% cover 40%;
}

.card1:hover {
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.5);
}
.card2:hover {
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.5);
}
.card3:hover {
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.5);
}

.card.show{opacity:1;transform:translateY(0)}

.parallax{
height:300px;
background: url('imagens/bg.png') center/cover fixed;
}
.ico{max-width:4%;height:auto;margin-bottom:2%}

.funciona{color:white;display:flex;animation-timeline:view();animation-range: entry 30% cover 40%;}

#processo{background:#205C88;padding:5% 10%}

#beneficios{background:#C0C0C0;padding:5% 10% 10% 10%;}

.card {
background:#fff;border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.9);
transform:translateY(40px);
transition:0.4s
align-items:center;
text-align: center;
padding: 25px 20px;
}

.highlight{background-color:#205c88;color:#fff;text-align:center;padding:80px 10%}

.btn-strong{display:inline-block;margin-top:20px;background:#25D366;color:#fff;padding:15px 30px;border-radius:8px;text-decoration:none}

.timeline div{margin-bottom:15px;padding-left:20px;transform:translateX(-30px);transition:0.4s}
.timeline div.show{opacity:1;transform:translateX(0)}

footer{background:#000;color:#fff;}
.footer{display:flex;flex-wrap:wrap;gap:40px;padding: 5% 2% 0 5%;}
.footer div{flex:1}
iframe{width:100%;height:250px;border:0}
.copy{background-color:#205C88;text-align:center;font-size:0.8em;margin-top:30px;padding: 0.3% 0;}

/* BOTÃO VOLTAR AO TOPO */
.back-to-top{
position:fixed;bottom:25px;right:25px;
background:#205C88;color:#fff;
width:50px;height:50px;
display:flex;align-items:center;justify-content:center;
border-radius:50%;
font-size:24px;text-decoration:none;
box-shadow:0 5px 20px rgba(0,0,0,0.2);
transition:0.3s;
cursor:pointer;
}

.back-to-top:hover{
animation:floatUp 1s infinite;
}

@keyframes floatUp{
0%{transform:translateY(0)}
50%{transform:translateY(-8px)}
100%{transform:translateY(0)}
}

@media(max-width:768px){
.hero h1{font-size:32px}
}
@keyframes revelar {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}