/**
Page sections
 */

.hero-section {
  position: relative;
  z-index: 7;
  @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
  }

  .hero {
    .hero-inner {
      @media screen and (max-width: $mobileMax) and (min-width: $mobileMin) {
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-direction: column;
        padding: 68px 0 0 0;
      }

      .heading {
        display: flex;
        flex-direction: column;

        .hero-heading {
          text-align: center;
          width: 100%;
          display: flex;
          flex-direction: column;
          @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){

          }

          .hero-heading-title {
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 367px;
            width: 100%;
            background-repeat: no-repeat;
            background-size: cover;

            @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
              display: flex;
              height: 100%;
              background-position: center;
            }
            @media screen and (max-width: $tabletMax) and (min-width: $tabletMin) {
            }

            img {
              display: flex;
              width: 100% !important;
            }

            h1 {
              @include h1;
              display: flex;
              color: $black;
              padding: 120px 0 0 80px;
              margin: 0;
              font-weight: 300;
              @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
                font-weight: 300;
                padding: 120px 0 0 24px;
                font-size: 44px;
                line-height: 100%;
                max-width: 154px;
              }

              @media screen and (max-width: $tabletMax) and (min-width: $tabletMin) {
                padding: 120px 0 0 40px;
                text-align: left;
                max-width: 581px;
              }
            }
          }
        }
      }
    }
  }
}


/****
*** Sidebar
 */

.sidebar-active {
  color: $black;
}

.sidebar-active::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px; /* Increase this value to make the underline bolder */
  background-color: currentColor;
  position: absolute;
  bottom: 1px; /* Padding on the top */
}

.sidebar-container {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 7;
  @media screen and (max-width: $tabletMax) and (min-width: $tabletMin) {
    max-height: 69px;
    border-bottom: 1px solid $black10;
  }
  @media screen and (max-width: $mobileMax) and (min-width: $mobileMin) {
    max-height: 69px;
    border-bottom: 1px solid $black10;
    padding: 0;
  }

  .sidebar-container-inner {
    display: flex;
    flex-direction: row;
    @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
      width: 100%;
    }
    @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
      width: 100%;
    }

    .inner-mid-left {
      display: flex;
      flex-direction: column;
      min-height: 641px;
      min-width: 383px;
      position: sticky;
      top: 80px !important;
      border-right: 1px solid $black50;
      @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
        display: flex;
        flex-direction: row;
        width: 100%;
        min-height: 69px;
      }
      @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
        display: flex;
        flex-direction: row;
        width: 100%;
        min-height: 69px;
        top: 0 !important;
      }

      .menu-sidebar-container {
        display: flex;
        margin: 60px 0 0 0;
        @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
          display: flex;
          flex-direction: row;
          margin: 0;
          border-bottom: 1px solid $black50;
        }
        @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
          display: flex;
          flex-direction: row;
          margin: 0;
          border-bottom: 1px solid $black50;
        }

        ul {
          @include small-link;
          list-style: none;
          color: $black;
          display: grid;
          gap: 24px;
          font-weight: 700;
          font-family: Helvetica;
          text-decoration: none;
          line-height: 21px;
          @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
            display: flex;
            flex-direction: row;
            width: 100%;
            font-size: 14px;
            padding: 0 24px;
            margin: 0;
            overflow-x: scroll;
            align-items: center;
            scrollbar-width: none;
            -ms-overflow-style: none;
          }
          @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
            display: flex;
            flex-direction: row;
            width: 100%;
            font-size: 14px;
            padding: 0 24px;
            margin: 0;
            overflow-x: scroll;
            align-items: center;
            scrollbar-width: none;
            -ms-overflow-style: none;
          }
          scrollbar-width: none;
          -moz-appearance: none;

          &::-webkit-scrollbar {
            display: none;
          }

          .menu-item {
            display: flex;
            @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
              width: 100%;
              min-width: max-content;
              padding: 13px 0;
            }
            @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
              width: 100%;
              min-width: max-content;
              padding: 13px 0;
            }
          }
        }

        a {
          display: flex;
          flex-direction: row;
          position: relative;
          font-family: Arial;
          cursor: pointer;

          &:before {
            content: '';
            display: block;
            width: 0%;
            height: 2px;
            background: #000;
            transition: 0.3s;
            position: absolute;
            bottom: 0;
          }

          &:hover {
            &:before {
              width: 100%;
            }
          }

          a:hover::after {
            content: "";
            display: block;
            width: 100%;
            height: 2px; /* Increase this value to make the underline bolder */
            background-color: currentColor;
            position: absolute;
            bottom: 1px; /* Padding on the top */
          }
        }

        a:link {
          text-decoration: none;
          color: $black;
        }

        a:visited {
          text-decoration: none;
          color: $black;
        }
      }
    }
  }
}

