a[href^='tel:'],
a[href^='mailto:'] {
	white-space: nowrap;
}

.color-primary {
	color: var(--color-primary);
}

.card {
	background-color: white;
	box-shadow: 0 0 5px 7px rgba(0, 0, 0, 0.1);
	border-radius: 15px;
	padding: 2em;
}

.image-section {
	.container {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap: 1.5em;
		padding: 2em;

		& > * {
			flex: 1;
			min-width: 350px;
		}
	}

	.image-section-content {
		max-width: 750px;
	}
}

.check-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75em;

	li {
		display: flex;
		align-items: center;
		gap: 0.5em;

		i {
			color: var(--color-success);
			font-size: 1.2em;
		}
	}
}

.content-card-overlay {
	background-size: cover;
	background-position: center right;
	min-height: 500px;
	display: flex;
	align-items: center;

	.wrapper {
		background-color: rgba(255, 255, 255, 0.85);
		max-width: 650px;
		padding: 3.5em;
		border-radius: 12px;
		margin: 4em 4em;
		margin-left: 0px;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;

		h2 {
			color: var(--color-primary);
			font-weight: 700;
			font-size: 1.75em;
			margin-bottom: 0.75em;
			text-align: left;
		}

		.cta-btn {
			display: inline-block;
			background-color: var(--color-primary);
			color: #fff;
			text-align: center;
			font-weight: 700;
			font-size: 1em;
			letter-spacing: 0.05em;
			padding: 1em 2.5em;
			border-radius: 4px;
			text-decoration: none;
			transition: background-color 0.2s ease;

			&:hover {
				background-color: rgb(53, 65, 91);
			}
		}
	}

	@media (max-width: 600px) {
		.wrapper {
			margin: 2em 1em;
			padding: 2em;
			border-top-left-radius: 12px;
			border-bottom-left-radius: 12px;
		}
	}
}

.icon-divider {
	display: flex;
	align-items: center;
	gap: 0.25em;

	i {
		font-size: 1em;
	}

	&:before {
		content: '';
		height: 2px;
		background-color: var(--color-primary);
		border-radius: 1px;
		width: var(--divider-width, 25px);
	}

	&:after {
		content: '';
		height: 2px;
		background-color: var(--color-primary);
		border-radius: 1px;
		width: var(--divider-width, 25px);
	}
}

.on-page-contact-form {
	max-width: 600px;
	border-radius: 15px;
	padding: 3em;
	box-shadow: 0 0 5px 7px rgba(0, 0, 0, 0.1);
	background-color: var(--color-white);

	hgroup,
	.subinfo {
		text-align: center;
	}

	.subinfo {
		font-weight: 300;
		font-size: 1.5em;
	}

	@media (max-width: 700px) {
		padding: 2em;
	}
}

.happy-patient {
	display: flex;
	flex-direction: column;
	align-items: center;

	background-image: url('/assets/images/bg-happy-patient.png');
	padding: 10vh 1em;

	h2 {
		font-size: 2.5em;
		font-weight: 700;
		text-align: center;
		color: white;
	}

	.video-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 100px;
		background-color: white;
		text-align: center;
		max-width: 1000px;
		position: relative;
		border-radius: 15px;
		padding: 1em;
		padding-top: 75px;

		img {
			position: absolute;
			left: 50%;
			top: -100px;
			width: 200px;
			transform: translateX(-50%);
		}

		hgroup {
			font-size: 1.3em;
			margin-top: 1em;
			margin-bottom: 1em;
			color: var(--color-primary);

			h3 {
				font-weight: 300;
			}

			h4 {
				font-weight: 700;
			}
		}

		video {
			width: 100%;
			height: auto;
			border-radius: 10px;
		}
	}
}

