* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body {
	position: relative;
	font-family: "Montserrat", sans-serif;
	font-size: 1.6rem;
}

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

.blue-color {
	color: #50b5e2;
}

.hero-shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: -1;
}

.underline {
	margin: 0 auto;
	width: 6rem;
	height: 0.4rem;
	background-color: #50b5e2;
}

.name-brand {
	font-size: 2.2rem;
}

.navbar-brand {
	font-size: 1.8rem;
}

.nav-link,
.navbar-toggler-icon {
	font-size: 1.8rem;
	text-transform: uppercase;
	color: black;
}

.navbar-nav .nav-link.active {
	color: #50b5e2;
}

.home {
	position: relative;
	height: 60rem;
	background-image: url(../img/hero11.webp);
	background-position: center;
	background-size: cover;
	z-index: 0;
}

.headline {
	font-size: 3rem;
}

.hero-text {
	font-size: 3.2rem;
	font-weight: 500;
}

.welcome-text {
	font-size: 2.4rem;
}

.aboutme .card-title {
	font-size: 2.4rem;
}

.card-text {
	font-size: 1.4rem;
	text-align: justify;
}
.aboutme img {
	box-shadow: 1px 1px 3px rgb(0, 0, 0);
}

.services,
.contact {
	background-color: rgb(248, 248, 248);
}

.services .card-img-top {
	height: 300px;
	object-fit: cover;
}

.services .text {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 1rem 2rem;
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	clip-path: inset(0 0 100% 0);
	transition: clip-path 0.8s;
}

.services .text h5 {
	font-size: 2rem;
	text-transform: uppercase;
	margin-top: 0.5rem;
	color: #50b5e2;
}

.services .text li,
.services .text p {
	font-size: 1.6rem;
}

.services .card-title {
	font-size: 1.8rem;
	text-transform: uppercase;
}

.services .card-body button {
	font-size: 1.6rem;
	border: 1px solid black;
	cursor: crosshair;
}

.services button:hover {
	z-index: 10;
}

.services button:hover ~ .text {
	clip-path: inset(0 0 26.5% 0);
}

.gallery img {
	max-width: 100%;
	cursor: pointer;
	height: 100%;
}
.gallery {
	background-color: #ffffff;
}

#gallery-modal .modal-img {
	width: 80%;
	height: 100%;
}

.contact-hirudoteraphy {
	font-size: 2rem;
	font-weight: bold;
	color: #50b5e2;
}

.contact-info {
	font-size: 2rem;
	font-weight: bold;
	text-transform: uppercase;
}

.contact-map iframe {
	width: 100%;
	min-height: 30rem;
}

footer {
	font-size: 1.4rem;
}

footer span {
	text-transform: uppercase;
	font-weight: bold;
	color: #50b5e2;
}

footer a {
	text-decoration: none;
}

@media (min-width: 576px) {
	.hero-text {
		font-size: 3.4rem;
	}
	.headline {
		font-size: 3.2rem;
	}
	.gallery-box {
		padding: 0 3rem;
	}
}

@media (min-width: 768px) {
	.gallery-box {
		padding: 0 5rem;
	}
	.contact-box {
		margin-bottom: 4.7rem;
	}
	.aboutme img {
		margin-top: 6.2rem;
	}
}

@media (min-width: 768px) and (max-width: 1400px) {
	.aboutme .card-body {
		margin-left: 2rem;
	}
}

@media (min-width: 576px) and (max-width: 992px) {
}

@media (min-width: 992px) {
	.hero-text {
		font-size: 3.8rem;
	}
	.welcome-text {
		font-size: 2.8rem;
	}
	.aboutme img {
		margin-top: 3rem;
	}
	.headline {
		font-size: 3.6rem;
	}
	.gallery-box {
		padding: 0 1rem;
	}
	footer {
		font-size: 1.6rem;
	}
	.contact-info {
		font-size: 2.2rem;
	}
	.contact-box {
		margin-bottom: 4.4rem;
	}
	.home {
		background-image: url(../img/hero1.webp);
	}
}

@media (min-width: 1200px) {
	.hero-text {
		font-size: 4.4rem;
	}
	.welcome-text {
		font-size: 3.2rem;
	}
	.aboutme img {
		margin-top: 1rem;
	}
	.headline {
		font-size: 4rem;
	}
	.services .card-title {
		font-size: 2rem;
	}
	.card-text {
		font-size: 1.6rem;
	}
	.contact-box {
		margin-bottom: 7.1rem;
	}
}

@media (min-width: 1400px) {
	.aboutme img {
		margin-top: 0rem;
	}
}