@import url('https://fonts.googleapis.com/css2?family=Anton&family=Lexend+Deca:wght@100..900&display=swap');
.anton-regular {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}

:root {
    --light-blue: #99e1f8;
    --navy-blue: #344858;
    --medium-teal: #14a0a5;
}

.hover-text-decoration-underline:hover {
    text-decoration: underline !important;
}

.text-light-blue {
    color: var(--light-blue) !important;
}
.bg-light-blue {
    background-color: var(--light-blue) !important;
}
.text-hover-light-blue:hover {
    color: var(--light-blue) !important;
}
.bg-hover-light-blue:hover {
    background-color: var(--light-blue) !important; 
}
.border-light-blue {
    border-color: var(--light-blue) !important;
}


.text-navy-blue {
    color: var(--navy-blue) !important;
}
.bg-navy-blue {
    background-color: var(--navy-blue) !important;
}
.text-hover-navy-blue:hover {
    color: var(--navy-blue) !important;
}
.bg-hover-navy-blue:hover {
    background-color: var(--navy-blue) !important; 
}
.border-navy-blue {
    border-color: var(--navy-blue) !important;
}



.text-medium-teal {
    color: var(--medium-teal) !important;
}
.bg-medium-teal {
    background-color: var(--medium-teal) !important;
}
.text-hover-medium-teal:hover {
    color: var(--medium-teal) !important;
}
.bg-hover-medium-teal:hover {
    background-color: var(--medium-teal) !important; 
}
.border-medium-teal {
    border-color: var(--medium-teal) !important;
}



.pill-rounded {
    -webkit-border-radius: 10px;
    -webkit-border-top-right-radius: 30px;
    -webkit-border-bottom-left-radius: 30px;
    -moz-border-radius: 10px;
    -moz-border-radius-topright: 30px;
    -moz-border-radius-bottomleft: 30px;
    border-radius: 10px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
}

.menu-arrow-right {
    background: #344858;
    background: linear-gradient(90deg,rgba(52, 72, 88, 1) 50%, rgba(255, 255, 255, 0) 100%);
}
.menu-arrow-left {
    background: #344858;
    background: linear-gradient(270deg,rgba(52, 72, 88, 1) 50%, rgba(255, 255, 255, 0) 100%);
}
.shake {
  animation: shake 2s ease 3;
}
@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-3x);}
	20%, 40%, 60%, 80% {transform: translateX(3px);}
}


.container-fluid {
    min-width: 320px !important;
}

.blockquote-gradient {
    background: #99E1F8;
    background: radial-gradient(circle, rgba(153, 225, 248, 0.25) 0%, rgba(255, 255, 255, 0) 80%);
}

.textbox-gradient {
    background: #bdbdbd;
    background: linear-gradient(135deg,rgba(189, 189, 189, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
}





/* .lexend-deca-400 {
  font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
} */

* {
  font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


.hero-banner {
    background-image: url(../img/hero-background.jpg);
    background-size: cover;
}
.hero-logo-container {
    padding-top: 50px;
}
.hero-logo:before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 90%;
    height: 100%;
    border: 1px solid white;
    border-radius: inherit;
    transform: translate(-20px, -20px);
}
.hero-logo {
    z-index: 1;
    min-width: 260px;
    transform: translate(10px, 0);
}
.hero-logo-shadow {
    min-width: 208px;
    outline: 1px solid white;
    outline-offset: 5px;
}
.hero-pill {
    background-image: url(../img/hero-pill.png);
    background-size: 100% 100%;
    font-size: 75%;
}
.fs-hero-outline {
    font-size: 90% !important;
}

/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */
.fs-hero {
    font-size: 1.4rem;
}
.fs-special {
    font-size: .8rem !important;
}
.hero-logo-container {
    margin-top: -140px;
    height: 50px;
    
}
.hero-medica {
    margin-top: 30px;
    height: 400px;
    overflow-y: hidden;
}
.hero-textbox {
    margin-top: 160px;
}

/* Small devices (landscape phones, 425px and up) */
@media (min-width: 425px) {
    .fs-special {
        font-size: 1rem !important;
    }
    .fs-hero {
        font-size: 2.4rem;
    }
    .hero-logo-container {
        margin-top: -100px;
        height: 100px;
    }
    .hero-medica {
        margin-top: 40px;
        height: 450px;
        overflow-y: hidden;
    }
    .hero-textbox {
        margin-top: 180px;
        font-size: 1.2rem;
    }
}



/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .fs-hero {
        font-size: 2em;
    }
    .hero-logo-container {
        margin-top: 20px;
        height: 100px;
        
    }
    .hero-medica {
        margin-top: 20px;
        height: 420px;
        overflow-y: hidden;
    }
    .hero-textbox {
        margin-top: 160px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .fs-hero {
        font-size: 2.5em;
    }
    .hero-logo-container {
        margin-top: 30px;
        
    }
    .hero-medica {
        margin-top: 30px;
        height: 500px;
        overflow-y: hidden;
    }
    .hero-textbox {
        margin-top: 210px;
    }

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .fs-hero {
        font-size: 3.5rem;
    }
    .hero-logo-container {
        margin-top: 0;
    }
    .hero-medica {
        margin-top: 200px;
        height: 650px;
        overflow-y: hidden;
    }
    .hero-textbox {
        margin-top: 500px;
        width: 500px;
        font-size: 1.4rem;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .fs-hero {
        font-size: 3.5rem;
    }
    .hero-logo {
        margin-top: 100px;
    }
    .hero-medica {
        margin-top: 60px;
        height: 600px;
        overflow-y: hidden;
    }
    .hero-textbox {
        margin-top: 360px;
        width: 500px;
        font-size: 1.4rem;
    }
}