/* Enhanced Services Section Styles with Mask Reveal Effect */
.services-container {
    padding: 0;
    margin: 0;
    position: relative;
    overflow: visible;
    width: 100vw;
    max-width: 100%;
    /* Add a transition for background color changes */
    transition: background-color 0.8s ease;
}

/* Updated Background colors for different service sections */ 
.services-container[data-active-service="0"] { 
    background-color: #101010; /* Black background */ 
} 
.services-container[data-active-service="1"] { 
    background-color: #00F6A7; /* Teal background */ 
} 
.services-container[data-active-service="2"] { 
    background-color: #101010; /* Black background */ 
} 

/* You can add more alternating patterns if you have more services */ 
.services-container[data-active-service="3"] { 
    background-color: #00F6A7; /* Teal background */ 
}
.services-container[data-active-service="4"] { 
    background-color: #101010; /* Teal background */ 
}
.services-container[data-active-service="5"] { 
    background-color: #00F6A7; /* Teal background */ 
}
/* Layout visibility control */
.services-desktop-layout,
.services-tablet-layout,
.services-mobile-layout {
    display: none; /* Hide all layouts by default */
}

/* Desktop Services Layout for Apple-style Pinned Scrolling Effect */ 
@media screen and (min-width: 1024px) { 
    .services-desktop-layout { 
        display: flex; 
        height: auto;
        width: 100%;
        position: relative;
    } 
    
    /* Left side - scrollable content */ 
    .services-list-container { 
        flex: 1;
        padding-right: 40px;
        padding-left: 40px;
    } 
    
    /* Right side - fixed/pinned content */ 
    .services-progress-container { 
        flex: 1;
        height: 100vh;
        position: sticky; /* This is key for pinning without GSAP */
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    } 
    
    /* Individual service cards */ 
    .service-card { 
        min-height: 100vh;
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        align-items: flex-start;
        padding: 0 30px;
        position: relative;
        opacity: 0.5; /* Dim inactive cards */
        transition: opacity 0.5s ease;
    } 
    
    .service-card.active {
        opacity: 1; /* Full opacity for active card */
    }
    
    /* Space out service cards to create natural scroll points */ 
    .service-card:first-child { 
        padding-top: 15vh;
    } 
    
    .service-card:last-child { 
        padding-bottom: 20vh;
    }
}

/* Progress Indicator Styles - Removed the progress bar, kept only the number */
.services-progress-indicator {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.current-service-number {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    transition: all 0.3s ease;
    display: none; /* Hide the service number */
}

/* Progress bar container and bar removed */

/* Enhanced Service Image Container with CSS-only Mask Reveal */ 
.service-image-container { 
    width: 75%; 
    height: 65%; 
    position: relative; 
    border-radius: 15px; 
    overflow: hidden; 
    margin-left: 100px; 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); 
} 

