/* design for details css label */
/* Min devices >=375px*/
@media ( min-width :375px) and ( max-width : 991px) {
	.stepper-item {
		font-size: 12px;
		flex-basis: calc(50% - 10px);
		/* Adjust flex-basis for smaller screens */
	}
	.stepper-wrapper {
		margin-top: auto;
		display: flex;
		justify-content: space-between;
		/* 	margin-bottom: 20px; */
		flex-wrap: wrap; /* Allow items to wrap to the next line */
		/* 	background-color: #F7E7E5; */
		/* 		width: 100.29%; */
		width: 343px;
	}
	.stepper-item .step-name {
		color: var(--Typography-BLACK, #20252B);
		font-feature-settings: 'clig' off, 'liga' off;
		font-family: Roboto;
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		line-height: 16px;
		text-align: center; /* 133.333% */
		width: 85%;
	}
	.stepper-item.active .step-name {
		color: var(--Typography-BRAND, #C21B17);
		font-feature-settings: 'clig' off, 'liga' off;
		font-family: Roboto;
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		line-height: 16px; /* 133.333% */
	}
	.stepper-item:first-child .step-name {
		color: var(--Typography-BLACK, #20252B);
		font-feature-settings: 'clig' off, 'liga' off;
		font-family: Roboto;
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		line-height: 16px;
		text-align: left; /* 133.333% */
		width: 80%;
	}
	.stepper-item:last-child .step-name {
		color: var(--Typography-BLACK, #20252B);
		font-feature-settings: 'clig' off, 'liga' off;
		font-family: Roboto;
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		line-height: 16px;
		text-align: right; /* 133.333% */
		width: 79%;
	}
	.stepper-wrapper .stepper-item:nth-child(3) .step-name {
		color: var(--Typography-BLACK, #20252B);
		font-feature-settings: 'clig' off, 'liga' off;
		font-family: Roboto;
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		line-height: 16px;
		text-align: center; /* 133.333% */
		width: 60%;
	}
	.stepper-item:last-child {
		position: relative;
		display: flex;
		flex-direction: column;
		flex: 1 0 auto;
		gap: 2px;
		align-items: end;
	}
	/* 	begin in initial status */
	.stepper-item:first-child::before {
		display: none;
		content: none;
	}
	.stepper-item:first-child::after {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		top: 9px;
		width: 75%;
		left: 25%;
		z-index: 1;
	}
	.stepper-wrapper .stepper-item:nth-child(2)::before {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		top: 9px;
		width: 33%;
		z-index: 1;
		right: 69%;
	}
	.stepper-wrapper .stepper-item:nth-child(2)::after {
		position: absolute;
		content: "";
		border-bottom: 2px solid #fff;
		top: 9px;
		width: 42%;
		z-index: 1;
		left: 58%;
	}
	.stepper-wrapper .stepper-item:nth-child(3)::before {
		position: absolute;
		content: "";
		border-bottom: 2px solid #fff;
		top: 9px;
		width: 58%;
		z-index: 1;
		right: 42%;
	}
	.stepper-wrapper .stepper-item:nth-child(3)::after {
		position: absolute;
		content: "";
		border-bottom: 2px solid #fff;
		top: 9px;
		width: 16%;
		z-index: 1;
		left: 84%;
	}
	.stepper-item:last-child::before {
		position: absolute;
		content: "";
		border-bottom: 2px solid #fff;
		top: 9px;
		width: 76%;
		z-index: 1;
		right: 24%;
	}
	.stepper-item:last-child::after {
		display: none; /* Remove the right line for the last item */
		content: none;
	}
	/* 	end in initial status */
	/* 	begin in progress status */
	.stepper-item:first-child::before {
		display: none;
		content: none;
	}
	.stepper-item:first-child::after {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		top: 9px;
		width: 75%;
		left: 25%;
		z-index: 3;
	}
	.stepper-wrapper .stepper-item:nth-child(2)::before {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		top: 9px;
		width: 33%;
		z-index: 3;
		right: 69%;
	}
	.stepper-wrapper .stepper-item:nth-child(2).active::after {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		top: 9px;
		width: 100%;
		z-index: 3;
		left: 58%;
	}
	.stepper-wrapper .stepper-item:nth-child(3).active::before {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		top: 9px;
		width: 58%;
		z-index: 3;
		right: 42%;
	}
	.stepper-wrapper .stepper-item:nth-child(3).active::after {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		top: 9px;
		width: 100%;
		z-index: 3;
		left: 76%;
	}
	.stepper-item:last-child.active::before {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		top: 9px;
		width: 76%;
		z-index: 3;
		right: 24%;
	}
	.stepper-item:last-child.active::after {
		display: none; /* Remove the right line for the last item */
		content: none;
	}
	/* 	end in progress status */
	/* begin completed status */
	.stepper-item:first-child.completed::after {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		top: 9px;
		width: 75%;
		left: 25%;
		z-index: 3;
	}
	.stepper-wrapper .stepper-item:nth-child(2).completed::before {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		top: 9px;
		width: 33%;
		z-index: 3;
		right: 69%;
	}
	.stepper-wrapper .stepper-item:nth-child(2).completed::after {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		top: 9px;
		width: 42%;
		z-index: 3;
		left: 58%;
	}
	.stepper-wrapper .stepper-item:nth-child(3).completed::before {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		top: 9px;
		width: 58%;
		z-index: 3;
		right: 42%;
	}
	.stepper-wrapper .stepper-item:nth-child(3).completed::after {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		top: 9px;
		width: 16%;
		z-index: 3;
		left: 84%;
	}
	.stepper-item:last-child.completed::before {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		top: 9px;
		width: 76%;
		z-index: 3;
		right: 24%;
	}
	/* 	end completed status */

	/* 	.stepper-item::after { */
	/* 		position: absolute; */
	/* 		content: ""; */
	/* 				border-bottom: 2px solid #fff; */
	/* 		border-bottom: 2px solid #C21B17; */
	/* 		top: 9px; */
	/* 		width: 100%; */
	/* 				left: 25%; */
	/* 		z-index: 1; */
	/* 	} */
	.stepper-wrapper .stepper-item:nth-child(3) {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: end;
		flex: 1 0 auto;
		gap: 2px;
	}
	.stepper-item .step-counter {
		z-index: 4;
		content: url('../images/ellipse_1999_12x12_w.svg');
		/* 		content: url('../images/ellipse_1999_12x12.svg'); */
		/* 		display: flex; */
		/* 		width: 20px; */
		/* 		height: 20px; */
		/* 		flex-direction: column; */
		/* 		align-items: center; */
		/* 		flex-shrink: 0; */
		/* 		padding: 2px; */
		/* 		border-radius: 56px; */
		/* 		border: 1px solid var(--Greyscale-WHITE, #FFF); */
		/* 		background-image: url('../images/ellipse_1999_12x12_w.svg'); */
		/* 		background-size: cover; */
		/* 		background-position: center center; */
		/* 		background-repeat: no-repeat; */
	}
	.stepper-item.active .step-counter {
		content: url('../images/ellipse_1999_12x12.svg');
		z-index: 4;
	}
	.stepper-item.completed .step-counter {
		content: url('../images/icon_frame_16x16.svg');
		z-index: 4;
	}
	/* 		.stepper-item::before { */
	/* 			position: absolute; */
	/* 			content: ""; */
	/* 					border-bottom: 2px solid #fff; */
	/* 			border-bottom: 2px solid #C21B17; */
	/* 			top: 9px; */
	/* 			width: 33%; */
	/* 					width: calc(100% - 19px); */
	/* 					top: 9px; */
	/* 					margin-left: calc(0% + 9px); */
	/* 			z-index: 1; */
	/* 					width: 28.53px; */
	/* 			right: 22%; */
	/* 		} */

	/* 	.stepper-item::before { */
	/* 		left: -50%; */
	/* 	} */
	/* 	.stepper-item::after { */
	/* 		left: 50%; */
	/* 	} */
	/* 	.stepper-item.completed::after { */
	/* 		position: absolute; */
	/* 		content: ""; */
	/* 		border-bottom: 2px solid #C21B17; */
	/* 		width: calc(100% - 19px); */
	/* 		top: 9px; */
	/* 		margin-left: calc(0% + 9px); */
	/* 		z-index: 3; */
	/* 	} */
	.img-show {
		content: url('../images/HOP-FULL_1_375.svg');
		width: 100%;
		padding: 24px 0px;
	}
	.gap12 {
		margin-top: 24px;
	}

	/* 	using nth-child */
	.stepper-wrapper .stepper-item:nth-child(2) {
		/* Styles for the second child element */
		/* 		position: relative; */
		/* 		display: flex; */
		/* 		flex-direction: column; */
		/* 		align-items: start !important; */
		/* 		flex: 1 0 auto; */
		
	}
	.stepper-wrapper .stepper-item:nth-child(2) .step-counter {
		margin-left: 33.332%;
		/* 		margin-left: 28.583px; */
	}
	.stepper-wrapper .stepper-item:nth-child(3) .step-counter {
		margin-right: 16.666%;
		/* 		margin-right: 14.291px; */
	}
}

/* Medium devices (>=992px) for desktop view*/
@media ( min-width : 992px) and ( max-width : 1023px) {
	.stepper-wrapper {
		margin-top: auto;
		display: flex;
		justify-content: space-between;
		/* 	margin-bottom: 20px; */
		flex-wrap: wrap; /* Allow items to wrap to the next line */
		/* 	background-color: #F7E7E5; */
		width: 111%;
	}
	.stepper-item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1 0 auto; /* Flex-basis set to auto for responsiveness */
		/* 	margin-bottom: 10px; Add some space between items */
		/* 	gap: 2px; */
	}
	.stepper-item .step-name {
		color: var(--Typography-BLACK, #20252B);
		font-feature-settings: 'clig' off, 'liga' off;
		/* Body/B5 Grey on dark 1440 */
		font-family: Roboto;
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		line-height: 20px; /* 166.667% */
	}
	.stepper-item.active .step-name {
		color: var(--Brand-Primary-01, #C21B17);
		font-feature-settings: 'clig' off, 'liga' off;
		/* Body/B5 Grey on dark 1440 */
		font-family: Roboto;
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		line-height: 20px; /* 166.667% */
	}
	.stepper-item:first-child::before {
		display: none; /* Remove the left line for the first item */
		content: none;
	}
	.stepper-item:last-child::after {
		display: none; /* Remove the right line for the last item */
		content: none;
	}
	.stepper-item .step-counter {
		/* 		display: flex; */
		/* 		width: 24px; */
		/* 		height: 24px; */
		/* 		flex-direction: column; */
		/* 		align-items: center; */
		/* 		flex-shrink: 0; */
		/* 				padding: 4px; */
		/* 		padding: 2px; */
		/* 		border-radius: 56px; */
		/* 		border: 1px solid var(--Greyscale-WHITE, #FFF); */
		/* 		margin-top: 1px; */
		z-index: 4;
		content: url('../images/ellipse_1999_20x20_w.svg');
	}
	.stepper-item.active .step-counter {
		z-index: 4;
		content: url('../images/ellipse_1999_20x20.svg');
	}
	.stepper-item.completed .step-counter {
		z-index: 4;
		content: url('../images/icon_frame_20x20.svg');
	}
	.stepper-item::before, .stepper-item::after {
		position: absolute;
		content: "";
		border-bottom: 2px solid #fff;
		top: 12px;
		width: 100%;
		z-index: 1;
	}
	.stepper-item::before {
		left: -50%;
	}
	.stepper-item::after {
		left: 50%;
	}
	.stepper-item.completed::after {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		width: calc(100% - 24px); /* Adjust width to include margin */
		top: 12px;
		left: calc(50% + 12px);
		z-index: 3;
	}
	.img-show {
		content: url('../images/HOP-FULL_1_375.svg');
		width: 100%;
		padding: 24px 0px;
	}
	.gap12 {
		margin-top: 12px;
	}
}

/* Min devices >=1024px*/
@media ( min-width :1024px) and ( max-width : 1279px) {
	.stepper-wrapper {
		margin-top: auto;
		display: flex;
		justify-content: space-between;
		/* 	margin-bottom: 20px; */
		flex-wrap: wrap; /* Allow items to wrap to the next line */
		/* 	background-color: #F7E7E5; */
		width: 111%;
	}
	.stepper-item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1 0 auto; /* Flex-basis set to auto for responsiveness */
		/* 	margin-bottom: 10px; Add some space between items */
		/* 	gap: 2px; */
	}
	.stepper-item .step-name {
		color: var(--Typography-BLACK, #20252B);
		font-feature-settings: 'clig' off, 'liga' off;
		/* Body/B5 Grey on dark 1440 */
		font-family: Roboto;
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		line-height: 20px; /* 166.667% */
	}
	.stepper-item.active .step-name {
		color: var(--Brand-Primary-01, #C21B17);
		font-feature-settings: 'clig' off, 'liga' off;
		/* Body/B5 Grey on dark 1440 */
		font-family: Roboto;
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		line-height: 20px; /* 166.667% */
	}
	.stepper-item:first-child::before {
		display: none; /* Remove the left line for the first item */
		content: none;
	}
	.stepper-item:last-child::after {
		display: none; /* Remove the right line for the last item */
		content: none;
	}
	.stepper-item .step-counter {
		/* 		display: flex; */
		/* 		width: 24px; */
		/* 		height: 24px; */
		/* 		flex-direction: column; */
		/* 		align-items: center; */
		/* 		flex-shrink: 0; */
		/* 				padding: 4px; */
		/* 		padding: 2px; */
		/* 		border-radius: 56px; */
		/* 		border: 1px solid var(--Greyscale-WHITE, #FFF); */
		/* 		margin-top: 1px; */
		z-index: 4;
		content: url('../images/ellipse_1999_20x20_w.svg');
	}
	.stepper-item.active .step-counter {
		z-index: 4;
		content: url('../images/ellipse_1999_20x20.svg');
	}
	.stepper-item.completed .step-counter {
		z-index: 4;
		content: url('../images/icon_frame_20x20.svg');
	}
	.stepper-item::before, .stepper-item::after {
		position: absolute;
		content: "";
		border-bottom: 2px solid #fff;
		width: calc(100% - 24px); /* Adjust width to include margin */
		top: 12px;
		margin-left: calc(10% + 3px);
		z-index: 1;
	}
	.stepper-item::before {
		left: -50%;
	}
	.stepper-item::after {
		left: 50%;
	}
	.stepper-item.completed::after {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		width: calc(100% - 24px); /* Adjust width to include margin */
		top: 12px;
		left: calc(50% + 3px);
		z-index: 3;
	}
	.img-show {
		padding: 30px 0px 24px 0px;
		margin-left: 12px;
		content: url('../images/HOP-FULL_1_375.svg');
		width: 100%;
		/* 		padding: 24px 0px; */
	}
	.gap12 {
		margin-top: 12px;
	}
}
/* Min devices >=1280px*/
@media ( min-width :1280px) and ( max-width : 1439px) {
	.stepper-wrapper {
		margin-top: auto;
		display: flex;
		justify-content: space-between;
		/* 	margin-bottom: 20px; */
		flex-wrap: wrap; /* Allow items to wrap to the next line */
		/* 	background-color: #F7E7E5; */
		width: 111%;
	}
	.stepper-item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1 0 auto; /* Flex-basis set to auto for responsiveness */
		/* 	margin-bottom: 10px; Add some space between items */
		/* 	gap: 2px; */
	}
	.stepper-item .step-name {
		color: var(--Typography-BLACK, #20252B);
		font-feature-settings: 'clig' off, 'liga' off;
		/* Body/B5 Grey on dark 1440 */
		font-family: Roboto;
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		line-height: 20px; /* 166.667% */
	}
	.stepper-item.active .step-name {
		color: var(--Brand-Primary-01, #C21B17);
		font-feature-settings: 'clig' off, 'liga' off;
		/* Body/B5 Grey on dark 1440 */
		font-family: Roboto;
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		line-height: 20px; /* 166.667% */
	}
	.stepper-item:first-child::before {
		display: none; /* Remove the left line for the first item */
		content: none;
	}
	.stepper-item:last-child::after {
		display: none; /* Remove the right line for the last item */
		content: none;
	}
	.stepper-item .step-counter {
		/* 		display: flex; */
		/* 		width: 24px; */
		/* 		height: 24px; */
		/* 		flex-direction: column; */
		/* 		align-items: center; */
		/* 		flex-shrink: 0; */
		/* 				padding: 4px; */
		/* 		padding: 2px; */
		/* 		border-radius: 56px; */
		/* 		border: 1px solid var(--Greyscale-WHITE, #FFF); */
		/* 		margin-top: 1px; */
		z-index: 4;
		content: url('../images/ellipse_1999_20x20_w.svg');
	}
	.stepper-item.active .step-counter {
		z-index: 4;
		content: url('../images/ellipse_1999_20x20.svg');
	}
	.stepper-item.completed .step-counter {
		z-index: 4;
		content: url('../images/icon_frame_20x20.svg');
	}
	.stepper-item::before, .stepper-item::after {
		position: absolute;
		content: "";
		border-bottom: 2px solid #fff;
		width: calc(100% - 24px); /* Adjust width to include margin */
		top: 12px;
		margin-left: calc(8% + 3px);
		z-index: 1;
	}
	.stepper-item::before {
		left: -50%;
	}
	.stepper-item::after {
		left: 50%;
	}
	.stepper-item.completed::after {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		width: calc(100% - 24px); /* Adjust width to include margin */
		top: 12px;
		left: calc(50% + 3px);
		z-index: 3;
	}
	.img-show {
		padding: 30px 0px 24px 0px;
		margin-left: 12px;
		content: url('../images/HOP-FULL_1_375.svg');
		width: 100%;
		/* 		padding: 24px 0px; */
	}
	.gap12 {
		margin-top: 12px;
	}
}
/* Min devices >=1440px: for desktop*/
@media ( min-width :1440px) {
	.stepper-wrapper {
		margin-top: auto;
		display: flex;
		justify-content: space-between;
		/* 	margin-bottom: 20px; */
		flex-wrap: wrap; /* Allow items to wrap to the next line */
		/* 	background-color: #F7E7E5; */
		width: 111%;
	}
	.stepper-item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1 0 auto; /* Flex-basis set to auto for responsiveness */
		/* 	margin-bottom: 10px; Add some space between items */
		/* 	gap: 2px; */
	}
	.stepper-item .step-name {
		color: var(--Typography-BLACK, #20252B);
		font-feature-settings: 'clig' off, 'liga' off;
		/* Body/B5 Grey on dark 1440 */
		font-family: Roboto;
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		line-height: 20px; /* 166.667% */
	}
	.stepper-item.active .step-name {
		color: var(--Brand-Primary-01, #C21B17);
		font-feature-settings: 'clig' off, 'liga' off;
		/* Body/B5 Grey on dark 1440 */
		font-family: Roboto;
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		line-height: 20px; /* 166.667% */
	}
	.stepper-item:first-child::before {
		display: none; /* Remove the left line for the first item */
		content: none;
	}
	.stepper-item:last-child::after {
		display: none; /* Remove the right line for the last item */
		content: none;
	}
	.stepper-item .step-counter {
		/* 		display: flex; */
		/* 		width: 24px; */
		/* 		height: 24px; */
		/* 		flex-direction: column; */
		/* 		align-items: center; */
		/* 		flex-shrink: 0; */
		/* 				padding: 4px; */
		/* 		padding: 2px; */
		/* 		border-radius: 56px; */
		/* 		border: 1px solid var(--Greyscale-WHITE, #FFF); */
		/* 		margin-top: 1px; */
		z-index: 4;
		content: url('../images/ellipse_1999_20x20_w.svg');
	}
	.stepper-item.active .step-counter {
		z-index: 4;
		content: url('../images/ellipse_1999_20x20.svg');
	}
	.stepper-item.completed .step-counter {
		z-index: 4;
		content: url('../images/icon_frame_20x20.svg');
	}
	.stepper-item::before, .stepper-item::after {
		position: absolute;
		content: "";
		border-bottom: 2px solid #fff;
		width: calc(100% - 28px); /* Adjust width to include margin */
		top: 12px;
		z-index: 1;
	}
	.stepper-item::before {
		left: -42%;
	}
	.stepper-item::after {
		left: 58%;
	}
	.stepper-item.completed::after {
		position: absolute;
		content: "";
		border-bottom: 2px solid #C21B17;
		width: calc(100% - 29px); /* Adjust width to include margin */
		top: 12px;
		/* 		left: calc(49% + 0px); */
		z-index: 3;
	}
	.img-show {
		padding: 24px 0px 24px 12px;
		content: url('../images/HOP-FULL_1_375.svg');
		width: 100%;
	}
	.gap12 {
		margin-top: 12px;
	}
}