/* global */
body {border-top:1px solid white;font-size:large;}
img {max-width:100%;height:auto;}
main {min-height:95vh;}

/* typography */
h5 {padding-bottom:8px;font-size:small;font-weight:bold;text-transform:uppercase;color:#266AB2;border-bottom:2px solid #ccc;margin-bottom:12px;}
.card {font-size:large;}
.card-title {margin-bottom:1rem;}
.card strong {display:block;margin-bottom:1rem;}
.card-title .material-symbols-outlined {line-height: 1;vertical-align: middle;font-size:2rem;}
.tel {text-decoration:none;}
address {color:#266AB2;font-weight:bold;font-size:large;}
.provider-link .material-symbols-outlined {line-height: 1;vertical-align: middle;position: relative;top: -7px;}

/* bootstrap */
.btn-primary {
    --bs-btn-bg: #17b4c5;
    --bs-btn-border-color: #17b4c5;
    --bs-btn-hover-bg: #1296a5;
    --bs-btn-hover-border-color: #1296a5;
    --bs-btn-active-bg: #0f7f8c;
    --bs-btn-active-border-color: #0f7f8c;
}

/* navigation */
.logo {z-index:10;position:absolute;left: 50%;transform: translateX(-50%);max-width:250px;top:18px;}
.main-nav {z-index:0;position: absolute;left: 0;top: 0;right: 0;background:rgba(255, 255, 255, 0.5);font-size:large;color:white;font-weight:bold;}
.main-nav a {color:white;text-shadow:1px 1px 5px rgba(0,18,22,0.41);}

/* home */
section.hero {color:white;background:url('../img/hero.jpg') no-repeat center center;background-size:cover;min-height:80vh;display: flex;align-items: center;justify-content: center;}
.hero hr {height: 2px;background-color: white;border: 0;opacity: 1;max-width:320px;margin:1rem auto 1.5rem;}
section.hero h1 {text-transform:uppercase;font-size:5rem;font-weight:bold;text-shadow:2px 2px 5px #3f3f3f;}
.hero2 {position:relative;background:url('../img/hero2.jpg') no-repeat center center;background-size:cover;min-height:80vh;}
.hero2::before {content: "";position: absolute;inset: 0;background: rgba(255, 255, 255, 0.45);z-index: 1;}
.hero2 * {z-index:10;}
.hero2 .card {margin-bottom:2rem;position:relative;z-index:2;background:#567eba;border-radius:0 0 0 0;border:none;color:white;}
.hero2 .card a {color:white;}
.hero2 h2 {color:white;margin:2.5rem 0;text-shadow:2px 2px 5px rgba(15,6,0,0.57);font-size:2.5rem;}
.about{font-size:large;}
.about h2 {margin-bottom:2rem;display: flex;align-items: center;gap: 3rem;color:#295CA8;font-size:2.5rem;}
.about h2.text-center::before,
.about h2.text-center::after {content: "";flex: 1;height: 1px;background: #ccc;}
.hero3 {color:white;position:relative;background:url('../img/hero3.jpg') no-repeat center center;background-size:cover;}
.hero3::before {content: "";position: absolute;inset: 0;background: rgba(41, 92, 168, 0.6);z-index: 1;}
.hero3 * {z-index:10;}
article.desc {font-size:large;padding-right:3.5rem;}
article.desc h3 {margin-bottom:2rem;font-weight:bold;font-size:2.5rem;}
.card-body {min-height:260px;position:relative;}
.card-body .btn-link {position:absolute;bottom:1rem;margin:0 auto;text-align:center;left: 50%;transform: translateX(-50%);}

/* footer */
.footer {font-size:small;}
.footer > .col-md-3 {font-size:large;}
.footer a {text-decoration:none;margin-bottom:1rem;}
footer.main {background:#3a3a3a;color:white;padding:40px 15px;font-size:large;}

/* Desktop */
@media (min-width: 992px) {
	.ratio {max-width:90%;}
    .about {max-width:80%;margin:4rem auto;}
	.hero3 {padding:3rem;}
	.map {padding:3rem 0;}
	.footer {margin-top:3rem;}
}

/* Mobile */
@media (max-width: 991.98px) {
    .about {margin:1rem auto;}
	.hero2 h2 {margin:1rem auto 1.5rem;}
	.hero3 {padding:1rem 0;}
	.map {padding:1rem 0;}
	.ratio {margin-bottom:1rem;}
	article.desc h3 {font-size:2.2rem;}
	.about h2 {margin-bottom:1rem;gap:1rem}
	section.hero {min-height:70vh;}
}

@media (max-width: 768px) {
	.footer .col-md-9 {margin-top:1rem;}
	html body main section.hero h1 {font-size: 3rem;}	
}