/* LARGE DEVICES */
@media only screen and (min-width: 577px) and (max-width: 1024px) {
	.hero, .hero-users{
		background-position: center !important;
	}
	.hero-header {
		width: 100%;
		text-wrap: wrap;
		font-size: 30px;
		& > img {
			width: 70%;
			object-fit: cover;
		}
		& > div {
			margin-top: 4%;
		}
	}
	.hero-card-container {
		gap: 10%;
		flex-direction: row !important;
	}

	.icon-group-container {
		flex-direction: row !important;
	}

	.image-container {
		flex-direction: row !important;
		gap: 5%;

		& > img {
			width: calc(100% / 3);
		}
	}

	.side-by-side-container {
		flex-direction: row !important;
		gap: 5%;
	}
}

/* SMALL DEVICES */
@media only screen and (max-width: 576px) {
	.hero, .hero-users{
		background-position: center !important;
	}
	.hero-header {
		width: 100%;
		text-wrap: wrap;
		font-size: 20px;
		& > img {
			width: 100%;
			object-fit: cover;
		}
		& > div {
			margin-top: 4%;
		}
	}

	.hero-card-1 {
		width: 100%;
	}

	.hero-card {
		& .number {
			font-size: 50px;
		}

		& .text {
			font-size: 15px;
			color: white;
		}
	}

	.hero, .hero-users{
		height: 100vh;
	}

	.icon-group {
		width: 100%;
		font-size: 20px;
		align-items: center;
		& img {
			width: 20%;
		}
	}

	.w-50 {
		width: 100% !important;
	}

	.image-container {
		& > img {
			width: 100%;
		}
	}
}