@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {
  --main-text-color: #a38946;
  --main-bg-color: #ece6d3;
}

body {
  font-family: "Montserrat", sans-serif;
}
section[id] {
  scroll-margin-top: 80px;
}
.lottie-block {
  width: 100%;
}

.navbar {
  position: relative;
  z-index: 999;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  width: 100%;

  .navbar-cont {
    display: flex;
    align-items: center;

    .navbar-brand {
      width: 100%;
      display: flex;
      justify-content: center;
      img {
        width: 45%;
      }
    }

    .title-toggler-cont {
      display: flex;
      text-align: center;
      gap: 2rem;

      .navbar-toggler {
        border: 0;

        .navbar-toggler-icon {
          background-image: url(img/nav-icon.svg);
        }
      }
    }

    .sitetitle {
      h1 {
        color: #b09854;
        font-size: 1.4rem;
        margin-bottom: 0;
        line-height: 2.5rem;
        text-align: center;
      }
    }
  }
}

.offcanvas {
  width: 95%;
  bottom: unset;
  top: 1rem;
  right: 1rem;
  border-radius: 1rem;
  background-color: var(--main-bg-color);

  .offcanvas-header {
    padding-bottom: 0;

    .btn-close {
      background-color: white;
    }
  }

  .offcanvas-body {
    padding-top: 0;

    .navbar-nav {
      .nav-item {
        .nav-link {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: var(--main-text-color);
          text-transform: uppercase;
          font-weight: bold;
          font-size: 1rem;
          font-family: "Cormorant Garamond", serif;

          span {
            font-family: "Montserrat", sans-serif;
            font-weight: 400;
          }

          .submenu-icon {
            font-weight: normal;
          }
        }

        .nav-link:hover {
          color: #994f3a;
        }

        .nav-link::before {
          content: "\F285";
          font-weight: normal;
          margin-right: 10px;
          font-family: "bootstrap-icons";
        }

        .nav-link.submenu-toggle::before {
          content: none;
        }

        .dropdown-menu {
          background-color: transparent;
          border: 0;
          padding: 0;

          .dropdown-item {
            white-space: unset;
            font-size: 0.7rem;
            font-weight: 300;
            text-transform: none;
            color: #ffffff;
          }

          .submenu-sec-itm {
            white-space: unset;
            font-size: 0.9rem;
            font-weight: 600;
            text-transform: none;
            color: #cbde69;

            display: block;
            width: 100%;
            padding: var(--bs-dropdown-item-padding-y)
              var(--bs-dropdown-item-padding-x);
          }

          .dropdown-item:hover {
            background-color: transparent;
            color: #d3d3d3;
          }

          .dropdown-item:focus {
            background-color: transparent;
          }

          .dropdown-item::before {
            content: "\F285";
            font-family: "bootstrap-icons";
            margin-right: 2px;
          }
        }
      }

      .nav-item.ai-search {
        a {
          color: var(--brand);
        }
      }

      li:first-child {
        .nav-link::before {
          content: "";
          font-weight: normal;
          margin-right: 20px;
        }
      }

      li:last-child {
        .nav-link {
          display: flex;
          align-items: flex-start;
          white-space: normal;
          line-height: 1.2;
          padding-left: 0;
        }

        .nav-link::before {
          content: "\F285";
          font-weight: normal;
          margin-right: 10px;
          font-family: "bootstrap-icons";
          flex-shrink: 0;
          margin-top: 2px;
        }
      }

      /* li:last-child {
            .nav-link::before {
              content: "";
              font-weight: normal;
              margin-right: 20px;
            }
          } */
    }
  }
}

.hero-sec {
  background-color: #ece6d3;
  width: 100%;
  height: 85svh;
  display: flex;
  align-items: end;

  .hero-cont {
    .title-download-cont {
      width: 100%;
      text-align: center;
      margin-bottom: 3rem;

      img {
        width: 80%;
        margin: auto;
      }

      h5 {
        color: var(--main-text-color);
        margin-bottom: 2rem;
        padding: 0 1.5rem;
      }

      a {
        font-size: 1.6rem;
        text-transform: uppercase;
        color: var(--main-text-color);
        font-weight: 700;
        text-decoration: none;
      }
    }
  }

  video {
    height: 100%;
    left: 0;
    position: relative;
    top: 0;
    width: 100%;
    background: #000;
    z-index: 5;
  }
}

