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

html{
scroll-behavior:smooth;
}

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

header{
      width:100%;
      height: 145px;
      background:#000;
      position:fixed;
      padding-right: 50px;
      top:0;  
      left:0;
      z-index:999;
      box-shadow:0 4px 15px rgba(0,0,0,0.25);
      animation:slideDown 1s ease;
    }

    @keyframes slideDown{
      from{
        transform:translateY(-100%);
        opacity:0;
      }
      to{
        transform:translateY(0);
        opacity:1;
      }
    }

    .navbar{
      max-width:1100px;
      margin:auto;
      padding:18px 80px;
      display:flex;
      align-items:center;
      justify-content:space-between;
    }

    /* =========================
       LOGO
    ========================== */

    .logo img{
      width:170px;  
      transition:0.4s;
      cursor:pointer;
      
    }

    .logo img:hover{
      transform:scale(1.05);
    }

    /* =========================
       MENU
    ========================== */

    .nav-links{
      display:flex;
      align-items:center;
      gap:45px;
      list-style:none;
    }

    .nav-links li a{
      color:white;
      text-decoration:none;
      font-size:18px;
      font-weight:600;
      position:relative;
      transition:0.3s;

    }

    /* LINHA ANIMADA */
    .nav-links li a::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-4px;
      width:0%;
      height:3px;
      background:#e60000;
      transition:0.4s ease;
      border-radius:10px;
    }

    .nav-links li a:hover::after{
      width:100%;
    }

    .nav-links li a:hover{
      color:#fff;
      transform:translateY(-2px);
    }


.menu-btn{
      display:none;
      font-size:30px;
      color:white;
      cursor:pointer;
      transition:0.3s;
    }

    .menu-btn:hover{
      color:#ffcc00;
      transform:rotate(90deg);
    }

    #menu-toggle{
      display:none;
    }

    /* =========================
       RESPONSIVO
    ========================== */

    @media(max-width: 1000px){

      .navbar{
        padding:4px 5px;
      }

      .menu-btn{
        display:block;
      }

      .nav-links{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#000;
        flex-direction:column;
        gap:30px;
        overflow:hidden;
        max-height:0;
        transition:0.5s ease;
        padding:0;
      }

      .nav-links li{
        opacity:0;
        transform:translateY(20px);
        transition:0.4s;
      }

      #menu-toggle:checked ~ .nav-links{
        max-height:500px;
        padding:35px 0;
      }

      #menu-toggle:checked ~ .nav-links li{
        opacity:1;
        transform:translateY(0);
      }

      .logo img{
        width:180px;
      }
    }

    /* =========================
       DEMO CONTEÚDO
    ========================== */

    .content{
      padding-top:140px;
      text-align:center;
    }

    .content h1{
      font-size:50px;
      color:#1531b4;
      margin-top:80px;
    }





/* SEÇÃO */

.sobre{
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:80px 8%;
}

.container{
    width:100%;
    max-width:1400px;
    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
}

/* TEXTO */

.sobre-texto{
    flex:1;
}

.sobre-texto h2{
    
    line-height:1.2;
    margin-bottom:40px;
}

.sobre-texto p{
    font-size:20px;
    color:#fff;
    line-height:2;
    margin-bottom:25px;
}

/* IMAGEM */

.sobre-imagem{
    flex:1;
}

.sobre-imagem img{
    width:110%;
    display:block;
    padding-top:20px;
    border-radius:50px;
    object-fit:cover;
    box-shadow:
    0 15px 35px rgba(0,0,0,.08);
}

/* NOTEBOOK */

@media(max-width:1200px){

    .sobre-texto h2{
        font-size:3.2rem;
    }

    .sobre-texto p{
        font-size:2.2rem;
    }

}

/* TABLET */

@media(max-width:992px){

    .container{
        flex-direction:column;
        gap:50px;
    }

    .sobre-texto{
        text-align:center;
    }

    .sobre-texto h2{
        font-size:3rem;
    }

    .sobre-imagem{
        width:110%;
        border-radius:550px;
        padding-right:27px;
        padding-top:0px;
    }

}

/* CELULAR */

@media(max-width:768px){

    .sobre{
        padding:60px 25px;
    }

    .sobre-texto h2{
        font-size:2.3rem;
        margin-bottom:25px;
    }

    .sobre-texto p{
        font-size:1rem;
        line-height:1.8;
    }

    .sobre-imagem img{
        border-radius:50px;
        height: 1000px;
    }

}

/* CELULARES PEQUENOS */

