/* A3SQL homepage — hero band, feature cards, CTA (pattern: quarto.org index.css) */

.hero-banner {
  position: relative;
  display: flex;
  justify-content: center;
}

body.quarto-light .hero-banner {
  background-color: rgb(240, 245, 249);
}

.hero-banner h1 {
  font-size: 2.5rem;
  font-weight: 600;
}

.hero-banner h3 {
  font-size: 1.25rem;
  font-weight: 400;
}

.hero-banner ul {
  font-size: 1.1rem;
}

body.quarto-light .alt-background {
  background-color: rgb(247, 249, 251);
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}

body.quarto-dark .hero-banner {
  background-color: rgb(30, 34, 40);
}

body.quarto-dark .alt-background {
  background-color: rgb(24, 27, 32);
  border-top: 1px solid #343a40;
  border-bottom: 1px solid #343a40;
}

.hero-text ul {
  margin-top: 1rem;
  padding-left: 1.25rem;
}

@media (min-width: 800px) {
  .features {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .feature {
    width: calc(33% - 30px);
    margin-right: 30px;
    margin-bottom: 30px;
  }
}

.feature h3 {
  font-size: 1.15rem;
  font-weight: 600;
}

.feature p {
  font-size: 0.95rem;
}

.learn-more {
  margin-top: 0.5rem;
}

.get-started {
  display: flex;
  justify-content: center;
}

.get-started .btn {
  width: auto;
  min-width: 240px;
}

/* Brand colour for the primary action button */
.btn-action-primary {
  background-color: #39729e;
  border-color: #39729e;
  color: #fff;
}

.btn-action-primary:hover,
.btn-action-primary:focus {
  background-color: #2f5e83;
  border-color: #2f5e83;
  color: #fff;
}

.btn-action-secondary {
  background-color: transparent;
  border-color: #39729e;
  color: #39729e;
}

.btn-action-secondary:hover,
.btn-action-secondary:focus {
  background-color: #39729e;
  color: #fff;
}
/* Closing CTA band: separate from the features band with a top border */
.get-started {
  border-top: 1px solid #dee2e6;
}
body.quarto-dark .get-started {
  border-top: 1px solid #343a40;
}