.video-highlights-sec {
  padding: 3rem 0;

  h2 {
    font-family: "Cormorant Garamond", serif;
    text-align: center;
    text-transform: uppercase;
    color: var(--main-text-color);
    /* font-weight: 600; */
    margin-bottom: 1rem;
  }

  .video-img-cont {
    overflow: hidden;
    border-radius: 2rem;
    position: relative;

    i {
      position: absolute;
      top: 35%;
      left: 45%;
      font-size: 5rem;
      color: #ffffffb9;
      transition: ease all 500ms;
    }
  }

  .video-img-cont:hover {
    i {
      color: #ffffff;
    }
  }
}

.content-sec {
  padding: 1rem 0;

  h2 {
    font-family: "Cormorant Garamond", serif;
    text-align: center;
    text-transform: uppercase;
    color: var(--main-text-color);
    /* font-weight: 600; */
    margin: 0 0 2rem 0;
  }

  a {
    text-decoration: none;
  }

  .content-itm {
    text-align: center;
    margin-bottom: 3rem;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    h5 {
      text-transform: uppercase;
      width: 70%;
      margin: 0 auto 1rem auto;
      font-size: 1.2rem;
      color: #000;
    }

    h3 {
      font-family: "Cormorant Garamond", serif;
      text-align: center;
      text-transform: uppercase;
      color: var(--main-text-color);
      font-weight: 600;
      width: 65%;
      margin: 0 auto 1rem auto;
      font-size: 2.3rem;
    }

    img {
      display: block;
    }

    span {
      text-transform: uppercase;
      color: #000;
      font-size: 0.9rem;
      text-decoration: underline;
      transition: all ease 500ms;
    }
  }

  .content-itm:hover {
    span {
      color: var(--main-text-color);
    }
  }
}

.about-us-sec {
  padding: 1rem 0;

  h2 {
    font-family: "Cormorant Garamond", serif;
    text-align: center;
    text-transform: uppercase;
    color: var(--main-text-color);
    /* font-weight: 600; */
    margin: 0;
  }

  .about-text {
    color: #a1a452;
    font-weight: 600;
    margin-bottom: 2rem;

    img {
      width: 4%;
    }

    p {
      margin-top: 1rem;
    }

    img:last-child {
      display: block;
      margin-left: auto;
      transform: rotate(180deg);
    }
  }

  .vision-purpose {
    position: relative;
    display: flex;
    min-height: 700px;
    margin-bottom: 2rem;

    video {
      object-position: bottom center;
      object-fit: contain;
    }

    .info-cont {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;

      .info-itm {
        padding: 3rem 1rem 1rem 1.3rem;

        h4 {
          color: #f37021;
          font-weight: 600;
        }

        P {
          font-weight: 600;
          color: #994f3a;
        }
      }
    }
  }

  .our-values-cont {
    margin-bottom: 2rem;
    background-color: #fcf4e2;
    background-image: url(img/about-our-values.jpg);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: contain;
    min-height: 700px;

    .our-values {
      margin-top: 3rem;

      h4 {
        color: #f37021;
        font-weight: 600;
      }

      h6 {
        font-weight: 600;
        color: #994f3a;
      }
    }
  }
}

.awards-recognition-sec {
  padding: 1rem 0;

  h2 {
    font-family: "Cormorant Garamond", serif;
    text-align: center;
    text-transform: uppercase;
    color: var(--main-text-color);
    /* font-weight: 600; */
    margin: auto auto 1rem auto;
    width: 100%;
  }

  .awards-cont {
    justify-content: center;

    .awards-owl-carousel {
      .award-itm {
        text-align: center;
        padding: 1rem;

        img {
          margin-bottom: 1rem;
        }

        p {
          color: #546b2a;
          font-weight: 600;
        }
      }

      .owl-nav {
        position: absolute;
        width: 100%;
        top: 40%;

        .owl-next,
        .owl-prev {
          position: absolute;
          font-size: 2rem;
          color: #0000009d;
        }

        .owl-next {
          text-align: right;
          right: 0;
        }

        .owl-next:hover {
          background-color: transparent;
          color: #000;
        }

        .owl-prev {
          text-align: left;
          left: 0;
        }

        .owl-prev:hover {
          background-color: transparent;
          color: #000;
        }
      }
    }
  }
}

