/* Start custom CSS for html, class: .elementor-element-c12dae8 *//*===============================
SERVICES HERO
===============================*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.services-hero{
padding:100px 7%;
background:#faf8f5;
overflow:hidden;
}
.container{
max-width:1400px;
margin:auto;
display:grid;
grid-template-columns:1.1fr 1fr;
gap:70px;
align-items:center;
}
.hero-subtitle{
display:inline-block;
color:#C59D5F;
font-weight:600;
letter-spacing:3px;
text-transform:uppercase;
margin-bottom:20px;
}
.hero-content h1{
font-size:62px;
line-height:1.1;
margin-bottom:25px;
font-weight:700;
color:#111;
}
.hero-content p{
font-size:18px;
line-height:1.9;
color:#666;
margin-bottom:40px;
max-width:580px;
}
.hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
}
.btn-primary{
background:#111;
color:#fff;
padding:16px 34px;
text-decoration:none;
border-radius:50px;
transition:.4s;
}
.btn-primary:hover{
background:#C59D5F;
}
.btn-secondary{
border:2px solid #111;
color:#111;
padding:16px 34px;
text-decoration:none;
border-radius:50px;
transition:.4s;
}
.btn-secondary:hover{
background:#111;
color:#fff;
}
.hero-gallery{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}
.image-card{
overflow:hidden;
border-radius:22px;
height:280px;
box-shadow:0 20px 40px rgba(0,0,0,.12);
transition:.5s;
}
.image-card:nth-child(2){
margin-top:50px;
}
.image-card:nth-child(3){
margin-top:-50px;
}
.image-card img{
width:100%;
height:100%;
object-fit:cover;
transition:.6s;
}
.image-card:hover{
transform:translateY(-10px);
}
.image-card:hover img{
transform:scale(1.08);
}
@media(max-width:991px){
.container{
grid-template-columns:1fr;
}
.hero-gallery{
margin-top:40px;
}
.hero-content h1{
font-size:42px;
}
}
@media(max-width:768px){
.hero-gallery{
grid-template-columns:1fr 1fr;
}
.image-card{
height:200px;
}
.hero-content h1{
font-size:34px;
}
.hero-content p{
font-size:16px;
}
}/* End custom CSS */