/***
** Section Text
 ***/
.section-text {
  display: flex;
  @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
    max-width: 312px;
    margin: 0 auto;
  }


  .section-content-outer {
    display: flex;

    .section-content-inner {
      display: flex;

      .section-text-outer {
        display: flex;

        .section-text-inner {
          display: flex;
          flex-direction: column;

          .section-text-output {
            max-width: 737px;
            padding: 0 0 0 80px;
            @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
              padding: 0 !important;
            }
            @media screen and (max-width: $tabletMax) and (min-width: $tabletMin) {
              padding: 0 40px 0 40px !important;
            }

            h4 {
              margin: 0 0 32px 0;
              font-family: Arial;
            }

            p {
              color: $black;
              font-family: Helvetica;
              font-weight: 300;
              margin: 24px 0 24px 0 !important;
            }

          }

          .section-text-output {
            max-width: 737px;
            padding: 0 0 0 80px;
            display: flex;
            flex-direction: column;

            h4 {
              @include h4-sml;
              color: $black;
              font-family: Arial;
              margin: 0;
            }

            p {
              color: $black;
              margin: 24px 0 0 0;
              font-family: Helvetica;
              font-weight: 300;

              b {
                font-weight: 700;
              }
            }

            ul li:before {
              content: "•";
              font-size: 6pt;
              display: flex;
              flex-direction: column;
              padding: 7px 8px 0 0;
              @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
                padding: 8px 8px 0 0;
              }
            }

            ul {
              margin: 0;
              padding: 6px 0 0 0;
              list-style: none;
              color: $black;


              li {
                display: flex;
                align-items: flex-start;
                font-weight: 300;
                @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
                  align-items: flex-start;
                  padding: 0;
                }

                ::marker {
                  padding: 0 0 0 28px;
                  display: flex;
                }
              }
            }

            b {
              font-family: Arial;
              font-weight: 700;
              color: $black;
            }
          }
        }
      }
    }
  }
}

/****
** Title Section
 */

.title-section {
  display: flex;
  @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
    width: 100%;
    background: $lightGrey100;
  }

  .section-content-outer {
    display: flex;
    width: 100%;

    .section-content-inner {
      display: flex;

      .section-title {
        display: flex;

        .section-title-inner {
          display: flex;

          .section-title-output {
            display: flex;
            flex-direction: column;

            h2 {
              @include h2;
              font-weight: 300;
              margin: 0 0 24px 0;
              color: $black;
              @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
                width: 100%;
                font-size: 40px;
                padding: 40px 0 0 0;
              }
            }

            p {
              @include body-card;
              font-weight: 400;
              max-width: 968px;
              color: $black;
              margin: 0 0 24px 0;
              @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
                width: 75%;
                font-size: 16px;
                line-height: 150%;
                text-align: left;
                padding: 24px 0 0 0;
              }
            }
          }
        }
      }
    }
  }
}


/****
** Title Section two
 */

.title-section-two {
  display: flex;
  @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
    width: 100%;
    background: $lightGrey100;
  }

  .section-content-outer {
    display: flex;
    width: 100%;
    @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
      width: 100%;
      max-width: 312px;
      margin: 0 auto;
    }

    .section-content-inner {
      display: flex;
      margin: 0 0 0 80px;
      @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
        margin: 0;
      }
      @media screen and (max-width: $tabletMax) and (min-width: $tabletMin) {
        margin: 0 40px 0 40px;
      }

      .section-title {
        display: flex;

        .section-title-output {
          display: flex;
          flex-direction: column;

          h4 {
            @include h4-sml;
            font-weight: 700;
            margin: 0;
            padding: 0 0 24px 0;
            color: $black;
            font-family: Arial;
            @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
              width: 100%;
              font-size: 40px;
              padding: 0;
              @include h4-sml;
            }
          }

          p {
            @include body-card;
            padding: 0 0 24px 0;
            font-weight: 300;
            max-width: 897px;
            margin: 0 auto;
            color: $black;
            font-family: Helvetica;

            b {
              font-weight: 700;
              font-family: Arial;
            }

            @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
              line-height: 150%;
              text-align: left;
              padding: 24px 0 24px 0;
            }
          }
        }
      }
    }
  }
}

