@font-face {
  font-family: "Helvetica";
  src: url("Helvetica.ttf");
}

@font-face {
  font-family: "Marcellus";
  src: url("Marcellus-Regular.ttf");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  transition: all 0.3s;
}

#loader {
    display: none;
}

html {
    font-size: 15px;
}

a {
    text-decoration: none;
    color: #00447c;
    cursor: pointer;
}

.fw-600 {
    font-weight: 600;
}

.c-darkblue {
    color: #00447c;
}

.c-white {
    color: #fff;
}

.c-gold {
    color: #cda053;
}

.hover-underline:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: #cda053;
}

.header-top {
    height: 70px;
    background-color: #fbf8f2;
}

.header-logo, .footer-logo {
  width: 175px;
}

.contact-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.hero {
  height: 240px;
}

.hero-bg-image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}

.gradient-filter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background-image: linear-gradient(
    to left,
    transparent 0%,
    #cda0537e 50%,
    #cda0537e 75%,
    #009fe3d8 100%
  );
}

.dark-filter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.hero-content {
  position: relative;
  z-index: 12;
  padding-bottom: 20px;
}

.hero h1 {
  font-family: Marcellus, "Inter", sans-serif !important;
  font-size: 36px;
  font-weight: 400;
}

.hero h1.hero-title-sm {
  font-size: 24px;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
  row-gap: 1.25rem;
}
.card-grid-centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  display: flex;
  flex-direction: column;
  border: 5px solid #fff;
  border-radius: 10px;
  overflow: hidden;
  width: auto;
  height: auto;
  box-shadow: 0 0 5px #d9d9d9;
}

.card:hover {
    box-shadow: 0 0 15px #00447c7c;
}

.card-grid-centered .card {
  width: 250px;
}

.card-image {
  width: 100%;
  aspect-ratio: 371 / 259;
  position: relative;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
}

.card-image .icon-bg {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 30px;
  height: 30px;
  padding: 5px;
}

.card-image .icon-bg img {
  max-height: 100%;
}

.card-title {
  flex-grow: 1;
  background-color: #fbf8f2;
  color: #00447c;
  height: auto;
  padding: 1rem;
  margin-bottom: 0;
  border-radius: 0 0 10px 10px;
}

.card:not(.card-news) .card-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card-title h5 {
  font-size: 16px;
}

.card:hover .card-title {
  background-color: #00447c;
  color: #fff;
}

.card:hover .card-title h5 {
  color: #cda053;
}

section.first-content {
  position: relative;
  z-index: 15;
  margin: -120px 0 0 0;
  padding-top: 8rem;
  background-image: linear-gradient(to bottom, transparent 0, #fff 120px, #fff);
}

.gradient-blue-bottom {
  background-image: linear-gradient(to top, #00447c 0%, transparent 60%);
}

.position-absolute-full {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.single-nav a {
  color: #00447c;
  border-radius: 1rem;
  padding: 1rem 1.5rem;
  display: block;
  width: 85%;
}
.single-nav a:hover,
.single-nav a:active,
.single-nav a.active {
  font-weight: 600;
}
.single-nav a:active,
.single-nav a.active {
  background-color: #fbf8f2;
}

table.dataTable {
  padding-top: 1.5rem;
  margin-bottom: 2rem;
  table-layout: auto !important;
}

.scrollbar-top {
  overflow-x: scroll;
  overflow-y: hidden; /* hide vertical scrollbar */
  height: 16px;       /* scrollbar height */
  margin-bottom: 16px;
}

.scrollbar-top .scroll-content {
  height: 1px; /* invisible filler */
}

.dataTables_wrapper {
  overflow-x: scroll;
  white-space: nowrap;
}

table th, table td {
  white-space: pre-wrap;
  min-width: 180px;
  max-height: 300px;
}

footer {
  background-color: #2b2b2b;
  color: #fff;
  font-size: 14px;
}

footer > .container {
  padding: 2rem 0;
}

.footer-section-border {
  border-bottom: 1px solid #ffffff25;
}

footer .copyright img {
  height: 50px;
  transform: translate(-8px, -6px);
}

@media screen and (min-width: 992px) {
    .card-grid-centered .card {
        width: 400px;
    }
    .header-logo, .footer-logo {
      width: 200px;
    }
}

@media screen and (min-width: 1400px) {
  .hero h1.hero-title-sm {
    font-size: 36px;
  }
}

@media screen and (min-width: 1800px) {
    .container {
        max-width: 1720px;
    }

    .hero h1 {
        font-size: 64px;
    }

    .hero h1.hero-title-sm {
      font-size: 48px;
    }

    .gradient-filter {
        background-image: linear-gradient(
            to left,
            transparent 0%,
            #cda0537e 50%,
            #cda0537e 75%,
            #009fe3d8 100%
        );
    }

    .hero:not(.hero-main) {
        height: 444px;
    }

    .hero:not(.hero-main) .hero-content {
        padding-bottom: 60px;
    }

    .card {
        border-width: 8px;
    }

    .card-title {
        padding: 2rem 1.5rem;
    }
    .card-title h5 {
        font-size: 24px;
        line-height: 32px;
    }

    .list-page.first-content {
        margin: -140px 0 0 0;
        padding-top: 6rem;
        background-image: linear-gradient(
        to bottom,
        transparent 0,
        #fff 140px,
        #fff
        );
    }
}