/*=========================================================
  Santulan Therapy Clinic
  Main Stylesheet
=========================================================*/
*,
*::before,
*::after {

	box-sizing: border-box;

}

html,
body {

	width: 100%;

	max-width: 100%;

	overflow-x: hidden;

}

/*=========================================================
  Header
=========================================================*/

#header {

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;

	z-index: 1000;

	background: rgba(255, 255, 255, .95);

	backdrop-filter: blur(12px);

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

	transition: var(--transition);

}

.navbar {

	display: flex;

	justify-content: space-between;

	align-items: center;

	height: 90px;

	width: 100%;

}

.logo {

	display: flex;

	align-items: center;

	flex-shrink: 0;

}

#mobileMenu {

	margin-left: auto;

}

.nav-links {

	display: flex;

	align-items: center;

	gap: 40px;

}

.nav-links a {

	position: relative;

	font-weight: 500;

	color: var(--heading);

}

.nav-links a::after {

	content: "";

	position: absolute;

	left: 0;
	bottom: -8px;

	width: 0;

	height: 2px;

	background: var(--accent);

	transition: var(--transition);

}

.nav-links a:hover::after {

	width: 100%;

}

.nav-buttons {

	display: flex;

	margin-left: 40px;

	align-items: center;

	gap: 16px;

	flex-shrink: 0;

}

.nav-buttons .btn {
	white-space: nowrap;
}

#mobileMenu {

	display: none;

}

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

.hero {

	position: relative;

	overflow: hidden;

	padding-top: 180px;

	padding-bottom: 120px;

	background:
		radial-gradient(circle at top right,
			rgba(200, 162, 90, .18),
			transparent 35%),

		radial-gradient(circle at bottom left,
			rgba(46, 94, 78, .12),
			transparent 35%),

		var(--background);

}

.hero::before {
	content: "";
	position: absolute;
	width: 320px;
	height: 320px;
	top: 40px;
	right: 40px;
	border-radius: 50%;
	background: rgba(46, 94, 78, .05);
	filter: blur(20px);
	pointer-events: none;
	z-index: 0;
	animation: rotateBlob 20s linear infinite;
}

.hero::after {
	content: "";
	position: absolute;
	width: 300px;
	height: 300px;
	bottom: -100px;
	left: -100px;
	border-radius: 50%;
	background: rgba(200, 162, 90, .08);
	animation: rotateBlobReverse 18s linear infinite;
}


.hero-grid {

	position: relative;

	z-index: 1;

	display: grid;

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

	align-items: center;

	gap: 70px;

}

.hero-tag {

	display: inline-flex;

	align-items: center;

	padding: 8px 20px;

	border-radius: 999px;

	background: var(--primary-light);

	color: var(--primary);

	margin-bottom: 25px;

}

.hero h1 {

	margin-bottom: 25px;

}

.hero h1 span {

	color: var(--primary);

}

.hero p {

	max-width: 620px;

	font-size: var(--fs-18);

}

.hero-buttons {

	display: flex;

	gap: 20px;

	margin-top: 40px;

}

.hero-info {

	display: flex;

	gap: 40px;

	margin-top: 50px;

	color: var(--text-light);

}

.hero-image {

	display: flex;

	justify-content: center;

	align-items: center;

	width: 100%;

}

.hero-image img {

	display: block;

	width: 100%;

	max-width: 520px;

	height: auto;

	object-fit: contain;

}

.hero-image,
.about-image,
.therapist-illustration {

	overflow: hidden;

}

.hero-image img,
.about-image img,
.therapist-illustration img {

	display: block;

	width: 100%;

	height: auto;

}

/*=========================================================
Section Heading
=========================================================*/

.section-heading {

	text-align: center;

	max-width: 750px;

	margin: auto auto 70px;

}

.section-heading h2 {

	margin-top: 15px;

}

/*=========================================================
About
=========================================================*/

.about-grid {

	display: grid;

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

	gap: 80px;

	align-items: center;

}

.about-highlights {

	display: grid;

	gap: 25px;

	margin-top: 40px;

}

.highlight-card {

	display: flex;

	gap: 20px;

	padding: 20px;

	border-radius: var(--radius-md);

	background: white;

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

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

}

.highlight-card svg {

	color: var(--primary);

}

.about-image {

	display: flex;

	justify-content: center;

	align-items: center;

	width: 100%;

}

.about-image img {

	display: block;

	width: 100%;

	max-width: 520px;

	height: auto;

}

/*=========================================================
Why Choose Us
=========================================================*/

.feature-grid {

	display: grid;

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

	gap: 25px;

}