/***
** Feature cards
 */

.feature-container {
  display: flex;
  justify-content: center;
  @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
    width: 100%;
  }

  .feature-card-output {
    display: flex;
    flex-direction: row;
    gap: 23px;
    justify-content: center;
    background: $lightGrey100;
    @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .feature-card-section {
      display: flex;
      flex-direction: row;
      grid-gap: 24px;
      padding: 40px 0 87px 0;
      @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
        overflow: hidden;
        display: flex;
        flex-direction: row;
        max-height: 410px;
        padding: 0;


      }

      .card-feature {
        background: $white;
        max-width: 411px;
        width: 100%;
        min-height: 170px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        border: 1px solid #DFE3E9;
        @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
          width: 280px !important;
          display: flex;
          overflow-x: scroll;
          scroll-snap-type: x mandatory;
          scroll-behavior: smooth;
          -webkit-overflow-scrolling: touch;
          max-height: 410px;

        }
      }

      .feature-img-holder {
        img {
          width: 100%;
          max-height: 240px;
        }
      }

      .feature-card-copy {
        display: flex;
        height: 100%;
        padding: 0 24px 24px;
        flex-direction: column;
        align-items: flex-start;
        min-height: 100%;
        flex: 1;
        @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
          max-height: 170px;
          justify-content: revert;
        }

        .feature-text {

          h4 {
            @include h4-sml;
            font-weight: 700;
            max-width: 255px;
            max-height: 58px;
            display: flex;
            color: $black;
          }

          p {
            @include body-card;
            max-width: 363px;
            display: flex;
            margin: 0 0 0 0;
          }
        }
      }

      .feature-link {
        display: flex;
        flex-direction: row;
        @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
          display: flex;
          flex-direction: row;
        }

        a {
          text-decoration: none;
          font-size: 16px;
          font-weight: 700;
          color: $black;
          display: flex;
        }

        .feature-arrow {
          display: flex;

        }
      }
    }
  }
}


/***
*** Page Text Links
 */

.page-text-link-container {
  display: flex;

  .page-link-container-inner {
    display: flex;
    flex-direction: column;
    padding: 0 0 80px 24px;

    .page-link-text {
      display: flex;

      .page-link-output {
        display: flex;
        flex-direction: row;

        a {
          display: flex;
          text-decoration: none;

          p {
            @include body-card;
            font-weight: 700;
            color: $black;

          }

          .arrow {
            display: flex;
            align-items: center;

          }
        }
      }
    }
  }
}

/****
*** PDF Drop Down
 */

  .drop-down-holder {
    display: flex;
    margin: 0 0 0 80px;
    @media screen and (max-width: $mobileMax) and (min-width: $mobileMin) {
      margin: 0 auto;
    }
    @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
      margin: 0 0 0 40px;
    }

    .drop-down-section {
      display: flex;

      .drop-down-output {
        display: flex;
        flex-direction: column;

        select {
          appearance: none;
          background-image: url("../../img/drop-down-arrow.svg");
          background-repeat: no-repeat;
          background-position: calc(100% - 3px) center;
          padding: 0 15px 0 0;
        }

        .dropdown-holder-con {
          display: flex;
          flex-direction: row;
          gap: 24px;

          .dropdown-left {
            display: flex;

            .drop-down-year {
              width: 468px;
              height: 48px;
              border: 1px solid $blue25;
              padding: 12px 16px;
              border-radius: 4px;
              background-position: calc(100% - 15px) center;
              @media screen and (max-width: $mobileMax) and (min-width: $mobileMin) {
                max-width: 312px;
              }

              h5 {
                @include h5-sml;
              }
            }
          }

          .dropdown-right {
            display: flex;

            .drop-down-category {
              width: 468px;
              height: 48px;
              border: 1px solid $blue25;
              padding: 12px 16px;
              border-radius: 4px;

              h5 {
                @include h5-sml;
              }
            }
          }
        }
      }
    }
  }