@media(max-width:480px){

    .sobre-texto h2{
        font-size:2rem;
    }

    .sobre-texto p{
        font-size:20px;
        padding-top: 10px;
    }

}






*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.galeria{
    width:100%;
    padding:80px 20px;
    background:#f4f4f4;
}

.titulo-galeria{
    text-align:center;
    margin-bottom:40px;
}

.titulo-galeria h2{
    font-size:clamp(2rem, 5vw, 3rem);
    color:#e60000;
    margin-bottom:10px;
}

.titulo-galeria p{
    color:#666;
    font-size:18px;
    max-width:700px;
    margin:0 auto;
}

.slider-galeria{
    width:100%;
    max-width:1400px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
}

.imagem-container{
    position:relative;
    width:100%;
    max-width:1000px;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity .6s ease;
}

.slide.active{
    opacity:1;
}

.btn{
    width:60px;
    height:60px;
    flex-shrink:0;

    border:none;
    border-radius:60%;

    background:#17278B;
    color:#fff;

    font-size:24px;
    cursor:pointer;

    transition:all .3s ease;
}

.btn:hover{
    background:#2948ff;
    transform:scale(1.1);
}

/* TABLETS */

@media (max-width:992px){

    .slider-galeria{
        gap:15px;
    }

    .btn{
        width:55px;
        height:55px;
        font-size:22px;
    }
}

/* CELULARES */

@media (max-width:768px){

    .galeria{
        padding:60px 15px;
    }

    .slider-galeria{
        position:relative;
        gap:0;
    }

    .imagem-container{
        width:600px;
        border-radius:15px;
         height:450px;
    }

    .btn{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        z-index:10;

        width:45px;
        height:45px;
        font-size:18px;
    }

    .btn:hover{
        transform:translateY(-50%) scale(1.05);
    }

    .anterior{
        left:10px;
    }

    .proximo{
        right:10px;
    }
}

/* CELULARES PEQUENOS */

@media (max-width:480px){

    .galeria{
        padding:50px 10px;
    }

    .titulo-galeria{
        margin-bottom:25px;
    }

    .imagem-container{
        border-radius:12px;
        height: 700px;
    }

    .btn{
        width:40px;
        height:40px;
        font-size:16px;
        padding-top:10px;
    }

    .anterior{
        left:5px;
    }

    .proximo{
        right:5px;
    }
}

/* TELAS MUITO GRANDES */

@media (min-width:1600px){

    .slider-galeria{
        max-width:1600px;
    }

    .imagem-container{
        max-width:1200px;
    }
}



/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
}

/* HERO PREMIUM */

.osascouro-banner{
    position:relative;
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;

    background:url("/img/trampo\ 2.jpg") center center;
    background-size:cover;
    background-repeat:no-repeat;
}

.osascouro-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.72);
}

.osascouro-container{
    position:relative;
    z-index:2;
    width:100%;
    max-width:950px;
    padding-top:80px;
}

.osascouro-titulo{
    color:#E60000;
    font-size:6rem;
    font-weight:900;
    line-height:1;
    margin-bottom:30px;
}

.osascouro-descricao{
    max-width:900px;
    margin:auto;
    color:#fff;
    font-size:1.8rem;
    line-height:1.6;
}

.osascouro-botoes{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:50px;
    flex-wrap:wrap;
    padding-top: 00px;
}

.osascouro-btn-orcamento{
    text-decoration:none;
    background:#ff0000;
    color:#fff;
    padding:18px 45px;
    border-radius:60px;
    font-size:1.2rem;
    font-weight:700;
    transition:.4s;
}

.osascouro-btn-orcamento:hover{
    transform:translateY(-5px);
}

.osascouro-btn-trabalhos{
    text-decoration:none;
    border:2px solid #fff;
    color:#fff;
    padding:18px 45px;
    border-radius:60px;
    font-size:1.2rem;
    font-weight:700;
    transition:.4s;
}

.osascouro-btn-trabalhos:hover{
    background:#fff;
    color:#000;
}


@media (max-width:992px){

    .osascouro-titulo{
        font-size:4rem;
    }

    .osascouro-descricao{
        font-size:1.3rem;
        max-width:700px;
    }



    
}

@media (max-width:768px){

    .osascouro-banner{
        min-height:100vh;
        padding:200px 15px;
    }

    .osascouro-titulo{
        font-size:2.5rem;
        line-height:1.1;
        margin-bottom:20px;
    }

    .osascouro-descricao{
        font-size:1rem;
        line-height:1.6;
        max-width:100%;
    }

    .osascouro-botoes{
        flex-direction:column;
        align-items:center;
        gap:15px;
        margin-top:5px;
    }

    .osascouro-btn-orcamento,
    .osascouro-btn-trabalhos{
        width:100%;
        max-width:320px;
        text-align:center;
        padding:19px 50px;
        font-size:1rem;
        margin-top:15px;
    }

}

