@font-face {
  font-family: "nunito-sans";
  src: url("../font/NunitoSans-Regular.ttf");
  font-display: swap;
}

@font-face {
  font-family: "nunito-sans-bold";
  src: url("../font/NunitoSans-Bold.ttf");
  font-display: swap;
}

.grecaptcha-badge {
  z-index: 99999;
  display: block !important;
}

:root {
  --size-max-width: 1100px;
  --color-blue: #112c3f;
  --color-blue-dark: #000c1d;
  --color-white: #dfdfe5;
  --color-red: #ff6a07;
  --font-normal: nunito-sans;
  --font-title: nunito-sans-bold;
  --size-normal: 1rem;
  --size-normal3: 0.8rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.375s ease;
  font-family: var(--font-normal);
  color: var(--color-white);
  text-decoration: none;
}

.do-gradient-footer {
  background: linear-gradient(
    rgba(0, 0, 0, 0.0),
    var(--color-blue-dark)
  );
  height: 80px;
}

.do-page-wrapper.footer {
  max-width: var(--size-max-width);
  width: 100%;
  margin: 0 auto;
  z-index: 1;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 30px;
}

.do-footer-section {
  background-color: var(--color-blue-dark);
  padding: 30px 0;
}

.do-footer-wrapper {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 50px;
}

.do-footer-item {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}

.do-footer-logo {
  grid-column-start: span 4;
  width: 215px;
  height: 100%;
}

.do-footer-media {
  width: 30px;
  height: 30px;
}

.do-footer-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-self: center;
  gap: 20px;
}

.do-footer-disclaimer {
  color: var(--color-red);
  font-size: var(--size-normal3);
  text-align: center;
}

.do-footer-link {
  font-size: var(--size-normal);
  font-family: var(--font-title);
}

.do-footer-coralis {
  font-size: var(--size-normal);
}

/* SMALL DESKTOP */
@media screen and (max-width: 1100px) {
  :root {
    --size-max-width: 850px;
  }
}

/* TABLET*/
@media screen and (max-width: 855px) {
  :root {
    --size-max-width: 700px;
  }

  .do-footer-media {
    width: 25px;
    height: 25px;
  }
}

/* MOBILE PHONE*/
@media screen and (max-width: 540px) {
  :root {
    --size-max-width: 450px;
  }

  .do-footer-wrapper {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .do-footer-nav {
    gap: 20px 0;
  }
}

@media screen and (max-width: 430px) {
  :root {
    --size-max-width: 380px;
  }
}

/* MOBILE PHONE*/
@media screen and (max-width: 390px) {
  :root {
    --size-max-width: 300px;
  }
}