:root {

	/* COLORS */
	--background:  aliceblue;
	--primary-color: #004a9e;
	--secondary-color-a: #5B84C4;
	--secondary-color-b: #03c0e1;
	--tertiary-color: #DCEBFF;
	--quaternary-color: #D64550;

	--font-dark-color: #1B3F77;
	--font-light-color: white;

	--light-mix: color-mix(in srgb, var(--tertiary-color) 25%, transparent);

	/* partials - BORDER, BOX SIZING */
	--partials-border: 1px solid black;
	--partials-border-radius: 15px;
	--partials-box-sizing: border-box;

	/* partials - SIZING, PADDING, MARGIN */
	--partials-padding: 15px 20px;

	/* FONT */
	--text-font-weigth: 300;
	--text-font-family: 'IBM Plex Mono';

}

html {
	font-size: clamp(9px, 1.5vw, 18px);
	scroll-behavior: smooth;
}

/* RESET - start */
ul, li, a, article, p,
nav, details, iframe, button,
time, address,
h1, h2, h3, h4 {
	margin: 0px;
	padding: 0px;
	font-size: 1rem;
	font-family: var(--text-font-family);
	font-weight: var(--text-font-weigth);
	list-style: none;
	color: var(--font-dark-color);
	text-decoration: none;

}
/* RESET - end */

a {
	cursor: pointer;
}

h2 {
	font-size: 1.3rem;
	font-weight: 700;
	padding: 10px 0px;
}

h3 {
	font-size: 1.1rem;
	font-weight: 500;
	padding: 5px 0px;
}

* > .advice-box {
	display: flex;
	justify-content: center;
	flex-direction: column;
	margin-top: 40px;
	font-style: italic;

	& > div:first-child {
		display: flex;
		flex-direction: column;

		& h3 {
			align-self: center;
			padding-bottom: 7px;
		}

		& p { 
			padding: 4px 0px;
			& a {
				color: var(--secondary-color-a);
				font-size: 1.2rem;
				font-weight: 700;
				text-decoration: underline;
			}
		}
	}

	& > div:nth-child(2) {
		align-self: center;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		margin-top: 20px;

		& a {
			padding: 1rem;
			font-weight: 500;
			color: var(--font-dark-color);
			border: 3px solid rgba(91, 131, 196, 0.2);
			border-radius: 5px;
		}
	}
}

* [id] {
	scroll-margin-top: 130px;
}