.chairman-ceo-sec {
  padding: 1rem 0;

  h2 {
    font-family: "Cormorant Garamond", serif;
    text-transform: uppercase;
    color: var(--main-text-color);
    /* font-weight: 600; */
    width: 100%;
    text-align: center;
  }

  .sec-info {
    background-image: url(img/chairman-ceo-bg.jpg);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: cover;

    .msg-cont {
      padding-top: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .msg-box {
        background-color: #fff;
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 1rem;

        h6 {
          font-weight: 700;
          margin-bottom: 0;
        }

        p {
          font-size: 0.9rem;
        }

        a {
          color: var(--main-text-color);
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-weight: 600;
          text-decoration: none;
          margin-bottom: 1rem;
          font-size: 0.85rem;
        }

        h4 {
          color: #994f3a;
          margin-bottom: 0;
        }

        h5 {
          font-weight: 500;
          font-size: 0.8rem;
        }
      }

      .img-box {
        margin: 0 auto;
        width: 60%;
      }
    }

    .msg-cont.chairperson {
      margin-bottom: 2rem;
    }
  }
}

.executive-committee-sec {
  padding: 1rem 0;

  h2 {
    font-family: "Cormorant Garamond", serif;
    text-transform: uppercase;
    color: var(--main-text-color);
    /* font-weight: 600; */
    text-align: center;
  }

  .exe-comm-list-cont {
    padding-top: 2rem;

    .exe-comm-avata-img-cont {
      padding: 2rem 1rem;
    }

    .exe-comm-list {
      text-align: center;
      ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
          margin-bottom: 1rem;

          h6 {
            font-weight: 600;
            margin: 0;
          }

          p {
            margin-bottom: 0;
            font-size: 0.8rem;
          }
        }
      }
    }
  }
}

.snapshot-of-fy-sec {
  padding: 0;

  h2 {
    font-family: "Cormorant Garamond", serif;
    text-transform: uppercase;
    color: var(--main-text-color);
    /* font-weight: 600; */
    text-align: center;
    width: 100%;
    background-color: #fff;
    padding: 1rem 0;
    margin-bottom: 0;

    span {
      font-family: "Montserrat", sans-serif;
    }
  }

  .financial-val-created-sec {
    background-color: #6c7a45;
    padding: 2rem 0;
    background-image: url(img/financial-highlights-bg.jpg);
    background-repeat: no-repeat;
    background-size: initial;
    background-position: top left;

    h3 {
      text-align: center;
      color: #fff;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 2rem;
      text-shadow: 0 0 #000;
    }

    .fcv-itm {
      color: #fff;
      margin: 1rem 0 2rem 0;
      text-align: center;

      .fvc-amount {
        font-size: 2.2rem;
        font-weight: 700;

        span {
          font-size: 3rem;
          font-weight: 700;
        }
      }

      .fvc-txt {
        font-size: 1.3rem;
        font-weight: 600;
        color: #f1bf5b;
        line-height: normal;
      }

      .fvc-date {
        font-size: 1.1rem;
      }
    }
  }
}

