/* large Desktops and laptops ----------- */
@media only screen and (min-width: 1225px) and (max-width: 1800px) {
	.container {
		max-width: 1350px
	}
}







/* Desktops and laptops  */
@media only screen and (min-width: 992px) and (max-width: 1224px) {
	.container {
		max-width: 960px;
	}
}








/* TABLETS (portrait and landscape) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.container {
		max-width: 720px
	}
}








/* TABLETS - SMARTPHONES LANDSCAPE (portrait and landscape)  */
@media (max-width: 767px) {
	.container {
		max-width: 640px;
	}

	.column {
		flex-direction: column;
		row-gap: 20px;
	}

	.full {
		width: 50% !important;
	}

	.hero-buttons {
		justify-content: center;
	}

	.badge {
		position: static;
		margin-top: 20px;
		justify-content: center;
	}

	/* TOP BAR */
	/* TOP BAR STACK */

	.top-left span {
		margin: 3px 5px;
	}

	/* NAV */
	.nav {
		position: relative;
		padding: 8px 0px;
	}

	.logo a img {
		width: 65px;
	}

	/* HIDE DESKTOP BUTTON */
	/* .appointment-btn {
		display: none;
	} */

	/* SHOW HAMBURGER */
	.menu-toggle {
		display: block;
		z-index: 1002;
	}

	/* ✅ SLIDE MENU */
	.menu {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: #fff;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding: 30px 0;
		transform: rotateX(90deg);
		transform-origin: top;
		transition: transform 0.4s ease;
		box-shadow: var(--shadow-soft);
		z-index: 1001;
	}

	.menu.active {
		transform: rotateX(0deg);
	}

	.menu li {
		width: 100%;
		text-align: center;
	}

	.menu a {
		display: block;
		padding: 12px 0;
		font-size: 18px;
	}

	.faq-clean .left {
		margin-bottom: 30px;
	}
}








/* Smartphones (portrait and landscape)  */
@media (max-width: 480px) {
	.container {
		max-width: 360px;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.column {
		flex-direction: column;
		row-gap: 20px;
	}

	.full {
		width: 100% !important;
	}


	.btn {
		width: 100%;
		justify-content: center;
	}

	.logo img {
		width: 55px;
	}

	.menu a {
		font-size: 16px;
	}

	.top-bar {
		padding: 10px 0;
		font-size: 10px !important;
	}

	.appointment-btn {
		font-size: 13px;
	}



	.hero {
		padding: 30px 0;
	}

	.tagline {
		font-size: 13px;
		margin-bottom: 15px;
	}

	.hero-content h1 {
		font-size: 28px;
		margin-bottom: 20px;
	}

	.highlight {
		font-size: 16px;
		margin-bottom: 15px;
		text-align: center;
	}

	.sub-text {
		font-size: 13px;
		margin-bottom: 15px;
		text-align: center;
	}

}