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

html{
scroll-behavior:smooth;
}

body{
background:#0b0b0b;
color:#fff;
overflow-x:hidden;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

header{
position:fixed;
width:100%;
padding:15px 0;
z-index:999;
transition:.4s;
}

header.scrolled{
background:#111;
box-shadow:0 5px 20px rgba(0,0,0,.4);
}

header .container{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo img{
height:70px;
}

nav ul{
display:flex;
list-style:none;
gap:30px;
}

nav a{
color:white;
text-decoration:none;
font-weight:500;
}

.btn-navbar,
.btn{
background:#e53935;
padding:14px 30px;
color:white;
text-decoration:none;
border-radius:5px;
}

.hero{
height:100vh;
background: url('../img/banner.png') center center / cover;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}

.overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.7);
}

.hero-content{
position:relative;
text-align:center;
max-width:800px;
z-index:2;
}

.hero-content h1{
font-size:65px;
margin:20px 0;
}

.hero-content p{
font-size:18px;
line-height:1.8;
}

.hero-buttons{
margin-top:30px;
}

.btn-outline{
border:2px solid white;
padding:14px 30px;
margin-left:10px;
color:white;
text-decoration:none;
}

.stats{
padding:100px 0;
background:#111;
}

.stats .container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
text-align:center;
}

.counter-box h2{
font-size:50px;
color:#e53935;
}

.about,
.services,
.contact{
padding:100px 0;
}

.about .container{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.about img{
width:100%;
border-radius:10px;
}

.section-title,
.section-title-left{
margin-bottom:40px;
}

.section-title{
text-align:center;
}

.section-title span,
.section-title-left span{
color:#e53935;
font-weight:600;
}

.section-title h2,
.section-title-left h2{
font-size:42px;
}

.services{
background:#111;
}

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

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

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

.service-card i{
font-size:50px;
margin-bottom:20px;
color:#e53935;
}

.clients{
    padding:120px 0;
    background:#0f0f0f;
    overflow:hidden;
}

.clients-container{
    width:100%;
    overflow:hidden;
    position:relative;
}

.clients-track{
    display:flex;
    width:max-content;
    align-items:center;

    animation:marquee 25s linear infinite;
}

.clients-track:hover{
    animation-play-state:paused;
}

@keyframes marquee {

    0%{
        transform:translateX(0);
    }

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

}

.client-logo{
    width:220px;
    height:120px;

    margin:0 25px;

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

    background:#ffffff;

    border-radius:12px;

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

    transition:.4s;
}

.client-logo:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(229,57,53,.25);
}

.client-logo:hover{
    transform:translateY(-8px);
    border-color:#e53935;
}

.client-logo img{
    max-width:140px;
    max-height:70px;

    object-fit:contain;

    transition:.4s ease;
}

.client-logo:hover img{
    transform:scale(1.08);
}

.client-logo:hover img{
    filter:none;
    opacity:1;
}

@keyframes clientsScroll{

    from{
        transform:translateX(0);
    }

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

}

.clients-container::after{
    right:0;

    background:linear-gradient(
        to left,
        #0f0f0f,
        transparent
    );
}


.clients-container::before,
.clients-container::after{
    content:'';
    position:absolute;
    top:0;
    width:120px;
    height:100%;
    z-index:10;
}

.clients-container::before{
    left:0;
    background:linear-gradient(
        to right,
        #0f0f0f,
        transparent
    );
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
}

.info-card{
margin-bottom:25px;
}

.contact-form{
display:flex;
flex-direction:column;
gap:15px;
}

.contact-form input,
.contact-form textarea{
padding:15px;
background:#1a1a1a;
border:1px solid #333;
color:#fff;
}

.contact-form button{
background:#e53935;
padding:15px;
border:none;
color:white;
cursor:pointer;
}



.form-group{

    margin-bottom:20px;

}

.contact-form input,
.contact-form select,
.contact-form textarea{

    width:100%;

    padding:16px;

    border-radius:8px;

    border:1px solid #333;

    background:#1c1c1c;

    color:#fff;

    font-size:15px;

    transition:.3s;

}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

    outline:none;

    border-color:#E53935;

    box-shadow:0 0 10px rgba(229,57,53,.3);

}


.location{
    padding:100px 0;
    background:#111;
}

.map-wrapper{
    width:90%;
    max-width:1400px;
    margin:auto;

    border-radius:15px;
    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.map-wrapper iframe{
    width:100%;
    height:550px;
    border:none;
    display:block;
}

.map-container iframe{
width:100%;
height:500px;
border:none;
}

footer{
background:#000;
padding:30px;
text-align:center;
}

.whatsapp{
position:fixed;
right:25px;
bottom:25px;
width:65px;
height:65px;
background:#25D366;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:35px;
color:white;
text-decoration:none;
z-index:99999;
animation:pulse 2s infinite;
}

@keyframes pulse{
0%{transform:scale(1);}
50%{transform:scale(1.15);}
100%{transform:scale(1);}
}

.menu-btn{
display:none;
font-size:28px;
cursor:pointer;
}

@media(max-width:900px){

    .menu-btn{
    display:block;
    }

    nav{
    display:none;
    }

    nav.active{
    display:block;
    position:absolute;
    top:90px;
    left:0;
    width:100%;
    background:#111;
    }

    nav ul{
    flex-direction:column;
    padding:20px;
    }

    .about .container,
    .contact-grid{
    grid-template-columns:1fr;
    }

    .hero-content h1{
    font-size:40px;
    }

    .btn-navbar{
    display:none;
    }
}

.erro{

    display:block;

    margin-top:8px;

    color:#ff4d4d;

    font-size:13px;

}

.input-error{

    border:1px solid #ff4d4d !important;

}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

    border-color:#E53935;

}

.input-success{

    border:1px solid #22c55e !important;

}


.loading{

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

    margin-top:25px;

}

.spinner{

    width:45px;
    height:45px;

    border:4px solid rgba(255,255,255,.2);

    border-top:4px solid #E53935;

    border-radius:50%;

    animation:spin .8s linear infinite;

}

.loading p{

    margin-top:15px;
    color:#fff;

}

@keyframes spin{

    100%{

        transform:rotate(360deg);

    }

}

.alert-success{

    background:#1b5e20;

    color:#fff;

    padding:25px;

    margin-top:25px;

    border-radius:10px;

    text-align:center;

}

.alert-success i{

    font-size:45px;

    margin-bottom:15px;

}

.alert-error{

    background:#b71c1c;

    color:#fff;

    padding:25px;

    margin-top:25px;

    border-radius:10px;

    text-align:center;

}

.alert-error i{

    font-size:45px;

    margin-bottom:15px;

}