/*
---Imports
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

/*
---Variables
*/

:root {
  --font-serif: "Playfair Display", serif;
  --font-sans: "Inter", sans-serif;

  --slate-extralight: #eaf3f9;
  --slate-light: #5d6677;
  --slate: #3f4d66;
  --slate-dark: #2d3a51;
  --midnight: #111c2c;

  --grey-100: #6e6b66;
  --grey-75: #a6a29f;
  --grey-50: #d8dadb;
  --grey-25: #f3f5f6;

  --blue: #3488c7;
  --blue-light: #7cbeec;
  --blue-dark: #4c94ca;
  --blue-gradient: linear-gradient(
    270deg,
    var(--blue) 0%,
    var(--blue-light) 100%
  );
  --slate-gradient: linear-gradient(
    180deg,
    var(--slate-dark) 0%,
    var(--midnight) 100%
  );

  --green: #2f8928f2;
  --red: #f34d0b;

  --card-shadow: 0 4px 24px -4px #1b243214, 0 1px 4px -1px #1b24320a;
}

/*
---Global
*/

html {
  font-size: 62.5%;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--midnight);
  font-size: 1.6rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 {
  font-size: 5.4rem;
  line-height: 0.9;
}

h2 {
  font-size: 4rem;
}

h3 {
  font-size: 3.2rem;

  &.small {
    text-transform: uppercase;
    font-size: 1.4rem;
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: 0.1em;
  }
}

h4 {
  font-size: 2rem;
}

h5 {
  font-size: 2rem;
}

h6 {
  font-size: 1.8rem;
}

p {
  margin-bottom: 20px;
}

a {
  transition: all 0.25s ease-in-out;

  &:focus {
    outline: none;
  }
}

.gradient-blue {
  background-image: var(--blue-gradient);
  background-clip: text;
  color: transparent;
}

.text-large {
  font-size: 1.8rem;
}

.text-small {
  font-size: 1.2rem;
}

.blue {
  color: var(--blue);
}

.gray {
  color: var(--slate-light);
}

.subheading {
  color: var(--blue);
  font-size: 1.4rem;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.1em;
}

button,
.button,
input[type="submit"] {
  appearance: none;
  border: none;
  transition: all 0.25s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1.4rem;
  border-radius: 8px;
  background: var(--blue);
  padding: 10px 20px;
  color: #fff;
  border: 1px solid transparent;

  &:active,
  &:focus,
  &:hover {
    background: var(--blue-dark);
    color: #fff !important;
    text-decoration: none;
  }

  &.outline {
    border-color: var(--grey-50);
    background: rgba(255, 255, 255, 0.2);

    &:active,
    &:focus,
    &:hover {
      background: rgba(255, 255, 255, 0.4);
    }
  }

  &.outline-dark {
    border-color: var(--grey-75);
    color: var(--grey-100);
    background: transparent;

    &:active,
    &:focus,
    &:hover {
      background: var(--grey-25);
      color: var(--grey-100) !important;
    }
  }

  &.outline-light {
    border-color: var(--blue);
    color: var(--blue);
    background: #fff;

    &:active,
    &:focus,
    &:hover {
      background: var(--blue-dark);
    }
  }

  &.large {
    font-size: 1.6rem;
    padding: 10px 40px;
  }

  &.arrow-icon {
    &:after {
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      background-image: url("../../images/icon-arrow-right.svg");
      background-size: contain;
      background-repeat: no-repeat;
      margin-left: 4px;
    }
  }
}

.card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--grey-50);
  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.1);
  padding: 24px;
}

.nav-tabs {
  li {
    a {
      border-bottom: 2px solid transparent;
      font-weight: 600;
      font-size: 1.4rem;

      &:hover,
      &:focus,
      &:active {
        border-color: transparent;
        background: transparent;
      }
    }

    .count {
      font-size: 1.2rem;
      font-weight: 400;
    }
  }

  li.active > a {
    border: 1px solid transparent;
    border-bottom: 2px solid var(--blue);

    &:hover,
    &:focus,
    &:active {
      border: 1px solid transparent;
      border-bottom: 2px solid var(--blue);
    }
  }
}

