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

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

#goal_1 {
	--index: 1;
}

#goal_2 {
	--index: 2;
}

#goal_3 {
	--index: 3;
}

#goal_4 {
	--index: 4;
}
#goal_5 {
	--index: 5;
}

#goal_6 {
	--index: 6;
}

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





#goals {
	max-width: 450px;
	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(--numgoals), var(--goal-height));
	gap: var(--goal-margin);
}



.goal__content {
	position: relative;
	box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1);
	background: rgb(0,112,255);
	background: linear-gradient(360deg, rgba(0,112,255,1) 0%, rgba(0,168,255,1) 100%);
	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;
}

.item-goals {
	padding: 110px 25px 25px 25px;
	/* min-height: 180px; */
}

.item-goals img{
	height: 134px;
	margin-bottom: 10px;
	position: absolute;
	top: -60px;
}



.goal__content p{
	margin-bottom: 0px;
	position: absolute;
	right: 20px;
	bottom: 10px;
	font-size: 45px;
	color: #ffffff !important;
	font-weight: lighter;
}
.goal__content p:lang(ar){
	left: 20px;
	right: auto;

}

.goal__content h2{
font-size: 20px;
padding-right: 70px;
text-transform: uppercase;
min-height: 50px;
margin-bottom: 0px;
color: #fff;
}
.goal__content h2:lang(ar){
	padding-right: 0px;
	padding-left: 70px;

}

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

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

}

			@keyframes left-forward {
				to {
					opacity: .1;
					transform:
					scale(calc(1.1 - calc(0.1 * var(--reverse-index))));
				}
			
			}
			@keyframes left-opacity {
				to {
				top: 20px;
				}
			
			}

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

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

				animation: ease left-forward  forwards;
				animation-timeline: --goals-element-scrolls-in-body;
				animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
			}
			.goal__content img{
				--start-range: calc(var(--index0) / var(--numgoals) * 100%);
				--end-range: calc((var(--index)) / var(--numgoals) * 100%);

				animation: ease left-opacity  forwards;
				animation-timeline: --goals-element-scrolls-in-body;
				animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
			}
		}

	


/* -----------goals---------------		 */

.sec-goals{
	background-color: #181830;
	padding: 20px 20px;
	position: relative;
}

.our-goals{
	position: sticky;
	top: 0px;
	left: 0px;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	max-width: 419px;
	/* animation: hang-pulse 2s infinite; */
	z-index: 0;
}

.our-goals h1{
	color: #ffffff;
	font-size: 136px;
	font-weight: normal;
	}
  .our-goals h3{
	color: #0070FF;
	font-size: 146px;
	position: absolute;
	top: 36px;
	left: 73px;
	font-weight: normal;
	/* bottom: 20px; */
	}
	@media(max-width:500px){
		.our-goals h1{
			font-size: 80px;
			}
		  .our-goals h3{
			font-size: 90px;

			}
			.our-goals{
				position: relative;
			}
			.goal-item{
				top: 0px;
			}
			.item-goals {
				padding: 68px 25px 25px 25px;
			}
	}