@media only screen and (max-width:1300px){

	#top > div, .block-1{
		padding-left: 20px;
		padding-right: 20px;
	}

}

@media only screen and (max-width:820px){

	:root {
		--space-200: 50px;
		--space-150: 90px;
		--space-100: 60px;
		--space-90: 50px;
		--space-80: 40px;
		--space-70: 30px;
		--space-60: 30px;
		--space-30: 30px;
	}
	
	.block-1,
	.block-2,
	.block-3 {
		padding-inline: var(--space-30);
	}

	.w-30,
	.w-40 {
		width: 50%;
	}

	#header #logo {
		width: 180px;
	}

	.home #hero {
		padding-inline: var(--space-30);
		min-height: auto;
	}

	#modality article .w-50 {
		width: 100%;	
	}

	#footer > div:first-child {
		gap: 100px;
	}

	#footer > div:first-child > div:first-child {
		width: fit-content;
	}

	#footer > div:first-child > div:last-child {
		flex-direction: column;
		gap: 30px;
	}


}

@media only screen and (max-width:767px){

	:root {
		--space-200: 60px;
		--space-150: 60px;
		--space-140: 60px;
		--space-130: 60px;
		--space-120: 60px;
		--space-100: 50px;
		--space-90: 50px;
		--space-80: 50px;
		--space-70: 50px;
		--space-60: 40px;
		--space-50: 35px;
		--space-40: 30px;
		--space-30: 25px;
		--space-25: 25px;
		--space-20: 20px;
		--space-15: 15px;
		--space-10: 10px;
		--space-5: 5px;
	}

	#top {
		height: calc(100% - 85px);
		width: 100%;
		display: flex;
		opacity: 0;
		pointer-events: none;
		transition: all 280ms ease;
		position: fixed;
		top: 85px;
		left: 0;
		z-index: 8;
	}
	
	#top > div {
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 20px;
	}
	
	#top > div .justify-end {
		flex-direction: column;
		justify-content: center;
	}
	
	#top > div span {
		width: 100%;
		font-size: 24px;
		justify-content: flex-start;
	}

	#top.active {
		opacity: 1;
		pointer-events: all;
	}

	#header #logo {
		width: 150px;
	}

	#header nav {
		width: 100%;
		opacity: 0;
		height: calc(100% - 85px);
		background-color: var(--black);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 30px;
		opacity: 0;
		pointer-events: none;
		transition: all 280ms ease;
		position: fixed;
		top: 85px;
		left: 0;
		z-index: 8;
	}

	#header nav.active {
		opacity: 1;
		pointer-events: all;
	}

	#header nav #appointment {
		padding: 10px 20px;
		margin-left: 0;
		pointer-events: all;
		border-radius: 10px 10px 0 10px;
		background-color: var(--main);
	}

	#header .panel {
		display: none;
	}

	#header #mobile {
		display: flex;
	}

	#top > div > div{
		flex-direction: column;
	}

	#therapies article figure {
		width: 45px;
		height: 45px;
	}

	#therapies article .mt-50 {
		margin-top: 15px;
	}

	.content ul, .content ol {
		gap: 10px;
	}

	.therapy article nav {
		overflow-x: auto;
	}

	.therapy article nav a{
		white-space: nowrap;
	}

	.therapy article section .block-1 {
		flex-direction: column;
	}

	.therapy article section .block-1 > * {
		width: 100%;
	}

	.therapy article section .block-1 > figure {
		order: 2;
	}

	#header nav .flex {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	#header nav .flex.parent {
		flex-direction: row-reverse;
	}

	#header nav a.parent::before {
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		content: "\f0d7";
		margin-left: 10px;
	}

	#header nav.active .submenu {
		opacity: 1;
		pointer-events: all;
		padding-bottom: 0;
	}

	#header nav.active .submenu a {
		font-size: 14px;
	}

	#header nav .submenu.active {
		transform: none;
	}

	#header nav .submenu {
		position: static;
		transform: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		opacity: 1;
	}

	.submenu > a {
		text-align: center;
	}

	.about #highlights num {
		font-size: 40px;
	}

	.about #highlights p {
		font-size: var(--size-600);
	}

	#highlights > .block-1 figure {
		height: 70px;
	}

	#footer > div:first-child {
		gap: 60px;
	}

	#footer .social a {
		font-size: 26px;
	}

}

@media only screen and (max-width:640px){

	.w-40,
	.w-70 {
		width: 100%;
	}

	.block-1,
	.block-2,
	.block-3 {
		padding-inline: var(--space-20);
	}

	.angle span {
		opacity: 1;
		transform: none;
	}

	.home #hero {
		padding-inline: var(--space-20);
		min-height: auto;
	}

	.regular #hero {
		min-height: 120px;
	}  
	
	.regular #hero h1 {
		font-size: 22px;
	}

	#therapies .grid,
	#modality .grid {
		grid-template-columns: 100%;
	}

	#intro .block-1 {
		flex-direction: column;
	}

	#highlights > .block-1 {
		flex-direction: column;
		gap: 40px;
	}

	#highlights > .block-1 div:not(:last-child) {
		padding-bottom: 40px;
		border-bottom: 1px solid #ffffff80;
	}
	
	#highlights > .block-1 br {
		display: none;
	}

	#tech .grid {
		grid-template-columns: 100%;
		gap: 30px;
	}

	#cta {
		flex-direction: column;
	}

	#cta > div div {
		text-align: center;
	}

	#footer .block-1 {
		padding-inline: var(--space-20);
	}

	#footer > .block-1,
	#footer > .block-1 > div:last-child {
		flex-direction: column;
	}

	#footer > div:nth-child(2) > div {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 10px;
	}

	#footer > div:nth-child(2) div div {
		justify-content: center;
		text-align: center;
		gap: 10px;
	}
	
}