/* ==========================================================================
   Testimonials grid  —  [our-testimonials]
   ========================================================================== */

.ot {
	--yellow: #F1BC1F;
	--yellow-dark: #d99c07;
	--dark: #16221f;
	--body: #2c3a36;
	--radius: 56px;
	--gap: 36px;
}

.ot *,
.ot *::before,
.ot *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------- Filters */

.ot-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 50px;
	margin-bottom: 50px;
}

.ot-select {
	width: 300px;
	height: 60px;
	max-width: 100%;
	padding: 0 46px 0 20px;
	border: 0;
	border-radius: 0;
	background-color: var(--yellow);
	color: #fff;
	font: inherit;
	font-size: 22px;
	font-weight: 700;
	font-family: 'Barlow Semi Condensed', sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;

	/* chevron */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 15px auto;
}

.ot-select:hover {
	background-color: var(--yellow-dark);
}

/* ---------------------------------------------------------------- Grid */
/* Masonry with CSS columns — no JavaScript layout needed. */

.ot-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: flex-start;
}

.ot[data-columns="1"] .ot-grid { column-count: 1; }
.ot[data-columns="2"] .ot-grid { column-count: 2; }
.ot[data-columns="4"] .ot-grid { column-count: 4; }

.ot-card {
	width: calc((100% - 80px) / 3);
	break-inside: avoid;
	margin: 0;
	padding: 60px 40px;
	background: #fff;
	border-radius: 70px 0 70px 0;
	color: var(--body);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* ------------------------------------------------------- Video thumbnail */

.ot-play {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 0 28px;
	padding: 0;
	border: 0;
	overflow: hidden;
	border-radius: 28px 0 28px 0;
	background: #1d2724;
	cursor: pointer;
}

.ot-play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ot-play::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(11, 18, 16, 0.5);
}

.ot-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.2v13.6L19.5 12 8 5.2Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
}

.ot-play:hover .ot-play-icon {
	background-color: var(--yellow-dark);
}

/* ---------------------------------------------------------- Card content */

.ot-mark {
	display: flex;
	margin: 0 0 30px 0;
}

.ot-text {
	color: #1A1A1A;
	font-size: 17px;
	line-height: 26px;
	margin: 0 0 30px 0;
}

.ot-text p:first-child { margin-top: 0; }
.ot-text p:last-child  { margin-bottom: 0; }

.ot-author {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
}

.ot-avatar {
	flex: 0 0 auto;
	width: 100px;
	height: 100px;
	background: none;
	border-radius: 50%;
	overflow: hidden;
}

.ot-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ot-avatar-rgt{
	width: calc(100% - 100px);
	display: flex;
	flex-direction: column;
	padding: 0 0 0 25px;
}

.ot-avatar-rgt h6 {
	color: #112719;
	font-size: 19px;
	font-weight: 700;
	line-height: 26px;
	text-transform: capitalize;
	margin: 0;
}