body {
	position: relative;
	background: var(--background);
	font-family: var(--text-font-family);
	font-weight: var(--text-font-weigth);

	margin: 0px 15px;

	& header, & main section, & footer {
		display: grid;
		padding: var(--partials-padding);
		box-sizing: var(--partials-box-sizing);
		border: var(--partials-border);
		border-radius: var(--partials-border-radius);
	}

	& header {
		box-sizing: border-box;
		position: sticky;
		top: 0px;
		grid-template-columns: 1fr 2fr;
		z-index: 10;
		backdrop-filter: blur(5px);
		background-color: var(--light-mix);
		border: none; /* reset better legible for dev reasons*/
		border-bottom: 5px solid rgba(0, 74, 158, 0.3);
		border-top-right-radius: 0px;
		border-top-left-radius: 0px;

		& h2 {
			display: flex;
			align-items: center;
			gap: 1rem;

			& a:first-child {
				display: flex;
				align-items: center;
				font-size: 3rem;
				color: var(--quaternary-color);
				text-shadow: 1px 1px 3px var(--font-dark-color);
			}

			& a {
				display: flex;
				flex-direction: column;
				font-size: 1.1rem;
				font-weight: 700;
				font-style: italic;
				color: var(--primary-color);
				text-shadow: 0.5px 0.5px 0px var(--font-dark-color);

				& span {
					white-space: nowrap;
				}
				
				& span:last-child {
					font-weight: 400;
					font-size: 0.9rem;
					text-shadow: none;
				}
			}
		}

		& nav {
			display: flex;
			flex-direction: column;
			gap: 3px;

			& ul {
				display: flex;
				justify-content: flex-end;
				gap: 0.5rem;
				border-radius: 3px;

				& li {
					display: flex;
					align-items: center;
					border-radius: 3px;
					
					& a {
						padding: 10px;
						text-align: center;
						font-size: 1.2rem;
						font-weight: 400;
					}

					& a.important {
						font-weight: 700;
					}

					& a[href="#services"] {
						background-color: var(--font-dark-color);
						color: var(--font-light-color);
						border-radius: calc(1.2rem/3.5);
					}
				}
			}
		}
	}

	& main {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30px;

		& section {
			max-width: 1200px;
		}

		& section#introduction {
			display: flex;
			flex-direction: column;
			gap: 2.5rem;
			border: none; /* reset better legible for dev reasons*/
			
			& .introI {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 3rem;

				& h1 {
					align-self: flex-start;
					width: 70%;
					font-size: 2rem;
					font-weight: 700;
					word-spacing: -0.5rem;
				}

				& .quick-links {
					display: grid;
					grid-template-columns: 1fr 1fr 1fr 1fr;
					gap: 1.5rem;

					& a {
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 15px;
						border: 3px solid rgba(0, 74, 158, 0.1);
						border-radius: 20px;

						& .icon {
							padding: 0.8rem;
							background-color: rgba(255, 255, 255, 0.6);
							border: 1px solid rgba(0, 74, 158, 0.2);
							border-radius: 3rem;
							font-size: 3rem;
						}

						& .title {
							font-weight: 700;
							font-style: italic;
							margin-top: 15px;
							margin-bottom: 4px;
							text-align: center;
						}

						& .note {
							font-size: 0.7rem;
							text-align: center;
						}
					}

					& a:first-child {
						& .icon {
							color: mediumvioletred;
						}
					}

					& a:nth-child(3) {
						& .icon {
							color: plum;
						}
					}

					& a:nth-child(2) {
						& .icon {
							color: var(--secondary-color-a);
						}
					}

					& a:nth-child(4) {
						& .icon {
							color: #5EC6C6;
						}
					}
				}

				& .quick-contacts {
					
					& a, & span {
						font-weight: 400;
					}
				}
			}

			& div#actual {
				display: flex;
				flex-direction: column;

				& article {
					display: flex;
					justify-content: center;
					padding-top: 15px;

					& mark {
						position: relative;
						width: max-content;
						color: inherit;
						background: none;

						padding: 0.08em 0.35em;
						font-size: 2.5rem;
						font-weight: 400;
						font-family: 'Allura';
						opacity: 0.8;

						color: black;

						& mark {
							opacity: 1;
						}
					}

					& mark::before {
						opacity: 0.6;

						content: "";

						position: absolute;
						inset: 0;

						background: linear-gradient(
							104deg,

							rgba(25, 95, 170, 0.95) 0%,
							rgba(50, 135, 205, 0.75) 6%,
							rgba(85, 185, 230, 0.3) 12%,

							rgba(65, 165, 225, 0.55) 22%,
							rgba(90, 185, 235, 0.82) 32%,
							rgba(50, 155, 225, 0.92) 42%,
							rgba(105, 195, 235, 0.75) 52%,
							rgba(40, 145, 220, 0.95) 62%,
							rgba(90, 185, 235, 0.72) 74%,
							rgba(65, 165, 225, 0.88) 84%,

							rgba(95, 190, 235, 0.45) 92%,
							rgba(95, 190, 235, 0) 100%
						);
						border-radius: 0.18em;

						z-index: -1;
					}

					& mark.I::before {
						clip-path: polygon(
							2% 12%,
							99% 0%,
							96.5% 86%,
							0% 100%
						);
					}

					& mark.II::before {
						clip-path: polygon(
							96% 14%,
							1% 0%,
							3.5% 86%,
							100% 100%
						);
					}
				}
			}

			& .introII {
				display: flex;
				flex-direction: column;

				& article {
					& p {
						padding: 4px 0px;
					}
				}

				& .gallery-box {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 15px;
					padding: 3px;
					

					& > a {
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						padding: 10px;
						margin-top: 10px;
						width: fit-content;
						box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5);
						border-radius: 2%;

						& img {
							width: 100%;
							border-radius: 2%;
							opacity: 0;
							transition: opacity 0.5s ease-out;
						}

						& img.loaded {
							opacity: 1;
						}

						& .job-position {
							font-weight: 700;
							color: var(--primary-color);
							text-decoration: underline;
							margin-top: 15px;
							margin-bottom: 4px;
						}
					}
				}
			}
		}

		& section#new-patients {
			display: flex;
			flex-direction: column;
			border: 3px dashed rgba(91, 131, 196, 0.2);
			
			& article {
				display: flex;
				flex-direction: column;

				& p {
					padding: 10px 0px;
					font-weight: 400;
					font-family: 'Allura';
					font-size: 1.8rem;
					
					& mark {
						position: relative;
						color: inherit;
						background: none;

						padding: 0.08em 0.35em;
					}

					& mark::before {
						content: "";

						position: absolute;
						inset: 0;

						background: linear-gradient(
							104deg,

							rgba(35, 120, 200, 0.95) 0%,
							rgba(70, 165, 235, 0.75) 6%,
							rgba(120, 220, 255, 0.3) 12%,

							rgba(90, 200, 255, 0.55) 22%,
							rgba(120, 215, 255, 0.82) 32%,
							rgba(70, 185, 255, 0.92) 42%,
							rgba(140, 225, 255, 0.75) 52%,
							rgba(60, 175, 255, 0.95) 62%,
							rgba(120, 215, 255, 0.72) 74%,
							rgba(90, 195, 255, 0.88) 84%,

							rgba(130, 220, 255, 0.45) 92%,
							rgba(130, 220, 255, 0) 100%
						);
						border-radius: 0.18em;

						z-index: -1;
					}

					& mark.I::before {
						clip-path: polygon(
							4% 14%,
							99% 0%,
							96.5% 86%,
							0% 100%
						);
					}

					& mark.II::before {
						clip-path: polygon(
							96% 14%,
							1% 0%,
							3.5% 86%,
							100% 100%
						);
					}
				}

				& p:nth-child(3) {
					position: relative;
					align-self: flex-end;
					padding: 10px 0px;
					margin-right: 20px;
					border: none;
				}

				& p:nth-child(3)::before {
					content: '';
					display: block;
					position: absolute;

					transform: rotateZ(-17deg);
					top: -3rem;
					left: -10.25rem;
					width: calc(1.8rem * 10);
					aspect-ratio: 1855 / 848;

					background-color: transparent;
					background: url('../../public/images/stamp.png');
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;

					opacity: 0.4;
				}

				& p:nth-child(3)::after {
					content: '';
					position: absolute;
					display: block;
					bottom: 1.1rem;
					left: -10%;
					transform: translateX(5%);
					background-color: black;
					width: 110%;
					height: 0.1rem;
				}
			}

			& a {
				align-self: center;
				margin-top: 60px;
				padding: 10px;
				text-align: center;

				font-size: 1.2rem;
				font-weight: 400;

				background-color: var(--font-dark-color);
				color: var(--font-light-color);
				border-radius: calc(0.8rem);
			}
		}

		& section#services {
			border: none;

			& article {
				margin-bottom: 25px;

				& > p {
					padding: 4px 0px;
				}
			}

			& ul.services-list {
				display: flex;
				flex-direction: column;
				gap: 40px;

				& li.service-item {
					display: flex;
					flex-direction: column;
					padding: 10px;
					padding-bottom: 15px;

					background-color: rgba(3, 192, 225, 0.05);
					border: 3px solid rgba(91, 131, 196, 0.2);
					border-left: none;
					border-top: none;
					border-radius: 10px;

					box-sizing: border-box;

					cursor: pointer;

					& .icon {
						align-self: center;
						justify-content: center;
						align-items: center;
						font-size: 4rem;

						margin-bottom: 10px;
						padding: 0.8rem;
						background-color: rgba(255, 255, 255, 0.6);
						border: 1px solid rgba(0, 74, 158, 0.2);
						border-radius: 4rem;
					}	

					& .icon.active {
						border-color: rgba(0, 74, 158, 0.8);
					}

					& .icon.active > i.fa-user-injured {
						color: var(--quaternary-color);
					}

					& .icon.active > i.fa-stethoscope {
						color: cornflowerblue;
					}		

					& .icon.active > i.fa-vial-circle-check {
						color: seagreen;
					}		
					& .icon.active > i.fa-spa {
						color: plum;
					}		

					& .icon.active > i.fa-clover {
						color: #4ADE80;
					}	

					& .icon.active > i.fa-pen-to-square {
						color: gold;
					}	

					& .icon.active > i.fa-magnifying-glass-plus {
						color: skyblue;
					}	

					& .icon.active > i.fa-business-time {
						color: darkgoldenrod;
					}	
					& .icon.active > i.fa-syringe {
						color: #5EC6C6;
					}

					& .icon.active > i.fa-user-nurse {
						color: rgb(174, 35, 125);
					}

					& h3 {
						font-weight: 500;
						font-style: italic;
						text-decoration: underline;
					}

					& details {

						& summary {
							font-weight: 500;
							padding-bottom: 5px;

							& span {
								font-size: 0.9rem;
								opacity: 0.5;
								font-weight: 400;
							}
						}

						& summary.active {
							& span {
								opacity: 1;
							}
						}
					}
				}

				& li.service-item.active {
					background-color: transparent;
				}

				& li.service-item:first-child {
					margin-top: 20px;
				}
			}
		}

		& section#office {
			border: none;

			& article {

				& > p {
					padding: 4px 0px;
				}
			}

			& article.hours-box {
				display: flex;
				justify-content: center;

				& > ul {
					margin-top: 30px;
					padding: 15px 30px 20px 30px;
					border: 3px dashed rgba(91, 131, 196, 0.2);
					border-radius: 10px;

					& > li {
						margin-top: 20px;

						& h3 {
							font-size: 3rem;
							font-family: 'allura';
						}
						
					}

					& > li:first-child {
						margin-top: 0px;
					}

					& > ul {
						padding: 5px 0px;
						padding-left: 10px;

						& > li .icon {
							font-size: 2rem;
						}


						& > li:first-child .icon {
							color: var(--quaternary-color);
							text-shadow: 0.1rem 0.1rem 0.1rem rgb(50, 50, 50);
						}

						& > li:nth-child(2) {
							padding: 6px 0px;

							& time, & strong {
								font-weight: 500;
							}

							& .icon {
								color: white;
								text-shadow: 0.1rem 0.1rem 0.1rem var(--secondary-color-b);
							}
						}

						& > li:nth-child(3) .icon {
							color: var(--secondary-color-a);
							text-shadow: 0.1rem 0.1rem 0.1rem var(--primary-color);
						}

						& time, & strong {
							font-size: 1.3rem;
							font-style: italic;
						}

					}
				}
			}

			& article.symbols {
				margin-top: 10px;

				& p {
					padding-left: 15px;

					& .icon {
						font-size: 1.5rem;
					}
				}

				& p .icon .fa-user-injured {
					color: var(--quaternary-color);
					text-shadow: 0.075rem 0.075rem 0.075rem rgb(50, 50, 50);		
				}

				& p .icon .fa-hand-sparkles {
					color: white;
					text-shadow: 0.075rem 0.075rem 0.075rem  var(--secondary-color-b);		
				}

				&  p .icon .fa-calendar-days{
					color: var(--secondary-color-a);
					text-shadow: 0.075rem 0.075rem 0.075rem  var(--primary-color);		
				}


			}
		}

		& section#map {
			border: none;

			& h3 {
				margin-top: 12px;
			}

			& article {

				& p {
					padding: 4px 0px;
				}
			}

			& .map {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 30px;

				& > ul {
					padding: 1vw 1.8vw;
					margin-top: 10px;
					border: 3px dashed rgba(91, 131, 196, 0.2);
					border-radius: 10px;

					& > li {
						display: flex;
						align-items: center;
						padding: 4px 0px;
						font-size: 1.5rem;
						font-weight: 500;
						font-family: 'allura';

						& .icon {
							display: flex;
							justify-content: center;
							align-items: center;
							
							padding: 4px;
							margin-right: 10px;					

							border: 2px solid rgba(91, 131, 196);
							border-radius: 4px;

							font-size: 1rem;
						}

						& .icon .fa-universal-access {
							color: var(--secondary-color-b);
						}

						& .icon:has(.fa-universal-access) {
							background-color: aliceblue;
						}					

						& .icon .fa-square-parking {
							color: var(--secondary-color-a);
						}	
						
						& .icon:has(.fa-square-parking) {
							background-color: white;
						}

						& .icon .fa-bus-side {
							color: gold;
						}

						& .icon:has(.fa-bus-side) {
							background-color: var(--primary-color);
							border: 2px solid var(--primary-color);
						}

						& .icon .fa-toilet {
							color: white;
						}			
						
						& .icon:has(.fa-toilet) {
							background-color: black;
							border: 2px solid black;
						}
					}
				}

				& .map-box {
					display: flex;
					align-items: center;
					justify-content: center;
					border: 5px solid rgba(91, 131, 196, 0.2);
					border-radius: 10px;
					
					& iframe {
						box-sizing: border-box;
						width: 75vw;
						max-width: 1000px;
						height: 40vh;
						border-radius: 10px;
					}
				}

			}
		}

		& section#gallery {
			border: none;
			justify-items: center;

			& h2, & p {
				justify-self: start;
			}

			& p {
				padding: 4px 0px;
			}

			& .gallery-box {
				box-sizing: border-box;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: clamp(10px, 3vw, 30px);

				max-width: 1000px;

				margin-top: clamp(15px, 3.5vw, 40px);

				& a {
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 10px;
					box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.5);
					transition: all 0.5s ease;

					& img {
						width: 100%;
						border-radius: 10px;
						opacity: 0;
						transition: opacity 0.5s ease-out;
					}

					& img.loaded {
						opacity: 1;
					}
				}
			}
		}

		& section#information-faq {
			border: none;
			
			& article{
				padding: 4px 0px;
			}

			& article.faq {
				padding-top: 15px;

				& ul {
					display: flex;
					flex-direction: column;
					gap: 2px;

					& li {
						box-sizing: border-box;
						display: flex;
						margin-bottom: 4px;

						background: linear-gradient(
							90deg, rgba(91, 131, 196, 0.2), transparent
						);

						border: 2px solid rgba(91, 131, 196, 0.3);
						border-top: none;
						border-right: none;
						border-radius: 5px;

						& a {
							font-weight: 500;
							width: 100%;
							padding: 8px;
						}

						& a:hover {
							text-decoration: underline rgba(27, 62, 119, 0.2) 2px;
						}

						& a.selected {
							text-decoration: underline rgba(27, 62, 119, 0.2) 2px;
						}

						& details {
							font-style: italic;
							text-decoration: none;
							width: 100%;

							& summary {
								font-weight: 500;
								font-style: normal;
								cursor: pointer;
								padding: 8px;
							}

							& summary:hover {
								text-decoration: underline rgba(27, 62, 119, 0.2) 2px;
							}

							& summary.selected {
								text-decoration: underline rgba(27, 62, 119, 0.2) 2px;
							}

							& summary::marker {
								content: '';
							}

							& .gallery-box {
								display: flex;
								justify-content: center;
								margin: clamp(12px, 2.1vw, 27px) 0px;

								& a {
									cursor: default;
									display: flex;
									justify-content: center;
									align-items: center;
									border-radius: 10px;
									
									& img {
										box-sizing: border-box;
										width: 50%;
										min-width: 180px;
										border: 5px solid rgba(27, 62, 119, 0.2);
										border-radius: 10px;
										box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.5);
										
										cursor: pointer;
										opacity: 0;
										transition: all 0.5s ease;
									}

									& img.loaded {
										opacity: 1;
									}
								}
							}
						}

						& details[open] {			
							padding: 8px;			

							& summary {
								padding: 0px;								
								padding-bottom: 5px;
							}
						}
					}

					& li:has(details[open]) {
						background-color: rgba(91, 131, 196, 0.2);
						border: 2px solid rgba(91, 131, 196, 0.4);
						margin: 12px 0px;
					}

					& li:first-child:has(details[open]) {
						margin-top: 0px;
					}

					& li:last-child:has(details[open]) {
						margin-bottom: 0px;
					}
				}
			}
		}

		& section#contact {
			border: none;
			position: relative;
			padding-bottom: 0px;
			background: linear-gradient(0deg, transparent, var(--light-mix), var(--light-mix));

			& .paragraph {
				padding: 4px 0px;
			}

			& address {
				display: flex;
				flex-direction: column;
				gap: 4px;

				& a {
					position: relative;
					width: max-content;

					& .title {
						display: inline-block;
						font-weight: 500;
						width: 5rem;
					}
				}

				& a::before {
					content: '';
					position: absolute;
					inset: -3px;
					background-color: transparent;
					border-radius: 4px;
					z-index: -10;
				}
			}
		}

		& section#contact::before {
			content: "";
			position: absolute;
			inset: 0;
			padding: 3px;
			padding-bottom: 0px;
			border-radius: inherit;
			background: linear-gradient(0deg, transparent, transparent, var(--secondary-color-a), var(--primary-color));
			pointer-events: none;

			mask:
				linear-gradient(#000 0 0) content-box,
				linear-gradient(#000 0 0);
			
			mask-composite: exclude;

			-webkit-mask:
				linear-gradient(#000 0 0) content-box,
				linear-gradient(#000 0 0);
			-webkit-mask-composite: xor;
		}

		& section#make-appointment {
			border: none;
			position: relative;
			padding-top: 0px;
			background: linear-gradient(0deg, var(--light-mix), var(--light-mix), transparent);
			width: 100%;

			& > ul {

				& li {
					padding: 2px 0px;
					font-style: italic;
				}

				& li::before {
					content: '• ';
					margin-left: 5px;
				}

				& li:last-child {
					font-size: 0.8rem;
					opacity: 0.8;
					margin-left: 5px;
					margin-top: 5px;
				}

				& li:last-child::before {
					content: '';
					margin: 0px;
				}
			}

			& form {
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 0.8rem;		
				
				justify-self: center;

				width: 70%;
				padding: 20px;				
				margin-bottom: 25px;
				margin-top: 35px;

				border: 10px solid rgba(128, 0, 128, 0.05);
				border-radius: 30px;

				background: linear-gradient(300deg, transparent, rgba(220, 235, 255, 0.3), transparent, rgba(3, 192, 225, 0.1), transparent);

				& input, & input:placeholder-shown, & input:focus {
					box-sizing: border-box;
					height: 4rem;
					width: 70%;
					border-radius: 15px;

					padding-left: 15px;

					border: 5px solid purple;
					outline: none;
					resize: none;
					background-color: rgba(128, 128, 128, 0.1);
					color: var(--font-dark-color);
					font-family: 'IBM Plex Mono';
					font-size: 2.5rem;
					caret-color: red;	
					
					text-transform: uppercase;
				}

				& input:valid {
					border-color: rgba(128, 0, 128, 0.1);
				}

				& input:hover {
					border-color: rgba(128, 0, 128, 0.25);
					background-color: rgba(128, 128, 128, 0.2);
				}

				& input:focus {
					border-color: rgba(128, 0, 128, 0.4);
					background-color: rgba(128, 128, 128, 0.3);
				}

				& input::placeholder {
					color: rgba(0, 74, 158, 0.3);
					font-family: 'IBM Plex Mono';
					font-size: 2.5rem;
					font-weight: 700;
				}

				/* input autofill damage elimination */
				
				input:-webkit-autofill,
				input:-webkit-autofill:hover,
				input:-webkit-autofill:focus {
					transition: all 5000s ease-in;
				}

				& textarea, & textarea:placeholder-shown, & textarea:focus {
					box-sizing: border-box;
					height: 300px;
					width: 75%;
					border-radius: 15px;

					margin-top: calc(5px + 5px); /* outline + offset, are not computed in gap right */
					padding: 10px 20px;

					outline: 5px solid purple;
					outline-offset: 5px;
					border: none;
					resize: none;
					background-color: rgba(128, 128, 128, 0.1);
					color: var(--font-dark-color);
					font-family: 'IBM Plex Mono';
					font-size: 1rem;
					caret-color: red;	
					white-space: pre-line;
				}
				
				& textarea:valid {
					outline-color: rgba(128, 0, 128, 0.1);
				}

				& textarea:hover {
					outline-color: rgba(128, 0, 128, 0.25);
					background-color: rgba(128, 128, 128, 0.2);
				}

				& textarea:focus {
					outline-color: rgba(128, 0, 128, 0.4);
					background-color: rgba(128, 128, 128, 0.3);
				}

				& textarea::placeholder {
					color: rgba(0, 74, 158, 0.3);
					font-family: 'IBM Plex Mono';
					font-size: 1rem;
					font-weight: 700;
				}		
				
				/* Hide scrollbar for Chrome, Safari and Opera */
				textarea::-webkit-scrollbar {
					display: none;	
				}

				/* Hide scrollbar for IE, Edge and Firefox */
				textarea {
					-ms-overflow-style: none;  /* IE and Edge */
					scrollbar-width: none;  /* Firefox */
				}
				
				& label#privacy-policy {
					cursor: pointer;
					margin-top: 25px;

					line-height: 1.6;
					padding: 10px;
					background-color: rgba(0, 0, 0, 0.1);
					color: black;
					border-radius: 10px;
					text-align: left;						

					& input[type=checkbox] {
						width: initial;
						accent-color: plum;
						margin-right: 5px;
						transition: transform 0.2s ease;
					}

					& input[type=checkbox]:focus {
						transform: scale(1.5);
					}
				}

				/* button styles */

				& button {
					align-self: center;
					cursor: pointer;
					margin-top: 30px;
					padding: 10px;
					border: 4px solid gray;
					outline: none;
					border-radius: 5px;
					background-color: rgba(128, 128, 128, 0.1);
					color: white;		
					font-family: 'Black Ops One';	
					font-size: 1.2rem;
					filter: blur(3px);
					transition: all 0.2s ease;
				}

				& button:focus {
					border: 4px solid rgba(190, 0, 0, 0.8);		
					outline: none;
				}

				& button.active {
					background-color: rgba(128, 128, 128, 0.3);
					color: purple;	
					border: 4px solid purple;
					filter: none;
				}

				& button.active:focus {
					color: white;
					background-color: rgba(128, 128, 128, 0.6);
				}
			}

			& form:hover {
				border-color: rgba(128, 0, 128, 0.1);
			}

			& form:has(input:focus) {
				border-color: rgba(128, 0, 128, 0.1);
			}





			& form#form-I {

				& .lang:hover {
					background-color: rgba(128, 128, 128, 0.6);
					color: white;
				}

				& label#privacy-policy:hover {
					& input[type=checkbox] {
						transform: scale(1.5);
					}
				}

				& button:hover {
					border: 4px solid rgba(190, 0, 0, 0.8);	
					outline: none;
				}							

				& button.active:hover {
					border-color: purple;
					background-color: rgba(128, 128, 128, 0.6);
					color: white;
				}			
			}

			& article {

				& details {
					display: flex;
					flex-direction: column;

					& summary {
						display: flex;
						margin-top: 15px;
						cursor: pointer;

						& h3 {
							position: relative;
							padding: 2px 0px;
							margin: 3px 0px;
						}

						& h3::before {
							content: '';
							position: absolute;
							inset: -3px;
							background-color: transparent;
							border-radius: 4px;
							z-index: -10;
							border: 1px solid transparent;
						}
					}

					& .wrapper {
						display: flex;
						flex-direction: column;

						& ul {
							margin-top: 4px;

							& li {
								padding: 2px 0px;

								& a {
									position: relative;

									font-weight: 500;
									font-style: italic;
									cursor: pointer;
								}

								& a::before {
									content: '';
									position: absolute;
									inset: -3px;
									background-color: transparent;
									border-radius: 4px;
									z-index: -10;
								}
							}

							& li::before {
								content: '• ';
								margin-left: 5px;
							}
						}

						& p {
							padding: 4px 0px;

							& a {
								font-weight: 500;
								text-decoration: underline;
							}
						}

						& p:first-of-type {
							margin-top: 5px;
						}
					}
				}
			}
		}

		& section#make-appointment::before {
			content: "";
			position: absolute;
			inset: 0;
			padding: 3px;
			padding-top: 0px;
			border-radius: inherit;
			background: linear-gradient(0deg, var(--primary-color), var(--secondary-color-a), transparent, transparent);
			pointer-events: none;

			mask:
				linear-gradient(#000 0 0) content-box,
				linear-gradient(#000 0 0);
			
			mask-composite: exclude;

			-webkit-mask:
				linear-gradient(#000 0 0) content-box,
				linear-gradient(#000 0 0);
			-webkit-mask-composite: xor;
		}
	}

	& footer {
		justify-items: center;
		gap: 60px;

		margin-top: 60px;

		background: linear-gradient(
			150deg, transparent, rgba(220, 235, 255, 0.3), transparent, rgba(3, 192, 225, 0.1), transparent
		);

		border: none;
		border-top: 5px solid rgba(0, 74, 158, 0.5);
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
		font-style: italic;
		
		color: var(--font-dark-color);

		& > .summary {
			justify-self: start;

			& .content {
				font-size: 1.1rem;
				font-style: italic;
			}

		}

		& > .middle {
			display: flex;
			gap: clamp(60px, 5vw, 150px);

			& > div { 
				box-sizing: border-box;
				display: flex;
				flex-direction: column;

				padding: 15px;

				border: 2px dashed rgba(91, 131, 196, 0.2);
				border-radius: 10px;

				& h3 {
					text-align: center;
					font-size: 1.2rem;
					padding-bottom: 10px;	
				}
			}

			& .address-contact {
				
				& a {
					display: flex;
					align-items: center;

					padding: 3px;
					border-radius: 3px;

					& .title {
						font-size: 1.1rem;
						text-decoration: underline;
						text-decoration-color: rgba(27, 62, 119, 0.4);
					}

					& .text {
						font-weight: 500;
					}
				}

			}

			& .shortcuts { 

				& .content {
					display: flex;
					flex-direction: column;
					gap: 2px;

					& ul {
						display: flex;
						justify-content: center;
						gap: 15px;

						padding: 0px 3px;
						border-radius: 3px;

						& li {
							text-decoration: underline;
							padding: 3px;
							border-radius: 3px;
						}
					}
				}
			}

			& .reviews {

				& .content a {
					text-decoration: underline;
					padding: 3px;
					border-radius: 3px;
				}

				& .content span {
					font-style: normal;
				}
			}
		}

		& > .copyright {
			margin-top: 15px;
		}
	}
}	

@media (pointer: fine) and (hover: hover) {
	body {

		& header {

			& nav {

				& ul:hover {
					background: linear-gradient(
						90deg,
						transparent,
						rgba(91, 131, 196, 0.3)
					);

					& li:hover {
						background-color: rgba(91, 131, 196, 0.4);
					}

					& li [href="#services"]:hover {
						background-color: rgba(91, 131, 196, 0.4);
						color: var(--font-dark-color);
					}
				}
			}
		}

		& main {

			& section#introduction {
				& .introI {
					& .quick-links {
						& a:hover {
							background-color: rgba(91, 131, 196, 0.2);
							border: 3px solid rgba(91, 131, 196, 0.4);
						}
					}

					& .quick-contacts {

						& a:hover {
							text-decoration: underline;
						}
					}
				}
			}

			& section#services {
				& ul.services-list { 
					& li.service-item:hover {		
						border-color: rgba(0, 0, 0, 0.1);
						background-color: transparent;

						& details {
							& summary {
								& span {
									opacity: 1;
								}
							}
						}

						& .icon {
							border-color: rgba(0, 74, 158, 0.8);
						}

						& .icon > i.fa-user-injured {
							color: var(--quaternary-color);
						}

						& .icon > i.fa-stethoscope {
							color: cornflowerblue;
						}				
						
						& .icon > i.fa-vial-circle-check {
							color: seagreen;
						}		
						& .icon > i.fa-spa {
							color: plum;
						}		

						& .icon > i.fa-clover {
							color: #4ADE80;
						}	

						& .icon > i.fa-pen-to-square {
							color: gold;
						}	

						& .icon > i.fa-magnifying-glass-plus {
							color: skyblue;
						}	

						& .icon > i.fa-business-time {
							color: darkgoldenrod;
						}	
						& .icon > i.fa-syringe {
							color: #5EC6C6;
						}

						& .icon > i.fa-user-nurse {
							color: rgb(174, 35, 125);
						}

					}
				}
			}

			& section#gallery {
				& .gallery-box {				

					& a:nth-child(2n + 1).top-line:hover {
						transform: translateY(5px) translateX(5px);
						box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.7);
					}

					& a:nth-child(2n).top-line:hover {
						transform: translateY(5px) translateX(-5px);
						box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.7);
					}

					& a:nth-child(2n + 1).bottom-line:hover {
						transform: translateY(-5px) translateX(5px);
						box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.7);
					}

					& a:nth-child(2n).bottom-line:hover {
						transform: translateY(-5px) translateX(-5px);
						box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.7);
					}
				}
			}

			& section#information-faq {
				& article.faq {
					& ul {
						& li {
							& details {
								& .gallery-box {
									& a {
										& img:hover {
											border: 5px solid rgba(27, 62, 119, 0.4);
											transform: translateY(6px);
											box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.7);
										}
									}
								}
							}
						}
					}
				}
			}

			& section#not-found {
				border: none;
				min-height: 500px;
				align-items: center;

				& h1 {
					font-size: clamp(20px, 10vw, 80px);
					--text-font-weigth: 700;
					text-align: center;

					& .title {
						color: purple; /* fallback */
						background: linear-gradient(90deg, purple, var(--secondary-color-a), #117a8b);
						background-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					& .fa-odysee {
						color: purple; /* fallback */
						background: linear-gradient(90deg, purple, var(--secondary-color-a), #117a8b);
						background-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
			}

			& section#contact {
				& address {

					& a:hover {
						& .text {
							text-decoration: underline;
						}
					}

					& a:hover::before {
						background-color: rgba(91, 131, 196, 0.2);
					}
				}
			}

			& section#make-appointment {
				
				& article {

					& details {

						& summary {
							& h3:hover::before {
								background-color: rgba(91, 131, 196, 0.6);
								border: 1px solid var(--font-dark-color);
							}
						}

						& .wrapper {
							& ul {
								& li {
									& a:hover::before {
										background-color: rgba(91, 131, 196, 0.2);
									}
								}
							}
						}
					}
				}
			}
		}

		& footer {

			& .middle {

				& > div:hover {
					background-color: rgba(91, 131, 196, 0.2);
					border: 2px dashed rgba(91, 131, 196, 0.4);
				}

				& .address-contact a:hover {
					background-color: rgba(91, 131, 196, 0.3);
				}

				& .shortcuts .content ul:hover {
					background-color: rgba(91, 131, 196, 0.3);
				}

				& .shortcuts .content ul li:hover {
					background-color: rgba(91, 131, 196, 0.4);
				}

				& .reviews .content a:hover {
					background-color: rgba(91, 131, 196, 0.3);
				}
			}
		}
	}

	* > .advice-box {
		& > div:nth-child(2) {

			& a:hover {
				background-color: rgba(91, 131, 196, 0.2);
				border: 3px dashed rgba(91, 131, 196, 0.4);
				transform: scale(1.05);
			}
		}
	}
}

