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

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

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

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

#testimonials_1 {
	--index: 1;
}

#testimonials_2 {
	--index: 2;
}

#testimonials_3 {
	--index: 3;
}

#testimonials_4 {
	--index: 4;
}
#testimonials_5 {
	--index: 5;
}

#testimonials_6 {
	--index: 6;
}

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





#testimonials {
	max-width: 700;
	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(--numtestimonials), var(--testimonials-height));
	gap: var(--testimonials-margin);
}



.testimonials__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;
}
.sticky-testimnios{
    position: sticky;
    top: 50px;
}
.item-testimonials {
	padding: 25px;
	/* min-height: 180px; */
	min-height: 84px;
}
.icon-testminios{
    position: absolute;
    width: 150px;
    text-align: center;
    left: 0px;
    top: -11px;
    border-right: 1px solid #fff;
}
.icon-testminios:lang(ar){
	right: 0px;
    left: auto;
	border-left: 1px solid #fff;
    border-right: none;


}
.icon-testminios img{
	width: 70px;
	height: 70px;
	border-radius: 50%;
	/* margin-bottom: 10px; */
	border: 4px solid #0070ff;
	margin-bottom: 6px;
}
.content-testminios{
    padding-left: 160px;
    position: relative;
}
.content-testminios:lang(ar){
	padding-right: 160px;
    padding-left: 0px;

}
.icon-testminios h3{
    font-size: 14px;
    color: #fff;
    margin-bottom: 0px;
}

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

font-size: 20px;

padding-right: 70px;

text-transform: uppercase;

min-height: 50px;

margin-bottom: 0px;

color: #fff;
}


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

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

}

			@keyframes testimonials {
				to {
					opacity: .1;
					transform:
					scale(calc(1.1 - calc(0.1 * var(--reverse-index))));
				}
			
			}
		

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

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

				animation: ease testimonials  forwards;
				animation-timeline: --testimonials-element-scrolls-in-body;
				animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
			}
		
		}
@media (max-width:500px) {
	.icon-testminios{
		position: static;
		border: none;
		width: auto;
		text-align: center;
		border-bottom: 1px solid #fff;
		margin-bottom: 10px;
	}
	.content-testminios{
		padding: 0px;
	}
	.icon-testminios h3{
		margin-bottom: 5px;
	}
	.testimonials{
		min-height: 200vh;
	}
	.sticky-testimnios{
		position: relative;
		top: auto;
	}
	.testimonials-item{
		top: 0px;
		
	}
	.item-testimonials{
		padding: 10px;
	}
}