.feature-card {

	padding: 35px;

	background: white;

	border-radius: var(--radius-md);

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

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

}

.feature-card h3 {

	margin-bottom: 15px;

}

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

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

.services-grid {

	display: grid;

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

	gap: 25px;

}

.service-card {

	display: flex;

	flex-direction: column;

	align-items: center;

	text-align: center;

	height: 100%;

	padding: 35px;

	background: #fff;

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

	border-radius: var(--radius-md);

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

	text-decoration: none;

	color: inherit;

	transition:
		transform .3s ease,
		box-shadow .3s ease,
		border-color .3s ease;

}

.service-card:hover {

	border-color: var(--primary);

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

}

.service-card h3 {

	margin-bottom: 12px;

	color: var(--heading);

}

.service-card p {

	flex: 1;

	margin-bottom: 24px;

}

.service-link {

	display: inline-flex;

	align-items: center;

	gap: 8px;

	margin-top: auto;

	font-weight: 600;

	color: var(--primary);

	transition:
		gap .3s ease,
		color .3s ease;

}

.service-card:hover .service-link {

	gap: 14px;

	color: var(--accent);

}

/*=========================================================
  Service Icons
=========================================================*/

.service-icon {

	width: 56px;

	height: 56px;

	margin-bottom: 22px;

	transition:
		transform .35s ease,
		filter .35s ease;

}

.service-card:hover .service-icon {

	transform: translateY(-4px) scale(1.08);

}

/*=========================================================
  Why Choose Section
=========================================================*/

.why-choose-section {

	background: #f8fbfa;

}

.feature-icon {

	width: 72px;

	height: 72px;

	margin: 0 auto 24px;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 50%;

	background: var(--primary-light);

	font-size: 2rem;

	transition:
		transform .3s ease,
		background-color .3s ease;

}

.feature-card:hover .feature-icon {

	transform: scale(1.08);

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

}

/*=========================================================
Therapist
=========================================================*/

.therapist-grid {

	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 80px;

	align-items: center;

}

.therapist-list {

	margin: 30px 0;

}

.therapist-list li {

	margin-bottom: 12px;

}

.therapist-illustration {

	display: flex;

	justify-content: center;

	align-items: center;

}

.therapist-illustration img {

	display: block;

	width: 100%;

	max-width: 480px;

	height: auto;

}

.therapist-info {

	display: grid;

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

	gap: 20px;

}

.info-card {

	padding: 22px;

	border-radius: 16px;

	background: #F8FBF9;

	border: 1px solid rgba(46, 94, 78, .08);

}

.info-card h5 {

	margin-bottom: 15px;

	color: var(--primary);

}

.info-card ul {

	margin: 0;

	padding-left: 18px;

}

.specialization-grid {

	display: flex;

	flex-wrap: wrap;

	gap: 12px;

	margin: 20px 0 35px;

}

.specialization-grid span {

	padding: 10px 18px;

	border-radius: 999px;

	background: #F8FBF9;

	border: 1px solid rgba(46, 94, 78, .12);

	font-size: 14px;

}

.benefit-box {

	margin-top: 20px;

	padding: 25px;

	border-radius: 16px;

	background: #F8FBF9;

}

.benefit-grid {

	display: flex;

	flex-wrap: wrap;

	gap: 12px;

	margin-top: 15px;

}

.benefit-grid span {

	background: #ffffff;

	border: 1px solid rgba(46, 94, 78, .12);

	border-radius: 999px;

	padding: 10px 18px;

}

.therapist-actions {

	margin-top: 35px;

}

.approach-section {

	background: #F8FBF9;

}

.approach-grid {

	display: grid;

	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

	gap: 30px;

	margin-top: 60px;

}

.approach-card {

	background: #ffffff;

	padding: 35px;

	border-radius: 18px;

	text-align: center;

	transition: .3s;

	border: 1px solid rgba(46, 94, 78, .08);

	box-shadow: 0 8px 24px rgba(0, 0, 0, .05);

}

.approach-card:hover {

	transform: translateY(-6px);

	box-shadow: 0 20px 40px rgba(0, 0, 0, .08);

}

.approach-icon {

	width: 70px;

	height: 70px;

	margin: 0 auto 20px;

	display: flex;

	align-items: center;

	justify-content: center;

	font-size: 32px;

	border-radius: 50%;

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

}

.approach-card h3 {

	margin-bottom: 18px;

	color: var(--primary);

}

.approach-card p {

	line-height: 1.8;

	margin: 0;

}

/*=========================================================
Process
=========================================================*/

.process-grid {

	display: grid;

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

	gap: 30px;

}

