:root {
  --main-color: #4ad9ca;
  --secondary-color: #1a2847;
  --dark-color: #2a9b8f;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
html {
  margin: 0;
  padding: 0;
}

h1,
h2,
section {
  scroll-margin-top: 100px;
}
.flex {
  display: flex;
}

.flex img {
  width: 500px;
  margin-left: auto;
}

.sticky {
  position: sticky;
}

.card img {
  height: 300px;
  border: 3px solid #f0fafa;
}

.card img:hover {
  border: 3px solid var(--dark-color);
}

.card-body {
  background-color: #f0fafa;
}

.bg-image {
  background-image: url(/images/tealHeroImage.webp);
  background-size: cover;
  padding: 2rem;
}

.bg-image-footer {
  background-position: bottom;
}

.text-shadow {
  text-shadow: 2px 2px 4px black;
}

.cta-section {
  background: var(--main-color);
  padding: 2rem;
  border-left: 5px solid var(--secondary-color);
}

@media (max-width: 600px) {
  .cta-section {
    border: none;
  }
}

.cta-section p,
.cta-section ul,
.accordion-body p {
  max-width: 90ch;
}

footer p {
  background-color: var(--dark-color);
  color: white;
}

/* Navigation */

.navbar-toggler {
  border-color: white;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Accordion  */
.accordion-button {
  background-color: var(--dark-color);
  color: white;
}

.accordion-button:not(.collapsed) {
  background-color: var(--main-color);
  color: white;
}

.accordion-body {
  background-color: #f0fafa;
}

/* CTA section and  */