/*
---Header
*/

#header {
  background: var(--slate-dark);
  font-size: 1.4rem;

  a {
    color: #fff;
    font-weight: 500;

    &:hover {
      color: var(--blue);
      text-decoration: none;
    }
  }

  @media (max-width: 991px) {
    padding: 16px 0;
  }

  .header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;

    @media (max-width: 991px) {
      flex-direction: column;
    }

    .logo-link {
      margin-right: auto;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 24px;

      @media (max-width: 991px) {
        display: none;
      }
    }
  }

  .site-navigation {
    .navbar-collapse {
      padding: 0;
    }

    .navbar-default {
      border: none;
      background: none;
      margin: 0;
    }
  }

  #main-menu {
    float: none;
    display: flex;
    gap: 36px;
    margin: 0 auto;

    @media (max-width: 991px) {
      flex-direction: column;
      gap: 12px;
    }

    li {
      float: none;

      a {
        border-bottom: 2px solid transparent;
        padding: 22px 0;

        @media (max-width: 991px) {
          padding: 8px 0;
        }
      }
    }

    li.active {
      a {
        color: var(--blue);
        background: transparent;
      }
    }
  }

  .navbar-toggle {
    display: none;
    border: none;

    &:hover,
    &:focus {
      background: transparent;
    }

    @media (max-width: 991px) {
      display: block;
    }

    .icon-bar {
      background: var(--blue);
    }
  }

  .mobile-buttons {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }

  .navbar-collapse {
    border: none;

    &.collapse {
      display: block !important;

      @media (max-width: 991px) {
        display: none !important;

        &.in {
          display: block !important;

          .mobile-buttons {
            @media (max-width: 991px) {
              display: flex;
            }
          }
        }
      }
    }
  }

  .mobile-top-wrap {
    @media (max-width: 991px) {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }

  .site-navigation {
    @media (max-width: 991px) {
      width: 100%;
    }

    .navbar-default {
      min-height: 0;

      @media (max-width: 991px) {
        text-align: center;
        width: 100%;
      }
    }
  }

  .navbar-header {
    float: none;
  }
}

/*
---Footer
*/

#site-footer {
  background: var(--slate-dark);
  color: #fff;

  .menu-column {
    @media (max-width: 991px) {
      margin-top: 40px;
    }
  }
}

#footer-top {
  padding: 48px 0;
  font-size: 1.4rem;
  color: var(--grey-50);

  .top {
    margin-bottom: 4px;

    img {
      margin-bottom: 16px;
    }

    a {
      display: block;
      color: var(--grey-50);

      & + a {
        margin-top: 10px;
      }
    }

    a:active,
    a:focus,
    a:hover {
      text-decoration: none;
      color: var(--navy);
    }

    h5 {
      color: var(--blue);
      margin-bottom: 20px;
      text-transform: uppercase;
      font-size: 1.6rem;
    }
  }

  #footer-menu-1,
  #footer-menu-2,
  #footer-menu-3 {
    ul {
      padding-left: 0;
      list-style-type: none;
      margin-bottom: 16px;
    }

    li {
      margin-bottom: 16px;
    }
  }
}

#footer-disclaimer {
  padding: 24px 0;
  color: var(--grey-75);
  font-size: 1.2rem;

  hr {
    border-top: 1px solid var(--slate);
    margin-bottom: 30px;
  }
}

/*
---CTA
*/

