.hero{
position:relative;
overflow:hidden;
}

.flame-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
background: radial-gradient(circle at 30% 50%, rgba(255,120,0,0.6), transparent 40%),
radial-gradient(circle at 70% 50%, rgba(255,60,0,0.6), transparent 40%),
radial-gradient(circle at 50% 70%, rgba(255,180,0,0.5), transparent 40%);
animation: flameFlow 8s infinite linear alternate;
filter: blur(40px);
}

@keyframes flameFlow{

0%{
transform: translateX(-10%) scale(1);
}

50%{
transform: translateX(10%) scale(1.2);
}

100%{
transform: translateX(-10%) scale(1);
}

}

.hero h2,
.hero p,
.hero a{
position:relative;
z-index:2;
}