/** Basic setup footer stays at bottom **/
html {height: 100%; width: 100%;}
body {width: 100%; height: 100%; margin: 0; padding: 0; min-height: 100vh; font-size: 125%;}

/** Typography **/
p {font-family: futura-pt, sans-serif; line-height: 1.6em; letter-spacing: 0.04em; color: #525252;}
label {font-family: futura-pt, sans-serif; line-height: 1.6em;}
h1 {color: #cc3333; font-family: 'Abolition', sans-serif; font-size: 4.2em;}
h2 {color: #0061b1; font-family: 'Abolition', sans-serif; font-size: 3em;}
h3 {color: #00498a; font-family: futura-pt, sans-serif; font-size: 1.7em;}
h4 {color: #4997EA; font-size: 1em;}
h5 {color: #a5031a; font-size: 0.8em;}
.justify-content-center ul {margin-left: 40px}
.justify-content-center ul li{font-family: futura-pt, sans-serif; color: #525252;}
/** Horizontal rules **/
hr {display: block; margin: 0;}
hr.accordion_hr {display: block; margin: 1px; border: 10px; color: gray;}

/** Images **/
img {max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;}

/** Headers **/
header.full-width {background-color: blue; width: 100%;}

/** Hover animation **/
#b {transform: scale(1); transition: transform 0.3s ease;}
#b:hover {transform: scale(2); transition: transform 0.3s ease;}
.form-section-title {color: #000;font-weight: bold;margin-top: 1.5rem;}

/** Links **/
a {color: #624E98; text-decoration: underline;}
a.more {text-decoration: none; font-size: 0.7em; float: right; display: block; padding: 50px 20px; color: #333;}
a:hover {text-decoration: underline; color: #01c59f;}

/*** HOMEPAGE STYLING   ***/	
.icon-placeholder {width: 120px;height: 120px;margin-right: 40px;margin-left: 20px; min-width: 4em;}
.text-content h2 {flex-grow: 1;color: white;white-space:normal;overflow:visible;}
.text-content p {flex-grow: 1;color: white;white-space:normal;overflow:visible;}
.homepage-intro {padding: 60px;position: relative;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-end;background: none;margin-top: 40px}
.homepage-intro-background {background: url(/project-vida/assets/img/homeFamilycropped.png) bottom right no-repeat;position: absolute; bottom:0; right: 0; width: 100%; height: 100%; z-index: -1;background-size: contain;}
.homepage-intro-title {font-size: 2.8em;text-shadow: 0px 12px 19.32px rgba(0, 0, 0, 0.2);letter-spacing: 0.04em;margin-bottom: 40px;}
.homepage-intro-text-area {padding: 80px 60px;margin: 0;position: relative;z-index: 1; max-width: 50%;}
.image-container {position: relative; display: inline-block;}
.image-container img {display: block; width: 100%; height: auto;}
.grid{padding: 12px;}
.fluid-flex{padding-left: 0px; padding-right: 0px;}
.overlay-text {position: absolute; padding: 5px 2px; font-size: 20px; text-align: center}	
.text-left { text-align: left; margin-left: 190px;}
.btn-carousel {background-color: #ebb437; color: #fff;padding: 8px 30px; border: none;border-radius: 0px;margin-right: 100px;text-transform: uppercase; text-decoration: none; display: inline-block; z-index: 999; font-family: futura-pt, sans-serif; font-weight: 800; font-style: normal; box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2); text-align: center; margin: 40px;}
.btn-carousel:hover{color: #fff; background: #694d9e;}

/** Image container **/
.image-container {position: relative; display: inline-block;}
.image-container img {display: block; width: 100%; height: auto;}

/** Grid **/
.grid {padding: 12px;}
.fluid-flex {padding-left: 0; padding-right: 0;}
.overlay-text {position: absolute; padding: 5px 2px; font-size: 20px; text-align: center;}
.text-left {text-align: left; margin-left: 190px;}

/** Buttons **/
.btn-carousel {background-color: #ebb437; color: #fff; padding: 8px 30px; border: none; border-radius: 0; margin-right: 100px; text-transform: uppercase; text-decoration: none; display: inline-block; z-index: 999; font-family: futura-pt, sans-serif; font-weight: 800; box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2); text-align: center; margin: 40px;}
.btn-carousel:hover {color: #fff; background: #694d9e;}

/*** Read more button ***/

.more-content { display: none; opacity: 0; transition: opacity 0.5s ease; } 
.read-more-btn {cursor: pointer;display: inline-block;background-color: #007bff;color: #fff;padding: 10px;text-align: center;border-radius: 0;font-size: 14px;width: 11%;transition: background-color 0.3s ease, transform 0.2s ease;text-decoration: none;margin-top: 10px;}
.read-more-btn:hover {background-color: #0056b3;transform: scale(1.05); }
.more-visible {display: inline;opacity: 1;}

/** Carousel **/
.carousel-image {width: 100%; height: auto;}
.carousel-caption {position: absolute; bottom: 0; left: 0; right: 0; background: rgba(31, 30, 84, 0.46); padding: 20px; display: flex; justify-content: space-between; align-items: center; text-transform: uppercase;}
.carousel-caption h1 {font-size: 54px; color: #fff; text-align: left;}
.carousel-caption p {font-size: 36px; color: #fff; text-align: left;}

/** Media queries **/
@media (max-width: 768px) {
    .carousel-caption {flex-direction: column; padding: 0; text-align: center;}
    .carousel-item img {width: 100%; min-height: 400px; object-fit: cover;}
    .carousel-caption {background: rgba(31, 30, 84, 0.7); padding: 15px; position: absolute; bottom: auto; transform: translateY(-50%); top: 83%;}
    .carousel-caption h1, .carousel-caption p {text-align: center; font-size: 18px; color: white;}
    .btn-carousel {font-size: 14px; padding: 10px 20px;}
}
@media (max-width: 992px) {
    .carousel-caption {flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 10px;}
    .text-left {margin-left: 0; width: 100%;}
    .btn-carousel {margin: 20px 0 0 0; width: auto;}
    .carousel-caption h1 {font-size: 24px; color: #fff; text-align: left;}
    .carousel-caption p {font-size: 12px; color: #fff; text-align: left;}
    .btn-carousel {background-color: #ebb437; color: #fff; padding: 5px; border: none; border-radius: 0; margin-right: 100px; text-transform: uppercase; text-decoration: none; display: inline-block; z-index: 999; font-family: futura-pt, sans-serif; font-weight: 800; box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2); text-align: center; margin: 10px; font-size: 10px;}
    .carousel-item {position: relative; display: none; float: left; width: inherit; margin-right: -100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 0.6s ease-in-out;}
}
@media (max-width: 1024px) {
    .text-content h2, .text-content p {font-size: 16px; flex-grow: 1; color: white; white-space: normal; overflow: visible;}
    .service-item {position: relative; display: flex; align-items: center; padding: 10px; width: 100%; background-size: cover; background-position: center; transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;}
}
@media (min-width: 1025px) {
    .homepage-intro-image {display: none;}
    .homepage-intro-text-area {max-width: 60%;}
}


@media (max-width: 768px) {
    .homepage-intro {background: none;padding: 20px;justify-content: flex-start;position: relative;}
    .homepage-intro-background {display: none;}
    .homepage-intro-title {font-size: 1.8em; margin-bottom: 20px; }
    .homepage-intro-image {display: block;width: auto;height: auto;position: absolute;bottom: 0px;right: 0px;max-width: 70%;}
	/* Problem is in here for the menu */
    .homepage-intro-text-area {padding: 20px;margin: 20px 0;max-width: 75%;position: relative;z-index: 1;margin-bottom: 190px;}
    .text-content h2 {font-size: 1.5em; }
    .text-content p {font-size: 0.9em; }
    .icon-placeholder {width: 60px; height: 60px;margin-right: 20px;}
}

@media (max-width: 400px) {
    .homepage-intro {background: none;padding: 20px;justify-content: flex-start;position: relative;}
    .homepage-intro-background {display: none;}
    .homepage-intro-title {font-size: 1.8em; margin-bottom: 20px; }
    .homepage-intro-image {display: block;width: auto;height: auto;position: absolute;bottom: 0px;right: 0px;max-width: 90%;}
    .homepage-intro-text-area {padding: 20px;margin: 20px 0;max-width: 100%;position: relative;z-index: 1;margin-bottom: 190px;}
    .text-content h2 {font-size: 1.5em; }
    .text-content p {font-size: 0.9em; }
    .icon-placeholder {width: 60px; height: 60px;margin-right: 20px;}
}
@media (max-width: 992px) {.service-item {padding: 20px; }}
@media (max-width: 992px) {.text-content h2 { font-size: 26px; flex-grow: 1;color: white;white-space:normal;overflow:visible;} .text-content p { font-size: 16px; flex-grow: 1;color: white;white-space:normal;overflow:visible;}
	.service-item {position: relative;display: flex;align-items: center;padding: 10px;width: 100%; background-size: cover;background-position: center;transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;}}	
@media (max-width: 1024px) {.text-content h2 { font-size: 26px; flex-grow: 1;color: white;white-space:normal;overflow:visible;}.text-content p { font-size: 16px; flex-grow: 1;color: white;white-space:normal;overflow:visible;}
	.service-item {position: relative;display: flex;align-items: center;padding: 10px;width: 100%; background-size: cover;background-position: center;transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;}}

/** Service grid menu options **/
.card-title {font-size: 1.3rem; font-weight: 100; color: white; text-align: left; padding: 10px 0 0 10px; transition: transform 0.3s ease; text-transform: uppercase; text-decoration: none; white-space: nowrap;}
a {text-decoration: none !important;}
.card-body {background-color: #fff; border-radius: 0; display: flex; flex-direction: column; }
.card-body a {color: #525252;}
.card-body a:hover {color: #22BEBB;}
.service-card {border-radius: 0; height: 100%; display: flex; flex-direction: column; justify-content: space-between; border-width: 0;}
.service-header {font-weight: bold; color: white; padding: 10px;}
.service-card .card-body {padding: 15px; text-align: left; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between;}
.service-card .card-body p {margin: 0;}
.card-health {background-color: #007BFF;}
.card-education {background-color: #28A745;}
.card-homelessness {background-color: #FFC107;}
.card-housing {background-color: #CD3333;}
.card-economic {background-color: #6F42C1;}
.card-behavioral {background-color: #17A2B8;}

/** Location section **/
.location-title {font-size: 2rem; color: #007bff; margin-bottom: 1rem;}
.text-center {text-align: center;}
.search-section {margin-top: 1rem;}
.input-group .form-control {border-top-right-radius: 0; border-bottom-right-radius: 0;}
.input-group .input-group-text {border-top-left-radius: 0; border-bottom-left-radius: 0;}
.table th {text-align: left; font-weight: bold; color: #007bff;}
.table td {cursor: pointer;}
.table td:hover {text-decoration: underline;}
.table {border-collapse: separate; border-spacing: 0 15px;}
.table thead th {border-bottom: 2px solid #ddd;}
.table tbody tr {background-color: #f9f9f9; border-bottom: 1px solid #ddd;}
.table tbody tr:hover {background-color: #f1f1f1;}
.card-body.small {min-height: 100px;}
.card-body.large {min-height: 200px;}
.card-body.few-items {min-height: 100px;}

/** Services **/
.service_summary {color: #525252; font-weight: 300; padding: 0 150px;}
.icon-with-text {display: flex; align-items: center; margin-bottom: 15px;}
.icon-with-text img {margin-right: 40px;}
.icon-with-text span {display: block; text-align: left; font-size: 25px; font-family: 'Futura PT', sans-serif; line-height: 1.6em; color: #fff;}
.services-grid {display: flex; flex-wrap: wrap; gap: 3px; padding: 3px;}
.services-grid a {text-decoration: none; color: inherit; display: flex;}
.service-item {position: relative; display: flex; align-items: center; padding: 30px; width: 100%; background-size: cover; background-position: center; transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;}
.service-item:hover {box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); transform: none;}
.service-item::before {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 1; transition: opacity 0.3s ease-in-out; background-color: 0.3s ease-in-out;}
.service-item:hover::before {background-color: rgba(0, 0, 0, 0.3);}

/** Location section custom styles **/
.location-section {position: relative; background-color: #E1ECEE; background-size: cover; padding: 50px 0;}
.location-section .container-lg {box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); position: relative; z-index: 2; background-color: #E7E7F1; padding: 20px; border-radius: 10px;}
.location-section .map-container {height: 500px; width: auto; border: 1px solid #ddd; border-radius: 10px;}
.location-section .search-section {margin-top: 20px; display: flex; align-items: center;}
.location-section .search-section label {margin-right: 10px; white-space: nowrap;}
.location-section .search-section .input-group {width: 150px;}
.location-section .table-container {border-radius: 10px; overflow: hidden;}
.location-section table {width: 100%; border-collapse: collapse !important; margin-top: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.location-section th, .location-section td {padding: 10px; text-align: left; background-color: white;}
.location-section th:first-child {border-radius: 10px 0 0 0 !important;}
.location-section th:last-child {border-radius: 0 10px 0 0 !important;}
.location-section tr:last-child td:first-child {border-radius: 0 0 0 10px !important;}
.location-section tr:last-child td:last-child {border-radius: 0 0 10px 0 !important;}
.location-section th {background-color: #EBEAF0; color: #3E70B1; font-weight: bold;}
.location-section td a {color: #0A2C6D; text-decoration: none;}
.location-section td a:hover {text-decoration: underline;}
.location-section .hover-highlight:hover {color: #24BFBD;}
.location-section .hover-highlight:hover td a {color: #24BFBD;}
.input-group-sm .form-control, .input-group-sm .input-group-text, .input-group-sm .btn {padding: 0.25rem 0.5rem; font-size: 0.875rem;}
.location-section .text-center {text-align: center; color: #0A2C6D;}
.location-section .btn-primary {background-color: #FFA500; border-color: #FFA500;}
.location-section .btn-primary:hover {background-color: #FF8C00; border-color: #FF8C00;}

@media (min-width: 768px) {
    .services-grid {flex-direction: row;}
    .service-item {flex: 1 1 23%;}
}
.text-content {position: relative; z-index: 2;}

/** NavBar services wide menu **/
.nav-item .dropdown-menu.show {top: 100%; left: 0; right: 0; width: auto; font-size: 1em;}
.nav-item-wide .wide-dropdown-menu.show {top: 100%; left: 50%; transform: translateX(-6%); width: fit-content; display: flex; flex-wrap: nowrap;}
.nav-item-wide .wide-dropdown-menu .category-title {color: #00498A; font-weight: bold; margin-top: 10px; padding-left: 35px;}

@media (max-width: 992px) {
    .navbar .dropdown-menu {display: none;}
    .navbar-nav {flex-direction: column;}
    .dropdown-menu {position: static;}
}
.offcanvas-body {background-color: #0d7793;}
.offcanvas-header {background-color: #0d7793;}

/** Bullet points **/
.purple-bullet ul {list-style-type: none; padding-left: 0;}
.purple-bullet ul li {position: relative; margin-left: 30px; padding-left: 20px;}
.purple-bullet ul li:before {content: ''; position: absolute; left: 0; top: 50%; background-color: #6726A2; border-radius: 50%; transform: translateY(-50%);}
.orange-bullet ul {list-style-type: none; padding-left: 0;}
.orange-bullet ul li {position: relative; padding-left: 20px; margin-left: 30px;}
.orange-bullet ul li:before {content: ''; position: absolute; left: 0; top: 50%; color: #FD9A34; background-color: #FD9A34 !important; border-radius: 50%; height: 0.3em; width: 0.3em; transform: translateY(-50%);}

/** Animations **/
@keyframes pulse {from {transform: scale(1);} to {transform: scale(1.05);}}
@keyframes wobble_vertical {16.65% {transform: translateY(2px);} 33.3% {transform: translateY(-2px);} 49.95% {transform: translateY(1px);} 66.6% {transform: translateY(-1px);} 83.25% {transform: translateY(1px);} 100% {transform: translateY(0);}}
@keyframes jumpy {0%, 40%, 100% {transform: translateY(0);} 20% {transform: translateY(-3px);}}
.jumpy {position: relative; display: inline-block; animation: jumpy 1.5s infinite; animation-delay: calc(.1s * var(--i));}

/** Utilities **/
.page-title {color: #fff; padding: 290px 0 0 260px;}
.center {text-align: center;}
.red-ast {color: #ff0000;}
.homepage_banner_button_spacing {padding: 47px 0;}

/** Content buttons and images **/
.content-photo-left {border: 6px solid #624E99; box-shadow: 25px -25px 0 0 #624E99; float: left; max-width: 40%; margin: 20px 55px 20px 0;}
.content-photo-right {border: 6px solid #1F5598; box-shadow: 25px -25px 0 0 #1F5598; float: right; max-width: 40%; margin: 20px 0 20px 55px;}
.content-button {background-color: #ffd133; color: #000; padding: 20px 10px; border: none; box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.3); text-align: center; text-decoration: none; font-weight: bold; font-size: 0.9em; margin: 20px; display: inline-block; transition: box-shadow 0.3s ease;}
.content-button:hover {animation: wobble_vertical 0.7s ease-in-out; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);}
.red-content-button {background-color: #e34929; padding: 20px 10px; border: none; box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.3); color: #fff; text-align: center; text-decoration: none; font-weight: bold; font-size: 0.9em; display: inline-block; transition: box-shadow 0.3s ease;}
.red-content-button:hover {animation: wobble_vertical 0.7s ease-in-out; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);}
.red-content-button p {color: #fff; font-weight: 600; text-transform: uppercase; font-family: futura-pt, sans-serif; font-size: 1.3em; line-height: 1em;}
.green-content-button {background-color: #408540; padding: 20px 10px; border: none; box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.3); color: #fff; text-align: center; text-decoration: none; font-weight: bold; font-size: 0.9em; display: inline-block; transition: box-shadow 0.3s ease;}
.green-content-button:hover {animation: wobble_vertical 0.7s ease-in-out; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);}
.green-content-button p {color: #fff; font-weight: 600; text-transform: uppercase; font-family: futura-pt, sans-serif; font-size: 1.3em; line-height: 1em;}

/** Gallery **/
.gallery {display: flex; flex-wrap: wrap; margin: -1rem -1rem;}
.gallery-item {flex: 1 0 24rem; margin: 1rem; box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4); overflow: hidden;}
.gallery-image {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease-out;}
.gallery-image:hover {transform: scale(1.15);}

/** Accordion **/
.accordion-item {border: 0 solid #ddd; border-radius: 0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin-bottom: 10px; background-color: #e7e7f1;}
.accordion-item .accordion-button {background-color: #0061b5; border: 0 solid #ddd; color: #fff; font-family: 'Abolition', sans-serif; font-size: 0.5em; text-decoration: none;}
.accordion-item .accordion-button:hover {background-color: #0056b3; border: 0 solid #ddd;}
.accordion-item .accordion-button::after {content: '▼'; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); font-size: 20px;}
.accordion-item .accordion-collapse {border-top: 0 solid #ddd;}

/** Banner image container **/
.directory-container {min-height: 634px; background: url(/project-vida/assets/img/background-directory.png) no-repeat center center; background-size: cover !important;}
.health-container {min-height: 634px; background: url(/project-vida/assets/img/banner-oral-health.jpg) no-repeat center center; background-size: cover;}

/** Logo animation **/
.logo-icon-show {opacity: 1; transition: opacity 0.5s ease;}
.logo-icon-hide {opacity: 0; transition: opacity 0.5s ease; pointer-events: none; display: none;}
.logoSecond {padding: 15px; width: 206px; z-index: 999; transform: translate(0%, -5%);}

/** Alerts **/
.alert-background {background-image: linear-gradient(#2361ad, #0c4184);}
.alert_nav {display: block; text-decoration: none; text-align: center; max-width: 2000px;}
.alert_title {color: #fff; font-family: futura-pt, sans-serif; font-size: 1.4em; line-height: 1.6em; text-align: left; text-decoration: none;}
.alert_content {color: #fff; font-family: futura-pt, sans-serif; font-size: 0.8em; line-height: 1.6em; text-align: left; text-decoration: none;}
.alert_content a {color: #fff;}
.alert_content p {color: #fff;}
.alert_rounded_circle {border: 5px solid black; max-width: 100px; max-height: 100px; width: auto; height: auto;}
.close-btn.fa-rectangle-xmark {color: #fff;}

/** Form control **/
.form-control-label {color: #525252; text-align: center; text-decoration: none; text-transform: uppercase;}
.form-control {display: block; width: 100%; padding: .375rem .75rem; text-decoration: none; text-transform: uppercase; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #525252; background-color: #fff; background-clip: padding-box; border: 1px solid #525252; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: .275rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
  .contact-form { background:#fff; padding:20px; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,0.1); }
  .contact-form .form-control { border-radius:5px; text-transform:none !important; }
  .contact-form .form-label {
  font-weight: bold;
  margin-bottom: .25rem;
  font-size: 1.1rem; /* Smaller text (14px if root is 16px) */
}

  .contact-form .submit-button { background:#6C63FF; color:#fff; border:none; padding:10px 20px; border-radius:5px; font-size:16px; cursor:pointer; }
  .contact-form .submit-button:hover { background:#5548c8; }
  .invalid-feedback { display:block; color:#dc3545; margin-top:.25rem; }
  .remove-btn { margin-top:1.75rem; }
	h5 {
  color: #0D7793;
  font-size: 1.5rem; /* adjust as needed */
  font-weight: bold;
}


/** Navbar **/
.navbar-brand {padding-top: 0.3125rem; padding-bottom: 0.3125rem; padding-left: 10px; margin-right: -1rem; font-size: 1.25rem; align-content: center; text-decoration: none; white-space: nowrap; overflow: hidden;}
.nav-link:hover {color: #624E99;}
.nav-link-bottom:hover {color: #E6E6E6 !important;}
.navbar {padding-top: 0;}
.mid-nav {background-color: white; transform: translate(0%, -5%);}
.mid-nav-text {color: #000; font-family: "niveau-grotesk", sans-serif; font-weight: 400; font-style: normal; font-size: 1em; text-align: center; text-decoration: none; text-transform: uppercase;}
.footer-nav-text {color: #000; font-family: "niveau-grotesk", sans-serif; font-weight: 400; font-style: normal; font-size: 1em; text-align: center; text-decoration: none; text-transform: uppercase;}
.bottom-nav-text {color: #fff; font-family: futura-pt, sans-serif; font-weight: 500; font-style: normal; letter-spacing: 0.04em; font-size: 1.6em; text-align: left; text-decoration: none; text-transform: uppercase;}
.bottom-nav {background-color: #0d7793;}
.main-logo-container {padding: 1.5em; position: relative; display: block; z-index: 999;}
.blue_title_text {text-shadow: 2px 2px 10px #525252; color: #004b93;}
.get_involved_title {color: #004b93; font-size: 2.3em;}
.purple_text {color: #6726a2; font-family: futura-pt, sans-serif; font-size: 1.05em; font-weight: 700; line-height: 1.6em;}
.blue_text {color: #0061b5; font-family: futura-pt, sans-serif; font-size: 1.05em; font-weight: 700; line-height: 1.6em;}
.white_extra_bold_text {color: #fff; font-weight: bolder; text-transform: uppercase; font-family: futura-pt, sans-serif; font-size: 1.9em; line-height: 1em;}
.yellow_text {color: #ff9933;}
.gray_option_text {color: #acacbf; font-family: 'Poppins', sans-serif; font-size: 0.9em; text-decoration: none; text-transform: uppercase;}
.homepage-container {position: relative; bottom: 80px;}
.dropdown-item {font-family: futura-pt, sans-serif; font-weight: 500; font-style: normal; letter-spacing: 0.04em; font-size: 0.8em; text-align: left; text-decoration: none; text-transform: uppercase; display: block; width: 100%; padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x); clear: both; color: var(--bs-dropdown-link-color); white-space: nowrap; background-color: transparent; border: 0;}

/** Side menu section **/
.accordion-button::after {display: none;}
.service-header-title {font-size: 1.7em; font-weight: 400;}
.yellow-side-button {background-color: #EEB21E; padding: 20px 30px; margin: 10px 0; border: none; letter-spacing: 2px; text-align: left; text-decoration: none; font-weight: 200; display: inline-block; color: #fff; font-family: 'Abolition', sans-serif; font-size: 1.5em;}
.cyan-side-button {background-color: #24BEBE; letter-spacing: 2px; padding: 20px 30px; margin: 10px 0; border: none; text-align: left; text-decoration: none; font-weight: 200; display: inline-block; color: #fff; font-family: 'Abolition', sans-serif; font-size: 1.5em;}
.red-side-button {background-color: #CD3333; letter-spacing: 2px; padding: 20px 30px; margin: 10px 0; border: none; text-align: left; text-decoration: none; font-weight: 200; display: inline-block; color: #fff; font-family: 'Abolition', sans-serif; font-size: 1.5em;}
.oceanblue-side-button {background-color: #0E7794; letter-spacing: 2px; padding: 20px 30px; margin: 10px 0; border: none; text-align: left; text-decoration: none; font-weight: 200; display: inline-block; color: #fff; font-family: 'Abolition', sans-serif; font-size: 1.5em;}
a:hover {text-decoration: none; color: #000;}

/** FAQ **/
.faq-accordion .accordion-button {color: #24BEBC; font-weight: bold; border: none; box-shadow: none; font-size: 1em; background: none; position: relative; padding-left: 2em;}
.faq-accordion .accordion-button::before {font-weight: 900; content: "+"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 1.5em;}
.faq-accordion .accordion-button:not(.collapsed)::before {content: "-"; font-size: 1.5em;}
.faq-accordion .accordion-body {font-size: 0.9rem; background-color: transparent; padding-left: 0; padding-right: 0;}
.faq-accordion .accordion-header {border: none;}
.faq-section {background-color: #EFF4F7; padding: 20px;}
.faq-title {font-size: 2rem;}
.btn {border: none; box-shadow: none;}
.faq-container {width: 100%; margin: 0 !important; padding: .5rem !important; background-color: #EFF4F7;}
.faq-accordion-item {margin-bottom: 10px;}

/** Social icons **/
.social-icons {list-style: none; padding: 0; margin: 0; text-align: center;}
.social-icons li {display: inline-block; margin: 0 15px;}
.social-icons a {text-decoration: none; color: #555; font-size: 60px; transition: color 0.3s;}
.social-icons a:hover {color: #999;}

/** Search bar **/
.squared-input {font-family: "niveau-grotesk", sans-serif; font-weight: 400; line-height: 1; font-style: normal; border-radius: 0; border: 1px solid #ccc; background-color: #c1c1c1;}
.squared-button {border-radius: 0; background-color: #ff9933; color: #fff; border: 0; padding-bottom: 0.43rem; padding-top: 0.42rem;}
.squared-input:focus {border-color: #ff9933;}
.squared-button:hover {background-color: #f47d06;}

/** Menu item **/
.menu-item {padding-right: 230px;}
a.underline-hover-effect {text-decoration: none; color: inherit;}
.underline-hover-effect {display: inline-block; padding-bottom: 0.25rem; position: relative;}
.underline-hover-effect::before {content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: #fff; transition: width 0.25s ease-out;}
.underline-hover-effect:hover::before {width: 100%;}

/** Wobble animation for buttons **/
.wobble_vertical:hover {animation-name: wobble_vertical; animation-duration: 0.7s; animation-timing-function: ease-in-out; animation-iteration-count: 1;}

/** Header **/
.site-header {background-color: #074D90; transition: all 0.15s ease-in-out;}
.site-header svg {width: 300px;}
.site-header a {font-family: 'almanachbold'; color: #fff; text-decoration: none; text-transform: uppercase; transition: all 0.15s ease-in-out;}
.site-header a:hover, .site-header a:focus {color: #9BBC3C;}
.site-header #primary_logo {transition: all 0.15s ease-in-out;}
.position-relative {position: relative !important;}

/** Free financial title **/
.financial-title {text-align: center; text-decoration: none; font-weight: bold; text-transform: uppercase; margin: 40px;}

/** Gradient for content shields **/
#gradBlueToPink {height: auto; background-color: #4da1b2; background-image: linear-gradient(#4da1b2, #9f7676);}
#gradBlueToGreen {height: auto; background-color: #4da1b2; background-image: linear-gradient(#3d8da6, #62b792);}

/** Content dividers **/
hr.solid {border-top: 10px solid; color: #82caf0;}

/** Badges style both circle and shield **/
.rounded-gradient-borders {z-index: 999; width: 235px; height: 235px; border: double 7px transparent; border-radius: 50%; background-image: linear-gradient(white, white), radial-gradient(circle at top left, #fff, #858583); background-origin: border-box; background-clip: content-box, border-box; display: inline-block; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); transform: translate(-50%, -10%);}
.icons {padding: 120px 10px;}
.shield-icon-blue, .shield-icon-green, .shield-icon-cyan, .shield-icon-red, .shield-icon-purple, .shield-icon-greenish {padding: 120px 15px; margin: 60px 0; overflow: auto; border-radius: 30px 30px 180px 180px; box-sizing: content-box;}
.shield-icon-blue {background-image: linear-gradient(to bottom right, #18467d, #2360ac);}
.shield-icon-green {background-image: linear-gradient(to bottom right, #046424, #009733);}
.shield-icon-cyan {background-image: linear-gradient(to bottom right, #015467, #007692);}
.shield-icon-red {background-image: linear-gradient(to bottom right, #b53329, #df4729);}
.shield-icon-purple {background-image: linear-gradient(to bottom right, #1180b9, #1180b9);}
.shield-icon-greenish {background-image: linear-gradient(to bottom right, #41b1af, #408641);}
.dotted-shadow {background: #fff url(/project-vida/assets/img/doted_shadowdrop.png) bottom right; padding: 40px; background-repeat: no-repeat; background-size: 410px 410px;}
.shield-title {color: #fff; font-family: 'Abolition', sans-serif; font-size: 1.6em; text-align: center; text-decoration: none; text-transform: uppercase;}
.shield-text {color: #fff; font-family: futura-pt, sans-serif; font-size: 1em;}

/** Main buttons **/
.default-button {font-family: futura-pt, sans-serif; font-weight: 800; font-style: normal; background-color: #694d9e; color: #fff; padding: 15px 20px; box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2); text-align: center; text-decoration: none; text-transform: uppercase; margin: 40px;}
.default-button:hover {color: #fff; background: #cc3333;}
.submit-button {background-color: #694d9e; color: #fff; padding: 10px 20px; text-align: center; text-decoration: none; font-weight: bold; text-transform: uppercase;}
.submit-button:hover {color: #fff; background: #cc3333;}
.img-container {position: relative; text-align: center; background-repeat: no-repeat; color: white;}
.yellow_button {background-color: #ffd133; color: #000; padding: 20px 10px; border: none; box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.3); text-align: center; text-decoration: none; font-weight: bold; font-size: 0.9em; margin: 20px;}

/** Award section **/
.awards-section {display: flex; flex-wrap: wrap; background: #f3f3f3;}
.disclaimer-text {font-family: futura-pt, sans-serif; text-decoration: none; letter-spacing: 1.5px; line-height: 1.6em; color: #000; font-size: 1em;}

/** Button hover **/
.button-purple:hover {background-color: #553e81;}

/** Flexboxes **/
.row {display: flex; flex-wrap: wrap;}
.column {flex: 25%; padding: 20px;}
.homepage-container {position: relative; bottom: 80px;}

/** Icon container **/
.icon-container {padding: 30px 0;}
.footer-card {background-color: #F3F3F3;}
.footer-card img {max-height: 150px;}
.icon-with-text {display: flex; align-items: center; margin-bottom: 15px;}
.icon-with-text img {margin-right: 40px;}
.icon-with-text span {display: block; text-align: left; font-size: 25px; font-family: futura-pt, sans-serif; line-height: 1.6em; font-weight: 600; color: #fff;}

#middle {margin: 0 auto; width: auto; height: 175px; margin-top: 89px; text-align: center;}
#middle span {font-size: 0.7em; color: white; word-wrap: break-word; max-width: 100px;}
.icon_location {width: auto; float: left; padding: 0 0 0 60px; height: 164px;}
.icon_location span {display: block;}

/** Footer author **/
.footer-author {background: #0C0C0C; z-index: 999;}
.footer-author .credit {padding: 10px 0; color: #fff; font-size: .8em; margin: 0; text-align: right; margin-right: 25px;}
.footer-author .credit img {width: 180px; filter: grayscale(1); transition: .5s ease-in-out;}
.footer-author .credit img:hover, .footer-author .credit img:active {filter: grayscale(0);}

/** White box content with title **/
.white_container_title {background-color: #fff; margin-top: 80px; padding: 30px 0;}
.transparent_container {background-color: rgba(255, 255, 255, .8); margin-bottom: 80px; padding-left: 60px; padding-right: 60px; padding-bottom: 80px;}
.transparent_container_contact_us {background-color: rgba(255, 255, 255, .8); margin-bottom: 80px; padding-left: 60px; padding-right: 60px; padding-bottom: 0;}

/** Bottom and top dots **/
.dots_container_top_right {height: 500px;}
.dots_container_top_right .right_dots {position: absolute; right: 0; top: 0;}
.dots_container_bottom_left {height: 500px;}
.dots_container_bottom_left .left_dots {position: absolute; z-index: -1; top: 0; transform: translateX(-270px) translateY(-290px);}

/** Content area **/
.white_container {background-color: #fff; padding: 80px 60px; margin: 60px 0;}
.cyan_container {background-color: #4d9dae;}
.velvet_container {background-color: #772822;}
.blue_container {background-color: #004b93;}
.transparent_white_container {background-color: rgba(255, 255, 255, .8); padding: 80px 60px; margin: 60px 0;}
.content-icon-container-top {height: 135px;}
.content-icon-container-top-left {height: 135px;}
.content-icon-container-top .book-icon {position: absolute; right: 217px; bottom: -42px;}
.content-container .img-container {padding-left: 40px !important;}
.content-icon-container-bottom {height: 235px; background-size: cover !important;}
.content-icon-container-bottom .star-icon {position: absolute; left: 75px; top: -110px;}

/** Staff **/
.staff-image {padding: 1.8em;}
.pvida-selector-container {min-height: 610px;}
.dropdown-menu.show {display: block; border-radius: 0; background-color: #eeeef5; color: #9d9d9f; font-size: 1em;}
.dropdown-menu a {color: #9d9d9f;}
.nav-link.dropdown-toggle::after {display: none;}
.dropdown-toggle-wide::after {display: none;}

.ack-form .form-control {
  text-transform: none;
}

.ack-form .form-control.invalid {
  border-color: #dc3545;
}

@media (min-width: 425px) {
    .shield-icon-blue, .shield-icon-green, .shield-icon-cyan, .shield-icon-red, .shield-icon-purple, .shield-icon-greenish {padding: 120px 15px; margin: 60px 0; overflow: auto; border-radius: 30px 30px 180px 180px; box-sizing: content-box;}
}
@media (max-width: 988px) {
    h1 {color: #cc3333; font-family: 'Abolition', sans-serif; font-size: 3.2em;}
    #secMainlogo {display: none;}
    .page-title {color: #fff; padding: 130px 0 65px 0; position: relative !important; margin-left: 0 !important;}
    .health-container {min-height: 180px; background: url(/project-vida/assets/img/banner-oral-health.jpg) no-repeat center center; background-size: cover;}
    .default-button {font-family: futura-pt, sans-serif; font-weight: 300; font-style: normal; background-color: #694d9e; color: #fff; padding: 15px 20px; box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2); text-align: center; text-decoration: none; text-transform: uppercase; margin: 12px;}
    .mid-nav {background-color: #0D7793; transform: translate(0%, 0%);}
    .nav-link.dropdown-toggle::after {display: inline-block;}
    .nav-link:hover {color: #E6E6E6;}
    .bottom-nav-text {color: #fff; font-family: futura-pt, sans-serif; font-weight: 200; font-style: normal; letter-spacing: 0.04em; font-size: 0.8em; text-align: left; text-decoration: none; text-transform: uppercase;}
    .navbar {padding-top: 10px;}
    .navbar-brand {padding-top: 0.3125rem; padding-bottom: 0.3125rem; padding-left: 10px; margin-right: 5rem; font-size: 1.25rem; align-content: center; text-decoration: none; white-space: nowrap; overflow: hidden;}
    .alert_nav {display: block; text-decoration: none; text-align: center; max-width: 2000px;}
    .alert_title {color: #fff; font-family: futura-pt, sans-serif; font-size: 0.6em; line-height: 1.6em; text-align: center; text-decoration: none; font-weight: bolder;}
    .alert_content {color: #fff; font-family: futura-pt, sans-serif; font-size: 0.4em; line-height: 1.6em; text-align: center; text-decoration: none; font-weight: bolder;}
    .mid-nav {padding-bottom: 0 !important;}
    .mid-nav-text {color: #fff; font-family: futura-pt, sans-serif; font-weight: 200; font-style: normal; letter-spacing: 0.04em; font-size: 1.2rem; text-align: left; text-decoration: none; text-transform: uppercase;}
    .footer-nav-text {color: #000; font-family: futura-pt, sans-serif; font-weight: 200; font-style: normal; letter-spacing: 0.04em; font-size: 1.2rem; text-align: center; text-decoration: none; text-transform: uppercase;}
    .search-input {display: none;}
    .disclaimer-text {font-family: futura-pt, sans-serif; text-decoration: none; letter-spacing: 1.5px; line-height: 1.6em; color: #000; font-size: 0.7em;}
    .service_summary {color: #525252; font-weight: 300; font-size: 1.1em; margin-top: 10px !important; padding: 0 10px;}
    .red-content-button {background-color: #e34929; color: #fff; padding: 20px 10px; border: none; box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.3); text-align: center; text-decoration: none; font-weight: bold; font-size: 0.7em; display: inline-block; transition: box-shadow 0.3s ease;}
    .green-content-button {background-color: #408540; color: #fff; padding: 20px 10px; border: none; box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.3); text-align: center; text-decoration: none; font-weight: bold; font-size: 0.7em; display: inline-block; transition: box-shadow 0.3s ease;}
    .accordion {margin: 0 !important;}
    .transparent_container {background-color: rgba(255, 255, 255, .8); margin-bottom: 80px; padding-left: 0; padding-right: 0; padding-bottom: 80px;}
    .white_container_title {background-color: #fff; margin-top: 65px; padding: 30px 0;}
    .transparent_container_contact_us {background-color: rgba(255, 255, 255, .8); margin-bottom: 80px; padding-left: 20px; padding-right: 20px; padding-bottom: 0;}
    .alert_title {color: #fff; font-family: futura-pt, sans-serif; font-size: 0.8em; line-height: 1.6em; text-align: center; text-decoration: none; font-weight: bolder;}
    .alert_content {color: #fff; font-family: futura-pt, sans-serif; font-size: 0.6em; line-height: 1.6em; text-align: center; text-decoration: none; font-weight: bolder; padding-left: 2px; padding-right: 2px;}
    .service_summary {color: #525252; font-weight: 300; font-size: 1.1em; margin-top: 10px !important; padding: 0 10px;}
    .white_extra_bold_text {color: #fff; font-weight: bolder; text-transform: uppercase; font-family: futura-pt, sans-serif; font-size: 0.9em; line-height: 1em;}
}
@media (min-width: 768px) {
    .shield-icon-blue, .shield-icon-green, .shield-icon-cyan, .shield-icon-red, .shield-icon-purple, .shield-icon-greenish {padding: 120px 15px; margin: 60px 0; overflow: auto; border-radius: 30px 30px 180px 180px; box-sizing: content-box;}
}
@media (min-width: 992px) {
    .shield-icon-blue, .shield-icon-green, .shield-icon-cyan, .shield-icon-red, .shield-icon-purple, .shield-icon-greenish {padding: 120px 60px; margin: 60px 60px; overflow: auto; border-radius: 30px 30px 180px 180px; box-sizing: content-box; align-content: center;}
    .pvida-selector-container {min-height: 610px; display: none;}
}
@media (min-width: 1200px) {
    .site-header a {font-size: 1.2rem;}
}
@media (max-width: 767.98px) {
    .navbar-nav.mid-nav {justify-content: flex-end !important;}
}

@media(max-width:992px){
	.staff-image{padding: 4em}
	.carousel{margin-top: 0px;}
	.alert-header{background-color: #B69933; }
	.top-nav-text{z-index: 999; color: #ffffff; font-family: futura-pt, sans-serif; font-size: 0.8em; text-align: center; text-decoration: none; font-weight: bolder; text-transform:uppercase;}
	.mid-nav-sidemenu{margin-bottom: 10px;}
	.mid-nav {background-color: #0D7793; transform: translate(0%, 0%);}
	.text-bg-dark {color: #d3b9b3 !important;}
	.bottom-nav-text {color: #fff;  font-family: futura-pt, sans-serif; font-size: 1.0em; text-align: left; text-decoration: none; text-transform: uppercase;}
	.input-group{display: none;} /* hides the search bar */
	.default-button{background-color: #694d9e; color: #FFF; padding: 10px 10px; box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.3); text-align: center; text-decoration: none; font-weight: bold; text-transform: uppercase; margin: 40px;}
	.footer-logo{padding: 0px 170px; width: 100%;}
	.awards-section{padding-top: 10px !important;}
	.bottom-item-menu{padding-left: 0px;}
}
