.hero {
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding: 1rem 1rem;
	position: relative;
	overflow: hidden;
	}

.hero-img {
	width: 320px;
}

.hero-btns {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.hero-dots {
    /*position: absolute;
    pointer-events: none;
    inset: 0;
    background-image: radial-gradient(rgba(36, 31, 112, 0.055) 1px, transparent 10px);
    background-size: 26px 26px;*/
}

.fb {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    color: #fff;
    box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .22), 0 4px 12px rgba(0, 0, 0, .22);
    animation: fbf 3s ease-in-out infinite;
    pointer-events: none;
}
.fb::after {
    content:''; position:absolute; top:5px; left:9px;
    width:9px; height:5px; background:rgba(255,255,255,.35);
    border-radius:50%; transform:rotate(-30deg);
}

@keyframes fbf { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-10px) rotate(4deg)} }
.fb1{width:46px;height:46px;font-size:.88rem;background:linear-gradient(135deg,#c62828,#ef5350);top:80px;right:35%;animation-delay:0s}
.fb2{width:38px;height:38px;font-size:.8rem;background:linear-gradient(135deg,#2e7d32,#66bb6a);top:190px;right:38%;animation-delay:.6s}
.fb3{width:42px;height:42px;font-size:.84rem;background:linear-gradient(135deg,#e65100,#ffa726);top:240px;right:12%;animation-delay:1.1s}
.fb4{width:34px;height:34px;font-size:.75rem;background:linear-gradient(135deg,#6a1b9a,#ab47bc);top:120px;right:10%;animation-delay:.4s}


.hero .btn-pill {
    border-radius: 50px;
    padding: 12px 25px;
    font-weight: 700;
    letter-spacing: 0.3px;
    font-family: "Baloo 2";
    font-size: 16px;
}

@media (max-width: 640px) {
    .fb, .hero-img {
        display: none;
    }
}