.business-model-sec {
  padding: 1rem 0;

  h2 {
    font-family: "Cormorant Garamond", serif;
    text-transform: uppercase;
    color: var(--main-text-color);
    /* font-weight: 600; */
    text-align: center;
    font-size: 3rem;
  }

  .dark-green-capsule {
    background: linear-gradient(
      to bottom,
      rgba(126, 139, 87, 1) 0%,
      rgba(126, 139, 87, 1) 1%,
      rgba(144, 155, 111, 1) 49%,
      rgba(164, 173, 136, 0.7) 100%
    );
    border-radius: 2rem;
    padding: 0.8rem 10%;
    text-align: center;
    width: fit-content;
    color: #fff;
    font-weight: 600;
    font-size: 1.3rem;
    margin: 2rem auto;
  }

  .cap-input-itm {
    position: relative;
    margin-bottom: 2rem;

    .fin-cap-icon-cont {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;

      .lottie-block {
        width: 100%;
      }
    }

    .fin-cap-txt-cont {
      position: relative;
      margin-left: 12%;
      padding: 0.8rem 0.5rem 1rem 16%;
      border-top-right-radius: 1rem;

      ul {
        margin: 0;
        padding: 0 0 0 1rem;

        li {
          list-style-type: square;
          margin-bottom: 0.2rem;

          span {
            font-size: 1.2rem;
            font-weight: 600;
          }
        }
      }
    }

    .fin-cap-txt-cont.orange-gradiant1 {
      background: linear-gradient(
        to bottom,
        rgba(254, 231, 213, 1) 0%,
        rgba(254, 231, 213, 1) 1%,
        rgba(254, 243, 233, 1) 49%,
        rgba(255, 255, 255, 0.7) 100%
      );

      ul {
        li {
          span {
            color: #f37021;
          }
        }
      }
    }

    .fin-cap-txt-cont.dark-green-gradient {
      background: linear-gradient(
        to bottom,
        rgb(222, 226, 211) 0%,
        rgb(220, 228, 201) 1%,
        rgb(222, 226, 211) 49%,
        rgba(255, 255, 255, 0.7) 100%
      );

      ul {
        li {
          span {
            color: #516b27;
          }
        }
      }
    }

    .fin-cap-txt-cont.light-brown-gradient {
      background: linear-gradient(
        to bottom,
        rgb(247, 233, 227) 0%,
        rgb(248, 237, 232) 1%,
        rgb(246, 239, 236) 49%,
        rgba(255, 255, 255, 0.7) 100%
      );

      ul {
        li {
          span {
            color: #d37864;
          }
        }
      }
    }

    .fin-cap-txt-cont.light-green-gradient {
      background: linear-gradient(
        to bottom,
        rgb(239, 239, 225) 0%,
        rgb(238, 238, 227) 1%,
        rgb(239, 239, 233) 49%,
        rgba(255, 255, 255, 0.7) 100%
      );

      ul {
        li {
          span {
            color: #a0a755;
          }
        }
      }
    }

    .fin-cap-txt-cont.yellow-gradient {
      background: linear-gradient(
        to bottom,
        rgb(254, 244, 229) 0%,
        rgb(252, 244, 233) 1%,
        rgb(255, 251, 244) 49%,
        rgba(255, 255, 255, 0.7) 100%
      );

      ul {
        li {
          span {
            color: #f3a94b;
          }
        }
      }
    }

    .fin-cap-txt-cont.dark-brown-gradient {
      background: linear-gradient(
        to bottom,
        rgb(238, 222, 214) 0%,
        rgb(238, 226, 220) 1%,
        rgb(241, 236, 233) 49%,
        rgba(255, 255, 255, 0.7) 100%
      );

      ul {
        li {
          span {
            color: #a04a36;
          }
        }
      }
    }
  }

  .col-md-4 {
    margin-bottom: 2rem;
  }

  .cap-output-itm {
    padding: 1rem;
    border-radius: 1rem 1rem 0 0;

    height: 100%;

    h4 {
      margin-bottom: 0.1rem;
      font-size: 1.4rem;
      line-height: normal;

      span {
        font-weight: 700;
      }
    }

    p {
      margin-bottom: 1.5rem;
      font-size: 0.85rem;

      span.highlight {
        font-weight: 700;
      }
    }
  }

  .cap-output-itm.orange-gradiant1 {
    background: linear-gradient(
      to bottom,
      rgba(254, 231, 213, 1) 0%,
      rgba(254, 231, 213, 1) 1%,
      rgba(254, 243, 233, 1) 49%,
      rgba(255, 255, 255, 0.7) 100%
    );

    h4 {
      color: #f37021;
    }
  }

  .cap-output-itm.dark-green-gradient {
    background: linear-gradient(
      to bottom,
      rgb(222, 226, 211) 0%,
      rgb(220, 228, 201) 1%,
      rgb(222, 226, 211) 49%,
      rgba(255, 255, 255, 0.7) 100%
    );

    h4 {
      color: #516b27;
    }
  }

  .cap-output-itm.dark-brown-gradient {
    background: linear-gradient(
      to bottom,
      rgb(238, 222, 214) 0%,
      rgb(238, 226, 220) 1%,
      rgb(241, 236, 233) 49%,
      rgba(255, 255, 255, 0.7) 100%
    );

    h4 {
      color: #a04a36;
    }

    span.highlight {
      color: #a04a36;
      font-size: 1.4rem;
    }
  }

  .cap-output-itm.yellow-gradient {
    background: linear-gradient(
      to bottom,
      rgb(254, 244, 229) 0%,
      rgb(252, 244, 233) 1%,
      rgb(255, 251, 244) 49%,
      rgba(255, 255, 255, 0.7) 100%
    );

    h4 {
      color: #f3a94b;
    }
  }

  .cap-output-itm.light-brown-gradient {
    background: linear-gradient(
      to bottom,
      rgb(247, 233, 227) 0%,
      rgb(248, 237, 232) 1%,
      rgb(246, 239, 236) 49%,
      rgba(255, 255, 255, 0.7) 100%
    );

    h4 {
      color: #d37864;
    }
  }

  .cap-output-itm.light-green-gradient {
    background: linear-gradient(
      to bottom,
      rgb(239, 239, 225) 0%,
      rgb(238, 238, 227) 1%,
      rgb(239, 239, 233) 49%,
      rgba(255, 255, 255, 0.7) 100%
    );

    h4 {
      color: #a0a755;
    }
  }

  .light-green-capsule {
    background: linear-gradient(
      to bottom,
      rgba(203, 203, 159, 1) 0%,
      rgba(203, 203, 159, 1) 1%,
      rgba(218, 218, 186, 1) 49%,
      rgba(233, 233, 215, 0.7) 100%
    );
    border-radius: 2rem;
    padding: 0.8rem 10%;
    text-align: center;
    width: 100%;
    color: #556b2a;
    font-weight: 600;
    font-size: 1.3rem;
    margin: 2rem auto;
  }

  .strategic-pillars-cont {
    padding: 2rem 0;
    border-radius: 1.5rem;
    border: 2px solid #556b2a;

    h4 {
      text-align: center;
      width: 100%;
      color: #556b2a;
      font-weight: 600;
      margin-bottom: 1rem;
    }

    .strat-pill-itm {
      text-align: center;
      .lottie-block {
        padding: 0 20%;
        margin-bottom: 1rem;
      }
    }
  }
}

