/* ------------     */

  .prog{
    background-color:#E6E6E6;
	padding: 100px 20px;
  }
  .container-h2-test > h3{
    font-size: 74px;
    position: absolute;
    bottom: 0px;
    color: #0070ff;
  }
  .prog h2{
    font-size: 40px;
    position: relative;
  }
  .container-h2-test{
    position: relative;
    display: inline-block;
    margin: 0 auto;
  }
  .prog > p{
    max-width: 500px;
    margin: 0 auto;
    color: #fff;
  }
/* --------------   */

:root {
	--prog-height: 40vw;
	--prog-margin: 4vw;
	--prog-top-offset: 1em;
	--outline-width: 0px;
}

#prog {
	/* Make place at bottom, as items will slide to that position*/
	padding-bottom: calc(var(--numprog) * var(--prog-top-offset));
	/* Don't include the --prog-margin in padding, as that will affect the scroll-timeline*/
	margin-bottom: var(--prog-margin);
}

#prog_1 {
	--index: 1;
}

#prog_2 {
	--index: 2;
}

#prog_3 {
	--index: 3;
}

#prog_4 {
	--index: 4;
}
#prog_5 {
	--index: 5;
}

#prog_6 {
	--index: 6;
}

.prog-item{
	background-color: transparent;
	border: none;
	position: sticky;
	top: 30%;
	padding-top: calc(var(--index) * var(--prog-top-offset));
	transition: 1s;
}
.prog__content {
	transform-origin: 50% 0%;
	will-change: transform;
}





#prog {
	max-width: 400px;
	margin: 0 auto;
	list-style: none;
	outline: calc(var(--outline-width) * 10) solid hotpink;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(var(--numprog), var(--prog-height));
	gap: var(--prog-margin);
}



.prog__content {
	position: relative;
	color: rgb(10, 5, 7);
	border-radius: 1em;
	/* overflow: hidden; */
	/* display: grid; */
	grid-template-areas:
		"text img";
	/* grid-template-columns: 1fr 1fr; */
	grid-template-rows: auto;
	/* align-items: stretch; */
	outline: var(--outline-width) solid blue;
}
.sticky-testimnios{
    position: sticky;
    top: 50px;
}
.item-prog {
	padding: 25px;
	/* min-height: 180px; */
	min-height: 84px;
	position: relative;
	background: rgb(0,112,255);
	background: linear-gradient(360deg, rgba(0,112,255,1) 0%, rgba(0,168,255,1) 100%);
	border-radius: 0px 20px 20px 20px;
}
.icon-prog{
    position: absolute;
    width: 150px;
    text-align: center;
    left: 0px;
    top: -11px;
    border-right: 1px solid #fff;
}
.icon-prog img{
	width: 70px;
	height: 70px;
	border-radius: 50%;
	/* margin-bottom: 10px; */
	border: 4px solid #0070ff;
	margin-bottom: 6px;
}
.content-prog{
    padding-left: 160px;
    position: relative;
}
.icon-prog h3{
    font-size: 14px;
    color: #fff;
    margin-bottom: 0px;
}

.content-prog > p{
	margin-bottom: 0px;
	/* right: 20px; */
	/* bottom: 10px; */
	font-size: 14px;
	text-align: justify;
	color: #ffffff !important;
	font-weight: lighter;
}
.content-prog h2{

font-size: 20px;

padding-right: 70px;

text-transform: uppercase;

min-height: 50px;

margin-bottom: 0px;

color: #fff;
}
.shape-pro-re{
    position: absolute;
    height: 30px;
    background-color: #00a5ff;
    left: 0px;
    border-radius: 20px 20px 0px 0px;
    top: -30px;
    width: 160px;
}
.p-prog{
    color: #fff;
}
.loader-shape{
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 25px;
}
.loader-shape:lang(ar){
	right: auto;
    left: 10px;

}
	@supports (animation-timeline: view()) {
			.prog-item {
				--index0: calc(var(--index) - 1); /* 0-based index */
				--reverse-index: calc(var(--numprog) - var(--index0)); /* reverse index */
				--reverse-index0: calc(var(--reverse-index) - 1); /* 0-based reverse index */
			}

.our-prog{
	padding-bottom: calc(var(--numprog) * var(--prog-top-offset));
	/* Don't include the --prog-margin in padding, as that will affect the scroll-timeline*/
	margin-bottom: var(--prog-margin);

}

			@keyframes prog {
				to {
					opacity: .1;
					transform:
					scale(calc(1.1 - calc(0.1 * var(--reverse-index))));
				}
			
			}
		
			@keyframes rotate_shape {
				to {
					transform:rotate(180deg);
				}
			
			}

			#prog {
				--numprog: 5;
				view-timeline-name: --prog-element-scrolls-in-body;
			}
.our-prog{
	animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
	--start-range: calc(var(--index0) / var(--numprog) * 100%);
	--end-range: calc((var(--index)) / var(--numprog) * 100%);
	animation-timeline: --prog-element-scrolls-in-body;
	

}
			.prog__content {
				--start-range: calc(var(--index0) / var(--numprog) * 100%);
				--end-range: calc((var(--index)) / var(--numprog) * 100%);

				animation: ease prog  forwards;
				animation-timeline: --prog-element-scrolls-in-body;
				animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
			}
            .loader-shape{
                --start-range: calc(var(--index0) / var(--numprog) * 100%);
				--end-range: calc((var(--index)) / var(--numprog) * 100%);

				animation: ease rotate_shape  forwards;
				animation-timeline: --prog-element-scrolls-in-body;
				animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
            }
		
		}
@media (max-width:500px) {
	.icon-prog{
		position: static;
		border: none;
		width: auto;
		text-align: center;
		border-bottom: 1px solid #fff;
		margin-bottom: 10px;
	}
	.content-prog{
		padding: 0px;
	}
	.icon-prog h3{
		margin-bottom: 5px;
	}
	.prog{
		min-height: 200vh;
	}
	.sticky-testimnios{
		position: relative;
		top: auto;
	}
	.prog-item{
		top: 0px;
		
	}
	.item-prog{
		padding: 10px;
	}
}
	
.hims-sec{
    background-color: #0070ff;
    padding: 100px 0px;
    text-align: center;
	overflow: hidden;
}
.hims-sec .container > h3{
    color: #000;
}
.hims-sec .container > h2{
    color: #fff;
    font-size: 40px;
}
.hims-sec .container > p{
    color: #fff;
max-width: 500px;
margin: 20px auto;
}
.card-hims{
    background-color: #fff;
    padding: 25px;
    border-radius: 20px;
    max-width: 500px;
    margin: 0 auto 20px auto;

}
.card-hims h3{
    color: #0070ff;
    font-size: 25px;
}