/* Simple Animated Services Styles */

/* Simple Services Container - Dynamic Animation */
.simple-services {
    position: relative !important;
    height: 65px !important;
    margin: 50px 0 55px 0 !important;
    max-width: 450px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.simple-services::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(135deg, rgba(211, 191, 151, 0.1), transparent);
    border-radius: 55px;
    opacity: 0;
    animation: serviceGlow 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes serviceGlow {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
}

@keyframes servicePulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(211, 191, 151, 0.3); }
    50% { box-shadow: 0 15px 40px rgba(211, 191, 151, 0.5); }
}

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(-60px);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-50%) translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* Service Items - Slide from Left Animation */
.service-item {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 15px 25px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 50px !important;
    color: transparent !important;
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out !important;
    cursor: pointer !important;
    backdrop-filter: none !important;
    opacity: 0 !important;
    transform: translateY(-50%) translateX(-60px) !important;
    visibility: hidden !important;
    white-space: nowrap !important;
    min-width: 300px !important;
    pointer-events: none !important;
}

/* Default inactive state - positioned left, completely hidden */
.simple-services .service-item:not(.active) {
    opacity: 0 !important;
    transform: translateY(-50%) translateX(-60px) !important;
    visibility: hidden !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    pointer-events: none !important;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Different colors for each service */
/* Active States with Dynamic Animations */
.service-item[data-service="0"].active {
    background: linear-gradient(135deg, #FF6B6B, #E74C3C) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 10px 30px rgba(231, 76, 60, 0.3) !important;
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) scale(1) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: slideInFromLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

.service-item[data-service="1"].active {
    background: linear-gradient(135deg, #2ECC71, #27AE60) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 10px 30px rgba(46, 204, 113, 0.3) !important;
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) scale(1) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: slideInFromLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

.service-item[data-service="2"].active {
    background: linear-gradient(135deg, #3498DB, #2980B9) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3) !important;
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) scale(1) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: slideInFromLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

.service-item[data-service="3"].active {
    background: linear-gradient(135deg, #9B59B6, #8E44AD) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 10px 30px rgba(155, 89, 182, 0.3) !important;
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) scale(1) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: slideInFromLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

.service-item[data-service="4"].active {
    background: linear-gradient(135deg, #F39C12, #E67E22) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 10px 30px rgba(243, 156, 18, 0.3) !important;
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) scale(1) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: slideInFromLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

.service-item i {
    font-size: 1.3rem !important;
    min-width: 20px !important;
    color: inherit !important;
}

/* Active service icons */
.service-item.active i {
    color: white !important;
}

.service-item span {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: inherit !important;
}

/* Active service text */
.service-item.active span {
    color: white !important;
    font-weight: 600 !important;
}

/* Remove hover effects that cause blinking */
.service-item:hover {
    /* No hover effect for inactive items */
}

.service-item.active:hover {
    /* Keep the same state - no transform changes */
    opacity: 1 !important;
    filter: brightness(1.05) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25) !important;
}

/* CTA Section */
.cta-section {
    margin-top: 50px !important;
    margin-bottom: 25px !important;
}

.cta-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 20px 40px !important;
    background: linear-gradient(135deg, #D3BF97, #C4A975) !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 10px 30px rgba(211, 191, 151, 0.4) !important;
    position: relative !important;
    overflow: hidden !important;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 1s;
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 35px rgba(211, 191, 151, 0.5) !important;
    color: white !important;
    text-decoration: none !important;
}

.cta-button i {
    font-size: 14px !important;
    transition: transform 0.3s ease !important;
}

.cta-button:hover i {
    transform: translateX(3px) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .simple-services {
        max-width: 100% !important;
        gap: 12px !important;
    }

    .service-item {
        padding: 12px 20px !important;
        gap: 12px !important;
    }

    .service-item i {
        font-size: 1.3rem !important;
    }

    .service-item span {
        font-size: 14px !important;
    }

    .cta-button {
        padding: 15px 30px !important;
        font-size: 14px !important;
    }
}

/* Simplified animation for active state */
.service-item.active {
    animation: none !important;
}