/* Mask reveal effect wrapper */ 
.mask-reveal-wrapper { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

/* Enhanced service image styles for CSS transitions */ 
.service-image { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    clip-path: inset(100% 0 0 0); /* Initial mask state */
    transform: translateY(0); /* Prevent vertical offset to avoid gaps */
    will-change: clip-path, opacity; /* Optimize for animations */
    transition: opacity 0.5s ease-out, clip-path 0.5s ease-out; /* Add smooth transition */
    backface-visibility: hidden; /* Prevent flickering during transitions */
}

/* Make sure images inside fill the container */
.service-image img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* Service Card Styles */ 
.service-card { 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: flex-start; 
    padding: 0 30px; 
    position: relative; 
    opacity: 0.5; /* Dim inactive cards */ 
    transition: opacity 0.5s ease; 
} 

.service-card.active { 
    opacity: 1; /* Full opacity for active card */ 
}

/* Modified Service Icon Container - Changed dimensions and removed shine effect */ 
.service-icon-container { 
    background: linear-gradient(to bottom right, #66FFD1, #00B37A); /* Default gradient */ 
    border-radius: 10px; /* Rectangular with rounded corners */ 
    width: 120px; /* Updated width */ 
    height: 74px; /* Updated height */ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    /* margin-bottom: 8px;  */
    transition: background-color 0.3s; /* Removed transform to prevent shining effect */ 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Kept subtle shadow */ 
} 

/* Update alternate gradients for service cards 
.service-card:nth-child(2) .service-icon-container { 
    background: linear-gradient(to bottom right, #4A3B78, #2D1E2F); 
} 

.service-card:nth-child(3) .service-icon-container { 
    background: linear-gradient(to bottom right, #00F6A7, #2D5E54); 
} */

/* Modified service icon size */ 
.service-icon { 
    width: 50px; 
    height: 50px; 
    filter: brightness(0);/* Make icons white for visibility against black background */
}

.service-title {
    font-size: 32px;
    font-weight: bold;

    margin-bottom: 20px;
    color: #fff;
    transition: color 0.3s;
}

.service-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    max-width: 400px;
}

.service-category {
    border: 2px solid #00F6A7;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
    color: #fff;
    background-color: transparent;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

/* Added new styles for subtitle */ 
.service-subtitle { 
    display: inline-block; 
    background-color: #00F6A7; 
    color: #121212; 
    padding: 4px 10px; 
    border-radius: 4px; 
    font-size: 14px; 
    font-weight: bold; 
    margin-bottom: 16px; 
    text-transform: uppercase; 

} 

/* Added styles for description */ 
.service-description { 
    font-size: 16px; 
    line-height: 1.5; 
    color: rgba(255, 255, 255, 0.8); 
    margin-bottom: 24px; 
    max-width: 400px; 
} 

/* Removed the active scaling/shine effect */ 
.service-card.active .service-icon-container { 
    /* transform: scale(1.05); - removed */ 
    /* box-shadow: 0 8px 16px rgba(0, 246, 167, 0.3); - removed */ 
    /* No special effect on active state */ 
} 

.service-card.active .service-title { 
    color: #00F6A7; 
}

/* Alternate background color styling - When background is enabled */ 
.service-card.alternate-bg { 

    border-radius: 15px; 
    padding: 30px; 
    margin-bottom: 20px; 
} 

.service-card.alternate-bg .service-icon-container { 
    background: linear-gradient(to bottom right, #121212, #333333); 
} 

.service-card.alternate-bg .service-icon { 
    filter: brightness(1);
} 

.service-card.alternate-bg .service-title { 
    color: #121212; 
} 

.service-card.alternate-bg .service-description { 
    color: rgba(0, 0, 0, 0.8); 
} 

.service-card.alternate-bg .service-subtitle { 
    background-color: #121212; 
    color: #00F6A7; 
} 

.service-card.alternate-bg .service-category { 
    border-color: #121212; 
    color: #121212; 
} 

.service-card.alternate-bg .service-category:hover { 
    background-color: #121212; 
    color: #00F6A7; 
}

/* Tablet and Mobile layouts */
/* Tablet Layout (768px-1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .services-tablet-layout {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 0 20px;
    }
}

/* Mobile Layout (less than 768px) */
@media screen and (max-width: 767px) {
    .services-mobile-layout {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 0 20px;
    }
    
}

/* Rest of the styles remain unchanged */
.service-tablet-card {
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 30px;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.service-tablet-image {
    flex: 1;
    min-height: 300px;
}

.service-tablet-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-tablet-content {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Mobile Layout Styles */
.service-mobile-card {
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 30px;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.service-mobile-image {
    height: 200px;
}

.service-mobile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-mobile-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Service Category Animation */
.service-category:hover {
    background-color: #00F6A7;
    color: #121212;
    transform: translateY(-2px);
}

/* Reveal animation for mobile and tablet cards */
.reveal-animation {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-animation.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Section header positioning to be full width */
.section-header {
    padding: 0 40px;
    width: 100%;
}

/* Update to tablet and mobile layout */ 
.service-tablet-card .service-icon-container, 
.service-mobile-card .service-icon-container { 
    background: linear-gradient(to bottom right, #66FFD1, #00B37A); 
    border-radius: 10px; 
    width: 120px; 
    height: 74px; 
} 

.service-tablet-content.alternate-bg, 
.service-mobile-content.alternate-bg { 
    background-color: #00F6A7; 
} 

.service-tablet-content.alternate-bg .service-icon-container, 
.service-mobile-content.alternate-bg .service-icon-container { 
    background: linear-gradient(to bottom right, #121212, #333333); 
} 

.service-tablet-content.alternate-bg .service-icon, 
.service-mobile-content.alternate-bg .service-icon { 
    filter: brightness(0.9);
} 

.service-tablet-content.alternate-bg .service-title, 
.service-mobile-content.alternate-bg .service-title { 
    color: #121212; 
} 

.service-tablet-content.alternate-bg .service-description, 
.service-mobile-content.alternate-bg .service-description { 
    color: rgba(0, 0, 0, 0.8); 
} 

.service-tablet-content.alternate-bg .service-subtitle, 
.service-mobile-content.alternate-bg .service-subtitle { 
    background-color: #121212; 
    color: #00F6A7; 
} 

.service-tablet-content.alternate-bg .service-category, 
.service-mobile-content.alternate-bg .service-category { 
    border-color: #121212; 
    color: #121212; 
} 

.service-tablet-content.alternate-bg .service-category:hover, 
.service-mobile-content.alternate-bg .service-category:hover { 
    background-color: #121212; 
    color: #00F6A7; 
}

/* For dark background to light text and vice versa */ 
.services-container[data-active-service="0"] .service-title, 
.services-container[data-active-service="2"] .service-title { 
    color: #fff; /* Light text on dark background */ 
} 

.services-container[data-active-service="1"] .service-title, 
.services-container[data-active-service="3"] .service-title { 
    color: #00000000; /* Dark text on light background */ 
} 

.services-container[data-active-service="0"] .service-description, 
.services-container[data-active-service="2"] .service-description { 
    color: rgba(255, 255, 255, 0.8); /* Light text with transparency on dark background */ 
} 

.services-container[data-active-service="1"] .service-description, 
.services-container[data-active-service="3"] .service-description { 
    color: rgba(0, 0, 0, 0.8); /* Dark text with transparency on light background */ 
} 

/* Ensure service cards maintain proper contrast when background changes */ 
.services-container[data-active-service="1"] .service-card.active .service-title { 
    color: #000; /* Ensure dark text on teal background */ 
}
/* Enhanced text color contrast rules for teal backgrounds */

/* Global rule to ensure all text within teal background becomes black */
.services-container[data-active-service="1"] *:not(.service-subtitle):not(.service-category):not(button):not(a),
.services-container[data-active-service="3"] *:not(.service-subtitle):not(.service-category):not(button):not(a),
.services-container[data-active-service="5"] *:not(.service-subtitle):not(.service-category):not(button):not(a) {
    color: #000000 !important; /* Use !important to override other styles */
}

/* Fix for service titles in all layouts */
.services-container[data-active-service="1"] .service-title,
.services-container[data-active-service="3"] .service-title,
.services-container[data-active-service="5"] .service-title {
    color: #000000 !important;
}

/* Fix for service descriptions in all layouts */
.services-container[data-active-service="1"] .service-description,
.services-container[data-active-service="3"] .service-description,
.services-container[data-active-service="5"] .service-description {
    color: rgba(0, 0, 0, 0.8) !important;
}

/* Specific fixes for tablet and mobile layouts */
@media screen and (max-width: 1023px) {
    /* Tablet content */
    .services-container[data-active-service="1"] .service-tablet-content *:not(.service-subtitle):not(.service-category),
    .services-container[data-active-service="3"] .service-tablet-content *:not(.service-subtitle):not(.service-category),
    .services-container[data-active-service="5"] .service-tablet-content *:not(.service-subtitle):not(.service-category) {
        color: #000000 !important;
    }
    
    /* Mobile content */
    .services-container[data-active-service="1"] .service-mobile-content *:not(.service-subtitle):not(.service-category),
    .services-container[data-active-service="3"] .service-mobile-content *:not(.service-subtitle):not(.service-category),
    .services-container[data-active-service="5"] .service-mobile-content *:not(.service-subtitle):not(.service-category) {
        color: #000000 !important;
    }
    
    /* Make sure description text is properly styled */
    .services-container[data-active-service="1"] .service-mobile-content .service-description,
    .services-container[data-active-service="1"] .service-tablet-content .service-description,
    .services-container[data-active-service="3"] .service-mobile-content .service-description,
    .services-container[data-active-service="3"] .service-tablet-content .service-description,
    .services-container[data-active-service="5"] .service-mobile-content .service-description,
    .services-container[data-active-service="5"] .service-tablet-content .service-description {
        color: rgba(0, 0, 0, 0.8) !important;
    }
}

/* Ensure special elements maintain their proper colors */
.services-container[data-active-service="1"] .service-subtitle,
.services-container[data-active-service="3"] .service-subtitle,
.services-container[data-active-service="5"] .service-subtitle {
    background-color: #121212 !important;
    color: #00F6A7 !important;
}

.services-container[data-active-service="1"] .service-category,
.services-container[data-active-service="3"] .service-category,
.services-container[data-active-service="5"] .service-category {
    border-color: #121212 !important;
    color: #121212 !important;
}

/* Fix hover state for service categories */
.services-container[data-active-service="1"] .service-category:hover,
.services-container[data-active-service="3"] .service-category:hover,
.services-container[data-active-service="5"] .service-category:hover {
    background-color: #121212 !important;
    color: #00F6A7 !important;
}
/* Mobile and Tablet Text Color Fix for Teal Background */

/* Create more specific selectors for mobile and tablet layouts */
@media screen and (max-width: 1023px) {
    /* Target all teal background containers regardless of which service is active */
    .services-container[data-active-service="1"] .service-mobile-content,
    .services-container[data-active-service="3"] .service-mobile-content,
    .services-container[data-active-service="5"] .service-mobile-content,
    .services-container[data-active-service="1"] .service-tablet-content,
    .services-container[data-active-service="3"] .service-tablet-content,
    .services-container[data-active-service="5"] .service-tablet-content {
        /* Ensure mobile/tablet content uses correct text color on teal background */
        color: #000000;
    }

    /* Specifically target the title elements */
    .services-container[data-active-service="1"] .service-mobile-content .service-title,
    .services-container[data-active-service="3"] .service-mobile-content .service-title,
    .services-container[data-active-service="5"] .service-mobile-content .service-title,
    .services-container[data-active-service="1"] .service-tablet-content .service-title,
    .services-container[data-active-service="3"] .service-tablet-content .service-title,
    .services-container[data-active-service="5"] .service-tablet-content .service-title {
        color: #000000 !important;
    }

    /* Specifically target description text */
    .services-container[data-active-service="1"] .service-mobile-content .service-description,
    .services-container[data-active-service="3"] .service-mobile-content .service-description,
    .services-container[data-active-service="5"] .service-mobile-content .service-description,
    .services-container[data-active-service="1"] .service-tablet-content .service-description,
    .services-container[data-active-service="3"] .service-tablet-content .service-description,
    .services-container[data-active-service="5"] .service-tablet-content .service-description {
        color: rgba(0, 0, 0, 0.8) !important;
    }
}

/* Direct targeting for alternate background cards which may be influencing color */
.service-tablet-content.alternate-bg,
.service-mobile-content.alternate-bg {
    color: #000000;
}

.service-tablet-content.alternate-bg .service-title,
.service-mobile-content.alternate-bg .service-title {
    color: #000000 !important;
}

.service-tablet-content.alternate-bg .service-description,
.service-mobile-content.alternate-bg .service-description {
    color: rgba(0, 0, 0, 0.8) !important;
}

/* Fix for direct text children in mobile/tablet layouts regardless of data attribute*/
@media screen and (max-width: 1023px) {
    .services-container[data-active-service="1"] .service-mobile-card *:not(.service-subtitle):not(.service-category):not(button):not(a),
    .services-container[data-active-service="3"] .service-mobile-card *:not(.service-subtitle):not(.service-category):not(button):not(a),
    .services-container[data-active-service="5"] .service-mobile-card *:not(.service-subtitle):not(.service-category):not(button):not(a),
    .services-container[data-active-service="1"] .service-tablet-card *:not(.service-subtitle):not(.service-category):not(button):not(a),
    .services-container[data-active-service="3"] .service-tablet-card *:not(.service-subtitle):not(.service-category):not(button):not(a),
    .services-container[data-active-service="5"] .service-tablet-card *:not(.service-subtitle):not(.service-category):not(button):not(a) {
        color: #000000 !important;
    }
}