/* =========================================
NAVBAR
========================================= */




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

.services-hero{
height:100vh;
position:relative;

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

overflow:hidden;
}

.services-hero video{
position:absolute;
top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;
}

.hero-overlay{
position:absolute;
inset:0;

background:
linear-gradient(
to bottom,
rgba(0,0,0,0.45),
rgba(0,0,0,0.9)
);
}

.hero-content{
position:relative;
z-index:2;

max-width:950px;
text-align:center;
padding:20px;
}

.hero-tag{
display:inline-block;

margin-bottom:25px;

font-size:14px;
letter-spacing:3px;

color:var(--gold);
}

.hero-content p{
max-width:700px;
margin:auto;
margin-top:30px;
margin-bottom:40px;
}

.hero-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

/* =========================================
INTRO
========================================= */

.services-intro{
text-align:center;
}

.intro-text{
max-width:850px;
margin:auto;
font-size:20px;
line-height:1.9;
}

/* =========================================
SERVICES GRID
========================================= */

.services-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.service-card{
height:420px;
position:relative;

overflow:hidden;
border-radius:14px;

transition:0.5s;
}

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

.service-overlay{
position:absolute;
inset:0;

display:flex;
flex-direction:column;
justify-content:flex-end;

padding:30px;

background:
linear-gradient(
transparent,
rgba(0,0,0,0.96)
);
}

.service-overlay h3{
margin-bottom:15px;
}

/* =========================================
BACKGROUNDS
========================================= */

.service1{
background:url('../assets/images/services1.jpeg') center/cover;
}

.service2{
background:url('../assets/images/services2.jpeg') center/cover;
}

.service3{
background:url('../assets/images/services3.jpeg') center/cover;
}

.service4{
background:url('../assets/images/services4.jpeg') center/cover;
}

.service5{
background:url('../assets/images/services5.jpeg') center/cover;
}

.service6{
background:url('../assets/images/services6.jpeg') center/cover;
}

.service7{
background:url('../assets/images/services7.jpeg') center/cover;
}

.service8{
background:url('../assets/images/services8.jpeg') center/cover;
}

/* =========================================
PROCESS
========================================= */

.process-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.process-card{
background:#111;
padding:45px 35px;
border-radius:14px;
}

.process-card span{
display:block;

font-size:58px;
font-weight:700;

color:var(--gold);

margin-bottom:25px;
}

/* =========================================
STATS
========================================= */

.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.stat-box{
text-align:center;
padding:40px 20px;
}

.stat-box h3{
font-size:56px;
color:var(--gold);
margin-bottom:15px;
}

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

.services-cta{
text-align:center;

background:
linear-gradient(
rgba(0,0,0,0.78),
rgba(0,0,0,0.92)
),
url('../images/cta-bg.jpg') center/cover;
}

.services-cta p{
margin-top:20px;
margin-bottom:40px;
}

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

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

/* =========================================
ANIMATION
========================================= */

.reveal{
opacity:0;
transform:translateY(60px);
transition:1s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1100px){

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

.process-grid,
.stats-grid{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:768px){

.services-grid,
.process-grid,
.stats-grid{
grid-template-columns:1fr;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

}

@keyframes menuFade{

from{
opacity:0;
transform:translateY(-10px);
}

to{
opacity:1;
transform:translateY(0);
}

}