#cta {
  padding: 120px 0;
  text-align: center;

  &.dark {
    background: var(--slate-gradient);

    h2 {
      color: #fff;
    }

    p {
      color: var(--grey-75);
    }
  }

  p {
    margin: 20px auto 40px auto;
    width: 500px;
    max-width: 100%;
  }

  .buttons {
    display: flex;
    gap: 16px;
    justify-content: center;

    @media (max-width: 479px) {
      flex-wrap: wrap;
    }

    a {
      @media (max-width: 479px) {
        width: 100%;
      }
    }
  }
}

/*
---404 Page
*/

.error404 {
  #content {
    border-bottom: 1px solid var(--slate-dark);
    padding: 120px 0;
    text-align: center;
    background: var(--midnight);
  }

  h1 {
    font-size: 12rem;
    color: var(--slate-light);
  }

  h3 {
    margin: 72px 0;
    font-family: var(--font-sans);
    color: var(--slate);
  }
}

/*
---Home
*/

.page-template-template-home {
  #hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;

    @media (max-width: 767px) {
      display: block;
      min-height: 0;
      padding: 120px 0;
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--slate-dark);
      opacity: 0.75;
      z-index: 1;
    }

    .hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .container {
      position: relative;
      z-index: 2;
    }

    h1 {
      color: #fff;
      margin-bottom: 30px;
    }

    p {
      font-size: 2rem;
      width: 600px;
      max-width: 90vw;
      color: var(--grey-25);
    }

    .buttons {
      display: flex;
      gap: 16px;

      @media (max-width: 479px) {
        flex-wrap: wrap;
      }

      a {
        @media (max-width: 479px) {
          width: 100%;
        }
      }
    }
  }

  #metrics {
    background: var(--midnight);
    padding: 60px 0;
    text-align: center;

    .metric-item {
      @media (max-width: 767px) {
        margin-bottom: 24px;
      }
    }

    h3 {
      color: var(--blue);
      margin: 0 0 6px;
      font-family: var(--font-sans);
    }

    p {
      margin: 0;
      color: var(--grey-75);
    }
  }

  #featured-in {
    background: var(--slate-extralight);
    text-align: center;
    padding: 40px 15px;

    h3 {
      color: var(--grey-100);
    }

    .logo-wrap {
      display: flex;
      gap: 48px;
      justify-content: center;
      align-items: center;
      padding: 40px 0;
      flex-wrap: wrap;

      @media (max-width: 767px) {
        display: block;
      }

      img {
        max-width: 220px;
        max-height: 40px;
        width: auto;
        opacity: 0.8;

        @media (max-width: 767px) {
          margin: 30px auto;
        }
      }
    }
  }

  #invest-ways {
    padding: 120px 0;
    text-align: center;

    h2 {
      margin: 20px 0;
    }

    .card-wrap {
      display: flex;
      gap: 30px;
      justify-content: center;
      margin-top: 50px;

      @media (max-width: 991px) {
        flex-wrap: wrap;
      }
    }

    .card {
      text-align: left;
      color: var(--grey-100);

      @media (max-width: 991px) {
        width: calc(50% - 15px);
      }

      @media (max-width: 600px) {
        width: 100%;
      }
    }

    .icon-box {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      background: var(--slate-extralight);
      display: flex;
      align-items: center;
      justify-content: center;

      svg path {
        fill: var(--blue);
      }
    }

    h4 {
      margin: 15px 0;
      color: var(--midnight);
    }

    p {
      font-size: 1.4rem;
    }

    ul {
      padding-left: 0;
      margin-left: 15px;
      font-size: 1.2rem;

      li {
        margin-bottom: 6px;
      }
    }
  }

  #hiw {
    padding: 120px 0;
    background: var(--slate-gradient);
    text-align: center;

    h2 {
      color: #fff;
      margin-bottom: 80px;
    }

    .step-column {
      h2 {
        color: var(--blue);
        margin-bottom: 20px;
      }

      h4 {
        color: #fff;
        margin: 0 0 15px 0;
      }

      p {
        color: var(--grey-75);
      }
    }

    a.button {
      margin-top: 40px;
    }
  }

  #family {
    background: var(--grey-25);
    text-align: center;
    padding: 40px 15px;

    h3 {
      color: var(--grey-100);
    }

    .logo-wrap {
      display: flex;
      gap: 48px;
      justify-content: center;
      align-items: center;
      padding: 40px 0;
      flex-wrap: wrap;

      @media (max-width: 767px) {
        display: block;
      }

      img {
        max-width: 220px;
        max-height: 40px;
        width: auto;
        opacity: 0.8;

        @media (max-width: 767px) {
          margin: 30px auto;
        }
      }
    }
  }
}

