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

 html {
     scroll-behavior: smooth;
 }

 body {
     background: #111;
     color: white;
 }

 /* 
           HEADER
     */

 header {
     position: fixed;
     width: 100%;
     top: 0;
     left: 0;

     background: rgba(0, 0, 0, .88);
     backdrop-filter: blur(8px);

     padding: 15px 8%;

     display: flex;
     justify-content: space-between;
     align-items: center;

     z-index: 1000;
 }

 .logo-area {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .logo {
     width: 60px;
     height: 60px;
     filter: drop-shadow(0 0 7px rgba(247, 127, 34, .55));
 }

 .logo-area h2 {
     color: #f77f22;
     font-size: 20px;
     margin: 0;
 }

 nav {
     display: flex;
     align-items: center;
     gap: 30px;
 }

 nav a {
     color: white;
     text-decoration: none;
     transition: .3s;
 }

 nav a:hover {
     color: #f77f22;
 }

 nav a:focus {
     outline: none;
 }


 /* 
           BANNER
         */

 .hero {
     position: relative;
     min-height: 80vh;
     overflow: hidden;

     display: flex;
     justify-content: center;
     align-items: center;

     text-align: center;
 }

 .banner {
     position: absolute;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     z-index: 1;
 }

 .overlay {
     position: absolute;
     inset: 0;

     background: linear-gradient(90deg,
             rgba(0, 0, 0, .75),
             rgba(0, 0, 0, .45));

     z-index: 2;
 }

 .conteudo {
     position: relative;
     z-index: 3;

     max-width: 900px;
     padding: 20px;
 }

 .conteudo h1 {
     font-size: 46px;
     line-height: 1.15;
     max-width: 750px;
     margin: 0 auto 20px;

 }


 .conteudo p {
     color: #ddd;
     font-size: 20px;
     margin-bottom: 35px;
 }

 .btn {
     display: inline-block;

     padding: 17px 38px;
     box-shadow: 0 5px 20px rgba(247, 127, 34, .25);

     background: #f77f22;
     color: white;

     text-decoration: none;

     border-radius: 50px;

     font-weight: 600;

     transition: .3s;


 }

 .btn:hover {
     background: #ff9145;
     transform: translateY(-3px);
 }


 /* 
           INFO
         */

 .info {

     display: flex;
     justify-content: space-around;
     align-items: center;

     text-align: center;

     background: #181818;

     padding: 45px 8%;

 }

 .info div {
     min-width: 180px;
 }

 .info h3 {
     color: #f77f22;
     font-size: 32px;
 }

 .info p {
     color: #bbb;
     margin-top: 5px;
 }


 /* 
           SEÇÕES
         */

 section:not(.hero) {
     padding: 80px 8%;
 }

 h2 {
     text-align: center;
     font-size: 38px;
     margin-bottom: 15px;
 }

 .subtitulo {
     text-align: center;
     color: #aaa;

     margin-bottom: 45px;
 }


 /* 
           SERVIÇOS
         */

 .cards {

     display: grid;

     grid-template-columns:
         repeat(4, 1fr);

     gap: 20px;

 }

 .card {

     background: #1b1b1b;

     border: 1px solid #333;

     padding: 30px;

     border-radius: 12px;

     text-align: center;

     transition: .3s;

 }

 .card:hover {

     transform: translateY(-7px);

     border-color: #f77f22;

 }

 .icone {

     font-size: 40px;

     margin-bottom: 15px;

 }

 .card h3 {

     color: #f77f22;

     margin-bottom: 10px;

 }

 .card p {

     color: #bbb;

     font-size: 14px;

     line-height: 1.6;

 }


 /* 
           PROJETOS / CARROSSEL
         */

 .projetos {

     position: relative;

     max-width: 1100px;

     margin: auto;

 }

 .carrossel {

     position: relative;

     overflow: hidden;

     border-radius: 15px;

 }

 .slides {

     display: flex;

     transition: transform .5s ease;

 }

 .slide {

     min-width: 100%;

     position: relative;

 }

 .slide img {

     width: 100%;

     height: 500px;

     object-fit: cover;

     display: block;

 }

 .legenda {

     position: absolute;

     bottom: 0;
     left: 0;

     width: 100%;

     padding: 25px;

     background: linear-gradient(transparent,
             rgba(0, 0, 0, .85));

     font-size: 18px;

     font-weight: 600;

 }

 .seta {

     position: absolute;

     top: 50%;

     transform: translateY(-50%);

     width: 45px;
     height: 45px;

     border: none;

     border-radius: 50%;

     background: rgba(0, 0, 0, .65);

     color: white;

     font-size: 25px;

     cursor: pointer;

     z-index: 5;

     transition: .3s;

 }

 .seta:hover {

     background: #f77f22;

 }

 .esquerda {

     left: 15px;

 }

 .direita {

     right: 15px;

 }

 .bolinhas {

     display: flex;

     justify-content: center;

     gap: 8px;

     margin-top: 20px;

 }

 .bolinha {

     width: 9px;
     height: 9px;

     border-radius: 50%;

     background: #555;

     cursor: pointer;

 }

 .bolinha.ativa {

     background: #f77f22;

 }


 /* 
           POR QUE ESCOLHER
         */

 .beneficios {

     max-width: 900px;

     margin: auto;

     display: grid;

     grid-template-columns:
         repeat(2, 1fr);

     gap: 20px;

 }

 .beneficio {

     background: #1b1b1b;

     padding: 20px 25px;

     border-radius: 10px;

     border-left: 4px solid #f77f22;

 }

 .beneficio p {

     color: #ddd;

 }


 /* 
           CONTATO
         */

 .contato {

     max-width: 900px;

     margin: auto;

     background: #1b1b1b;

     text-align: center;

     padding: 60px 30px;

     border-radius: 15px;

     border: 1px solid #333;

 }

 .contato h2 {

     margin-bottom: 20px;

 }

 .contato p {

     color: #ccc;

     margin-bottom: 8px;

 }

 .contato .btn {

     margin-top: 25px;

 }

 .clientes {
     background: #181818;
     padding: 70px 0;
     overflow: hidden;
     text-align: center;
 }

 .clientes h2 {
     color: white;
     font-size: 32px;
     margin-bottom: 10px;
 }

 .clientes>p {
     color: #aaa;
     margin-bottom: 35px;
 }

 .carrossel-clientes {
     width: 100%;
     overflow: hidden;
 }

 .logos {

     display: flex;
     align-items: center;
     gap: 70px;
     width: max-content;

     animation: passar 25s linear infinite;
 }

 .logos img {
     width: 160px;
     height: 90px;

     object-fit: contain;

     background: white;

     border-radius: 8px;

     box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
 }

 @keyframes passar {

     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }

 }


 /* 
           FOOTER
         */

 footer {

     background: #050505;

     text-align: center;

     padding: 35px 20px;

 }

 footer h3 {

     color: #f77f22;

     margin-bottom: 8px;

 }

 footer p {

     color: #888;

     font-size: 14px;

 }


 /* 
           WHATSAPP
         */

 .whats {

     position: fixed;

     right: 25px;
     bottom: 25px;

     width: 65px;
     height: 65px;

     background: #25D366;

     color: white;

     text-decoration: none;

     border-radius: 50%;

     display: flex;

     justify-content: center;
     align-items: center;

     font-size: 28px;

     box-shadow: 0 5px 20px rgba(0, 0, 0, .4);

     z-index: 1000;

 }