@media (max-width:480px){

    .osascouro-banner{
        padding:0px 0px;
    }

    .osascouro-titulo{
        font-size:3rem;
        padding-top:120px;
    }

    .osascouro-descricao{
        font-size:26px;
        padding-top:0px;
    }

    .osascouro-btn-orcamento,
    .osascouro-btn-trabalhos{
        max-width:280px;
    }

}


/*formulario*/


form



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

    body{
      height:100vh;
      
    }

    /* BOTÃO FLUTUANTE */
    .whatsapp-button{
      position:fixed;
      right:25px;
      bottom:25px;
      width:120px;
      height:120px;
      background:#25d366;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
      box-shadow:0 8px 25px rgba(0,0,0,0.25);
      z-index:9999;

      animation:pulse 2s infinite;
      transition:all .3s ease;
    }

    /* ÍCONE */
    .whatsapp-button i{
      color:#fff;
      font-size:58px;
      transition:transform .3s ease;
    }

    /* HOVER */
    .whatsapp-button:hover{
      transform:scale(1.12) translateY(-5px);
      box-shadow:0 12px 30px rgba(0,0,0,0.35);
      background:#1ebe5d;
    }

    .whatsapp-button:hover i{
      transform:rotate(10deg) scale(1.1);
    }

    /* Tooltip */
    .tooltip{
      position:absolute;
      right:90px;
      background:#111;
      color:#fff;
      padding:12px 18px;
      border-radius:10px;
      font-size:14px;
      white-space:nowrap;

      opacity:0;
      visibility:hidden;
      transform:translateX(15px);

      transition:all .3s ease;
    }

    .tooltip::after{
      content:'';
      position:absolute;
      top:50%;
      right:-8px;
      transform:translateY(-50%);
      border-width:8px;
      border-style:solid;
      border-color:transparent transparent transparent #111;
    }

    .whatsapp-button:hover .tooltip{
      opacity:1;
      visibility:visible;
      transform:translateX(0);
    }

    /* EFEITO PULSANTE */
    @keyframes pulse{
      0%{
        box-shadow:0 0 0 0 rgba(37,211,102,0.7);
      }

      70%{
        box-shadow:0 0 0 20px rgba(37,211,102,0);
      }

      100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
      }
    }

    /* RESPONSIVO */
    @media(max-width:768px){

      .whatsapp-button{
        width:85px;
        height:85px;
        right:18px;
        bottom:18px;
      }

      .whatsapp-button i{
        font-size:44px;
      }

      .tooltip{
        display:none;
      }
    }

















.btn{
background:#e60000;
color:white;

}

.btn-outline{
border:2px solid white;
color:white;
}

section{
padding:100px 8%;
}

h2{
text-align:center;
font-size:2.5rem;
margin-bottom:80px;
}

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

.card{
background:#1d1d1d;
padding:40px;
border-radius:20px;
text-align:center;
transition:.4s;
}

.card:hover{
transform:translateY(-10px);
}

.card i{
font-size:50px;
color:#e60000;
margin-bottom:30px;
}


.card h2{
font-size:50px;
color:#e60000;
margin-bottom:30px;
}







/*depoimentos*/

.depoimentos{
    width:100%;
    padding:80px 20px;
    text-align:center;
}

.depoimentos h2{
    font-size:52px;
    margin-bottom:10px;
}

.subtitulo{
    color:#666;
    margin-bottom:40px;
}

.depoimento-container{
    position:relative;
    max-width:700px;
    margin:auto;
    min-height:350px;
}

.depoimento{
    position:absolute;
    width:100%;
    background:#fff;
    padding:40px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);

    opacity:0;
    visibility:hidden;
    transform:translateX(50px);

    transition:.5s;
}

.depoimento.active{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
}

.depoimento img{
    width:150px;
    height:150px;
    border-radius:50%;
    object-fit:cover;
    border:5px solid #E60000;
    margin-bottom:15px;
}

.depoimento h3{
    color:#E60000;
    margin-bottom:10px;
}

.estrelas{
    font-size:22px;
    margin-bottom:15px;
}

.depoimento p{
    font-size:22px;
    line-height:1.8;
    color:#444;
}

.botoes{
    margin-top:80px;
    display:flex;
    justify-content:center;
    gap:25px;
    padding-right: px;
}

