:root {
   --ms-primary-color: #f3801e;
   --ms-green-color: #37b52d;
   --ms-blue-color: #2e388e;
}

html {
  /* A scrollbar with a gray thumb and a transparent track */
  /* Not yet supported in Safari and other WebKit-based iOS browsers */
}

.ms-testimonials-wrapper {
   color: #fff;
   font-family: 'Jost', Sans-serif;
   display: grid;
   grid-template-columns: 1fr 1fr;
/*    gap: 24px; */
}

.ms-testimonials-wrapper {
   padding-top: 48px;
}

.ms-testimonials-wrapper .ms-testimonial-item {
   border: 16px solid var(--ms-primary-color);
   padding: 64px 60px;
   background-color: #fff;
   color: #000;
   display: flex;
   flex-direction: column;
   justify-content: center;
   max-width: 658px;
   min-height: 536px !important;
}

.ms-testimonials-wrapper .ms-testimonial-item.testimonial-image-exist {
	justify-content: flex-start !important;
}

.ms-testimonials-wrapper .ms-testimonial-item::before {
   content: url('/wp-content/uploads/2024/06/testimonials-overlay.svg');
   position: absolute;
   top: -55px;
   left: -16px;
   display: block;
}

.ms-testimonials-wrapper .ms-testimonial-content {
   font-size: 18px;
   font-weight: 300;
   line-height: 25.2px;
   text-align: center;
	max-height: 180px !important;
	overflow: hidden;
	overflow-y: auto;
	padding-right: 8px;
}

@media screen and (max-width: 768px) {
	.ms-testimonials-wrapper .ms-testimonial-content {
		overflow: visible;
		max-height: none !important;
		padding-right: 8px;
	}
}

/* height */
.ms-testimonials-wrapper .ms-testimonial-content::-webkit-scrollbar {
	width: 8px;
}

/* Track */
.ms-testimonials-wrapper .ms-testimonial-content::-webkit-scrollbar-track {
	background: hsla(28, 90%, 54%, 0.478);
	margin-block: 0.5em;
	border-radius: 100vw;
}

/* Handle */
.ms-testimonials-wrapper .ms-testimonial-content::-webkit-scrollbar-thumb {
	background: hsl(28, 90%, 54%);
	border-radius: 100vw;
}

@supports (scrollbar-color: red blue) {
	* {
		scrollbar-color: background: hsl(28, 90%, 54%) background: hsla(28, 90%, 54%, 0.478);
	}
}

.ms-testimonials-wrapper .ms-testimonial-name {
   font-size: 16px;
   font-weight: 500;
   line-height: 16px;
   letter-spacing: 1px;
   text-align: center;
   margin-top: 36px;
   margin-bottom: 6px;
}

.ms-testimonials-wrapper .ms-testimonial-designation {
   font-size: 14px;
   font-weight: 400;
   line-height: 14px;
   letter-spacing: 1px;
   text-align: center;
}

.ms-testimonials-nav {
   display: flex;
   justify-content: center;
   margin: auto;
   max-width: 188px;
   align-items: center;
   margin-top: 24px;
}

.ms-testimonial-swiper-pagination {
   margin: auto;
   display: flex;
   justify-content: center;
	padding-left: 15px;
    padding-right: 15px;
	min-width: max-content;
}

.ms-testimonial-swiper-pagination .swiper-pagination-bullet {
   background: rgba(109, 116, 142) !important;
   cursor: pointer;
	min-width: 6px;
    min-height: 6px;
}

.ms-testimonial-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
   background: rgba(243, 128, 30, 1) !important;
}

.ms-testimonials-nav img {
   cursor: pointer;
}

.ms-testimonial-image {
   display: flex;
   justify-content: center;
   margin-bottom: 12px;
}

.ms-testimonial-image img {
    min-width: 100px;
    max-width: 100px !important;
    min-height: 100px;
    max-height: 100px;
    border-radius: 100% !important;
	object-fit: cover !important;
}

@media screen and (max-width: 768px) {
   .ms-testimonials-wrapper .ms-testimonial-item {
	   padding: 32px !important;
	   min-height: 515px !important;
	   max-height: 515px;
	   overflow-y: scroll;
   }
	
	/* width */
	.ms-testimonials-wrapper .ms-testimonial-item::-webkit-scrollbar {
	  width: 10px;
	}

	/* Track */
	.ms-testimonials-wrapper .ms-testimonial-item::-webkit-scrollbar-track {
		background: #f1f1f1;
		margin-block: .5em;
		border-radius: 100vw;
	}

	/* Handle */
	.ms-testimonials-wrapper .ms-testimonial-item::-webkit-scrollbar-thumb {
/* 		background: #f3801e82; */
		background: #2e388e;
		border-radius: 100vw;
	}
	
   .ms-testimonials-wrapper .ms-testimonial-item::before {
      left: -16.5px;
   }
}