/*
---About
*/

.page-template-template-about {
  section {
    padding: 120px 0;

    h3.small {
      margin-bottom: 20px;
    }
  }

  #hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;

    @media (max-width: 767px) {
      display: block;
      min-height: 0;
      padding: 120px 0;
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--slate-dark);
      opacity: 0.75;
      z-index: 1;
    }

    .hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .container {
      position: relative;
      z-index: 2;
    }

    h3 {
      margin-bottom: 20px;
    }

    h1 {
      color: #fff;
      margin-bottom: 30px;
    }

    p {
      font-size: 2rem;
      width: 700px;
      max-width: 90vw;
      color: var(--grey-25);
    }
  }

  #mission {
    h2 {
      margin-bottom: 30px;
    }

    .info-box {
      background: var(--grey-25);
      text-align: center;
      padding: 24px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 30px;

      img {
        width: 24px;
        margin: 0 auto;
      }

      h5 {
        font-family: var(--font-sans);
      }

      .small {
        color: var(--grey-50);
      }
    }
  }

  #team {
    background: var(--grey-25);
    text-align: center;

    .team-members {
      display: flex;
      gap: 30px;
      justify-content: center;
      margin-top: 60px;

      @media (max-width: 991px) {
        flex-direction: column;
      }

      .member {
        background: #fff;
        border-radius: 8px;
        width: 280px;
        box-shadow: var(--card-shadow);

        @media (max-width: 991px) {
          margin: 0 auto;
        }

        img {
          height: 370px;
          object-fit: cover;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
        }
      }

      .content {
        padding: 24px;
        text-align: left;

        h5 {
          font-size: 1.8rem;
        }

        h6 {
          color: var(--blue);
          font-family: var(--font-sans);
          font-size: 1.4rem;
          font-weight: 500;
          margin: 5px 0 10px 0;
        }

        p {
          color: var(--slate-light);
          font-size: 1.4rem;
          margin-bottom: 0;
        }
      }
    }
  }

  #verticals {
    text-align: center;

    h2 {
      margin-bottom: 60px;
    }

    .verticals {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;
    }

    .vertical {
      border-radius: 12px;
      background-size: cover;
      background-position: center;
      width: calc(25% - 20px);
      min-width: 215px;
      height: 230px;
      text-align: left;

      .overlay {
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0),
          rgba(0, 0, 0, 0.8)
        );
        color: #fff;
        padding: 20px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        border-radius: 8px;

        .name {
          font-size: 1.8rem;
          font-family: var(--font-serif);
        }

        .description {
          font-size: 1.2rem;
          color: var(--grey-50);
        }
      }
    }
  }
}

/*
---How It Works
*/

