/* responsive for min-max: */
/* mobile: 375px - 992px */
/* desktop: 992px - 1440px - ++ */

/* Medium devices <992px)*/
@media ( max-width : 991px) {
	body {
		font-family: Arial, sans-serif;
		background-color: #f4f4f4;
		display: unset;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		margin: 0;
		justify-content: center;
	}
	.step-card {
		display: none;
		background-color: #fff;
		/* 	padding: 20px; */
		border-radius: 5px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		text-align: center;
		margin-left: 0px ! important;
		margin-right: 0px !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
	.step-card.active {
		display: block;
	}
	.step-card .header-card {
		/* 		background-color: #F7E7E5; */
		/* 		-moz-border-radius: 0 0 24px 24px; Firefox */
		/* 		-webkit-border-radius: 0 0 24px 24px; Safari and Chrome */
		/* 		border: 2px solid #ffff; */
		/* 		border-radius: 0 0 24px 24px; */
		/* 		box-shadow: 0px 2px 10px 0px #0000001A; */
		border-radius: 0px 0px 8px 8px;
		border: 1px solid var(--Greyscale-WHITE, #FFF);
		background: linear-gradient(0deg, #F7E7E5 0%, #FFF 100%);
		/* Shadows Bottom Bar */
		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);
	}
	.image-right-template {
		padding: var(--padding-5xl) var(--padding-xs);
	}
	button {
		padding: 10px 15px;
		margin: 5px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}
	.next-btn {
		/* 	background-color: #4CAF50; */
		color: white;
		background: #EBEBEB;
		color: white;
		width: 100%;
		height: 48px;
		padding: 12px 24px 12px 24px;
		gap: 8px;
		border-radius: 8px;
	}
	.next-btn.active {
		/* 	background-color: #4CAF50; */
		color: white;
		background: #C21B17;
		color: white;
		width: 100%;
		height: 48px;
		padding: 12px 24px 12px 24px;
		gap: 8px;
		border-radius: 8px;
	}
	.prev-btn {
		/* 	background-color: #f44336; */
		border: 1px solid #EBEBEB;
		background: #fff;
		color: #C21B17;
		width: 95%;
		height: 48px;
		padding: 12px 24px 12px 24px;
		gap: 8px;
		border-radius: 8px;
		/* 	opacity: 0px; */
	}
	.finish-btn {
		color: white;
		background: #C21B17;
		color: white;
		width: 95%;
		height: 48px;
		padding: 12px 24px 12px 24px;
		gap: 8px;
		border-radius: 8px;
	}
} /* Medium devices (≥992px)*/
@media ( min-width : 992px) {
	body {
		font-family: Arial, sans-serif;
		background-color: #f4f4f4;
		display: unset;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		margin: 0;
		justify-content: center;
	}
	.step-card {
		display: none;
		background-color: #fff;
		/* 	padding: 20px; */
		border-radius: 5px;
		/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
		text-align: center;
		margin-left: 0px ! important;
		margin-right: 0px !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
	.step-card.active {
		display: block;
	}
	.step-card .header-card {
		background-color: #F7E7E5;
		-moz-border-radius: 0 0 24px 24px; /* Firefox */
		-webkit-border-radius: 0 0 24px 24px; /* Safari and Chrome */
		border: 2px solid #ffff;
		border-radius: 0 0 24px 24px;
		box-shadow: 0px 2px 10px 0px #0000001A;
	}
	.image-right-template {
		padding: 0px var(--padding-xs);
	}
	button {
		padding: 10px 15px;
		margin: 5px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}
	.next-btn {
		/* 	background-color: #4CAF50; */
		color: white;
		background: #EBEBEB;
		color: white;
		width: 96%;
		height: 48px;
		padding: 12px 24px 12px 24px;
		gap: 8px;
		border-radius: 8px;
	}
	.next-btn.active {
		/* 	background-color: #4CAF50; */
		color: white;
		background: #C21B17;
		color: white;
		width: 96%;
		height: 48px;
		padding: 12px 24px 12px 24px;
		gap: 8px;
		border-radius: 8px;
	}
	.prev-btn {
		/* 	background-color: #f44336; */
		border: 1px solid #EBEBEB;
		background: #fff;
		color: #C21B17;
		width: 95%;
		height: 48px;
		padding: 12px 24px 12px 24px;
		gap: 8px;
		border-radius: 8px;
		/* 	opacity: 0px; */
	}
	.finish-btn {
		color: white;
		background: #C21B17;
		color: white;
		width: 95%;
		height: 48px;
		padding: 12px 24px 12px 24px;
		gap: 8px;
		border-radius: 8px;
	}
}