.site-footer {
	background-color: #242f53;
	color: #ffffff;
	padding: 5em 1em 2em;
	padding-bottom: 10vh;

	.container {
		width: 100%;
		max-width: 1200px;
	}

	.footer-top {
		display: grid;
		grid-template-columns: repeat(4, minmax(180px, 1fr));
		gap: 2.5em;
		padding-bottom: 2em;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.footer-column,
	.footer-brand {
		display: flex;
		flex-direction: column;
		gap: 1.25em;
	}

	.footer-column h3 {
		margin: 0;
		font-size: 1.05em;
		font-weight: 700;
		letter-spacing: 0.02em;
	}

	.footer-column ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: 0.8em;
	}

	.footer-column li {
		margin: 0;
		font-size: 0.95em;
	}

	.footer-column li::before {
		content: '►';
		display: inline-block;
		margin-right: 0.7em;
		color: var(--color-white);
		font-size: 0.95em;
	}

	.footer-column a {
		color: rgba(255, 255, 255, 0.92);
		text-decoration: none;
	}

	.footer-column a:hover {
		color: #ffffff;
	}

	.footer-brand {
		justify-content: flex-start;
		align-items: flex-start;
	}

	.footer-brand img {
		max-width: 220px;
		height: auto;
	}

	.footer-contact {
		display: flex;
		flex-direction: column;
		gap: 0.4em;
		font-size: 0.95em;
		color: rgba(255, 255, 255, 0.85);
	}

	.footer-contact strong {
		font-weight: 700;
		color: #ffffff;
	}

	.footer-contact address {
		font-style: normal;
		line-height: 1.6;
	}

	.footer-bottom {
		margin-top: 2em;
		padding-top: 2em;
	}

	.footer-bottom p {
		margin: 0;
		font-size: 0.9em;
		color: rgba(255, 255, 255, 0.72);
		text-align: center;
		line-height: 1.7;
	}

	.footer-bottom a {
		color: rgba(255, 255, 255, 0.92);
		text-decoration: underline;
	}

	@media (max-width: 980px) {
		.footer-top {
			grid-template-columns: repeat(2, minmax(200px, 1fr));
		}
	}

	@media (max-width: 680px) {
		.footer-top {
			grid-template-columns: 1fr;
		}

		.footer-brand {
			align-items: stretch;
		}
	}
}

/* Shared service-page sections (used by 3+ pages) */
.service-intro {
	margin-bottom: 3em;

	.title {
		font-weight: 700;
		color: #262254;
	}

	.subinfo {
		font-weight: 300;
		font-size: 1.5em;
	}

	.intro-text {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		justify-content: center;
		padding: 10vh 1em;
		max-width: 700px;

		hgroup {
			line-height: 2em;
			margin-bottom: 2em;

			h1,
			h2.intro-title {
				color: var(--color-primary);
				font-size: 2.5em;
			}

			h2,
			h3.intro-subtitle {
				font-weight: 500;
				color: #7a7a7a;
				font-size: 1.5em;
			}
		}

		p {
			font-size: 1.25em;
		}

		.employ-cta {
			margin-top: 2em;
		}
	}

	.on-page-contact-form {
		margin-top: -15vh;
		z-index: 2;
	}

	@media (max-width: 1024px) {
		text-align: center;

		.row {
			flex-direction: column;
			align-items: center;
			padding-left: 1em;
			padding-right: 1em;
		}

		.row > .on-page-contact-form {
			order: -1;
		}

		.intro-text {
			max-width: 100%;
			padding: 7vh 1em 2em;
		}

		.on-page-contact-form {
			width: min(100%, 600px);
			text-align: left;
		}
	}

	@media (max-width: 560px) {
		.intro-text {
			hgroup {
				line-height: 1.5em;
				margin-bottom: 1.25em;

				h1,
				h2.intro-title {
					font-size: 2em;
				}

				h2,
				h3.intro-subtitle {
					font-size: 1.2em;
				}
			}

			p {
				font-size: 1.05em;
			}
		}
	}
}

