.elementor-21 .elementor-element.elementor-element-1f066c7{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-036265b *//* ===========================
   HERO SECTION CSS
=========================== */

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

.hero{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
}

.slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:cover;
background-position:center;
opacity:0;
visibility:hidden;
transition:1s ease;
}

.slide.active{
opacity:1;
visibility:visible;
}

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

.hero-content{
position:absolute;
top:50%;
left:8%;
transform:translateY(-50%);
color:#fff;
max-width:650px;
z-index:10;
}

.badge{
display:inline-block;
padding:10px 20px;
background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.3);
backdrop-filter:blur(12px);
border-radius:40px;
font-size:14px;
font-weight:600;
margin-bottom:20px;
}

.hero-content h1{
font-size:68px;
font-weight:700;
line-height:1.1;
margin-bottom:20px;
}

.hero-content p{
font-size:18px;
line-height:1.8;
color:#f1f1f1;
margin-bottom:35px;
max-width:600px;
}

.hero-buttons{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.btn{
display:inline-block;
padding:14px 30px;
border-radius:40px;
text-decoration:none;
font-weight:600;
font-size:15px;
transition:.4s;
}

.call-btn{
background:#ff4b2b;
color:#fff;
}

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

.whatsapp-btn{
background:#25D366;
color:#fff;
}

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

.quote-btn{
background:#fff;
color:#222;
}

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

/* Navigation */

#prev,
#next{

position:absolute;
top:50%;
transform:translateY(-50%);
width:55px;
height:55px;
border-radius:50%;
border:none;
cursor:pointer;
background:rgba(255,255,255,.2);
backdrop-filter:blur(10px);
color:#fff;
font-size:24px;
transition:.3s;
z-index:20;

}

#prev:hover,
#next:hover{

background:#ff4b2b;

}

#prev{

left:30px;

}

#next{

right:30px;

}

/* Dots */

.dots{

position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:12px;
z-index:30;

}

.dot{

width:14px;
height:14px;
background:#fff;
border-radius:50%;
opacity:.4;
cursor:pointer;
transition:.4s;

}

.dot.active{

opacity:1;
background:#ff4b2b;
transform:scale(1.2);

}

/* Animation */

.slide.active .hero-content{

animation:fadeUp 1.2s ease;

}

@keyframes fadeUp{

0%{

opacity:0;
transform:translateY(80px);

}

100%{

opacity:1;
transform:translateY(-50%);

}

}

/* Mobile */

@media(max-width:992px){

.hero-content{

left:6%;
max-width:90%;

}

.hero-content h1{

font-size:48px;

}

}

@media(max-width:768px){

.hero{

height:90vh;

}

.hero-content{

left:20px;
right:20px;
max-width:100%;

}

.badge{

font-size:12px;

}

.hero-content h1{

font-size:34px;

}

.hero-content p{

font-size:15px;

}

.hero-buttons{

flex-direction:column;

}

.btn{

width:210px;
text-align:center;

}

#prev,
#next{

width:42px;
height:42px;
font-size:18px;

}

}/* End custom CSS */