@import '../../common';
.wave-wrap {
	overflow: hidden;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	overflow: hidden;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	.wave-inner {
		position: absolute;
		width: 100%;
		overflow: hidden;
		height: 100%;
		bottom: -1px;
		position: absolute;
		width: 100%;
		overflow: hidden;
		height: 100%;
		bottom: -1px;
		.wave {
			position: absolute;
			left: 0;
			width: 200%;
			height: 100%;
			background-repeat: repeat no-repeat !important;
			background-position: 0 bottom !important;
			transform-origin: center bottom !important;
			position: absolute;
			left: 0;
			width: 200%;
			height: 100%;
			background-repeat: repeat no-repeat;
			background-position: 0 bottom;
			transform-origin: center bottom;
		}
		.wave.waveone {
			animation: move_wave 30s linear infinite;
			background-size: 50% 132px !important;
			animation: move_wave 25s linear infinite;
			background-size: 50% 132px;
			background-image: url(assets/images/shape/waveone.png);
		}
		.wave.wavetwo {
			animation: move_wave 30s linear infinite;
			background-size: 50% 132px !important;
			animation: move_wave 30s linear infinite;
			background-size: 50% 132px;
			background-image: url(assets/images/shape/wavetwo.png);
		}
	}
	.wave-inner.bgone {
		z-index: 2;
		opacity: 0.60;
		z-index: 2;
		opacity: 0.60;
	}
	.wave-inner.bgtwo {
		z-index: 1;
		opacity: 0.70;
		z-index: 1;
		opacity: 0.70;
	}
}
.rs-working-process {
	.process-wrap {
		.icon-part {
			.wave-wrap {
				.wave-inner {
					width: 300%;
					.wave.waveone {
						animation: move_wave 20s linear infinite;
						background-size: 50% 58px !important;
					}
					.wave.wavetwo {
						animation: move_wave 15s linear infinite;
						background-size: 50% 66px !important;
					}
				}
			}
		}
	}
}

// Morphine Effect
.morphine-wrap {
	position: relative;
}
.parent-morpheneanim,
.morphine-wrap img {
	-webkit-animation: morphine 15s linear infinite alternate forwards;
	animation: morphine 15s linear infinite alternate forwards;
	border-radius: 100%;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
.parent-morpheneanim {
	-webkit-animation: parent-morphine 15s linear infinite alternate forwards;
	animation: parent-morphine 15s linear infinite alternate forwards;
}

@-webkit-keyframes parent-morphine {
    0%,
    100% {
        border-radius: 46% 54% 50% 50%/35% 61% 39% 65%
    }

    14% {
		border-radius: 63% 37% 54% 46%/55% 48% 52% 45%
    }

    28% {
        border-radius: 61% 39% 67% 33%/70% 50% 50% 30%
    }

    42% {
        border-radius: 61% 39% 55% 45%/61% 38% 62% 39%
    }

    56% {
        border-radius: 54% 46% 38% 62%/49% 70% 30% 51%
    }

    70% {
        border-radius: 50% 50% 34% 66%/56% 68% 32% 44%
    }

    84% {
		border-radius: 63% 37% 54% 46%/55% 48% 52% 45%
    }
}
@keyframes parent-morphine {
    0%,
    100% {
        border-radius: 46% 54% 50% 50%/35% 61% 39% 65%
    }

    14% {
		border-radius: 63% 37% 54% 46%/55% 48% 52% 45%
    }

    28% {
        border-radius: 61% 39% 67% 33%/70% 50% 50% 30%
    }

    42% {
        border-radius: 61% 39% 55% 45%/61% 38% 62% 39%
    }

    56% {
        border-radius: 54% 46% 38% 62%/49% 70% 30% 51%
    }

    70% {
        border-radius: 50% 50% 34% 66%/56% 68% 32% 44%
    }

    84% {
		border-radius: 63% 37% 54% 46%/55% 48% 52% 45%
    }
}

@-webkit-keyframes morphine {
    0%,
    100% {
        border-radius: 63% 37% 54% 46%/55% 48% 52% 45%
    }

    14% {
        border-radius: 40% 60% 54% 46%/49% 60% 40% 51%
    }

    28% {
        border-radius: 54% 46% 38% 62%/49% 70% 30% 51%
    }

    42% {
        border-radius: 61% 39% 55% 45%/61% 38% 62% 39%
    }

    56% {
        border-radius: 61% 39% 67% 33%/70% 50% 50% 30%
    }

    70% {
        border-radius: 50% 50% 34% 66%/56% 68% 32% 44%
    }

    84% {
        border-radius: 46% 54% 50% 50%/35% 61% 39% 65%
    }
}
@keyframes morphine {
    0%,
    100% {
        border-radius: 63% 37% 54% 46%/55% 48% 52% 45%
    }

    14% {
        border-radius: 40% 60% 54% 46%/49% 60% 40% 51%
    }

    28% {
        border-radius: 54% 46% 38% 62%/49% 70% 30% 51%
    }

    42% {
        border-radius: 61% 39% 55% 45%/61% 38% 62% 39%
    }

    56% {
        border-radius: 61% 39% 67% 33%/70% 50% 50% 30%
    }

    70% {
        border-radius: 50% 50% 34% 66%/56% 68% 32% 44%
    }

    84% {
        border-radius: 46% 54% 50% 50%/35% 61% 39% 65%
    }
}


// for style four
.rs-sound-waves {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 11px;
	.bars {
		display: inline-block;
		width: 3px;
		height: 50px;
		background-color: transparent;
		background-image: linear-gradient(94deg, #48C98F 0.63%, #F7931A 98.7%);
		opacity: 0.7;
		animation: 2s soundWaveAnimations infinite ease-in-out;
		-webkit-animation: 2s soundWaveAnimations infinite ease-in-out;
	}
	&.vartical {
		flex-direction: column;
		.bars {
			height: 2px;
			animation: 2s soundWaveAnimationsvartical infinite ease-in-out;
			-webkit-animation: 2s soundWaveAnimationsvartical infinite ease-in-out;
		}
	}
	@keyframes soundWaveAnimations {
		0% {
			height: 50px;
		}
		50% {
			height: 25px;
		}
		100% {
			height: 50px;
		}
	}
	@-webkit-keyframes soundWaveAnimations {
		0% {
			height: 50px;
		}
		50% {
			height: 25px;
		}
		100% {
			height: 50px;
		}
	}
	@keyframes soundWaveAnimationsvartical {
		0% {
			width: 80px;
		}
		50% {
			width: 35px;
		}
		100% {
			width: 80px;
		}
	}
	@-webkit-keyframes soundWaveAnimationsvartical {
		0% {
			width: 80px;
		}
		50% {
			width: 35px;
		}
		100% {
			width: 80px;
		}
	}
}