/* Binuka */
.non-financial-highlights-sec {
  padding-top: 2rem;
  padding-bottom: 2rem;

  h2 {
    font-family: "Cormorant Garamond", serif;
    text-transform: uppercase;
    color: var(--main-text-color);
    /* font-weight: 600; */
    text-align: center;
  }

  .col-md-6 {
    margin-bottom: 2rem;
  }

  .main-cont {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;

    border: 1px solid #000;
    padding: 2rem;
    height: 100%;
    min-height: 500px;

    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;

    h4 {
      text-transform: uppercase;
      font-weight: 700;
    }

    ul {
      list-style: none;
      padding-left: 1rem;
      margin-top: 1rem;

      li {
        margin-bottom: 1rem;
        padding-left: 0.6rem;
        color: #994f3a;
        font-weight: 600;
      }

      li::marker {
        content: "►";
        color: #994f3a;
        font-size: 0.8rem;
        margin-right: 0.5rem;
      }
    }
  }

  .main-cont.dfi-cont {
    border: 1px solid #ff0000;
    background-image: url("img/dfi-bg.png");

    h4 {
      color: #f3742b;
    }
  }

  .main-cont.esv-cont {
    border: 1px solid #bcb163;
    background-image: url("img/esv-bg.png");

    h4 {
      color: #546b2a;
    }

    p {
      color: black;
      font-weight: 600;
    }
  }

  .stats-cont {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 0;
    gap: 1rem;
    height: 100%;

    img {
      width: fit-content;
    }

    .info {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      p {
        color: black;
        font-weight: 600;
      }

      .text-orange {
        color: #f3742b;
        font-weight: 600;
      }

      .text-gray {
        color: #5f5f5f;
        font-weight: 600;
      }

      .text-green {
        color: #375c0d;
      }

      h3 {
        font-weight: 700;
        font-size: 1.9rem;
      }

      .yt-logo {
        margin: 0 4px;
      }
    }

    .info-col-centered {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      p {
        text-align: center;
      }
    }

    .info-col-start {
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: start;
      padding: 0 2rem;

      p {
        text-align: start;
      }
    }
  }

  .stats-cont.border-b {
    border-bottom: 1px solid #000;
  }

  .stats-cont.border-md-b {
    border-bottom: 1px solid #000;
  }

  .stats-cont.flex-life {
    img.logo-img {
      width: 50%;
    }
  }

  .stats-cont.suwamaga-cont {
    background-image: url("img/suwamaga.jpg");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;

    justify-content: start;
    align-items: start;

    min-height: 400px;
  }
}