.page-template-template-hiw {
  #hero {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--midnight), #22344f, #394e6a);

    h3 {
      margin-bottom: 20px;
    }

    h1 {
      color: #fff;
      margin-bottom: 20px;
    }

    p {
      font-size: 2rem;
      width: 700px;
      max-width: 90vw;
      color: var(--grey-50);
    }
  }

  #steps {
    padding: 80px 0;

    .icon {
      width: 64px;
      height: 64px;
      background: var(--slate-extralight);
      border-radius: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }

    .step {
      display: flex;
      width: 900px;
      max-width: 100%;
      margin: 0 auto;

      &:last-child {
        .right {
          border-bottom: none;
          padding-bottom: 0;
          margin-bottom: 0;
        }
      }

      .left {
        flex: 0 0 150px;
        text-align: center;

        @media (max-width: 600px) {
          flex: 0 0 84px;
          text-align: left;
        }
      }
    }

    .step-number {
      text-transform: uppercase;
      color: var(--grey-100);
      font-size: 1.2rem;

      @media (max-width: 600px) {
        flex: 0 0 84px;
        text-align: center;
        width: 64px;
      }
    }

    .right {
      color: var(--slate-light);
      border-bottom: 1px solid var(--grey-50);
      padding-bottom: 40px;
      margin-bottom: 60px;
    }

    h3 {
      font-size: 2.8rem;
      margin-bottom: 20px;
      color: var(--midnight);
    }

    ul {
      list-style: none;
      padding-left: 0;

      li {
        position: relative;
        margin-bottom: 8px;
        padding-left: 24px;
        font-size: 1.4rem;

        &:before {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          content: "";
          display: inline-block;
          width: 16px;
          height: 16px;
          background-image: url("../../images/icon-check-circle.svg");
          background-size: 100%;
        }
      }
    }
  }

  #structures {
    padding: 80px 0;
    background: var(--grey-25);

    .top {
      text-align: center;

      p {
        margin: 20px auto 60px auto;
        color: var(--grey-100);
      }
    }

    .bottom {
      width: 900px;
      max-width: 100%;
      margin: 0 auto;
    }

    .card {
      margin-bottom: 30px;
      min-height: 162px;

      @media (max-width: 991px) {
        min-height: 183px;
      }

      h4 {
        margin-bottom: 10px;
      }

      p {
        color: var(--grey-100);
        font-size: 1.4rem;
        margin-bottom: 0;

        &.text-small {
          font-size: 1.2rem;
          margin-bottom: 20px;
        }
      }
    }
  }
}

/*
---Offerings
*/

/* --- Offering Card Component --- */
.offering-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: flex-start;
  margin-bottom: 32px;
}

.offering-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  width: 100%;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
  position: relative;

  &:hover {
    box-shadow:
      0 8px 32px -4px #1b243230,
      0 2px 8px -1px #1b243214;
  }

  .card-image {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: #f3f5f6;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .card-badge {
      position: absolute;
      top: 12px;
      left: 12px;
      background: var(--blue-gradient);
      color: #fff;
      font-size: 1.1rem;
      font-weight: 600;
      border-radius: 8px;
      padding: 4px 12px;
      margin-right: 8px;
      z-index: 2;
      box-shadow: 0 2px 8px #1b243210;
      &.direct {
        left: auto;
        right: 12px;
        background: var(--slate-gradient);
      }
      &.live {
        background: linear-gradient(90deg, var(--green), #4be36b);
      }
    }
  }

  .card-body {
    padding: 24px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;

    .card-category {
      color: var(--blue);
      font-size: 1.2rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .card-title {
      font-family: var(--font-serif);
      font-size: 1.7rem;
      font-weight: 700;
      margin-bottom: 18px;
      color: var(--midnight);
    }
    .card-details {
      display: flex;
      justify-content: space-between;
      gap: 8px;

      .card-detail {
        display: flex;
        flex-direction: column;
        align-items: center;

        .card-detail-value {
          font-size: 1.4rem;
          font-weight: 700;
          color: var(--slate-dark);
        }
        .card-detail-label {
          font-size: 1.1rem;
          color: var(--grey-100);
        }
      }
    }
  }
}
.page-template-template-offerings {
  #hero {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--midnight), #22344f, #394e6a);

    h3 {
      margin-bottom: 20px;
    }

    h1 {
      color: #fff;
      margin-bottom: 20px;
    }

    p {
      font-size: 2rem;
      width: 700px;
      max-width: 90vw;
      color: var(--grey-50);
    }
  }

  #offerings {
    padding: 80px 0;
  }
}