/* Estilos para Desktop */
.testimonial-section {
	width: 100%;
	height: 700px;
	background: #f2f9f4;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.testimonial-container {
	width: 80%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	color: #000;
	overflow: hidden;
}

.testimonial-header {
	width: 100%;
}

.testimonial-header h2 {
	font-size: 30px;
	font-weight: 600;
	color: #000;
}

.testimonial-header p {
	color: #717171;
	font-size: 14px;
	font-weight: 400;
	padding-inline-end: 59%;
}

.testimonial-tabs {
	width: 100%;
	display: flex;
	justify-content: normal;
	gap: 5px;
	margin: 20px;
}

.testimonial-tabs button {
	width: 25%;
	height: 38px;
	background: none;
	border: none;
	border-bottom: 1px solid black;
	font-size: 20px;
	cursor: pointer;
	transition: 0.3s;
	color: black;
	font-weight: 400;
}

@media (max-width: 1245px) {
    .testimonial-tabs button {
        font-size: 1.5vw;
    }
}

.testimonial-tabs button.active {
	color: #46ad67;
	border-bottom: 2px solid #46ad67;
	font-weight: 600;
}

.testimonial-slider {
	position: relative;
	width: 100%;
}

.testimonial-track {
	display: flex;
	align-items: center;
	gap: 20px;
	transition: transform 0.5s ease-in-out;
}

.testimonial-card {
	min-width: 370px;
	height: 346.16px;
	background: white;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.testimonial-card h3 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 10px;
	text-decoration: underline;
}

.testimonial-card p {
	font-size: 14px;
	color: #181a20;
	line-height: 28px;
}

.testimonial-rate {
	display: flex;
	justify-content: start;
	align-items: center;
	color: #e59819;
	font-size: 10px;
	font-weight: 900;
}

.testimonial-user {
	height: 81px;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	border-top: 1px solid #ddd;
	padding-top: 10px;
}

.testimonial-user img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
}

.testimonial-user div {
	font-size: 14px;
	font-weight: 600;
}

.testimonial-user div small {
	font-size: 13px;
	color: #717171;
	font-weight: 400;
}

.testimonial-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.testimonial-dots span {
	width: 10px;
	height: 10px;
	background: #bbb;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.3s;
}

.testimonial-dots span.active {
	background: #46ad67;
}

/* Estilos para Móvil (Media Query) */
@media (max-width: 480px) {
	.testimonial-section {
		width: 100%;
		height: auto;
		padding: 20px;
	}

	.testimonial-container {
		width: 100%;
		height: auto;
	}

	.testimonial-header h2 {
		font-size: 20px;
		font-weight: 600;
		color: #000;
	}

	.testimonial-header p {
		font-size: 14px;
		font-weight: 400;
		color: #717171;
		padding: 0%;
	}

	.desktop-tabs {
		display: none;
	}

	.mobile-tabs {
		display: block;
		width: 100%;
		margin-bottom: 20px;
	}

	.custom-select {
		position: relative;
		width: 100%;
		font-family: "Arial", sans-serif;
	}

	.custom-select .selected {
		padding: 10px 15px;
		background: none;
		border-bottom: 1px solid green;
		cursor: pointer;
		font-size: 16px;
		color: #4caf50;
		transition: 0.3s;
	}

	.custom-select .options {
		position: absolute;
		top: 110%;
		left: 0;
		width: 100%;
		background: #fff;
		border-radius: 10px;
		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
		overflow: hidden;
		display: none;
		z-index: 999;
	}

	.custom-select .option {
		padding: 10px 15px;
		cursor: pointer;
		transition: 0.3s;
	}

	.custom-select .option:hover {
		background: #46ad67;
		color: #fff;
	}

	.custom-select .option.selected {
		font-weight: 600;
	}

	.testimonial-slider {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.testimonial-slider::-webkit-scrollbar {
		display: none;
	}

	.testimonial-track {
		display: flex;
		gap: 15px;
		transform: none !important;
	}

	.testimonial-card {
		min-width: 285px;
		max-width: 285px;
		flex-shrink: 0;
	}

	.testimonial-dots {
		display: flex;
		justify-content: center;
		gap: 10px;
		margin-top: 10px;
	}
}

@media (min-width: 480px) {
	.testimonial-dropdown.mobile-tabs {
		display: none;
	}
}