.esg-at-ua-sec {
  padding-top: 2rem;
  padding-bottom: 2rem;

  h2 {
    font-family: "Cormorant Garamond", serif;
    text-transform: uppercase;
    color: var(--main-text-color);
    /* font-weight: 600; */
    text-align: center;
  }

  .info-row {
    margin-top: 2rem;

    .column {
      margin-bottom: 2rem;
    }
    .info-cont {
      padding: 2rem;
      border-radius: 20px;
      height: 100%;

      .topic-cont {
        display: inline-flex;
        gap: 1rem;

        .speech-bubble {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 60px;
          height: 40px;
          background: #99503b;
          color: #fff;
          font-size: 2rem;
          font-weight: bold;
          border-radius: 10px;
          position: relative;
        }

        /* Bubble tail */
        .speech-bubble::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: -10px;
          width: 0;
          height: 0;
          border-top: 20px solid #99503b;
          border-right: 20px solid transparent;
        }

        h3 {
          font-weight: 700;
          font-size: 1.8rem;
        }
      }

      .sub-sec {
        margin: 2rem 0;

        .sub-topic-cont {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 1rem;

          h5 {
            font-weight: 600;
          }

          .animation-block {
            width: 25%;
          }
          .topic {
            width: 80%;
          }
        }

        ul {
          padding: 0;

          li {
            margin: 1rem 0;
          }

          li::marker {
            content: "";
          }
        }

        p {
          margin: 1rem 0;
        }

        .stats-row {
          .text-social {
            color: #99503b;
          }

          p {
            padding: 0;
            margin: 0 0 10px 0;
          }

          .stat-no {
            font-size: 2rem;
            font-weight: 700;
            color: #994f3a;
            margin: 0;
          }
        }

        .stats-row.border-b {
          border-bottom: 1px solid #000;
          margin: 2rem 0;
        }
      }
    }

    .info-cont.env {
      background-color: #dedec5;

      .topic-cont {
        .speech-bubble {
          background: #526a27;
        }

        .speech-bubble::after {
          border-top: 20px solid #526a27;
        }

        h3 {
          color: #526a27;
        }
      }

      .sub-topic-cont {
        h5 {
          color: #526a27;
        }
      }
    }

    .info-cont.social {
      background-color: #f3e7e1;

      .topic-cont {
        .speech-bubble {
          background-color: #994f3a;
        }

        .speech-bubble::after {
          border-top: 20px solid #994f3a;
        }

        h3 {
          color: #994f3a;
        }
      }

      .sub-topic-cont {
        h5 {
          color: #994f3a;
        }
      }
    }

    .info-cont.gov {
      margin-top: 1rem;
      background-color: #f8eacd;

      background-image: url("img/governance-bg.png");
      background-position: bottom right;
      background-repeat: no-repeat;
      background-size: 65%;
      min-height: 650px;

      .topic-cont {
        .speech-bubble {
          background-color: #e5a945;
        }

        .speech-bubble::after {
          border-top: 20px solid #e5a945;
        }

        h3 {
          color: #e5a945;
        }
      }

      .sub-topic-cont {
        h5 {
          color: #994f3a;
        }
      }
    }
  }
}

