@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap");

/* =========================================================
   FOOTER
========================================================= */

.footer {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(212, 162, 76, 0.08),
      transparent 42%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(70, 110, 170, 0.07),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #eaf2ff 0%,
      #edf3fb 50%,
      #f4ecdc 100%
    );

  border-top: 4px solid #d4a24c;

  padding: 52px 80px 20px;

  color: #1e3a5f;
  font-family: "Inter", sans-serif;
}


/* =========================================================
   BACKGROUND EFFECTS
========================================================= */

.footer::before {
  content: "";
  position: absolute;

  width: 350px;
  height: 350px;

  top: -180px;
  left: -120px;

  background: radial-gradient(
    circle,
    rgba(212, 162, 76, 0.08),
    transparent 70%
  );

  filter: blur(15px);
  pointer-events: none;
}

.footer::after {
  content: "";
  position: absolute;

  width: 400px;
  height: 400px;

  right: -180px;
  bottom: -250px;

  background: radial-gradient(
    circle,
    rgba(70, 110, 170, 0.07),
    transparent 70%
  );

  filter: blur(15px);
  pointer-events: none;
}


/* =========================================================
   LOGO + COLUMNS
========================================================= */

.footer-main {
  width: 100%;

  display: flex;
  align-items: flex-start;

  gap: 65px;

  position: relative;
  z-index: 1;
}


/* =========================================================
   LOGO
========================================================= */

.footer-logo-wrap {
  flex: 0 0 180px;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.footer-logo {
  width: 125px;
  height: auto;

  display: block;
  object-fit: contain;
}


/* =========================================================
   FOOTER CONTENT
========================================================= */

.footer-content {
  flex: 1;

  display: grid;

  grid-template-columns:
    1.05fr
    1.2fr
    0.9fr
    0.9fr
    1.35fr;

  gap: 35px;
}


/* =========================================================
   COLUMN
========================================================= */

.footer-column {
  min-width: 0;
}


/* =========================================================
   COLUMN TITLE
========================================================= */

.footer-column-title {
  position: relative;

  display: inline-block;

  margin: 0 0 15px;
  padding-bottom: 8px;

  color: #12365f;

  font-family: "Plus Jakarta Sans", sans-serif;

  font-size: 15px;
  font-weight: 700;

  line-height: 1.3;
}

.footer-column-title::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 78%;
  height: 1.5px;

  background: #9baabd;
}


/* =========================================================
   LINKS
========================================================= */

.footer-links {
  list-style: none;

  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;

  gap: 8px;
}

.footer-links li {
  margin: 0;
  padding: 0;
}


/* =========================================================
   LINK BUTTON
========================================================= */

.footer-link-button {
  appearance: none;
  -webkit-appearance: none;

  border: none;
  outline: none;

  background: transparent;

  padding: 0;
  margin: 0;

  color: #244a76;

  font-family: "Inter", sans-serif;

  font-size: 13px;
  font-weight: 400;

  line-height: 1.5;

  text-align: left;

  cursor: pointer;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.footer-link-button:hover {
  color: #d4a24c;
  transform: translateX(2px);
}

.footer-link-button:focus {
  outline: none;
}


/* =========================================================
   BOTTOM
========================================================= */

.footer-bottom {
  position: relative;
  z-index: 1;

  width: 100%;

  border-top: 1px solid rgba(30, 58, 95, 0.18);

  margin-top: 42px;
  padding-top: 17px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.footer-copyright-text {
  margin: 0;

  color: #466383;

  font-size: 11.5px;
  line-height: 1.5;
}


/* =========================================================
   BOTTOM LINKS
========================================================= */

.footer-bottom-links {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 8px;
}

.footer-bottom-link {
  appearance: none;
  -webkit-appearance: none;

  border: none;
  outline: none;

  background: transparent;

  padding: 0;
  margin: 0;

  color: #466383;

  font-family: "Inter", sans-serif;

  font-size: 11.5px;

  cursor: pointer;

  transition: color 0.2s ease;
}

.footer-bottom-link:hover {
  color: #d4a24c;
}

.footer-bottom-link:focus {
  outline: none;
}

.footer-bottom-divider {
  color: rgba(30, 58, 95, 0.35);
  font-size: 11px;
}


/* =========================================================
   1200px
========================================================= */

@media (max-width: 1200px) {
  .footer {
    padding: 48px 50px 20px;
  }

  .footer-main {
    gap: 40px;
  }

  .footer-logo-wrap {
    flex-basis: 150px;
  }

  .footer-content {
    gap: 25px;
  }
}


/* =========================================================
   1000px
========================================================= */

@media (max-width: 1000px) {
  .footer {
    padding: 45px 35px 18px;
  }

  .footer-main {
    gap: 30px;
  }

  .footer-logo-wrap {
    flex-basis: 125px;
  }

  .footer-logo {
    width: 110px;
  }

  .footer-content {
    gap: 20px;
  }

  .footer-column-title {
    font-size: 14px;
  }

  .footer-link-button {
    font-size: 12px;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {
  .footer {
    padding: 35px 25px 18px;
  }

  /* Logo stays centered on mobile */
  .footer-main {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 28px;
  }

  .footer-logo-wrap {
    flex: none;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .footer-logo {
    width: 105px;
  }

  .footer-content {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px 20px;
  }

  .footer-bottom {
    flex-direction: column;

    align-items: flex-start;

    gap: 10px;
  }

  .footer-bottom-links {
    justify-content: flex-start;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {
  .footer {
    padding: 32px 18px 16px;
  }

  .footer-main {
    gap: 24px;
  }

  /* CENTER LOGO */
  .footer-logo-wrap {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .footer-logo {
    width: 95px;
  }

  /* 2 COLUMN MOBILE LAYOUT */
  .footer-content {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 20px;
    row-gap: 24px;

    align-items: start;
  }

  .footer-column-title {
    font-size: 14px;

    margin-bottom: 14px;
  }

  .footer-link-button {
    font-size: 12px;
  }

  .footer-links {
    gap: 7px;
  }

  /* Compliance normal LEFT position */
  .footer-column:last-child {
    grid-column: auto;

    justify-self: start;

    width: auto;

    text-align: left;
  }

  .footer-column:last-child .footer-column-title {
    text-align: left;
  }

  .footer-column:last-child .footer-column-title::after {
    left: 0;
    transform: none;
  }

  .footer-column:last-child .footer-links {
    align-items: flex-start;
  }

  .footer-column:last-child .footer-link-button {
    text-align: left;
  }

  /* BOTTOM */
  .footer-bottom {
    margin-top: 28px;

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 10px;
  }

  .footer-copyright-text {
    text-align: center;
  }

  .footer-bottom-links {
    flex-direction: column;

    align-items: center;

    gap: 5px;
  }

  .footer-bottom-divider {
    display: none;
  }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {
  .footer {
    padding: 30px 14px 15px;
  }

  .footer-logo {
    width: 90px;
  }

  .footer-content {
    column-gap: 12px;
  }

  .footer-column-title {
    font-size: 13px;
  }

  .footer-link-button {
    font-size: 11px;
  }

  .footer-bottom {
    margin-top: 25px;
  }

  .footer-copyright-text,
  .footer-bottom-link {
    font-size: 10px;
  }
}