@font-face {
	font-family: 'MinervaModern Bold';
	src: url('font/MinervaModern Bold.ttf') format('truetype');
  }

  @font-face {
	font-family: 'MinervaModern';
	src: url('font/MinervaModern Black.ttf') format('truetype');
  }

body {
	font-family: 'MinervaModern', sans-serif;
	color: gray;
}

.menu-active{
	background-color:  #658b56;
}

.btn-therapy-center{
	background-color:  #83b271;
}

.btn-therapy-center:hover{
	background-color:  #658b56;
}

.img-shadow-1 {
	box-shadow: 45px -45px rgba(131, 178, 113, 0.5);
  }

.img-shadow-2 {
	box-shadow: -45px 45px rgba(131, 178, 113, 0.5);
  }

.txt-therapy-center:hover{
	color:  #658b56;
}

.ml-n5{
	margin-left: -3rem !important;
}

.hr{
	border: none;
	height: 1px;
	/* Set the hr color */
	color: #333;  /* old IE */
	background-color: #333;  /* Modern Browsers */
}

  @keyframes slideUp {
	0% {
	  background-position: center bottom;
	}
	100% {
	  background-position: center;
	}
  }

  .card-body {
	height: 550px; /* adjust the height of the card body */
  }
  
  .card-body img {
	height: 400px; /* adjust the height of the image */
	object-fit: cover; /* ensure the image covers the entire width */
	width: 100%;
  }
  
  .overlay {
	position: absolute;
	bottom: 40px; /* position the overlay at the bottom of the image */
	left: 50%; /* center the overlay horizontally */
	transform: translateX(-50%); /* center the overlay horizontally */
	width: 80%; /* make the overlay narrower */
	height: 150px; /* set the height to 100px */
	background-color: #fdfdfd; /* black with 50% opacity */
	opacity: 90%;
	padding: 20px; /* add some padding for the title and subtitle */
	text-align: center;
  }
  
  .overlay h2 {
	font-weight: bold;
	margin-bottom: 10px;
  }
  
  .overlay p {
	font-size: 18px;
	color: #333; /* adjust the color to your liking */
  }
 
  .navbar-collapse {
	animation: collapse 0.3s ease;
  }
  
  @keyframes collapse {
	0% {
	  height: 0;
	}
	100% {
	  height: auto;
	}
  }

 .img-logo{
		max-width: 400px;
 }

   /* Add media query for mobile screens */
   @media only screen and (max-width: 768px) {
	.card-body {
	  width: auto; /* make the card body height auto on mobile */
	}

	.img-logo{
		width: 200px;
	}
  }