@import url("https://fonts.googleapis.com/css2?family=KoHo:wght@400;500;600;700&display=swap");


#kinara-site-footer {

  --kf-deep: #173642;

  --kf-ink: #20363f;

  --kf-muted: #607a75;

  --kf-sage: #dfece6;

  --kf-sage-strong: #b9d5ca;

  --kf-sky: #eaf6fb;

  --kf-blue: #86b9c7;

  --kf-sand: #faf5eb;

  --kf-line:
    rgba(87, 139, 130, 0.16);


  position: relative;

  width: 100%;

  overflow: hidden;

  color: var(--kf-ink);


  /*
    Starts from the same pale sage used by the
    sections above and gently moves into sand.
  */

  background:

    radial-gradient(
      circle at 10% 12%,
      rgba(185, 213, 202, 0.38),
      transparent 30%
    ),

    radial-gradient(
      circle at 90% 78%,
      rgba(134, 185, 199, 0.16),
      transparent 28%
    ),

    linear-gradient(
      180deg,
      #e7f0ed 0%,
      #eef6f3 42%,
      #f7f7ef 72%,
      var(--kf-sand) 100%
    );


  /*
    No hard line between the previous
    section and the footer.
  */

  border-top: 0;

  font-family:
    "KoHo",
    "Segoe UI",
    Arial,
    sans-serif;

}


#kinara-site-footer,
#kinara-site-footer * {

  box-sizing: border-box;

}


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

#kinara-site-footer .kf-shell {

  position: relative;

  z-index: 2;

  width:
    min(
      1180px,
      calc(100% - 32px)
    );

  margin:
    0 auto;

  padding:
    48px 0 34px;

  display: grid;

  grid-template-columns:
    minmax(220px, 0.8fr)
    minmax(0, 2fr);

  gap: 42px;

}


/* =========================================================
   BRAND
========================================================= */

#kinara-site-footer .kf-name {

  color:
    var(--kf-deep);

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

  font-size:
    clamp(
      1.6rem,
      3vw,
      2.25rem
    );

  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.12em;

  text-decoration: none;

}


#kinara-site-footer .kf-brand p {

  max-width: 290px;

  margin:
    12px 0 18px;

  color:
    var(--kf-muted);

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

  font-size: 1rem;

  font-weight: 400;

  line-height: 1.55;

}


/* =========================================================
   BOOK NOW
========================================================= */

#kinara-site-footer .kf-book {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: max-content;

  min-height: 42px;

  padding:
    9px 17px;

  border:
    1px solid
    var(--kf-deep);

  border-radius: 12px;

  background:
    var(--kf-deep);

  color: #ffffff;

  text-decoration: none;

  font-size: 0.9rem;

  font-weight: 700;

  box-shadow:
    0 10px 24px
    rgba(23, 54, 66, 0.12);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;

}


#kinara-site-footer .kf-book:hover {

  background:
    #4f7a72;

  transform:
    translateY(-2px);

  box-shadow:
    0 14px 28px
    rgba(23, 54, 66, 0.17);

}


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

#kinara-site-footer .kf-links {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 28px;

}


#kinara-site-footer .kf-group {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 10px;

}


#kinara-site-footer .kf-group strong {

  margin-bottom: 4px;

  color:
    #4f7a72;

  font-size: 0.74rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}


#kinara-site-footer .kf-group a {

  position: relative;

  color:
    var(--kf-ink);

  font-size: 0.92rem;

  font-weight: 500;

  line-height: 1.35;

  text-decoration: none;

  transition:
    color 0.22s ease,
    transform 0.22s ease;

}


#kinara-site-footer .kf-group a::after {

  content: "";

  position: absolute;

  left: 0;

  right: 100%;

  bottom: -3px;

  height: 1px;

  background:
    var(--kf-blue);

  transition:
    right 0.26s ease;

}


#kinara-site-footer .kf-group a:hover {

  color:
    #4f7a72;

  transform:
    translateY(-1px);

}


#kinara-site-footer .kf-group a:hover::after {

  right: 0;

}


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

#kinara-site-footer .kf-bottom {

  position: relative;

  z-index: 2;

  padding:
    14px 16px 16px;

  border-top:
    1px solid
    rgba(
      87,
      139,
      130,
      0.11
    );

  background:
    rgba(
      255,
      255,
      255,
      0.22
    );

  color:
    var(--kf-muted);

  font-size: 0.77rem;

  text-align: center;

}


/* =========================================================
   VERY SUBTLE AMBIENT SHAPES
========================================================= */

#kinara-site-footer::before {

  content: "";

  position: absolute;

  left: -90px;

  bottom: -130px;

  width: 280px;

  height: 280px;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(185, 213, 202, 0.24),
      transparent 70%
    );

  pointer-events: none;

}


#kinara-site-footer::after {

  content: "";

  position: absolute;

  right: -90px;

  top: -110px;

  width: 260px;

  height: 260px;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(134, 185, 199, 0.16),
      transparent 70%
    );

  pointer-events: none;

}


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

@media (max-width: 760px) {

  #kinara-site-footer .kf-shell {

    grid-template-columns:
      1fr;

    gap: 30px;

    padding:
      40px 0 28px;

  }


  #kinara-site-footer .kf-brand {

    text-align: center;

  }


  #kinara-site-footer .kf-brand p {

    margin-left: auto;

    margin-right: auto;

  }


  #kinara-site-footer .kf-book {

    margin-inline: auto;

  }


  #kinara-site-footer .kf-links {

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

    text-align: center;

  }


  #kinara-site-footer .kf-group {

    align-items: center;

  }


  #kinara-site-footer .kf-group:last-child {

    grid-column:
      1 / -1;

  }

}


@media (max-width: 460px) {

  #kinara-site-footer .kf-links {

    grid-template-columns:
      1fr;

  }


  #kinara-site-footer .kf-group:last-child {

    grid-column:
      auto;

  }

}