/* Unique Animations for Service Pages */

/* 1. Slide In Animation (Sewage Treatment) */
.slide-in-left {
    opacity: 0;
    transform: translateX(-100px);
    animation: slideInLeft 1s ease-out forwards;
}
.slide-in-right {
    opacity: 0;
    transform: translateX(100px);
    animation: slideInRight 1s ease-out forwards;
}

@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 2. Staggered Fade Up Animation (Effluent Treatment) */
.stagger-fade-up {
    opacity: 0;
    transform: translateY(50px);
    animation: fadeUp 0.8s ease-out forwards;
}
.stagger-delay-1 { animation-delay: 0.2s; }
.stagger-delay-2 { animation-delay: 0.4s; }
.stagger-delay-3 { animation-delay: 0.6s; }

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

/* 3. Zoom In Animation (Ultra Filtration) */
.zoom-in-img {
    overflow: hidden;
    border-radius: 10px;
}
.zoom-in-img img {
    transition: transform 0.8s ease;
}
.zoom-in-img:hover img {
    transform: scale(1.1);
}
.fade-in-text {
    opacity: 0;
    animation: fadeIn 1.2s ease-in forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* 4. Floating Animation (Water Softener) */
.floating-element {
    animation: float 4s ease-in-out infinite;
}
.floating-element-delay {
    animation: float 4s ease-in-out 2s infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* General Layout Styles for Service Pages */
.service-details-section {
    padding: 80px 0;
    background-color: #f9fbff;
}
.service-header-banner {
    padding: 100px 0;
    background-color: #0b1a36;
    color: white;
    text-align: center;
    position: relative;
    background-size: cover;
    background-position: center;
}
.service-header-banner::before {
    content: '';
    position: absolute;
    top:0; left:0; width:100%; height:100%;
    background: rgba(11, 26, 54, 0.7);
}
.service-header-banner .container {
    position: relative;
    z-index: 2;
}
.service-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
}
.service-subtitle {
    font-size: 1.2rem;
    color: #e0e0e0;
}
.service-content-box {
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}
.service-feature-icon {
    font-size: 3rem;
    color: #007bff;
    margin-bottom: 20px;
}
.service-img-rounded {
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}