.process-card {

	position: relative;

	padding: 40px;

	background: white;

	border-radius: var(--radius-md);

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

}

.process-number {

	width: 60px;

	height: 60px;

	border-radius: 50%;

	display: flex;

	align-items: center;

	justify-content: center;

	background: var(--primary);

	color: white;

	margin-bottom: 25px;

	font-weight: bold;

}

/*=========================================================
Statistics
=========================================================*/

.stats-grid {

	display: grid;

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

	gap: 25px;

}

.stat-card {

	text-align: center;

	padding: 40px;

	background: white;

	border-radius: var(--radius-md);

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

}

.stat-card h2 {

	color: var(--primary);

}

/*=========================================================
Testimonials
=========================================================*/

.testimonial-grid {

	display: grid;

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

	gap: 30px;

}

.testimonial-card {

	padding: 35px;

	background: white;

	border-radius: var(--radius-md);

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

}

/*=========================================================
FAQ
=========================================================*/

.faq-container {

	max-width: 900px;

	margin: auto;

}

.faq-container details {

	margin-bottom: 18px;

	background: white;

	border-radius: var(--radius-md);

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

	padding: 20px;

}

summary {

	cursor: pointer;

	font-weight: 600;

}

/*=========================================================
Contact
=========================================================*/

.contact-grid {

	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 70px;

	align-items: center;

}

.contact-details ul {

	margin: 30px 0;

}

.contact-details li {

	margin-bottom: 18px;

}

.map-container iframe {

	width: 100%;

	height: 450px;

	border: none;

	border-radius: var(--radius-md);

}

.contact-list {

	list-style: none;

	padding: 0;

	margin: 35px 0;

}

.contact-list li {

	display: flex;

	gap: 16px;

	align-items: flex-start;

	margin-bottom: 28px;

}

.contact-list img {

	flex-shrink: 0;

	margin-top: 4px;

}

.contact-list address {

	font-style: normal;

	line-height: 1.8;

}

.contact-intro {

	margin: 25px 0 35px;

	line-height: 1.9;

}

.clinic-hours {

	margin: 35px 0;

	padding: 20px;

	border-radius: 12px;

	background: #F8FBF9;

}

.contact-actions {

	display: flex;

	gap: 16px;

	flex-wrap: wrap;

	margin-top: 30px;

}

.map-actions {

	text-align: center;

	margin-top: 20px;

}

/*=========================================================
Footer
=========================================================*/

footer {

	background: var(--primary-dark);

	color: white;

	padding: 80px 0 30px;

}

/* 
.footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr;

    gap: 40px;

    margin-bottom: 50px;

} */

footer h3,
footer h4 {

	color: white;

}

footer hr {

	opacity: .15;

	margin: 30px 0;

}

.copyright {

	text-align: center;

	opacity: .8;

}

/*=========================================================
Floating WhatsApp
=========================================================*/

.floating-whatsapp {

	position: fixed;

	right: 25px;

	bottom: 25px;

	width: 65px;

	height: 65px;

	border-radius: 50%;

	background: #25D366;

	color: white;

	display: flex;

	align-items: center;

	justify-content: center;

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

	z-index: 999;

}

/*=============================================
Navigation States
=============================================*/

.header-scrolled {

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

	background: rgba(255, 255, 255, .98);

}

.nav-links a.active {

	color: var(--primary);

}

/*=========================================================
FAQ Animation
=========================================================*/

.faq-container details {

	overflow: hidden;

	transition:
		background-color .3s ease,
		box-shadow .3s ease,
		border-color .3s ease;

}

.faq-container details summary {

	position: relative;

	list-style: none;

	padding-right: 35px;

	cursor: pointer;

}

.faq-container details summary::-webkit-details-marker {

	display: none;

}

.faq-container details summary::after {

	content: "+";

	position: absolute;

	right: 0;

	top: 50%;

	transform: translateY(-50%);

	font-size: 24px;

	color: var(--primary);

	transition: transform .3s ease;

}

.faq-container details[open] summary::after {

	content: "−";

}

.faq-container details p {

	margin-top: 20px;

	animation: faqFade .3s ease;

}

@keyframes faqFade {

	from {

		opacity: 0;

		transform: translateY(-8px);

	}

	to {

		opacity: 1;

		transform: translateY(0);

	}

}


/*=========================================================
  FOOTER
=========================================================*/

.site-footer {

	background: var(--primary-dark);

	color: #ffffff;

	padding: 80px 0 30px;

}

.footer-grid {

	display: grid;

	grid-template-columns: 1.5fr 1.5fr 1fr 1fr;

	gap: 50px;

	align-items: flex-start;

}