@media(max-width: 1400px){

	body {

		& footer {
			gap: 30px;

			& > .middle {
				flex-direction: column;
				gap: 10px;

				& > div {
					& h3 {
						padding-top: 0px;
					}
				}

				& .address-contact {
					& a {
						justify-content: center;
					}
				}

				& .reviews {
					& .content {
						display: flex;
						justify-content: center;
					}
				}
			}
		}
	}
}

@media(max-width: 1000px){

	body {

		& main {
			& section#introduction {
				& .introII {

					& .gallery-box {
						flex-direction: column;
						
						& > a {
							align-items: center;

							& img {
								width: 50%;
							}
						}
					}
				}
			}
		}

	}
}

@media(max-width: 800px){

	body {
		
		& header {
			grid-template-columns: 1fr;
			grid-template-rows: 1fr 2fr;
			padding-bottom: 8px;

			& h2 {
				padding: 0px;
			}

			& nav {
				flex-direction: column;
				align-items: center;
				padding-top: 8px;
				gap: 0.5rem;

				& ul {
					gap: 0px;

					& li {

						& a {
							padding: 5px;
						}

						& a[href="#information-faq"] {
							display: none;
						}	

						& a[href="#gallery"] {
							display: none;
						}

					}
				}
			}
		}

		& main {
			& section#new-patients {
				& article {
					& p:nth-child(3)::after {
						bottom: 1.4rem;
					}
				}
			}
		}
	}
}

