.animation-container {
    position: absolute;z-index:1;left:0;right:0;top:0;
    height: 1000px; /* Modify to 1000px */
 
    overflow: hidden;
 
    transform-style: preserve-3d;
}

.circle {
    position: absolute;
    border-radius: 50%;
    width: 1000px; /* Modify to 1000px */
    height: 1000px; /* Modify to 1000px */
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    transform-style: preserve-3d;
    background-color: #d43909;
}

.circle-1 {
    left: -500px; /* Adjust position to match new size */
    animation: circle1-animation 16s infinite ease-in-out;
}

.circle-2 {
    right: -500px; /* Adjust position to match new size */
    animation: circle2-animation 16s infinite ease-in-out;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    width: 1100px; /* Adjust size to match new size */
    height: 1100px; /* Adjust size to match new size */
    opacity: 0;
    background-color: #d43909;
}

.ripple-1 {
    left: -450px; /* Adjust position to match new size */
    opacity: 0.9;
    animation: ripple1-animation 16s infinite;
}

.ripple-2 {
    left: -450px; /* Adjust position to match new size */
    opacity: 0.7;
    animation: ripple2-animation 16s infinite;
}

.ripple-3 {
    left: -450px; /* Adjust position to match new size */
    opacity: 0.5;
    animation: ripple3-animation 16s infinite;
}

.ripple-4 {
    right: -450px; /* Adjust position to match new size */
    opacity: 0.9;
    animation: ripple4-animation 16s infinite;
}

.ripple-5 {
    right: -450px; /* Adjust position to match new size */
    opacity: 0.7;
    animation: ripple5-animation 16s infinite;
}

.ripple-6 {
    right: -450px; /* Adjust position to match new size */
    opacity: 0.5;
    animation: ripple6-animation 16s infinite;
}

/* Animation definitions */
@keyframes circle1-animation {
    0%, 10% {
        left: -500px; /* Adjust position to match new size */
        transform: translateY(-50%) scale(1);
    }
    30% {
        left: calc(50% + 160px); /* Adjust position to match new size */
        transform: translateY(-50%) translateX(-50%) scale(0.4);
    }
    40%, 50% {
        left: calc(50% + 160px); /* Adjust position to match new size */
        transform: translateY(-50%) translateX(-50%) scale(0.4);
    }
    60% {
        left: calc(50% + 160px); /* Adjust position to match new size */
        transform: translateY(-50%) translateX(-50%) scale(0.4) rotateY(-720deg);
    }
    70% {
        left: calc(50% + 160px); /* Adjust position to match new size */
        transform: translateY(-50%) translateX(-50%) scale(0.4) rotateY(-720deg);
    }
    90%, 100% {
        left: -500px; /* Adjust position to match new size */
        transform: translateY(-50%) scale(1);
    }
}

@keyframes circle2-animation {
    0%, 10% {
        right: -500px; /* Adjust position to match new size */
        transform: translateY(-50%) scale(1);
    }
    30% {
        right: calc(50% + 160px); /* Adjust position to match new size */
        transform: translateY(-50%) translateX(50%) scale(0.4);
    }
    40%, 50% {
        right: calc(50% + 160px); /* Adjust position to match new size */
        transform: translateY(-50%) translateX(50%) scale(0.4);
    }
    60% {
        right: calc(50% + 160px); /* Adjust position to match new size */
        transform: translateY(-50%) translateX(50%) scale(0.4) rotateY(720deg);
    }
    70% {
        right: calc(50% + 160px); /* Adjust position to match new size */
        transform: translateY(-50%) translateX(50%) scale(0.4) rotateY(720deg);
    }
    90%, 100% {
        right: -500px; /* Adjust position to match new size */
        transform: translateY(-50%) scale(1);
    }
}

/* Ripple animation - Left side */
@keyframes ripple1-animation {
    0%, 5% {
        opacity: 0.9;
        transform: translateY(-50%) scale(0.2);
    }
    15% {
        opacity: 0;
        transform: translateY(-50%) scale(1.5);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) scale(1.5);
    }
}

@keyframes ripple2-animation {
    0%, 8% {
        opacity: 0.7;
        transform: translateY(-50%) scale(0.2);
    }
    18% {
        opacity: 0;
        transform: translateY(-50%) scale(1.5);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) scale(1.5);
    }
}

@keyframes ripple3-animation {
    0%, 12% {
        opacity: 0.5;
        transform: translateY(-50%) scale(0.2);
    }
    22% {
        opacity: 0;
        transform: translateY(-50%) scale(1.5);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) scale(1.5);
    }
}

/* Ripple animation - Right side */
@keyframes ripple4-animation {
    0%, 5% {
        opacity: 0.9;
        transform: translateY(-50%) scale(0.2);
    }
    15% {
        opacity: 0;
        transform: translateY(-50%) scale(1.5);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) scale(1.5);
    }
}

@keyframes ripple5-animation {
    0%, 8% {
        opacity: 0.7;
        transform: translateY(-50%) scale(0.2);
    }
    18% {
        opacity: 0;
        transform: translateY(-50%) scale(1.5);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) scale(1.5);
    }
}

@keyframes ripple6-animation {
    0%, 12% {
        opacity: 0.5;
        transform: translateY(-50%) scale(0.2);
    }
    22% {
        opacity: 0;
        transform: translateY(-50%) scale(1.5);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) scale(1.5);
    }
}