/* Satisfaction Section Styles */
.satisfaction-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background-color: #e0f2fe !important;
}

/* Wave Container Top */
.satisfaction-section .wave-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 100px;
    transform: rotate(180deg);
}

.satisfaction-section .wave-top .wave-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: #fff;
    overflow: hidden;
}

.satisfaction-section .wave-top .single-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M1200,0V46.29c-47.79,22.2-103.59,32.17-158,28-70.36-5.37-136.33-33.31-206.8-37.5C761.36,32.43,687.66,53.67,617,72.05c-69.27,18-138.3,24.88-209.4,13.08-36.15-6-69.85-17.84-104.45-29.34C210.51,25,87,14.29,0,52.47V0Z' fill='%23e0f2fe'%3E%3C/path%3E%3C/svg%3E") repeat-x;
    background-size: 1200px 100px;
    animation: wave-animation 25s linear infinite;
    opacity: 1;
}

/* Hero Shape (Bottom Wave) */
.satisfaction-section .hero-shape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 100px;
    z-index: 10;
    transform: rotate(180deg);
}

.satisfaction-section .hero-shape .wave-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: #e0f2fe;
    overflow: hidden;
}

.satisfaction-section .hero-shape .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-color: transparent;
}

.satisfaction-section .hero-shape .single-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M1200,0V46.29c-47.79,22.2-103.59,32.17-158,28-70.36-5.37-136.33-33.31-206.8-37.5C761.36,32.43,687.66,53.67,617,72.05c-69.27,18-138.3,24.88-209.4,13.08-36.15-6-69.85-17.84-104.45-29.34C210.51,25,87,14.29,0,52.47V0Z' fill='%23ffffff'%3E%3C/path%3E%3C/svg%3E") repeat-x;
    background-size: 1200px 100px;
    animation: wave-animation 25s linear infinite;
    opacity: 1;
}

.satisfaction-wrapper {
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 0 20px;
}

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

.satisfaction-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1.2;
    transition: font-size 0.3s ease;
}

.satisfaction-heading .line-1,
.satisfaction-heading .line-2 {
    display: block;
    width: 100%;
    text-align: center;
    position: relative;
    margin-bottom: 0.2em;
    color: rgba(166, 166, 166, 0.8);
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.9) 50%,
        rgba(166, 166, 166, 0.8) 50%,
        rgba(166, 166, 166, 0.8) 100%
    );
    background-size: 100% 200%;
    background-position: 0% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.1s ease-out;
}

.satisfaction-heading .line-3 {
    display: block;
    width: 100%;
    text-align: center;
    position: relative;
    margin-bottom: 0.2em;
    color: rgba(166, 166, 166, 0.8);
    background: linear-gradient(
        180deg,
        rgb(70, 103, 237) 0%,
        rgb(70, 103, 237) 50%,
        rgba(166, 166, 166, 0.8) 50%,
        rgba(166, 166, 166, 0.8) 100%
    );
    background-size: 100% 200%;
    background-position: 0% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.1s ease-out;
}

/* Responsive font sizes */
@media (min-width: 1400px) {
    .satisfaction-heading {
        font-size: 4.5rem;
    }
}

@media (max-width: 1399px) and (min-width: 992px) {
    .satisfaction-heading {
        font-size: 4rem;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .satisfaction-heading {
        font-size: 3.5rem;
    }
}

@media (max-width: 767px) and (min-width: 576px) {
    .satisfaction-heading {
        font-size: 3rem;
    }
}

@media (max-width: 575px) {
    .satisfaction-heading {
        font-size: 2.5rem;
    }
    .satisfaction-section {
        padding: 60px 0;
    }
}

/* Professional Parallax Images - inspired by Webflow design */
.satisfaction-images {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.satisfaction-images.left {
    left: 0;
}

.satisfaction-images.right {
    right: 0;
}

.floating-image {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    will-change: transform, opacity;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Left side images - start large and move to final position without text overlap */
.satisfaction-images.left .image-1 {
    top: 2%;
    left: 0%;
    width: 120px;
    height: 120px;
    background-image: url('/static/images/sicon1.avif');
    z-index: 3;
    transform: translateZ(400px) translateX(0) rotate(8deg) scale(2.0);
    opacity: 0;
}

.satisfaction-images.left .image-2 {
    top: 45%;
    left: 8%;
    width: 100px;
    height: 100px;
    background-image: url('/static/images/sicon2.avif');
    z-index: 4;
    transform: translateZ(300px) translateX(0) rotate(-5deg) scale(1.8);
    opacity: 0;
}

.satisfaction-images.left .image-3 {
    top: 75%;
    left: 12%;
    width: 90px;
    height: 90px;
    background-image: url('/static/images/sicon3.avif');
    z-index: 5;
    transform: translateZ(200px) translateX(0) rotate(4deg) scale(1.6);
    opacity: 0;
}

/* Right side images - start large and move to final position without text overlap */
.satisfaction-images.right .image-1 {
    top: 2%;
    right: 0%;
    width: 110px;
    height: 110px;
    background-image: url('/static/images/sicon4.avif');
    z-index: 5;
    transform: translateZ(380px) translateX(0) rotate(-6deg) scale(1.9);
    opacity: 0;
}

.satisfaction-images.right .image-2 {
    top: 42%;
    right: 8%;
    width: 95px;
    height: 95px;
    background-image: url('/static/images/sicon5.avif');
    z-index: 4;
    transform: translateZ(280px) translateX(0) rotate(7deg) scale(1.7);
    opacity: 0;
}

.satisfaction-images.right .image-3 {
    top: 70%;
    right: 12%;
    width: 85px;
    height: 85px;
    background-image: url('/static/images/sicon6.avif');
    z-index: 6;
    transform: translateZ(180px) translateX(0) rotate(-3deg) scale(1.5);
    opacity: 0;
}

/* Animation states - triggered by scroll */
.floating-image.animate-in {
    opacity: 1;
}

.satisfaction-images.left .image-1.animate-in {
    transform: translateZ(0) translateX(0) rotate(8deg) scale(1.0);
}

.satisfaction-images.left .image-2.animate-in {
    transform: translateZ(0) translateX(0) rotate(-5deg) scale(1.0);
}

.satisfaction-images.left .image-3.animate-in {
    transform: translateZ(0) translateX(0) rotate(4deg) scale(1.0);
}

.satisfaction-images.right .image-1.animate-in {
    transform: translateZ(0) translateX(0) rotate(-6deg) scale(1.0);
}

.satisfaction-images.right .image-2.animate-in {
    transform: translateZ(0) translateX(0) rotate(7deg) scale(1.0);
}

.satisfaction-images.right .image-3.animate-in {
    transform: translateZ(0) translateX(0) rotate(-3deg) scale(1.0);
}

/* Adjust for smaller screens */
@media (max-width: 768px) {
    .floating-image {
        width: 80px;
        height: 80px;
    }
    
    .satisfaction-images.left .image-1,
    .satisfaction-images.left .image-2,
    .satisfaction-images.left .image-3,
    .satisfaction-images.right .image-1,
    .satisfaction-images.right .image-2,
    .satisfaction-images.right .image-3 {
        left: auto;
        right: auto;
    }
    
    .satisfaction-images.left .image-1 {
        left: 5%;
    }
    
    .satisfaction-images.left .image-2 {
        left: 2%;
    }
    
    .satisfaction-images.left .image-3 {
        left: 8%;
    }
    
    .satisfaction-images.right .image-1 {
        right: 8%;
    }
    
    .satisfaction-images.right .image-2 {
        right: 5%;
    }
    
    .satisfaction-images.right .image-3 {
        right: 2%;
    }
}