:root{
--primary:#373435;
--secondary:#fff212;
--text:#2d2d2d;
--white:#ffffff;
--radius:30px;
--transition:.3s;
}

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Rajdhani',sans-serif;
background:#f7f7f7;
color:var(--text);
line-height:1.6;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

.container{
max-width:1280px;
}


.container-in{
max-width:1180px;
}

/* ==========================
TOP BAR
========================== */

.top-bar-wrapper{
    background-color: #373435;
}

.top-bar{
    height:40px;
    padding:0px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.top-bar i{
    color:#fff212;
}

.top-left,
.top-right{
    color:#fff;
    font-size:16px;
}

/* ==========================
HEADER
========================== */

.main-header{
background:#f7f7f7;
margin-top: 20px;
}

.navbar{
min-height:90px;
font-size:18px;
}

.navbar-brand img{
max-height:100px;
margin-bottom: 25px;
}

.nav-link{
color:#222;
font-weight:600;
margin:0 12px;
transition:var(--transition);
}

.nav-link:hover{
color:var(--primary);
}

.btn-header{


padding:14px 28px;

background:var(--primary);

color:#fff;

border-radius:50px;

font-weight:600;

transition:var(--transition);


}

.btn-header:hover

/* ==========================
HERO
========================== */

.hero-slider{
padding:25px 0 50px;
}

#heroCarousel{
overflow:hidden;
border-radius:15px;
background-color: #fff212;
}

.carousel-item img{
    animation: zoomBanner 12s linear forwards;
}

@keyframes zoomBanner{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.08);
    }

}

#heroCarousel .carousel-item{
height:550px;
}

#heroCarousel img{
width:100%;
height:100%;
object-fit:cover;
}

.carousel-control-prev,
.carousel-control-next{
width:90px;
}

.slider-arrow{


width:65px;
height:65px;

border-radius:50%;

//*background:rgba(255,255,255,.95);*//

display:flex;

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

font-size:3rem;

color:#fff212;


}

.carousel-indicators{
bottom:25px;
}

.carousel-indicators button{


width:12px !important;
height:12px !important;

border-radius:50%;


}

/* ==========================
CLIENTES
========================== */

.clients{
padding:80px 0;
background:#fff;
}

.clients .col{
text-align:center;
}

.clients img{
max-height:55px;
margin:auto;
opacity:.7;
}

/* ==========================
SOBRE
========================== */

.about{
padding:80px 0;
}

.about img{
border-radius:25px;
}

.section-tag{
color:var(--primary);
font-size:16px;
font-weight:900;
text-transform:uppercase;

}

.about h2{
font-size:3.6rem;
line-height:2.8rem;
margin:0;
font-weight:900;
text-transform:uppercase;
}

.about p{
font-family: 'Montserrat', sans-serif;
font-size: 15px;
line-height: 20px;
font-weight: 500;
padding-top: 8px;
}

/* ==========================
SERVIÇOS
========================== */

.services{
padding:120px 0;
}

.section-header{
text-align:center;
margin-bottom:60px;
}

.section-header h2{
font-size:3rem;
margin-top:15px;
}

.service-card{


background:#fff;

border-radius:25px;

overflow:hidden;

box-shadow:
0 10px 30px rgba(0,0,0,.06);

transition:.3s;

height:100%;


}

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

.service-card img{
height:260px;
width:100%;
object-fit:cover;
}

.service-card h4{
padding:25px 25px 10px;
}

.service-card p{
padding:0 25px 25px;
}

/* ==========================
ESTATÍSTICAS
========================== */

.stats{
padding:120px 0;
background:#fff;
}

.stats h2{


font-size:4rem;

color:var(--primary);

font-weight:700;


}

.stats span{
font-size:18px;
}

/* ==========================
DIFERENCIAIS
========================== */

.features{
padding:120px 0;
}

.feature-box{


background:#fff;

padding:40px;

border-radius:20px;

text-align:center;

height:100%;

box-shadow:
0 10px 30px rgba(0,0,0,.05);


}

.feature-box h4{
margin-top:20px;
}

/* ==========================
CTA
========================== */

.cta{


padding:120px 0;

background:var(--primary);

color:#fff;


}

.cta h2{
font-size:3rem;
margin-bottom:25px;
}

.cta .btn{
padding:15px 35px;
border-radius:50px;
}

/* ==========================
CONTATO
========================== */

.contact{
padding:120px 0;
}

.contact h2{
font-size:3rem;
margin-bottom:30px;
}

.form-control{


height:55px;

margin-bottom:20px;

border-radius:12px;


}

textarea.form-control{
height:180px;
}

.contact button{


padding:15px 40px;

border-radius:50px;


}

/* ==========================
FOOTER
========================== */

footer{


background:#101010;

color:#fff;

padding:80px 0 30px;


}

.footer-top{
margin-bottom:40px;
}

.footer-bottom{


border-top:1px solid rgba(255,255,255,.1);

padding-top:30px;

text-align:center;


}

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

@media(max-width:991px){


#heroCarousel .carousel-item{
    height:450px;
}

.about h2,
.section-header h2,
.contact h2,
.cta h2{
    font-size:2.2rem;
}

.stats h2{
    font-size:3rem;
}


}

@media(max-width:768px){


.top-bar{
    display:none;
}

.btn-header{
    display:none;
}

#heroCarousel{
    border-radius:20px;
}

#heroCarousel .carousel-item{
    height:280px;
}

.about,
.services,
.stats,
.features,
.contact,
.cta{
    padding:80px 0;
}


}




.footer-brand{
    display: inline-block;
}

.footer-brand img{
    width: 220px;
    height: auto;
    display: block;
}

.social-icons{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.social-icons a{
    color:#fff;
    font-size:20px;
}
.social-icons a:hover{
    color: #FFD400;
    transform: translateY(-2px);
}



.footer-contact p{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:2px;
    color:#fff;
    line-height:1.0;
}

.footer-contact i{
    color:#FFD400;
    font-size:10px;
    min-width:12px;
    margin-top:0px;
}

.footer-contact strong{
    display:block;
    margin-bottom:5px;
}

.footer-contact span{
    font-size: 22px;
    line-height: 25px;
}




.footer-copy .fa-youtube{
    font-size: 42px; /* tamanho do ícone */
    color: #fff;
    transition: .3s;
    margin-right: 100px;
}

.footer-copy .fa-youtube:hover{
    color: #FF0000;
}



.btn-whatsapp{
    max-width: 70px;
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 9999;

    animation: pulse 2s infinite;
}

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


@media (max-width:768px){

    .btn-whatsapp{
        right: 15px;
        bottom: 15px;
    }

    .btn-whatsapp img{
        width: 60px;
    }

}