section.testimonials-slider {
	margin-bottom: 80px;

	h2 {
		margin-bottom: 10px;
	}
	.section-inner.one {
		max-width: var(--content-width-med);
	}
	.section-inner.two {
		max-width: calc(var(--content-width-med) + 40px);
		padding: 0 80px 0 80px;
	}
	/*slider*/
	.swiper {
		width: 100%;
		/* padding: 20px 0; */
		height: 260px;
		padding: 0 20px;
		position: relative;

		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 0;
			width: 20px;
			height: 100%;
			z-index: 2;
		}
		&::before {
			left: 0;
			background: linear-gradient(to right, white 0%, transparent 100%);
		}
		&::after {
			right: 0;
			background: linear-gradient(to left, white 0%, transparent 100%);
		}

		/* Swiper slide styling */
		.swiper-slide {
			display: flex;
			flex-direction: column; /* Allows content inside the slide to stack */
			justify-content: center;
			align-items: center;
			text-align: center;
			padding: 30px 10px 30px 10px;

			height: auto;
		}

		.slide {
			box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.2);
			height: 100%;
			padding: 20px;
		}

		/* Blockquote styling */
		blockquote {
			font-size: 1.125rem;
			color: var(--dark-blue);
			font-style: italic;
			margin: 0;
			padding: 0;
			line-height: 1.5;
			box-shadow: none;
			display: flex;
			flex-direction: column; /* Stack content vertically */
			height: 100%; /* Ensure it takes full height of the slide */

			P {
				color: var(--dark-blue);
				font-size: 1.125rem;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				-webkit-line-clamp: 5; /* Number of lines before truncating */
				line-clamp: 5;
			}
		}

		/* Footer styling inside blockquote */
		blockquote footer {
			font-family: var(--bebas);
			font-style: normal;
			color: var(--black-text);
			margin-top: 10px;
			font-weight: bold;
			margin-top: auto;
			text-transform: uppercase;
		}
	}

	/* Swiper navigation buttons */
	.swiper-button-prev-es,
	.swiper-button-next-es {
		position: absolute;
		top: calc(50% - 20px);
		width: 32px; /* Adjust width for the button */
		height: 32px; /* Adjust height for the button */
		background-color: var(--dark-grey-bg); /* Light grey background */
		border-radius: 50%; /* Circular buttons */
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		z-index: 2;
		transition:
			background-color 0.3s ease,
			transform 0.3s ease;
	}

	/* Left button positioning */
	.swiper-button-prev-es {
		left: 40px; /* Position outside the slider */
	}

	/* Right button positioning */
	.swiper-button-next-es {
		right: 40px; /* Position outside the slider */
	}

	/* Hover effect */
	.swiper-button-prev-es:hover,
	.swiper-button-next-es:hover {
		background-color: var(
			--light-blue
		); /* Change background color on hover */
	}

	/* Icon styling inside buttons */
	.swiper-button-prev-es::before,
	.swiper-button-next-es::before {
		font-family: "Font Awesome 6 Free"; /* Use Font Awesome for icons */
		font-weight: 900;
		font-size: 1.125rem; /* Adjust icon size */
		color: white; /* Icon color */
	}

	/* Specific icons for prev/next */
	.swiper-button-prev-es::before {
		content: "\f104"; /* Font Awesome "chevron-left" icon */
	}

	.swiper-button-next-es::before {
		content: "\f105"; /* Font Awesome "chevron-right" icon */
	}

	@media (max-width: 1100px) {
		h2 {
			font-size: 2.5rem;
		}
	}

	@media (max-width: 640px) {
		margin-bottom: 40px;
		.section-inner.two {
			max-width: var(--content-width-med);
			padding: 0 20px 0 20px;
		}
	}
}

section.testimonials {
	margin-bottom: 80px;

	.section-inner {
		max-width: var(--content-width-narrow);
		padding: 0 20px;
	}

	.testimonials-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--gap);
	}

	.testimonial {
		box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.2);
		padding: 20px 40px 20px 40px;
		margin-bottom: 0;
	}

	/* Blockquote styling */
	blockquote {
		font-size: 1.125rem;
		color: var(--dark-blue);
		margin: 0;
		padding: 0;
		line-height: 1.5;
		box-shadow: none;
		display: flex;
		flex-direction: column;
		height: 100%;
		text-align: center;
		font-style: italic;

		P {
			color: var(--dark-blue);
			font-size: 1.125rem;
		}
	}

	/* Footer styling inside blockquote */
	blockquote footer {
		font-family: var(--bebas);
		font-style: normal;
		color: var(--black-text);
		margin-top: 10px;
		font-weight: bold;
		margin-top: auto;
		text-transform: uppercase;
	}

	@media (max-width: 1100px) {
		.testimonials-list {
			grid-template-columns: 1fr;
		}
	}
}