.capital-reports-sec {
  padding: 1rem 0;

  h2 {
    font-family: "Cormorant Garamond", serif;
    text-transform: uppercase;
    color: var(--main-text-color);
    /* font-weight: 600; */
    text-align: center;
    font-size: 3rem;
  }

  /* bg colors */

  .pink-bg1 {
    background-color: #faf5f1;
  }

  .light-green-bg {
    background-color: #f1f5e8;
  }

  .light-brown-bg {
    background-color: #fdf6f4;
  }

  .chreme-green-bg {
    background-color: #fbfcf2;
  }

  /* text colors */
  .text-dark-green {
    color: #546b2a;
  }

  .text-light-green {
    color: #a0a452;
  }

  .text-chreme-red {
    color: #cc7c68;
  }

  .text-chreme {
    color: #cb9785;
  }

  .text-yellow {
    color: #e5a946;
  }

  .text-orange {
    color: #e3783c;
  }

  .text-brown {
    color: #8f523e;
  }

  .cap-rep-itm-cont {
    margin-bottom: 1.5rem;

    .cap-report-itm {
      border-radius: 1rem 1rem 0 0;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .cap-report-title {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
        padding: 1rem;

        .icon-cont {
          width: 30%;
        }

        .text-cont {
          width: 70%;

          h3 {
            font-family: "Cormorant Garamond", serif;
            color: #994f3a;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 1.7rem;
            line-height: normal;
            margin-bottom: 0;
          }

          a {
            text-decoration: none;
            font-size: 0.9rem;
            color: #b59749;
            font-weight: 700;
          }
        }
      }

      .cap-rep-sub-itm-cont {
        .cap-rep-sub-itm {
          text-align: center;
          margin-bottom: 1rem;

          .icon-cont {
            width: 40%;
            margin: 1rem auto;
          }

          h6 {
            font-weight: 700;
          }

          p {
            margin-bottom: 0;
            font-size: 0.8rem;
          }
        }
      }

      .fimg-cont {
      }
    }
  }
}

.cop-gov-risk-man-sec {
  padding: 3.5rem 0 0 0;
  background-color: #ece6d3;
  background-image: url(img/cop-gov-risk-man-sec-gb-img.png);
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: 80%;
  min-height: 1050px;

  .text-cont {
    text-align: center;

    h2 {
      font-family: "Cormorant Garamond", serif;
      text-transform: uppercase;
      color: var(--main-text-color);
      /* font-weight: 600; */

      font-size: 3rem;
    }

    a {
      text-decoration: none;
      font-size: 0.9rem;
      color: #b59749;
      font-weight: 700;
    }
  }
}

footer {
  background-color: white;
  padding: 1rem 0;
  position: relative;
  width: 100%;
  text-transform: uppercase;
  font-size: 0.7rem;
  overflow: hidden;

  .copy {
    text-align: center;
  }

  .devby {
    text-align: center;

    a {
      color: var(--main-text-color);
    }
  }
}

