/*=========================================================
  Santulan Therapy Clinic
  Responsive Stylesheet (Production)
=========================================================*/

/*------------------------------
  Large Desktop
------------------------------*/
@media (max-width:1400px) {
	.container {
		width: 100%;
		max-width: var(--container-width);
		padding: 0 30px;
		margin: 0 auto;
		box-sizing: border-box;
	}
}

/*------------------------------
  Laptop
------------------------------*/
@media (max-width:1200px) {

	html {
		font-size: 15px;
	}

	.hero-grid,
	.about-grid,
	.therapist-grid,
	.contact-grid {
		gap: 50px;
	}

	.feature-grid,
	.services-grid,
	.process-grid,
	.stats-grid,
	.testimonial-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

/*------------------------------
  Tablet
------------------------------*/
@media (max-width:992px) {

	:root {
		--section-padding: 90px;
	}

	.container {
		max-width: 100%;
		padding: 0 24px;
	}

	.navbar {
		height: 80px;
	}

	.nav-links,
	.nav-buttons {
		display: none !important;
	}

	#mobileMenu {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border-radius: 12px;
		background: var(--primary-light);
		margin-left: auto;
		cursor: pointer;
	}

	.mobile-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 24px;
		background: #fff;
		box-shadow: 0 16px 40px rgba(0, 0, 0, .08);
		transform: translateY(-16px);
		opacity: 0;
		visibility: hidden;
		transition: .3s;
		z-index: 999;
	}

	.mobile-nav.active {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.mobile-nav a {
		color: var(--primary);
		text-decoration: none;
		font-weight: 600;
		padding: 10px 0;
	}

	.hero {
		padding-top: 140px;
	}

	.hero-grid,
	.about-grid,
	.therapist-grid,
	.contact-grid {
		grid-template-columns: 1fr;
	}

	.hero-image {
		order: -1;
	}

	.hero-content,
	.about-content,
	.therapist-content,
	.contact-details {
		text-align: center;
	}

	.hero-buttons,
	.hero-info,
	.contact-actions {
		justify-content: center;
		flex-wrap: wrap;
	}

	.footer-grid {
		/* grid-template-columns: 1fr 1fr; */
		grid-template-columns: repeat(2, 1fr);
		gap: 45px;
	}

}

/*------------------------------
  Mobile
------------------------------*/
@media (max-width:768px) {

	:root {
		--section-padding: 70px;
	}

	html {
		font-size: 14px;
	}

	.container {
		width: 100%;
		max-width: 100%;
		padding: 0 16px;
	}

	section {
		padding: 70px 0;
	}

	h1 {
		font-size: 2.4rem;
	}

	h2 {
		font-size: 2rem;
	}

	h3 {
		font-size: 1.4rem;
	}

	.feature-grid,
	.services-grid,
	.process-grid,
	.stats-grid,
	.testimonial-grid,
	.approach-grid {
		grid-template-columns: 1fr;
	}

	.hero-grid {
		gap: 40px;
	}

	.hero-image img,
	.about-image img,
	.therapist-illustration img {
		width: 100%;
		max-width: 320px;
		height: auto;
		margin: auto;
		display: block;
	}

	.hero-buttons,
	.contact-actions {
		flex-direction: column;
		align-items: center;
	}

	.btn {
		width: 100%;
		max-width: 320px;
	}

	.hero-info {
		flex-direction: column;
		gap: 16px;
	}

	.therapist-info {
		grid-template-columns: 1fr;
	}

	.footer-grid {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 40px;
	}

	.footer-logo img {
		width: 180px;
	}

	.footer-description {
		margin: 0 auto;
	}

	.footer-bottom-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}

	.map-container {
		margin-top: 40px;
	}

	.map-container iframe {
		height: 320px;
	}
}

/*------------------------------
  Small Mobile
------------------------------*/
@media (max-width:380px) {

	html {
		font-size: 13px;
	}

	.container {
		padding: 0 14px;
	}

	h1 {
		font-size: 2.1rem;
	}

	.btn {
		padding: 14px 20px;
	}

	.hero-tag {
		font-size: .8rem;
	}

	.floating-whatsapp {
		width: 56px;
		height: 56px;
		right: 15px;
		bottom: 15px;
	}

}