.botoes button{
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    color:white;
    font-size:22px;
    cursor:pointer;
    transition:.3s;
}

.botoes button:hover{
    transform:scale(1.1);
}

@media(max-width:768px){

    .depoimentos h2{
        font-size:32px;
    }

    .depoimento{
        padding:25px;
    }

    .depoimento p{
        font-size:16px;
    }
}



form{
max-width:700px;
margin:auto;
display:flex;
flex-direction:column;
gap:15px;
}

input,
textarea{
padding:15px;
border:none;
border-radius:10px;
}

button{
padding:15px;
background:#e60000;
border:none;
color:white;
cursor:pointer;
border-radius:10px;
}



.whatsapp{
position:fixed;
right:20px;
bottom:20px;
width:70px;
height:70px;
background:#25D366;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:35px;
color:white;
text-decoration:none;
}

@media(max-width:768px){

.menu{
display:none;
}

.hero h1{
font-size:2.5rem;
}

.comparacao{
grid-template-columns:1fr;
}

}

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

  .footer{
    margin:-25px;;
      width:105%;
      padding:80px 8%;
      padding-right: 100px;
      color:#fff;
       height:70vh;
       
      
    }

    .footer-container{
      display:flex;
      justify-content:space-between;
      gap:80px;
      flex-wrap:wrap;
    }

    /* LOGO */

    .footer-logo img{
      width:230px;
      border-radius:12px;
      background:#fff;
      padding:10px;
    }

    /* TITULOS */

    .footer h3{
      font-size:20px;
      font-weight:700;
      letter-spacing:2px;
      margin-bottom:35px;
      text-transform:uppercase;
    }

    /* LINKS */

    .footer-links{
      list-style:none;
    }

    .footer-links li{
      margin-bottom:20px;
    }

    .footer-links a{
      text-decoration:none;
      color:#fff;
      font-size:18px;
      transition:0.3s;
    }

    .footer-links a:hover{
      opacity:0.7;
      padding-left:5px;
    }

    /* CONTATO */

    .contact-item{
      display:flex;
      align-items:center;
      gap:18px;
      margin-bottom:25px;
      font-size:18px;
    }

    .contact-item i{
      font-size:22px;
      min-width:25px;
    }

    /* REDES SOCIAIS */

    .social-area{
      margin-top:55px;
    }

    .social-area h3{
      padding-right:10px
    }

    .social-icons{
      display:flex;
      gap:45px;
      margin-top:2px;
      padding-left: 22px;
    }

    .social-icons a{
      width:62px;
      height:62px;
      border-radius:50%;
      background:rgba(255,255,255,0.12);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-size:30px;
      text-decoration:none;
      transition:0.4s;
    }

    .social-icons a:hover{
      transform:translateY(-6px);
      background:#fff;
      color:#d88900;
      box-shadow:0 10px 25px rgba(0,0,0,0.2);
    }

    /* RESPONSIVO */



   /* Experiancia */


 @media(max-width:900px){

    .hero{
        padding:40px;
    }

    .hero h1{
        font-size:52px;
    }

    .titulo h2{
        font-size:42px;
    }

    .cta h2{
        font-size:42px;
    }

}

@media(max-width:600px){

    .hero{
        padding:30px;
    }

    .hero h1{
        font-size:38px;
    }

    .hero p{
        font-size:18px;
    }

    .titulo h2{
        font-size:32px;
    }

    .cta h2{
        font-size:32px;
    }

    .cta p{
        font-size:18px;
    }

    .beneficios{
        padding:35px;
    }

}




 @media(max-width:1000px){

      .logo{
        padding-right: ;
      }      
    }


    /*Footer*/

    @media(max-width:1000px){

      .footer-container{
        flex-direction:column;
        gap:50px;
      }

      .footer{
        padding:160px 22%;
      }
      



    }

    @media(max-width:1000px){

     .grid{
        display:flex;
        flex-direction:column;
        gap:30px;
        align-items: center;
        padding-right: 100px;

      }

      .footer h3{
        font-size:18px;
        position: center;
      }

      .footer-links a,
      .contact-item{
        font-size:16px;
       
      }
 


      .footer-logo img{
        width:190px;
        
      }

      .footer-column h3{
        padding-left: 5px;
      }
      .contact-item{
        padding-left: 0px;
      }
        .footer-columns h3{
        padding-left: 0px;
      }

      .social-icons{
       padding-left:30px ;
      }
      


      .social-area h3{
        padding-left: 15px;
      }

    }