.branch-hero {
position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.branch-hero__image {
	width: 100%;
  height: 100%;
  position: absolute;
  background-position: center center;
  background-size: cover;
  z-index: 0;
  filter: saturate(0.9) brightness(0.9);
}

.branch-hero__image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(0deg, rgba(49, 97, 125, 0) 0%, rgb(62, 103, 128) 100%);
  mix-blend-mode: multiply;
  z-index: 10;
}

.branch-hero__content {
	z-index: 0;
	bottom: 45%;
	padding: 2rem;
	position: absolute;
	text-align: center;
	background: rgba(255, 255, 255, 0.4);
	  backdrop-filter: blur(12px);
	  -webkit-backdrop-filter: blur(12px);
	  transform: translateY(50%);
	 border: 1px solid rgba(255, 255, 255, 0.4);
	 max-width: 720px;
	 text-wrap: balance;
}

h5.branch-pretitle, .branch-view h5.pretitle{
	color: var(--dark-teal);
	  margin: 0 !important;
	font-weight: 700;
	  text-transform: uppercase;
	  font-size: 0.875rem !important;
	  letter-spacing: 0.05rem;
}

h5.role {
	color: var(--dark-teal);
  margin: 0 0 0.5rem!important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem !important;
  letter-spacing: 0.05rem;
  line-height: 1.075rem;
}

h1.branch-title {
	font-size: 4rem;
	line-height: 4rem;
	color: var(--body-color);
	margin: 0;
	  font-weight: 400;
}

section.branch-view{
	padding: 0 5%;
	margin:45px 0;
	text-align:center;
	display: flex;
	  justify-content: center;
}
section.branch-view .description{
	max-width:720px;
	margin:0 auto;
}
section.branch-view .description p{
	font-family:var(--main-font);
	font-size: 1em;
}
section.branch-view .opening-hours{
	margin:30px 0;
}
section.branch-view .opening-hours h3 {
	font-size: 1.75rem;
	color: var(--teal);
}

.team-members h3 {
	font-size: 1.75rem;
	color: var(--teal);
	margin: 0;
}

section.branch-view .opening-hours p{
	margin:10xp 0 0 0;
}

section.branch-view .contact-methods {
	display: flex;
	  justify-content: center;
}

section.branch-view .contact-methods .card {
	width: 33.33%;
	background: transparent;
	border-radius: 0;
	border: none;
	padding: 0 0.5rem;
}


section.branch-view .contact-methods .card i {
	color: var(--teal);
  font-size: 1.5em;
}

section.branch-view .contact-methods .card:nth-child(2) {
	border-left: 1px solid #d8d4d1;
	border-right: 1px solid #d8d4d1;
}

section.team-members{
	padding:5rem 0;
	background: var(--body-color);

}
section.team-members .title{
	text-align:center;
	margin:0 0 2rem;
}
section.team-members .members{
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
	justify-content:center;
}
section.team-members .card{
	width:49%;
	background:var(--paper-color);
	padding:0;
	border-radius: 0;
	border: none;
	position:relative;
	display: flex;
	flex-direction: row;
}
section.team-members .card .image{
	overflow:hidden;
	width:50%;
	margin:0 auto;
	padding: 0;
}
section.team-members .card img{
	display:block;
	width:100%;
	height:100%;
	object-fit: cover;
}
section.team-members .card .info{
	padding: 2rem;
	text-align:left;
	width: 50%;
	position: relative;
	display: flex;
	  flex-direction: column;
	  justify-content: center;
}
section.team-members .card p.bio{
	font-size:0.875em;
	color:var(--font-color-lighter);
	margin: 1.5rem 0 0 0;
}
section.team-members .card p.bio .read-more {
	font-weight: 500;
	  color: var(--teal);
}

section.team-members .card p.bio .read-more:hover {
	font-weight: 500;
	  color: var(--dark-teal);
}

section.team-members .card p.bio .read-more i {
	margin: 0 0.25rem 0 0 ;
}

section.team-members .card h4{
	font-family:var(--title-font);
}
section.team-members .card p.role{
	text-transform: uppercase;
	color: var(--light-brown-color);
	margin: 0;
	font-size:0.875em;
}
@media screen and (max-width:1360px){
	section.team-members .card{
		width:48%;
	}
}
@media screen and (max-width:1024px){
	
	section.branch-view .description,
	.branch-view h5.pretitle,
	.opening-hours { 
		text-align: left;
	}
	
	section.branch-view .contact-methods {
		flex-direction: column;
	}
	
	section.branch-view .contact-methods .card {
		width: 100%;
		padding: 1em 0;
	}
	
	section.branch-view .contact-methods .card:nth-child(2) {
		border-right: none;
		border-left: none;
		border-top: 1px solid #d8d4d1;
		border-bottom: 1px solid #d8d4d1;
	}
	
	section.team-members .card{
		width:98%;
	}
}

/* MODAL */

.biomodal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear 0.25s, opacity 0.25s 0s;
	pointer-events: none;
	z-index:1000;
}


.biomodal.opened {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
	
	pointer-events: auto;
}

.biomodal .modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--paper-color);
	padding: 1.5em;
	width: 90%;
	min-width: 360px;
	box-shadow: 0px 0px 150px 130px var(--dark-color-lighter);
	text-align: left;
	max-width: 800px;
	border-radius:12px;
	max-height:80vh;
	overflow-y: auto;
	overflow-x: hidden;
}
.biomodal .modal-content .row{
	align-items:flex-end;
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
}
section.team-members .biomodal .modal-content .image{
	max-width:110px!important;
	margin:0!important;
	aspect-ratio: 1;
}
section.team-members .biomodal .modal-content .info{
	margin:0 0 0 1em!important;
	text-align:left!important;
	padding: 0;
}
.biomodal .modal-content p{
	font-size: 0.875em;
	color: var(--font-color-lighter);
	margin: 1em 0 0 0;
}

@media screen and (max-width: 500px) {
	.biomodal .modal-content {
		width: 90%;
	}
}

@media screen and (max-width: 380px) {
	.biomodal .modal-content .row {
		flex-wrap: wrap;
	}
	
	.biomodal .modal-content .info {
	  margin: 1rem 0 0 0 !important;
  }
}