@media(max-width: 460px){

	body {
		margin: 0px 8px;
		
		& header {
			& nav {
				gap: 0px;

				& ul{ 
					& li {
						justify-content: center;
					}

						& a[href="#make-appointment"] {
							display: none;
						}	

						& a[href="#new-patients"] {
							display: none;
						}
				}
			}
		}

		& main {

			& section#introduction {

				& .introI {

					& h1 {
						width: 90%;
					}

					& .quick-links {
						grid-template-columns: 1fr 1fr;
						grid-template-rows: 1fr 1fr;
					}
				}
			}

			& section#new-patients {
				& article {
					& p:nth-child(3)::after {
						bottom: 1.7rem;
					}
				}
			}

			& section#gallery {
				& .gallery-box {
					& a {
						box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
					}
				}
			}

			& section#not-found {
				min-height: 250px;
			}
		}

		& footer {
			padding: 8px 12px;

			& .middle {

				& > div {
					padding: 10px;
				}

				& .shortcuts {
					& .content {
						& ul {
							gap: 5px;
						}
					}
				}
			}
		}
	}
}

@media (max-width: 460px) and (pointer: fine) and (hover: hover) { 
	/* for tiny displays with real hover (almost never I think) is better the smaller move 3px than 5px */
	body {
		& main {
			& section#gallery {
				& .gallery-box {				

					& a:nth-child(2n + 1).top-line:hover {
						transform: translateY(3px) translateX(3px);
						box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
					}

					& a:nth-child(2n).top-line:hover {
						transform: translateY(3px) translateX(-3px);
						box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
					}

					& a:nth-child(2n + 1).bottom-line:hover {
						transform: translateY(-3px) translateX(3px);
						box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
					}

					& a:nth-child(2n).bottom-line:hover {
						transform: translateY(-3px) translateX(-3px);
						box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
					}
				}
			}
		}
	}
}

@media(max-width: 300px){
	body {
		& main {

			& section#introduction {

				& .introI {

					& .quick-links {
						grid-template-columns: 1fr;
					}
				}
			}
		}
	}
}