/*==========================================
Logo
==========================================*/

.footer-logo img {

	width: 240px;

	height: auto;

	margin-bottom: 28px;

}

.footer-description {

	max-width: 420px;

	line-height: 1.9;

	margin-bottom: 26px;

	color: rgba(255, 255, 255, .92);

}

.footer-tagline {

	color: var(--color-secondary);

	font-weight: 600;

	line-height: 1.7;

}

/*==========================================
Section Headings
==========================================*/

.site-footer h4 {

	position: relative;

	display: inline-block;

	margin: 0 0 28px;

	padding-bottom: 12px;

	font-family: var(--font-heading);

	font-size: 1.75rem;

	font-weight: 600;

	color: #ffffff;

	letter-spacing: .3px;

}

.site-footer h4::after {

	content: "";

	position: absolute;

	left: 0;

	bottom: 0;

	width: 48px;

	height: 3px;

	border-radius: 999px;

	background: var(--color-secondary);

}

/*==========================================
Links
==========================================*/

.footer-links {

	list-style: none;

	margin: 0;

	padding: 0;

}

.footer-links li {

	margin-bottom: 16px;

}

.footer-links a {

	display: inline-block;

	color: rgba(255, 255, 255, .88);

	text-decoration: none;

	line-height: 1.7;

	transition: all .25s ease;

}

.footer-links a:hover {

	color: var(--color-secondary);

	transform: translateX(6px);

}

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

.footer-services .footer-links a {

	max-width: 260px;

}

/*==========================================
Contact
==========================================*/

.footer-contact p {

	margin-bottom: 22px;

	line-height: 1.8;

}

.footer-contact strong {

	display: block;

	margin-bottom: 6px;

	color: #ffffff;

}

.footer-contact a {

	color: rgba(255, 255, 255, .92);

	text-decoration: none;

}

.footer-contact a:hover {

	color: var(--color-secondary);

}

/*==========================================
Address
==========================================*/

.footer-address address {

	font-style: normal;

	line-height: 1.9;

	color: rgba(255, 255, 255, .92);

	margin-bottom: 28px;

}

/*==========================================
Button
==========================================*/

.btn-footer {

	padding: 14px 30px;

}

/*==========================================
Divider
==========================================*/

.footer-divider {

	margin: 65px 0 35px;

	border: none;

	border-top: 1px solid rgba(255, 255, 255, .12);

}

/*==========================================
Bottom Footer
==========================================*/

.footer-bottom {

	text-align: center;

}

.footer-bottom-links {

	display: flex;

	justify-content: center;

	align-items: center;

	flex-wrap: wrap;

	gap: 10px;

	margin: 18px 0;

}

.footer-bottom-links a {

	color: rgba(255, 255, 255, .9);

	text-decoration: none;

	transition: color .25s ease;

}

.footer-bottom-links a:hover {

	color: var(--color-secondary);

}

.copyright {

	color: rgba(255, 255, 255, .8);

	margin-bottom: 18px;

}

.footer-note {

	margin-top: 18px;

	color: rgba(255, 255, 255, .65);

	font-size: .95rem;

}

.footer-about a img.footer-logo-image {
    background-color: aliceblue;
	margin-bottom: 25px;
}


/*=========================================================
Accessibility
=========================================================*/

.btn:focus-visible,
a:focus-visible {

	outline: 3px solid var(--accent);

	outline-offset: 3px;

}

/*=========================================================
Reduced Motion
=========================================================*/

@media (prefers-reduced-motion: reduce) {

	* {

		animation: none !important;

		transition: none !important;

		scroll-behavior: auto !important;

	}

}

/*=========================================================
Interactive Cards
=========================================================*/

.feature-card,
.service-card,
.process-card,
.stat-card,
.testimonial-card {

	transition:
		transform .3s ease,
		box-shadow .3s ease;

}

.feature-card:hover,
.service-card:hover,
.process-card:hover,
.stat-card:hover,
.testimonial-card:hover {

	transform: translateY(-6px);

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

}

.specialization-grid span {

	transition:
		background-color .25s ease,
		color .25s ease;

}

.specialization-grid span:hover {

	background: var(--primary);

	color: #fff;

}

.contact-list li {

	transition: transform .25s ease;

}

.contact-list li:hover {

	transform: translateX(5px);

}

.contact-list li div {

	width: 90%;

}

.footer-links a {

	transition: color .3s ease;

}

.footer-links a:hover {

	color: var(--accent);

}

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

.service-list {

	margin-top: 30px;

	padding-left: 20px;

}

.service-list li {

	margin-bottom: 14px;

	color: var(--text);

	line-height: 1.8;

}