body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  scroll-behavior: smooth;
}

main {
  background-color: #ffffff;
}

.hero-image {
  max-width: 90%;
}

.navbar-brand span {
  letter-spacing: 0.03em;
}
#date {color: #000;}
section {
  scroll-margin-top: 80px;
}

.btn-primary {
  background-image: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: none;
}

.btn-primary:hover {
  background-image: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.btn-outline-secondary:hover {
  color: #0f172a;
  background-color: #e5e7eb;
}
.bg-light {
  background-color: rgb(33 44 80) !important;
  color: #fff;
}
p {
  text-align: justify;
}

footer {
  background-color: #f9fafb;
}
.container-view {
  --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}
.navbar>.container-main {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}
.container-main {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 318px) and (max-width: 820px) {
.navbar-nav {
  padding: 10px 20px;
    background: rgb(33 44 80);
    font-size: 24px;
}
.navbar-nav li a {
  color: #fff;
}
.dropdown-menu {
  background: rgb(33 44 80);
  font-size: 20px;
}

}

@media (min-width: 992px){
.container-view {
  max-width: 960px;
}
.container-main, .container-lg, .container-md, .container-sm {
  max-width: 960px;
}
.container {
    max-width: 960px;
}
.nav-item {
  font-size: 1.2rem;;
}
.navbar-expand-lg .navbar-nav .nav-link {
  color: #ff9d37;
  font-weight: 600;
}

}

@media (min-width: 1200px) {
.container-view {
  max-width: 1100px !important;
}
.container-main, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1080px;
}
.container {
    max-width: 920px;
}


}

/* Left align mobile first-view buttons */
.hero-btns {
  justify-content: flex-start !important;
  text-align: left !important;
}

@media (min-width: 576px) {
  /* On larger screens they appear side-by-side normally */
  .hero-btns {
    justify-content: flex-start;
  }
}