.why-trust {
	background-color: var(--color-primary);
	color: var(--color-white);

	.special-row {
		.featured-image {
			height: 100%;
			position: relative;

			img {
				height: 100%;
				width: auto;
				margin-top: -50%;
			}
		}

		.why-trust-text {
			padding: 3em;
			max-width: 800px;

			h2 {
				font-weight: 700;
				font-size: 2.5em;
				margin-bottom: 0.5em;
			}

			p {
				font-size: 1.25em;
				line-height: 1.75em;
				margin-bottom: 0;
				color: var(--color-white);
			}
		}
	}

	.benefits {
		justify-content: space-evenly;
		gap: 3em;
		text-align: center;
		flex-wrap: wrap;

		.column {
			align-items: center;
			width: 300px;
		}

		.icon {
			width: 120px;
		}

		hgroup {
			font-size: 1.3em;

			h3 {
				font-weight: 700;
			}

			h4 {
				font-weight: 300;
			}
		}
	}

	@media (max-width: 900px) {
		.special-row {
			flex-direction: column;
			align-items: center;
			gap: 0;

			.featured-image {
				width: 100%;

				img {
					width: 100%;
					height: auto;
				}
			}

			.why-trust-text {
				padding: 2em 1em;

				h2 {
					font-size: 2em;
				}

				p {
					font-size: 1.05em;
					line-height: 1.6em;
				}
			}
		}
	}

	@media (max-width: 900px) {
		.special-row .featured-image img {
			margin-top: -25%;
			width: 100%;
			height: auto;
		}
	}

	@media (max-width: 640px) {
		.special-row {
			.featured-image img {
				margin-top: -36%;
			}
		}
	}
}

.discover {
	display: flex;
	flex-direction: column;

	background-image: url('/assets/images/bg-discover.webp');
	background-size: cover;
	background-position: center;

	text-align: center;
	padding: 10vh 1em;

	h2 {
		font-weight: 700;
		color: var(--color-white);
		font-size: 2.5em;
		margin-bottom: 0.5em;
		margin-top: -30vh;
	}

	.video-container {
		background-color: white;
		padding: 1em;
		margin-bottom: 2em;
		border-radius: 15px;

		video {
			width: 100%;
			max-width: 1000px;
			height: auto;
			border-radius: 10px;
		}
	}

	.outro-text {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 2em;
		color: var(--color-primary);

		h3 {
			font-size: 1.5em;
			font-weight: 300;
		}

		a {
			color: var(--color-primary);
			font-weight: 600;
			font-size: 1.25em;
			text-decoration: none;
			transition: color 0.2s ease;

			&:hover {
				color: rgb(53, 65, 91);
			}
		}
	}

	@media (max-width: 560px) {
		padding: 7vh 1em;

		h2 {
			font-size: 2em;
		}

		.outro-text {
			font-size: 1.25em;

			h3 {
				font-size: 1.4em;
			}
		}
	}
}

.services {
	--fa-primary-color: white;
	--fa-secondary-color: white;

	color: var(--color-white);
	background-color: rgb(38, 34, 84);
	padding: 5em 1em;

	.container {
		max-width: 1200px;
	}

	hgroup {
		text-align: center;

		h2 {
			font-weight: 700;
			font-size: 2.5em;
		}

		h3 {
			font-weight: 300;
			font-size: 1.5em;
		}
	}

	p {
		text-align: center;
		font-size: 1.1em;
		line-height: 1.75em;
		margin-bottom: 2em;
	}

	.service-items {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 2em;
		margin-top: 3em;

		.item {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 0.5em;

			.item-icon {
				font-size: 2.5em;
				margin-bottom: 0.25em;
			}

			.item-title {
				font-weight: 700;
				font-size: 1.1em;
				line-height: 1.3em;
			}

			.item-text {
				font-size: 0.95em;
				line-height: 1.6em;
				margin-bottom: 0;
				text-align: left;
			}
		}
	}

	@media (max-width: 1024px) {
		.service-items {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 560px) {
		.service-items {
			grid-template-columns: 1fr;

			.item {
				align-items: center;
				text-align: center;
			}
		}
	}
}

.floating-actions {
	position: fixed;
	left: 50%;
	bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(8px);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		visibility 0.2s ease;
	z-index: 1200;
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 6px;
	overflow: hidden;
	backdrop-filter: blur(10px);
}

.floating-actions.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.floating-action {
	--fa-opacity: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 0;
	background: rgb(from var(--color-gray-light) r g b / 0.85);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	padding: 0 0.85rem;
	width: auto;
	white-space: nowrap;
	gap: 0.45rem;
}

.back-to-top.floating-action {
	width: 52px;
	padding: 0;
	font-size: 1.8rem;
}

.back-to-top-close.floating-action {
	width: 44px;
	padding: 0;
	font-size: 1.15rem;
	color: var(--color-primary);
}

.floating-action + .floating-action {
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.back-to-top i {
	font-size: 1.25rem;
}