/* Services Hero Section - FIXED */

.services-hero-section {
position: relative;
height: 500px;
width: 100vw; /* Full viewport width */
margin-left: calc(-50vw + 50%); /* Center and expand to full width */
background: linear-gradient(135deg, rgba(0,123,255,0.7), rgba(40,167,69,0.6)),
url('../images/services-hero-bg.jpg'); /* Added background image */
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
align-items: center;
color: white;
margin-bottom: 0;
}

.services-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
}

.hero-content {
position: relative;
z-index: 2;
text-align: center;
width: 100%;
}

.hero-title {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-subtitle {
font-size: 1.3rem;
font-weight: 300;
margin-bottom: 0;
opacity: 0.95;
}

/* Portfolio Header */
.portfolio-header {
background: #f8f9fa;
padding: 60px 0;
text-align: center;
}

.section-title {
font-size: 2.5rem;
font-weight: 700;
color: #333;
margin-bottom: 1rem;
}

.section-subtitle {
font-size: 1.1rem;
color: #666;
margin-bottom: 0;
}

/* Services Portfolio Wrapper */
.services-portfolio-wrapper {
background: #fff;
}

/* Service Sections */
.service-section {
padding: 100px 0;
position: relative;
}

.service-section:nth-child(even) {
background: white;
}

.service-section:nth-child(odd) {
background: #f8f9fa;
}

/* =================================================================
IMAGE SIZING & POSITIONING CONTROLS - REFINED TO MATCH ORIGINAL
================================================================= */

/* Service Image Wrapper - CONTROLS OVERALL CONTAINER SIZE */
.service-image-wrapper {
position: relative;
height: 690px; /* INCREASED: Container height */
padding-left: 50px;
}

/* FIXED: Thicker Colored Bar */
.service-color-bar {
position: absolute;
left: 0;
top: 50px;
bottom: 50px;
width: 12px !important;
background: #00bcd4;
border-radius: 6px;
z-index: 5;
}

/* Service Images Stack */
.service-images {
position: relative;
width: 100%;
height: 100%;
}

.service-image {
position: absolute;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.service-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
}

/* REFINED: Back image - VERTICAL (TALL) IMAGE - Match original positioning */
.service-image-back {
top: 0;                    /* Distance from top */
left: 50px;               /* REFINED: Keep distance from left edge (like original) */
width: 336px;             /* Size: Width (+20%) */
height: 540px;            /* Size: Height (+20%) */
z-index: 2;
background: #e8f5e8;
}

/* REFINED: Front image - HORIZONTAL (WIDE) IMAGE - Better overlap like original */
.service-image-front {
bottom: 100px;            /* REFINED: More space from bottom for proper overlap */
right: 50px;              /* REFINED: Some distance from right edge (like original) */
width: 480px;             /* Size: Width (+20%) */
height: 336px;            /* Size: Height (+20%) */
z-index: 3;
background: #fff3e0;
}

/* =================================================================
END OF IMAGE CONTROLS
================================================================= */

/* Service Content */
.service-content {
padding-left: 80px;
}

/* FIXED: Small Title - White Text on Colored Background */
.service-welcome-text {
color: #ffffff !important;
background-color: #00bcd4;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
position: relative;
z-index: 10;
display: inline-block;
padding: 8px 16px;
border-radius: 4px;
}

.service-welcome-text::after {
content: '';
position: absolute;
left: 0;
bottom: -8px;
width: 50px;
height: 2px;
background: #00bcd4;
}

.service-title {
font-size: 2.8rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 40px;
line-height: 1.2;
}

/* Service Features List */
.service-features-list {
margin-bottom: 40px;
}

.service-feature-item {
display: flex;
align-items: flex-start;
margin-bottom: 35px;
}

/* =================================================================
ICON OVERRIDES - SERVICES FIELDS ICONS ONLY (PERFECT - DON'T CHANGE)
================================================================= */

/* Override background colors for service sections ONLY - keeping color bars and welcome text */
.services-portfolio-wrapper .service-section.maintenance .service-color-bar,
.services-portfolio-wrapper .service-section.maintenance .service-welcome-text {
background-color: #ff9800 !important;
}

.services-portfolio-wrapper .service-section.maintenance .feature-icon {
background-color: transparent !important;
}

.services-portfolio-wrapper .service-section.elevators .service-color-bar,
.services-portfolio-wrapper .service-section.elevators .service-welcome-text {
background-color: #00bcd4 !important;
}

.services-portfolio-wrapper .service-section.elevators .feature-icon {
background-color: transparent !important;
}

.services-portfolio-wrapper .service-section.escalators .service-color-bar,
.services-portfolio-wrapper .service-section.escalators .service-welcome-text {
background-color: #4caf50 !important;
}

.services-portfolio-wrapper .service-section.escalators .feature-icon {
background-color: transparent !important;
}

/* Override ONLY the service features list icons - HIGHEST SPECIFICITY */
.services-portfolio-wrapper .service-section .service-content .service-features-list .service-feature-item .feature-icon {
width: 70px !important;
height: 70px !important;
background-color: transparent !important;
border-radius: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #00bcd4 !important;
margin-right: 25px !important;
flex-shrink: 0 !important;
border: none !important;
box-shadow: none !important;
}

/* Category-specific icon colors - ONLY for service features */
.services-portfolio-wrapper .service-section.elevators .service-content .service-features-list .service-feature-item .feature-icon {
color: #00bcd4 !important; /* Blue for elevators */
}

.services-portfolio-wrapper .service-section.escalators .service-content .service-features-list .service-feature-item .feature-icon {
color: #4caf50 !important; /* Green for escalators */
}

.services-portfolio-wrapper .service-section.maintenance .service-content .service-features-list .service-feature-item .feature-icon {
color: #ff9800 !important; /* Orange for maintenance */
}

/* Override SVG icon size ONLY for service features - NOT nav menu */
.services-portfolio-wrapper .service-section .service-content .service-features-list .service-feature-item .feature-icon .svg-inline--fa {
display: var(--fa-display, inline-block) !important;
height: 3em !important; /* Increased from 1em to 3em - ONLY for service features */
width: 3em !important;
overflow: visible !important;
vertical-align: -.125em !important;
}

/* Alternative FontAwesome override ONLY for service features */
.services-portfolio-wrapper .service-section .service-content .service-features-list .service-feature-item .feature-icon i {
font-size: 3rem !important;
background: transparent !important;
background-color: transparent !important;
border-radius: 0 !important;
}

/* Override any FontAwesome classes ONLY in service features */
.services-portfolio-wrapper .service-section .service-content .service-features-list .service-feature-item .feature-icon i.fas,
.services-portfolio-wrapper .service-section .service-content .service-features-list .service-feature-item .feature-icon i.far,
.services-portfolio-wrapper .service-section .service-content .service-features-list .service-feature-item .feature-icon i.fab {
color: inherit !important;
background: transparent !important;
background-color: transparent !important;
font-size: 3rem !important;
}

/* =================================================================
END OF ICON CONTROLS
================================================================= */

/* Feature content styling */
.feature-content h4 {
font-size: 1.4rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 8px;
}

.feature-content p {
color: #6c757d;
margin-bottom: 0;
font-size: 1rem;
line-height: 1.7;
}

/* Responsive Design */
@media (max-width: 768px) {
.services-hero-section {
height: 350px;
margin-left: calc(-50vw + 50%);
}

.hero-title {
font-size: 2.5rem;
}

.section-title {
font-size: 2rem;
}

.service-section {
padding: 60px 0;
}

/* MOBILE IMAGE CONTROLS - REFINED */
.service-image-wrapper {
height: 580px; /* Increased for mobile too */
margin-bottom: 50px;
padding-left: 40px;
}

.service-content {
padding-left: 30px;
}

.service-title {
font-size: 2.2rem;
}

.portfolio-header {
padding: 40px 0;
}

/* MOBILE: Back image - VERTICAL (+20%) - REFINED */
.service-image-back {
top: 0;
left: 40px;               /* REFINED: Keep some distance from left */
width: 240px;             /* +20% from mobile base */
height: 384px;            /* +20% from mobile base */
}

/* MOBILE: Front image - HORIZONTAL (+20%) - REFINED */
.service-image-front {
bottom: 80px;             /* REFINED: Better overlap positioning */
right: 30px;              /* REFINED: Some distance from right */
width: 336px;             /* +20% from mobile base */
height: 240px;            /* +20% from mobile base */
}

.service-color-bar {
width: 10px !important;
}

/* Mobile responsive icon sizes */
.services-portfolio-wrapper .service-section .service-content .service-features-list .service-feature-item .feature-icon .svg-inline--fa {
height: 2.5em !important;
width: 2.5em !important;
}

.services-portfolio-wrapper .service-section .service-content .service-features-list .service-feature-item .feature-icon i {
font-size: 2.5rem !important;
}
}

@media (max-width: 576px) {
.service-image-wrapper {
height: 480px;
padding-left: 30px;
}

.service-content {
padding-left: 20px;
}

.service-title {
font-size: 1.8rem;
}

/* SMALL MOBILE: Images (+20%) - REFINED */
.service-image-back {
top: 0;
left: 30px;               /* REFINED: Keep some distance from left */
width: 192px;             /* +20% from small mobile base */
height: 312px;            /* +20% from small mobile base */
}

.service-image-front {
bottom: 60px;             /* REFINED: Better overlap positioning */
right: 20px;              /* REFINED: Some distance from right */
width: 288px;             /* +20% from small mobile base */
height: 192px;            /* +20% from small mobile base */
}

.feature-icon {
width: 60px !important;
height: 60px !important;
}

.service-color-bar {
width: 8px !important;
}

/* Small mobile responsive icon sizes */
.services-portfolio-wrapper .service-section .service-content .service-features-list .service-feature-item .feature-icon .svg-inline--fa {
height: 2.2em !important;
width: 2.2em !important;
}

.services-portfolio-wrapper .service-section .service-content .service-features-list .service-feature-item .feature-icon i {
font-size: 2.2rem !important;
}
}