.ot-avatar-rgt span {
	color: #1A1A1A;
	font-size: 17px;
	line-height: 26px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.ot-avatar-rgt p{
	margin: 0;
}

/* ----------------------------------------------------------- Load More */

.ot-actions {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.ot-more {
	width: 140px;
	height: 47px;
	background: var(--yellow);
	color: #112719;
	font-size: 17px;
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	border: 0;
	padding: 0;
}

.ot-more:hover {
	background: var(--yellow-dark);
}

.ot-more[disabled] {
	opacity: 0.6;
}

/* --------------------------------------------------------- Video popup */

.ot-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 30px;
	background: rgba(8, 13, 12, 0.9);
}

.ot-modal.open {
	display: flex;
}

.ot-modal-box {
	position: relative;
	width: 100%;
	max-width: 1000px;
	aspect-ratio: 16 / 9;
	background: #000;
}

.ot-modal-box iframe,
.ot-modal-box video {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.ot-modal-close {
	position: absolute;
	top: -54px;
	right: 0;
	width: 44px;
	height: 44px;
	border: 0;
	background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Cpath d='M2 2l16 16M18 2 2 18' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
	cursor: pointer;
}

.wpb_content_element.banner-heading{
	margin: 190px 0 176px !important;
}
.banner-heading h2{
	color: #fff;
}
.ot-wraper{
	margin: 100px 0 !important;
}
.ot-avatar.video-img{
	position: relative;
}
.ot-avatar.video-img:before{
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	position: absolute;
	top: 0;
	left: 0;
	content: "";
}
.ot-avatar.video-img:after{
	width: 25px;
	height: 30px;
	background: url('/wp-content/uploads/2026/08/play.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
	position: absolute;
	top: 50%;
	left: 50%;
	content: "";
	transform: translate(-50%,-50%);
}

.ot-grid.ot-grid-list{
	align-items: inherit;
	justify-content: center;
	margin: 50px 0 0 0;
}
.ot-grid.ot-grid-list .ot-card{
	background: #ecebe5;
	justify-content: space-between;
	box-sizing: border-box;
}
.all-btn{
	width: 100%;
	display: flex;
	justify-content: center;
	margin: 50px 0 100px !important;
}
.all-btn a{
	background-color: #f1bc1f;
	color: #112719 !important;
	font-size: 17px;
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none !important;
	outline: none !important;
	padding: 10.5px 27px;
	transition: all .3s ease-in;
}
.all-btn a:hover{
	background-color: #d99c07;
}
p.no-testimonials{
	width: 100%;
	text-align: center;
	margin: 30px 0 !important;
}
.ot-wraper .ot-grid > p{
	width: 100%;
	text-align: center;
}

.featured-heading{
	margin: 100px 0 0 0;
}
.featured-heading h2{
	color: #112719;
	font-size: 60px;
	font-weight: 700;
	font-family: 'Barlow Semi Condensed', sans-serif;
	line-height: 60px;
	text-align: center;
	margin: 0;
}
.ot-card-top{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0 0 30px 0;
}

.ot-wraper{
	position: relative;
}
.ot-loader {
	width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 30px 0;
	position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 999;
}

.ot-loader[hidden] {
	display: none;
}

.ot-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid #ddd;
	border-top-color: #000;
	border-radius: 50%;
	animation: ot-spin 0.7s linear infinite;
}
.ot-loader span{
	font-size: 17px;
  font-weight: 700;
}

@keyframes ot-spin {
	to {
		transform: rotate(360deg);
	}
}


.fancybox-content{
	max-width: 1000px;
	height: auto !important;
	aspect-ratio: 16/9;
}
.fancybox-button--close{
	background: #f1bc1f !important;
  color: #000 !important;
}

/* -------------------------------------------------------- Responsive */

@media (max-width: 1365px) {
	.wpb_content_element.banner-heading {
		margin: 190px 0 180px !important;
	}
	/**.banner-heading {
		margin: 160px 0 170px !important;
	}**/
	.ot-wraper {
		margin: 90px 0 !important;
	}
	.ot-filters{
		gap: 20px;
	}
	.ot-grid{
		gap: 20px;
	}
	.ot-card{
		width: calc((100% - 40px) / 3);
		border-radius: 60px 0 60px 0;
		padding: 40px 20px;
	}
	.ot-mark{
		margin: 0 0 20px 0;
	}
	.ot-text{
		margin: 0 0 20px 0;
	}
	.ot-avatar{
		width: 90px;
		height: 90px;
	}
	.ot-avatar-rgt{
		width: calc(100% - 90px);
		padding: 0 0 0 15px;
	}
	.ot-avatar-rgt h6{
		font-size: 18px;
		line-height: 25px;
	}
	.ot-avatar-rgt span{
		font-size: 16px;
		line-height: 24px;
	}
	.featured-heading {
		margin: 90px 0 0 0;
	}
	.all-btn {
		margin: 50px 0 90px !important;
	}
}

@media (max-width: 1199px) {
	/**.banner-heading {
		margin: 140px 0 150px !important;
	}**/
	.ot-filters{
		margin-bottom: 40px;
	}
	.ot-wraper {
		margin: 80px 0 !important;
	}
	.ot-grid {
		gap: 30px;
	}
	.ot-card{
		width: calc((100% - 60px) / 2);
	}
	.all-btn{
		margin: 10px 0 80px !important;
	}
	.featured-heading {
		margin: 80px 0 0 0;
	}
	.ot-grid.ot-grid-list{
		margin: 40px 0 0 0;
	}
	.all-btn {
		margin: 40px 0 80px !important;
	}
}

@media (max-width: 1023px) {
	/**.banner-heading {
		margin: 120px 0 110px !important;
	}**/
	.ot-wraper {
		margin: 70px 0 !important;
	}
	.ot-select{
		width: 270px;
		height: 50px;
		font-size: 18px;
	}
	.ot-mark img{
		width: 40px;
	}
	.ot-grid {
		gap: 20px;
	}
	.ot-card {
		width: calc((100% - 40px) / 2);
	}
	.all-btn{
		margin: 30px 0 70px !important;
	}
	.featured-heading h2{
		font-size: 50px;
		line-height: 50px;
	}
	.featured-heading{
		margin: 70px 0 0 0;
	}
	.ot-grid.ot-grid-list {
		margin: 30px 0 0 0;
	}
}

@media (max-width: 767px) {
	/**.banner-heading {
		margin: 100px 0 90px !important;
	}**/
	.ot-filters {
		gap: 10px;
		margin-bottom: 30px;
	}
	.ot-select{
		width: 250px;
	}
	.ot-grid {
		gap: 25px;
	}
	.ot-card {
		width: 100%;
	}
}

@media (max-width: 599px) {
	/**.banner-heading {
		margin: 90px 0 80px !important;
	}**/
	.ot-wraper {
		margin: 60px 0 !important;
	}
	.ot-select {
		width: calc(50% - 5px);
		background-position: right 12px center;
		padding: 0 30px 0 15px;
	}
	.all-btn{
		margin: 30px 0 60px !important;
	}
	.featured-heading {
		margin: 60px 0 0 0;
	}
	.featured-heading h2 {
		font-size: 40px;
		line-height: 40px;
	}
}

@media (max-width: 479px) {
	/**.banner-heading {
		margin: 70px 0 60px !important;
	}**/
	.ot-wraper {
		margin: 50px 0 !important;
	}
	.ot-select{
		width: 100%;
	}
	.ot-card{
		border-radius: 50px 0 50px 0;
		padding: 30px 15px;
	}
	.ot-avatar-rgt h6 {
		font-size: 16px;
		line-height: 24px;
	}
	.ot-avatar-rgt span {
		font-size: 15px;
		line-height: 24px;
	}
	.ot-actions{
		margin-top: 5px;
	}
	.featured-heading {
		margin: 50px 0 0 0;
	}
	.all-btn{
		margin: 25px 0 50px !important;
	}
}

.ot-grid.ot-grid-list {
	align-items: baseline;
}
.ot-clear-filter{
	width: 140px;
    height: 47px;
    background: var(--yellow);
    color: #112719 !important;
    font-size: 17px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    display: inline-block;
    padding: 0;
    line-height: 47px;
}
p.no-testimonials {
    margin: 30px 0 20px 0 !important;
}
.no-testimonials-outer{
	text-align: center;
    width: 100%;
    margin-top: -50px;
}
.ot-clear-filter:hover {
    background: var(--yellow-dark);
}
.ot-grid{
	min-height:100px;
}

/* ---------------------------------------------- Expand / collapse quotes */
/* Toggle is added by testimonials.js to quotes longer than 4 lines. */

.ot-text.is-clamped {
	position: relative;
	max-height: var(--ot-clamp, 104px);
	overflow: hidden;
}

.ot-text.is-clamped::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 26px;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff);
	pointer-events: none;
}

/* Featured grid cards are beige, so the fade matches that background */
.ot-grid-list .ot-text.is-clamped::after {
	background: linear-gradient(rgba(236, 235, 229, 0), #ecebe5);
}

.ot-text.has-toggle {
	margin-bottom: 12px;
}

.ot-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	align-self: flex-end; /* right side of the card */
	margin: 0 0 30px 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--yellow, #F1BC1F);
	color: #112719;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease;
}

.ot-toggle:hover,
.ot-toggle:focus-visible {
	background: var(--yellow-dark, #d99c07);
}

.ot-toggle .fa {
	transition: transform .3s ease;
}

.ot-card.is-expanded .ot-toggle .fa {
	transform: rotate(180deg);
}

.ot-grid.ot-animating .ot-card {
	transition: top .3s ease;
}

@media (max-width: 1365px) {
	.ot-toggle {
		margin-bottom: 20px;
	}
}