/* ----------------------------------------Bubble background ---------------------*/

#About .Container{
	position: relative;
	overflow: hidden;
	
}

#About .Container .bubbles{
	position: relative;
	display: flex;
        z-index: -100;
}

#About .Container .bubbles span{
	position: relative;
	width: 35px;
	height: 10px;
	background: rgb(243, 245, 246);
	margin: 0 4px;
  	border-radius: 50%;
  	box-shadow: 0 0 0 10px #57d2ee44, 0 0 50px  rgb(85, 200, 246),
  	0 0 100px rgb(135, 206, 235);
  	animation: animate 30s linear infinite;
  	animation-duration: calc(600s / var(--i));
}

#About .Container .bubbles span:nth-child(even)
{
	background: #f7f5f5;
	box-shadow: 0 0 0 10px #4fc3dc44, 0 0 50px  #8b51f644,
  	0 0 100px #f774a2; 
}

@keyframes animate
{
	100%{
		transform: translateY(500vh) scale(0.4);
	}
	0%{
		transform: translateY(-5vh) scale(0.5);
	}
}

/*-----------------------------------------End of Animation ----------------------*/

@media only screen and (max-width: 767px){
	
#About .Container{
	position: relative;
	overflow: hidden;
	
}

#About .Container .bubbles{
	position: relative;
	display: flex;
        z-index: -100;
}

#About .Container .bubbles span{
	position: relative;
	width: 1px;
	height: 1px;
	background: rgb(243, 245, 246);
	margin: 0 4px;
  	border-radius: 50%;
  	box-shadow: 0 0 0 10px #57d2ee44, 0 0 50px  rgb(85, 200, 246),
  	0 0 100px rgb(135, 206, 235);
  	animation: animate 30s linear infinite;
  	animation-duration: calc(125s / var(--i));
}

#About .Container .bubbles span:nth-child(even)
{
	background: #f7f5f5;
	box-shadow: 0 0 0 10px #4fc3dc44, 0 0 50px  #8b51f644,
  	0 0 100px #f774a2; 
}

@keyframes animate
{
	100%{
		transform: translateY(500vh) scale(0.2);
	}
	0%{
		transform: translateY(-5vh) scale(0.2);
	}
}

}