@media (max-width: 585px) {
.hero{
	justify-content: center;
}
	.hro-container {
	display: flex;
    margin: 30px 0px;
	justify-content: center;
  	align-items: center;
}
  
.hero-content {
	display: flex;
  	max-width: 450px;
	flex-direction: column;
}

  .hero-content h1 {
    font-size:50px;
	text-align: center;
  }

  .hero-content p:first-of-type {
    font-size: 20px;
	text-align: center;
  }
  .hero-content p:last-of-type {
    font-size: 14px;
  }

.hero-image {
  display: none;
}

.hero-content .cta-buttons{
        gap: 20px;
		margin: 20px auto;
	}

@keyframes image-slide-a {
	0%{
		opacity: 0.8;
		transform: translateY(50px) rotateX(4deg) rotateY(-9deg) rotateZ(4deg);

	}

	100% {
		transform: translateY(0px) rotateX(4deg) rotateY(-9deg) rotateZ(4deg);
		opacity: 1;
	}

}

@keyframes image-slide-b {
	0%{
		opacity: 0.8;
		transform: translateY(50px)  rotateX(4deg) rotateY(-9deg) rotateZ(1deg);

	}

	100% {
		transform: translateY(0px) rotateX(4deg) rotateY(-9deg) rotateZ(1deg);
		opacity: 1;
	}

}
@keyframes image-slide-c {
	0%{
		opacity: 0.8;
		transform: translateY(50px) rotateX(8deg) rotateY(-7deg) rotateZ(5deg);

	}

	100% {
		transform: translateY(0px) rotateX(8deg) rotateY(-7deg) rotateZ(5deg);
		opacity: 1;
	}

}
}