/*****
** Share Price Information dropdown
 */
.share-price-content {
  display: flex;

  .share-price-container {
    display: flex;
    margin: 0 0 0 80px;

    .share-price-dropdown-container {
      display: flex;
      flex-direction: column;

      .share-price-dropdown {
        display: flex;
        min-height: 48px;
        min-width: 468px;
        max-width: 468px;
        width: 100%;
        border-radius: 4px;
        padding: 0 0 0 16px;
      }

      .iframe-container-outer {
        display: flex;
        margin: 24px 0 0 0;

        .iframe-container {
          display: flex;

          .table-iframe-holder {
            display: flex;
            min-width: 931px;

            .table-iframe {
              display: flex;
            }
          }

          .graph-iframe-holder {
            display: flex;
            max-width: 951px;
            max-height: 330px;
            width: 100%;

            .graph-iframe {
              display: flex;
              max-width: 951px;
              max-height: 330px;
              width: 100%;
            }
          }
        }
      }
    }
  }
}

/****
*** Plain Title
 */
.plain-title-section {
  display: flex;
  margin: 0 0 24px 80px;
  @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
    margin: 0 auto;
    min-width: 312px;
    padding: 0 0 24px 0;
  }
  @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
    margin: 0 0 24px 40px;
  }

  .pl-content-outer {
    display: flex;

    .pl-content-inner {
      display: flex;

      .pl-section-title {
        display: flex;

        .pl-title-inner {
          display: flex;

          .pl-title-output {
            display: flex;

            h5 {
              @include h5-subtitle;
              color: $black;
              margin: 0;
            }
          }
        }
      }
    }
  }
}

/****
*** Disclaimer, remember to undo comments
 */
.disclaimer-text-section {
  //display: flex;
  display: none;
  margin: 0 0 24px 80px;
  @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
    margin: 0 0 24px 40px;
  }
  @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
    margin: 0 auto;
    max-width: 480px;
    min-width: 312px;
  }

  .disc-content-outer {
    display: flex;
    @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
      max-width: 312px;
    }

    .disc-content-inner {
      display: flex;

      .disc-section-text {
        display: flex;

        .disc-text-inner {
          display: flex;

          .disc-text-output {
            display: flex;

            h6 {
              @include h6-sml;
              color: $black;
              margin: 0 0 80px 0;
              font-weight: 300;
              font-family: Helvetica;
              @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
                margin: 0;
              }

              strong {
                color: $black;
                font-weight: 700;
              }
            }
          }
        }
      }
    }
  }
}

/**
** Center cards
 */
