Untitled

	{{#if is-home}}
	<div class="hero-bg-slider-div">
		
	<div id="carouselbg" class="carousel slide carousel-fade h-100" data-bs-ride="carousel" data-bs-pause="false">
			
			<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-labelledby="myc--water">
	
	 <defs>
		<radialGradient id="gradient" cx="50%" cy="50%">                       
			<stop id="stop1" stop-color="rgba(255,255, 255, 1)" offset="75%"></stop>
			<stop id="stop2" stop-color="rgba(255,255,255, 0.8)" offset="85%"></stop>   
			<stop id="stop3" stop-color="rgba(255,255, 255, 0)" offset="100%"></stop>
		</radialGradient> 

		<mask id="gradient-mask">
			<circle r="55%" cx="55%" cy="55%" fill="url(#gradient)"></circle>
		</mask>

		<filter id="waves">
			<feTurbulence type="turbulence" baseFrequency="0.04" numOctaves="5" result="turbulence">
				<animate attributeName="baseFrequency" dur="45s" repeatCount="indefinite" values="0.02; 0.003; 0.02; 0.003; 0.05; 0.09" calcMode="paced"></animate>
			</feTurbulence>
			<feDisplacementMap xChannelSelector="G" yChannelSelector="G" scale="25" in="SourceGraphic" in2="turbulence"></feDisplacementMap>
			</filter>
	</defs>
	<image class="image--main" xlink:href="resources/img/hero-bg.jpg" width="180%" height="120%" x="-40%" y="-15%" mask="url(#gradient-mask)" filter="url(#waves)"></image> 
			</svg>
	</div>
	</div>
	{{/if}}