@media (min-width: 768px) {
  .navbar {
    display: flex;
    flex-direction: row;

    .container-fluid {
      flex-direction: row;
      text-align: start;

      .navbar-brand {
        margin-right: 0;
        width: 10%;
        border-radius: 0 1rem 1rem 0;
        img {
          width: 100%;
        }
      }

      .title-toggler-cont {
        display: flex;

        .sitetitle {
          text-align: end;
          margin-left: 0;
          font-size: 1.4rem;
          line-height: 2.5rem;
        }
      }

      .offcanvas {
        width: 450px;
        right: 1rem;
      }
    }
  }

  .offcanvas {
    width: 450px;
    right: 1rem;
  }

  .hero-sec {
    height: 50svh;

    .hero-cont {
      .title-download-cont {
        img {
          width: 30%;
        }
      }

      a {
        font-size: 2.1rem;
      }
    }
  }

  .cap-rep-itm-cont {
    .cap-report-itm {
      .cap-report-title {
        .text-cont {
          h3 {
            font-size: 2.1rem;
          }
        }
      }
    }
  }

  .snapshot-of-fy-sec {
    .financial-val-created-sec {
      .fcv-itm {
        text-align: start;
      }
    }
  }

  .awards-recognition-sec {
    h2 {
      width: 30%;
    }

    .awards-cont {
      .awards-owl-carousel {
        .owl-nav {
          .owl-prev {
            left: -2rem;
          }
          .owl-next {
            right: -2rem;
          }
        }
      }
    }
  }

  .business-model-sec {
    .cap-input-itm {
      .fin-cap-icon-cont {
        .lottie-block {
          width: 70%;
        }
      }
    }
  }

  .chairman-ceo-sec {
    .sec-info {
      .msg-cont.chairperson {
        margin-bottom: 0;
      }
    }
  }

  .executive-committee-sec {
    .exe-comm-list-cont {
      .exe-comm-list {
        text-align: start;
      }
    }
  }

  .cop-gov-risk-man-sec {
    background-size: 60%;
    min-height: 800px;

    .row {
      justify-content: center;
    }
  }
}

@media (min-width: 992px) {
  .hero-sec {
    height: 100svh;

    .hero-cont {
      .title-download-cont {
        h5 {
          padding: 0;
        }
        img {
          width: 30%;
        }
      }

      a {
        font-size: 2.1rem;
      }
    }
  }

  .snapshot-of-fy-sec {
    .financial-val-created-sec {
      background-size: contain;
    }
  }

  .about-us-sec {
    .our-values-cont {
      min-height: auto;
      margin-bottom: 0;
    }
  }

  .chairman-ceo-sec {
    h2 {
      width: 50%;
      text-align: start;
    }
  }

  .cop-gov-risk-man-sec {
    background-size: 28%;
    min-height: auto;
  }

  .non-financial-highlights-sec {
    .stats-cont {
      display: flex;
      flex-direction: row;

      .info {
        text-align: start;
        display: flex;
        flex-direction: column;
        align-items: start;
      }

      .info-col-centered {
        align-items: center;
        justify-content: center;
      }
    }

    .stats-cont.border-md-b {
      border: none;
    }

    .stats-cont.flex-life {
      img.logo-img {
        width: fit-content;
      }
    }

    .stats-cont.suwamaga-cont {
      min-height: auto;
      justify-content: center;
    }
  }

  .business-model-sec {
    .cap-input-itm {
      .fin-cap-icon-cont {
        .lottie-block {
          width: 100%;
        }
      }
    }
  }

  .esg-at-ua-sec {
    .info-row {
      .column {
        margin-bottom: 0;
      }

      .info-cont.gov {
        background-size: 15%;
        min-height: auto;
      }
    }
  }
  .reveal {
    position: relative;
    opacity: 0;
  }

  .reveal.active {
    opacity: 1;
  }

  .active.fade-in {
    animation: fade-in 1s ease-in;
  }

  .active.fade-bottom {
    animation: fade-bottom 1s ease-in;
  }

  .active.fade-top {
    animation: fade-top 1s ease-in;
  }

  .active.fade-left {
    animation: fade-left 1s ease-in;
    height: 100%;
  }

  .active.fade-right {
    animation: fade-right 1s ease-in;
  }

  .active.zoom-image {
    animation: zoom 1s;
    animation-fill-mode: forwards;
  }

  .active.popup {
    animation: popup 0.3s;
    animation-fill-mode: forwards;
    visibility: hidden;
  }
}

@keyframes popup {
  0% {
    opacity: 0;
    transform: scale(0.8);
    visibility: visible;
  }

  100% {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes zoom {
  0% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes fade-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-bottom {
  0% {
    transform: translateY(200px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}