.center-cards-container {
  display: flex;
  margin: 0 0 0 80px;

  .center-cards-outer {
    display: flex;
    gap: 22px;

    .center-cards-inner {
      display: flex;
      max-width: 434px;

      .center-cards-output {
        display: flex;

        .cards {
          display: flex;

          .link-card {
            display: flex;
            border: 1px solid $blue25;
            transition: all 0.3s ease;

            &:hover {
              box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.1);
              transform: scale(1.02);
            }

            a {
              text-decoration: none;

              .img {
                overflow: hidden; /* hide the part of the image that overflows */

                img {
                  width: 100%;
                  transition: transform 0.3s ease; /* add transition for smoothness */
                }

                &:hover img {
                  transform: scale(1.1); /* zoom in the image on hover */
                }
              }

              .card-title {
                display: flex;
                color: $white;
                max-height: 93px;

                h5 {
                  @include h5-subtitle;
                  font-family: Arial;
                  color: $black;
                  text-decoration: none;
                  padding: 32px 0 32px 24px;
                  margin: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}

/***
      * Image Two
       ***/

.title-image-two {
  display: flex;
  padding: 32px 0 0 80px;

  .ti-two-container {
    display: flex;

    .ti-two-inner {
      display: flex;

      .ti-two-output {
        display: flex;

        h4 {
          @include h4-sml;
          margin: 0;
          font-family: Arial;
        }
      }
    }
  }
}

.section-image {
  display: flex;
  padding: 24px 0 32px 80px;
  @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
    padding: 0;
  }
  @media screen and (max-width: $tabletMax) and (min-width: $tabletMin) {
    padding: 0 40px;
  }

  .img-section-content-outer {
    display: flex;

    .section-content-inner {
      display: flex;

      .section-img-output {
        display: flex;

        img {
          display: flex;
          @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
            display: none;
          }
        }
      }
      .mobile-section-img {
        display: none;
        @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
          display: flex;
        }
      }
    }
  }
}

/***
  ** Bottom Cards
   */

.content-bottom-outer {
  background-color: $blue10;
  z-index: 7;
  position: relative;
  .content-bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 59px 0 80px 0;
    @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
      padding: 40px 0 40px 0;
    }

    .bottom-title {
      display: flex;

      h4 {
        @include h4;
        font-weight: 300;
        margin: 0 0 40px 0;
        font-family: Helvetica;
        color: $black;
        @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
          text-align: center;
          text-align: center;
          max-width: 311px;

        }
      }
    }

    .bottom-card {
      display: flex;
      flex-direction: row;
      grid-gap: 24px;
      @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        padding: 0 24px;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }


      @media screen and (max-width: $tabletMax) and (min-width: $tabletMin) {
        padding: 0 40px 0 40px;
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      scrollbar-width: none;
      -moz-appearance: none;
      &::-webkit-scrollbar {
        display: none;
      }

      .bottom-card-output {
        display: flex;
        flex-direction: column;
        grid-gap: 24px;
        padding: 0 0 87px 0;
        background: $white;
        height: 364px;
        transition: all 0.3s ease;
        @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
          display: flex;
          flex-direction: column;
          overflow: hidden;
          overflow-x: scroll;
          min-width: 280px;
          height: auto;
          padding: 0;
          scrollbar-width: none;
          -ms-overflow-style: none;
        }

        scrollbar-width: none;
        -moz-appearance: none;
        &::-webkit-scrollbar {
          display: none;
        }
        @media screen and (max-width: $tabletMax) and (min-width: $tabletMin) {
          max-height: 364px;
          min-width: 280px;
        }

        .bottom-card-output {
          scrollbar-width: none;
          -ms-overflow-style: none;
        }

        &:hover {
          box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.1);
          transform: scale(1.02);
        }

        a {
          text-decoration: none;
          display: flex;
          flex-direction: column;
          gap: 32px;

          .img-bot-output {
            display: flex;


            img {
              @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
                width: auto;
                object-fit: cover;
                object-position: top;
              }
            }
          }

          .text-bottom-card {
            display: flex;
            @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
              padding: 0 0 32px 0;
            }
            @media screen and (max-width: $tabletMax) and (min-width: $tabletMin) {
              max-width: 158px;
            }

            h5 {
              @include h5-subtitle;
              padding: 0 0 0 24px;
              font-weight: 700;
              font-family: Arial;
              margin: 0;
              color: $black;
            }
          }
        }
      }
    }
  }
}
.site {
  @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
    display: flex;

  }
  .nav-bars{
    @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
    }
  }
}

/***
** Blog Sidebar
 */

