* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: sans-serif;
 }

.hero {
    width: 100%;
    height: 100vh;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('./img/hero.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-color: #323B44;
    color: white;
}


 .header {
     height: 80px;
     width: 100%;
     background-color: #323B44;
     opacity: 0.95;
     padding: 0 20px;
     display: flex;
     align-items: center;
 }

 .header h2 {
     color: white;
 }

 .hero_content {
     height: calc(100% - 80px);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
 }

 .hero_content h1 {
     font-size: 4rem;
     color: white;
     text-align: center;
 }

 .hero_content p {
     font-size: 1.5rem;
     color: white;
     text-align: center;
     margin-top: 20px;
 }

 .hero_content a {
    text-decoration: underline;
    color: white;
 }

 .hero_content .btn-action {
     margin-top: 25px;
     background-color: #B48D42;
     border: none;
     border-radius: 8px;
     padding: 20px 40px;
     color: white;
     cursor: pointer;
     transition: background .2s;
     font-size: 1.5rem;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 10px;
 }

 .hero_content .btn-action:hover {
     background-color: #dcad55;
 }

 .o-que-resolvo {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     padding: 40px 0;
 }

 .o-que-resolvo h1 {
     font-size: 2rem;
     color: #323B44;
     margin-bottom: 20px;
 }

 .o-que-resolvo p {
     font-size: 1.2rem;
     color: #323B44;
     text-align: center;
 }

 .o-que-resolvo-cards {
     width: 100%;
     display: flex;
     padding: 20px 40px;
     justify-content: center;
     gap: 20px;
     margin-top: 20px;
 }

 .card {
     width: 350px;
     height: 250px;
     border-radius: 8px;
     background-color: #E3E5E6;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     padding: 0 50px;
 }

 .card i {
     font-size: 4rem;
     color: #B48D42;
 }

 .card h1 {
     font-size: 1.8rem;
     color: #323B44;
     margin-bottom: 20px;
 }

 .como-funciona {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     padding: 20px 0;
 }

 .como-funciona h1 {
     font-size: 2rem;
     color: #323B44;
     margin-bottom: 20px;
 }

 .como-funciona-cards {
     width: 100%;
     display: flex;
     padding: 20px 40px;
     justify-content: center;
     gap: 20px;
 }

 .card-2 {
     width: 350px;
     height: 250px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     padding: 0 50px;
 }

 .card-2 i {
     font-size: 4rem;
     color: #323B44;
 }

 .card-2 h1 {
     font-size: 1.8rem;
     color: #323B44;
     margin-bottom: 20px;
 }

 .card-2 p {
     font-size: 1.2rem;
     color: #323B44;
     text-align: center;
 }

 .action {
     width: 100%;
     padding: 40px;
     background-color: #323B44;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
 }

 .action h1 {
     font-size: 2.5rem;
     color: white;
     text-align: center;
 }

 .action p {
     font-size: 1.5rem;
     color: white;
     text-align: center;
     margin-top: 20px;
 }

 .action button {
     margin-top: 25px;
     background-color: #B48D42;
     border: none;
     border-radius: 8px;
     padding: 20px 40px;
     color: white;
     cursor: pointer;
     transition: background .2s;
     font-size: 1.5rem;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 10px;
 }

 .action button:hover {
     background-color: #dcad55;
 }

 .footer {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 20px;
 }

 .social-midia {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
     margin-bottom: 20px;
 }

 .footer .redes {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     background-color: #E3E5E6;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
 }

 .footer .redes:hover {
     scale: 1.1;
 }

 .footer .redes i {
     font-size: 2rem;
     color: #B48D42;
 }

 .footer span {
     color: #A3A09A;
     padding: 3px;
     text-align: center;
 }

 @media (max-width: 570px) {
     .hero {
         width: 100%;
         padding: 0 29px;
         background-color: #323B44;
         background-image: none;
     }

     .hero_content h1 {
         font-size: 2.5rem;
         color: white;
         text-align: center;
     }

     .hero_content p {
         font-size: 1.3rem;
         margin-bottom: 40px;
     }

     .o-que-resolvo {
         padding: 40px 20px;
     }

     .o-que-resolvo h1 {
         font-size: 1.5rem;
         color: #323B44;
         margin-bottom: 20px;
     }

     .o-que-resolvo p {
         font-size: 1.2rem;
         color: #323B44;
         text-align: center;
     }

     .o-que-resolvo-cards {
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 20px;
         margin-top: 20px;
     }

     .card {
         width: 300px;
         height: 200px;
     }

     .como-funciona {
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
     }

     .como-funciona h1 {
         font-size: 1.5rem;
         color: #323B44;
         margin-bottom: 20px;
     }

     .como-funciona-cards {
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 20px;
     }

     .card-2 {
         width: 300px;
         height: 200px;
     }

     .card-2 i {
         font-size: 4rem;
         color: #323B44;
     }

     .card-2 h1 {
         font-size: 1.5rem;
         text-align: center;
     }

     .action h1 {
         font-size: 1.8rem;
     }

     .action p {
         font-size: 1.2rem;
     }

     .action button {
         padding: 20px;
     }
 }

 @media (max-width: 768px) {
     .hero {
         width: 100%;
         background-color: #323B44;
     }

     .hero_content h1 {
         font-size: 2.5rem;
         color: white;
         text-align: center;
     }

     .hero_content p {
         font-size: 1.5rem;
         margin-bottom: 40px;
     }

     .o-que-resolvo {
         padding: 40px 20px;
     }

     .o-que-resolvo h1 {
         font-size: 1.4rem;
         color: #323B44;
         margin-bottom: 20px;
     }

     .o-que-resolvo p {
         font-size: 1.2rem;
         color: #323B44;
         text-align: center;
     }

     .o-que-resolvo i {
        font-size: 2.5rem;
     }

     .o-que-resolvo-cards {
         gap: 10px;
         margin-top: 20px;
         padding: 10px;
     }

     .card {
         width: 230px;
         height: 220px;
     }

     .como-funciona h1 {
         font-size: 1.5rem;
         color: #323B44;
         margin-bottom: 20px;
     }

     .card-2 {
         width: 230px;
         height: 220px;
     }

     .card-2 i {
         font-size: 4rem;
         color: #323B44;
     }

     .card-2 h1 {
         font-size: 1.5rem;
         text-align: center;
     }

     .action h1 {
         font-size: 1.8rem;
     }

     .action p {
         font-size: 1.2rem;
     }

     .action button {
         padding: 20px;
     }
 }