/*=========================================================
  Santulan Therapy Clinic
  Service Pages
=========================================================*/

/*=========================================================
  Hero
=========================================================*/

.page-hero {

	padding: 170px 0 90px;

	background: linear-gradient(135deg,
			#f9fcfb 0%,
			#f3f8f6 100%);

	position: relative;

	overflow: hidden;

}

.page-hero::before {

	content: "";

	position: absolute;

	width: 320px;

	height: 320px;

	border-radius: 50%;

	background: rgba(46, 94, 78, .05);

	top: -120px;

	right: -120px;

}

.page-hero-grid {

	display: grid;

	grid-template-columns: 1.2fr .8fr;

	align-items: center;

	gap: 70px;

}

.page-hero-content h1 {

	margin: 20px 0;

}

.page-hero-content p {

	max-width: 650px;

}

.page-hero-image img {

	width: 100%;

	max-width: 420px;

	display: block;

	margin: auto;

}

/*=========================================================
  Breadcrumb
=========================================================*/

.breadcrumb {

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	gap: 10px;

	margin-bottom: 35px;

	font-size: .95rem;

	color: var(--text-light);

}

.breadcrumb a {

	color: var(--primary);

	text-decoration: none;

}

.breadcrumb a:hover {

	text-decoration: underline;

}

/*=========================================================
  Section Intro
=========================================================*/

.section-heading {

	max-width: 760px;

	margin-inline: auto;

	text-align: center;

}

/*=========================================================
  Service List
=========================================================*/

.service-list {

	list-style: none;

	padding: 0;

	margin: 35px 0 0;

}

.service-list li {

	padding: 14px 0;

	border-bottom: 1px solid var(--border);

	display: flex;

	align-items: center;

	gap: 12px;

}

/*=========================================================
  Highlight
=========================================================*/

.service-highlight {

	padding: 40px;

	border-radius: 24px;

	background: #fff;

	box-shadow: var(--shadow-md);

	border-left: 6px solid var(--primary);

}

/*=========================================================
  CTA
=========================================================*/

.cta-section {

	background: linear-gradient(135deg,
			#f5faf8,
			#eef6f2);

}

.cta-box {

	max-width: 850px;

	margin: auto;

	text-align: center;

	padding: 60px 50px;

	background: #fff;

	border-radius: 30px;

	box-shadow: var(--shadow-lg);

}

.cta-box h2 {

	margin-bottom: 20px;

}

.cta-box p {

	margin-bottom: 35px;

}

/*=========================================================
  Related Services
=========================================================*/

.related-services {

	display: grid;

	grid-template-columns: repeat(2, 1fr);

	gap: 25px;

}

.related-services a {

	display: block;

	padding: 28px;

	border-radius: 18px;

	background: #fff;

	text-decoration: none;

	color: inherit;

	box-shadow: var(--shadow-sm);

	transition: .3s;

}

.related-services a:hover {

	transform: translateY(-6px);

	box-shadow: var(--shadow-lg);

}

/*=========================================================
  Mobile
=========================================================*/

@media (max-width:992px) {

	.page-hero-grid {

		grid-template-columns: 1fr;

		text-align: center;

	}

	.page-hero {

		padding: 150px 0 70px;

	}

}

@media (max-width:768px) {

	.related-services {

		grid-template-columns: 1fr;

	}

	.cta-box {

		padding: 40px 25px;

	}

}