.blog-container {
  display: flex;
  flex-direction: row;
  @media screen and (max-width: $tabletMax) and (min-width: $tabletMin) {
    flex-direction: column-reverse;
  }
  @media screen and (max-width: $mobileMax) and (min-width: $mobileMin) {
    flex-direction: column-reverse;
  }
  .blog-sidebar-container {
    display: flex;
    position: sticky;
    top: 0;
    @media screen and (max-width: $tabletMax) and (min-width: $tabletMin) {
      border-top: 1px solid $black10;
    }
    @media screen and (max-width: $mobileMax) and (min-width: $mobileMin) {
      border-top: 1px solid $black10;
    }

    .blog-sidebar-container-inner {
      display: flex;
      flex-direction: row;
      @media screen and (max-width: $tabletMax) and (min-width: $tabletMin) {
        width: 100%;
      }
      @media screen and (max-width: $mobileMax) and (min-width: $mobileMin) {
        width: 100%;
      }

      .blog-inner-mid-left {
        display: flex;
        flex-direction: column;
        min-height: 641px;
        min-width: 383px;
        max-width: 383px;
        position: sticky;
        top: 80px !important;
        border-right: 1px solid $black50;
        @media screen and (max-width: $tabletMax) and (min-width: $tabletMin) {
          display: flex;
          flex-direction: column;
          width: 100%;
          min-height: unset;
          max-width: unset;
          min-width: unset;
          border-right: unset;
          top: unset;
        }
        @media screen and (max-width: $mobileMax) and (min-width: $mobileMin) {
          display: flex;
          flex-direction: column;
          width: 100%;
          min-height: unset;
          max-width: unset;
          min-width: unset;
          border-right: unset;
          top: unset;
        }

        .filter-by-holder {
          display: flex;
          flex-direction: row;
          gap: 8px;
          align-items: center;
          margin: 80px 0 16px 80px;
          @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
            margin: 24px 0 24px 40px;
          }
          @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
            margin: 24px;
          }

          .filter-by-img {
            display: flex;
          }

          .filter-by-text {
            display: flex;

            .filter-by-text-output {
              display: flex;

              p {
                @include body-card;
                color: $black;
                font-family: Helvetica;
                font-weight: 300;
                margin: 0;
              }
            }
          }
        }

        .oi-categories-holder {
          display: flex;
          margin: 0 0 0 80px;
          @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
            margin: 0 40px;
          }
          @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
            margin: 0 24px;
          }

          .oi-categories-output {
            display: flex;
            flex-direction: column;
            gap: 16px;
            @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
              flex-direction: row;
            }
            @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
              flex-direction: column;
            }


            a {
              color: $black;
              font-weight: 700;
              text-decoration: none;
              @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
              }
              @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
                min-width: 65px;
              }
            }
          }
        }

        .recent-case-holder {
          display: flex;
          @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){

          }
          @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
            justify-content: center;
          }

          .recent-case-output {
            display: flex;
            flex-direction: column;
            margin: 0 0 0 80px;
            gap: 16px;
            @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
              margin: 0 40px;
            }
            @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
              margin: 0 auto;

            }

            .case-title {
              display: flex;
              margin: 24px 0 0 0;

              p {
                @include body-card;
                color: $black;
                font-family: Helvetica;
                font-weight: 300;
                margin: 0;
              }
            }

            .our-impact-sidebar-output {
              display: flex;

              a {
                display: flex;
                flex-direction: row;
                text-decoration: none;
                gap: 8px;

                .oisb-left-half {
                  .oisb-image {
                    max-width: 98px;
                    min-width: 98px;
                    @media screen and (max-width: $tabletMax) and (min-width: $tabletMin) {
                      max-width: unset;
                    }
                    @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){

                    }


                    img {

                    }
                  }
                }

                .oisb-right-half {
                  display: flex;
                  flex-direction: column;
                  gap: 8px;
                  max-width: 165px;
                  @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
                    max-width: unset;
                  }
                  @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
                    max-width: unset;
                  }

                  .oisb-date-holder {
                    display: flex;

                    .oisb-date {
                      display: flex;

                      p {
                        @include body-card;
                        color: $black75;
                        font-family: Helvetica;
                        font-weight: 300;
                        margin: 0;
                      }
                    }
                  }

                  .oisb-title-holder {
                    display: flex;

                    .oisb-title {
                      display: flex;

                      p {
                        @include small-link;
                        color: $black;
                        font-weight: 700;
                        font-family: Arial;
                        margin: 0;
                      }
                    }
                  }
                }
              }
            }
          }
        }

        .related-case-holder {
          display: flex;

          @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){

          }
          @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
            justify-content: center;
          }
          .related-case-output {
            display: flex;
            flex-direction: column;
            margin: 0 0 0 80px;
            gap: 16px;
            @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
              margin: 0 40px;
            }
            @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
              margin: 0 auto;
              padding:  0 0 40px 0;
            }

            .related-title {
              display: flex;
              margin: 24px 0 0 0;

              p {
                @include body-card;
                color: $black;
                font-family: Helvetica;
                font-weight: 300;
                margin: 0;
              }
            }

            .our-impact-sidebar-output {
              display: flex;

              a {
                display: flex;
                flex-direction: row;
                text-decoration: none;
                gap: 8px;

                .oisb-left-half {
                  .oisb-image {
                    max-width: 98px;
                    min-width: 98px;
                    @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
                      max-width: unset;
                    }
                    @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){

                    }
                    img {

                    }
                  }
                }

                .oisb-right-half {
                  display: flex;
                  flex-direction: column;
                  gap: 8px;
                  max-width: 165px;
                  @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
                    max-width: unset;
                  }
                  @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
                    max-width: unset;
                  }

                  .oisb-date-holder {
                    display: flex;

                    .oisb-date {
                      display: flex;

                      p {
                        @include body-card;
                        color: $black75;
                        font-family: Helvetica;
                        font-weight: 300;
                        margin: 0;
                      }
                    }
                  }

                  .oisb-title-holder {
                    display: flex;

                    .oisb-title {
                      display: flex;

                      p {
                        @include small-link;
                        color: $black;
                        font-weight: 700;
                        font-family: Arial;
                        margin: 0;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .inner-mid-right {
    display: flex;
    flex-direction: column;
    .blog-article {
      display: flex;
      flex-direction: column;
      margin: 0 0 0 80px;
      max-width: 897px;
      @media screen and (max-width: $tabletMax) and (min-width: $tabletMin){
        margin: 0 40px;
      }
      @media screen and (max-width: $mobileMax) and (min-width: $mobileMin){
        margin: 0 24px;
      }
      .entry-header {
        display: flex;
        flex-direction: column;
        h4 {
          @include h4;
          color: $black;
          font-weight: 700;
          font-family: Arial;
          margin: 80px 0 16px 0;
        }
        .entry-meta {
          display: flex;
          font-family: Helvetica;
          #text {
            display: none;
          }
          .posted-on {
            margin: 0 0 32px 0;
          }
        }
      }
      .entry-content {
        display: flex;
        flex-direction: column;
        color: $black;
        font-family: Arial;

        font-weight: 300;
        ul {
          margin: 32px 0 32px 0;
          padding: 0 0 0 26px;
        }
        img {
          width: 100%;
        }
      }
    }
  }
}

.button-outer-holder {
  display: flex;
  flex-direction: row;
  gap: 24px;
  @media screen and (max-width: $mobileMax) and (min-width: $mobileMin) {
    flex-direction: column;
  }
  .button-holder-section-two {
    display: flex;
    margin: 0 0 52px 80px;
    @media screen and (max-width: $mobileMax) and (min-width: $mobileMin) {
      margin: 0 auto;
    }
    @media screen and (max-width: $tabletMax) and (min-width: $tabletMin) {
      margin: 0 0 52px 40px;
    }

    .button-holder-output {
      display: flex;
      border-radius: 4px;
      cursor: pointer;

      a {
        text-decoration: none;
        cursor: pointer;

        .btn-link-four {
          display: flex;
          padding: 8px 24px;
          background: $white;
          transition: background-color 0.3s ease;
          @media screen and (max-width: $mobileMax) and (min-width: $mobileMin) {
            width: 312px;
            justify-content: center;
          }

          .btn-txt-four {
            display: flex;
            align-items: center;

            h5 {
              margin: 0;
              color: $blue100;
              line-height: 150%;
              font-weight: 400;
              font-family: Arial;
              font-size: 18px;
              transition: color 0.3s ease;
            }

            .arrow-up {
              display: flex;
              margin: 0 0 0 8px;
              stroke: $blue100;
              transition: fill 0.3s ease, stroke 0.3s ease;
            }

            .arrow-up-hover {
              display: none;
              margin: 0 0 0 8px;
              stroke: $white;
              transition: fill 0.3s ease, stroke 0.3s ease;
            }
          }
        }

        &:hover .btn-link-four {
          background-color: #7E92AA;
        }

        &:hover .btn-txt-four h5 {
          color: $white;
        }

        &:hover .btn-txt-four .arrow-up {
          display: none;
        }

        &:hover .btn-txt-four .arrow-up-hover {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}

/**
**Disclaimers
 */

.disclaimer-text {
  display: flex;
  justify-content: flex-end;
  .disc-holder-inner {
    p {
      margin: 6px 0 0 0;
      font-size: 1rem;
      line-height: 1;
      font-weight: 300;
      color: #0000005C;
      font-family: Helvetica;
    }
  }
}