/* =====================================
SERVICE BANNER
===================================== */

.service-banner{
position:relative;

height:450px;

background:
url('../images/mining-banner.jpg')
center center/cover no-repeat;

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

}

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

background:
linear-gradient(
    rgba(6,58,89,.88),
    rgba(14,125,159,.75)
);

}

.service-banner .banner-content{
position:relative;
z-index:2;

color:white;
text-align:center;

}

.service-banner h1{
font-size:4rem;
margin-bottom:15px;

}

.service-banner p{
font-size:1.2rem;


}

/* =====================================
SERVICE OVERVIEW
===================================== */

.service-overview{
background:white;

}

.service-grid{
display:grid;
grid-template-columns:45% 55%;
gap:80px;
align-items:center;

}

.service-image img{
width:100%;
max-height:550px;
object-fit:cover;
border-radius:20px;
box-shadow:var(--shadow);

}

.service-text h2{
color:var(--primary-dark);
font-size:2.7rem;
margin:15px 0 25px;

}

.service-text p{
color:var(--gray);
margin-bottom:25px;
text-align:justify;

}

/* =====================================
CAPABILITIES
===================================== */

.capabilities{
background:var(--light);

}

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

}

.capability-card{
background:white;
padding:40px;
border-radius:15px;
text-align:center;
box-shadow:var(--shadow);
transition:.4s;

}

.capability-card:hover{
transform:translateY(-10px);
border-bottom:
5px solid var(--primary-green);

}

.capability-card i{
font-size:55px;
color:var(--primary-green);
margin-bottom:20px;

}

.capability-card h3{
margin-bottom:15px;
color:var(--primary-dark);

}

/* =====================================
SOLUTIONS GRID
===================================== */

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

}

.solution-card{
background:white;
padding:35px;
border-radius:15px;
box-shadow:var(--shadow);
transition:.4s;

}

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

}

.solution-card i{
font-size:50px;
color:var(--primary-green);
margin-bottom:20px;

}

.solution-card h3{
margin-bottom:20px;
color:var(--primary-dark);

}

.solution-card p{
color:var(--gray);

}

/* =====================================
DARK SECTION
===================================== */

.dark-service-section{
background:
linear-gradient(
    rgba(6,58,89,.95),
    rgba(6,58,89,.95)
);

color:white;

}

.dark-service-section h2{
color:white;
margin-bottom:30px;

}

.dark-service-section p{
color:#d8d8d8;

}

/* =====================================
GIS SECTION
===================================== */

.gis-grid{
display:grid;
grid-template-columns:55% 45%;
gap:80px;
align-items:center;

}

.gis-image img{
border-radius:20px;
box-shadow:var(--shadow);

}

.gis-content h2{
color:var(--primary-dark);
margin-bottom:25px;

}

.gis-content p{
color:var(--gray);
margin-bottom:20px;

}

/* =====================================
WHY ECOSOLVE
===================================== */

.why-service{
background:var(--light);

}

.why-list{
display:grid;
grid-template-columns:
repeat(2,1fr);
gap:25px;

}

.why-item{
display:flex;
align-items:flex-start;
gap:20px;

}

.why-item i{
color:var(--primary-green);
font-size:22px;
margin-top:4px;

}

.why-item h4{
margin-bottom:8px;
color:var(--primary-dark);

}

.why-item p{
color:var(--gray);

}

/* =====================================
RELATED SERVICES
===================================== */

.related-grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:30px;

}

.related-card{
background:white;
padding:40px;
border-radius:15px;
text-align:center;
box-shadow:var(--shadow);
transition:.4s;

}

.related-card:hover{
transform:translateY(-10px);
border-bottom:
5px solid var(--primary-green);

}

.related-card i{
font-size:55px;
color:var(--primary-green);
margin-bottom:20px;

}

.related-card h3{
color:var(--primary-dark);
margin-bottom:15px;

}

.related-card p{
color:var(--gray);

}

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

.service-cta{
position:relative;
background:
linear-gradient(
    rgba(6,58,89,.9),
    rgba(6,58,89,.9)
),
url('../images/cta-bg.jpg')
center center/cover;

text-align:center;

color:white;

}

.service-cta h2{
font-size:3rem;
margin-bottom:20px;

}

.service-cta p{
max-width:700px;
margin:auto auto 35px;
color:#e2e2e2;

}

/* =====================================
ANIMATIONS
===================================== */

.capability-card,
.solution-card,
.related-card{

transition:.4s ease;


}