.restrict_mobile {
  width: 100vw;
  height: 100vh;
  min-width: 100vw;
  min-height: 100vh;
  width: 100dvw;
  height: 100dvh;
  min-width: 100dvw;
  min-height: 100dvh;
  inset: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 7000;

  background-color: var(--secondary_color);
  display: none;
  justify-content: center;
  align-items: center;
  h2 {
    text-align: center;
    width: 90%;
    margin: auto;
    font-weight: 400;
    color: var(--white_color);
    font-size: 16px;
  }
}
.loader {
  width: 100vw;
  height: 100vh;
  min-width: 100vw;
  min-height: 100vh;
  width: 100dvw;
  height: 100dvh;
  min-width: 100dvw;
  min-height: 100dvh;
  inset: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8000;
  background-color: var(--secondary_color);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: 250ms ease-in-out;

  .loader_spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    border-top: 4px solid var(--white_color);
    border-right: 4px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }
  .loader_spinner::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border-left: 4px solid var(--theme_color);
    border-bottom: 4px solid transparent;
    animation: rotation 0.5s linear infinite reverse;
  }
  &.visible {
    opacity: 1;
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.layer {
  background-color: var(--theme_color_rgba);
  min-width: var(--width_100);
  min-height: var(--width_100);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.main_buttons {
  background-color: var(--secondary_color);
  border: 1px solid var(--secondary_color);
  padding: var(--size_0p4em) var(--size_2p5em);
  color: var(--theme_color);
  &:hover {
    background-color: var(--white_color);
    border: 1px solid var(--theme_color);
  }
}
.show_mobile {
  display: none;
}
.data_form {
  width: var(--width_100);
  .form_intro {
    width: var(--width_100);
    margin-bottom: var(--size_1p5em);
    .icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: var(--white_color);
      border: 1px solid var(--secondary_color);
      margin: auto;
      margin-bottom: var(--size_0p6em);
      svg {
        width: var(--width_70);
        height: var(--width_70);
        path {
          fill: var(--secondary_color);
        }
      }
    }
    p {
      width: var(--width_100);
      text-align: center;
      color: var(--secondary_color);
      font-size: var(--size_0p95rem);
      font-weight: 400;
      margin-top: var(--size_0p2em);
    }
    h3,
    h4 {
      color: var(--secondary_color);
      text-align: center;
      width: var(--width_100);
      font-weight: 400;
    }
    h3 {
      text-transform: uppercase;
      font-size: var(--size_1p5rem);
      margin-bottom: var(--size_0p2em);
    }
    &.verified {
      .icon {
        border: 1px solid var(--success_clr);

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

      h3,
      h4 {
        color: var(--success_clr);
      }
    }
  }
  .field_group {
    width: var(--width_100);
    margin-bottom: var(--size_1p0em);
    .form_control_group {
      color: var(--white_color);
      flex: 1;
      label {
        display: block;
        width: var(--width_100);
        margin-bottom: var(--size_0p2em);
        font-size: var(--size_1p0rem);
      }
      textarea,
      input {
        display: block;
        width: var(--width_100);
        background-color: transparent;
        border-radius: 4px;
        outline: none;
        border: 1px solid var(--white_color);
        padding: var(--size_0p4em) var(--size_0p8em);
        color: var(--white_color);
        font-size: var(--size_0p85rem);
        font-weight: 400;
        &::placeholder {
          color: var(--white_color_rgba);
          opacity: 0.4;
          font-size: var(--size_0p8rem);
        }
      }
      textarea {
        max-height: 100px;
        resize: none;
      }
    }
    &.double {
      display: flex;
      justify-content: space-between;
      gap: var(--size_0p5em);
    }
    &.wallet_details {
      position: relative;
      .form_control_group {
        position: relative;
        z-index: 2;
        input {
          border: 1px solid var(--white_color_rgba2);
          color: var(--theme_color);
          font-style: italic;
        }
      }
      .copy_btn {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 5;
        border-radius: 50%;
        background-color: transparent;
        border: 0;
        outline: none;
        cursor: pointer;

        svg {
          width: 20px;
          height: 20px;
          path {
            fill: var(--white_color);
          }
        }
      }
    }
  }
  .submit_button {
    display: block;
    margin-left: 0;
    border: 1px solid var(--white_color);
    color: var(--secondary_color);
    background-color: var(--white_color);
    text-align: center;
    padding: var(--size_0p4em) var(--size_4p0em);
    border-radius: 4px;
    &:hover {
      color: var(--white_color);
      background-color: transparent;
    }
  }
  &.contact_form {
    .field_group {
      .form_control_group {
        label {
          display: none;
        }
      }
    }
  }
  &.news_form {
    .field_group {
      .btn {
        width: var(--width_30);
        background-color: var(--white_color);
        border-radius: 4px;
        border: 1px solid var(--white_color);
        color: var(--secondary_color);
        &:hover {
          color: var(--white_color);
          background-color: transparent;
        }
      }
      .form_control_group {
        width: var(--width_60);

        label {
          display: none;
        }
      }
    }
  }
  &.account_form {
    background-color: var(--white_color);
    .field_group {
      .form_control_group {
        color: var(--secondary_color);
        position: relative;

        textarea,
        input {
          border-radius: 0px;
          border-bottom-left-radius: 10px;
          border: 0;
          border-bottom: 1px solid var(--secondary_color);
          padding: var(--size_0p4em) var(--size_0p8em);
          color: var(--secondary_color);
          font-size: var(--size_1p0rem);
          &::placeholder {
            color: var(--line_color);
            font-size: var(--size_0p9rem);
            opacity: 0.85;
          }
          &.value_selector {
            padding: var(--size_0p4em) var(--size_0p2em);
          }
        }
        textarea {
          max-height: 100px;
          resize: none;
        }
        &.phone_selector {
          input#phone_number {
            padding-left: 55px;
          }
          input#deposit_number {
            padding-left: 55px;
          }
          input#withdraw_number {
            padding-left: 55px;
          }
        }
      }
      .other_actions {
        color: var(--line_color);
        gap: var(--size_0p4em);

        p {
          font-weight: 400;
          font-size: var(--size_0p95rem);
          color: var(--secondary_color);
        }
        .btn {
          border: 0;
          font-weight: 500;
          font-size: var(--size_0p95rem);
          color: var(--secondary_color);
        }
        .form_control_group {
          position: relative;
          margin-right: var(--size_0p6em);
          label {
            display: flex;
            position: absolute;
            width: 16px;
            height: 16px;
            background-color: var(--white_color);
            cursor: pointer;
            border: 1px solid var(--secondary_color);
            border-radius: 2px;
            left: 0;
            &.checked {
              background-color: var(--secondary_color);
            }

            svg {
              width: var(--width_70);
              height: var(--width_70);
              path {
                fill: var(--white_color);
                stroke-width: 0px;
              }
            }
          }
          input {
            opacity: 0;
            pointer-events: none;
          }
        }
      }
      .btn.alt_btn {
        border: 0;
        color: var(--secondary_color);
        font-weight: 500;
        font-size: var(--size_0p95rem);
      }
      &.double {
        gap: var(--size_0p8em);
      }
    }
    .submit_button {
      display: block;
      margin-left: auto;
      margin-top: var(--size_1p2em);
      border: 1px solid var(--secondary_color);
      color: var(--white_color);
      background-color: var(--secondary_color);
      padding: var(--size_0p4em) var(--size_4p0em);
      &:hover {
        color: var(--secondary_color);
        background-color: var(--white_color);
      }
    }
  }
}
.error_messages {
  position: absolute;
  top: 10%;
  left: 10%;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  transition: 300ms ease-in-out;
  padding: var(--size_0p6em);
  background-color: var(--white_color);
  border: 1px solid var(--success_clr);
  border-radius: 4px;
  gap: var(--size_1p0em);
  p {
    flex: 1;
    font-size: var(--size_0p85rem);
    font-style: italic;
    font-weight: 400;
  }
  .close_btn {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    flex-grow: 0;
    svg {
      width: 100%;
      height: 100%;
      path {
        fill: var(--secondary_color);
      }
    }
  }
  &.account_error_messages {
    width: 80%;
    position: fixed;
    left: 50%;
    translate: -50%;
    border: 1px solid var(--success_clr);
    z-index: 50;
    &.show {
      opacity: 1;
      pointer-events: initial;
      top: 5%;
    }
  }
  &.show {
    opacity: 1;
    pointer-events: initial;
    top: 2%;
  }
  &.success {
    border: 1px solid var(--success_clr);
    p {
      color: var(--success_clr);
    }
  }
  &.error {
    border: 1px solid var(--fail_clr);
    p {
      color: var(--fail_clr);
    }
  }

  &.dashboard_errors {
    width: var(--width_80);
    border-radius: 8;
    left: 50%;
    translate: -50%;
    &.show {
      opacity: 1;
      pointer-events: initial;
      top: 8px;
    }
  }
}
.auth_nav {
  width: var(--width_100);
  transition: all 300ms ease-in-out;
  position: fixed;
  left: 0;
  bottom: -20%;
  z-index: 6000;
  opacity: 0;
  pointer-events: none;
  transition: all 350ms ease-in-out;

  .navigation {
    width: var(--width_100);
    background-color: var(--secondary_color);
    padding: var(--size_1p0rem) 0;
    border-top: 1px solid var(--white_color);
    transition: all 300ms ease-in-out;
    z-index: 4;

    .navigation_list {
      max-width: var(--width_85);
      margin: auto;
      gap: 20px;
    }

    .navigation_item {
      .btn {
        cursor: pointer;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        svg {
          width: 23px;
          height: 23px;
          path {
            fill: var(--white_color);
          }
        }

        span {
          font-size: var(--size_0p85rem);
          font-weight: 300;
          text-align: center;
        }

        &.current,
        &:hover {
          color: var(--theme_color);
          svg {
            path {
              fill: var(--theme_color);
            }
          }

          span {
            color: var(--theme_color);
          }
        }
      }
    }
    &.more_nav {
      width: var(--width_100);
      background-color: var(--secondary_color);
      position: absolute;
      z-index: 1;
      top: 10%;
      left: 0;
      &.visible{
        opacity: 1;
        pointer-events: initial;
        top: -100%;
      }

    }
  }
  &.visible{
    opacity: 1;
    bottom: 0;
    pointer-events: initial;
  }
}
.mobile_nav {
  width: var(--width_100);
  transition: all 300ms ease-in-out;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 6000;
  display: none;

  .navigation {
    width: var(--width_100);
    background-color: var(--secondary_color);
    padding: var(--size_1p0rem) 0;
    border-top: 1px solid var(--white_color);

    .navigation_list {
      max-width: var(--width_85);
      margin: auto;
      gap: 20px;
    }

    .navigation_item {
      .btn {
        cursor: pointer;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        svg {
          width: 25px;
          height: 25px;
          path {
            fill: var(--white_color);
          }
        }

        span {
          font-size: var(--size_0p85rem);
          font-weight: 300;
          text-align: center;
        }

        &.current,
        &:hover {
          color: var(--theme_color);
          svg {
            path {
              fill: var(--theme_color);
            }
          }

          span {
            color: var(--theme_color);
          }
        }
      }
    }
  }
}

.mother_container {
  background-color: var(--white_color);
  background-attachment: fixed;
  position: relative;
  .error_messages {
    width: 80%;
    margin: auto;
    left: 50%;
    translate: -50%;
  }

  .main_nav {
    width: var(--width_100);
    padding: var(--size_2p0rem) 0;
    transition: all 300ms ease-in-out;
    background-color: transparent;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    top: 0;
    z-index: 40;

    .layer {
      background-color: var(--secondary_color_rgba);
      &::before {
        content: "";
        background-color: var(--theme_color_rgba2);
        position: absolute;
        right: 0;
        left: 0;
        width: var(--width_100);
        height: var(--width_100);
      }
    }
    .error_messages {
      width: 80%;
      margin: auto;
      left: 50%;
      translate: -50%;
    }
    .nav_below {
      margin: auto;
      max-width: 1200px;
      position: relative;
      z-index: 6;

      .logo_area {
        flex: 1;
        .logo_btn {
          border: 0;
          outline: none;
          cursor: pointer;

          img {
            width: 200px;
          }

          &.transparent {
            background-color: transparent;
          }
        }
      }

      .navigation {
        flex: 2;
        .navigation_list {
          display: inline-flex;
          .navigation_item {
            &:not(:last-child) {
              margin-right: var(--size_0p6em);
            }
            .nav_link {
              padding: var(--size_0p2em) var(--size_0p8em);
              font-size: var(--size_1p0rem);
              color: var(--white_color);
              position: relative;
            }
          }
          &.main_list {
            .navigation_item {
              .nav_link {
                position: relative;
                &::after {
                  content: "";
                  width: 0;
                  height: 2px;
                  background-color: var(--theme_color);
                  position: absolute;
                  left: 50%;
                  transition: inherit;
                  transform: translateX(-50%);
                  bottom: 0;
                }

                &.current,
                &:hover {
                  color: var(--theme_color);
                  &::after {
                    width: var(--width_80);
                  }
                }
              }
            }
          }

          &.auth_list {
            .navigation_item {
              &:first-child {
                margin-right: var(--size_1p2em);
              }
              .nav_link {
                background-color: var(--white_color);
                border: 1px solid var(--white_color);
                color: var(--theme_color);
                font-weight: 400;
                &:hover {
                  background-color: transparent;
                  color: var(--white_color);
                }
              }
            }
          }
        }
      }
    }
    &.fixed {
      background-image: none;
      background-color: var(--secondary_color);
      border-bottom: 1px solid var(--white_color);
      position: fixed;
      top: 0;
      left: 0;
      .layer {
        display: none;
      }
      .nav_below {
        .navigation {
          .navigation_list {
            &.main_list {
              .navigation_item {
                .nav_link {
                  &::after {
                    background-color: var(--theme_color);
                  }

                  &.current,
                  &:hover {
                    color: var(--theme_color);
                  }
                }
              }
            }

            &.auth_list {
              .navigation_item {
                .nav_link {
                  &:hover {
                    border: 1px solid var(--white_color);
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .home {
    width: var(--width_100);
    background-image: url("/images/hero_bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 20;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    margin-bottom: 25vh;

    .layer {
      background-color: var(--secondary_color_rgba);
      &::before {
        content: "";
        background-color: var(--theme_color_rgba2);
        position: absolute;
        right: 0;
        left: 0;
        width: var(--width_100);
        height: var(--width_100);
      }
    }
    /* &::before {
      content: "";
      background-color: var(--secondary_color_rgba);
      position: fixed;
      right: 0;
      left: 0;
      width: var(--width_100);
      height: var(--width_100);
    } */

    .hero {
      max-width: 1200px;
      margin: auto;
      position: relative;
      z-index: 2;
      padding-top: 20vh;

      .hero_content {
        color: var(--white_color);
        max-width: var(--width_65);
        h1 {
          text-transform: uppercase;
          font-size: var(--size_3p0rem);
          width: var(--width_100);
          line-height: var(--size_1p4em);
          margin-bottom: var(--size_0p5em);
          font-weight: 300;
        }
        h4 {
          font-size: var(--size_1p0rem);
          text-align: justify;
          font-weight: 400;
          margin-bottom: var(--size_2p0em);
        }
        .call_action {
          gap: var(--size_1p2em);
          span {
            flex-shrink: 0;
            position: relative;
            width: 200px;
            height: 8px;
            background-color: var(--white_color);
            border-radius: 5px;
          }
          button {
            background-color: var(--white_color);
            border: 1px solid var(--white_color);
            padding: var(--size_0p4em) var(--size_2p2em);
            color: var(--theme_color);
            &:hover {
              background-color: transparent;
              color: var(--white_color);
            }
          }
        }
      }
    }
    .slider_buttons {
      width: 20px;
      position: absolute;
      z-index: 2;
      right: 8%;
      top: 50%;
      /* translate: x y z ; */
      translate: 0 -50%;
      .buttons_bar {
        width: 10px;
        border-radius: 8px;
        gap: 20px;

        button {
          width: 8px;
          height: 20px;
          opacity: 0.4;
          border: 0;
          cursor: pointer;
          cursor: pointer;
          background-color: var(--white_color);
          border-radius: 8px;
          &.current {
            opacity: 1;
          }
        }
      }
    }

    &.auth_home {
      margin-bottom: 0;
      background-image: url("/images/auth_bg.jpg");
      &::before {
        background-color: var(--secondary_color_rgba);
      }
      .hero {
        max-width: var(--width_100);
        border-top: 1px solid var(--white_color);
        background-color: var(--secondary_color);
        position: relative;
        max-height: 100vh;
        overflow: hidden;

        padding-top: 0;
        padding-bottom: 0;

        .form_buttons {
          flex-basis: 30%;
          width: 30%;
          position: relative;
          background-color: var(--secondary_color);
          z-index: 5;
          height: 100%;
          .controllers {
            position: absolute;
            right: 0;
            top: 50%;
            translate: 0 -50%;

            .btn {
              display: block;
              padding: var(--size_0p6em);
              background-color: transparent;
              width: 100px;
              border-top-left-radius: 20px;
              border-bottom-left-radius: 20px;
              border-top-right-radius: 0px;
              border-bottom-right-radius: 0px;
              border: 0;
              color: var(--white_color);
              position: relative;
              span {
                pointer-events: none;
              }

              .span_top {
                width: 20px;
                height: 20px;
                border-bottom-right-radius: 100%;
                position: absolute;
                right: 0px;
                top: -20px;
                background-color: transparent;

                box-shadow: 6px 6px 0 3px transparent;

                /* box-shadow: x-offset y-offset blur-radius spread-radius shadow-color */
              }
              .span_bottom {
                width: 20px;
                height: 20px;
                border-top-right-radius: 100%;
                position: absolute;
                right: 0px;
                bottom: -20px;
                background-color: transparent;

                box-shadow: 6px -6px 0 3px transparent;

                /* box-shadow: x-offset y-offset blur-radius spread-radius shadow-color */
              }

              &.current {
                background-color: var(--white_color);
                color: var(--secondary_color);

                .span_top {
                  box-shadow: 6px 6px 0 3px var(--white_color);
                }
                .span_bottom {
                  box-shadow: 6px -6px 0 3px var(--white_color);
                }
              }
            }
          }
          &.subscribe {
            .controllers {
              .btn {
                width: 140px;
              }
            }
          }
        }
        .form_content {
          background-color: var(--white_color);
          position: relative;
          z-index: 5;
          flex-basis: 70%;
          width: 70%;

          .forms_container {
            width: var(--width_100);
            padding: var(--size_4p0em);
            padding-right: var(--width_20);
            position: relative;
            justify-content: flex-start;
            align-items: center;

            .data_form {
              width: var(--width_70);
              margin: auto;

              border: 1px solid var(--white_color);
              border-radius: 10px;

              transition: 300ms ease-in-out;
              position: relative;
              .form_data {
                width: var(--width_100);
              }
              &#login_form {
                z-index: 6;
                translate: 0 50%;
              }
              &#signup_form {
                z-index: 2;
                translate: 0 120%;
              }
              &.focus#login_form {
                translate: 0 -120%;
              }
              &.focus#signup_form {
                translate: 0 -50%;
              }
              /*
              
              &.focus#signup_form {
                translate: 0 0;
              } */

              &.recover_form {
                max-width: var(--width_100);
              }
            }
            .linkerrs {
              position: absolute;
              top: 8%;
              left: 50%;
              z-index: 200;
              translate: -50%;
              font-size: 12px;
              text-align: center;
              color: var(--fail_clr);
              font-style: italic;
              background-color: var(--white_color);
              border: 1px solid var(--fail_clr);
              border-radius: 6px;
              width: var(--width_90);
              padding: 10px;
              opacity: 0;
              transition: 300ms ease;
              &.visible {
                opacity: 1;
              }
            }
          }

          &.recover_content {
            width: 100%;
            flex-basis: 100%;
            min-height: 100vh;

            .forms_container {
              width: var(--width_100);
              padding-right: var(--size_4p0em);
              position: relative;
              justify-content: center;
              align-items: center;

              .data_form {
                width: var(--width_60);
                margin: auto;

                border: 1px solid var(--white_color);
                border-radius: 10px;

                transition: 300ms ease-in-out;
                position: relative;
                .form_data {
                  width: var(--width_100);
                }
                &#login_form {
                  z-index: 6;
                  translate: 0 50%;
                }
                &#signup_form {
                  z-index: 2;
                  translate: 0 120%;
                }
                &.focus#login_form {
                  translate: 0 -120%;
                }
                &.focus#signup_form {
                  translate: 0 -50%;
                }
                /*
              
              &.focus#signup_form {
                translate: 0 0;
              } */

                &.recover_form {
                  max-width: var(--width_100);
                }
              }
            }
          }
        }
        &::before {
          width: 100vw;
          height: 100vh;
          z-index: 10;
          background-color: var(--white_color);
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
  }

  .section {
    width: var(--width_100);

    .headline {
      max-width: 1200px;
      margin: auto;
      margin-bottom: var(--size_4p5em);

      h4 {
        text-transform: uppercase;
        font-weight: 400;
        font-size: var(--size_1p2rem);
        margin-bottom: var(--size_0p4em);
        text-align: center;
        color: var(--theme_color);
        width: var(--width_100);
      }
      h2 {
        width: var(--width_100);
        font-size: var(--size_2p2rem);
        text-align: center;
        font-weight: 400;
        margin-bottom: var(--size_0p2em);
        position: relative;
        &::before {
          content: "";
          height: 2px;
          background-color: var(--theme_color);
          width: var(--width_30);
          position: absolute;
          left: 50%;
          bottom: -20%;
          translate: -50%;
          border-radius: 10px;
        }
        &::after {
          content: "";
          height: 18px;
          width: 18px;
          border-radius: 50%;
          border: 1px solid var(--theme_color);
          background-color: var(--white_color);

          position: absolute;
          left: 50%;
          bottom: calc(-20% - 7px);
          translate: -50%;
        }
      }
    }
/* max-width: var(--width_80); */
    .section_wrapper {
      max-width: 1200px;
      
      margin: auto;

      .section_col {
        .about_image {
          width: var(--width_80);
          min-height: 400px;
          background-image: url("/images/about_bg.jpg");
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          border-radius: 4px;
          position: relative;
          .small_image {
            width: 200px;
            height: 180px;
            border-radius: 4px;
            border-top-left-radius: 0px;
            position: absolute;
            right: -100px;
            bottom: 0;
            background-image: url("/images/about_image2.jpg");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            &::after {
              content: "";
              height: 6px;
              background-color: var(--white_color);
              width: 106px;
              position: absolute;
              left: -6px;
              top: -6px;
              border-top-left-radius: 8px;
              border-top-right-radius: 0px;
              border-bottom-left-radius: 8px;
              border-bottom-right-radius: 0px;
            }
            &::before {
              content: "";
              height: calc(100% + 6px);
              background-color: var(--white_color);
              width: 6px;
              position: absolute;
              left: -6px;
              top: -6px;
              border-radius: 4px;
              border-top-left-radius: 8px;
              border-top-right-radius: 8px;
              border-bottom-left-radius: 0px;
              border-bottom-right-radius: 0px;
            }
          }
        }
        .about_content {
          width: var(--width_100);

          h4 {
            color: var(--theme_color);
            text-transform: uppercase;
            font-weight: 400;
            font-size: var(--size_1p2rem);
            margin-bottom: var(--size_0p6em);
          }
          h2 {
            color: var(--secondary_color);
            font-size: var(--size_2p2rem);
            text-align: justify;
            font-weight: 400;
            margin-bottom: var(--size_0p2em);
          }
          p {
            font-size: var(--size_1p1rem);
            font-weight: 400;
            margin-bottom: var(--size_1p2em);
            text-align: justify;
            color: var(--secondary_color);
          }
        }
        button {
          float: right;
        }
      }
    }

    &.vision {
      position: relative;
      z-index: 25;
      .vision_bar {
        width: var(--width_70);
        position: absolute;
        z-index: 2;
        bottom: 100px;
        left: 50%;
        translate: -50%;
        gap: var(--size_2p0em);

        .card {
          background-color: var(--secondary_color);
          border-radius: 2px;
          border: 0.65px solid var(--white_color_rgba);
          padding: var(--size_1p0em);
          min-height: 240px;
          flex: 1;
          .icon {
            margin-bottom: var(--size_1p2em);
            gap: var(--size_0p8em);

            h3 {
              text-transform: uppercase;
              font-size: var(--size_1p2rem);
              color: var(--theme_color);
              font-weight: 500;
              flex: 1;
              padding-bottom: var(--size_0p2em);
              border-bottom: 2px solid var(--theme_color);
            }
            svg {
              height: 30px;
              width: 30px;
              flex-shrink: 0;
              path {
                fill: var(--theme_color);
              }
            }
          }
          p {
            text-align: justify;
            color: var(--white_color);
            font-size: var(--size_0p95rem);
          }
        }
      }
    }

    &.about {
      .section_wrapper {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--width_5);
        margin-bottom: 15vh;
        padding-top: 6vh;
      }
    }
    &.not_found {
      height: 100vh;
      overflow: hidden;
      .section_wrapper {
        background-color: var(--sec_rgba_clr);
        border: 1px solid var(--theme_color);
        padding: var(--size_2p2em);
        border-radius: 4px;
        h1 {
          font-size: var(--size_2p4rem);
          font-weight: 500;
          margin-bottom: var(--size_0p6em);
        }
        .red_buttons {
          gap: var(--size_1p0em);
          .btn {
            padding: var(--size_0p5em) var(--size_2p4em);
            border: 1px solid transparent;
            &:hover {
              background-color: var(--theme_color);
              border: 1px solid var(--theme_color);
              color: var(--white_color);
            }
            &:first-child {
              background-color: var(--theme_color);
              color: var(--white_color);
              border: 1px solid var(--theme_color);
              &:hover {
                background-color: var(--white_color);
                border: 1px solid var(--theme_color);
                color: var(--theme_color);
              }
            }
          }
        }
      }
    }
    &.services {
      background-color: var(--secondary_color);
      padding: 6em 0;

      & > .main_buttons {
        display: block;
        margin: auto;
        margin-top: 10vh;
        float: unset;
        background-color: var(--white_color);
        color: var(--theme_color);
        border-color: var(--white_color);
        &:hover {
          background-color: var(--secondary_color);
          border-color: var(--theme_color);
          color: var(--theme_color);
        }
      }

      .headline {
        margin-bottom: 20vh;
        h2 {
          color: var(--white_color);
        }
      }
      .section_wrapper {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--width_025);
        .section_col {
          .service_card {
            position: relative;
            min-height: 400px;
            /* border: 1px solid var(--body_clr); */
            border-radius: 8px;
            box-shadow:
              rgba(1, 180, 1, 0.25) 0px 2px 5px -1px,
              rgba(255, 255, 255, 0.3) 0px 1px 3px -1px;
            /* box-shadow: none|h-offset v-offset blur spread color; */
            .card_layer {
              background-color: var(--white_color);
              color: var(--secondary_color);
              position: absolute;
              border-radius: 8px;
              z-index: 5;
              bottom: 0;
              left: 0;
              transition: all 350ms ease;
              width: var(--width_100);
              overflow: hidden;
              height: 0;
              .layer_content {
                padding: var(--size_2p2em) var(--size_1p2em);
                width: var(--width_100);
                .card_icon {
                  width: 40px;
                  height: 40px;
                  background-color: var(--white_color);
                  border: 1px solid var(--secondary_color);
                  margin: auto;
                  margin-bottom: var(--size_1p0em);
                  border-radius: 50%;

                  svg {
                    width: 25px;
                    height: 25px;
                    path {
                      fill: var(--theme_color);
                    }
                  }
                }
                h2 {
                  text-transform: uppercase;
                  font-weight: 500;
                  font-size: var(--size_1p1em);
                  margin-bottom: var(--size_1p0em);
                  text-align: center;
                  color: var(--secondary_color);
                }
                p {
                  text-align: justify;
                  font-size: var(--size_1p0rem);
                  font-weight: 400;
                  margin-bottom: var(--size_1p0em);
                  color: var(--secondary_color);
                }
                .main_buttons {
                  display: block;
                  margin: auto;
                  margin-top: var(--size_2p0em);
                  float: unset;
                  width: var(--width_70);
                  color: var(--secondary_color);
                  background-color: var(--white_color);
                  border-color: var(--secondary_color);
                  &:hover {
                    border-color: var(--theme_color);
                    color: var(--theme_color);
                  }
                }
              }
            }
            .card_content {
              position: relative;
              width: var(--width_100);
              height: var(--width_100);
              z-index: 2;

              .card_image {
                width: var(--width_90);
                position: absolute;
                left: 50%;
                translate: -50%;
                top: -100px;
                min-height: 260px;
                border-radius: 8px;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                transition: all 300ms ease;
                &::before {
                  content: "";
                  background-color: var(--secondary_color_rgba);
                  position: absolute;
                  right: 0;
                  border-radius: 4px;
                  z-index: 1;
                  left: 0;
                  width: var(--width_100);
                  height: var(--width_100);
                }
                &::after {
                  content: "";
                  background-color: var(--theme_color_rgba2);
                  position: absolute;
                  right: 0;
                  border-radius: 4px;
                  z-index: 2;
                  left: 0;
                  width: var(--width_100);
                  height: var(--width_100);
                  opacity: 0.3;
                }
              }
              .card_card_content {
                padding: var(--size_2p2em) var(--size_1p2em);
                color: var(--white_color);
                padding-top: 200px;

                h2 {
                  text-transform: uppercase;
                  font-weight: 500;
                  margin-bottom: var(--size_1p1em);
                  font-size: var(--size_1p2rem);
                }
                h4 {
                  text-align: justify;
                  font-weight: 400;
                  font-size: var(--size_1p0rem);
                }
                .main_buttons {
                  margin-top: var(--size_0p4em);
                  text-align: right;
                  padding: var(--size_0p4em) 0 var(--size_0p4em)
                    var(--size_0p8em);
                }
                /* .show_mobile  */
              }
            }

            &:hover {
              .card_layer {
                height: var(--width_100);
              }
              .card_content {
                .card_image {
                  min-height: 0;
                }
              }
            }
          }
          &.middle {
            margin-top: 10vh;
          }
        }
      }
    }

    &.investment {
      padding: 6em 0;

      & > .main_buttons {
        display: block;
        margin: auto;
        margin-top: 10vh;
        float: unset;
        background-color: var(--secondary_color);
        color: var(--white_color);
        border-color: var(--secondary_color);
        &:hover {
          background-color: var(--white_color);

          color: var(--secondary_color);
        }
      }

      .headline {
        margin-bottom: 10vh;
        h2 {
          &::after {
            border: 1px solid var(--white_color);
            background-color: var(--theme_color);
          }
        }
      }
      .section_wrapper {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--width_025);
        .section_col {
          .service_card {
            position: relative;
            min-height: 500px;
            border: 1px solid var(--secondary_color);
            border-radius: 8px;
            background-color: var(--white_color);

            .card_layer {
              background-color: var(--secondary_color);
              color: var(--white_color);
              position: absolute;
              border-radius: 8px;
              z-index: 2;
              bottom: 0;
              left: 0;
              transition: all 350ms ease;
              width: 0;
              height: var(--width_100);
            }

            .plan_name {
              width: var(--width_100);
              background-color: var(--secondary_color);
              position: relative;
              z-index: 5;
              border-top-left-radius: 8px;
              border-top-right-radius: 8px;
              text-align: center;
              padding: var(--size_1p4em) var(--size_0p6em);
              color: var(--white_color);
              margin-bottom: var(--size_1p0em);
              border-bottom: 1px solid var(--white_color);

              .icon {
                display: block;
                margin: auto;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                svg {
                  width: 45px;
                  height: 45px;
                  path {
                    fill: var(--theme_color);
                  }
                }
              }
              h2 {
                font-weight: 400;
                font-size: var(--size_1p4rem);
                font-family: var(--minor_family);
                text-transform: uppercase;
                margin-bottom: var(--size_0p8em);
              }
              h3 {
                font-weight: 400;
                font-size: var(--size_2p0rem);
                font-family: var(--minor_family);
                text-transform: uppercase;
                margin-bottom: var(--size_0p2em);
                color: var(--theme_color);
              }
              h4 {
                font-weight: 400;
                font-size: var(--size_1p2rem);
              }
            }
            .plan_details {
              position: relative;
              z-index: 4;
              padding: var(--size_0p5em) var(--size_1p0em);

              h3 {
                font-weight: 500;
                font-size: var(--size_1p2rem);
                text-transform: uppercase;
                margin-bottom: var(--size_0p4em);
              }
              ul {
                width: var(--width_100);
                padding-left: var(--size_0p5em);
                li {
                  width: var(--width_100);
                  font-weight: 400;
                  font-size: var(--size_1p0rem);
                  gap: var(--size_0p6em);

                  &:not(:last-child) {
                    margin-bottom: var(--size_0p4em);
                  }
                  span {
                    flex-shrink: 0;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background-color: var(--secondary_color);
                  }
                }
              }
            }
            .plan_button {
              position: absolute;
              right: 0;
              bottom: 0;
              z-index: 6;

              .plan_buttons {
                width: 150px;
                color: var(--secondary_color);
                background-color: var(--white_color);
                font-size: var(--size_1p2rem);
                padding: var(--size_0p6em);
                border-top-left-radius: 8px;
                border-bottom-right-radius: 8px;
                border-top: 2px solid var(--secondary_color);
                border-left: 2px solid var(--secondary_color);
                float: none;
                text-align: center;
                font-weight: 400;

                &:hover {
                  border-top: 2px solid var(--white_color);
                  border-left: 2px solid var(--white_color);
                  color: var(--white_color);
                  background-color: var(--secondary_color);
                }
              }
            }
            .interests {
              margin-top: var(--size_1p2em);
              padding-left: var(--size_1p2em);
              position: relative;
              z-index: 4;
              color: var(--theme_color);
              h3 {
                font-weight: 400;
                font-size: var(--size_2p0rem);
              }
              h4 {
                font-weight: 300;
                font-size: var(--size_1p0rem);
              }
            }
            &:hover {
              .card_layer {
                width: var(--width_100);
              }
              .plan_details {
                color: var(--white_color);

                ul {
                  li {
                    span {
                      background-color: var(--white_color);
                    }
                  }
                }
              }

              .interests {
                color: var(--white_color);
              }
            }
          }
          &.middle {
            margin-top: 10vh;
          }
        }
      }
    }
    &.reasons {
      padding: 4em 0;

      .headline {
        margin-bottom: 10vh;
        h2 {
          &::after {
            border: 1px solid var(--white_color);
            background-color: var(--theme_color);
          }
        }
      }
      .section_wrapper {
        grid-template-columns: repeat(1, minmax(300px, 1fr));

        .section_col {
          margin-bottom: 60px;
          min-height: 260px;
          .col_left {
            height: 100%;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            flex-basis: 40%;
            position: relative;
            border-radius: 8px;
            &::before {
              content: "";
              background-color: var(--secondary_color_rgba2);
              position: absolute;
              right: 0;
              border-radius: 8px;
              z-index: 1;
              left: 0;
              width: var(--width_100);
              height: var(--width_100);
            }
            &::after {
              content: "";
              background-color: var(--theme_color);
              position: absolute;
              right: 0;
              border-radius: 8px;
              z-index: 2;
              left: 0;
              width: var(--width_100);
              height: var(--width_100);
              opacity: 0.15;
            }
          }
          .col_right {
            flex-basis: 55%;

            .icon {
              margin-bottom: var(--size_1p0em);
              svg {
                width: 30px;
                height: 30px;
                flex-shrink: 0;
                path {
                  fill: var(--theme_color);
                }
              }
              h3 {
                margin-left: var(--size_1p0em);
                font-size: var(--size_1p4rem);
                text-transform: uppercase;
                color: var(--theme_color);
                flex: 1;
                padding-bottom: var(--size_0p3em);
                border-bottom: 1px solid var(--theme_color);
              }
            }
            p {
              color: var(--secondary_color);
              font-weight: 400;
              font-size: var(--size_1p1rem);
              text-align: justify;
            }
          }
          &:nth-child(even) {
            .col_left {
              order: 2;
            }
            .col_right {
              order: 1;
            }
          }
        }
      }
    }
    &.testimonial {
      padding: 4em 0;

      & > .main_buttons {
        display: block;
        margin: auto;
        margin-top: 10vh;
        float: unset;
        background-color: var(--secondary_color);
        color: var(--white_color);
        border-color: var(--secondary_color);
        &:hover {
          background-color: transparent;

          color: var(--secondary_color);
        }
      }

      .headline {
        margin-bottom: 10vh;
        h2 {
          &::after {
            border: 1px solid var(--white_color);
            background-color: var(--theme_color);
          }
        }
      }
      .section_wrapper {
        width: 100%;
        overflow-x: scroll;
        .slider_wrapper {
          width: 300%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          transition: all 1s ease;
          translate: 0;
          flex-wrap: nowrap;
          margin-bottom: var(--size_2p4em);
          gap: 0.8%;

          .section_col {
            width: 16%;
            min-width: 16%;

            .col_content {
              min-width: var(--width_100);
              background-color: var(--secondary_color);
              padding: var(--size_1p2em);
              border-radius: 8px;
              height: 240px;
              overflow-y: scroll;
              .quote {
                display: block;
                float: left;
                width: 30px;
                margin-right: var(--size_0p6em);
                svg {
                  height: 32px;
                  width: 32px;
                  path {
                    fill: var(--theme_color);
                    stroke-width: 0px;
                  }
                }
              }
              p {
                text-align: justify;
                font-size: var(--size_0p95rem);
                margin-bottom: var(--size_1p2em);
                color: var(--white_color);
              }
              .names {
                width: var(--width_100);
                .stars {
                  margin-bottom: var(--size_0p4em);
                  img {
                    width: 100px;
                    object-fit: cover;
                  }
                  svg {
                    width: 100px;
                    path {
                      fill: var(--theme_color);
                      stroke-width: 0px;
                    }
                  }
                }
                h3 {
                  font-weight: 500;
                  text-transform: uppercase;
                  color: var(--theme_color);

                  font-size: var(--size_1p1rem);
                  margin-bottom: var(--size_0p4em);
                }
                h4 {
                  font-weight: 400;
                  color: var(--white_color);
                  font-size: var(--size_1p0rem);
                }
              }
            }
          }
        }
      }
    }

    &.contact {
      background-color: var(--secondary_color);
      padding: 6em 0;

      .headline {
        margin-bottom: 10vh;
        h2 {
          color: var(--white_color);
        }
      }
      .section_wrapper {
        grid-template-columns: repeat(2, minmax(300px, 1fr));
        gap: var(--width_5);
        .section_col {
          button {
            float: none;
          }
          .col_content {
            width: var(--width_100);
            gap: var(--size_1p5em);
            .box {
              flex: 1;

              box-shadow:
                rgba(1, 180, 1, 0.25) 0px 2px 5px -1px,
                rgba(255, 255, 255, 0.3) 0px 1px 3px -1px;
              border-radius: 8px;
              padding: 30px;
              .icon {
                margin: auto;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: var(--white_color);
                margin-bottom: var(--size_0p6em);
                svg {
                  width: var(--width_60);
                  height: var(--width_60);
                  path {
                    fill: var(--secondary_color);
                  }
                }
              }
              h3,
              h4 {
                width: var(--width_100);
                text-align: center;
                color: var(--white_color);
                font-weight: 400;
              }
              h3 {
                font-size: var(--size_1p6rem);
              }
              .socials {
                gap: 20px;
                margin-top: 10px;
                .social_btn {
                  height: 22px;
                  width: 22px;
                  outline: none;
                  border-radius: 50%;
                  cursor: pointer;
                  border: 0;
                  background-color: transparent;
                  svg {
                    height: var(--width_90);
                    width: var(--width_90);
                    path {
                      fill: var(--white_color);
                    }
                  }
                }
              }
            }
            h2 {
              font-weight: 400;
              font-size: var(--size_1p4rem);
              text-transform: uppercase;
              color: var(--white_color);
              margin-bottom: var(--size_0p6em);
            }
            p {
              width: var(--width_100);
              text-align: justify;
              color: var(--white_color);
              margin-bottom: var(--size_0p6em);
            }
          }
          &.contact {
            grid-column: 1/2;
          }
          &.reach_us {
            grid-column: 1/3;
            grid-row: 2;
          }
        }
      }
    }
    &.faqs {
      padding: 6em 0;

      .headline {
        margin-bottom: 10vh;
        h2 {
          &::after {
            border: 1px solid var(--white_color);
            background-color: var(--theme_color);
          }
        }
      }
      .section_wrapper {
        gap: var(--width_025);
        .section_col {
          .question_image {
            width: var(--width_100);
            min-height: 300px;
            background-position: center;
            border-radius: 8px;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            &::before {
              content: "";
              background-color: var(--secondary_color_rgba);
              position: absolute;
              right: 0;
              border-radius: 8px;
              z-index: 1;
              left: 0;
              width: var(--width_100);
              height: var(--width_100);
            }
            &::after {
              content: "";
              background-color: var(--theme_color);
              position: absolute;
              right: 0;
              border-radius: 8px;
              z-index: 2;
              left: 0;
              width: var(--width_100);
              height: var(--width_100);
              opacity: 0.1;
            }
          }
          .col_content {
            width: var(--width_100);
            .question_container {
              width: var(--width_100);
              border: 1px solid var(--secondary_color);
              border-radius: 4px;
              margin-bottom: var(--size_1p0em);
              .question {
                width: var(--width_100);
                background-color: var(--secondary_color);
                border: 1px solid var(--secondary_color);
                padding: var(--size_0p4em) var(--size_0p8em);

                cursor: pointer;
                color: var(--white_color);

                span {
                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                  flex-shrink: 0;
                  transition: all 300ms ease-in-out;
                  svg {
                    height: 90%;
                    width: 90%;
                    path {
                      fill: var(--white_color);
                    }
                  }
                  &.rotate {
                    rotate: -180deg;
                  }
                }
              }

              .answer {
                width: var(--width_100);
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
                transition: all 300ms ease-in-out;
                display: grid;
                grid-template-rows: 0fr;
                .answer_content {
                  width: var(--width_100);
                  overflow: hidden;
                  p {
                    font-weight: 400;
                    font-size: var(--size_1p0rem);
                    padding: var(--size_0p5em);
                    text-align: justify;
                  }
                }
                &.show {
                  grid-template-rows: 1fr;
                }
              }
            }
          }

          &.col_left {
            flex: 2;
          }
          &.col_right {
            flex: 3;
          }
        }
      }
    }
    .slider_btns {
      max-width: var(--width_80);
      margin: auto;
      gap: var(--size_1p2em);
      .btn {
        width: 18px;
        height: 18px;
        background-color: var(--secondary_color);
        &.current,
        &:hover {
          background-color: var(--theme_color);
        }
      }
      &.larger {
        display: flex;
      }
      &.smaller {
        display: none;
      }
    }
  }

  .bridge {
    width: var(--width_100);
    min-height: 300px;
    background-image: url("/images/bridge.jpg");
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
    background-attachment: scroll;

    &::before {
      content: "";
      background-color: var(--secondary_color_rgba);
      position: absolute;
      right: 0;
      left: 0;
      width: var(--width_100);
      height: var(--width_100);
    }
    .bridge_content {
      width: var(--width_80);
      max-width: 1200px;

      margin: auto;
      position: relative;
      padding: var(--size_2p0rem) 0;
      z-index: 5;
      .left {
        flex: 1;
      }
      h2 {
        text-transform: uppercase;
        font-size: var(--size_2p2rem);
        color: var(--white_color);
        font-weight: 400;
        margin-bottom: var(--size_0p5em);
      }
      p {
        color: var(--white_color);
        font-size: var(--size_1p0rem);
        font-weight: 400;
      }
      .main_buttons {
        float: right;
        margin-top: 1em;

        background-color: var(--white_color);
        color: var(--secondary_color);
        border-color: var(--white_color);
        &:hover {
          background-color: transparent;
          border-color: var(--white_color);
          color: var(--white_color);
        }
      }
    }
  }
}
.record_container{
  position: absolute;
  top: 15%;
  left: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: 250ms ease-in-out;
  background-color: var(--secondary_color);
  border: 0.8px solid var(--white_color_rgba);
  width: var(--width_100);
  min-height: 300px;
  border-radius: 10px;
  .record_details{
    width: var(--width_100);
    padding: 10px;
    h2{
      width: var(--width_100);
      border-bottom: 0.8px solid var(--white_color_rgba);
      padding-bottom: 6px;
      text-transform: uppercase;
      font-weight: 400;
      margin-bottom: 10px;
      .btn{
        color: var(--white_color);
        font-size: var(--size_0p9rem);
      }
    }
    .record_data{
      width: var(--width_100);
      margin-bottom: 10px;
      .record_row{
        width: var(--width_100);
        border-bottom: 0.6px solid var(--white_color_rgba2);
        padding-bottom: 10px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        &:not(:last-child){
margin-bottom: 10px;

        }
        .buttons{
          flex-basis: 100%;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .btn{
            font-weight: 400;
            font-size: var(--size_0p9rem);
            border: 1px solid transparent;
            background-color: transparent;
            padding: 4px 2em;
            border-radius: 4px;
            &:hover{
              color: var(--theme_color);
              border: 1px solid var(--white_color);
              background-color: var(--white_color);
            }
          }
        }
        .pair{
         flex: 1;

         h4{
          font-size: var(--size_0p8rem);
          font-weight: 500;
          span{
            text-transform: uppercase;
            font-weight: 400;
            margin-right: 6px;
          }
         }

            img{
              width: 60px;
              height: 60px;
              object-fit: cover;
              border-radius: 4px;
              margin-right: 10px;
            }
            &.full{
              flex:unset;
            }
          
        }
        
      }
    }
  }
  &.show{
    top: 0;
    opacity: 1;
    pointer-events: initial;
  }
}
.content_table {
  width: var(--width_100);
  .data_table {
    width: var(--width_100);
    border-collapse: collapse;

    .table_header_row {
      background: var(--white_color);
      th {
        -moz-text-align-last: left;
        text-align-last: left;
        padding: 4px 8px;
        color: var(--secondary_color);
        font-weight: bold;
      }
    }
    .table_normal_row {
      transition: 350ms ease-in-out;
      border-bottom: 0.5px dashed var(--white_color_rgba2);
      cursor: pointer;
      position: relative;
      &:last-of-type {
        border-bottom: 1px solid var(--white_color_rgba2);
      }
      &:hover {
        background: var(--white_color_rgba2);
      }
      td {
        -moz-text-align-last: left;
        text-align-last: left;
        padding: 5px 8px;
        color: var(--white_color);
        font-weight: 300;
        font-size: var(--size_0p75rem);

        &.approve_status {
          color: var(--success_clr);
        }
        &.pending_status {
          color: #72e6a4;
        }
        
        &.cancel_status {
          color: var(--fail_clr);
        }
        &.more {
          color: var(--theme_color);
          transition: 350ms ease-in-out;
        }
        &.more:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

.custom_select {
  width: var(--width_100);
  position: relative;
  z-index: 10;
  .controller {
    width: var(--width_100);
    .value_selector {
      background-color: transparent;
      cursor: pointer;
      border-radius: 4px;
      border: 1px solid var(--white_color_rgba2);
      color: var(--theme_color);
      font-weight: 500;
      text-align: center;
      min-width: 150px;

      font-size: var(--size_0p95rem);
    }
    .btn {
      cursor: pointer;
      border-radius: 4px;
      border: 0;
      color: var(--white_color);
      font-weight: 400;
      text-align: center;
      padding: 4px 10px;
      font-size: var(--size_0p95rem);
      &:hover {
        background-color: var(--white_color);
        color: var(--theme_color);
      }
    }
  }
  .options {
    min-width: 150px;
    max-height: 160px;
    overflow-y: scroll;
    position: absolute;
    top: 160%;
    opacity: 0;
    pointer-events: none;
    transition: 250ms ease;
    left: 0;
    border-radius: 4px;
    background-color: var(--secondary_color);
    border: 1px solid var(--white_color_rgba2);

    input {
      background-color: transparent;
      border: 0;
      display: block;
      width: var(--width_100);
      text-align: left;
      color: var(--white_color);
      padding: 4px 8px;
      border-radius: 2px;
      transition: 300ms ease-in-out;
      cursor: pointer;
      font-weight: 400;
      font-size: var(--size_0p8rem);

      &:hover {
        background-color: var(--white_color_rgba2);
        color: var(--theme_color);
      }
      &:not(:last-child) {
        margin-bottom: var(--size_0p4em);
      }
    }
    &.show {
      top: 110%;
      opacity: 1;
      pointer-events: initial;
    }
  }
  &.currency_selector {
    .options {
      max-width: 150px;

      background-color: var(--secondary_color);
      border: 0.6px solid var(--white_color_rgba2);

      .option_buttons {
        width: var(--width_100);
        button {
          background-color: transparent;
          border: 0;
          display: flex;
          align-items: center;
          width: var(--width_100);
          text-align: left;
          color: var(--secondary_color);
          padding: 4px 8px;
          border-radius: 2px;
          transition: 300ms ease-in-out;
          cursor: pointer;
          font-weight: 400;

          gap: 8px;
          flex-wrap: nowrap;

          &:hover {
            background-color: var(--white_color_rgba2);
            color: var(--theme_color);
          }
          &:not(:last-child) {
            margin-bottom: var(--size_0p4em);
          }
          img {
            object-fit: cover;
            width: 24px;
            border-radius: 2px;
          }
          span {
            font-size: var(--size_0p8rem);
            font-weight: 400;
            color: var(--white_color);
          }
        }
      }

      .search_option {
        width: var(--width_100);
        background-color: var(--white_color);
        margin-bottom: 10px;
        position: sticky;
        z-index: 4;
        left: 0;
        top: 0;
        input {
          border: 0;
          border-bottom: 0.6px solid var(--secondary_color_rgba);
          color: var(--secondary_color);
          border-radius: 4px;
          background-color: transparent;
          font-size: var(--size_0p85rem);
          cursor: auto;
          outline: none;
          font-weight: 300;
        }
      }
      &.show {
        top: 110%;
        opacity: 1;
        pointer-events: initial;
      }
    }
  }

  &.country_selector,
  &.verify_selector {
    bottom: 0;
    left: 0;
    width: 50px;
    position: absolute;
    .controller {
      width: var(--width_100);
      .value_selector {
        background-color: transparent;
        cursor: pointer;
        border-radius: 4px;
        border: 0;
        border-bottom: 0;
        color: var(--theme_color);
        font-weight: 400;
        text-align: center;
        min-width: var(--width_100);
        padding: 2px;
        font-size: var(--size_0p95rem);
      }
    }
    .options {
      min-width: 120px;
      max-height: 200px;
      overflow-y: scroll;
      position: absolute;
      top: 160%;
      opacity: 0;

      background-color: var(--white_color);
      border: 0.6px solid var(--secondary_color_rgba2);

      .option_buttons {
        width: var(--width_100);
        button {
          background-color: transparent;
          border: 0;
          display: flex;
          align-items: center;
          width: var(--width_100);
          text-align: left;
          color: var(--secondary_color);
          padding: 4px 8px;
          border-radius: 2px;
          transition: 300ms ease-in-out;
          cursor: pointer;
          font-weight: 400;

          gap: 8px;
          flex-wrap: nowrap;

          &:hover {
            background-color: var(--white_color_rgba2);
            color: var(--theme_color);
          }
          &:not(:last-child) {
            margin-bottom: var(--size_0p4em);
          }
          img {
            object-fit: cover;
            width: 24px;
            border-radius: 2px;
          }
          span {
            font-size: var(--size_0p8rem);
            font-weight: 400;
          }
        }
      }

      .search_option {
        width: var(--width_100);
        background-color: var(--white_color);
        margin-bottom: 10px;
        position: sticky;
        z-index: 4;
        left: 0;
        top: 0;
        input {
          border: 0;
          border-bottom: 0.6px solid var(--secondary_color_rgba);
          color: var(--secondary_color);
          border-radius: 4px;
          background-color: transparent;
          font-size: var(--size_0p85rem);
          cursor: auto;
          outline: none;
          font-weight: 300;
        }
      }
      &.show {
        top: 110%;
        opacity: 1;
        pointer-events: initial;
      }
    }
  }
  &.rating_selector {
    .options {
      max-height: 90px;

      button {
        img {
          width: 80px;
        }
        span {
          font-size: var(--size_0p9rem);
        }
      }
    }
  }
}

.phone_selector {
  position: relative;

  .custom_select.country_selector,
  .custom_select.verify_selector {
    .controller {
      .value_selector {
        background-color: transparent;
        border-radius: 4px;
        border: 0;
        border-bottom: 0;
        color: var(--white_color);
        font-weight: 400;
        text-align: center;
        min-width: var(--width_100);
        padding: 2px;
        font-size: var(--size_0p95rem);
        &.account_selector {
          color: var(--secondary_color);
        }
      }
    }
    .options {
      min-width: 120px;
      max-height: 200px;
      overflow-y: scroll;
      position: absolute;
      top: 160%;
      opacity: 0;

      background-color: var(--secondary_color);
      border: 0.6px solid var(--secondary_color_rgba2);

      .option_buttons {
        width: var(--width_100);
        button {
          background-color: transparent;
          border: 0;
          display: flex;
          align-items: center;
          width: var(--width_100);
          text-align: left;
          color: var(--white_color);
          padding: 4px 8px;
          border-radius: 2px;
          transition: 300ms ease-in-out;
          cursor: pointer;
          font-weight: 400;

          gap: 8px;
          flex-wrap: nowrap;

          &:hover {
            background-color: var(--white_color_rgba2);
            color: var(--theme_color);
          }
          &:not(:last-child) {
            margin-bottom: var(--size_0p4em);
          }
          img {
            object-fit: cover;
            width: 24px;
            border-radius: 2px;
          }
          span {
            font-size: var(--size_0p8rem);
            font-weight: 400;
          }
        }
      }

      .search_option {
        width: var(--width_100);
        background-color: var(--secondary_color);
        margin-bottom: 10px;
        position: sticky;
        z-index: 4;
        left: 0;
        top: 0;
        input {
          border: 0;
          border-bottom: 0.6px solid var(--white_color_rgba);
          color: var(--white_color);
          border-radius: 4px;
          background-color: transparent;
          font-size: var(--size_0p85rem);
          cursor: auto;
          outline: none;
          font-weight: 300;
        }
      }
      &.show {
        top: 110%;
        opacity: 1;
        pointer-events: initial;
      }
    }
  }

  input#phone_number {
    padding-left: 55px;
  }
}

.hidden_container {
  position: fixed;
  left: 0;
  top: 20%;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
  transition: 350ms ease-in-out;
  background-color: var(--secondary_color_rgba);
  .interest_calculator {
    position: relative;
    z-index: 10;
    max-width: 460px;
    min-width: 300px;
    background-color: var(--secondary_color);
    border: 1px solid var(--white_color_rgba);
    border-radius: 8px;
    padding: 20px;
    .data_form {
      width: var(--width_100);
      margin-bottom: var(--size_0p8em);
      h1 {
        width: var(--width_100);
        text-align: center;
        color: var(--white_color);
        font-size: var(--size_1p2rem);
        text-transform: uppercase;
        font-weight: 400;
        margin-bottom: var(--size_0p5em);
      }
      p {
        width: var(--width_100);
        text-align: justify;
        color: var(--white_color);
        font-size: var(--size_1p0rem);
        font-weight: 400;
        margin-bottom: var(--size_0p5em);
        padding-bottom: var(--size_0p4em);
        border-bottom: 1px solid var(--white_color_rgba2);
      }

      .field_group {
        position: relative;
        .form_control_group {
          position: relative;
          label {
            margin-bottom: var(--size_0p4em);
            font-weight: 400;
            font-size: var(--size_0p9rem);
          }

          input {
            outline: none;
            border: 1px solid var(--white_color_rgba);
            &::placeholder {
              font-size: var(--size_0p85rem);
            }
          }
          &.phone_selector {
            input#deposit_number {
              padding-left: 55px;
            }
            input#binance_number {
              padding-left: 55px;
            }
            input#withdraw_number {
              padding-left: 55px;
            }
          }
        }
        &.withdraw_investments {
          display: none;
          &.show {
            display: block;
          }
        }
      }
      .custom_select {
        bottom: 0;
        .controller {
          .value_selector {
            font-weight: 400;
            text-align: left;
            min-width: var(--width_100);
            padding: inherit;
            font-size: var(--size_0p95rem);
            padding: var(--size_0p4em) var(--size_0p8em);
          }
        }
        .options {
          min-width: 150px;
          max-height: 160px;
          input {
            background-color: transparent;
            border: 0;
            display: block;
            width: var(--width_100);
            text-align: left;
            color: var(--white_color);
            padding: 4px 8px;
            border-radius: 2px;
            transition: 300ms ease-in-out;
            cursor: pointer;
            font-weight: 400;
            font-size: var(--size_0p8rem);

            &:hover {
              background-color: var(--white_color_rgba2);
              color: var(--theme_color);
            }
          }

          button {
            width: var(--width_100);
            padding: 4px;
            gap: 10px;
            img {
              width: 20px;
            }
            span {
              font-weight: 400;
              font-size: var(--size_0p85rem);
            }
            &:hover {
              background-color: var(--white_color_rgba2);
              span {
                color: var(--theme_color);
              }
            }
          }
          .option_buttons {
            width: var(--width_100);
          }

          .search_option {
            width: var(--width_100);
            background-color: var(--secondary_color);
            position: sticky;
            z-index: 4;
            left: 0;
            top: 0;
            input {
              border: 0;
              border-bottom: 0.6px solid var(--white_color_rgba);
              color: var(--white_color);
              border-radius: 4px;
              background-color: transparent;
              font-size: var(--size_0p85rem);
              cursor: auto;
              font-weight: 300;
              outline: none;
              &:hover {
                background-color: transparent;
              }
            }
          }
        }

        &.country_selector,
        &.verify_selector {
          .controller {
            .value_selector {
              background-color: transparent;
              border-radius: 4px;
              border: 0;
              color: var(--white_color);
              font-weight: 400;
              text-align: center;
              min-width: var(--width_100);
              padding: 4px;
              font-size: var(--size_0p95rem);
            }
          }
          .options {
            min-width: 120px;
            max-height: 200px;
            overflow-y: scroll;
            position: absolute;
            top: 160%;
            opacity: 0;

            background-color: var(--white_color);
            border: 0.6px solid var(--secondary_color_rgba2);

            .option_buttons {
              width: var(--width_100);
              button {
                background-color: transparent;
                border: 0;
                display: flex;
                align-items: center;
                width: var(--width_100);
                text-align: left;
                color: var(--secondary_color);
                padding: 4px 8px;
                border-radius: 2px;
                transition: 300ms ease-in-out;
                cursor: pointer;
                font-weight: 400;

                gap: 8px;
                flex-wrap: nowrap;

                &:hover {
                  background-color: var(--white_color_rgba2);
                  color: var(--theme_color);
                }
                &:not(:last-child) {
                  margin-bottom: var(--size_0p4em);
                }
                img {
                  object-fit: cover;
                  width: 24px;
                  border-radius: 2px;
                }
                span {
                  font-size: var(--size_0p8rem);
                  font-weight: 400;
                }
              }
            }

            .search_option {
              width: var(--width_100);
              background-color: var(--white_color);
              margin-bottom: 10px;
              position: sticky;
              z-index: 4;
              left: 0;
              top: 0;
              input {
                border: 0;
                border-bottom: 0.6px solid var(--secondary_color_rgba);
                color: var(--secondary_color);
                border-radius: 4px;
                background-color: transparent;
                font-size: var(--size_0p85rem);
                cursor: auto;
                font-weight: 300;
                outline: none;
                &::placeholder {
                  color: var(--secondary_color_rgba);
                }
              }
            }
            &.show {
              top: 110%;
              opacity: 1;
              pointer-events: initial;
            }
          }
        }
        &.country_code {
          max-width: 50px;
          /* background-color: aqua; */
          position: absolute;
          bottom: 0px;
          left: 0;

          .controller {
            input {
              background-color: var(--white_color);
              padding: 5px;
              color: var(--secondary_color);
              text-align: center;
            }
          }
        }
      }
      .submit_button {
        cursor: pointer;
        width: var(--width_50);
        margin-left: var(--width_50);

        &:hover {
          color: var(--theme_color);
          background-color: var(--white_color);
        }
      }
      &#gift_form {
        .notes {
          p {
            border: 0;
            font-weight: 300;
            font-size: var(--size_0p9rem);
            margin-bottom: var(--size_0p2em);
          }
          .div_element {
            width: var(--width_100);
            padding-top: var(--size_0p3em);

            h5 {
              width: var(--width_100);

              font-size: var(--size_0p8rem);
              font-weight: 400;
              text-transform: uppercase;
              margin-bottom: 8px;
            }
          }
        }
      }
    }

    .plan_data {
      width: var(--width_100);
      padding-top: var(--size_0p6em);
      border-top: 1px solid var(--white_color_rgba);
      color: var(--white_color);
      display: none;
      h2 {
        width: var(--width_100);
        text-align: center;
        text-transform: uppercase;
        font-size: var(--size_1p2rem);
        font-weight: 400;
        margin-bottom: var(--size_0p4em);
      }
      h3 {
        width: var(--width_100);
        text-align: left;
        font-size: var(--size_1p0rem);
        font-weight: 400;
        margin-bottom: var(--size_0p4em);
        text-transform: uppercase;
        span {
          color: var(--theme_color);
          text-transform: none;
        }
      }
      .pair {
        width: var(--width_100);
        h4 {
          flex: 1;
          width: var(--width_100);
          text-transform: uppercase;
          font-weight: 400;
          font-size: var(--size_0p95rem);
          text-align: left;
          span {
            text-transform: none;
          }
        }
      }

      &.visible {
        display: block;
      }
    }
    .error_messages {
      width: var(--width_100);
      background-color: var(--white_color);
      border-radius: 8px;
      z-index: 10;
      left: 0;
      p {
        flex: 1;
        text-align: center;
        font-size: var(--size_0p95rem);
        font-style: italic;
        font-weight: 400;
        max-width: var(--width_85);
      }
      .close_btn {
        position: absolute;
        top: 10px;
        right: 10px;
        svg {
          path {
            fill: var(--secondary_color);
          }
        }
      }
      &.show {
        opacity: 1;
        pointer-events: initial;
        top: 0%;
      }
    }
    &.multi_step {
      overflow: hidden;
      padding: 0;
      height: 540px;
    }
    &.transfers {
      .slide {
        width: 100%;
        min-width: 100%;
        height: var(--width_100);
        position: relative;

        h1 {
          width: var(--width_100);
          background-color: var(--white_color);
          color: var(--secondary_color);
          text-transform: uppercase;
          border-radius: 8px;
          text-align: center;
          font-weight: 500;
          font-size: var(--size_1p2rem);
          padding: var(--size_0p6em);
          position: absolute;
          top: 0;
          left: 0;
          z-index: 5;
          button {
            background-color: transparent;
            position: absolute;
            left: 10px;
            top: 50%;
            translate: 0 -50%;
            width: 20px;
            height: 20px;
            cursor: pointer;
            border: 0;
            outline: none;
            svg {
              width: var(--width_100);
              height: var(--width_100);
              path {
                fill: var(--secondary_color);
              }
            }
          }
        }
        .caution {
          text-align: justify;
          display: block;
          flex: 1;
          width: var(--width_100);
          color: var(--white_color);
        }

        .method_buttons {
          display: block;
          width: var(--width_100);
          padding: 20px;

          button {
            width: var(--width_100);
            position: relative;
            border-radius: 4px;
            background-color: transparent;
            border: 1px solid var(--white_color_rgba);
            font-size: var(--size_1p0rem);
            padding: 10px;
            margin-bottom: var(--size_1p0em);
            font-weight: 400;
            cursor: pointer;
            gap: 20px;
            color: var(--white_color);
            font-size: var(--size_1p0em);
            transition: all 300ms ease-in-out;
            svg {
              width: 20px;
              height: 20px;
              path {
                fill: var(--white_color);
              }
              &.arrow {
                position: absolute;
                right: 10px;
                top: 50%;
                translate: 0 -50%;
              }
            }
            &:hover {
              background-color: var(--white_color);
              border: 1px solid var(--white_color);
              color: var(--theme_color);
              svg {
                path {
                  fill: var(--theme_color);
                }
              }
            }
          }
        }

        .form_details {
          padding: 20px;
          padding-top: 60px;
          color: var(--white_color);
          height: var(--width_100);
          overflow-y: scroll;
          & > p {
            font-weight: 500;
            text-transform: uppercase;
          }

          &.credit {
            h4 {
              width: var(--width_100);
              text-align: center;
              font-weight: 300;
              color: var(--theme_color);
              font-size: var(--size_0p9rem);
            }
          }
          p {
            border: 0;
            font-size: var(--size_0p85rem);
            font-weight: 300;
          }
          .notes {
            width: var(--width_100);
            padding-bottom: var(--size_0p4em);
            border-bottom: 1px solid var(--white_color_rgba2);
            margin-bottom: var(--size_0p6em);
            h4 {
              text-transform: uppercase;
              margin-bottom: var(--size_0p3em);
              color: var(--white_color);
              text-align: left;
              font-size: var(--size_0p95rem);
            }
            p {
              margin-bottom: 0;
              &:last-child {
                margin-bottom: var(--size_0p3em);
              }
            }
            .div_element {
              width: var(--width_100);
              padding-top: var(--size_0p3em);

              h5 {
                width: var(--width_100);

                font-size: var(--size_0p8rem);
                font-weight: 400;
                text-transform: uppercase;
                margin-bottom: 8px;
              }
            }
          }
          h2 {
            text-transform: uppercase;
            margin-bottom: var(--size_0p3em);
            color: var(--white_color);
            text-align: left;
            font-size: var(--size_0p95rem);
          }
        }
      }
    }
    .slider_container {
      position: relative;
      z-index: 6;
      width: calc(4 * 100%);
      height: 540px;
      gap: 15px;
      flex-wrap: nowrap;
      .slide {
        width: calc(100% / 4);
        min-width: calc(100% / 4);
        height: var(--width_100);
        position: relative;

        h1 {
          width: var(--width_100);
          background-color: var(--white_color);
          color: var(--secondary_color);
          text-transform: uppercase;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          text-align: center;
          font-weight: 500;
          font-size: var(--size_1p2rem);
          padding: var(--size_0p6em);
          position: absolute;
          top: 0;
          left: 0;
          z-index: 5;
          button {
            background-color: transparent;
            position: absolute;
            left: 10px;
            top: 50%;
            translate: 0 -50%;
            width: 20px;
            height: 20px;
            cursor: pointer;
            border: 0;
            outline: none;
            svg {
              width: var(--width_100);
              height: var(--width_100);
              path {
                fill: var(--secondary_color);
              }
            }
          }
        }
        .caution {
          text-align: justify;
          display: block;
          flex: 1;
          width: var(--width_100);
          color: var(--white_color);
        }

        .method_buttons {
          display: block;
          width: var(--width_100);
          padding: 20px;

          button {
            width: var(--width_100);
            position: relative;
            border-radius: 4px;
            background-color: transparent;
            border: 1px solid var(--white_color_rgba);
            font-size: var(--size_1p0rem);
            padding: 10px;
            margin-bottom: var(--size_1p0em);
            font-weight: 400;
            cursor: pointer;
            gap: 20px;
            color: var(--white_color);
            font-size: var(--size_1p0em);
            transition: all 300ms ease-in-out;
            svg {
              width: 20px;
              height: 20px;
              path {
                fill: var(--white_color);
              }
              &.arrow {
                position: absolute;
                right: 10px;
                top: 50%;
                translate: 0 -50%;
              }
            }
            &:hover {
              background-color: var(--white_color);
              border: 1px solid var(--white_color);
              color: var(--theme_color);
              svg {
                path {
                  fill: var(--theme_color);
                }
              }
            }
          }
        }

        .form_details {
          padding: 20px;
          padding-top: 60px;
          color: var(--white_color);
          height: var(--width_100);
          overflow-y: scroll;
          & > p {
            font-weight: 500;
            text-transform: uppercase;
          }

          &.credit {
            h4 {
              width: var(--width_100);
              text-align: center;
              font-weight: 300;
              color: var(--theme_color);
              font-size: var(--size_0p9rem);
            }
          }
          p {
            border: 0;
            font-size: var(--size_0p85rem);
            font-weight: 300;
          }
          .notes {
            width: var(--width_100);
            padding-bottom: var(--size_0p4em);
            border-bottom: 1px solid var(--white_color_rgba2);
            margin-bottom: var(--size_0p6em);
            h4 {
              text-transform: uppercase;
              margin-bottom: var(--size_0p3em);
              color: var(--white_color);
              text-align: left;
              font-size: var(--size_0p95rem);
            }
            p {
              margin-bottom: 0;
              &:last-child {
                margin-bottom: var(--size_0p3em);
              }
            }
            .div_element {
              width: var(--width_100);
              padding-top: var(--size_0p3em);

              h5 {
                width: var(--width_100);

                font-size: var(--size_0p8rem);
                font-weight: 400;
                text-transform: uppercase;
                margin-bottom: 8px;
              }
            }
          }
          h2 {
            text-transform: uppercase;
            margin-bottom: var(--size_0p3em);
            color: var(--white_color);
            text-align: left;
            font-size: var(--size_0p95rem);
          }
        }
      }
    }
  }
  .layer {
    z-index: 5;
    background-color: var(--secondary_color_rgba2);
    .btn {
      position: absolute;
      top: 2%;
      right: 2%;
      width: 30px;
      height: 30px;
      border-color: var(--white_color_rgba);
      cursor: pointer;
      svg {
        width: 20px;
        height: 20px;
        path {
          fill: var(--white_color);
        }
      }
    }
  }

  &.visible {
    top: 0;
    opacity: 1;
    pointer-events: initial;
  }
  &.verify_container {
    z-index: 80;
    background-color: var(--secondary_color_rgba);
    backdrop-filter: blur(15px);
    .interest_calculator {
      position: relative;
      z-index: 5;
      &.multi_step {
        height: 360px;
      }

      .slider_container {
        width: calc(3 * 100%);
        height: 360px;
        .slide {
          width: calc(100% / 3);
          min-width: calc(100% / 3);
          .caution {
            text-align: center;
            font-style: italic;
            width: var(--width_100);
            color: var(--fail_clr);
            font-size: var(--size_0p95rem);
            margin-bottom: 10px;
          }

          .method_buttons {
            flex-basis: var(--width_100);
            width: var(--width_100);
          }
        }
      }
    }
  }
}

.chat_container {
  display: none;
  position: fixed;
  right: 10px;
  bottom: -50%;
  opacity: 0;
  pointer-events: none;
  z-index: 80;
  width: 400px;
  height: 500px;
  overflow: hidden;
  transition: 150ms ease-in-out;

  .interest_calculator {
    position: relative;
    z-index: 10;
    width: var(--width_100);
    height: var(--width_100);
    background-color: var(--secondary_color);
    border: 1px solid var(--white_color);
    border-radius: 8px;

    .chat_messenger {
      width: var(--width_100);
      height: var(--width_100);
      position: relative;
      .user_name {
        width: var(--width_100);
        background-color: var(--white_color);
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
        height: 40px;
        padding: 0 15px;
        margin-bottom: 20px;
        button {
          background-color: transparent;
          width: 24px;
          height: 24px;
          flex-shrink: 0;
          border: 0;
          outline: none;
          margin-right: var(--size_0p8em);
          svg {
            width: 24px;
            height: 24px;
            path {
              fill: var(--secondary_color);
            }
          }
        }
        h3 {
          color: var(--secondary_color);
          font-weight: 500;
          text-transform: uppercase;
        }
      }

      .message_body {
        width: var(--width_100);
        height: var(--width_100);
        padding: 15px;
        position: relative;
        z-index: 5;
        h1 {
          width: var(--width_100);
          text-align: center;
          color: var(--white_color);
          text-transform: uppercase;
          font-size: var(--size_1p0rem);
          margin-bottom: var(--size_0p8em);
          padding-bottom: var(--size_0p8rem);
          border-bottom: 1px solid var(--white_color_rgba);
        }

        .user_messages {
          width: var(--width_100);

          height: 400px;
          overflow-y: scroll;
          overflow-x: hidden;

          .chats {
            display: flex;
            flex-direction: column;
            padding-bottom: 80px;
            gap: 20px;
            width: var(--width_100);

            .message {
              max-width: 280px;
              position: relative;

              .message_top {
                width: var(--width_100);
                padding: 4px 8px;
                h4 {
                  font-weight: 400;
                  color: var(--white_color);
                  font-size: var(--size_0p9rem);
                }
                h6 {
                  font-weight: 300;
                  color: var(--white_color_rgba);
                  font-size: var(--size_0p8rem);
                }
              }
              p {
                width: var(--width_100);
                padding: 8px;
                text-align: justify;
                font-weight: 500;
                font-size: var(--size_0p95rem);
              }
              &::before {
                content: "";
                position: absolute;
                top: -1px;
                width: 15px;
                height: 15px;
              }
              &.outgoing {
                background-color: var(--white_color);
                border: 1px solid var(--white_color_rgba);
                border-radius: 4px 0px 4px 4px;
                align-self: flex-end;
                margin-right: 20px;
                .message_top {
                  h4 {
                    color: var(--theme_color);
                  }
                  h6 {
                    color: var(--secondary_color_rgba);
                  }
                }

                &::before {
                  right: -15px;
                  border-top: 15px solid var(--white_color);
                  border-right: 15px solid transparent;
                  border-bottom: 15px solid transparent;
                }
                p {
                  color: var(--secondary_color);
                }
              }
              &.incoming {
                background-color: var(--theme_color_rgba);
                border: 1px solid transparent;
                border-radius: 0px 4px 4px 4px;
                align-self: flex-start;
                margin-left: 20px;
                .message_top {
                  h4 {
                    color: var(--white_color);
                  }
                  h6 {
                    color: var(--white_color_rgba);
                  }
                }

                &::before {
                  left: -16px;
                  border-top: 15px solid var(--theme_color_rgba);
                  border-left: 15px solid transparent;
                  border-bottom: 15px solid transparent;
                }
                p {
                  color: var(--white_color);
                }
              }
            }
            .caution {
              width: var(--width_100);
              text-align: center;
              color: var(--white_color_rgba);
              font-size: var(--size_0p8rem);
              font-style: italic;
            }
          }
        }
      }
      .message_form {
        width: var(--width_100);
        position: absolute;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        height: 40px;
        padding: 4px 10px;
        gap: 10px;
        z-index: 10;
        bottom: 0;
        left: 0;
        background-color: var(--white_color);
        textarea {
          flex: 1;
          height: var(--width_100);
          resize: none;
          background-color: transparent;
          border: 1px solid var(--secondary_color_rgba2);
          border-radius: 4px;
          outline: none;
          font-size: var(--size_1p0rem);
          color: var(--secondary_color);
          padding: 4px 10px;
          &::placeholder {
            color: var(--secondary_color_rgba);
            font-size: var(--size_0p95rem);
          }
        }
        .btn {
          width: 36px;
          height: 36px;
          cursor: pointer;
          border: 0;
          svg {
            width: 26px;
            height: 26px;
            path {
              fill: var(--secondary_color);
            }
          }
        }
      }
    }
  }

  .close_btn {
    position: absolute;
    background-color: var(--white_color);
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    z-index: 15;
    border-bottom-left-radius: var(--width_100);
    border-top-right-radius: 8px;
    border: 0;
    border-left: 1px solid var(--secondary_color);
    cursor: pointer;
    svg {
      width: 20px;
      height: 20px;
      position: absolute;
      bottom: 15px;
      left: 15px;
      path {
        fill: var(--secondary_color);
      }
    }
  }

  &.visible {
    bottom: 8%;
    opacity: 1;
    pointer-events: initial;
  }
}

.social_buttons {
  display: none;
  position: fixed;
  bottom: 10%;
  right: 2.5%;
  z-index: 55;
  min-width: 30px;
  .btn {
    cursor: pointer;
    position: relative;
    width: 30px;
    height: 30px;
    svg {
      width: 30px;
      height: 30px;
      path {
        fill: var(--white_color);
      }
    }
    &::after {
      position: absolute;
      right: -35px;
      top: 50%;
      translate: -30px -50%;
      content: attr(data-title);
      background-color: var(--white_color);
      /* width: 140px; */
      width: 0;

      height: 35px;
      transition: 350ms ease-in-out;
      z-index: -1;
      border-radius: 4px;
      font-size: var(--size_0p8rem);
      font-weight: 500;
      padding: 0px;
      color: var(--theme_color);
      text-align: left;
      padding-left: 0px;
      /* padding-left: 45px; */
      text-wrap: nowrap;
      overflow: hidden;
    }
    &.whatsapp {
      margin-bottom: var(--size_1p0em);
      svg {
        path {
          stroke-width: 0;
        }
      }
    }
    &:hover {
      svg {
        path {
          fill: var(--theme_color);
        }
      }
      &::after {
        width: 140px;
        padding: 8px;
        padding-right: 20px;
      }
    }
  }
}

.dashboard_container {
  width: 100vw;
  width: 100dvw;
  position: relative;
  z-index: 10;
  .dashboard_menu {
    position: fixed;
    top: 0;
    left: -10%;
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    width: var(--width_20);
    height: var(--width_100);
    background-color: var(--secondary_color);
    border-right: 1px solid var(--white_color);
    padding: var(--size_1p0em);
    transition: 350ms ease-in-out;
    .layer {
      width: 100vw;
      min-width: 100vw;
      height: var(--width_100);
      z-index: -1;
      background-color: var(--secondary_color_rgba);
    }
    .logo_area {
      width: var(--width_100);
      gap: var(--size_0p5em);
      border-bottom: 1px solid var(--white_color);
      padding-top: var(--size_1p0em);
      padding-bottom: var(--size_1p0em);
      margin-bottom: var(--size_1p0em);
      h2 {
        color: var(--white_color);
        text-align: center;
        text-transform: uppercase;
        font-size: var(--size_0p95rem);
        font-weight: 400;
      }
      h3 {
        color: var(--white_color);
        text-align: center;
        font-weight: 300;
        font-size: var(--size_0p85rem);
      }
      button {
        background-color: transparent;
        cursor: pointer;
        border: 0;
        outline: none;
        img {
          width: 60px;
        }
        svg {
          width: 24px;
          height: 24px;
          path {
            fill: var(--white_color);
          }
        }
      }
      .toggle_menu {
        position: absolute;
        top: 10px;
        right: 10px;
        svg {
          width: 20px;
          height: 20px;
        }
      }
    }
    .navigation {
      width: var(--width_100);
      .nav_list {
        width: var(--width_100);
        .nav_item {
          width: var(--width_100);
          margin-bottom: var(--size_0p4em);
          .nav_btn {
            width: var(--width_100);
            background-color: transparent;
            cursor: pointer;
            border: 0;
            padding: var(--size_0p4em) var(--size_0p6em);
            border-bottom: 1px solid var(--secondary_color);
            outline: none;
            gap: 10px;
            transition: 300ms ease-in-out;
            border-radius: 4px;
            color: var(--white_color);
            font-weight: 400;
            .icon {
              width: 16px;
              height: 16px;
              svg {
                width: var(--width_100);
                height: var(--width_100);
                path {
                  fill: var(--white_color);
                }
              }
            }
            span {
              font-size: var(--size_1p0rem);
            }
            &.current,
            &:hover {
              background-color: transparent;
              border-bottom: 1px solid var(--theme_color);

              color: var(--theme_color);
              .icon {
                svg {
                  path {
                    fill: var(--theme_color);
                  }
                }
              }
            }
          }
        }
        hr {
          border: 0;
          background-color: transparent;
          border-top: 1px solid var(--white_color);
          margin-top: var(--size_1p0em);
          margin-bottom: var(--size_1p0em);
        }
      }
    }
    &.visible {
      left: 0;
      opacity: 1;
      pointer-events: initial;
    }
  }
  .main_dashboard {
    width: var(--width_100);
    background-image: url("/images/bg_img_1.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;

    position: relative;

    &::before {
      content: "";
      background-color: var(--secondary_color_rgba);
      position: absolute;
      top: 0;
      z-index: 1;
      left: 0;
      width: var(--width_100);
      height: var(--width_100);
      opacity: 0.15;
    }
    &::after {
      content: "";
      background-color: var(--theme_color_rgba);
      position: absolute;
      top: 0;
      z-index: 2;
      left: 0;
      width: var(--width_100);
      height: var(--width_100);
      opacity: 0.15;
    }

    .dashboard {
      width: var(--width_100);
      position: relative;
      z-index: 10;
      .dash_top {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 10;
        width: var(--width_100);
        background-color: var(--secondary_color);
        padding: var(--size_1p0em) var(--width_10);
        border-bottom: 1px solid var(--white_color_rgba);
        margin-bottom: var(--size_1p0em);
        /* border-bottom: 1px solid var(--white_color); */

        .top_logo {
          gap: 10px;
          button {
            cursor: pointer;
            width: 20px;
            height: 20px;
            svg {
              width: 100%;
              height: 100%;
              path {
                fill: var(--white_color);
              }
            }
             &.large_toggle{
                display: block;
              }
            &.mobile_toggle {
              display: none;
            }
          }

          h1 {
            font-size: var(--size_1p2rem);
            color: var(--white_color);
            text-transform: uppercase;
          }
          &.forms {
            button {
              width: auto;
              height: unset;
              gap: 10px;
              svg {
                width: 16px;
                height: 16px;
                path {
                  fill: var(--white_color);
                }
              }
            }
          }
        }
        .right {
          .searchbar {
            position: relative;
            input {
              position: absolute;
              top: 50%;
              left: -200px;
              min-width: 180px;
              translate: 0 -50%;
              transition: 300ms ease-in-out;
              background-color: transparent;
              border: 1px solid var(--white_color_rgba);
              font-size: var(--size_0p9rem);
              color: var(--white_color);
              outline: none;
              padding: var(--size_0p3em) var(--size_0p8em);
              border-radius: 4px;
              opacity: 0;
              pointer-events: none;

              &::placeholder {
                opacity: 0.6;
                color: var(--white_color_rgba);
              }
              &.show {
                opacity: 1;
                pointer-events: initial;
                left: -190px;
              }
            }
            button {
              background-color: var(--secondary_color);
              cursor: pointer;
              outline: none;
              border: 0;
              width: 30px;
              height: 30px;
              border-radius: 50%;
              svg {
                width: var(--width_80);
                height: var(--width_80);

                path {
                  fill: var(--white_color);
                }
              }

              &#toggle_search {
                position: relative;
                z-index: 5;
              }
              &#search_button {
                position: absolute;
                top: 0;
                right: 0;
                z-index: 1;
              }
            }
          }

          .currency_controller {
            position: relative;
            min-width: 50px;
            .currency_btn {
              border-radius: 4px;
              font-size: var(--size_0p9rem);
              border: 1px solid var(--white_color);
              cursor: pointer;
              padding: 4px 8px;
              background-color: transparent;
              color: var(--theme_color);
              text-align: center;
              outline: none;
            }
            .custom_selector {
              position: absolute;
              left: -100px;
              top: 140%;
              opacity: 0;
              transition: 350ms ease-in-out;
              pointer-events: none;
              background-color: var(--secondary_color);
              max-height: 200px;
              overflow-y: scroll;
              max-width: 140px;
              border: 1px solid var(--white_color_rgba2);
              border-radius: 4px;
              padding: 4px;
              padding-top: 0;

              .option_buttons {
                width: var(--width_100);
              }

              .option_btn {
                width: var(--width_100);
                gap: 10px;
                padding: 4px 8px;
                transition: 300ms ease-in-out;
                border-radius: 2px;
                &:hover {
                  background-color: var(--white_color_rgba2);
                  span {
                    color: var(--theme_color);
                  }
                }
                img {
                  width: 20px;
                  object-fit: cover;
                  flex-shrink: 0;
                }
                span {
                  flex: 1;
                  text-align: left;
                  color: var(--white_color);
                  font-weight: 400;
                  font-size: var(--size_0p85rem);
                }
              }

              .search_option {
                width: var(--width_100);
                background-color: var(--secondary_color);
                margin-bottom: 10px;
                position: sticky;
                z-index: 4;
                left: 0;
                top: 0;
                input {
                  border: 0;
                  border-bottom: 0.6px solid var(--white_color_rgba);
                  color: var(--white_color);
                  border-radius: 4px;
                  background-color: transparent;
                  font-size: var(--size_0p85rem);
                  cursor: auto;
                  padding: 4px 8px;

                  font-weight: 300;
                  outline: none;
                }
              }
              &.show {
                opacity: 1;
                top: 115%;
                pointer-events: initial;
              }
            }
          }
          .notification {
            position: relative;
            min-width: 40px;
            button {
              width: 30px;
              height: 30px;
              cursor: pointer;
              background-color: transparent;
              color: var(--theme_color);
              text-align: center;
              outline: none;
              border: 0;
              position: relative;
              span {
                width: 20px;
                height: 20px;

                opacity: 0;
                border-radius: 50%;
                font-size: var(--size_0p75rem);
                z-index: 2;
                text-align: center;
                background-color: var(--theme_color);
                color: var(--white_color);
                position: absolute;
                font-weight: 500;
                top: -6px;
                right: -6px;
              }
              svg {
                position: relative;
                width: var(--width_100);
                height: var(--width_100);
                path {
                  fill: var(--white_color);
                }
              }
            }
            .notification_pallete {
              position: absolute;
              left: -180px;
              top: 140%;
              opacity: 0;
              transition: 350ms ease-in-out;
              pointer-events: none;
              background-color: var(--secondary_color);
              max-height: 200px;
              overflow-y: scroll;
              min-width: 200px;
              max-width: 300px;
              border: 1px solid var(--white_color_rgba2);
              border-radius: 4px;
              padding: 4px;

              p {
                width: var(--width_100);
                text-align: justify;
                font-size: var(--size_0p85rem);
                color: var(--white_color);
                font-weight: 300;
              }

              &.show {
                top: 115%;
                opacity: 1;
                pointer-events: initial;
              }
            }
          }
          .profile_preview {
            position: relative;
            .user_image_btn {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              border: 1px solid var(--white_color);
              background-position: center;
              background-size: cover;
              background-repeat: no-repeat;
              cursor: pointer;
              outline: none;
            }
            .profile_menu {
              position: absolute;
              min-width: 260px;
              max-width: 300px;
              max-height: 450px;
              overflow-y: scroll;
              right: 0;
              top: 140%;
              opacity: 0;
              transition: 350ms ease-in-out;
              pointer-events: none;
              border: 1px solid var(--white_color_rgba2);
              background-color: var(--secondary_color);
              border-radius: 8px;
              padding: 1em;
              .user_image {
                display: block;
                margin: auto;
                width: 80px;
                height: 80px;
                border-radius: 50%;
                background-size: cover;
                background-color: var(--white_color);
                background-position: center;
                background-repeat: no-repeat;
                margin-bottom: var(--size_1p0em);
              }

              .user_data {
                width: var(--width_100);
                color: var(--white_color);
                margin-bottom: var(--size_1p0em);
                padding-bottom: var(--size_0p4em);
                border-bottom: 1px solid var(--white_color_rgba);
                h2 {
                  color: var(--theme_color);
                  width: var(--width_100);

                  margin-bottom: var(--size_1p0em);
                  padding-bottom: var(--size_0p3em);
                  border-bottom: 1px solid var(--white_color_rgba);
                  text-transform: uppercase;
                  font-size: var(--size_1p0rem);
                }
                h3 {
                  width: var(--width_100);
                  margin-bottom: var(--size_0p5em);
                  font-size: var(--size_0p9rem);
                  font-weight: 400;
                  text-align: center;
                  &.email {
                    font-style: italic;
                    color: var(--theme_color);
                  }
                }
              }
              .account_data {
                margin-bottom: var(--size_1p0em);
                width: var(--width_100);
                padding-bottom: var(--size_0p8em);
                border-bottom: 1px solid var(--white_color_rgba);
                .code {
                  width: var(--width_100);
                  margin-bottom: var(--size_1p0em);
                  .code_control {
                    width: var(--width_100);
                    color: var(--white_color);
                    margin-bottom: var(--size_0p6em);
                    h3 {
                      font-size: var(--size_0p95rem);
                    }
                    button {
                      width: 20px;
                      height: 20px;
                      cursor: pointer;
                      outline: none;
                      border: none;
                      background-color: transparent;
                      position: relative;
                      .show_copy {
                        position: absolute;
                        color: var(--theme_color);
                        background-color: var(--white_color);
                        padding: 4px;
                        border-radius: 4px;
                        font-size: 10px;
                        text-align: center;
                        top: -10px;
                        left: -65px;
                        min-width: 60px;
                        opacity: 0;
                        pointer-events: none;
                        transition: 300ms ease-in-out;
                        &.show {
                          opacity: 1;
                        }
                      }
                      svg {
                        width: var(--width_100);
                        height: var(--width_100);
                        path {
                          fill: var(--theme_color);
                        }
                      }
                    }
                  }
                  input {
                    width: var(--width_100);
                    text-align: left;
                    background-color: transparent;
                    pointer-events: none;
                    font-size: var(--size_0p9rem);
                    color: var(--theme_color);
                    border: 0;
                    font-weight: 300;
                    outline: none;
                    font-style: italic;
                  }
                }
              }
              .profile_buttons {
                .btn {
                  color: var(--white_color);
                  font-weight: 400;
                  font-size: var(--size_0p95rem);
                  padding: var(--size_0p4em) var(--size_0p8em);
                  border-radius: 4px;
                  &:hover {
                    background-color: var(--white_color);
                    color: var(--theme_color);
                  }
                }
              }
              &.show {
                opacity: 1;
                top: 115%;
                pointer-events: initial;
              }
            }
          }
        }
      }

      .warning {
          position: relative;
           max-width: var(--width_80);
           margin: auto;
        
          box-sizing: border-box;
          padding: 10px;
          border-radius: 6px;
          background-color: var(--white_color_rgba2);
          border: 0.8px solid var(--fail_clr);
          p {
            color: var(--fail_clr);
            font-weight: 400;
            font-size: var(--size_0p9rem);
            font-style: italic;
            text-align: left;

            button {
              border: 0;
              cursor: pointer;
              color: var(--theme_color);
              outline: none;
              padding: 0;
              margin: 0;
              background-color: transparent;
            }
          }
        }
      .dashboard_preview {
        max-width: var(--width_80);
        margin: auto;
        padding: var(--size_1p0em) 0;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--size_1p0em);
        position: relative;
        z-index: 8;

        

        .preview_box {
          border: 1px dotted var(--white_color_rgba2);
          background-color: var(--secondary_color);
          border-radius: 8px;
          padding: var(--size_0p6em);
          position: relative;
          .title_bar {
            width: var(--width_100);
            margin-bottom: var(--size_0p5em);
            padding-bottom: var(--size_0p4em);
            color: var(--white_color);
            border-bottom: 1px solid var(--white_color_rgba);
            h3 {
              text-transform: uppercase;
              font-weight: 500;
              font-size: var(--size_0p9rem);
              color: var(--theme_color);
            }
            .btn {
              width: 20px;
              height: 20px;
              cursor: pointer;
              svg {
                width: var(--width_100);
                height: var(--width_100);
                path {
                  fill: var(--white_color);
                }
              }
            }
          }
          .card_menu {
            position: absolute;
            right: 10px;
            top: 72px;
            z-index: 5;
            max-width: 140px;
            opacity: 0;
            pointer-events: none;
            transition: 350ms ease-in-out;
            background-color: var(--secondary_color);
            border: 1px solid var(--white_color_rgba2);
            border-radius: 4px;
            padding: var(--size_0p4em);
            button {
              width: var(--width_100);
              cursor: pointer;
              display: block;
              background-color: transparent;
              font-size: var(--size_0p85rem);
              transition: 300ms ease-in-out;
              outline: none;
              border: 0;
              text-align: left;
              padding: var(--size_0p2em);
              margin-bottom: var(--size_0p2em);
              color: var(--white_color);
              border-radius: 2px;
              &:hover {
                color: var(--theme_color);
                background-color: var(--white_color_rgba2);
              }
            }
            &.show {
              top: 36px;
              opacity: 1;
              pointer-events: initial;
            }
          }

          .pair {
            margin-bottom: var(--size_0p2em);
            width: var(--width_100);
            h2 {
              flex: 1;
              text-transform: uppercase;
              color: var(--white_color);
              font-size: var(--size_0p85rem);
              font-weight: 400;
              span {
                text-transform: none;
                font-weight: 300;
                margin-left: var(--size_0p4em);
                opacity: 1;
              }
            }
            &.withdraw {
              h2 {
                flex: 2;
              }
              h2.lesser {
                flex: 1;
              }
            }
          }
        }
      }

      .user_info {
        max-width: var(--width_80);
        margin: auto;
        padding: var(--size_1p0em) 0;

        color: var(--white_color);

        h2 {
          font-weight: 500;
          font-size: var(--size_0p9rem);
          margin-bottom: var(--size_0p3em);
          span {
            color: var(--theme_color);
          }
        }
        p {
          font-weight: 400;
          font-size: var(--size_0p9rem);
          text-align: left;
        }
      }
      .content_container {
        max-width: var(--width_80);
        padding: var(--size_1p0em) 0;
        grid-template-columns: repeat(5, 1fr);
        gap: var(--size_1p0em);
        position: relative;
        z-index: 5;
        margin: auto;
        padding-bottom: 50px;

        .column {
          width: var(--width_100);
          position: relative;
          overflow: scroll;
          h1 {
            width: var(--width_100);
            text-transform: uppercase;
            font-size: var(--size_1p0rem);
            font-weight: 500;
            color: var(--theme_color);
            margin-bottom: var(--size_1p0em);
            padding-bottom: var(--size_0p6em);
            border-bottom: 1px solid var(--white_color_rgba);
            position: relative;
            .btn {
              width: 20px;
              height: 20px;
              cursor: pointer;
              svg {
                width: var(--width_100);
                height: var(--width_100);
                path {
                  fill: var(--white_color);
                }
              }
            }

            &.full {
              .btn {
                width: auto;
                height: auto;
              }
            }
          }
        }
        .cards_container {
          position: relative;

          flex-wrap: nowrap;
          /* gap: var(--size_1p0em); */
          gap: 15px;

          .card {
            position: relative;
            .card_menu {
              position: absolute;
              right: 0;
              top: 60px;
              z-index: 6;
              max-width: 140px;
              opacity: 0;
              pointer-events: none;
              transition: 350ms ease-in-out;
              background-color: var(--secondary_color);
              border: 1px solid var(--white_color_rgba2);
              border-radius: 4px;
              padding: var(--size_0p4em);
              button {
                width: var(--width_100);
                cursor: pointer;
                display: block;
                background-color: transparent;
                font-size: var(--size_0p9rem);
                transition: 300ms ease-in-out;
                outline: none;
                border: 0;
                text-align: left;
                padding: var(--size_0p2em);
                margin-bottom: var(--size_0p2em);
                color: var(--white_color);
                &:hover {
                  color: var(--theme_color);
                  background-color: var(--white_color_rgba2);
                }
              }

              &.show {
                top: 30px;
                opacity: 1;
                pointer-events: initial;
              }
            }
          }
          &.investments_container {
            width: calc(400%);
            /* translate: calc(-25% - 15px); */
            /* translate: calc(-50% - 30px); */
            /* translate: calc(-75% - 45px); */
            .card {
              width: calc(100% / 4);
              min-width: calc(100% / 4);
            }
          }
          &.investments_admin_container {
              width: calc(300%);
              /* translate: calc(-25% - 15px); */
              /* translate: calc(-50% - 30px); */
              /* translate: calc(-75% - 45px); */
              .card {
                width: calc(100% / 3);
                min-width: calc(100% / 3);
              }
            }
          &.referrals_container {
            width: 400%;
            .card {
              width: calc(100% / 4);
              min-width: calc(100% / 4);
            }
          }
          &.ref_settings_container {
            width: 200%;
            .card {
              width: calc(100% / 2);
              min-width: calc(100% / 2);
            }
          }
          &.settings_container {
            width: var(--width_100);
            .card {
              width: var(--width_100);
              min-width: var(--width_100);
            }
          }
        }
        .investment_container {
          width: var(--width_100);

          max-height: 56vh;
          overflow-y: scroll;
          .investment_details {
            width: var(--width_100);
            margin-bottom: var(--size_1p0em);
            padding-bottom: var(--size_0p8em);
            color: var(--white_color);
            h2 {
              text-transform: uppercase;
              font-weight: 400;
              font-size: var(--size_0p95rem);
              width: var(--width_100);
              margin-bottom: var(--size_0p5em);
              padding-bottom: var(--size_0p3em);
              color: var(--theme_color);
            }
            h6 {
              color: var(--white_color);
              font-size: var(--size_0p85rem);
              b {
                font-weight: 600;
              }
            }
            .content_row {
              width: var(--width_100);
              column-gap: 40px;
              row-gap: 20px;
              border: 1px solid var(--white_color_rgba2);
              border-radius: 8px;
              padding: var(--size_1p0em);
              flex-wrap: wrap;
              &.ref_row,
              &.settings_row {
                &:not(:last-child) {
                  margin-bottom: var(--size_1p0em);
                }
                .one_row {
                  &:not(:last-child) {
                    margin-bottom: var(--size_1p0em);
                  }
                }
              }
              .one_row {
                flex: 1;
                h3 {
                  text-transform: uppercase;
                  width: var(--width_100);
                  font-size: var(--size_0p9rem);
                  padding-bottom: var(--size_0p4em);
                  border-bottom: 1px solid var(--white_color_rgba2);
                  margin-bottom: var(--size_0p4em);
                  button {
                    background-color: transparent;
                    padding: 2px 10px;
                    color: var(--white_color);
                    border: 0;
                    outline: none;
                    cursor: pointer;
                    font-weight: 500;
                    transition: 300ms ease-in-out;
                    border-radius: 2px;
                    &:hover {
                      color: var(--theme_color);
                      background-color: var(--white_color);
                    }
                    &.copy_btn {
                      padding: 0;
                      width: 20px;
                      height: 20px;
                      cursor: pointer;
                      position: relative;
                      outline: none;
                      border: none;
                      color: var(--theme_color);
                      background-color: transparent;

                      svg {
                        width: var(--width_100);
                        height: var(--width_100);
                        path {
                          fill: var(--theme_color);
                        }
                      }
                      .show_copy {
                        position: absolute;
                        color: var(--theme_color);
                        background-color: var(--white_color);
                        padding: 4px;
                        border-radius: 4px;
                        font-size: 10px;
                        text-align: center;
                        top: -10px;
                        left: -65px;
                        min-width: 60px;
                        opacity: 0;
                        pointer-events: none;
                        transition: 300ms ease-in-out;
                        &.show {
                          opacity: 1;
                        }
                      }

                      &:hover {
                        color: var(--theme_color);
                        background-color: transparent;
                        svg {
                          path {
                            fill: var(--theme_color);
                          }
                        }
                      }
                    }
                  }
                }
                .detail {
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  margin-bottom: var(--size_0p2em);
                  h4 {
                    font-weight: 400;
                    font-size: var(--size_0p8rem);
                    text-transform: uppercase;
                  }
                  p {
                    font-size: var(--size_0p85rem);
                    &.pending_status {
                      color: #72e6a4;
                    }
                    &.cancel_status {
                      color: var(--fail_clr);
                    }
                  }
                }
                .referral_detail {
                  width: var(--width_100);
                  color: var(--white_color);

                  div {
                    margin-bottom: var(--size_0p2em);
                    align-items: flex-end;
                    gap: 10px;
                    h4 {
                      font-size: var(--size_2p8rem);
                      text-transform: uppercase;
                      font-weight: 500;
                      color: var(--theme_color);
                    }
                    h5 {
                      font-weight: 400;
                      font-size: var(--size_1p15rem);
                      text-transform: uppercase;
                      margin-bottom: var(--size_0p6em);
                    }
                  }

                  p {
                    font-size: var(--size_0p85rem);
                  }
                }
                .col_content {
                  width: var(--width_100);
                  background-color: var(--white_color_rgba2);
                  padding: var(--size_0p8em);
                  border-radius: 6px;
                  position: relative;
                  .quote {
                    display: block;
                    float: left;
                    width: 30px;
                    margin-right: var(--size_0p6em);
                    svg {
                      height: 32px;
                      width: 32px;
                      path {
                        fill: var(--theme_color);
                        stroke-width: 0px;
                      }
                    }
                  }
                  p {
                    text-align: justify;
                    font-size: var(--size_1p0rem);
                    margin-bottom: var(--size_0p6em);
                    color: var(--white_color);
                  }
                  .names {
                    width: var(--width_100);
                    .stars {
                      margin-bottom: var(--size_0p4em);
                      img {
                        width: 100px;
                        object-fit: cover;
                      }
                      svg {
                        width: 100px;
                        path {
                          fill: var(--theme_color);
                          stroke-width: 0px;
                        }
                      }
                    }
                    h3 {
                      font-weight: 500;
                      text-transform: uppercase;
                      color: var(--theme_color);
                      border: 0;
                      font-size: var(--size_1p2rem);
                    }
                    h4 {
                      font-weight: 400;
                      color: var(--white_color);
                      font-size: var(--size_1p0rem);
                    }
                  }
                  .review_status {
                    position: absolute;
                    right: var(--size_0p8em);
                    bottom: var(--size_0p8em);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 20px;
                    span {
                      font-style: italic;
                      font-size: var(--size_0p85rem);
                      &.pending_status {
                        color: var(--pending_clr);
                      }
                      &.success_status {
                        color: var(--success_clr);
                      }
                      &.cancel_status {
                        color: var(--fail_clr);
                      }
                    }
                    .btn {
                      border-radius: 6px;
                      padding: 4px 8px;
                      cursor: pointer;
                    }
                    .reject {
                      border: 1px solid var(--white_color_rgba);
                      &:hover {
                        color: var(--theme_color);
                        background-color: var(--white_color);
                      }
                    }
                    .accept {
                      border: 1px solid var(--white_color);
                      background-color: var(--white_color);
                      color: var(--theme_color);
                      &:hover {
                        color: var(--theme_color);
                        background-color: var(--white_color);
                      }
                    }
                  }
                }

                .data_form {
                  .field_group {
                    .form_control_group {
                      label {
                        font-weight: 400;
                        font-size: var(--size_1p0rem);
                      }

                      input {
                        border: 0;
                        border-bottom: 1px solid var(--white_color_rgba2);
                        border-radius: 0;
                      }
                      textarea {
                        max-height: 100px;
                        resize: none;
                      }
                    }
                    &.double {
                      gap: 30px;
                    }
                  }
                  .submit_button {
                    float: right;
                    display: none;
                    background-color: var(--white_color);

                    cursor: pointer;

                    &:hover {
                      color: var(--theme_color);
                      background-color: var(--white_color);
                    }
                  }
                  .pass_submit {
                    margin-left: 70%;
                    width: 30%;
                    position: relative;
                    border: 1px solid var(--white_color);
                    color: var(--secondary_color);
                    cursor: pointer;
                    background-color: var(--white_color);
                    text-align: center;
                    padding: var(--size_0p4em) var(--size_4p0em);
                    border-radius: 4px;

                    &:hover {
                      color: var(--theme_color);
                      background-color: var(--white_color);
                    }
                  }
                  &.editable {
                    .field_group {
                      .form_control_group {
                        input {
                          border: 0;
                          border-bottom: 1px solid var(--white_color);
                          border-radius: 4px;
                        }
                      }
                    }
                    .submit_button {
                      display: block;
                    }
                  }
                  &.security_form {
                    display: none;
                    &.editable {
                      display: block;
                    }
                  }
                  h6 {
                    width: var(--width_100);
                    text-align: left;
                    margin: 4px 0;
                    color: var(--theme_color);
                    font-style: italic;
                    font-size: var(--size_0p85rem);
                  }
                  .inputs {
                    input {
                      background-color: transparent;
                      text-align: left;
                      color: var(--theme_color);
                      font-style: italic;
                      font-size: var(--size_0p95rem);
                      outline: none;
                      border: 0;

                      padding: 4px 10px;
                    }
                  }
                  .form_btns {
                    .btn {
                      color: var(--white_color);
                      font-weight: 400;
                      font-size: var(--size_0p95rem);
                      border: 0;
                      padding: 4px 8px;
                      &:hover {
                        background-color: var(--white_color);
                        color: var(--theme_color);
                      }
                    }
                  }
                }
                &.currency_row {
                  border-bottom: 1px solid var(--white_color_rgba2);
                  padding-bottom: 10px;
                  h5 {
                    color: var(--theme_color);
                    font-style: italic;
                    font-size: var(--size_0p85rem);
                    text-align: left;
                    width: var(--width_100);
                  }
                  .custom_select {
                    .controller {
                      margin-top: 10px;
                      width: var(--width_100);
                      input[type="button"] {
                        min-width: 150px;
                      }
                    }
                  }
                }
                .account_btns {
                  width: var(--width_100);
                  button {
                    border: 0;
                    cursor: pointer;
                    color: var(--white_color);
                    font-weight: 400;
                    text-align: center;
                    padding: 4px 8px;
                    font-size: var(--size_0p95rem);
                    &:hover {
                      background-color: var(--white_color);
                      color: var(--theme_color);
                    }
                  }
                }
              }
              .profile_image {
                max-width: 120px;
                flex-shrink: 0;
                .user_image {
                  width: 120px;
                  height: 120px;
                  border-radius: 6px;
                  margin-bottom: var(--size_0p5em);
                  img {
                    width: var(--width_100);
                    height: var(--width_100);
                    border-radius: 6px;
                    object-fit: cover;
                  }
                }
                .data_form {
                  width: var(--width_100);
                  position: relative;
                  .field_group {
                    width: var(--width_100);
                    .form_control_group {
                      color: var(--white_color);

                      label {
                        width: var(--width_100);
                        max-height: 50px;
                        text-align: center;
                        padding: var(--size_0p4em);
                        position: absolute;
                        cursor: pointer;
                        z-index: 4;
                        font-weight: 300;
                        font-size: var(--size_0p95rem);
                        transition: 300ms ease-in-out;
                        border-radius: 4px;
                        text-wrap: nowrap;
                        overflow: hidden;
                        border: 0.6px solid var(--white_color);
                        &:hover {
                          background-color: var(--white_color);
                          color: var(--theme_color);
                        }
                      }
                      input {
                        position: relative;
                        opacity: 0;
                        z-index: 1;
                      }
                    }
                  }
                  .form_btns {
                    width: var(--width_100);
                    button {
                      background-color: transparent;
                      text-transform: uppercase;
                      text-align: center;
                      color: var(--white_color);
                      border: 0;
                      font-size: var(--size_0p9rem);
                      padding: 4px 8px;
                      cursor: pointer;
                      font-weight: 500;
                      border-radius: 4px;
                      width: var(--width_100);
                      transition: 300ms ease-in-out;
                      &:hover {
                        color: var(--theme_color);
                      }

                      &:nth-child(1) {
                        color: var(--secondary_color);
                        background-color: var(--white_color);
                        margin-bottom: var(--size_0p8em);
                        &:hover {
                          color: var(--theme_color);
                        }
                      }
                      &:nth-child(2) {
                        color: var(--white_color);
                        background-color: var(--secondary_color);
                        border: 1px solid var(--white_color_rgba);
                        &:hover {
                          background-color: var(--white_color);
                          color: var(--theme_color);
                        }
                      }
                    }
                  }
                }
              }
              .stats_row {
                flex-basis: 100%;
                width: 100%;
                gap: 20px;
                .starts_col {
                  flex: 1;
                  /* background-color: aqua; */
                  .progress_bar {
                    width: 200px;
                    height: 200px;
                    border-radius: 50%;
                    position: relative;

                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .content {
                      width: 185px;
                      height: 185px;
                      border-radius: 50%;
                      background-color: var(--secondary_color);
                      display: flex;
                      justify-content: center;
                      align-items: flex-start;
                      padding-left: 30px;
                      flex-direction: column;

                      .bar_detail {
                        display: flex;
                        flex-wrap: nowrap;
                        opacity: 0;
                        position: relative;
                        animation: fadeIn 2s ease 2s forwards;
                        span {
                          position: absolute;
                          width: 8px;
                          height: 8px;
                          top: 10px;
                          left: 0;
                        }
                        h3 {
                          margin-left: 15px;
                          font-size: 20px;
                          color: var(--theme_color);
                          small {
                            font-size: 11px;
                            color: var(--white_color);
                            text-transform: uppercase;
                            font-weight: 300;
                          }
                        }
                        &:nth-child(1) {
                          span {
                            background-color: var(--clr3);
                          }
                          h3 {
                            color: var(--clr3);
                            small.percent {
                              color: var(--clr3);
                              opacity: 1;
                            }
                          }
                        }
                        &:nth-child(2) {
                          span {
                            background-color: var(--clr1);
                          }
                          h3 {
                            color: var(--clr1);
                            small.percent {
                              color: var(--clr1);
                              opacity: 1;
                            }
                          }
                        }
                        &:nth-child(3) {
                          span {
                            background-color: var(--clr2);
                          }
                          h3 {
                            color: var(--clr2);
                            small.percent {
                              color: var(--clr2);
                              opacity: 1;
                            }
                          }
                        }
                      }
                    }

                    &.investment {
                      .content {
                        .bar_detail {
                          &:nth-child(1) {
                            span {
                              background-color: var(--white_color_rgba);
                            }
                            h3 {
                              color: var(--white_color_rgba);
                              small.percent {
                                color: var(--white_color_rgba);
                                opacity: 1;
                              }
                            }
                          }
                          &:nth-child(2) {
                            span {
                              background-color: var(--clr1);
                            }
                            h3 {
                              color: var(--clr1);
                              small.percent {
                                color: var(--clr1);
                                opacity: 1;
                              }
                            }
                          }
                          &:nth-child(3) {
                            span {
                              background-color: var(--clr2);
                            }
                            h3 {
                              color: var(--clr2);
                              small.percent {
                                color: var(--clr2);
                                opacity: 1;
                              }
                            }
                          }
                        }
                      }
                    }
                    &.days {
                      .content {
                        .bar_detail {
                          &:nth-child(1) {
                            span {
                              background-color: var(--clr1);
                            }
                            h3 {
                              color: var(--clr1);
                              small.percent {
                                color: var(--clr1);
                                opacity: 1;
                              }
                            }
                          }
                          &:nth-child(2) {
                            span {
                              background-color: var(--clr2);
                            }
                            h3 {
                              color: var(--clr2);
                              small.percent {
                                color: var(--clr2);
                                opacity: 1;
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }

              h4.no_record {
                color: var(--white_color_rgba);
                font-size: var(--size_0p95rem);
                font-style: italic;
                text-align: left;
              }

              .data_form {
                width: var(--width_100);
                margin-bottom: var(--size_0p8em);
                h1 {
                  width: var(--width_100);
                  text-align: center;
                  color: var(--white_color);
                  font-size: var(--size_1p2rem);
                  text-transform: uppercase;
                  font-weight: 400;
                  margin-bottom: var(--size_0p5em);
                }
                p {
                  width: var(--width_100);
                  text-align: justify;
                  color: var(--white_color);
                  font-size: var(--size_1p0rem);
                  font-weight: 400;
                  margin-bottom: var(--size_0p5em);
                  padding-bottom: var(--size_0p4em);
                  border-bottom: 1px solid var(--white_color_rgba2);
                }

                .field_group {
                  position: relative;
                  .form_control_group {
                    position: relative;
                    label {
                      margin-bottom: var(--size_0p4em);
                      font-weight: 400;
                      font-size: var(--size_0p9rem);
                    }

                    textarea {
                      border: 1px solid var(--white_color_rgba2);
                    }

                    input {
                      outline: none;
                      border: 1px solid var(--white_color_rgba2);
                      &::placeholder {
                        font-size: var(--size_0p85rem);
                      }
                    }
                    &.phone_selector {
                      input#deposit_number {
                        padding-left: 55px;
                      }
                      input#binance_number {
                        padding-left: 55px;
                      }
                      input#withdraw_number {
                        padding-left: 55px;
                      }
                    }
                  }
                  &.withdraw_investments {
                    display: none;
                    &.show {
                      display: block;
                    }
                  }
                }
                .custom_select {
                  bottom: 4px;
                  .controller {
                    .value_selector {
                      font-weight: 400;
                      text-align: left;
                      min-width: var(--width_100);
                      padding: inherit;
                      font-size: var(--size_0p95rem);
                      padding: var(--size_0p4em) var(--size_0p8em);
                    }
                  }
                  .options {
                    min-width: 150px;
                    max-height: 160px;
                    input {
                      background-color: transparent;
                      border: 0;
                      display: block;
                      width: var(--width_100);
                      text-align: left;
                      color: var(--white_color);
                      padding: 4px 8px;
                      border-radius: 2px;
                      transition: 300ms ease-in-out;
                      cursor: pointer;
                      font-weight: 400;
                      font-size: var(--size_0p8rem);

                      &:hover {
                        background-color: var(--white_color_rgba2);
                        color: var(--theme_color);
                      }
                    }

                    button {
                      width: var(--width_100);
                      padding: 4px;
                      gap: 10px;
                      img {
                        width: 20px;
                      }
                      span {
                        font-weight: 400;
                        font-size: var(--size_0p85rem);
                      }
                      &:hover {
                        background-color: var(--white_color_rgba2);
                        span {
                          color: var(--theme_color);
                        }
                      }
                    }
                    .option_buttons {
                      width: var(--width_100);
                    }

                    .search_option {
                      width: var(--width_100);
                      background-color: var(--secondary_color);
                      position: sticky;
                      z-index: 4;
                      left: 0;
                      top: 0;
                      input {
                        border: 0;
                        border-bottom: 0.6px solid var(--white_color_rgba);
                        color: var(--white_color);
                        outline: none;
                        border-radius: 4px;
                        background-color: transparent;
                        font-size: var(--size_0p85rem);
                        cursor: auto;
                        font-weight: 300;
                        &:hover {
                          background-color: transparent;
                        }
                      }
                    }
                  }

                  &.country_selector,
                  &.verify_selector {
                    .controller {
                      .value_selector {
                        background-color: transparent;
                        border-radius: 4px;
                        border: 0;
                        color: var(--white_color);
                        font-weight: 400;
                        text-align: center;
                        min-width: var(--width_100);
                        padding: 4px 4px;
                        font-size: var(--size_0p95rem);
                      }
                    }
                    .options {
                      min-width: 120px;
                      max-height: 200px;
                      overflow-y: scroll;
                      position: absolute;
                      top: 160%;
                      opacity: 0;

                      background-color: var(--white_color);
                      border: 0.6px solid var(--secondary_color_rgba2);

                      .option_buttons {
                        width: var(--width_100);
                        button {
                          background-color: transparent;
                          border: 0;
                          display: flex;
                          align-items: center;
                          width: var(--width_100);
                          text-align: left;
                          color: var(--secondary_color);
                          padding: 4px 8px;
                          border-radius: 2px;
                          transition: 300ms ease-in-out;
                          cursor: pointer;
                          font-weight: 400;

                          gap: 8px;
                          flex-wrap: nowrap;

                          &:hover {
                            background-color: var(--white_color_rgba2);
                            color: var(--theme_color);
                          }
                          &:not(:last-child) {
                            margin-bottom: var(--size_0p4em);
                          }
                          img {
                            object-fit: cover;
                            width: 24px;
                            border-radius: 2px;
                          }
                          span {
                            font-size: var(--size_0p8rem);
                            font-weight: 400;
                          }
                        }
                      }

                      .search_option {
                        width: var(--width_100);
                        background-color: var(--white_color);
                        margin-bottom: 10px;
                        position: sticky;
                        z-index: 4;
                        left: 0;
                        top: 0;
                        input {
                          border: 0;
                          outline: none;
                          border-bottom: 0.6px solid var(--secondary_color_rgba);
                          color: var(--secondary_color);
                          border-radius: 4px;
                          background-color: transparent;
                          font-size: var(--size_0p85rem);
                          cursor: auto;
                          font-weight: 300;
                          &::placeholder {
                            color: var(--secondary_color_rgba);
                          }
                        }
                      }
                      &.show {
                        top: 110%;
                        opacity: 1;
                        pointer-events: initial;
                      }
                    }
                  }
                  &.country_code {
                    max-width: 50px;
                    /* background-color: aqua; */
                    position: absolute;
                    bottom: 0px;
                    left: 0;

                    .controller {
                      input {
                        background-color: var(--white_color);
                        padding: 5px;
                        color: var(--secondary_color);
                        text-align: center;
                      }
                    }
                  }
                  &.rating_selector {
                    .options {
                      max-height: 90px;

                      button {
                        img {
                          width: 80px;
                        }
                        span {
                          font-size: var(--size_0p9rem);
                        }
                      }
                    }
                  }
                }
                .submit_button {
                  cursor: pointer;
                  width: var(--width_50);
                  margin-left: var(--width_50);

                  &:hover {
                    color: var(--theme_color);
                    background-color: var(--white_color);
                  }
                }
                &#gift_form {
                  .notes {
                    p {
                      border: 0;
                      font-weight: 300;
                      font-size: var(--size_0p9rem);
                      margin-bottom: var(--size_0p2em);
                    }
                    .div_element {
                      width: var(--width_100);
                      padding-top: var(--size_0p3em);

                      h5 {
                        width: var(--width_100);

                        font-size: var(--size_0p8rem);
                        font-weight: 400;
                        text-transform: uppercase;
                        margin-bottom: 8px;
                      }
                    }
                  }
                }
              }

              .plan_data {
                width: var(--width_100);
                padding-top: var(--size_0p6em);
                border-top: 1px solid var(--white_color_rgba);
                color: var(--white_color);
                display: none;
                h2 {
                  width: var(--width_100);
                  text-align: center;
                  text-transform: uppercase;
                  font-size: var(--size_1p2rem);
                  font-weight: 400;
                  margin-bottom: var(--size_0p4em);
                }
                h3 {
                  width: var(--width_100);
                  text-align: left;
                  font-size: var(--size_1p0rem);
                  font-weight: 400;
                  margin-bottom: var(--size_0p4em);
                  text-transform: uppercase;
                  span {
                    color: var(--theme_color);
                    text-transform: none;
                  }
                }
                .pair {
                  width: var(--width_100);
                  h4 {
                    flex: 1;
                    width: var(--width_100);
                    text-transform: uppercase;
                    font-weight: 400;
                    font-size: var(--size_0p95rem);
                    text-align: left;
                    span {
                      text-transform: none;
                    }
                  }
                }

                &.visible {
                  display: block;
                }
              }

              .slide {
                width: var(--width_100);
                position: relative;

                .caution {
                  text-align: justify;
                  display: block;
                  flex: 1;
                  width: var(--width_100);
                  color: var(--white_color);
                }

                .method_buttons {
                  display: block;
                  width: var(--width_100);
                  padding: 20px;
                  position: relative;

                  button {
                    width: var(--width_100);
                    position: relative;
                    border-radius: 4px;
                    background-color: transparent;
                    border: 1px solid var(--white_color_rgba);
                    font-size: var(--size_1p0rem);
                    padding: 10px;
                    margin-bottom: var(--size_1p0em);
                    font-weight: 400;
                    cursor: pointer;
                    gap: 20px;
                    color: var(--white_color);
                    font-size: var(--size_1p0em);
                    transition: all 300ms ease-in-out;
                    svg {
                      width: 20px;
                      height: 20px;
                      path {
                        fill: var(--white_color);
                      }
                      &.arrow {
                        position: absolute;
                        right: 10px;
                        top: 50%;
                        translate: 0 -50%;
                      }
                    }
                    &:hover {
                      background-color: var(--white_color);
                      border: 1px solid var(--white_color);
                      color: var(--theme_color);
                      svg {
                        path {
                          fill: var(--theme_color);
                        }
                      }
                    }
                  }
                }

                .form_details {
                  color: var(--white_color);
                  & > p {
                    font-weight: 500;
                    text-transform: uppercase;
                  }

                  &.credit {
                    h4 {
                      width: var(--width_100);
                      text-align: center;
                      font-weight: 300;
                      color: var(--theme_color);
                      font-size: var(--size_0p9rem);
                    }
                  }
                  p {
                    border: 0;
                    font-size: var(--size_0p85rem);
                    font-weight: 300;
                  }
                  .notes {
                    width: var(--width_100);
                    padding-bottom: var(--size_0p4em);
                    border-bottom: 1px solid var(--white_color_rgba2);
                    margin-bottom: var(--size_0p6em);
                    h4 {
                      text-transform: uppercase;
                      margin-bottom: var(--size_0p3em);
                      color: var(--white_color);
                      text-align: left;
                      font-size: var(--size_0p95rem);
                    }
                    p {
                      margin-bottom: 0;
                      &:last-child {
                        margin-bottom: var(--size_0p3em);
                      }
                    }
                    .div_element {
                      width: var(--width_100);
                      padding-top: var(--size_0p3em);

                      h5 {
                        width: var(--width_100);

                        font-size: var(--size_0p8rem);
                        font-weight: 400;
                        text-transform: uppercase;
                        margin-bottom: 8px;
                      }
                    }
                  }
                  h2 {
                    text-transform: uppercase;
                    margin-bottom: var(--size_0p3em);
                    color: var(--white_color);
                    text-align: left;
                    font-size: var(--size_0p95rem);
                  }
                }
              }
            }

            .col_content {
              width: var(--width_100);
              .question_container,
              .question_container_ask {
                width: var(--width_100);
                border: 1px solid var(--white_color_rgba2);
                border-radius: 6px;
                margin-bottom: var(--size_1p0em);
                position: relative;
                .question {
                  width: var(--width_100);
                  background-color: var(--white_color);
                  padding: var(--size_0p4em) var(--size_0p8em);
                  border-top-left-radius: 6px;
                  border-top-right-radius: 6px;
                  border-bottom-left-radius: 6px;
                  border-bottom-right-radius: 6px;

                  cursor: pointer;
                  color: var(--secondary_color);
                  border: 1px solid var(--white_color);
                  h2 {
                    flex: 1;
                    text-align: left;
                    color: var(--secondary_color);
                    margin-bottom: 0;
                  }
                  span {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    flex-shrink: 0;
                    transition: 300ms ease-in-out;
                    svg {
                      height: 90%;
                      width: 90%;
                      path {
                        fill: var(--secondary_color);
                      }
                    }
                    &.rotate {
                      rotate: -180deg;
                    }
                  }
                }
                .question_ask {
                  width: var(--width_100);
                  background-color: var(--white_color);
                  padding: var(--size_0p4em) var(--size_0p8em);
                  border-top-left-radius: 6px;
                  border-top-right-radius: 6px;
                  border-bottom-left-radius: 6px;
                  border-bottom-right-radius: 6px;

                  cursor: pointer;
                  color: var(--secondary_color);
                  border: 1px solid var(--white_color);
                  h2 {
                    flex: 1;
                    text-align: left;
                    color: var(--secondary_color);
                    margin-bottom: 0;
                  }
                  span {
                    color: var(--theme_color);
                  }
                }
                .question_form {
                  position: absolute;
                  padding: var(--size_1p0em);
                  opacity: 0;
                  pointer-events: none;
                  top: 10%;
                  left: 50%;
                  translate: -50%;
                  border-radius: 8px;
                  transition: 300ms ease-in-out;
                  width: var(--width_100);
                  border: 1px solid var(--white_color_rgba2);
                  z-index: 100;
                  background-color: var(--secondary_color);
                  h2 {
                    text-transform: none;
                    font-size: var(--size_0p9rem);
                    color: var(--white_color);
                  }

                  .field_group {
                    width: var(--width_100);
                    margin-bottom: var(--size_1p0em);
                    position: relative;
                    .dismiss_button {
                      position: absolute;
                      right: 8px;
                      top: 0;
                      color: var(--white_color);
                      font-size: var(--size_0p85rem);
                      text-align: center;
                      background-color: transparent;
                      border: 0;
                      font-weight: 500;
                      outline: none;
                      cursor: pointer;
                    }
                    .form_control_group {
                      width: var(--width_100);
                      color: var(--white_color);
                      flex: 1;
                      label {
                        display: block;
                        width: var(--width_100);
                        margin-bottom: var(--size_0p4em);
                        font-size: var(--size_1p0rem);
                      }
                      textarea,
                      input {
                        display: block;
                        width: var(--width_100);
                        background-color: transparent;
                        border-radius: 4px;
                        outline: none;
                        border: 1px solid var(--white_color_rgba2);
                        padding: var(--size_0p4em) var(--size_0p8em);
                        color: var(--white_color);
                        font-size: var(--size_0p85rem);
                        font-weight: 400;
                        &::placeholder {
                          color: var(--white_color_rgba);
                          opacity: 0.4;
                          font-size: var(--size_0p8rem);
                        }
                      }
                      textarea {
                        max-height: 100px;
                        resize: none;
                      }
                    }
                    &.double {
                      display: flex;
                      justify-content: space-between;
                      gap: var(--size_0p5em);
                    }
                  }
                  .submit_button {
                    display: block;
                    float: right;
                    border: 1px solid var(--white_color);
                    color: var(--secondary_color);
                    background-color: var(--white_color);
                    text-align: center;
                    padding: var(--size_0p4em) var(--size_4p0em);
                    border-radius: 4px;
                    transition: 250ms ease;
                    cursor: pointer;

                    &:hover {
                      background-color: var(--white_color);
                      color: var(--theme_color);
                    }
                  }
                  &.show {
                    top: 0;
                    opacity: 1;
                    pointer-events: initial;
                  }
                }

                .answer {
                  width: var(--width_100);

                  transition: 300ms ease-in-out;
                  display: grid;
                  grid-template-rows: 0fr;
                  .answer_content {
                    width: var(--width_100);
                    overflow: hidden;
                    p {
                      width: var(--width_100);
                      font-weight: 400;
                      text-align: justify;
                      font-size: var(--size_1p0rem);
                      padding: var(--size_0p5em);
                    }
                  }
                }
                &.show {
                  .question {
                    border-bottom-left-radius: 0;
                    border-bottom-right-radius: 0;
                  }

                  .answer {
                    grid-template-rows: 1fr;
                  }
                }
              }
            }

            .form_titles {
              display: flex;
              align-items: center;
              justify-content: space-between;
              button {
                cursor: pointer;
                background-color: transparent;
                width: 18px;
                border: 0;
                outline: none;
                height: 18px;
                svg {
                  width: var(--width_100);
                  height: var(--width_100);
                  path {
                    fill: var(--white_color);
                  }
                }
              }
            }
          }

          .section {
            width: var(--width_100);

            .headline {
              width: var(--width_100);
              margin-bottom: var(--size_0p8em);
              h4 {
                width: var(--width_100);
                text-transform: uppercase;
                font-size: var(--size_1p0rem);
                padding-bottom: var(--size_0p4em);
                color: var(--theme_color);
              }

              h5 {
                color: var(--white_color);
                font-weight: 400;
                font-size: var(--size_0p95rem);
              }
              .btn {
                color: var(--white_color);
                font-weight: 400;
                padding: var(--size_0p4em);
                background-color: transparent;
                border: 0;
                &:hover {
                  background-color: transparent;
                  border: 0;
                }
              }
            }
            .section_wrapper {
              width: var(--width_100);
              .service_card {
                width: var(--width_100);
                border-radius: 8px;
                border: 1px solid var(--white_color_rgba2);
                padding: var(--size_0p5em);
                grid-template-columns: repeat(2, minmax(300px, 1fr));
                &:not(:last-child) {
                  margin-bottom: var(--size_1p0em);
                }

                .plan_name {
                  .icon {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    svg {
                      width: var(--width_100);
                      height: var(--width_100);
                      path {
                        fill: var(--theme_color);
                      }
                    }
                  }
                  h2 {
                    text-transform: uppercase;
                    font-size: var(--size_1p5rem);
                    font-weight: 500;
                    font-family: var(--minor_family);
                    color: var(--white_color);
                    margin-bottom: var(--size_0p5em);
                  }
                  h3,
                  h4 {
                    font-size: var(--size_1p0rem);
                    font-weight: 400;
                    color: var(--white_color);
                    text-transform: uppercase;
                    span {
                      color: var(--theme_color);
                      text-transform: none;
                      margin-left: var(--size_0p4em);
                    }
                  }
                  h3 {
                    margin-bottom: 8px;
                  }
                  h4 {
                    span {
                      color: var(--white_color);
                    }
                  }
                }

                .interests {
                  h3 {
                    font-size: var(--size_3p0rem);
                    color: var(--theme_color);
                    font-weight: 500;
                    font-family: var(--minor_family);
                    margin-bottom: var(--size_0p5em);
                    span {
                      font-size: var(--size_1p2rem);
                      text-transform: uppercase;
                      color: var(--white_color);
                    }
                  }
                  h4 {
                    color: var(--white_color);
                    text-align: left;
                    text-transform: uppercase;
                    font-size: var(--size_1p2rem);
                    margin-bottom: var(--size_0p6em);
                  }

                  .btn {
                    background-color: var(--secondary_color);
                    color: var(--theme_color);
                    border: 1px solid var(--white_color_rgba2);
                    border-radius: 4px;
                    font-size: var(--size_1p2rem);
                    padding: var(--size_0p5em) var(--size_1p0em);
                    text-transform: uppercase;
                    &:hover {
                      background-color: var(--white_color);
                      border: 1px solid var(--white_color);
                    }
                  }
                }
              }
            }

            &.section_pages {
              .section_wrapper {
                .service_card {
                  border-radius: 6px;
                  grid-template-columns: repeat(2, minmax(150px, 1fr));

                  .plan_name {
                    .icon {
                      width: 40px;
                      height: 40px;
                    }
                    h2 {
                      font-size: var(--size_1p0rem);
                    }
                    h3,
                    h4 {
                      font-size: var(--size_0p95rem);
                    }
                    h4 {
                      span {
                        color: var(--white_color);
                      }
                    }
                  }

                  .interests {
                    h3 {
                      font-size: var(--size_2p0rem);
                    }
                    h4 {
                      font-size: var(--size_1p2rem);
                    }

                    .btn {
                      background-color: var(--secondary_color);
                      color: var(--theme_color);
                      border: 1px solid var(--white_color_rgba2);
                      border-radius: 4px;
                      font-size: var(--size_1p2rem);
                      padding: var(--size_0p5em) var(--size_1p0em);
                      text-transform: uppercase;
                      &:hover {
                        background-color: var(--white_color);
                        border: 1px solid var(--white_color);
                      }
                    }
                  }
                }
              }
            }
          }
        }

        .container_left {
          grid-column: 1/4;
          background-color: var(--secondary_color);
          border-radius: 8px;
          padding: var(--size_1p0em);
          .faq_form {
            position: absolute;
            padding: var(--size_1p0em);
            opacity: 0;
            pointer-events: none;
            top: 10%;
            left: 50%;
            translate: -50%;
            border-radius: 8px;
            transition: 300ms ease-in-out;
            width: var(--width_100);
            border: 1px solid var(--white_color_rgba2);
            z-index: 100;
            background-color: var(--secondary_color);

            .field_group {
              width: var(--width_100);
              margin-bottom: var(--size_1p0em);
              position: relative;
              .dismiss_button {
                position: absolute;
                right: 8px;
                top: 0;
                color: var(--white_color);
                font-size: var(--size_0p85rem);
                text-align: center;
                background-color: transparent;
                border: 0;
                font-weight: 500;
                outline: none;
                cursor: pointer;
              }
              .form_control_group {
                width: var(--width_100);
                color: var(--white_color);
                flex: 1;
                label {
                  display: block;
                  width: var(--width_100);
                  margin-bottom: var(--size_0p4em);
                  font-size: var(--size_1p0rem);
                }
                textarea,
                input {
                  display: block;
                  width: var(--width_100);
                  background-color: transparent;
                  border-radius: 4px;
                  outline: none;
                  border: 1px solid var(--white_color_rgba2);
                  padding: var(--size_0p4em) var(--size_0p8em);
                  color: var(--white_color);
                  font-size: var(--size_0p85rem);
                  font-weight: 400;
                  &::placeholder {
                    color: var(--white_color_rgba);
                    opacity: 0.4;
                    font-size: var(--size_0p8rem);
                  }
                }
                textarea {
                  max-height: 100px;
                  resize: none;
                }
              }
              &.double {
                display: flex;
                justify-content: space-between;
                gap: var(--size_0p5em);
              }
            }
            .submit_button {
              display: block;
              float: right;
              border: 1px solid var(--white_color);
              color: var(--secondary_color);
              background-color: var(--white_color);
              text-align: center;
              padding: var(--size_0p4em) var(--size_4p0em);
              border-radius: 4px;
              transition: 250ms ease;
              cursor: pointer;

              &:hover {
                background-color: var(--white_color);
                color: var(--theme_color);
              }
            }
            &.show {
              top: 0;
              opacity: 1;
              pointer-events: initial;
            }
          }
        }
        .container_right {
          grid-column: 4/6;
          background-color: var(--secondary_color);
          border-radius: 8px;
          padding: var(--size_1p0em);
        }
      }
    }
  }
}
.auth_footer {
  position: fixed;
  bottom: 0;
  z-index: 100;
  padding: var(--size_0p6em) var(--width_5);
  h2 {
    width: var(--width_100);
    text-align: center;
    font-size: var(--size_0p95rem);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

footer {
  width: var(--width_100);
  background: var(--secondary_color);
  color: var(--white_color);
  position: relative;
  z-index: 20;
  border-top: 1px solid var(--white_color_rgba);
  .footer_content {
    max-width: 1200px;
    margin: auto;
    padding: 2em 0;
    .left {
      flex: 1;
    }
    .left {
      gap: var(--size_1p0em);
      img {
        width: 60px;
      }
      h3 {
        text-transform: uppercase;
        font-size: var(--size_2p0rem);
        font-weight: 400;
      }
    }
    .footer_nav {
      flex: 2;
      gap: var(--size_1p0em);
      .btn {
        font-weight: 400;
        transition: all 0.25s ease-in-out;
        border-radius: 0;
        &:hover {
          border-bottom: 1px solid var(--white_color);
        }
      }
    }
    .socials {
      gap: var(--size_1p0em);
      .social_btn {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: transparent;
        border: 0;
        cursor: pointer;
        svg {
          width: 100%;
          height: 100%;
          path {
            fill: var(--white_color);
          }
        }
      }
    }
  }
  .copy_line {
    width: var(--width_100);
    border-top: 1px solid var(--white_color);
    padding: var(--size_1p0em);
    p {
      width: var(--width_100);
      text-align: center;
    }
  }
}

@media (max-width: 1250px) {
  .dashboard_container {
 
  
  .main_dashboard {
    

    .dashboard {
     
      .dashboard_preview {
        

        .warning {
          position: absolute;
          width: 89%;
          top: 0%;
          left: 50%;
          translate: -50%;
          box-sizing: border-box;
          padding: 10px;
          border-radius: 6px;
          background-color: var(--white_color_rgba2);
          border: 0.8px solid var(--fail_clr);
          p {
            color: var(--fail_clr);
            font-weight: 400;
            font-size: var(--size_0p95rem);
            font-style: italic;
            text-align: left;

            button {
              border: 0;
              cursor: pointer;
              color: var(--theme_color);
              outline: none;
              padding: 0;
              margin: 0;
              background-color: transparent;
            }
          }
        }

        .preview_box {
          border: 1px dotted var(--white_color_rgba2);
          background-color: var(--secondary_color);
          border-radius: 8px;
          padding: var(--size_0p6em);
          position: relative;
          .title_bar {
            width: var(--width_100);
            margin-bottom: var(--size_0p5em);
            padding-bottom: var(--size_0p4em);
            color: var(--white_color);
            border-bottom: 1px solid var(--white_color_rgba);
            h3 {
              text-transform: uppercase;
              font-weight: 500;
              font-size: var(--size_0p9rem);
              color: var(--theme_color);
            }
            .btn {
              width: 20px;
              height: 20px;
              cursor: pointer;
              svg {
                width: var(--width_100);
                height: var(--width_100);
                path {
                  fill: var(--white_color);
                }
              }
            }
          }
          .card_menu {
            position: absolute;
            right: 10px;
            top: 72px;
            z-index: 5;
            max-width: 140px;
            opacity: 0;
            pointer-events: none;
            transition: 350ms ease-in-out;
            background-color: var(--secondary_color);
            border: 1px solid var(--white_color_rgba2);
            border-radius: 4px;
            padding: var(--size_0p4em);
            button {
              width: var(--width_100);
              cursor: pointer;
              display: block;
              background-color: transparent;
              font-size: var(--size_0p85rem);
              transition: 300ms ease-in-out;
              outline: none;
              border: 0;
              text-align: left;
              padding: var(--size_0p2em);
              margin-bottom: var(--size_0p2em);
              color: var(--white_color);
              border-radius: 2px;
              &:hover {
                color: var(--theme_color);
                background-color: var(--white_color_rgba2);
              }
            }
            &.show {
              top: 36px;
              opacity: 1;
              pointer-events: initial;
            }
          }

          .pair {
            margin-bottom: var(--size_0p2em);
            width: var(--width_100);
            h2 {
              flex: 1;
              text-transform: uppercase;
              color: var(--white_color);
              font-size: var(--size_0p85rem);
              font-weight: 400;
              span {
                text-transform: none;
                font-weight: 300;
                margin-left: var(--size_0p4em);
                opacity: 1;
              }
            }
            &.withdraw {
              h2 {
                flex: 2;
              }
              h2.lesser {
                flex: 1;
              }
            }
          }
        }
      }

    
      .content_container {
       

        .column {
          width: var(--width_100);
          position: relative;
          overflow: scroll;
          h1 {
            width: var(--width_100);
            text-transform: uppercase;
            font-size: var(--size_1p0rem);
            font-weight: 500;
            color: var(--theme_color);
            margin-bottom: var(--size_1p0em);
            padding-bottom: var(--size_0p6em);
            border-bottom: 1px solid var(--white_color_rgba);
            position: relative;
            .btn {
              width: 20px;
              height: 20px;
              cursor: pointer;
              svg {
                width: var(--width_100);
                height: var(--width_100);
                path {
                  fill: var(--white_color);
                }
              }
            }

            &.full {
              .btn {
                width: auto;
                height: auto;
              }
            }
          }
        }
        .cards_container {
          position: relative;

          flex-wrap: nowrap;
          /* gap: var(--size_1p0em); */
          gap: 15px;

          .card {
            position: relative;
            .card_menu {
              position: absolute;
              right: 0;
              top: 60px;
              z-index: 6;
              max-width: 140px;
              opacity: 0;
              pointer-events: none;
              transition: 350ms ease-in-out;
              background-color: var(--secondary_color);
              border: 1px solid var(--white_color_rgba2);
              border-radius: 4px;
              padding: var(--size_0p4em);
              button {
                width: var(--width_100);
                cursor: pointer;
                display: block;
                background-color: transparent;
                font-size: var(--size_0p9rem);
                transition: 300ms ease-in-out;
                outline: none;
                border: 0;
                text-align: left;
                padding: var(--size_0p2em);
                margin-bottom: var(--size_0p2em);
                color: var(--white_color);
                &:hover {
                  color: var(--theme_color);
                  background-color: var(--white_color_rgba2);
                }
              }

              &.show {
                top: 30px;
                opacity: 1;
                pointer-events: initial;
              }
            }
          }
          &.investments_container {
            width: calc(400%);
            /* translate: calc(-25% - 15px); */
            /* translate: calc(-50% - 30px); */
            /* translate: calc(-75% - 45px); */
            .card {
              width: calc(100% / 4);
              min-width: calc(100% / 4);
            }
          }
          &.investments_admin_container {
              width: calc(300%);
              /* translate: calc(-25% - 15px); */
              /* translate: calc(-50% - 30px); */
              /* translate: calc(-75% - 45px); */
              .card {
                width: calc(100% / 3);
                min-width: calc(100% / 3);
              }
            }
          &.referrals_container {
            width: 400%;
            .card {
              width: calc(100% / 4);
              min-width: calc(100% / 4);
            }
          }
          &.ref_settings_container {
            width: 200%;
            .card {
              width: calc(100% / 2);
              min-width: calc(100% / 2);
            }
          }
          &.settings_container {
            width: var(--width_100);
            .card {
              width: var(--width_100);
              min-width: var(--width_100);
            }
          }
        }
        .investment_container {
          width: var(--width_100);

          max-height: 56vh;
          overflow-y: scroll;
          .investment_details {
            width: var(--width_100);
            margin-bottom: var(--size_1p0em);
            padding-bottom: var(--size_0p8em);
            color: var(--white_color);
            h2 {
              text-transform: uppercase;
              font-weight: 400;
              font-size: var(--size_0p95rem);
              width: var(--width_100);
              margin-bottom: var(--size_0p5em);
              padding-bottom: var(--size_0p3em);
              color: var(--theme_color);
            }
            h6 {
              color: var(--white_color);
              font-size: var(--size_0p85rem);
              b {
                font-weight: 600;
              }
            }
            .content_row {
              width: var(--width_100);
              column-gap: 40px;
              row-gap: 20px;
              border: 1px solid var(--white_color_rgba2);
              border-radius: 8px;
              padding: var(--size_1p0em);
              flex-wrap: wrap;
              &.ref_row,
              &.settings_row {
                &:not(:last-child) {
                  margin-bottom: var(--size_1p0em);
                }
                .one_row {
                  &:not(:last-child) {
                    margin-bottom: var(--size_1p0em);
                  }
                }
              }
              .one_row {
                flex: 1;
                h3 {
                  text-transform: uppercase;
                  width: var(--width_100);
                  font-size: var(--size_0p9rem);
                  padding-bottom: var(--size_0p4em);
                  border-bottom: 1px solid var(--white_color_rgba2);
                  margin-bottom: var(--size_0p4em);
                  button {
                    background-color: transparent;
                    padding: 2px 10px;
                    color: var(--white_color);
                    border: 0;
                    outline: none;
                    cursor: pointer;
                    font-weight: 500;
                    transition: 300ms ease-in-out;
                    border-radius: 2px;
                    &:hover {
                      color: var(--theme_color);
                      background-color: var(--white_color);
                    }
                    &.copy_btn {
                      padding: 0;
                      width: 20px;
                      height: 20px;
                      cursor: pointer;
                      position: relative;
                      outline: none;
                      border: none;
                      color: var(--theme_color);
                      background-color: transparent;

                      svg {
                        width: var(--width_100);
                        height: var(--width_100);
                        path {
                          fill: var(--theme_color);
                        }
                      }
                      .show_copy {
                        position: absolute;
                        color: var(--theme_color);
                        background-color: var(--white_color);
                        padding: 4px;
                        border-radius: 4px;
                        font-size: 10px;
                        text-align: center;
                        top: -10px;
                        left: -65px;
                        min-width: 60px;
                        opacity: 0;
                        pointer-events: none;
                        transition: 300ms ease-in-out;
                        &.show {
                          opacity: 1;
                        }
                      }

                      &:hover {
                        color: var(--theme_color);
                        background-color: transparent;
                        svg {
                          path {
                            fill: var(--theme_color);
                          }
                        }
                      }
                    }
                  }
                }
                .detail {
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  margin-bottom: var(--size_0p2em);
                  h4 {
                    font-weight: 400;
                    font-size: var(--size_0p8rem);
                    text-transform: uppercase;
                  }
                  p {
                    font-size: var(--size_0p85rem);
                    &.pending_status {
                      color: #72e6a4;
                    }
                    &.cancel_status {
                      color: var(--fail_clr);
                    }
                  }
                }
                .referral_detail {
                  width: var(--width_100);
                  color: var(--white_color);

                  div {
                    margin-bottom: var(--size_0p2em);
                    align-items: flex-end;
                    gap: 10px;
                    h4 {
                      font-size: var(--size_2p8rem);
                      text-transform: uppercase;
                      font-weight: 500;
                      color: var(--theme_color);
                    }
                    h5 {
                      font-weight: 400;
                      font-size: var(--size_1p15rem);
                      text-transform: uppercase;
                      margin-bottom: var(--size_0p6em);
                    }
                  }

                  p {
                    font-size: var(--size_0p85rem);
                  }
                }
                .col_content {
                  width: var(--width_100);
                  background-color: var(--white_color_rgba2);
                  padding: var(--size_0p8em);
                  border-radius: 6px;
                  position: relative;
                  .quote {
                    display: block;
                    float: left;
                    width: 30px;
                    margin-right: var(--size_0p6em);
                    svg {
                      height: 32px;
                      width: 32px;
                      path {
                        fill: var(--theme_color);
                        stroke-width: 0px;
                      }
                    }
                  }
                  p {
                    text-align: justify;
                    font-size: var(--size_1p0rem);
                    margin-bottom: var(--size_0p6em);
                    color: var(--white_color);
                  }
                  .names {
                    width: var(--width_100);
                    .stars {
                      margin-bottom: var(--size_0p4em);
                      img {
                        width: 100px;
                        object-fit: cover;
                      }
                      svg {
                        width: 100px;
                        path {
                          fill: var(--theme_color);
                          stroke-width: 0px;
                        }
                      }
                    }
                    h3 {
                      font-weight: 500;
                      text-transform: uppercase;
                      color: var(--theme_color);
                      border: 0;
                      font-size: var(--size_1p2rem);
                    }
                    h4 {
                      font-weight: 400;
                      color: var(--white_color);
                      font-size: var(--size_1p0rem);
                    }
                  }
                  .review_status {
                    position: absolute;
                    right: var(--size_0p8em);
                    bottom: var(--size_0p8em);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 20px;
                    span {
                      font-style: italic;
                      font-size: var(--size_0p85rem);
                      &.pending_status {
                        color: var(--pending_clr);
                      }
                      &.success_status {
                        color: var(--success_clr);
                      }
                      &.cancel_status {
                        color: var(--fail_clr);
                      }
                    }
                    .btn {
                      border-radius: 6px;
                      padding: 4px 8px;
                      cursor: pointer;
                    }
                    .reject {
                      border: 1px solid var(--white_color_rgba);
                      &:hover {
                        color: var(--theme_color);
                        background-color: var(--white_color);
                      }
                    }
                    .accept {
                      border: 1px solid var(--white_color);
                      background-color: var(--white_color);
                      color: var(--theme_color);
                      &:hover {
                        color: var(--theme_color);
                        background-color: var(--white_color);
                      }
                    }
                  }
                }

                .data_form {
                  .field_group {
                    .form_control_group {
                      label {
                        font-weight: 400;
                        font-size: var(--size_1p0rem);
                      }

                      input {
                        border: 0;
                        border-bottom: 1px solid var(--white_color_rgba2);
                        border-radius: 0;
                      }
                      textarea {
                        max-height: 100px;
                        resize: none;
                      }
                    }
                    &.double {
                      gap: 30px;
                    }
                  }
                  .submit_button {
                    float: right;
                    display: none;
                    background-color: var(--white_color);

                    cursor: pointer;

                    &:hover {
                      color: var(--theme_color);
                      background-color: var(--white_color);
                    }
                  }
                  .pass_submit {
                    margin-left: 70%;
                    width: 30%;
                    position: relative;
                    border: 1px solid var(--white_color);
                    color: var(--secondary_color);
                    cursor: pointer;
                    background-color: var(--white_color);
                    text-align: center;
                    padding: var(--size_0p4em) var(--size_4p0em);
                    border-radius: 4px;

                    &:hover {
                      color: var(--theme_color);
                      background-color: var(--white_color);
                    }
                  }
                  &.editable {
                    .field_group {
                      .form_control_group {
                        input {
                          border: 0;
                          border-bottom: 1px solid var(--white_color);
                          border-radius: 4px;
                        }
                      }
                    }
                    .submit_button {
                      display: block;
                    }
                  }
                  &.security_form {
                    display: none;
                    &.editable {
                      display: block;
                    }
                  }
                  h6 {
                    width: var(--width_100);
                    text-align: left;
                    margin: 4px 0;
                    color: var(--theme_color);
                    font-style: italic;
                    font-size: var(--size_0p85rem);
                  }
                  .inputs {
                    input {
                      background-color: transparent;
                      text-align: left;
                      color: var(--theme_color);
                      font-style: italic;
                      font-size: var(--size_0p95rem);
                      outline: none;
                      border: 0;

                      padding: 4px 10px;
                    }
                  }
                  .form_btns {
                    .btn {
                      color: var(--white_color);
                      font-weight: 400;
                      font-size: var(--size_0p95rem);
                      border: 0;
                      padding: 4px 8px;
                      &:hover {
                        background-color: var(--white_color);
                        color: var(--theme_color);
                      }
                    }
                  }
                }
                &.currency_row {
                  border-bottom: 1px solid var(--white_color_rgba2);
                  padding-bottom: 10px;
                  h5 {
                    color: var(--theme_color);
                    font-style: italic;
                    font-size: var(--size_0p85rem);
                    text-align: left;
                    width: var(--width_100);
                  }
                  .custom_select {
                    .controller {
                      margin-top: 10px;
                      width: var(--width_100);
                      input[type="button"] {
                        min-width: 150px;
                      }
                    }
                  }
                }
                .account_btns {
                  width: var(--width_100);
                  button {
                    border: 0;
                    cursor: pointer;
                    color: var(--white_color);
                    font-weight: 400;
                    text-align: center;
                    padding: 4px 8px;
                    font-size: var(--size_0p95rem);
                    &:hover {
                      background-color: var(--white_color);
                      color: var(--theme_color);
                    }
                  }
                }
              }
              .profile_image {
                max-width: 120px;
                flex-shrink: 0;
                .user_image {
                  width: 120px;
                  height: 120px;
                  border-radius: 6px;
                  margin-bottom: var(--size_0p5em);
                  img {
                    width: var(--width_100);
                    height: var(--width_100);
                    border-radius: 6px;
                    object-fit: cover;
                  }
                }
                .data_form {
                  width: var(--width_100);
                  position: relative;
                  .field_group {
                    width: var(--width_100);
                    .form_control_group {
                      color: var(--white_color);

                      label {
                        width: var(--width_100);
                        max-height: 50px;
                        text-align: center;
                        padding: var(--size_0p4em);
                        position: absolute;
                        cursor: pointer;
                        z-index: 4;
                        font-weight: 300;
                        font-size: var(--size_0p95rem);
                        transition: 300ms ease-in-out;
                        border-radius: 4px;
                        text-wrap: nowrap;
                        overflow: hidden;
                        border: 0.6px solid var(--white_color);
                        &:hover {
                          background-color: var(--white_color);
                          color: var(--theme_color);
                        }
                      }
                      input {
                        position: relative;
                        opacity: 0;
                        z-index: 1;
                      }
                    }
                  }
                  .form_btns {
                    width: var(--width_100);
                    button {
                      background-color: transparent;
                      text-transform: uppercase;
                      text-align: center;
                      color: var(--white_color);
                      border: 0;
                      font-size: var(--size_0p9rem);
                      padding: 4px 8px;
                      cursor: pointer;
                      font-weight: 500;
                      border-radius: 4px;
                      width: var(--width_100);
                      transition: 300ms ease-in-out;
                      &:hover {
                        color: var(--theme_color);
                      }

                      &:nth-child(1) {
                        color: var(--secondary_color);
                        background-color: var(--white_color);
                        margin-bottom: var(--size_0p8em);
                        &:hover {
                          color: var(--theme_color);
                        }
                      }
                      &:nth-child(2) {
                        color: var(--white_color);
                        background-color: var(--secondary_color);
                        border: 1px solid var(--white_color_rgba);
                        &:hover {
                          background-color: var(--white_color);
                          color: var(--theme_color);
                        }
                      }
                    }
                  }
                }
              }
              .stats_row {
                flex-basis: 100%;
                width: 100%;
                gap: 20px;
                .starts_col {
                  flex: 1;
                  /* background-color: aqua; */
                  .progress_bar {
                    width: 200px;
                    height: 200px;
                    border-radius: 50%;
                    position: relative;

                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .content {
                      width: 185px;
                      height: 185px;
                      border-radius: 50%;
                      background-color: var(--secondary_color);
                      display: flex;
                      justify-content: center;
                      align-items: flex-start;
                      padding-left: 30px;
                      flex-direction: column;

                      .bar_detail {
                        display: flex;
                        flex-wrap: nowrap;
                        opacity: 0;
                        position: relative;
                        animation: fadeIn 2s ease 2s forwards;
                        span {
                          position: absolute;
                          width: 8px;
                          height: 8px;
                          top: 10px;
                          left: 0;
                        }
                        h3 {
                          margin-left: 15px;
                          font-size: 20px;
                          color: var(--theme_color);
                          small {
                            font-size: 11px;
                            color: var(--white_color);
                            text-transform: uppercase;
                            font-weight: 300;
                          }
                        }
                        &:nth-child(1) {
                          span {
                            background-color: var(--clr3);
                          }
                          h3 {
                            color: var(--clr3);
                            small.percent {
                              color: var(--clr3);
                              opacity: 1;
                            }
                          }
                        }
                        &:nth-child(2) {
                          span {
                            background-color: var(--clr1);
                          }
                          h3 {
                            color: var(--clr1);
                            small.percent {
                              color: var(--clr1);
                              opacity: 1;
                            }
                          }
                        }
                        &:nth-child(3) {
                          span {
                            background-color: var(--clr2);
                          }
                          h3 {
                            color: var(--clr2);
                            small.percent {
                              color: var(--clr2);
                              opacity: 1;
                            }
                          }
                        }
                      }
                    }

                    &.investment {
                      .content {
                        .bar_detail {
                          &:nth-child(1) {
                            span {
                              background-color: var(--white_color_rgba);
                            }
                            h3 {
                              color: var(--white_color_rgba);
                              small.percent {
                                color: var(--white_color_rgba);
                                opacity: 1;
                              }
                            }
                          }
                          &:nth-child(2) {
                            span {
                              background-color: var(--clr1);
                            }
                            h3 {
                              color: var(--clr1);
                              small.percent {
                                color: var(--clr1);
                                opacity: 1;
                              }
                            }
                          }
                          &:nth-child(3) {
                            span {
                              background-color: var(--clr2);
                            }
                            h3 {
                              color: var(--clr2);
                              small.percent {
                                color: var(--clr2);
                                opacity: 1;
                              }
                            }
                          }
                        }
                      }
                    }
                    &.days {
                      .content {
                        .bar_detail {
                          &:nth-child(1) {
                            span {
                              background-color: var(--clr1);
                            }
                            h3 {
                              color: var(--clr1);
                              small.percent {
                                color: var(--clr1);
                                opacity: 1;
                              }
                            }
                          }
                          &:nth-child(2) {
                            span {
                              background-color: var(--clr2);
                            }
                            h3 {
                              color: var(--clr2);
                              small.percent {
                                color: var(--clr2);
                                opacity: 1;
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }

              h4.no_record {
                color: var(--white_color_rgba);
                font-size: var(--size_0p95rem);
                font-style: italic;
                text-align: left;
              }

              .data_form {
                width: var(--width_100);
                margin-bottom: var(--size_0p8em);
                h1 {
                  width: var(--width_100);
                  text-align: center;
                  color: var(--white_color);
                  font-size: var(--size_1p2rem);
                  text-transform: uppercase;
                  font-weight: 400;
                  margin-bottom: var(--size_0p5em);
                }
                p {
                  width: var(--width_100);
                  text-align: justify;
                  color: var(--white_color);
                  font-size: var(--size_1p0rem);
                  font-weight: 400;
                  margin-bottom: var(--size_0p5em);
                  padding-bottom: var(--size_0p4em);
                  border-bottom: 1px solid var(--white_color_rgba2);
                }

                .field_group {
                  position: relative;
                  .form_control_group {
                    position: relative;
                    label {
                      margin-bottom: var(--size_0p4em);
                      font-weight: 400;
                      font-size: var(--size_0p9rem);
                    }

                    textarea {
                      border: 1px solid var(--white_color_rgba2);
                    }

                    input {
                      outline: none;
                      border: 1px solid var(--white_color_rgba2);
                      &::placeholder {
                        font-size: var(--size_0p85rem);
                      }
                    }
                    &.phone_selector {
                      input#deposit_number {
                        padding-left: 55px;
                      }
                      input#binance_number {
                        padding-left: 55px;
                      }
                      input#withdraw_number {
                        padding-left: 55px;
                      }
                    }
                  }
                  &.withdraw_investments {
                    display: none;
                    &.show {
                      display: block;
                    }
                  }
                }
                .custom_select {
                  bottom: 4px;
                  .controller {
                    .value_selector {
                      font-weight: 400;
                      text-align: left;
                      min-width: var(--width_100);
                      padding: inherit;
                      font-size: var(--size_0p95rem);
                      padding: var(--size_0p4em) var(--size_0p8em);
                    }
                  }
                  .options {
                    min-width: 150px;
                    max-height: 160px;
                    input {
                      background-color: transparent;
                      border: 0;
                      display: block;
                      width: var(--width_100);
                      text-align: left;
                      color: var(--white_color);
                      padding: 4px 8px;
                      border-radius: 2px;
                      transition: 300ms ease-in-out;
                      cursor: pointer;
                      font-weight: 400;
                      font-size: var(--size_0p8rem);

                      &:hover {
                        background-color: var(--white_color_rgba2);
                        color: var(--theme_color);
                      }
                    }

                    button {
                      width: var(--width_100);
                      padding: 4px;
                      gap: 10px;
                      img {
                        width: 20px;
                      }
                      span {
                        font-weight: 400;
                        font-size: var(--size_0p85rem);
                      }
                      &:hover {
                        background-color: var(--white_color_rgba2);
                        span {
                          color: var(--theme_color);
                        }
                      }
                    }
                    .option_buttons {
                      width: var(--width_100);
                    }

                    .search_option {
                      width: var(--width_100);
                      background-color: var(--secondary_color);
                      position: sticky;
                      z-index: 4;
                      left: 0;
                      top: 0;
                      input {
                        border: 0;
                        border-bottom: 0.6px solid var(--white_color_rgba);
                        color: var(--white_color);
                        outline: none;
                        border-radius: 4px;
                        background-color: transparent;
                        font-size: var(--size_0p85rem);
                        cursor: auto;
                        font-weight: 300;
                        &:hover {
                          background-color: transparent;
                        }
                      }
                    }
                  }

                  &.country_selector,
                  &.verify_selector {
                    .controller {
                      .value_selector {
                        background-color: transparent;
                        border-radius: 4px;
                        border: 0;
                        color: var(--white_color);
                        font-weight: 400;
                        text-align: center;
                        min-width: var(--width_100);
                        padding: 4px 4px;
                        font-size: var(--size_0p95rem);
                      }
                    }
                    .options {
                      min-width: 120px;
                      max-height: 200px;
                      overflow-y: scroll;
                      position: absolute;
                      top: 160%;
                      opacity: 0;

                      background-color: var(--white_color);
                      border: 0.6px solid var(--secondary_color_rgba2);

                      .option_buttons {
                        width: var(--width_100);
                        button {
                          background-color: transparent;
                          border: 0;
                          display: flex;
                          align-items: center;
                          width: var(--width_100);
                          text-align: left;
                          color: var(--secondary_color);
                          padding: 4px 8px;
                          border-radius: 2px;
                          transition: 300ms ease-in-out;
                          cursor: pointer;
                          font-weight: 400;

                          gap: 8px;
                          flex-wrap: nowrap;

                          &:hover {
                            background-color: var(--white_color_rgba2);
                            color: var(--theme_color);
                          }
                          &:not(:last-child) {
                            margin-bottom: var(--size_0p4em);
                          }
                          img {
                            object-fit: cover;
                            width: 24px;
                            border-radius: 2px;
                          }
                          span {
                            font-size: var(--size_0p8rem);
                            font-weight: 400;
                          }
                        }
                      }

                      .search_option {
                        width: var(--width_100);
                        background-color: var(--white_color);
                        margin-bottom: 10px;
                        position: sticky;
                        z-index: 4;
                        left: 0;
                        top: 0;
                        input {
                          border: 0;
                          outline: none;
                          border-bottom: 0.6px solid var(--secondary_color_rgba);
                          color: var(--secondary_color);
                          border-radius: 4px;
                          background-color: transparent;
                          font-size: var(--size_0p85rem);
                          cursor: auto;
                          font-weight: 300;
                          &::placeholder {
                            color: var(--secondary_color_rgba);
                          }
                        }
                      }
                      &.show {
                        top: 110%;
                        opacity: 1;
                        pointer-events: initial;
                      }
                    }
                  }
                  &.country_code {
                    max-width: 50px;
                    /* background-color: aqua; */
                    position: absolute;
                    bottom: 0px;
                    left: 0;

                    .controller {
                      input {
                        background-color: var(--white_color);
                        padding: 5px;
                        color: var(--secondary_color);
                        text-align: center;
                      }
                    }
                  }
                  &.rating_selector {
                    .options {
                      max-height: 90px;

                      button {
                        img {
                          width: 80px;
                        }
                        span {
                          font-size: var(--size_0p9rem);
                        }
                      }
                    }
                  }
                }
                .submit_button {
                  cursor: pointer;
                  width: var(--width_50);
                  margin-left: var(--width_50);

                  &:hover {
                    color: var(--theme_color);
                    background-color: var(--white_color);
                  }
                }
                &#gift_form {
                  .notes {
                    p {
                      border: 0;
                      font-weight: 300;
                      font-size: var(--size_0p9rem);
                      margin-bottom: var(--size_0p2em);
                    }
                    .div_element {
                      width: var(--width_100);
                      padding-top: var(--size_0p3em);

                      h5 {
                        width: var(--width_100);

                        font-size: var(--size_0p8rem);
                        font-weight: 400;
                        text-transform: uppercase;
                        margin-bottom: 8px;
                      }
                    }
                  }
                }
              }

              .plan_data {
                width: var(--width_100);
                padding-top: var(--size_0p6em);
                border-top: 1px solid var(--white_color_rgba);
                color: var(--white_color);
                display: none;
                h2 {
                  width: var(--width_100);
                  text-align: center;
                  text-transform: uppercase;
                  font-size: var(--size_1p2rem);
                  font-weight: 400;
                  margin-bottom: var(--size_0p4em);
                }
                h3 {
                  width: var(--width_100);
                  text-align: left;
                  font-size: var(--size_1p0rem);
                  font-weight: 400;
                  margin-bottom: var(--size_0p4em);
                  text-transform: uppercase;
                  span {
                    color: var(--theme_color);
                    text-transform: none;
                  }
                }
                .pair {
                  width: var(--width_100);
                  h4 {
                    flex: 1;
                    width: var(--width_100);
                    text-transform: uppercase;
                    font-weight: 400;
                    font-size: var(--size_0p95rem);
                    text-align: left;
                    span {
                      text-transform: none;
                    }
                  }
                }

                &.visible {
                  display: block;
                }
              }

              .slide {
                width: var(--width_100);
                position: relative;

                .caution {
                  text-align: justify;
                  display: block;
                  flex: 1;
                  width: var(--width_100);
                  color: var(--white_color);
                }

                .method_buttons {
                  display: block;
                  width: var(--width_100);
                  padding: 20px;
                  position: relative;

                  button {
                    width: var(--width_100);
                    position: relative;
                    border-radius: 4px;
                    background-color: transparent;
                    border: 1px solid var(--white_color_rgba);
                    font-size: var(--size_1p0rem);
                    padding: 10px;
                    margin-bottom: var(--size_1p0em);
                    font-weight: 400;
                    cursor: pointer;
                    gap: 20px;
                    color: var(--white_color);
                    font-size: var(--size_1p0em);
                    transition: all 300ms ease-in-out;
                    svg {
                      width: 20px;
                      height: 20px;
                      path {
                        fill: var(--white_color);
                      }
                      &.arrow {
                        position: absolute;
                        right: 10px;
                        top: 50%;
                        translate: 0 -50%;
                      }
                    }
                    &:hover {
                      background-color: var(--white_color);
                      border: 1px solid var(--white_color);
                      color: var(--theme_color);
                      svg {
                        path {
                          fill: var(--theme_color);
                        }
                      }
                    }
                  }
                }

                .form_details {
                  color: var(--white_color);
                  & > p {
                    font-weight: 500;
                    text-transform: uppercase;
                  }

                  &.credit {
                    h4 {
                      width: var(--width_100);
                      text-align: center;
                      font-weight: 300;
                      color: var(--theme_color);
                      font-size: var(--size_0p9rem);
                    }
                  }
                  p {
                    border: 0;
                    font-size: var(--size_0p85rem);
                    font-weight: 300;
                  }
                  .notes {
                    width: var(--width_100);
                    padding-bottom: var(--size_0p4em);
                    border-bottom: 1px solid var(--white_color_rgba2);
                    margin-bottom: var(--size_0p6em);
                    h4 {
                      text-transform: uppercase;
                      margin-bottom: var(--size_0p3em);
                      color: var(--white_color);
                      text-align: left;
                      font-size: var(--size_0p95rem);
                    }
                    p {
                      margin-bottom: 0;
                      &:last-child {
                        margin-bottom: var(--size_0p3em);
                      }
                    }
                    .div_element {
                      width: var(--width_100);
                      padding-top: var(--size_0p3em);

                      h5 {
                        width: var(--width_100);

                        font-size: var(--size_0p8rem);
                        font-weight: 400;
                        text-transform: uppercase;
                        margin-bottom: 8px;
                      }
                    }
                  }
                  h2 {
                    text-transform: uppercase;
                    margin-bottom: var(--size_0p3em);
                    color: var(--white_color);
                    text-align: left;
                    font-size: var(--size_0p95rem);
                  }
                }
              }
            }

            .col_content {
              width: var(--width_100);
              .question_container,
              .question_container_ask {
                width: var(--width_100);
                border: 1px solid var(--white_color_rgba2);
                border-radius: 6px;
                margin-bottom: var(--size_1p0em);
                position: relative;
                .question {
                  width: var(--width_100);
                  background-color: var(--white_color);
                  padding: var(--size_0p4em) var(--size_0p8em);
                  border-top-left-radius: 6px;
                  border-top-right-radius: 6px;
                  border-bottom-left-radius: 6px;
                  border-bottom-right-radius: 6px;

                  cursor: pointer;
                  color: var(--secondary_color);
                  border: 1px solid var(--white_color);
                  h2 {
                    flex: 1;
                    text-align: left;
                    color: var(--secondary_color);
                    margin-bottom: 0;
                  }
                  span {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    flex-shrink: 0;
                    transition: 300ms ease-in-out;
                    svg {
                      height: 90%;
                      width: 90%;
                      path {
                        fill: var(--secondary_color);
                      }
                    }
                    &.rotate {
                      rotate: -180deg;
                    }
                  }
                }
                .question_ask {
                  width: var(--width_100);
                  background-color: var(--white_color);
                  padding: var(--size_0p4em) var(--size_0p8em);
                  border-top-left-radius: 6px;
                  border-top-right-radius: 6px;
                  border-bottom-left-radius: 6px;
                  border-bottom-right-radius: 6px;

                  cursor: pointer;
                  color: var(--secondary_color);
                  border: 1px solid var(--white_color);
                  h2 {
                    flex: 1;
                    text-align: left;
                    color: var(--secondary_color);
                    margin-bottom: 0;
                  }
                  span {
                    color: var(--theme_color);
                  }
                }
                .question_form {
                  position: absolute;
                  padding: var(--size_1p0em);
                  opacity: 0;
                  pointer-events: none;
                  top: 10%;
                  left: 50%;
                  translate: -50%;
                  border-radius: 8px;
                  transition: 300ms ease-in-out;
                  width: var(--width_100);
                  border: 1px solid var(--white_color_rgba2);
                  z-index: 100;
                  background-color: var(--secondary_color);
                  h2 {
                    text-transform: none;
                    font-size: var(--size_0p9rem);
                    color: var(--white_color);
                  }

                  .field_group {
                    width: var(--width_100);
                    margin-bottom: var(--size_1p0em);
                    position: relative;
                    .dismiss_button {
                      position: absolute;
                      right: 8px;
                      top: 0;
                      color: var(--white_color);
                      font-size: var(--size_0p85rem);
                      text-align: center;
                      background-color: transparent;
                      border: 0;
                      font-weight: 500;
                      outline: none;
                      cursor: pointer;
                    }
                    .form_control_group {
                      width: var(--width_100);
                      color: var(--white_color);
                      flex: 1;
                      label {
                        display: block;
                        width: var(--width_100);
                        margin-bottom: var(--size_0p4em);
                        font-size: var(--size_1p0rem);
                      }
                      textarea,
                      input {
                        display: block;
                        width: var(--width_100);
                        background-color: transparent;
                        border-radius: 4px;
                        outline: none;
                        border: 1px solid var(--white_color_rgba2);
                        padding: var(--size_0p4em) var(--size_0p8em);
                        color: var(--white_color);
                        font-size: var(--size_0p85rem);
                        font-weight: 400;
                        &::placeholder {
                          color: var(--white_color_rgba);
                          opacity: 0.4;
                          font-size: var(--size_0p8rem);
                        }
                      }
                      textarea {
                        max-height: 100px;
                        resize: none;
                      }
                    }
                    &.double {
                      display: flex;
                      justify-content: space-between;
                      gap: var(--size_0p5em);
                    }
                  }
                  .submit_button {
                    display: block;
                    float: right;
                    border: 1px solid var(--white_color);
                    color: var(--secondary_color);
                    background-color: var(--white_color);
                    text-align: center;
                    padding: var(--size_0p4em) var(--size_4p0em);
                    border-radius: 4px;
                    transition: 250ms ease;
                    cursor: pointer;

                    &:hover {
                      background-color: var(--white_color);
                      color: var(--theme_color);
                    }
                  }
                  &.show {
                    top: 0;
                    opacity: 1;
                    pointer-events: initial;
                  }
                }

                .answer {
                  width: var(--width_100);

                  transition: 300ms ease-in-out;
                  display: grid;
                  grid-template-rows: 0fr;
                  .answer_content {
                    width: var(--width_100);
                    overflow: hidden;
                    p {
                      width: var(--width_100);
                      font-weight: 400;
                      text-align: justify;
                      font-size: var(--size_1p0rem);
                      padding: var(--size_0p5em);
                    }
                  }
                }
                &.show {
                  .question {
                    border-bottom-left-radius: 0;
                    border-bottom-right-radius: 0;
                  }

                  .answer {
                    grid-template-rows: 1fr;
                  }
                }
              }
            }

            .form_titles {
              display: flex;
              align-items: center;
              justify-content: space-between;
              button {
                cursor: pointer;
                background-color: transparent;
                width: 18px;
                border: 0;
                outline: none;
                height: 18px;
                svg {
                  width: var(--width_100);
                  height: var(--width_100);
                  path {
                    fill: var(--white_color);
                  }
                }
              }
            }
          }

          .section {
            width: var(--width_100);

            .headline {
              width: var(--width_100);
              margin-bottom: var(--size_0p8em);
              h4 {
                width: var(--width_100);
                text-transform: uppercase;
                font-size: var(--size_1p0rem);
                padding-bottom: var(--size_0p4em);
                color: var(--theme_color);
              }

              h5 {
                color: var(--white_color);
                font-weight: 400;
                font-size: var(--size_0p95rem);
              }
              .btn {
                color: var(--white_color);
                font-weight: 400;
                padding: var(--size_0p4em);
                background-color: transparent;
                border: 0;
                &:hover {
                  background-color: transparent;
                  border: 0;
                }
              }
            }
            .section_wrapper {
              width: var(--width_100);
              .service_card {
                width: var(--width_100);
                border-radius: 8px;
                border: 1px solid var(--white_color_rgba2);
                padding: var(--size_0p5em);
                grid-template-columns: repeat(2, minmax(300px, 1fr));
                &:not(:last-child) {
                  margin-bottom: var(--size_1p0em);
                }

                .plan_name {
                  .icon {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    svg {
                      width: var(--width_100);
                      height: var(--width_100);
                      path {
                        fill: var(--theme_color);
                      }
                    }
                  }
                  h2 {
                    text-transform: uppercase;
                    font-size: var(--size_1p5rem);
                    font-weight: 500;
                    font-family: var(--minor_family);
                    color: var(--white_color);
                    margin-bottom: var(--size_0p5em);
                  }
                  h3,
                  h4 {
                    font-size: var(--size_1p0rem);
                    font-weight: 400;
                    color: var(--white_color);
                    text-transform: uppercase;
                    span {
                      color: var(--theme_color);
                      text-transform: none;
                      margin-left: var(--size_0p4em);
                    }
                  }
                  h3 {
                    margin-bottom: 8px;
                  }
                  h4 {
                    span {
                      color: var(--white_color);
                    }
                  }
                }

                .interests {
                  h3 {
                    font-size: var(--size_3p0rem);
                    color: var(--theme_color);
                    font-weight: 500;
                    font-family: var(--minor_family);
                    margin-bottom: var(--size_0p5em);
                    span {
                      font-size: var(--size_1p2rem);
                      text-transform: uppercase;
                      color: var(--white_color);
                    }
                  }
                  h4 {
                    color: var(--white_color);
                    text-align: left;
                    text-transform: uppercase;
                    font-size: var(--size_1p2rem);
                    margin-bottom: var(--size_0p6em);
                  }

                  .btn {
                    background-color: var(--secondary_color);
                    color: var(--theme_color);
                    border: 1px solid var(--white_color_rgba2);
                    border-radius: 4px;
                    font-size: var(--size_1p2rem);
                    padding: var(--size_0p5em) var(--size_1p0em);
                    text-transform: uppercase;
                    &:hover {
                      background-color: var(--white_color);
                      border: 1px solid var(--white_color);
                    }
                  }
                }
              }
            }

            &.section_pages {
              .section_wrapper {
                .service_card {
                  border-radius: 6px;
                  grid-template-columns: repeat(2, minmax(150px, 1fr));

                  .plan_name {
                    .icon {
                      width: 40px;
                      height: 40px;
                    }
                    h2 {
                      font-size: var(--size_1p0rem);
                    }
                    h3,
                    h4 {
                      font-size: var(--size_0p95rem);
                    }
                    h4 {
                      span {
                        color: var(--white_color);
                      }
                    }
                  }

                  .interests {
                    h3 {
                      font-size: var(--size_2p0rem);
                    }
                    h4 {
                      font-size: var(--size_1p2rem);
                    }

                    .btn {
                      background-color: var(--secondary_color);
                      color: var(--theme_color);
                      border: 1px solid var(--white_color_rgba2);
                      border-radius: 4px;
                      font-size: var(--size_1p2rem);
                      padding: var(--size_0p5em) var(--size_1p0em);
                      text-transform: uppercase;
                      &:hover {
                        background-color: var(--white_color);
                        border: 1px solid var(--white_color);
                      }
                    }
                  }
                }
              }
            }
          }
        }

        .container_left {
          grid-column: 1/4;
          background-color: var(--secondary_color);
          border-radius: 8px;
          padding: var(--size_1p0em);
          .faq_form {
            position: absolute;
            padding: var(--size_1p0em);
            opacity: 0;
            pointer-events: none;
            top: 10%;
            left: 50%;
            translate: -50%;
            border-radius: 8px;
            transition: 300ms ease-in-out;
            width: var(--width_100);
            border: 1px solid var(--white_color_rgba2);
            z-index: 100;
            background-color: var(--secondary_color);

            .field_group {
              width: var(--width_100);
              margin-bottom: var(--size_1p0em);
              position: relative;
              .dismiss_button {
                position: absolute;
                right: 8px;
                top: 0;
                color: var(--white_color);
                font-size: var(--size_0p85rem);
                text-align: center;
                background-color: transparent;
                border: 0;
                font-weight: 500;
                outline: none;
                cursor: pointer;
              }
              .form_control_group {
                width: var(--width_100);
                color: var(--white_color);
                flex: 1;
                label {
                  display: block;
                  width: var(--width_100);
                  margin-bottom: var(--size_0p4em);
                  font-size: var(--size_1p0rem);
                }
                textarea,
                input {
                  display: block;
                  width: var(--width_100);
                  background-color: transparent;
                  border-radius: 4px;
                  outline: none;
                  border: 1px solid var(--white_color_rgba2);
                  padding: var(--size_0p4em) var(--size_0p8em);
                  color: var(--white_color);
                  font-size: var(--size_0p85rem);
                  font-weight: 400;
                  &::placeholder {
                    color: var(--white_color_rgba);
                    opacity: 0.4;
                    font-size: var(--size_0p8rem);
                  }
                }
                textarea {
                  max-height: 100px;
                  resize: none;
                }
              }
              &.double {
                display: flex;
                justify-content: space-between;
                gap: var(--size_0p5em);
              }
            }
            .submit_button {
              display: block;
              float: right;
              border: 1px solid var(--white_color);
              color: var(--secondary_color);
              background-color: var(--white_color);
              text-align: center;
              padding: var(--size_0p4em) var(--size_4p0em);
              border-radius: 4px;
              transition: 250ms ease;
              cursor: pointer;

              &:hover {
                background-color: var(--white_color);
                color: var(--theme_color);
              }
            }
            &.show {
              top: 0;
              opacity: 1;
              pointer-events: initial;
            }
          }
        }
        .container_right {
          grid-column: 4/6;
          background-color: var(--secondary_color);
          border-radius: 8px;
          padding: var(--size_1p0em);
        }
      }
    }
  }
}
}

@media (max-width: 1050px) {
  .mother_container {
    .home {
      &.auth_home {
        margin-bottom: 0;

        .hero {
          .form_content {
            background-color: var(--white_color);
            position: relative;
            z-index: 5;
            flex-basis: 70%;
            width: 70%;
            .forms_container {
              width: var(--width_100);
              padding: var(--size_2p0em);
              padding-right: var(--width_10);
              position: relative;
              justify-content: flex-start;
              align-items: center;

              .data_form {
                width: var(--width_85);
                margin: auto;

                border: 1px solid var(--white_color);
                border-radius: 10px;

                transition: 300ms ease-in-out;
                position: relative;
                .form_data {
                  width: var(--width_100);
                }
                &#login_form {
                  z-index: 6;
                  translate: 0 50%;
                }
                &#signup_form {
                  z-index: 2;
                  translate: 0 120%;
                }
                &.focus#login_form {
                  translate: 0 -120%;
                }
                &.focus#signup_form {
                  translate: 0 -50%;
                }
                /*
              
              &.focus#signup_form {
                translate: 0 0;
              } */

                &.recover_form {
                  max-width: var(--width_85);
                }
              }
              .linkerrs {
                position: absolute;
                top: 6%;
              }
            }
          }
          &::before {
            width: 100vw;
            height: 100vh;
            z-index: 10;
            background-color: var(--white_color);
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }
    }

    .section {
      width: var(--width_100);

      .headline {
        max-width: var(--width_80);
        margin: auto;
        margin-bottom: var(--size_4p5em);

        h4 {
          text-transform: uppercase;
          font-weight: 400;
          font-size: var(--size_1p2rem);
          margin-bottom: var(--size_0p4em);
          text-align: center;
          color: var(--theme_color);
          width: var(--width_100);
        }
        h2 {
          width: var(--width_100);
          font-size: var(--size_2p2rem);
          text-align: center;
          font-weight: 400;
          margin-bottom: var(--size_0p2em);
          position: relative;
          &::before {
            content: "";
            height: 2px;
            background-color: var(--theme_color);
            width: var(--width_30);
            position: absolute;
            left: 50%;
            bottom: -20%;
            translate: -50%;
            border-radius: 10px;
          }
          &::after {
            content: "";
            height: 18px;
            width: 18px;
            border-radius: 50%;
            border: 1px solid var(--theme_color);
            background-color: var(--white_color);

            position: absolute;
            left: 50%;
            bottom: calc(-20% - 7px);
            translate: -50%;
          }
        }
      }

      .section_wrapper {
        max-width: var(--width_80);
        margin: auto;

        .section_col {
          .about_image {
            width: var(--width_80);
            min-height: 400px;
            background-image: url("/images/about_bg.jpg");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            border-radius: 4px;
            position: relative;
            .small_image {
              width: 200px;
              height: 180px;
              border-radius: 4px;
              border-top-left-radius: 0px;
              position: absolute;
              right: -100px;
              bottom: 0;
              background-image: url("/images/about_image2.jpg");
              background-position: center;
              background-size: cover;
              background-repeat: no-repeat;
              &::after {
                content: "";
                height: 6px;
                background-color: var(--white_color);
                width: 106px;
                position: absolute;
                left: -6px;
                top: -6px;
                border-top-left-radius: 8px;
                border-top-right-radius: 0px;
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 0px;
              }
              &::before {
                content: "";
                height: calc(100% + 6px);
                background-color: var(--white_color);
                width: 6px;
                position: absolute;
                left: -6px;
                top: -6px;
                border-radius: 4px;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
                border-bottom-left-radius: 0px;
                border-bottom-right-radius: 0px;
              }
            }
          }
          .about_content {
            width: var(--width_100);

            h4 {
              color: var(--theme_color);
              text-transform: uppercase;
              font-weight: 400;
              font-size: var(--size_1p2rem);
              margin-bottom: var(--size_0p6em);
            }
            h2 {
              color: var(--secondary_color);
              font-size: var(--size_2p2rem);
              text-align: justify;
              font-weight: 400;
              margin-bottom: var(--size_0p2em);
            }
            p {
              font-size: var(--size_1p1rem);
              font-weight: 400;
              margin-bottom: var(--size_1p2em);
              text-align: justify;
              color: var(--secondary_color);
            }
          }
          button {
            float: right;
          }
        }
      }

      &.vision {
        position: relative;
        z-index: 25;
        .vision_bar {
          width: var(--width_70);
          position: absolute;
          z-index: 2;
          bottom: 100px;
          left: 50%;
          translate: -50%;
          gap: var(--size_2p0em);

          .card {
            background-color: var(--secondary_color);
            border-radius: 2px;
            border: 0.65px solid var(--white_color_rgba);
            padding: var(--size_1p0em);
            min-height: 240px;
            flex: 1;
            .icon {
              margin-bottom: var(--size_1p2em);
              gap: var(--size_0p8em);

              h3 {
                text-transform: uppercase;
                font-size: var(--size_1p2rem);
                color: var(--theme_color);
                font-weight: 500;
                flex: 1;
                padding-bottom: var(--size_0p2em);
                border-bottom: 2px solid var(--theme_color);
              }
              svg {
                height: 30px;
                width: 30px;
                flex-shrink: 0;
                path {
                  fill: var(--theme_color);
                }
              }
            }
            p {
              text-align: justify;
              color: var(--white_color);
              font-size: var(--size_0p95rem);
            }
          }
        }
      }

      &.about {
        .section_wrapper {
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: var(--width_5);
          margin-bottom: 15vh;
          padding-top: 6vh;
        }
      }
      &.not_found {
        height: 100vh;
        overflow: hidden;
        .section_wrapper {
          background-color: var(--sec_rgba_clr);
          border: 1px solid var(--btn_clr);
          padding: var(--size_2p2em);
          border-radius: 4px;
          h1 {
            font-size: var(--size_2p4rem);
            font-weight: 500;
            margin-bottom: var(--size_0p6em);
          }
          .red_buttons {
            gap: var(--size_1p0em);
            .btn {
              padding: var(--size_0p5em) var(--size_2p4em);
              border: 1px solid transparent;
              &:hover {
                background-color: var(--sec_text_clr);
                border: 1px solid var(--btn_clr);
                color: var(--btn_clr);
              }
              &:first-child {
                background-color: var(--btn_clr);
                color: var(--sec_text_clr);
                border: 1px solid var(--btn_clr);
                &:hover {
                  background-color: var(--sec_text_clr);
                  border: 1px solid var(--btn_clr);
                  color: var(--btn_clr);
                }
              }
            }
          }
        }
      }
      &.services {
        background-color: var(--secondary_color);
        padding: 6em 0;

        & > .main_buttons {
          display: block;
          margin: auto;
          margin-top: 10vh;
          float: unset;
          background-color: var(--white_color);
          color: var(--theme_color);
          border-color: var(--white_color);
          &:hover {
            background-color: var(--secondary_color);
            border-color: var(--theme_color);
            color: var(--theme_color);
          }
        }

        .headline {
          margin-bottom: 20vh;
          h2 {
            color: var(--white_color);
          }
        }
        .section_wrapper {
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: var(--width_025);
          .section_col {
            .service_card {
              position: relative;
              min-height: 400px;
              /* border: 1px solid var(--body_clr); */
              border-radius: 8px;
              box-shadow:
                rgba(1, 180, 1, 0.25) 0px 2px 5px -1px,
                rgba(255, 255, 255, 0.3) 0px 1px 3px -1px;
              /* box-shadow: none|h-offset v-offset blur spread color; */
              .card_layer {
                background-color: var(--white_color);
                color: var(--secondary_color);
                position: absolute;
                border-radius: 8px;
                z-index: 5;
                bottom: 0;
                left: 0;
                transition: all 350ms ease;
                width: var(--width_100);
                overflow: hidden;
                height: 0;
                .layer_content {
                  padding: var(--size_2p2em) var(--size_1p2em);
                  width: var(--width_100);
                  .card_icon {
                    width: 40px;
                    height: 40px;
                    background-color: var(--white_color);
                    border: 1px solid var(--secondary_color);
                    margin: auto;
                    margin-bottom: var(--size_1p0em);
                    border-radius: 50%;

                    svg {
                      width: 25px;
                      height: 25px;
                      path {
                        fill: var(--theme_color);
                      }
                    }
                  }
                  h2 {
                    text-transform: uppercase;
                    font-weight: 500;
                    font-size: var(--size_1p1em);
                    margin-bottom: var(--size_1p0em);
                    text-align: center;
                    color: var(--secondary_color);
                  }
                  p {
                    text-align: justify;
                    font-size: var(--size_1p0rem);
                    font-weight: 400;
                    margin-bottom: var(--size_1p0em);
                    color: var(--secondary_color);
                  }
                  .main_buttons {
                    display: block;
                    margin: auto;
                    margin-top: var(--size_2p0em);
                    float: unset;
                    width: var(--width_70);
                    color: var(--secondary_color);
                    background-color: var(--white_color);
                    border-color: var(--secondary_color);
                    &:hover {
                      border-color: var(--theme_color);
                      color: var(--theme_color);
                    }
                  }
                }
              }
              .card_content {
                position: relative;
                width: var(--width_100);
                height: var(--width_100);
                z-index: 2;

                .card_image {
                  width: var(--width_90);
                  position: absolute;
                  left: 50%;
                  translate: -50%;
                  top: -100px;
                  min-height: 260px;
                  border-radius: 8px;
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: cover;
                  transition: all 300ms ease;
                  &::before {
                    content: "";
                    background-color: var(--secondary_color_rgba);
                    position: absolute;
                    right: 0;
                    border-radius: 4px;
                    z-index: 1;
                    left: 0;
                    width: var(--width_100);
                    height: var(--width_100);
                  }
                  &::after {
                    content: "";
                    background-color: var(--theme_color_rgba2);
                    position: absolute;
                    right: 0;
                    border-radius: 4px;
                    z-index: 2;
                    left: 0;
                    width: var(--width_100);
                    height: var(--width_100);
                    opacity: 0.3;
                  }
                }
                .card_card_content {
                  padding: var(--size_2p2em) var(--size_1p2em);
                  color: var(--white_color);
                  padding-top: 200px;

                  h2 {
                    text-transform: uppercase;
                    font-weight: 500;
                    margin-bottom: var(--size_1p1em);
                    font-size: var(--size_1p2rem);
                  }
                  h4 {
                    text-align: justify;
                    font-weight: 400;
                    font-size: var(--size_1p0rem);
                  }
                  .main_buttons {
                    margin-top: var(--size_0p4em);
                    text-align: right;
                    padding: var(--size_0p4em) 0 var(--size_0p4em)
                      var(--size_0p8em);
                  }
                  /* .show_mobile  */
                }
              }

              &:hover {
                .card_layer {
                  height: var(--width_100);
                }
                .card_content {
                  .card_image {
                    min-height: 0;
                  }
                }
              }
            }
            &.middle {
              margin-top: 10vh;
            }
          }
        }
      }

      &.investment {
        padding: 6em 0;

        & > .main_buttons {
          display: block;
          margin: auto;
          margin-top: 10vh;
          float: unset;
          background-color: var(--secondary_color);
          color: var(--white_color);
          border-color: var(--secondary_color);
          &:hover {
            background-color: var(--white_color);

            color: var(--secondary_color);
          }
        }

        .headline {
          margin-bottom: 10vh;
          h2 {
            &::after {
              border: 1px solid var(--white_color);
              background-color: var(--theme_color);
            }
          }
        }
        .section_wrapper {
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: var(--width_025);
          .section_col {
            .service_card {
              position: relative;
              min-height: 500px;
              border: 1px solid var(--secondary_color);
              border-radius: 8px;
              background-color: var(--white_color);

              .card_layer {
                background-color: var(--secondary_color);
                color: var(--white_color);
                position: absolute;
                border-radius: 8px;
                z-index: 2;
                bottom: 0;
                left: 0;
                transition: all 350ms ease;
                width: 0;
                height: var(--width_100);
              }

              .plan_name {
                width: var(--width_100);
                background-color: var(--secondary_color);
                position: relative;
                z-index: 5;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
                text-align: center;
                padding: var(--size_1p4em) var(--size_0p6em);
                color: var(--white_color);
                margin-bottom: var(--size_1p0em);
                border-bottom: 1px solid var(--white_color);

                .icon {
                  display: block;
                  margin: auto;
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  svg {
                    width: 45px;
                    height: 45px;
                    path {
                      fill: var(--theme_color);
                    }
                  }
                }
                h2 {
                  font-weight: 400;
                  font-size: var(--size_1p4rem);
                  font-family: var(--minor_family);
                  text-transform: uppercase;
                  margin-bottom: var(--size_0p8em);
                }
                h3 {
                  font-weight: 400;
                  font-size: var(--size_2p0rem);
                  font-family: var(--minor_family);
                  text-transform: uppercase;
                  margin-bottom: var(--size_0p2em);
                  color: var(--theme_color);
                }
                h4 {
                  font-weight: 400;
                  font-size: var(--size_1p2rem);
                }
              }
              .plan_details {
                position: relative;
                z-index: 4;
                padding: var(--size_0p5em) var(--size_1p0em);

                h3 {
                  font-weight: 500;
                  font-size: var(--size_1p2rem);
                  text-transform: uppercase;
                  margin-bottom: var(--size_0p4em);
                }
                ul {
                  width: var(--width_100);
                  padding-left: var(--size_0p5em);
                  li {
                    width: var(--width_100);
                    font-weight: 400;
                    font-size: var(--size_1p0rem);
                    gap: var(--size_0p6em);

                    &:not(:last-child) {
                      margin-bottom: var(--size_0p4em);
                    }
                    span {
                      flex-shrink: 0;
                      width: 8px;
                      height: 8px;
                      border-radius: 50%;
                      background-color: var(--secondary_color);
                    }
                  }
                }
              }
              .plan_button {
                position: absolute;
                right: 0;
                bottom: 0;
                z-index: 6;

                .plan_buttons {
                  width: 150px;
                  color: var(--secondary_color);
                  background-color: var(--white_color);
                  font-size: var(--size_1p2rem);
                  padding: var(--size_0p6em);
                  border-top-left-radius: 8px;
                  border-bottom-right-radius: 8px;
                  border-top: 2px solid var(--secondary_color);
                  border-left: 2px solid var(--secondary_color);
                  float: none;
                  text-align: center;
                  font-weight: 400;

                  &:hover {
                    border-top: 2px solid var(--white_color);
                    border-left: 2px solid var(--white_color);
                    color: var(--white_color);
                    background-color: var(--secondary_color);
                  }
                }
              }
              .interests {
                margin-top: var(--size_1p2em);
                padding-left: var(--size_1p2em);
                position: relative;
                z-index: 4;
                color: var(--theme_color);
                h3 {
                  font-weight: 400;
                  font-size: var(--size_2p0rem);
                }
                h4 {
                  font-weight: 300;
                  font-size: var(--size_1p0rem);
                }
              }
              &:hover {
                .card_layer {
                  width: var(--width_100);
                }
                .plan_details {
                  color: var(--white_color);

                  ul {
                    li {
                      span {
                        background-color: var(--white_color);
                      }
                    }
                  }
                }

                .interests {
                  color: var(--white_color);
                }
              }
            }
            &.middle {
              margin-top: 10vh;
            }
          }
        }
      }
      &.reasons {
        padding: 4em 0;

        .headline {
          margin-bottom: 10vh;
          h2 {
            &::after {
              border: 1px solid var(--white_color);
              background-color: var(--theme_color);
            }
          }
        }
        .section_wrapper {
          grid-template-columns: repeat(1, minmax(300px, 1fr));

          .section_col {
            margin-bottom: 60px;
            min-height: 260px;
            .col_left {
              height: 100%;
              background-position: center;
              background-size: cover;
              background-repeat: no-repeat;
              flex-basis: 40%;
              position: relative;
              border-radius: 8px;
              &::before {
                content: "";
                background-color: var(--secondary_color_rgba2);
                position: absolute;
                right: 0;
                border-radius: 8px;
                z-index: 1;
                left: 0;
                width: var(--width_100);
                height: var(--width_100);
              }
              &::after {
                content: "";
                background-color: var(--theme_color);
                position: absolute;
                right: 0;
                border-radius: 8px;
                z-index: 2;
                left: 0;
                width: var(--width_100);
                height: var(--width_100);
                opacity: 0.15;
              }
            }
            .col_right {
              flex-basis: 55%;

              .icon {
                margin-bottom: var(--size_1p0em);
                svg {
                  width: 30px;
                  height: 30px;
                  flex-shrink: 0;
                  path {
                    fill: var(--theme_color);
                  }
                }
                h3 {
                  margin-left: var(--size_1p0em);
                  font-size: var(--size_1p4rem);
                  text-transform: uppercase;
                  color: var(--theme_color);
                  flex: 1;
                  padding-bottom: var(--size_0p3em);
                  border-bottom: 1px solid var(--theme_color);
                }
              }
              p {
                color: var(--secondary_color);
                font-weight: 400;
                font-size: var(--size_1p1rem);
                text-align: justify;
              }
            }
            &:nth-child(even) {
              .col_left {
                order: 2;
              }
              .col_right {
                order: 1;
              }
            }
          }
        }
      }
      &.testimonial {
        padding: 4em 0;

        & > .main_buttons {
          display: block;
          margin: auto;
          margin-top: 10vh;
          float: unset;
          background-color: var(--secondary_color);
          color: var(--white_color);
          border-color: var(--secondary_color);
          &:hover {
            background-color: transparent;

            color: var(--secondary_color);
          }
        }

        .headline {
          margin-bottom: 10vh;
          h2 {
            &::after {
              border: 1px solid var(--white_color);
              background-color: var(--theme_color);
            }
          }
        }
        .section_wrapper {
          width: 100%;
          overflow-x: scroll;
          .slider_wrapper {
            width: 300%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 1s ease;
            translate: 0;
            flex-wrap: nowrap;
            margin-bottom: var(--size_2p4em);
            gap: 0.8%;

            .section_col {
              width: 16%;
              min-width: 16%;

              .col_content {
                min-width: var(--width_100);
                background-color: var(--secondary_color);
                padding: var(--size_1p2em);
                border-radius: 8px;
                height: 240px;
                overflow-y: scroll;
                .quote {
                  display: block;
                  float: left;
                  width: 30px;
                  margin-right: var(--size_0p6em);
                  svg {
                    height: 32px;
                    width: 32px;
                    path {
                      fill: var(--theme_color);
                      stroke-width: 0px;
                    }
                  }
                }
                p {
                  text-align: justify;
                  font-size: var(--size_0p95rem);
                  margin-bottom: var(--size_1p2em);
                  color: var(--white_color);
                }
                .names {
                  width: var(--width_100);
                  .stars {
                    margin-bottom: var(--size_0p4em);
                    img {
                      width: 100px;
                      object-fit: cover;
                    }
                    svg {
                      width: 100px;
                      path {
                        fill: var(--theme_color);
                        stroke-width: 0px;
                      }
                    }
                  }
                  h3 {
                    font-weight: 500;
                    text-transform: uppercase;
                    color: var(--theme_color);

                    font-size: var(--size_1p1rem);
                    margin-bottom: var(--size_0p4em);
                  }
                  h4 {
                    font-weight: 400;
                    color: var(--white_color);
                    font-size: var(--size_1p0rem);
                  }
                }
              }
            }
          }
        }
      }

      &.contact {
        background-color: var(--secondary_color);
        padding: 6em 0;

        .headline {
          margin-bottom: 10vh;
          h2 {
            color: var(--white_color);
          }
        }
        .section_wrapper {
          grid-template-columns: repeat(2, minmax(300px, 1fr));
          gap: var(--width_5);
          .section_col {
            button {
              float: none;
            }
            .col_content {
              width: var(--width_100);
              gap: var(--size_1p5em);
              .box {
                flex: 1;

                box-shadow:
                  rgba(1, 180, 1, 0.25) 0px 2px 5px -1px,
                  rgba(255, 255, 255, 0.3) 0px 1px 3px -1px;
                border-radius: 8px;
                padding: 30px;
                .icon {
                  margin: auto;
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  background-color: var(--white_color);
                  margin-bottom: var(--size_0p6em);
                  svg {
                    width: var(--width_60);
                    height: var(--width_60);
                    path {
                      fill: var(--secondary_color);
                    }
                  }
                }
                h3,
                h4 {
                  width: var(--width_100);
                  text-align: center;
                  color: var(--white_color);
                  font-weight: 400;
                }
                h3 {
                  font-size: var(--size_1p6rem);
                }
                .socials {
                  gap: 20px;
                  margin-top: 10px;
                  .social_btn {
                    height: 22px;
                    width: 22px;
                    outline: none;
                    border-radius: 50%;
                    cursor: pointer;
                    border: 0;
                    background-color: transparent;
                    svg {
                      height: var(--width_90);
                      width: var(--width_90);
                      path {
                        fill: var(--white_color);
                      }
                    }
                  }
                }
              }
              h2 {
                font-weight: 400;
                font-size: var(--size_1p4rem);
                text-transform: uppercase;
                color: var(--white_color);
                margin-bottom: var(--size_0p6em);
              }
              p {
                width: var(--width_100);
                text-align: justify;
                color: var(--white_color);
                margin-bottom: var(--size_0p6em);
              }
            }
            &.contact {
              grid-column: 1/2;
            }
            &.reach_us {
              grid-column: 1/3;
              grid-row: 2;
            }
          }
        }
      }
      &.faqs {
        padding: 6em 0;

        .headline {
          margin-bottom: 10vh;
          h2 {
            &::after {
              border: 1px solid var(--white_color);
              background-color: var(--theme_color);
            }
          }
        }
        .section_wrapper {
          gap: var(--width_025);
          .section_col {
            .question_image {
              width: var(--width_100);
              min-height: 300px;
              background-position: center;
              border-radius: 8px;
              background-repeat: no-repeat;
              background-size: cover;
              position: relative;
              &::before {
                content: "";
                background-color: var(--secondary_color_rgba);
                position: absolute;
                right: 0;
                border-radius: 8px;
                z-index: 1;
                left: 0;
                width: var(--width_100);
                height: var(--width_100);
              }
              &::after {
                content: "";
                background-color: var(--theme_color);
                position: absolute;
                right: 0;
                border-radius: 8px;
                z-index: 2;
                left: 0;
                width: var(--width_100);
                height: var(--width_100);
                opacity: 0.1;
              }
            }
            .col_content {
              width: var(--width_100);
              .question_container {
                width: var(--width_100);
                border: 1px solid var(--secondary_color);
                border-radius: 4px;
                margin-bottom: var(--size_1p0em);
                .question {
                  width: var(--width_100);
                  background-color: var(--secondary_color);
                  border: 1px solid var(--secondary_color);
                  padding: var(--size_0p4em) var(--size_0p8em);

                  cursor: pointer;
                  color: var(--white_color);

                  span {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    flex-shrink: 0;
                    transition: all 300ms ease-in-out;
                    svg {
                      height: 90%;
                      width: 90%;
                      path {
                        fill: var(--white_color);
                      }
                    }
                    &.rotate {
                      rotate: -180deg;
                    }
                  }
                }

                .answer {
                  width: var(--width_100);
                  border-bottom-left-radius: 4px;
                  border-bottom-right-radius: 4px;
                  transition: all 300ms ease-in-out;
                  display: grid;
                  grid-template-rows: 0fr;
                  .answer_content {
                    width: var(--width_100);
                    overflow: hidden;
                    p {
                      font-weight: 400;
                      font-size: var(--size_1p0rem);
                      padding: var(--size_0p5em);
                    }
                  }
                  &.show {
                    grid-template-rows: 1fr;
                  }
                }
              }
            }

            &.col_left {
              flex: 2;
            }
            &.col_right {
              flex: 3;
            }
          }
        }
      }
      .slider_btns {
        max-width: var(--width_80);
        margin: auto;
        gap: var(--size_1p2em);
        .btn {
          width: 18px;
          height: 18px;
          background-color: var(--secondary_color);
          &.current,
          &:hover {
            background-color: var(--theme_color);
          }
        }
        &.larger {
          display: flex;
        }
        &.smaller {
          display: none;
        }
      }
    }

    .bridge {
      width: var(--width_100);
      min-height: 300px;
      background-image: url("/images/bridge.jpg");
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      background-size: cover;
      background-attachment: scroll;

      &::before {
        content: "";
        background-color: var(--secondary_color_rgba);
        position: absolute;
        right: 0;
        left: 0;
        width: var(--width_100);
        height: var(--width_100);
      }
      .bridge_content {
        width: var(--width_80);
        max-width: var(--width_80);

        margin: auto;
        position: relative;
        padding: var(--size_2p0rem) 0;
        z-index: 5;
        .left {
          flex: 1;
        }
        h2 {
          text-transform: uppercase;
          font-size: var(--size_2p2rem);
          color: var(--white_color);
          font-weight: 400;
          margin-bottom: var(--size_0p5em);
        }
        p {
          color: var(--white_color);
          font-size: var(--size_1p0rem);
          font-weight: 400;
        }
        .main_buttons {
          float: right;
          margin-top: 1em;

          background-color: var(--white_color);
          color: var(--secondary_color);
          border-color: var(--white_color);
          &:hover {
            background-color: transparent;
            border-color: var(--white_color);
            color: var(--white_color);
          }
        }
      }
    }
  }

  .dashboard_container {
    .dashboard_menu {
      width: var(--width_25);

      .logo_area {
        button {
          background-color: transparent;
          cursor: pointer;
          border: 0;
          outline: none;
          img {
            width: 60px;
          }
          svg {
            width: 24px;
            height: 24px;
            path {
              fill: var(--white_color);
            }
          }
        }
        .toggle_menu {
          position: absolute;
          top: 10px;
          right: 10px;
          svg {
            width: 20px;
            height: 20px;
          }
        }
      }
      .navigation {
        width: var(--width_100);
        .nav_list {
          width: var(--width_100);
          .nav_item {
            width: var(--width_100);
            margin-bottom: var(--size_0p4em);
            .nav_btn {
              width: var(--width_100);
              background-color: transparent;
              cursor: pointer;
              border: 0;
              padding: var(--size_0p4em) var(--size_0p6em);
              border-bottom: 1px solid var(--secondary_color);
              outline: none;
              gap: 10px;
              transition: 300ms ease-in-out;
              border-radius: 4px;
              color: var(--white_color);
              font-weight: 400;
              .icon {
                width: 16px;
                height: 16px;
                svg {
                  width: var(--width_100);
                  height: var(--width_100);
                  path {
                    fill: var(--white_color);
                  }
                }
              }
              span {
                font-size: var(--size_1p0rem);
              }
              &.current,
              &:hover {
                background-color: transparent;
                border-bottom: 1px solid var(--theme_color);

                color: var(--theme_color);
                .icon {
                  svg {
                    path {
                      fill: var(--theme_color);
                    }
                  }
                }
              }
            }
          }
          hr {
            border: 0;
            background-color: transparent;
            border-top: 1px solid var(--white_color);
            margin-top: var(--size_1p0em);
            margin-bottom: var(--size_1p0em);
          }
        }
      }
      &.visible {
        left: 0;
        opacity: 1;
        pointer-events: initial;
      }
    }
    .main_dashboard {
      width: var(--width_100);
      background-image: url("/images/bg_img_1.jpg");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: scroll;

      position: relative;

      &::before {
        content: "";
        background-color: var(--secondary_color_rgba);
        position: absolute;
        top: 0;
        z-index: 1;
        left: 0;
        width: var(--width_100);
        height: var(--width_100);
        opacity: 0.15;
      }
      &::after {
        content: "";
        background-color: var(--theme_color_rgba);
        position: absolute;
        top: 0;
        z-index: 2;
        left: 0;
        width: var(--width_100);
        height: var(--width_100);
        opacity: 0.15;
      }

      .dashboard {
        width: var(--width_100);
        position: relative;
        z-index: 10;
        .dash_top {
          position: sticky;
          top: 0;
          left: 0;
          z-index: 10;
          width: var(--width_100);
          background-color: var(--secondary_color);
          padding: var(--size_1p0em) var(--width_10);
          border-bottom: 1px solid var(--white_color_rgba);
          margin-bottom: var(--size_1p0em);
          /* border-bottom: 1px solid var(--white_color); */

          .top_logo {
            gap: 10px;
            button {
              cursor: pointer;
              width: 20px;
              height: 20px;
              svg {
                width: 100%;
                height: 100%;
                path {
                  fill: var(--white_color);
                }
              }
              &.mobile_toggle {
                display: none;
              }
            }

            h1 {
              font-size: var(--size_1p2rem);
              color: var(--white_color);
              text-transform: uppercase;
            }
            &.forms {
              button {
                width: auto;
                height: unset;
                gap: 10px;
                svg {
                  width: 16px;
                  height: 16px;
                  path {
                    fill: var(--white_color);
                  }
                }
              }
            }
          }
          .right {
            .searchbar {
              position: relative;
              input {
                position: absolute;
                top: 50%;
                left: -200px;
                min-width: 180px;
                translate: 0 -50%;
                transition: 300ms ease-in-out;
                background-color: transparent;
                border: 1px solid var(--white_color_rgba);
                font-size: var(--size_0p9rem);
                color: var(--white_color);
                outline: none;
                padding: var(--size_0p3em) var(--size_0p8em);
                border-radius: 4px;
                opacity: 0;
                pointer-events: none;

                &::placeholder {
                  opacity: 0.6;
                  color: var(--white_color_rgba);
                }
                &.show {
                  opacity: 1;
                  pointer-events: initial;
                  left: -190px;
                }
              }
              button {
                background-color: var(--secondary_color);
                cursor: pointer;
                outline: none;
                border: 0;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                svg {
                  width: var(--width_80);
                  height: var(--width_80);

                  path {
                    fill: var(--white_color);
                  }
                }

                &#toggle_search {
                  position: relative;
                  z-index: 5;
                }
                &#search_button {
                  position: absolute;
                  top: 0;
                  right: 0;
                  z-index: 1;
                }
              }
            }

            .currency_controller {
              position: relative;
              min-width: 50px;
              .currency_btn {
                border-radius: 4px;
                font-size: var(--size_0p9rem);
                border: 1px solid var(--white_color);
                cursor: pointer;
                padding: 4px 8px;
                background-color: transparent;
                color: var(--theme_color);
                text-align: center;
                outline: none;
              }
              .custom_selector {
                position: absolute;
                left: -100px;
                top: 140%;
                opacity: 0;
                transition: 350ms ease-in-out;
                pointer-events: none;
                background-color: var(--secondary_color);
                max-height: 200px;
                overflow-y: scroll;
                max-width: 140px;
                border: 1px solid var(--white_color_rgba2);
                border-radius: 4px;
                padding: 4px;
                padding-top: 0;

                .option_buttons {
                  width: var(--width_100);
                }

                .option_btn {
                  width: var(--width_100);
                  gap: 10px;
                  padding: 4px 8px;
                  transition: 300ms ease-in-out;
                  border-radius: 2px;
                  &:hover {
                    background-color: var(--white_color_rgba2);
                    span {
                      color: var(--theme_color);
                    }
                  }
                  img {
                    width: 20px;
                    object-fit: cover;
                    flex-shrink: 0;
                  }
                  span {
                    flex: 1;
                    text-align: left;
                    color: var(--white_color);
                    font-weight: 400;
                    font-size: var(--size_0p85rem);
                  }
                }

                .search_option {
                  width: var(--width_100);
                  background-color: var(--secondary_color);
                  margin-bottom: 10px;
                  position: sticky;
                  z-index: 4;
                  left: 0;
                  top: 0;
                  input {
                    border: 0;
                    border-bottom: 0.6px solid var(--white_color_rgba);
                    color: var(--white_color);
                    border-radius: 4px;
                    background-color: transparent;
                    font-size: var(--size_0p85rem);
                    cursor: auto;
                    padding: 4px 8px;

                    font-weight: 300;
                    outline: none;
                  }
                }
                &.show {
                  opacity: 1;
                  top: 115%;
                  pointer-events: initial;
                }
              }
            }
            .notification {
              position: relative;
              min-width: 40px;
              button {
                width: 30px;
                height: 30px;
                cursor: pointer;
                background-color: transparent;
                color: var(--theme_color);
                text-align: center;
                outline: none;
                border: 0;
                position: relative;
                span {
                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                  font-size: var(--size_0p75rem);
                  z-index: 2;
                  text-align: center;
                  background-color: var(--theme_color);
                  color: var(--white_color);
                  position: absolute;
                  font-weight: 500;
                  top: -6px;
                  right: -6px;
                }
                svg {
                  position: relative;
                  width: var(--width_100);
                  height: var(--width_100);
                  path {
                    fill: var(--white_color);
                  }
                }
              }
              .notification_pallete {
                position: absolute;
                left: -180px;
                top: 140%;
                opacity: 0;
                transition: 350ms ease-in-out;
                pointer-events: none;
                background-color: var(--secondary_color);
                max-height: 200px;
                overflow-y: scroll;
                min-width: 200px;
                max-width: 300px;
                border: 1px solid var(--white_color_rgba2);
                border-radius: 4px;
                padding: 4px;

                p {
                  width: var(--width_100);
                  text-align: justify;
                  font-size: var(--size_0p85rem);
                  color: var(--white_color);
                  font-weight: 300;
                }

                &.show {
                  top: 115%;
                  opacity: 1;
                  pointer-events: initial;
                }
              }
            }
            .profile_preview {
              position: relative;
              .user_image_btn {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                border: 1px solid var(--white_color);
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                cursor: pointer;
                outline: none;
              }
              .profile_menu {
                position: absolute;
                min-width: 260px;
                max-width: 300px;
                max-height: 450px;
                overflow-y: scroll;
                right: 0;
                top: 140%;
                opacity: 0;
                transition: 350ms ease-in-out;
                pointer-events: none;
                border: 1px solid var(--white_color_rgba2);
                background-color: var(--secondary_color);
                border-radius: 8px;
                padding: 1em;
                .user_image {
                  display: block;
                  margin: auto;
                  width: 80px;
                  height: 80px;
                  border-radius: 50%;
                  background-size: cover;
                  background-color: var(--white_color);
                  background-position: center;
                  background-repeat: no-repeat;
                  margin-bottom: var(--size_1p0em);
                }

                .user_data {
                  width: var(--width_100);
                  color: var(--white_color);
                  margin-bottom: var(--size_1p0em);
                  padding-bottom: var(--size_0p4em);
                  border-bottom: 1px solid var(--white_color_rgba);
                  h2 {
                    color: var(--theme_color);
                    width: var(--width_100);

                    margin-bottom: var(--size_1p0em);
                    padding-bottom: var(--size_0p3em);
                    border-bottom: 1px solid var(--white_color_rgba);
                    text-transform: uppercase;
                    font-size: var(--size_1p0rem);
                  }
                  h3 {
                    width: var(--width_100);
                    margin-bottom: var(--size_0p5em);
                    font-size: var(--size_0p9rem);
                    font-weight: 400;
                    text-align: center;
                    &.email {
                      font-style: italic;
                      color: var(--theme_color);
                    }
                  }
                }
                .account_data {
                  margin-bottom: var(--size_1p0em);
                  width: var(--width_100);
                  padding-bottom: var(--size_0p8em);
                  border-bottom: 1px solid var(--white_color_rgba);
                  .code {
                    width: var(--width_100);
                    margin-bottom: var(--size_1p0em);
                    .code_control {
                      width: var(--width_100);
                      color: var(--white_color);
                      margin-bottom: var(--size_0p6em);
                      h3 {
                        font-size: var(--size_0p95rem);
                      }
                      button {
                        width: 20px;
                        height: 20px;
                        cursor: pointer;
                        outline: none;
                        border: none;
                        background-color: transparent;
                        position: relative;
                        .show_copy {
                          position: absolute;
                          color: var(--theme_color);
                          background-color: var(--white_color);
                          padding: 4px;
                          border-radius: 4px;
                          font-size: 10px;
                          text-align: center;
                          top: -10px;
                          left: -65px;
                          min-width: 60px;
                          opacity: 0;
                          pointer-events: none;
                          transition: 300ms ease-in-out;
                          &.show {
                            opacity: 1;
                          }
                        }
                        svg {
                          width: var(--width_100);
                          height: var(--width_100);
                          path {
                            fill: var(--theme_color);
                          }
                        }
                      }
                    }
                    input {
                      width: var(--width_100);
                      text-align: left;
                      background-color: transparent;
                      pointer-events: none;
                      font-size: var(--size_0p9rem);
                      color: var(--theme_color);
                      border: 0;
                      font-weight: 300;
                      outline: none;
                      font-style: italic;
                    }
                  }
                }
                .profile_buttons {
                  .btn {
                    color: var(--white_color);
                    font-weight: 400;
                    font-size: var(--size_0p95rem);
                    padding: var(--size_0p4em) var(--size_0p8em);
                    border-radius: 4px;
                    &:hover {
                      background-color: var(--white_color);
                      color: var(--theme_color);
                    }
                  }
                }
                &.show {
                  opacity: 1;
                  top: 115%;
                  pointer-events: initial;
                }
              }
            }
          }
        }
        .dashboard_preview {
        

         

          .preview_box {
            border: 1px dotted var(--white_color_rgba2);
            background-color: var(--secondary_color);
            border-radius: 8px;
            padding: var(--size_0p6em);
            position: relative;
            .title_bar {
              width: var(--width_100);
              margin-bottom: var(--size_0p5em);
              padding-bottom: var(--size_0p4em);
              color: var(--white_color);
              border-bottom: 1px solid var(--white_color_rgba);
              h3 {
                text-transform: uppercase;
                font-weight: 500;
                font-size: var(--size_0p9rem);
                color: var(--theme_color);
              }
              .btn {
                width: 20px;
                height: 20px;
                cursor: pointer;
                svg {
                  width: var(--width_100);
                  height: var(--width_100);
                  path {
                    fill: var(--white_color);
                  }
                }
              }
            }
            .card_menu {
              position: absolute;
              right: 10px;
              top: 72px;
              z-index: 5;
              max-width: 140px;
              opacity: 0;
              pointer-events: none;
              transition: 350ms ease-in-out;
              background-color: var(--secondary_color);
              border: 1px solid var(--white_color_rgba2);
              border-radius: 4px;
              padding: var(--size_0p4em);
              button {
                width: var(--width_100);
                cursor: pointer;
                display: block;
                background-color: transparent;
                font-size: var(--size_0p85rem);
                transition: 300ms ease-in-out;
                outline: none;
                border: 0;
                text-align: left;
                padding: var(--size_0p2em);
                margin-bottom: var(--size_0p2em);
                color: var(--white_color);
                border-radius: 2px;
                &:hover {
                  color: var(--theme_color);
                  background-color: var(--white_color_rgba2);
                }
              }
              &.show {
                top: 36px;
                opacity: 1;
                pointer-events: initial;
              }
            }

            .pair {
              margin-bottom: var(--size_0p2em);
              width: var(--width_100);
              h2 {
                flex: 1;
                text-transform: uppercase;
                color: var(--white_color);
                font-size: var(--size_0p85rem);
                font-weight: 400;
                span {
                  text-transform: none;
                  font-weight: 300;
                  margin-left: var(--size_0p4em);
                  opacity: 1;
                }
              }
              &.withdraw {
                h2 {
                  flex: 2;
                }
                h2.lesser {
                  flex: 1;
                }
              }
            }
          }
        }

        
      }
    }
  }
}
@media (max-width: 850px) {
  .mobile_nav {
    display: block;
  }

  .error_messages {
    &.account_error_messages {
      width: 85%;

      &.show {
        opacity: 1;
        pointer-events: initial;
        top: 2%;
      }
    }
    &.show {
      opacity: 1;
      pointer-events: initial;
      top: 1%;
    }

    &.dashboard_errors {
      width: var(--width_85);

      &.show {
        opacity: 1;
        pointer-events: initial;
        top: 8px;
      }
    }
  }

  .main_nav {
    .nav_below {
      max-width: var(--width_85) !important;

      .navigation {
        justify-content: flex-end;
        .navigation_list {
          margin-right: 0;

          &.main_list {
            display: none;
          }
        }
      }
    }
    &.fixed {
      background-color: var(--secondary_color);
      position: fixed;
      top: 0;
      left: 0;
      .nav_below {
        .navigation {
          .navigation_list {
            &.main_list {
              .navigation_item {
                .nav_link {
                  &::after {
                    background-color: var(--theme_color);
                  }

                  &.current,
                  &:hover {
                    color: var(--theme_color);
                  }
                }
              }
            }

            &.auth_list {
              .navigation_item {
                .nav_link {
                  &:hover {
                    border: 1px solid var(--white_color);
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .mother_container {
    .error_messages {
      width: 85%;
      margin: auto;
      left: 50%;
      translate: -50%;
    }
    .home {
      height: auto;
      height: auto;
      min-height: auto;
      min-height: auto;
      margin-bottom: auto;

      .hero {
        max-width: var(--width_85);

        padding-top: 8vh;
        padding-bottom: 60px;

        .hero_content {
          color: var(--white_color);
          max-width: var(--width_80);
          h1 {
            font-size: var(--size_2p0rem);
            line-height: var(--size_1p4em);
            margin-bottom: var(--size_0p5em);
            font-weight: 300;
          }
          h4 {
            font-size: var(--size_0p95rem);
            margin-bottom: var(--size_2p0em);
          }
          .call_action {
            gap: var(--size_1p2em);
            span {
              flex-shrink: 0;
              position: relative;
              width: 200px;
              height: 8px;
              background-color: var(--white_color);
              border-radius: 5px;
            }
            button {
              background-color: var(--white_color);
              border: 1px solid var(--white_color);
              padding: var(--size_0p4em) var(--size_2p2em);
              color: var(--theme_color);
              &:hover {
                background-color: transparent;
                color: var(--white_color);
              }
            }
          }
        }
      }
      .slider_buttons {
        width: 20px;
        position: absolute;
        z-index: 2;
        right: 8%;
        top: 50%;
        /* translate: x y z ; */
        translate: 0 -50%;
        .buttons_bar {
          width: 10px;
          border-radius: 8px;
          gap: 20px;

          button {
            width: 8px;
            height: 20px;
            opacity: 0.4;
            border: 0;
            cursor: pointer;
            cursor: pointer;
            background-color: var(--white_color);
            border-radius: 8px;
            &.current {
              opacity: 1;
            }
          }
        }
      }

      &.auth_home {
        margin-bottom: 0;
        background-image: url("/images/auth_bg.jpg");
        &::before {
          background-color: var(--secondary_color_rgba);
        }
        .hero {
          max-width: var(--width_100);
          border-top: 1px solid var(--white_color);
          background-color: var(--secondary_color);
          position: relative;
          max-height: 100vh;
          overflow: hidden;

          padding-top: 0;
          padding-bottom: 0;

          .form_buttons {
            flex-basis: 20%;
            width: 20%;
            position: relative;
            background-color: var(--secondary_color);
            z-index: 5;
            height: 100%;
            .controllers {
              position: absolute;
              right: 0;
              top: 50%;
              translate: 0 -50%;

              .btn {
                display: block;
                padding: var(--size_0p6em);
                background-color: transparent;
                width: 100px;
                border-top-left-radius: 20px;
                border-bottom-left-radius: 20px;
                border-top-right-radius: 0px;
                border-bottom-right-radius: 0px;
                border: 0;
                color: var(--white_color);
                position: relative;
                span {
                  pointer-events: none;
                }

                .span_top {
                  width: 20px;
                  height: 20px;
                  border-bottom-right-radius: 100%;
                  position: absolute;
                  right: 0px;
                  top: -20px;
                  background-color: transparent;

                  box-shadow: 6px 6px 0 3px transparent;

                  /* box-shadow: x-offset y-offset blur-radius spread-radius shadow-color */
                }
                .span_bottom {
                  width: 20px;
                  height: 20px;
                  border-top-right-radius: 100%;
                  position: absolute;
                  right: 0px;
                  bottom: -20px;
                  background-color: transparent;

                  box-shadow: 6px -6px 0 3px transparent;

                  /* box-shadow: x-offset y-offset blur-radius spread-radius shadow-color */
                }

                &.current {
                  background-color: var(--white_color);
                  color: var(--secondary_color);

                  .span_top {
                    box-shadow: 6px 6px 0 3px var(--white_color);
                  }
                  .span_bottom {
                    box-shadow: 6px -6px 0 3px var(--white_color);
                  }
                }
              }
            }
            &.subscribe {
              .controllers {
                .btn {
                  width: 140px;
                }
              }
            }
          }
          .form_content {
            background-color: var(--white_color);
            position: relative;
            z-index: 5;
            flex-basis: 80%;
            width: 80%;
            .forms_container {
              width: var(--width_100);
              padding: var(--size_2p0em);
              padding-right: var(--width_10);
              position: relative;
              justify-content: flex-start;
              align-items: center;

              .data_form {
                width: var(--width_90);
                margin: auto;

                border: 1px solid var(--white_color);
                border-radius: 10px;

                transition: 300ms ease-in-out;
                position: relative;
                .form_data {
                  width: var(--width_100);
                }
                &#login_form {
                  z-index: 6;
                  translate: 0 50%;
                }
                &#signup_form {
                  z-index: 2;
                  translate: 0 120%;
                }
                &.focus#login_form {
                  translate: 0 -120%;
                }
                &.focus#signup_form {
                  translate: 0 -50%;
                }
                /*
              
              &.focus#signup_form {
                translate: 0 0;
              } */

                &.recover_form {
                  width: var(--width_85);
                }
              }
            }
          }
          &::before {
            width: 100vw;
            height: 100vh;
            z-index: 10;
            background-color: var(--white_color);
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }
    }

    .section {
      width: var(--width_100);

      .headline {
        max-width: var(--width_85);
        margin: auto;
        margin-bottom: var(--size_4p0em);

        h4 {
          text-transform: uppercase;
          font-weight: 400;
          font-size: var(--size_1p1rem);
          margin-bottom: var(--size_0p4em);
          text-align: center;
          color: var(--theme_color);
          width: var(--width_100);
        }
        h2 {
          width: var(--width_100);
          font-size: var(--size_2p0rem);

          &::before {
            width: var(--width_60);
          }
          &::after {
            content: "";
            height: 18px;
            width: 18px;
          }
        }
      }

      .section_wrapper {
        max-width: var(--width_85);
        margin: auto;

        .section_col {
          .about_image {
            width: var(--width_80);
            min-height: 400px;
            background-image: url("/images/about_bg.jpg");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            border-radius: 4px;
            position: relative;
            .small_image {
              width: 200px;
              height: 180px;
              border-radius: 4px;
              border-top-left-radius: 0px;
              position: absolute;
              right: -100px;
              bottom: 0;
              background-image: url("/images/about_image2.jpg");
              background-position: center;
              background-size: cover;
              background-repeat: no-repeat;
              &::after {
                content: "";
                height: 6px;
                background-color: var(--white_color);
                width: 106px;
                position: absolute;
                left: -6px;
                top: -6px;
                border-top-left-radius: 8px;
                border-top-right-radius: 0px;
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 0px;
              }
              &::before {
                content: "";
                height: calc(100% + 6px);
                background-color: var(--white_color);
                width: 6px;
                position: absolute;
                left: -6px;
                top: -6px;
                border-radius: 4px;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
                border-bottom-left-radius: 0px;
                border-bottom-right-radius: 0px;
              }
            }
          }
          .about_content {
            width: var(--width_100);

            h4 {
              color: var(--theme_color);
              text-transform: uppercase;
              font-weight: 400;
              font-size: var(--size_1p2rem);
              margin-bottom: var(--size_0p6em);
            }
            h2 {
              color: var(--secondary_color);
              font-size: var(--size_2p2rem);
              text-align: justify;
              font-weight: 400;
              margin-bottom: var(--size_0p2em);
            }
            p {
              font-size: var(--size_1p1rem);
              font-weight: 400;
              margin-bottom: var(--size_1p2em);
              text-align: justify;
              color: var(--secondary_color);
            }
          }
          button {
            float: right;
          }
        }
      }
      &.vision {
        position: relative;
        z-index: 2;
        padding: 3em 0;
        .vision_bar {
          width: var(--width_80);
          position: relative;
          flex-direction: column;
          justify-content: center;
          justify-content: center;
          z-index: 2;
          bottom: auto;
          left: auto;
          margin: auto;
          translate: unset;

          gap: var(--size_2p0em);

          .card {
            background-color: var(--secondary_color);
            border-radius: 6px;
            border-color: var(--secondary_color);
            min-height: auto;
            flex: 1;
            .icon {
              margin-bottom: var(--size_1p2em);
              gap: var(--size_0p8em);

              h3 {
                text-transform: uppercase;
                font-size: var(--size_1p0rem);
                color: var(--theme_color);
                font-weight: 500;
              }
            }
          }
        }
      }
      &.about {
        .section_wrapper {
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: var(--width_5);
          margin-bottom: 15vh;
          padding-top: 6vh;
        }
      }
      &.not_found {
        height: 100vh;
        overflow: hidden;
        .section_wrapper {
          background-color: var(--sec_rgba_clr);
          border: 1px solid var(--btn_clr);
          padding: var(--size_2p2em);
          border-radius: 4px;
          h1 {
            font-size: var(--size_2p4rem);
            font-weight: 500;
            margin-bottom: var(--size_0p6em);
          }
          .red_buttons {
            gap: var(--size_1p0em);
            .btn {
              padding: var(--size_0p5em) var(--size_2p4em);
              border: 1px solid transparent;
              &:hover {
                background-color: var(--sec_text_clr);
                border: 1px solid var(--btn_clr);
                color: var(--btn_clr);
              }
              &:first-child {
                background-color: var(--btn_clr);
                color: var(--sec_text_clr);
                border: 1px solid var(--btn_clr);
                &:hover {
                  background-color: var(--sec_text_clr);
                  border: 1px solid var(--btn_clr);
                  color: var(--btn_clr);
                }
              }
            }
          }
        }
      }
      &.services {
        background-color: var(--secondary_color);
        padding: 6em 0;

        & > .main_buttons {
          margin-top: 8vh;
          float: unset;
        }

        .headline {
          margin-bottom: 20vh;
          h2 {
            color: var(--white_color);
          }
        }
        .section_wrapper {
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 0;
          .section_col {
            .service_card {
              position: relative;
              min-height: 400px;

              border-radius: 8px;

              .card_layer {
                background-color: var(--white_color);
                color: var(--secondary_color);
                position: absolute;
                border-radius: 8px;
                z-index: 5;
                bottom: 0;
                left: 0;
                transition: all 350ms ease;
                width: var(--width_100);
                overflow: hidden;
                height: 0;
                .layer_content {
                  padding: var(--size_2p2em) var(--size_1p6em);

                  h2 {
                    font-size: var(--size_1p1em);
                    margin-bottom: var(--size_1p0em);
                    text-align: center;
                    color: var(--secondary_color);
                  }
                  p {
                    text-align: justify;
                    font-size: var(--size_1p0rem);
                    font-weight: 400;
                    margin-bottom: var(--size_1p0em);
                    color: var(--secondary_color);
                  }
                  .main_buttons {
                    display: block;
                    margin: auto;
                    margin-top: var(--size_2p0em);
                    float: unset;
                    width: var(--width_70);
                    color: var(--secondary_color);
                    background-color: var(--white_color);
                    border-color: var(--secondary_color);
                    &:hover {
                      border-color: var(--theme_color);
                      color: var(--theme_color);
                    }
                  }
                }
              }
            }
            &.middle {
              margin-top: 20vh;
              margin-bottom: 20vh;
            }
          }
        }
      }

      &.investment {
        padding: 4em 0;

        & > .main_buttons {
          margin-top: 15vh;
        }

        .headline {
          margin-bottom: 10vh;
        }
        .section_wrapper {
          .section_col {
            .service_card {
              position: relative;
              min-height: 500px;
              border: 1px solid var(--secondary_color);
              border-radius: 8px;
              background-color: var(--white_color);

              .card_layer {
                background-color: var(--secondary_color);
                color: var(--white_color);
                position: absolute;
                border-radius: 8px;
                z-index: 2;
                bottom: 0;
                left: 0;
                transition: all 350ms ease;
                width: 0;
                height: var(--width_100);
              }

              .plan_name {
                width: var(--width_100);
                background-color: var(--secondary_color);
                position: relative;
                z-index: 5;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
                text-align: center;
                padding: var(--size_1p4em) var(--size_0p6em);
                color: var(--white_color);
                margin-bottom: var(--size_1p0em);
                border-bottom: 1px solid var(--white_color);

                .icon {
                  display: block;
                  margin: auto;
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  svg {
                    width: 45px;
                    height: 45px;
                    path {
                      fill: var(--theme_color);
                    }
                  }
                }
                h2 {
                  font-weight: 400;
                  font-size: var(--size_1p4rem);
                  font-family: var(--minor_family);
                  text-transform: uppercase;
                  margin-bottom: var(--size_0p8em);
                }
                h3 {
                  font-weight: 400;
                  font-size: var(--size_2p0rem);
                  font-family: var(--minor_family);
                  text-transform: uppercase;
                  margin-bottom: var(--size_0p2em);
                  color: var(--theme_color);
                }
                h4 {
                  font-weight: 400;
                  font-size: var(--size_1p2rem);
                }
              }
              .plan_details {
                position: relative;
                z-index: 4;
                padding: var(--size_0p5em) var(--size_1p0em);

                h3 {
                  font-weight: 500;
                  font-size: var(--size_1p2rem);
                  text-transform: uppercase;
                  margin-bottom: var(--size_0p4em);
                }
                ul {
                  width: var(--width_100);
                  padding-left: var(--size_0p5em);
                  li {
                    width: var(--width_100);
                    font-weight: 400;
                    font-size: var(--size_1p0rem);
                    gap: var(--size_0p6em);

                    &:not(:last-child) {
                      margin-bottom: var(--size_0p4em);
                    }
                    span {
                      flex-shrink: 0;
                      width: 8px;
                      height: 8px;
                      border-radius: 50%;
                      background-color: var(--secondary_color);
                    }
                  }
                }
              }
              .plan_button {
                position: absolute;
                right: 0;
                bottom: 0;
                z-index: 6;

                .plan_buttons {
                  width: 150px;
                  color: var(--secondary_color);
                  background-color: var(--white_color);
                  font-size: var(--size_1p2rem);
                  padding: var(--size_0p6em);
                  border-top-left-radius: 8px;
                  border-bottom-right-radius: 8px;
                  border-top: 2px solid var(--secondary_color);
                  border-left: 2px solid var(--secondary_color);
                  float: none;
                  text-align: center;
                  font-weight: 400;

                  &:hover {
                    border-top: 2px solid var(--white_color);
                    border-left: 2px solid var(--white_color);
                    color: var(--white_color);
                    background-color: var(--secondary_color);
                  }
                }
              }
              .interests {
                margin-top: var(--size_1p2em);
                padding-left: var(--size_1p2em);
                position: relative;
                z-index: 4;
                color: var(--theme_color);
                h3 {
                  font-weight: 400;
                  font-size: var(--size_2p0rem);
                }
                h4 {
                  font-weight: 300;
                  font-size: var(--size_1p0rem);
                }
              }
              &:hover {
                .card_layer {
                  width: var(--width_100);
                }
                .plan_details {
                  color: var(--white_color);

                  ul {
                    li {
                      span {
                        background-color: var(--white_color);
                      }
                    }
                  }
                }

                .interests {
                  color: var(--white_color);
                }
              }
            }
            &.middle {
              margin-top: 10vh;
            }
          }
        }
      }
      &.reasons {
        padding: 4em 0;

        .headline {
          margin-bottom: 10vh;
          h2 {
            &::after {
              border: 1px solid var(--white_color);
              background-color: var(--theme_color);
            }
          }
        }
        .section_wrapper {
          grid-template-columns: repeat(1, minmax(300px, 1fr));

          .section_col {
            margin-bottom: 30px;
            min-height: auto;
            flex-wrap: wrap;
            .col_left {
              height: 240px;
              width: 100%;
              flex-basis: 100%;
              position: relative;
              border-radius: 6px;
            }
            .col_right {
              flex-basis: 100%;
              width: 100%;
              margin-bottom: 10px;

              .icon {
                margin-bottom: var(--size_1p0em);
                svg {
                  width: 30px;
                  height: 30px;
                  flex-shrink: 0;
                  path {
                    fill: var(--theme_color);
                  }
                }
                h3 {
                  margin-left: var(--size_1p0em);
                  font-size: var(--size_1p4rem);
                  text-transform: uppercase;
                  color: var(--theme_color);
                  flex: 1;
                  padding-bottom: var(--size_0p3em);
                  border-bottom: 1px solid var(--theme_color);
                }
              }
              p {
                color: var(--secondary_color);
                font-weight: 400;
                font-size: var(--size_1p1rem);
                text-align: justify;
              }
            }
            &:nth-child(odd) {
              .col_left {
                order: 2;
              }
              .col_right {
                order: 1;
              }
            }
            &:nth-child(even) {
              .col_left {
                order: 2;
              }
              .col_right {
                order: 1;
              }
            }
          }
        }
      }
      &.testimonial {
        padding: 4em 0;

        & > .main_buttons {
          margin-top: 10vh;
        }

        .headline {
          margin-bottom: 10vh;
          h2 {
            &::after {
              border: 1px solid var(--white_color);
              background-color: var(--theme_color);
            }
          }
        }
        .section_wrapper {
          width: 100%;
          overflow-x: scroll;
          .slider_wrapper {
            width: 600%;
            margin-bottom: var(--size_2p4em);
            gap: 0.8%;

            .section_col {
              width: 16%;
              min-width: 16%;

              .col_content {
                height: 260px;
                overflow-y: scroll;
                .quote {
                  display: block;
                  float: left;
                  width: 30px;
                  margin-right: var(--size_0p6em);
                  svg {
                    height: 32px;
                    width: 32px;
                    path {
                      fill: var(--theme_color);
                      stroke-width: 0px;
                    }
                  }
                }
                p {
                  text-align: justify;
                  font-size: var(--size_0p95rem);
                  margin-bottom: var(--size_1p2em);
                  color: var(--white_color);
                }
                .names {
                  width: var(--width_100);
                  .stars {
                    margin-bottom: var(--size_0p4em);
                    img {
                      width: 100px;
                      object-fit: cover;
                    }
                    svg {
                      width: 100px;
                      path {
                        fill: var(--theme_color);
                        stroke-width: 0px;
                      }
                    }
                  }
                  h3 {
                    font-weight: 500;
                    text-transform: uppercase;
                    color: var(--theme_color);

                    font-size: var(--size_1p1rem);
                    margin-bottom: var(--size_0p4em);
                  }
                  h4 {
                    font-weight: 400;
                    color: var(--white_color);
                    font-size: var(--size_1p0rem);
                  }
                }
              }
            }
          }
        }
      }

      &.contact {
        background-color: var(--secondary_color);
        padding: 6em 0;

        .headline {
          margin-bottom: 10vh;
          h2 {
            color: var(--white_color);
          }
        }
        .section_wrapper {
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: var(--width_5);
          .section_col {
            button {
              float: none;
            }
            .col_content {
              width: var(--width_100);
              gap: 4%;
              flex-wrap: wrap;
              row-gap: 26px;
              .box {
                flex-basis: 48%;
                width: 48%;

                border-radius: 8px;
                padding: 15px;
                .icon {
                  margin: auto;
                  width: 35px;
                  height: 35px;
                  border-radius: 50%;
                  background-color: var(--white_color);
                  margin-bottom: var(--size_0p6em);
                  svg {
                    width: var(--width_60);
                    height: var(--width_60);
                    path {
                      fill: var(--secondary_color);
                    }
                  }
                }
                h3,
                h4 {
                  width: var(--width_100);
                  text-align: center;
                  color: var(--white_color);
                  font-weight: 400;
                }
                h3 {
                  font-size: var(--size_1p4rem);
                }
                .socials {
                  gap: 20px;
                  .social_btn {
                    height: 24px;
                    width: 24px;
                  }
                }
              }
              h2 {
                font-weight: 400;
                font-size: var(--size_1p4rem);
                text-transform: uppercase;
                color: var(--white_color);
                margin-bottom: var(--size_0p6em);
              }
              p {
                width: var(--width_100);
                text-align: justify;
                color: var(--white_color);
                margin-bottom: var(--size_0p6em);
              }
            }
            &.contact {
              grid-column: auto;
            }
            &.reach_us {
              grid-column: auto;
              grid-row: auto;
            }
          }
        }
      }
      &.faqs {
        padding: 4em 0;

        .headline {
          margin-bottom: 10vh;
          h2 {
            &::after {
              border: 1px solid var(--white_color);
              background-color: var(--theme_color);
            }
          }
        }
        .section_wrapper {
          gap: var(--width_025);
          .section_col {
            .question_image {
              width: var(--width_100);
              min-height: 300px;
              background-position: center;
              border-radius: 8px;
              background-repeat: no-repeat;
              background-size: cover;
              position: relative;
              &::before {
                content: "";
                background-color: var(--secondary_color_rgba);
                position: absolute;
                right: 0;
                border-radius: 8px;
                z-index: 1;
                left: 0;
                width: var(--width_100);
                height: var(--width_100);
              }
              &::after {
                content: "";
                background-color: var(--theme_color);
                position: absolute;
                right: 0;
                border-radius: 8px;
                z-index: 2;
                left: 0;
                width: var(--width_100);
                height: var(--width_100);
                opacity: 0.1;
              }
            }
            .col_content {
              width: var(--width_100);
              .question_container {
                width: var(--width_100);
                border: 1px solid var(--secondary_color);
                border-radius: 4px;
                margin-bottom: var(--size_1p0em);
                .question {
                  width: var(--width_100);
                  background-color: var(--secondary_color);
                  border: 1px solid var(--secondary_color);
                  padding: var(--size_0p4em) var(--size_0p8em);

                  cursor: pointer;
                  color: var(--white_color);

                  span {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    flex-shrink: 0;
                    transition: all 300ms ease-in-out;
                    svg {
                      height: 90%;
                      width: 90%;
                      path {
                        fill: var(--white_color);
                      }
                    }
                    &.rotate {
                      rotate: -180deg;
                    }
                  }
                }

                .answer {
                  width: var(--width_100);
                  border-bottom-left-radius: 4px;
                  border-bottom-right-radius: 4px;
                  transition: all 300ms ease-in-out;
                  display: grid;
                  grid-template-rows: 0fr;
                  .answer_content {
                    width: var(--width_100);
                    overflow: hidden;
                    p {
                      font-weight: 400;
                      font-size: var(--size_1p0rem);
                      padding: var(--size_0p5em);
                    }
                  }
                  &.show {
                    grid-template-rows: 1fr;
                  }
                }
              }
            }

            &.col_left {
              flex: 2;
            }
            &.col_right {
              flex: 3;
            }
          }
        }
      }
      .slider_btns {
        max-width: var(--width_80);
        margin: auto;
        gap: var(--size_1p2em);
        .btn {
          width: 18px;
          height: 18px;
          background-color: var(--secondary_color);
          &.current,
          &:hover {
            background-color: var(--theme_color);
          }
        }
        &.larger {
          display: none;
        }
        &.smaller {
          display: flex;
        }
      }
    }

    .bridge {
      width: var(--width_100);
      min-height: 300px;

      .bridge_content {
        width: var(--width_85);
        max-width: var(--width_85);
        flex-wrap: wrap;

        .left {
          flex-basis: 100%;
          width: var(--width_100);
          margin-bottom: 10px;
        }
        h2 {
          font-size: var(--size_2p0rem);

          font-weight: 400;
          text-align: center;
          width: var(--width_100);
        }
        p {
          font-size: var(--size_0p95rem);
          font-weight: 400;
          text-align: center;
          margin-bottom: 20px;
        }
        .main_buttons {
          float: unset;
          margin-top: 1em;
          display: block;
          margin: auto;
        }
      }
    }
  }

  footer {
    width: var(--width_100);

    position: relative;
    z-index: 20;

    .footer_content {
      max-width: var(--width_85);
      padding: 1em 0;

      .left {
        flex: 1;
      }
      .left {
        gap: var(--size_1p0em);
        img {
          width: 50px;
        }
        h3 {
          text-transform: uppercase;
          font-size: var(--size_1p6rem);
          font-weight: 400;
        }
      }
      .footer_nav {
        position: fixed;
        opacity: 0;
        pointer-events: none;
        transition: all 350ms ease-in-out;
        left: 0;
        bottom: 0;
        z-index: 5900;
        width: var(--width_100);
        border-top: 1px solid var(--white_color);
        padding: 20px 7.5%;
        background-color: var(--secondary_color);
        justify-content: space-between;
        align-items: center;

        gap: 10px;
        .btn {
          font-weight: 400;
          transition: all 0.25s ease-in-out;
          border-radius: 0;
          font-size: var(--size_0p95rem);

          &:hover {
            border-bottom: 1px solid var(--white_color);
          }
          &.hide {
            display: none;
          }
        }

        &.visible {
          bottom: 9%;
          opacity: 1;
          pointer-events: initial;
        }
      }
      .socials {
        gap: var(--size_1p0em);
        .social_btn {
          width: 23px;
          height: 23px;
          border-radius: 50%;
          background-color: transparent;
          border: 0;
          cursor: pointer;
          svg {
            width: 100%;
            height: 100%;
            path {
              fill: var(--white_color);
            }
          }
        }
      }
    }
    .copy_line {
      width: var(--width_100);
      border-top: 1px solid var(--white_color);
      padding: var(--size_1p0em);
      padding-bottom: 90px;
      p {
        width: var(--width_100);
        text-align: center;
        font-size: var(--size_0p9rem);
      }
    }
  }

  .dashboard_container {
    .dashboard_menu {
      width: var(--width_30);

      .logo_area {
        button {
          background-color: transparent;
          cursor: pointer;
          border: 0;
          outline: none;
          img {
            width: 60px;
          }
          svg {
            width: 24px;
            height: 24px;
            path {
              fill: var(--white_color);
            }
          }
        }
        .toggle_menu {
          position: absolute;
          top: 10px;
          right: 10px;
          svg {
            width: 20px;
            height: 20px;
          }
        }
      }
      .navigation {
        width: var(--width_100);
        .nav_list {
          width: var(--width_100);
          .nav_item {
            width: var(--width_100);
            margin-bottom: var(--size_0p4em);
            .nav_btn {
              width: var(--width_100);
              background-color: transparent;
              cursor: pointer;
              border: 0;
              padding: var(--size_0p4em) var(--size_0p6em);
              border-bottom: 1px solid var(--secondary_color);
              outline: none;
              gap: 10px;
              transition: 300ms ease-in-out;
              border-radius: 4px;
              color: var(--white_color);
              font-weight: 400;
              .icon {
                width: 16px;
                height: 16px;
                svg {
                  width: var(--width_100);
                  height: var(--width_100);
                  path {
                    fill: var(--white_color);
                  }
                }
              }
              span {
                font-size: var(--size_1p0rem);
              }
              &.current,
              &:hover {
                background-color: transparent;
                border-bottom: 1px solid var(--theme_color);

                color: var(--theme_color);
                .icon {
                  svg {
                    path {
                      fill: var(--theme_color);
                    }
                  }
                }
              }
            }
          }
          hr {
            border: 0;
            background-color: transparent;
            border-top: 1px solid var(--white_color);
            margin-top: var(--size_1p0em);
            margin-bottom: var(--size_1p0em);
          }
        }
      }
      &.visible {
        left: 0;
        opacity: 1;
        pointer-events: initial;
      }
    }
    .main_dashboard {
      width: var(--width_100);
      background-image: url("/images/bg_img_1.jpg");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: scroll;

      position: relative;

      &::before {
        content: "";
        background-color: var(--secondary_color_rgba);
        position: absolute;
        top: 0;
        z-index: 1;
        left: 0;
        width: var(--width_100);
        height: var(--width_100);
        opacity: 0.15;
      }
      &::after {
        content: "";
        background-color: var(--theme_color_rgba);
        position: absolute;
        top: 0;
        z-index: 2;
        left: 0;
        width: var(--width_100);
        height: var(--width_100);
        opacity: 0.15;
      }

      .dashboard {
        width: var(--width_100);
        position: relative;
        z-index: 10;
        .dash_top {
          
          padding: var(--size_1p0em) 5%;
       
          .top_logo {
            gap: 10px;
            button {
              cursor: pointer;
              width: 20px;
              height: 20px;
              svg {
                width: 100%;
                height: 100%;
                path {
                  fill: var(--white_color);
                }
              }
              &.mobile_toggle {
                display: none;
              }
            }

            h1 {
              font-size: var(--size_1p2rem);
              color: var(--white_color);
              text-transform: uppercase;
            }
            &.forms {
              button {
                width: auto;
                height: unset;
                gap: 10px;
                svg {
                  width: 16px;
                  height: 16px;
                  path {
                    fill: var(--white_color);
                  }
                }
              }
            }
          }
          .right {
            .searchbar {
              position: relative;
              input {
                position: absolute;
                top: 50%;
                left: -200px;
                min-width: 180px;
                translate: 0 -50%;
                transition: 300ms ease-in-out;
                background-color: transparent;
                border: 1px solid var(--white_color_rgba);
                font-size: var(--size_0p9rem);
                color: var(--white_color);
                outline: none;
                padding: var(--size_0p3em) var(--size_0p8em);
                border-radius: 4px;
                opacity: 0;
                pointer-events: none;

                &::placeholder {
                  opacity: 0.6;
                  color: var(--white_color_rgba);
                }
                &.show {
                  opacity: 1;
                  pointer-events: initial;
                  left: -190px;
                }
              }
              button {
                background-color: var(--secondary_color);
                cursor: pointer;
                outline: none;
                border: 0;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                svg {
                  width: var(--width_80);
                  height: var(--width_80);

                  path {
                    fill: var(--white_color);
                  }
                }

                &#toggle_search {
                  position: relative;
                  z-index: 5;
                }
                &#search_button {
                  position: absolute;
                  top: 0;
                  right: 0;
                  z-index: 1;
                }
              }
            }

            .currency_controller {
              position: relative;
              min-width: 50px;
              .currency_btn {
                border-radius: 4px;
                font-size: var(--size_0p9rem);
                border: 1px solid var(--white_color);
                cursor: pointer;
                padding: 4px 8px;
                background-color: transparent;
                color: var(--theme_color);
                text-align: center;
                outline: none;
              }
              .custom_selector {
                position: absolute;
                left: -100px;
                top: 140%;
                opacity: 0;
                transition: 350ms ease-in-out;
                pointer-events: none;
                background-color: var(--secondary_color);
                max-height: 200px;
                overflow-y: scroll;
                max-width: 140px;
                border: 1px solid var(--white_color_rgba2);
                border-radius: 4px;
                padding: 4px;
                padding-top: 0;

                .option_buttons {
                  width: var(--width_100);
                }

                .option_btn {
                  width: var(--width_100);
                  gap: 10px;
                  padding: 4px 8px;
                  transition: 300ms ease-in-out;
                  border-radius: 2px;
                  &:hover {
                    background-color: var(--white_color_rgba2);
                    span {
                      color: var(--theme_color);
                    }
                  }
                  img {
                    width: 20px;
                    object-fit: cover;
                    flex-shrink: 0;
                  }
                  span {
                    flex: 1;
                    text-align: left;
                    color: var(--white_color);
                    font-weight: 400;
                    font-size: var(--size_0p85rem);
                  }
                }

                .search_option {
                  width: var(--width_100);
                  background-color: var(--secondary_color);
                  margin-bottom: 10px;
                  position: sticky;
                  z-index: 4;
                  left: 0;
                  top: 0;
                  input {
                    border: 0;
                    border-bottom: 0.6px solid var(--white_color_rgba);
                    color: var(--white_color);
                    border-radius: 4px;
                    background-color: transparent;
                    font-size: var(--size_0p85rem);
                    cursor: auto;
                    padding: 4px 8px;

                    font-weight: 300;
                    outline: none;
                  }
                }
                &.show {
                  opacity: 1;
                  top: 115%;
                  pointer-events: initial;
                }
              }
            }
            .notification {
              position: relative;
              min-width: 40px;
              button {
                width: 30px;
                height: 30px;
                cursor: pointer;
                background-color: transparent;
                color: var(--theme_color);
                text-align: center;
                outline: none;
                border: 0;
                position: relative;
                span {
                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                  font-size: var(--size_0p75rem);
                  z-index: 2;
                  text-align: center;
                  background-color: var(--theme_color);
                  color: var(--white_color);
                  position: absolute;
                  font-weight: 500;
                  top: -6px;
                  right: -6px;
                }
                svg {
                  position: relative;
                  width: var(--width_100);
                  height: var(--width_100);
                  path {
                    fill: var(--white_color);
                  }
                }
              }
              .notification_pallete {
                position: absolute;
                left: -180px;
                top: 140%;
                opacity: 0;
                transition: 350ms ease-in-out;
                pointer-events: none;
                background-color: var(--secondary_color);
                max-height: 200px;
                overflow-y: scroll;
                min-width: 200px;
                max-width: 300px;
                border: 1px solid var(--white_color_rgba2);
                border-radius: 4px;
                padding: 4px;

                p {
                  width: var(--width_100);
                  text-align: justify;
                  font-size: var(--size_0p85rem);
                  color: var(--white_color);
                  font-weight: 300;
                }

                &.show {
                  top: 115%;
                  opacity: 1;
                  pointer-events: initial;
                }
              }
            }
            .profile_preview {
              position: relative;
              .user_image_btn {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                border: 1px solid var(--white_color);
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                cursor: pointer;
                outline: none;
              }
              .profile_menu {
                position: absolute;
                min-width: 260px;
                max-width: 300px;
                max-height: 450px;
                overflow-y: scroll;
                right: 0;
                top: 140%;
                opacity: 0;
                transition: 350ms ease-in-out;
                pointer-events: none;
                border: 1px solid var(--white_color_rgba2);
                background-color: var(--secondary_color);
                border-radius: 8px;
                padding: 1em;
                .user_image {
                  display: block;
                  margin: auto;
                  width: 80px;
                  height: 80px;
                  border-radius: 50%;
                  background-size: cover;
                  background-color: var(--white_color);
                  background-position: center;
                  background-repeat: no-repeat;
                  margin-bottom: var(--size_1p0em);
                }

                .user_data {
                  width: var(--width_100);
                  color: var(--white_color);
                  margin-bottom: var(--size_1p0em);
                  padding-bottom: var(--size_0p4em);
                  border-bottom: 1px solid var(--white_color_rgba);
                  h2 {
                    color: var(--theme_color);
                    width: var(--width_100);

                    margin-bottom: var(--size_1p0em);
                    padding-bottom: var(--size_0p3em);
                    border-bottom: 1px solid var(--white_color_rgba);
                    text-transform: uppercase;
                    font-size: var(--size_1p0rem);
                  }
                  h3 {
                    width: var(--width_100);
                    margin-bottom: var(--size_0p5em);
                    font-size: var(--size_0p9rem);
                    font-weight: 400;
                    text-align: center;
                    &.email {
                      font-style: italic;
                      color: var(--theme_color);
                    }
                  }
                }
                .account_data {
                  margin-bottom: var(--size_1p0em);
                  width: var(--width_100);
                  padding-bottom: var(--size_0p8em);
                  border-bottom: 1px solid var(--white_color_rgba);
                  .code {
                    width: var(--width_100);
                    margin-bottom: var(--size_1p0em);
                    .code_control {
                      width: var(--width_100);
                      color: var(--white_color);
                      margin-bottom: var(--size_0p6em);
                      h3 {
                        font-size: var(--size_0p95rem);
                      }
                      button {
                        width: 20px;
                        height: 20px;
                        cursor: pointer;
                        outline: none;
                        border: none;
                        background-color: transparent;
                        position: relative;
                        .show_copy {
                          position: absolute;
                          color: var(--theme_color);
                          background-color: var(--white_color);
                          padding: 4px;
                          border-radius: 4px;
                          font-size: 10px;
                          text-align: center;
                          top: -10px;
                          left: -65px;
                          min-width: 60px;
                          opacity: 0;
                          pointer-events: none;
                          transition: 300ms ease-in-out;
                          &.show {
                            opacity: 1;
                          }
                        }
                        svg {
                          width: var(--width_100);
                          height: var(--width_100);
                          path {
                            fill: var(--theme_color);
                          }
                        }
                      }
                    }
                    input {
                      width: var(--width_100);
                      text-align: left;
                      background-color: transparent;
                      pointer-events: none;
                      font-size: var(--size_0p9rem);
                      color: var(--theme_color);
                      border: 0;
                      font-weight: 300;
                      outline: none;
                      font-style: italic;
                    }
                  }
                }
                .profile_buttons {
                  .btn {
                    color: var(--white_color);
                    font-weight: 400;
                    font-size: var(--size_0p95rem);
                    padding: var(--size_0p4em) var(--size_0p8em);
                    border-radius: 4px;
                    &:hover {
                      background-color: var(--white_color);
                      color: var(--theme_color);
                    }
                  }
                }
                &.show {
                  opacity: 1;
                  top: 115%;
                  pointer-events: initial;
                }
              }
            }
          }
        }
        .warning {
        
           max-width: var(--width_90);
          
        }
        .dashboard_preview {
          max-width: var(--width_90);
          

          .preview_box {
            border: 1px dotted var(--white_color_rgba2);
            background-color: var(--secondary_color);
            border-radius: 8px;
            padding: var(--size_0p6em);
            position: relative;
            .title_bar {
              width: var(--width_100);
              margin-bottom: var(--size_0p5em);
              padding-bottom: var(--size_0p4em);
              color: var(--white_color);
              border-bottom: 1px solid var(--white_color_rgba);
              h3 {
                text-transform: uppercase;
                font-weight: 500;
                font-size: var(--size_0p9rem);
                color: var(--theme_color);
              }
              .btn {
                width: 20px;
                height: 20px;
                cursor: pointer;
                svg {
                  width: var(--width_100);
                  height: var(--width_100);
                  path {
                    fill: var(--white_color);
                  }
                }
              }
            }
            .card_menu {
              position: absolute;
              right: 10px;
              top: 72px;
              z-index: 5;
              max-width: 140px;
              opacity: 0;
              pointer-events: none;
              transition: 350ms ease-in-out;
              background-color: var(--secondary_color);
              border: 1px solid var(--white_color_rgba2);
              border-radius: 4px;
              padding: var(--size_0p4em);
              button {
                width: var(--width_100);
                cursor: pointer;
                display: block;
                background-color: transparent;
                font-size: var(--size_0p85rem);
                transition: 300ms ease-in-out;
                outline: none;
                border: 0;
                text-align: left;
                padding: var(--size_0p2em);
                margin-bottom: var(--size_0p2em);
                color: var(--white_color);
                border-radius: 2px;
                &:hover {
                  color: var(--theme_color);
                  background-color: var(--white_color_rgba2);
                }
              }
              &.show {
                top: 36px;
                opacity: 1;
                pointer-events: initial;
              }
            }

            .pair {
              margin-bottom: var(--size_0p2em);
              width: var(--width_100);
              h2 {
                flex: 1;
                text-transform: uppercase;
                color: var(--white_color);
                font-size: var(--size_0p85rem);
                font-weight: 400;
                span {
                  text-transform: none;
                  font-weight: 300;
                  margin-left: var(--size_0p4em);
                  opacity: 1;
                }
              }
              &.withdraw {
                h2 {
                  flex: 2;
                }
                h2.lesser {
                  flex: 1;
                }
              }
            }
          }
        }

         .user_info {
        max-width: var(--width_90);
        
      }

       
        .content_container {
          max-width: var(--width_90);

          
        
          .column {
            width: var(--width_100);
            position: relative;
            overflow: scroll;
            h1 {
              width: var(--width_100);
              text-transform: uppercase;
              font-size: var(--size_1p0rem);
              font-weight: 500;
              color: var(--theme_color);
              margin-bottom: var(--size_1p0em);
              padding-bottom: var(--size_0p6em);
              border-bottom: 1px solid var(--white_color_rgba);
              position: relative;
              .btn {
                width: 20px;
                height: 20px;
                cursor: pointer;
                svg {
                  width: var(--width_100);
                  height: var(--width_100);
                  path {
                    fill: var(--white_color);
                  }
                }
              }

              &.full {
                .btn {
                  width: auto;
                  height: auto;
                  font-size: var(--size_0p85rem);
                }
              }
            }
          }
          .cards_container {
            position: relative;

            flex-wrap: nowrap;
            /* gap: var(--size_1p0em); */
            gap: 15px;

            .card {
              position: relative;
              .card_menu {
                position: absolute;
                right: 0;
                top: 60px;
                z-index: 6;
                max-width: 140px;
                opacity: 0;
                pointer-events: none;
                transition: 350ms ease-in-out;
                background-color: var(--secondary_color);
                border: 1px solid var(--white_color_rgba2);
                border-radius: 4px;
                padding: var(--size_0p4em);
                button {
                  width: var(--width_100);
                  cursor: pointer;
                  display: block;
                  background-color: transparent;
                  font-size: var(--size_0p9rem);
                  transition: 300ms ease-in-out;
                  outline: none;
                  border: 0;
                  text-align: left;
                  padding: var(--size_0p2em);
                  margin-bottom: var(--size_0p2em);
                  color: var(--white_color);
                  &:hover {
                    color: var(--theme_color);
                    background-color: var(--white_color_rgba2);
                  }
                }

                &.show {
                  top: 30px;
                  opacity: 1;
                  pointer-events: initial;
                }
              }
            }
            &.investments_container {
              width: calc(400%);
              /* translate: calc(-25% - 15px); */
              /* translate: calc(-50% - 30px); */
              /* translate: calc(-75% - 45px); */
              .card {
                width: calc(100% / 4);
                min-width: calc(100% / 4);
              }
            }
            &.investments_admin_container {
              width: calc(300%);
              /* translate: calc(-25% - 15px); */
              /* translate: calc(-50% - 30px); */
              /* translate: calc(-75% - 45px); */
              .card {
                width: calc(100% / 3);
                min-width: calc(100% / 3);
              }
            }
            &.referrals_container {
              width: 400%;
              .card {
                width: calc(100% / 4);
                min-width: calc(100% / 4);
              }
            }
            &.ref_settings_container {
              width: 200%;
              .card {
                width: calc(100% / 2);
                min-width: calc(100% / 2);
              }
            }
            &.settings_container {
              width: var(--width_100);
              .card {
                width: var(--width_100);
                min-width: var(--width_100);
              }
            }
          }
          .investment_container {
            width: var(--width_100);

            max-height: unset;
            overflow-y: scroll;
            .investment_details {
              width: var(--width_100);
              margin-bottom: var(--size_1p0em);
              padding-bottom: var(--size_0p8em);
              color: var(--white_color);
              h2 {
                text-transform: uppercase;
                font-weight: 400;
                font-size: var(--size_0p95rem);
                width: var(--width_100);
                margin-bottom: var(--size_0p5em);
                padding-bottom: var(--size_0p3em);
                color: var(--theme_color);
              }
              h6 {
                color: var(--white_color);
                font-size: var(--size_0p85rem);
                b {
                  font-weight: 600;
                }
              }
              .content_row {
                width: var(--width_100);
                column-gap: 40px;
                row-gap: 20px;
                border: 1px solid var(--white_color_rgba2);
                border-radius: 8px;
                padding: var(--size_1p0em);
                flex-wrap: wrap;
                &.ref_row,
                &.settings_row {
                  &:not(:last-child) {
                    margin-bottom: var(--size_1p0em);
                  }
                  .one_row {
                    &:not(:last-child) {
                      margin-bottom: var(--size_1p0em);
                    }
                  }
                }
                .one_row {
                  flex: 1;
                  h3 {
                    text-transform: uppercase;
                    width: var(--width_100);
                    font-size: var(--size_0p9rem);
                    padding-bottom: var(--size_0p4em);
                    border-bottom: 1px solid var(--white_color_rgba2);
                    margin-bottom: var(--size_0p4em);
                    button {
                      background-color: transparent;
                      padding: 2px 10px;
                      color: var(--white_color);
                      border: 0;
                      outline: none;
                      cursor: pointer;
                      font-weight: 500;
                      transition: 300ms ease-in-out;
                      border-radius: 2px;
                      &:hover {
                        color: var(--theme_color);
                        background-color: var(--white_color);
                      }
                      &.copy_btn {
                        padding: 0;
                        width: 20px;
                        height: 20px;
                        cursor: pointer;
                        position: relative;
                        outline: none;
                        border: none;
                        color: var(--theme_color);
                        background-color: transparent;

                        svg {
                          width: var(--width_100);
                          height: var(--width_100);
                          path {
                            fill: var(--theme_color);
                          }
                        }
                        .show_copy {
                          position: absolute;
                          color: var(--theme_color);
                          background-color: var(--white_color);
                          padding: 4px;
                          border-radius: 4px;
                          font-size: 10px;
                          text-align: center;
                          top: -10px;
                          left: -65px;
                          min-width: 60px;
                          opacity: 0;
                          pointer-events: none;
                          transition: 300ms ease-in-out;
                          &.show {
                            opacity: 1;
                          }
                        }

                        &:hover {
                          color: var(--theme_color);
                          background-color: transparent;
                          svg {
                            path {
                              fill: var(--theme_color);
                            }
                          }
                        }
                      }
                    }
                  }
                  .detail {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    margin-bottom: var(--size_0p2em);
                    h4 {
                      font-weight: 400;
                      font-size: var(--size_0p8rem);
                      text-transform: uppercase;
                    }
                    p {
                      font-size: var(--size_0p85rem);
                      &.pending_status {
                        color: #72e6a4;
                      }
                      &.cancel_status {
                        color: var(--fail_clr);
                      }
                    }
                  }
                  .referral_detail {
                    width: var(--width_100);
                    color: var(--white_color);

                    div {
                      margin-bottom: var(--size_0p2em);
                      align-items: flex-end;
                      gap: 10px;
                      h4 {
                        font-size: var(--size_2p8rem);
                        text-transform: uppercase;
                        font-weight: 500;
                        color: var(--theme_color);
                      }
                      h5 {
                        font-weight: 400;
                        font-size: var(--size_1p15rem);
                        text-transform: uppercase;
                        margin-bottom: var(--size_0p6em);
                      }
                    }

                    p {
                      font-size: var(--size_0p85rem);
                    }
                  }
                  .col_content {
                    width: var(--width_100);
                    background-color: var(--white_color_rgba2);
                    padding: var(--size_0p8em);
                    border-radius: 6px;
                    position: relative;
                    .quote {
                      display: block;
                      float: left;
                      width: 30px;
                      margin-right: var(--size_0p6em);
                      svg {
                        height: 32px;
                        width: 32px;
                        path {
                          fill: var(--theme_color);
                          stroke-width: 0px;
                        }
                      }
                    }
                    p {
                      text-align: justify;
                      font-size: var(--size_1p0rem);
                      margin-bottom: var(--size_0p6em);
                      color: var(--white_color);
                    }
                    .names {
                      width: var(--width_100);
                      .stars {
                        margin-bottom: var(--size_0p4em);
                        img {
                          width: 100px;
                          object-fit: cover;
                        }
                        svg {
                          width: 100px;
                          path {
                            fill: var(--theme_color);
                            stroke-width: 0px;
                          }
                        }
                      }
                      h3 {
                        font-weight: 500;
                        text-transform: uppercase;
                        color: var(--theme_color);
                        border: 0;
                        font-size: var(--size_1p2rem);
                      }
                      h4 {
                        font-weight: 400;
                        color: var(--white_color);
                        font-size: var(--size_1p0rem);
                      }
                    }
                    .review_status {
                      position: absolute;
                      right: var(--size_0p8em);
                      bottom: var(--size_0p8em);
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      gap: 20px;
                      span {
                        font-style: italic;
                        font-size: var(--size_0p85rem);
                        &.pending_status {
                          color: var(--pending_clr);
                        }
                        &.success_status {
                          color: var(--success_clr);
                        }
                        &.cancel_status {
                          color: var(--fail_clr);
                        }
                      }
                      .btn {
                        border-radius: 6px;
                        padding: 4px 8px;
                        cursor: pointer;
                      }
                      .reject {
                        border: 1px solid var(--white_color_rgba);
                        &:hover {
                          color: var(--theme_color);
                          background-color: var(--white_color);
                        }
                      }
                      .accept {
                        border: 1px solid var(--white_color);
                        background-color: var(--white_color);
                        color: var(--theme_color);
                        &:hover {
                          color: var(--theme_color);
                          background-color: var(--white_color);
                        }
                      }
                    }
                  }

                  .data_form {
                    .field_group {
                      .form_control_group {
                        label {
                          font-weight: 400;
                          font-size: var(--size_1p0rem);
                        }

                        input {
                          border: 0;
                          border-bottom: 1px solid var(--white_color_rgba2);
                          border-radius: 0;
                        }
                        textarea {
                          max-height: 100px;
                          resize: none;
                        }
                      }
                      &.double {
                        gap: 30px;
                      }
                    }
                    .submit_button {
                      float: right;
                      display: none;
                      background-color: var(--white_color);

                      cursor: pointer;

                      &:hover {
                        color: var(--theme_color);
                        background-color: var(--white_color);
                      }
                    }
                    .pass_submit {
                      margin-left: 70%;
                      width: 30%;
                      position: relative;
                      border: 1px solid var(--white_color);
                      color: var(--secondary_color);
                      cursor: pointer;
                      background-color: var(--white_color);
                      text-align: center;
                      padding: var(--size_0p4em) var(--size_4p0em);
                      border-radius: 4px;

                      &:hover {
                        color: var(--theme_color);
                        background-color: var(--white_color);
                      }
                    }
                    &.editable {
                      .field_group {
                        .form_control_group {
                          input {
                            border: 0;
                            border-bottom: 1px solid var(--white_color);
                            border-radius: 4px;
                          }
                        }
                      }
                      .submit_button {
                        display: block;
                      }
                    }
                    &.security_form {
                      display: none;
                      &.editable {
                        display: block;
                      }
                    }
                    h6 {
                      width: var(--width_100);
                      text-align: left;
                      margin: 4px 0;
                      color: var(--theme_color);
                      font-style: italic;
                      font-size: var(--size_0p85rem);
                    }
                    .inputs {
                      input {
                        background-color: transparent;
                        text-align: left;
                        color: var(--theme_color);
                        font-style: italic;
                        font-size: var(--size_0p95rem);
                        outline: none;
                        border: 0;

                        padding: 4px 10px;
                      }
                    }
                    .form_btns {
                      .btn {
                        color: var(--white_color);
                        font-weight: 400;
                        font-size: var(--size_0p95rem);
                        border: 0;
                        padding: 4px 8px;
                        &:hover {
                          background-color: var(--white_color);
                          color: var(--theme_color);
                        }
                      }
                    }
                  }
                  &.currency_row {
                    border-bottom: 1px solid var(--white_color_rgba2);
                    padding-bottom: 10px;
                    h5 {
                      color: var(--theme_color);
                      font-style: italic;
                      font-size: var(--size_0p85rem);
                      text-align: left;
                      width: var(--width_100);
                    }
                    .custom_select {
                      .controller {
                        margin-top: 10px;
                        width: var(--width_100);
                        input[type="button"] {
                          min-width: 150px;
                        }
                      }
                    }
                  }
                  .account_btns {
                    width: var(--width_100);
                    button {
                      border: 0;
                      cursor: pointer;
                      color: var(--white_color);
                      font-weight: 400;
                      text-align: center;
                      padding: 4px 8px;
                      font-size: var(--size_0p95rem);
                      &:hover {
                        background-color: var(--white_color);
                        color: var(--theme_color);
                      }
                    }
                  }
                }
                .profile_image {
                  max-width: 120px;
                  flex-shrink: 0;
                  .user_image {
                    width: 120px;
                    height: 120px;
                    border-radius: 6px;
                    margin-bottom: var(--size_0p5em);
                    img {
                      width: var(--width_100);
                      height: var(--width_100);
                      border-radius: 6px;
                      object-fit: cover;
                    }
                  }
                  .data_form {
                    width: var(--width_100);
                    position: relative;
                    .field_group {
                      width: var(--width_100);
                      .form_control_group {
                        color: var(--white_color);

                        label {
                          width: var(--width_100);
                          max-height: 50px;
                          text-align: center;
                          padding: var(--size_0p4em);
                          position: absolute;
                          cursor: pointer;
                          z-index: 4;
                          font-weight: 300;
                          font-size: var(--size_0p95rem);
                          transition: 300ms ease-in-out;
                          border-radius: 4px;
                          text-wrap: nowrap;
                          overflow: hidden;
                          border: 0.6px solid var(--white_color);
                          &:hover {
                            background-color: var(--white_color);
                            color: var(--theme_color);
                          }
                        }
                        input {
                          position: relative;
                          opacity: 0;
                          z-index: 1;
                        }
                      }
                    }
                    .form_btns {
                      width: var(--width_100);
                      button {
                        background-color: transparent;
                        text-transform: uppercase;
                        text-align: center;
                        color: var(--white_color);
                        border: 0;
                        font-size: var(--size_0p9rem);
                        padding: 4px 8px;
                        cursor: pointer;
                        font-weight: 500;
                        border-radius: 4px;
                        width: var(--width_100);
                        transition: 300ms ease-in-out;
                        &:hover {
                          color: var(--theme_color);
                        }

                        &:nth-child(1) {
                          color: var(--secondary_color);
                          background-color: var(--white_color);
                          margin-bottom: var(--size_0p8em);
                          &:hover {
                            color: var(--theme_color);
                          }
                        }
                        &:nth-child(2) {
                          color: var(--white_color);
                          background-color: var(--secondary_color);
                          border: 1px solid var(--white_color_rgba);
                          &:hover {
                            background-color: var(--white_color);
                            color: var(--theme_color);
                          }
                        }
                      }
                    }
                  }
                }
                .stats_row {
                  flex-basis: 100%;
                  width: 100%;
                  gap: 20px;
                  .starts_col {
                    flex: 1;
                    /* background-color: aqua; */
                    .progress_bar {
                      width: 200px;
                      height: 200px;
                      border-radius: 50%;
                      position: relative;

                      display: flex;
                      align-items: center;
                      justify-content: center;
                      .content {
                        width: 185px;
                        height: 185px;
                        border-radius: 50%;
                        background-color: var(--secondary_color);
                        display: flex;
                        justify-content: center;
                        align-items: flex-start;
                        padding-left: 30px;
                        flex-direction: column;

                        .bar_detail {
                          display: flex;
                          flex-wrap: nowrap;
                          opacity: 0;
                          position: relative;
                          animation: fadeIn 2s ease 2s forwards;
                          span {
                            position: absolute;
                            width: 8px;
                            height: 8px;
                            top: 10px;
                            left: 0;
                          }
                          h3 {
                            margin-left: 15px;
                            font-size: 20px;
                            color: var(--theme_color);
                            small {
                              font-size: 11px;
                              color: var(--white_color);
                              text-transform: uppercase;
                              font-weight: 300;
                            }
                          }
                          &:nth-child(1) {
                            span {
                              background-color: var(--clr3);
                            }
                            h3 {
                              color: var(--clr3);
                              small.percent {
                                color: var(--clr3);
                                opacity: 1;
                              }
                            }
                          }
                          &:nth-child(2) {
                            span {
                              background-color: var(--clr1);
                            }
                            h3 {
                              color: var(--clr1);
                              small.percent {
                                color: var(--clr1);
                                opacity: 1;
                              }
                            }
                          }
                          &:nth-child(3) {
                            span {
                              background-color: var(--clr2);
                            }
                            h3 {
                              color: var(--clr2);
                              small.percent {
                                color: var(--clr2);
                                opacity: 1;
                              }
                            }
                          }
                        }
                      }

                      &.investment {
                        .content {
                          .bar_detail {
                            &:nth-child(1) {
                              span {
                                background-color: var(--white_color_rgba);
                              }
                              h3 {
                                color: var(--white_color_rgba);
                                small.percent {
                                  color: var(--white_color_rgba);
                                  opacity: 1;
                                }
                              }
                            }
                            &:nth-child(2) {
                              span {
                                background-color: var(--clr1);
                              }
                              h3 {
                                color: var(--clr1);
                                small.percent {
                                  color: var(--clr1);
                                  opacity: 1;
                                }
                              }
                            }
                            &:nth-child(3) {
                              span {
                                background-color: var(--clr2);
                              }
                              h3 {
                                color: var(--clr2);
                                small.percent {
                                  color: var(--clr2);
                                  opacity: 1;
                                }
                              }
                            }
                          }
                        }
                      }
                      &.days {
                        .content {
                          .bar_detail {
                            &:nth-child(1) {
                              span {
                                background-color: var(--clr1);
                              }
                              h3 {
                                color: var(--clr1);
                                small.percent {
                                  color: var(--clr1);
                                  opacity: 1;
                                }
                              }
                            }
                            &:nth-child(2) {
                              span {
                                background-color: var(--clr2);
                              }
                              h3 {
                                color: var(--clr2);
                                small.percent {
                                  color: var(--clr2);
                                  opacity: 1;
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }

                h4.no_record {
                  color: var(--white_color_rgba);
                  font-size: var(--size_0p95rem);
                  font-style: italic;
                  text-align: left;
                }

                .data_form {
                  width: var(--width_100);
                  margin-bottom: var(--size_0p8em);
                  h1 {
                    width: var(--width_100);
                    text-align: center;
                    color: var(--white_color);
                    font-size: var(--size_1p2rem);
                    text-transform: uppercase;
                    font-weight: 400;
                    margin-bottom: var(--size_0p5em);
                  }
                  p {
                    width: var(--width_100);
                    text-align: justify;
                    color: var(--white_color);
                    font-size: var(--size_1p0rem);
                    font-weight: 400;
                    margin-bottom: var(--size_0p5em);
                    padding-bottom: var(--size_0p4em);
                    border-bottom: 1px solid var(--white_color_rgba2);
                  }

                  .field_group {
                    position: relative;
                    .form_control_group {
                      position: relative;
                      label {
                        margin-bottom: var(--size_0p4em);
                        font-weight: 400;
                        font-size: var(--size_0p9rem);
                      }

                      textarea {
                        border: 1px solid var(--white_color_rgba2);
                      }

                      input {
                        outline: none;
                        border: 1px solid var(--white_color_rgba2);
                        &::placeholder {
                          font-size: var(--size_0p85rem);
                        }
                      }
                      &.phone_selector {
                        input#deposit_number {
                          padding-left: 55px;
                        }
                        input#binance_number {
                          padding-left: 55px;
                        }
                        input#withdraw_number {
                          padding-left: 55px;
                        }
                      }
                    }
                    &.withdraw_investments {
                      display: none;
                      &.show {
                        display: block;
                      }
                    }
                  }
                  .custom_select {
                    bottom: 4px;
                    .controller {
                      .value_selector {
                        font-weight: 400;
                        text-align: left;
                        min-width: var(--width_100);
                        padding: inherit;
                        font-size: var(--size_0p95rem);
                        padding: var(--size_0p4em) var(--size_0p8em);
                      }
                    }
                    .options {
                      min-width: 150px;
                      max-height: 160px;
                      input {
                        background-color: transparent;
                        border: 0;
                        display: block;
                        width: var(--width_100);
                        text-align: left;
                        color: var(--white_color);
                        padding: 4px 8px;
                        border-radius: 2px;
                        transition: 300ms ease-in-out;
                        cursor: pointer;
                        font-weight: 400;
                        font-size: var(--size_0p8rem);

                        &:hover {
                          background-color: var(--white_color_rgba2);
                          color: var(--theme_color);
                        }
                      }

                      button {
                        width: var(--width_100);
                        padding: 4px;
                        gap: 10px;
                        img {
                          width: 20px;
                        }
                        span {
                          font-weight: 400;
                          font-size: var(--size_0p85rem);
                        }
                        &:hover {
                          background-color: var(--white_color_rgba2);
                          span {
                            color: var(--theme_color);
                          }
                        }
                      }
                      .option_buttons {
                        width: var(--width_100);
                      }

                      .search_option {
                        width: var(--width_100);
                        background-color: var(--secondary_color);
                        position: sticky;
                        z-index: 4;
                        left: 0;
                        top: 0;
                        input {
                          border: 0;
                          border-bottom: 0.6px solid var(--white_color_rgba);
                          color: var(--white_color);
                          outline: none;
                          border-radius: 4px;
                          background-color: transparent;
                          font-size: var(--size_0p85rem);
                          cursor: auto;
                          font-weight: 300;
                          &:hover {
                            background-color: transparent;
                          }
                        }
                      }
                    }

                    &.country_selector,
                    &.verify_selector {
                      .controller {
                        .value_selector {
                          background-color: transparent;
                          border-radius: 4px;
                          border: 0;
                          color: var(--white_color);
                          font-weight: 400;
                          text-align: center;
                          min-width: var(--width_100);
                          padding: 4px 4px;
                          font-size: var(--size_0p95rem);
                        }
                      }
                      .options {
                        min-width: 120px;
                        max-height: 200px;
                        overflow-y: scroll;
                        position: absolute;
                        top: 160%;
                        opacity: 0;

                        background-color: var(--white_color);
                        border: 0.6px solid var(--secondary_color_rgba2);

                        .option_buttons {
                          width: var(--width_100);
                          button {
                            background-color: transparent;
                            border: 0;
                            display: flex;
                            align-items: center;
                            width: var(--width_100);
                            text-align: left;
                            color: var(--secondary_color);
                            padding: 4px 8px;
                            border-radius: 2px;
                            transition: 300ms ease-in-out;
                            cursor: pointer;
                            font-weight: 400;

                            gap: 8px;
                            flex-wrap: nowrap;

                            &:hover {
                              background-color: var(--white_color_rgba2);
                              color: var(--theme_color);
                            }
                            &:not(:last-child) {
                              margin-bottom: var(--size_0p4em);
                            }
                            img {
                              object-fit: cover;
                              width: 24px;
                              border-radius: 2px;
                            }
                            span {
                              font-size: var(--size_0p8rem);
                              font-weight: 400;
                            }
                          }
                        }

                        .search_option {
                          width: var(--width_100);
                          background-color: var(--white_color);
                          margin-bottom: 10px;
                          position: sticky;
                          z-index: 4;
                          left: 0;
                          top: 0;
                          input {
                            border: 0;
                            outline: none;
                            border-bottom: 0.6px solid
                              var(--secondary_color_rgba);
                            color: var(--secondary_color);
                            border-radius: 4px;
                            background-color: transparent;
                            font-size: var(--size_0p85rem);
                            cursor: auto;
                            font-weight: 300;
                            &::placeholder {
                              color: var(--secondary_color_rgba);
                            }
                          }
                        }
                        &.show {
                          top: 110%;
                          opacity: 1;
                          pointer-events: initial;
                        }
                      }
                    }
                    &.country_code {
                      max-width: 50px;
                      /* background-color: aqua; */
                      position: absolute;
                      bottom: 0px;
                      left: 0;

                      .controller {
                        input {
                          background-color: var(--white_color);
                          padding: 5px;
                          color: var(--secondary_color);
                          text-align: center;
                        }
                      }
                    }
                    &.rating_selector {
                      .options {
                        max-height: 90px;

                        button {
                          img {
                            width: 80px;
                          }
                          span {
                            font-size: var(--size_0p9rem);
                          }
                        }
                      }
                    }
                  }
                  .submit_button {
                    cursor: pointer;
                    width: var(--width_50);
                    margin-left: var(--width_50);

                    &:hover {
                      color: var(--theme_color);
                      background-color: var(--white_color);
                    }
                  }
                  &#gift_form {
                    .notes {
                      p {
                        border: 0;
                        font-weight: 300;
                        font-size: var(--size_0p9rem);
                        margin-bottom: var(--size_0p2em);
                      }
                      .div_element {
                        width: var(--width_100);
                        padding-top: var(--size_0p3em);

                        h5 {
                          width: var(--width_100);

                          font-size: var(--size_0p8rem);
                          font-weight: 400;
                          text-transform: uppercase;
                          margin-bottom: 8px;
                        }
                      }
                    }
                  }
                }

                .plan_data {
                  width: var(--width_100);
                  padding-top: var(--size_0p6em);
                  border-top: 1px solid var(--white_color_rgba);
                  color: var(--white_color);
                  display: none;
                  h2 {
                    width: var(--width_100);
                    text-align: center;
                    text-transform: uppercase;
                    font-size: var(--size_1p2rem);
                    font-weight: 400;
                    margin-bottom: var(--size_0p4em);
                  }
                  h3 {
                    width: var(--width_100);
                    text-align: left;
                    font-size: var(--size_1p0rem);
                    font-weight: 400;
                    margin-bottom: var(--size_0p4em);
                    text-transform: uppercase;
                    span {
                      color: var(--theme_color);
                      text-transform: none;
                    }
                  }
                  .pair {
                    width: var(--width_100);
                    h4 {
                      flex: 1;
                      width: var(--width_100);
                      text-transform: uppercase;
                      font-weight: 400;
                      font-size: var(--size_0p95rem);
                      text-align: left;
                      span {
                        text-transform: none;
                      }
                    }
                  }

                  &.visible {
                    display: block;
                  }
                }

                .slide {
                  width: var(--width_100);
                  position: relative;

                  .caution {
                    text-align: justify;
                    display: block;
                    flex: 1;
                    width: var(--width_100);
                    color: var(--white_color);
                  }

                  .method_buttons {
                    display: block;
                    width: var(--width_100);
                    padding: 20px;
                    position: relative;

                    button {
                      width: var(--width_100);
                      position: relative;
                      border-radius: 4px;
                      background-color: transparent;
                      border: 1px solid var(--white_color_rgba);
                      font-size: var(--size_1p0rem);
                      padding: 10px;
                      margin-bottom: var(--size_1p0em);
                      font-weight: 400;
                      cursor: pointer;
                      gap: 20px;
                      color: var(--white_color);
                      font-size: var(--size_1p0em);
                      transition: all 300ms ease-in-out;
                      svg {
                        width: 20px;
                        height: 20px;
                        path {
                          fill: var(--white_color);
                        }
                        &.arrow {
                          position: absolute;
                          right: 10px;
                          top: 50%;
                          translate: 0 -50%;
                        }
                      }
                      &:hover {
                        background-color: var(--white_color);
                        border: 1px solid var(--white_color);
                        color: var(--theme_color);
                        svg {
                          path {
                            fill: var(--theme_color);
                          }
                        }
                      }
                    }
                  }

                  .form_details {
                    color: var(--white_color);
                    & > p {
                      font-weight: 500;
                      text-transform: uppercase;
                    }

                    &.credit {
                      h4 {
                        width: var(--width_100);
                        text-align: center;
                        font-weight: 300;
                        color: var(--theme_color);
                        font-size: var(--size_0p9rem);
                      }
                    }
                    p {
                      border: 0;
                      font-size: var(--size_0p85rem);
                      font-weight: 300;
                    }
                    .notes {
                      width: var(--width_100);
                      padding-bottom: var(--size_0p4em);
                      border-bottom: 1px solid var(--white_color_rgba2);
                      margin-bottom: var(--size_0p6em);
                      h4 {
                        text-transform: uppercase;
                        margin-bottom: var(--size_0p3em);
                        color: var(--white_color);
                        text-align: left;
                        font-size: var(--size_0p95rem);
                      }
                      p {
                        margin-bottom: 0;
                        &:last-child {
                          margin-bottom: var(--size_0p3em);
                        }
                      }
                      .div_element {
                        width: var(--width_100);
                        padding-top: var(--size_0p3em);

                        h5 {
                          width: var(--width_100);

                          font-size: var(--size_0p8rem);
                          font-weight: 400;
                          text-transform: uppercase;
                          margin-bottom: 8px;
                        }
                      }
                    }
                    h2 {
                      text-transform: uppercase;
                      margin-bottom: var(--size_0p3em);
                      color: var(--white_color);
                      text-align: left;
                      font-size: var(--size_0p95rem);
                    }
                  }
                }
              }

              .col_content {
                width: var(--width_100);
                .question_container,
                .question_container_ask {
                  width: var(--width_100);
                  border: 1px solid var(--white_color_rgba2);
                  border-radius: 6px;
                  margin-bottom: var(--size_1p0em);
                  position: relative;
                  .question {
                    width: var(--width_100);
                    background-color: var(--white_color);
                    padding: var(--size_0p4em) var(--size_0p8em);
                    border-top-left-radius: 6px;
                    border-top-right-radius: 6px;
                    border-bottom-left-radius: 6px;
                    border-bottom-right-radius: 6px;

                    cursor: pointer;
                    color: var(--secondary_color);
                    border: 1px solid var(--white_color);
                    h2 {
                      flex: 1;
                      text-align: left;
                      color: var(--secondary_color);
                      margin-bottom: 0;
                    }
                    span {
                      width: 20px;
                      height: 20px;
                      border-radius: 50%;
                      flex-shrink: 0;
                      transition: 300ms ease-in-out;
                      svg {
                        height: 90%;
                        width: 90%;
                        path {
                          fill: var(--secondary_color);
                        }
                      }
                      &.rotate {
                        rotate: -180deg;
                      }
                    }
                  }
                  .question_ask {
                    width: var(--width_100);
                    background-color: var(--white_color);
                    padding: var(--size_0p4em) var(--size_0p8em);
                    border-top-left-radius: 6px;
                    border-top-right-radius: 6px;
                    border-bottom-left-radius: 6px;
                    border-bottom-right-radius: 6px;

                    cursor: pointer;
                    color: var(--secondary_color);
                    border: 1px solid var(--white_color);
                    h2 {
                      flex: 1;
                      text-align: left;
                      color: var(--secondary_color);
                      margin-bottom: 0;
                    }
                    span {
                      color: var(--theme_color);
                    }
                  }
                  .question_form {
                    position: absolute;
                    padding: var(--size_1p0em);
                    opacity: 0;
                    pointer-events: none;
                    top: 10%;
                    left: 50%;
                    translate: -50%;
                    border-radius: 8px;
                    transition: 300ms ease-in-out;
                    width: var(--width_100);
                    border: 1px solid var(--white_color_rgba2);
                    z-index: 100;
                    background-color: var(--secondary_color);
                    h2 {
                      text-transform: none;
                      font-size: var(--size_0p9rem);
                      color: var(--white_color);
                    }

                    .field_group {
                      width: var(--width_100);
                      margin-bottom: var(--size_1p0em);
                      position: relative;
                      .dismiss_button {
                        position: absolute;
                        right: 8px;
                        top: 0;
                        color: var(--white_color);
                        font-size: var(--size_0p85rem);
                        text-align: center;
                        background-color: transparent;
                        border: 0;
                        font-weight: 500;
                        outline: none;
                        cursor: pointer;
                      }
                      .form_control_group {
                        width: var(--width_100);
                        color: var(--white_color);
                        flex: 1;
                        label {
                          display: block;
                          width: var(--width_100);
                          margin-bottom: var(--size_0p4em);
                          font-size: var(--size_1p0rem);
                        }
                        textarea,
                        input {
                          display: block;
                          width: var(--width_100);
                          background-color: transparent;
                          border-radius: 4px;
                          outline: none;
                          border: 1px solid var(--white_color_rgba2);
                          padding: var(--size_0p4em) var(--size_0p8em);
                          color: var(--white_color);
                          font-size: var(--size_0p85rem);
                          font-weight: 400;
                          &::placeholder {
                            color: var(--white_color_rgba);
                            opacity: 0.4;
                            font-size: var(--size_0p8rem);
                          }
                        }
                        textarea {
                          max-height: 100px;
                          resize: none;
                        }
                      }
                      &.double {
                        display: flex;
                        justify-content: space-between;
                        gap: var(--size_0p5em);
                      }
                    }
                    .submit_button {
                      display: block;
                      float: right;
                      border: 1px solid var(--white_color);
                      color: var(--secondary_color);
                      background-color: var(--white_color);
                      text-align: center;
                      padding: var(--size_0p4em) var(--size_4p0em);
                      border-radius: 4px;
                      transition: 250ms ease;
                      cursor: pointer;

                      &:hover {
                        background-color: var(--white_color);
                        color: var(--theme_color);
                      }
                    }
                    &.show {
                      top: 0;
                      opacity: 1;
                      pointer-events: initial;
                    }
                  }

                  .answer {
                    width: var(--width_100);

                    transition: 300ms ease-in-out;
                    display: grid;
                    grid-template-rows: 0fr;
                    .answer_content {
                      width: var(--width_100);
                      overflow: hidden;
                      p {
                        width: var(--width_100);
                        font-weight: 400;
                        text-align: justify;
                        font-size: var(--size_1p0rem);
                        padding: var(--size_0p5em);
                      }
                    }
                  }
                  &.show {
                    .question {
                      border-bottom-left-radius: 0;
                      border-bottom-right-radius: 0;
                    }

                    .answer {
                      grid-template-rows: 1fr;
                    }
                  }
                }
              }

              .form_titles {
                display: flex;
                align-items: center;
                justify-content: space-between;
                button {
                  cursor: pointer;
                  background-color: transparent;
                  width: 18px;
                  border: 0;
                  outline: none;
                  height: 18px;
                  svg {
                    width: var(--width_100);
                    height: var(--width_100);
                    path {
                      fill: var(--white_color);
                    }
                  }
                }
              }
            }

            .section {
              width: var(--width_100);

              .headline {
                width: var(--width_100);
                margin-bottom: var(--size_0p8em);
                h4 {
                  width: var(--width_100);
                  text-transform: uppercase;
                  font-size: var(--size_1p0rem);
                  padding-bottom: var(--size_0p4em);
                  color: var(--theme_color);
                }

                h5 {
                  color: var(--white_color);
                  font-weight: 400;
                  font-size: var(--size_0p95rem);
                }
                .btn {
                  color: var(--white_color);
                  font-weight: 400;
                  padding: var(--size_0p4em);
                  background-color: transparent;
                  border: 0;
                  &:hover {
                    background-color: transparent;
                    border: 0;
                  }
                }
              }
              .section_wrapper {
                width: var(--width_100);
                .service_card {
                  width: var(--width_100);
                  border-radius: 8px;
                  border: 1px solid var(--white_color_rgba2);
                  padding: var(--size_0p5em);
                  grid-template-columns: repeat(2, minmax(300px, 1fr));
                  &:not(:last-child) {
                    margin-bottom: var(--size_1p0em);
                  }

                  .plan_name {
                    .icon {
                      width: 50px;
                      height: 50px;
                      border-radius: 50%;
                      svg {
                        width: var(--width_100);
                        height: var(--width_100);
                        path {
                          fill: var(--theme_color);
                        }
                      }
                    }
                    h2 {
                      text-transform: uppercase;
                      font-size: var(--size_1p5rem);
                      font-weight: 500;
                      font-family: var(--minor_family);
                      color: var(--white_color);
                      margin-bottom: var(--size_0p5em);
                    }
                    h3,
                    h4 {
                      font-size: var(--size_1p0rem);
                      font-weight: 400;
                      color: var(--white_color);
                      text-transform: uppercase;
                      span {
                        color: var(--theme_color);
                        text-transform: none;
                        margin-left: var(--size_0p4em);
                      }
                    }
                    h3 {
                      margin-bottom: 8px;
                    }
                    h4 {
                      span {
                        color: var(--white_color);
                      }
                    }
                  }

                  .interests {
                    h3 {
                      font-size: var(--size_3p0rem);
                      color: var(--theme_color);
                      font-weight: 500;
                      font-family: var(--minor_family);
                      margin-bottom: var(--size_0p5em);
                      span {
                        font-size: var(--size_1p2rem);
                        text-transform: uppercase;
                        color: var(--white_color);
                      }
                    }
                    h4 {
                      color: var(--white_color);
                      text-align: left;
                      text-transform: uppercase;
                      font-size: var(--size_1p2rem);
                      margin-bottom: var(--size_0p6em);
                    }

                    .btn {
                      background-color: var(--secondary_color);
                      color: var(--theme_color);
                      border: 1px solid var(--white_color_rgba2);
                      border-radius: 4px;
                      font-size: var(--size_1p2rem);
                      padding: var(--size_0p5em) var(--size_1p0em);
                      text-transform: uppercase;
                      &:hover {
                        background-color: var(--white_color);
                        border: 1px solid var(--white_color);
                      }
                    }
                  }
                }
              }

              &.section_pages {
                .section_wrapper {
                  .service_card {
                    border-radius: 6px;
                    grid-template-columns: repeat(2, minmax(150px, 1fr));

                    .plan_name {
                      .icon {
                        width: 40px;
                        height: 40px;
                      }
                      h2 {
                        font-size: var(--size_1p0rem);
                      }
                      h3,
                      h4 {
                        font-size: var(--size_0p95rem);
                      }
                      h4 {
                        span {
                          color: var(--white_color);
                        }
                      }
                    }

                    .interests {
                      h3 {
                        font-size: var(--size_2p0rem);
                      }
                      h4 {
                        font-size: var(--size_1p2rem);
                      }

                      .btn {
                        background-color: var(--secondary_color);
                        color: var(--theme_color);
                        border: 1px solid var(--white_color_rgba2);
                        border-radius: 4px;
                        font-size: var(--size_1p2rem);
                        padding: var(--size_0p5em) var(--size_1p0em);
                        text-transform: uppercase;
                        &:hover {
                          background-color: var(--white_color);
                          border: 1px solid var(--white_color);
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          .container_left {
            grid-column: 1/6;
            grid-row: 1/2;
            background-color: var(--secondary_color);
            border-radius: 8px;
            padding: var(--size_1p0em);
            .faq_form {
              position: absolute;
              padding: var(--size_1p0em);
              opacity: 0;
              pointer-events: none;
              top: 10%;
              left: 50%;
              translate: -50%;
              border-radius: 8px;
              transition: 300ms ease-in-out;
              width: var(--width_100);
              border: 1px solid var(--white_color_rgba2);
              z-index: 100;
              background-color: var(--secondary_color);

              .field_group {
                width: var(--width_100);
                margin-bottom: var(--size_1p0em);
                position: relative;
                .dismiss_button {
                  position: absolute;
                  right: 8px;
                  top: 0;
                  color: var(--white_color);
                  font-size: var(--size_0p85rem);
                  text-align: center;
                  background-color: transparent;
                  border: 0;
                  font-weight: 500;
                  outline: none;
                  cursor: pointer;
                }
                .form_control_group {
                  width: var(--width_100);
                  color: var(--white_color);
                  flex: 1;
                  label {
                    display: block;
                    width: var(--width_100);
                    margin-bottom: var(--size_0p4em);
                    font-size: var(--size_1p0rem);
                  }
                  textarea,
                  input {
                    display: block;
                    width: var(--width_100);
                    background-color: transparent;
                    border-radius: 4px;
                    outline: none;
                    border: 1px solid var(--white_color_rgba2);
                    padding: var(--size_0p4em) var(--size_0p8em);
                    color: var(--white_color);
                    font-size: var(--size_0p85rem);
                    font-weight: 400;
                    &::placeholder {
                      color: var(--white_color_rgba);
                      opacity: 0.4;
                      font-size: var(--size_0p8rem);
                    }
                  }
                  textarea {
                    max-height: 100px;
                    resize: none;
                  }
                }
                &.double {
                  display: flex;
                  justify-content: space-between;
                  gap: var(--size_0p5em);
                }
              }
              .submit_button {
                display: block;
                float: right;
                border: 1px solid var(--white_color);
                color: var(--secondary_color);
                background-color: var(--white_color);
                text-align: center;
                padding: var(--size_0p4em) var(--size_4p0em);
                border-radius: 4px;
                transition: 250ms ease;
                cursor: pointer;

                &:hover {
                  background-color: var(--white_color);
                  color: var(--theme_color);
                }
              }
              &.show {
                top: 0;
                opacity: 1;
                pointer-events: initial;
              }
            }
          }
          .container_right {
            grid-column: 1/6;
            grid-row: 2/3;
           
          }
        }
      }
    }
  }
}

@media (max-width: 750px) {
  .mobile_nav {
    display: block;
  }

  .error_messages {
    &.account_error_messages {
      width: 90%;

      &.show {
        opacity: 1;
        pointer-events: initial;
        top: 2%;
      }
    }
    &.show {
      opacity: 1;
      pointer-events: initial;
      top: 1%;
    }

    &.dashboard_errors {
      width: var(--width_90);

      &.show {
        opacity: 1;
        pointer-events: initial;
        top: 8px;
      }
    }
  }

  .main_nav {
    .nav_below {
      max-width: var(--width_85) !important;

      .navigation {
        justify-content: flex-end;
        .navigation_list {
          margin-right: 0;

          &.main_list {
            display: none;
          }
        }
      }
    }
    &.fixed {
      background-color: var(--secondary_color);
      position: fixed;
      top: 0;
      left: 0;
      .nav_below {
        .navigation {
          .navigation_list {
            &.main_list {
              .navigation_item {
                .nav_link {
                  &::after {
                    background-color: var(--theme_color);
                  }

                  &.current,
                  &:hover {
                    color: var(--theme_color);
                  }
                }
              }
            }

            &.auth_list {
              .navigation_item {
                .nav_link {
                  &:hover {
                    border: 1px solid var(--white_color);
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .data_form {
    width: var(--width_100);
    .form_intro {
      width: var(--width_100);
      margin-bottom: var(--size_1p5em);
      .icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: var(--white_color);
        border: 1px solid var(--secondary_color);
        margin: auto;
        margin-bottom: var(--size_0p6em);
        svg {
          width: var(--width_70);
          height: var(--width_70);
          path {
            fill: var(--secondary_color);
          }
        }
      }
      p {
        width: var(--width_100);
        text-align: center;
        color: var(--secondary_color);
        font-size: var(--size_0p95rem);
        font-weight: 400;
        margin-top: var(--size_0p2em);
      }
      h3,
      h4 {
        color: var(--secondary_color);
        text-align: center;
        width: var(--width_100);
        font-weight: 400;
      }
      h3 {
        text-transform: uppercase;
        font-size: var(--size_1p5rem);
        margin-bottom: var(--size_0p2em);
      }
      &.verified {
        .icon {
          border: 1px solid var(--success_clr);

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

        h3,
        h4 {
          color: var(--success_clr);
        }
      }
    }
    .field_group {
      width: var(--width_100);
      margin-bottom: var(--size_0p6em);
      position: relative;
      .form_control_group {
        color: var(--white_color);
        flex: 1;
        label {
          display: block;
          width: var(--width_100);
          margin-bottom: var(--size_0p2em);
          font-size: var(--size_0p95rem);
        }
        textarea,
        input {
          padding: var(--size_0p4em) var(--size_0p8em);
          color: var(--white_color);
          font-size: var(--size_0p85rem);
        }
        textarea {
          max-height: 100px;
          resize: none;
        }
      }
      /* 0789608059 */
      &.double {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--size_1p0em);
        flex-direction: column;

        .form_control_group {
          flex-basis: 100%;
          width: var(--width_100);

          textarea,
          input {
            display: block;
            width: var(--width_100);
          }
          textarea {
            max-height: 100px;
            resize: none;
          }
        }
      }
      &.wallet_details {
        position: relative;
        .form_control_group {
          position: relative;
          z-index: 2;
          input {
            border: 1px solid var(--white_color_rgba2);
            color: var(--theme_color);
            font-style: italic;
          }
        }
        .copy_btn {
          width: 30px;
          height: 30px;
          position: absolute;
          right: 0;
          bottom: 0;
          z-index: 5;
          border-radius: 50%;
          background-color: transparent;
          border: 0;
          outline: none;
          cursor: pointer;

          svg {
            width: 20px;
            height: 20px;
            path {
              fill: var(--white_color);
            }
          }
        }
      }
      &:nth-child(1){
        z-index: 20;
      }
      &:nth-child(2){
        z-index: 16;
      }
    }
    .submit_button {
      display: block;
      margin-left: 0;
      border: 1px solid var(--white_color);
      color: var(--secondary_color);
      background-color: var(--white_color);
      text-align: center;
      padding: var(--size_0p4em) var(--size_4p0em);
      border-radius: 4px;
      &:hover {
        color: var(--white_color);
        background-color: transparent;
      }
    }
    &.contact_form {
      .field_group {
        .form_control_group {
          label {
            display: none;
          }
        }
      }
    }
    &.news_form {
      .field_group {
        .btn {
          width: var(--width_40);
          align-self: flex-start;
          text-align: center;
          padding: var(--size_0p4em) var(--size_1p0em);
        }
        .form_control_group {
          width: var(--width_100);

          label {
            display: none;
          }
        }
      }
    }
    &.account_form {
      background-color: var(--white_color);
      .field_group {
        .form_control_group {
          color: var(--secondary_color);
          position: relative;

          textarea,
          input {
            border-radius: 0px;
            border-bottom-left-radius: 10px;
            border: 0;
            border-bottom: 1px solid var(--secondary_color);
            padding: var(--size_0p4em) var(--size_0p8em);
            color: var(--secondary_color);
            font-size: var(--size_1p0rem);
            &::placeholder {
              color: var(--line_color);
              font-size: var(--size_0p9rem);
              opacity: 0.85;
            }
            &.value_selector {
              padding: var(--size_0p4em) var(--size_0p2em);
            }
          }
          textarea {
            max-height: 100px;
            resize: none;
          }
          &.phone_selector {
            input#phone_number {
              padding-left: 55px;
            }
            input#deposit_number {
              padding-left: 55px;
            }
            input#withdraw_number {
              padding-left: 55px;
            }
          }
        }
        .other_actions {
          width: 100%;
          justify-content: flex-start;
          align-items: center;

          p {
            text-align: left;

            &.terms {
              flex: 1;
            }
          }
          .btn {
            border: 0;
            font-weight: 500;
            font-size: var(--size_0p95rem);
            color: var(--secondary_color);
          }
          .form_control_group {
            flex-basis: 16px;
            width: 16px;
            flex-shrink: 0;
            flex-grow: 0;
            position: relative;
            margin-right: var(--size_0p6em);
            label {
              display: flex;
              position: absolute;
              width: 16px;
              height: 16px;
              background-color: var(--white_color);
              cursor: pointer;
              border: 1px solid var(--secondary_color);
              border-radius: 2px;
              left: 0;
              &.checked {
                background-color: var(--secondary_color);
              }

              svg {
                width: var(--width_70);
                height: var(--width_70);
                path {
                  fill: var(--white_color);
                  stroke-width: 0px;
                }
              }
            }
            input {
              opacity: 0;
              pointer-events: none;
            }
          }
        }
        .btn.alt_btn {
          border: 0;
          color: var(--secondary_color);
          font-weight: 500;
          font-size: var(--size_0p95rem);
        }
        &.double {
          display: flex;
          justify-content: center;
          align-items: flex-start;
          gap: var(--size_1p0em);
          flex-direction: column;
        }
      }
      .submit_button {
        display: block;
        margin-left: auto;
        margin-top: var(--size_1p2em);
        border: 1px solid var(--secondary_color);
        color: var(--white_color);
        background-color: var(--secondary_color);
        padding: var(--size_0p4em) var(--size_4p0em);
        &:hover {
          color: var(--secondary_color);
          background-color: var(--white_color);
        }
      }
    }
  }

  .mother_container {
    .error_messages {
      width: 90%;
      margin: auto;
      left: 50%;
      translate: -50%;
    }
    .home {
      height: auto;
      height: auto;
      min-height: auto;
      min-height: auto;
      margin-bottom: auto;

      .hero {
        max-width: var(--width_85);

        padding-top: 8vh;
        padding-bottom: 60px;

        .hero_content {
          color: var(--white_color);
          max-width: var(--width_80);
          h1 {
            /* text-transform: uppercase; */
            font-size: var(--size_2p0rem);
            line-height: var(--size_1p4em);
            margin-bottom: var(--size_0p5em);
            font-weight: 300;
          }
          h4 {
            font-size: var(--size_0p95rem);
            margin-bottom: var(--size_2p0em);
          }
          .call_action {
            gap: var(--size_1p2em);
            span {
              flex-shrink: 0;
              position: relative;
              width: 200px;
              height: 8px;
              background-color: var(--white_color);
              border-radius: 5px;
            }
            button {
              background-color: var(--white_color);
              border: 1px solid var(--white_color);
              padding: var(--size_0p4em) var(--size_2p2em);
              color: var(--theme_color);
              &:hover {
                background-color: transparent;
                color: var(--white_color);
              }
            }
          }
        }
      }
      .slider_buttons {
        width: 20px;
        position: absolute;
        z-index: 2;
        right: 8%;
        top: 50%;
        /* translate: x y z ; */
        translate: 0 -50%;
        .buttons_bar {
          width: 10px;
          border-radius: 8px;
          gap: 20px;

          button {
            width: 8px;
            height: 20px;
            opacity: 0.4;
            border: 0;
            cursor: pointer;
            cursor: pointer;
            background-color: var(--white_color);
            border-radius: 8px;
            &.current {
              opacity: 1;
            }
          }
        }
      }

      &.auth_home {
        .hero {
          max-height: 100vh;
          overflow: hidden;

          .form_buttons {
            flex-basis: 20%;
            width: 20%;

            .controllers {
              position: absolute;
              right: 0;
              top: 50%;
              translate: 0 -50%;

              .btn {
                display: block;
                padding: var(--size_0p6em);
                background-color: transparent;
                width: 100px;
                border-top-left-radius: 20px;
                border-bottom-left-radius: 20px;
                border-top-right-radius: 0px;
                border-bottom-right-radius: 0px;
                border: 0;
                color: var(--white_color);
                position: relative;
                span {
                  pointer-events: none;
                }

                .span_top {
                  width: 20px;
                  height: 20px;
                  border-bottom-right-radius: 100%;
                  position: absolute;
                  right: 0px;
                  top: -20px;
                  background-color: transparent;

                  box-shadow: 6px 6px 0 3px transparent;

                  /* box-shadow: x-offset y-offset blur-radius spread-radius shadow-color */
                }
                .span_bottom {
                  width: 20px;
                  height: 20px;
                  border-top-right-radius: 100%;
                  position: absolute;
                  right: 0px;
                  bottom: -20px;
                  background-color: transparent;

                  box-shadow: 6px -6px 0 3px transparent;

                  /* box-shadow: x-offset y-offset blur-radius spread-radius shadow-color */
                }

                &.current {
                  background-color: var(--white_color);
                  color: var(--secondary_color);

                  .span_top {
                    box-shadow: 6px 6px 0 3px var(--white_color);
                  }
                  .span_bottom {
                    box-shadow: 6px -6px 0 3px var(--white_color);
                  }
                }
              }
            }
            &.subscribe {
              .controllers {
                .btn {
                  width: 120px;
                }
              }
            }
          }
          .form_content {
            flex-basis: 80%;
            width: 80%;
            .forms_container {
              width: var(--width_100);
              padding: var(--size_2p0em);
              padding-right: var(--width_10);
              position: relative;
              justify-content: flex-start;
              align-items: center;

              .data_form {
                width: var(--width_90);
                margin: auto;

                border: 1px solid var(--white_color);
                border-radius: 10px;
                .form_data {
                  width: var(--width_100);
                }
                &#login_form {
                  z-index: 6;
                  translate: 0 60%;
                }
                &#signup_form {
                  z-index: 2;
                  translate: 0 120%;
                }
                &.focus#login_form {
                  translate: 0 -120%;
                }
                &.focus#signup_form {
                  translate: 0 -35%;
                }
                /*
              
              &.focus#signup_form {
                translate: 0 0;
              } */

                &.recover_form {
                  width: var(--width_85);
                }
              }
              .linkerrs {
                position: absolute;
                top: 18%;
              }
            }

            &.recover_content {
              padding-top: 4em;
              height: 100vh;
              min-height: 100vh;
              overflow-y: scroll;
            }
          }
          &::before {
            width: 100vw;
            height: 100vh;
            z-index: 10;
            background-color: var(--white_color);
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }
    }

    .section {
      width: var(--width_100);

      .headline {
        max-width: var(--width_85);
        margin: auto;
        margin-bottom: var(--size_4p0em);

        h4 {
          text-transform: uppercase;
          font-weight: 400;
          font-size: var(--size_1p1rem);
          margin-bottom: var(--size_0p4em);
          text-align: center;
          color: var(--theme_color);
          width: var(--width_100);
        }
        h2 {
          width: var(--width_100);
          font-size: var(--size_2p0rem);

          &::before {
            width: var(--width_60);
            bottom: -26%;
          }
          &::after {
            content: "";
            height: 18px;
            width: 18px;
            bottom: calc(-26% - 7px);
          }
        }
      }

      .section_wrapper {
        max-width: var(--width_85);
        margin: auto;

        .section_col {
          .about_image {
            width: var(--width_80);
            min-height: 400px;
            background-image: url("/images/about_bg.jpg");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            border-radius: 4px;
            position: relative;
            .small_image {
              width: 200px;
              height: 180px;
              border-radius: 4px;
              border-top-left-radius: 0px;
              position: absolute;
              right: -100px;
              bottom: 0;
              background-image: url("/images/about_image2.jpg");
              background-position: center;
              background-size: cover;
              background-repeat: no-repeat;
              &::after {
                content: "";
                height: 6px;
                background-color: var(--white_color);
                width: 106px;
                position: absolute;
                left: -6px;
                top: -6px;
                border-top-left-radius: 8px;
                border-top-right-radius: 0px;
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 0px;
              }
              &::before {
                content: "";
                height: calc(100% + 6px);
                background-color: var(--white_color);
                width: 6px;
                position: absolute;
                left: -6px;
                top: -6px;
                border-radius: 4px;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
                border-bottom-left-radius: 0px;
                border-bottom-right-radius: 0px;
              }
            }
          }
          .about_content {
            width: var(--width_100);

            h4 {
              color: var(--theme_color);
              text-transform: uppercase;
              font-weight: 400;
              font-size: var(--size_1p0rem);
              margin-bottom: var(--size_0p6em);
            }
            h2 {
              color: var(--secondary_color);
              font-size: var(--size_2p0rem);
              text-align: justify;
              font-weight: 400;
              margin-bottom: var(--size_0p2em);
            }
            p {
              font-size: var(--size_1p0rem);
              font-weight: 400;
              margin-bottom: var(--size_1p2em);
              text-align: justify;
              color: var(--secondary_color);
            }
          }
          button {
            float: right;
          }
        }
      }
      &.vision {
        position: relative;
        z-index: 2;
        padding: 3em 0;
        .vision_bar {
          width: var(--width_80);
          position: relative;
          flex-direction: column;
          justify-content: center;
          justify-content: center;
          z-index: 2;
          bottom: auto;
          left: auto;
          margin: auto;
          translate: unset;

          gap: var(--size_2p0em);

          .card {
            background-color: var(--secondary_color);
            border-radius: 6px;
            border-color: var(--secondary_color);
            min-height: auto;
            flex: 1;
            .icon {
              margin-bottom: var(--size_1p2em);
              gap: var(--size_0p8em);

              h3 {
                text-transform: uppercase;
                font-size: var(--size_1p0rem);
                color: var(--theme_color);
                font-weight: 500;
              }
            }
          }
        }
      }
      &.about {
        .section_wrapper {
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: var(--width_5);
          margin-bottom: 15vh;
          padding-top: 6vh;
        }
      }
      &.not_found {
        height: 100vh;
        overflow: hidden;
        .section_wrapper {
          background-color: var(--sec_rgba_clr);
          border: 1px solid var(--btn_clr);
          padding: var(--size_2p2em);
          border-radius: 4px;
          h1 {
            font-size: var(--size_2p4rem);
            font-weight: 500;
            margin-bottom: var(--size_0p6em);
          }
          .red_buttons {
            gap: var(--size_1p0em);
            .btn {
              padding: var(--size_0p5em) var(--size_2p4em);
              border: 1px solid transparent;
              &:hover {
                background-color: var(--sec_text_clr);
                border: 1px solid var(--btn_clr);
                color: var(--btn_clr);
              }
              &:first-child {
                background-color: var(--btn_clr);
                color: var(--sec_text_clr);
                border: 1px solid var(--btn_clr);
                &:hover {
                  background-color: var(--sec_text_clr);
                  border: 1px solid var(--btn_clr);
                  color: var(--btn_clr);
                }
              }
            }
          }
        }
      }
      &.services {
        background-color: var(--secondary_color);
        padding: 6em 0;

        & > .main_buttons {
          margin-top: 8vh;
          float: unset;
        }

        .headline {
          margin-bottom: 20vh;
          h2 {
            color: var(--white_color);
          }
        }
        .section_wrapper {
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 0;
          .section_col {
            .service_card {
              position: relative;
              min-height: 400px;

              border-radius: 8px;

              .card_layer {
                background-color: var(--white_color);
                color: var(--secondary_color);
                position: absolute;
                border-radius: 8px;
                z-index: 5;
                bottom: 0;
                left: 0;
                transition: all 350ms ease;
                width: var(--width_100);
                overflow: hidden;
                height: 0;
                .layer_content {
                  padding: var(--size_2p2em) var(--size_1p6em);

                  h2 {
                    font-size: var(--size_1p1em);
                    margin-bottom: var(--size_1p0em);
                    text-align: center;
                    color: var(--secondary_color);
                  }
                  p {
                    text-align: justify;
                    font-size: var(--size_1p0rem);
                    font-weight: 400;
                    margin-bottom: var(--size_1p0em);
                    color: var(--secondary_color);
                  }
                  .main_buttons {
                    display: block;
                    margin: auto;
                    margin-top: var(--size_2p0em);
                    float: unset;
                    width: var(--width_70);
                    color: var(--secondary_color);
                    background-color: var(--white_color);
                    border-color: var(--secondary_color);
                    &:hover {
                      border-color: var(--theme_color);
                      color: var(--theme_color);
                    }
                  }
                }
              }
            }
            &.middle {
              margin-top: 20vh;
              margin-bottom: 20vh;
            }
          }
        }
      }

      &.investment {
        padding: 4em 0;

        & > .main_buttons {
          margin-top: 15vh;
        }

        .headline {
          margin-bottom: 10vh;
        }
        .section_wrapper {
          .section_col {
            .service_card {
              position: relative;
              min-height: 500px;
              border: 1px solid var(--secondary_color);
              border-radius: 8px;
              background-color: var(--white_color);

              .card_layer {
                background-color: var(--secondary_color);
                color: var(--white_color);
                position: absolute;
                border-radius: 8px;
                z-index: 2;
                bottom: 0;
                left: 0;
                transition: all 350ms ease;
                width: 0;
                height: var(--width_100);
              }

              .plan_name {
                width: var(--width_100);
                background-color: var(--secondary_color);
                position: relative;
                z-index: 5;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
                text-align: center;
                padding: var(--size_1p4em) var(--size_0p6em);
                color: var(--white_color);
                margin-bottom: var(--size_1p0em);
                border-bottom: 1px solid var(--white_color);

                .icon {
                  display: block;
                  margin: auto;
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  svg {
                    width: 45px;
                    height: 45px;
                    path {
                      fill: var(--theme_color);
                    }
                  }
                }
                h2 {
                  font-weight: 400;
                  font-size: var(--size_1p4rem);
                  font-family: var(--minor_family);
                  text-transform: uppercase;
                  margin-bottom: var(--size_0p8em);
                }
                h3 {
                  font-weight: 400;
                  font-size: var(--size_2p0rem);
                  font-family: var(--minor_family);
                  text-transform: uppercase;
                  margin-bottom: var(--size_0p2em);
                  color: var(--theme_color);
                }
                h4 {
                  font-weight: 400;
                  font-size: var(--size_1p2rem);
                }
              }
              .plan_details {
                position: relative;
                z-index: 4;
                padding: var(--size_0p5em) var(--size_1p0em);

                h3 {
                  font-weight: 500;
                  font-size: var(--size_1p2rem);
                  text-transform: uppercase;
                  margin-bottom: var(--size_0p4em);
                }
                ul {
                  width: var(--width_100);
                  padding-left: var(--size_0p5em);
                  li {
                    width: var(--width_100);
                    font-weight: 400;
                    font-size: var(--size_1p0rem);
                    gap: var(--size_0p6em);

                    &:not(:last-child) {
                      margin-bottom: var(--size_0p4em);
                    }
                    span {
                      flex-shrink: 0;
                      width: 8px;
                      height: 8px;
                      border-radius: 50%;
                      background-color: var(--secondary_color);
                    }
                  }
                }
              }
              .plan_button {
                position: absolute;
                right: 0;
                bottom: 0;
                z-index: 6;

                .plan_buttons {
                  width: 150px;
                  color: var(--secondary_color);
                  background-color: var(--white_color);
                  font-size: var(--size_1p2rem);
                  padding: var(--size_0p6em);
                  border-top-left-radius: 8px;
                  border-bottom-right-radius: 8px;
                  border-top: 2px solid var(--secondary_color);
                  border-left: 2px solid var(--secondary_color);
                  float: none;
                  text-align: center;
                  font-weight: 400;

                  &:hover {
                    border-top: 2px solid var(--white_color);
                    border-left: 2px solid var(--white_color);
                    color: var(--white_color);
                    background-color: var(--secondary_color);
                  }
                }
              }
              .interests {
                margin-top: var(--size_1p2em);
                padding-left: var(--size_1p2em);
                position: relative;
                z-index: 4;
                color: var(--theme_color);
                h3 {
                  font-weight: 400;
                  font-size: var(--size_2p0rem);
                }
                h4 {
                  font-weight: 300;
                  font-size: var(--size_1p0rem);
                }
              }
              &:hover {
                .card_layer {
                  width: var(--width_100);
                }
                .plan_details {
                  color: var(--white_color);

                  ul {
                    li {
                      span {
                        background-color: var(--white_color);
                      }
                    }
                  }
                }

                .interests {
                  color: var(--white_color);
                }
              }
            }
            &.middle {
              margin-top: 10vh;
            }
          }
        }
      }
      &.reasons {
        padding: 4em 0;

        .headline {
          margin-bottom: 10vh;
          h2 {
            &::after {
              border: 1px solid var(--white_color);
              background-color: var(--theme_color);
            }
          }
        }
        .section_wrapper {
          grid-template-columns: repeat(1, minmax(300px, 1fr));

          .section_col {
            margin-bottom: 30px;
            min-height: auto;
            flex-wrap: wrap;
            .col_left {
              height: 240px;
              width: 100%;
              flex-basis: 100%;
              position: relative;
              border-radius: 6px;
            }
            .col_right {
              flex-basis: 100%;
              width: 100%;
              margin-bottom: 10px;

              .icon {
                margin-bottom: var(--size_1p0em);
                svg {
                  width: 30px;
                  height: 30px;
                  flex-shrink: 0;
                  path {
                    fill: var(--theme_color);
                  }
                }
                h3 {
                  margin-left: var(--size_1p0em);
                  font-size: var(--size_1p4rem);
                  text-transform: uppercase;
                  color: var(--theme_color);
                  flex: 1;
                  padding-bottom: var(--size_0p3em);
                  border-bottom: 1px solid var(--theme_color);
                }
              }
              p {
                color: var(--secondary_color);
                font-weight: 400;
                font-size: var(--size_1p1rem);
                text-align: justify;
              }
            }
            &:nth-child(odd) {
              .col_left {
                order: 2;
              }
              .col_right {
                order: 1;
              }
            }
            &:nth-child(even) {
              .col_left {
                order: 2;
              }
              .col_right {
                order: 1;
              }
            }
          }
        }
      }
      &.testimonial {
        padding: 4em 0;

        & > .main_buttons {
          margin-top: 10vh;
        }

        .headline {
          margin-bottom: 10vh;
          h2 {
            &::after {
              border: 1px solid var(--white_color);
              background-color: var(--theme_color);
            }
          }
        }
        .section_wrapper {
          width: 100%;
          overflow-x: scroll;
          .slider_wrapper {
            width: 600%;
            margin-bottom: var(--size_2p4em);
            gap: 0.8%;

            .section_col {
              width: 16%;
              min-width: 16%;

              .col_content {
                height: 260px;
                overflow-y: scroll;
                .quote {
                  display: block;
                  float: left;
                  width: 30px;
                  margin-right: var(--size_0p6em);
                  svg {
                    height: 32px;
                    width: 32px;
                    path {
                      fill: var(--theme_color);
                      stroke-width: 0px;
                    }
                  }
                }
                p {
                  text-align: justify;
                  font-size: var(--size_0p95rem);
                  margin-bottom: var(--size_1p2em);
                  color: var(--white_color);
                }
                .names {
                  width: var(--width_100);
                  .stars {
                    margin-bottom: var(--size_0p4em);
                    img {
                      width: 100px;
                      object-fit: cover;
                    }
                    svg {
                      width: 100px;
                      path {
                        fill: var(--theme_color);
                        stroke-width: 0px;
                      }
                    }
                  }
                  h3 {
                    font-weight: 500;
                    text-transform: uppercase;
                    color: var(--theme_color);

                    font-size: var(--size_1p1rem);
                    margin-bottom: var(--size_0p4em);
                  }
                  h4 {
                    font-weight: 400;
                    color: var(--white_color);
                    font-size: var(--size_1p0rem);
                  }
                }
              }
            }
          }
        }
      }

      &.contact {
        background-color: var(--secondary_color);
        padding: 6em 0;

        .headline {
          margin-bottom: 10vh;
          h2 {
            color: var(--white_color);
          }
        }
        .section_wrapper {
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: var(--width_5);
          .section_col {
            button {
              float: none;
            }
            .col_content {
              width: var(--width_100);
              gap: 4%;
              flex-wrap: wrap;
              row-gap: 26px;
              .box {
                flex-basis: 48%;
                width: 48%;

                border-radius: 8px;
                padding: 15px;
                .icon {
                  margin: auto;
                  width: 35px;
                  height: 35px;
                  border-radius: 50%;
                  background-color: var(--white_color);
                  margin-bottom: var(--size_0p6em);
                  svg {
                    width: var(--width_60);
                    height: var(--width_60);
                    path {
                      fill: var(--secondary_color);
                    }
                  }
                }
                h3,
                h4 {
                  width: var(--width_100);
                  text-align: center;
                  color: var(--white_color);
                  font-weight: 400;
                }
                h3 {
                  font-size: var(--size_1p4rem);
                }
                .socials {
                  gap: 20px;
                  .social_btn {
                    height: 24px;
                    width: 24px;
                  }
                }
              }
              h2 {
                font-weight: 400;
                font-size: var(--size_1p4rem);
                text-transform: uppercase;
                color: var(--white_color);
                margin-bottom: var(--size_0p6em);
              }
              p {
                width: var(--width_100);
                text-align: justify;
                color: var(--white_color);
                margin-bottom: var(--size_0p6em);
              }
            }
            &.contact {
              grid-column: auto;
            }
            &.reach_us {
              grid-column: auto;
              grid-row: auto;
            }
          }
        }
      }
      &.faqs {
        padding: 4em 0;

        .headline {
          margin-bottom: 10vh;
          h2 {
            &::after {
              border: 1px solid var(--white_color);
              background-color: var(--theme_color);
            }
          }
        }
        .section_wrapper {
          gap: 0;
          .section_col {
            .question_image {
              display: none;
            }
            .col_content {
              width: var(--width_100);
              .question_container {
                width: var(--width_100);
                border: 1px solid var(--secondary_color);
                border-radius: 4px;
                margin-bottom: var(--size_1p0em);
                .question {
                  width: var(--width_100);
                  background-color: var(--secondary_color);
                  border: 1px solid var(--secondary_color);
                  padding: var(--size_0p4em) var(--size_0p8em);

                  cursor: pointer;
                  color: var(--white_color);

                  span {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    flex-shrink: 0;
                    transition: all 300ms ease-in-out;
                    svg {
                      height: 90%;
                      width: 90%;
                      path {
                        fill: var(--white_color);
                      }
                    }
                    &.rotate {
                      rotate: -180deg;
                    }
                  }
                }

                .answer {
                  width: var(--width_100);
                  border-bottom-left-radius: 4px;
                  border-bottom-right-radius: 4px;
                  transition: all 300ms ease-in-out;
                  display: grid;
                  grid-template-rows: 0fr;
                  .answer_content {
                    width: var(--width_100);
                    overflow: hidden;
                    p {
                      font-weight: 400;
                      font-size: var(--size_1p0rem);
                      padding: var(--size_0p5em);
                    }
                  }
                  &.show {
                    grid-template-rows: 1fr;
                  }
                }
              }
            }

            &.col_left {
              flex: unset;
            }
            &.col_right {
              flex-basis: 100%;
              width: 100%;
            }
          }
        }
      }
      .slider_btns {
        max-width: var(--width_80);
        margin: auto;
        gap: var(--size_1p2em);
        .btn {
          width: 18px;
          height: 18px;
          background-color: var(--secondary_color);
          &.current,
          &:hover {
            background-color: var(--theme_color);
          }
        }
        &.larger {
          display: none;
        }
        &.smaller {
          display: flex;
        }
      }
    }

    .bridge {
      width: var(--width_100);
      min-height: 300px;

      .bridge_content {
        width: var(--width_85);
        max-width: var(--width_85);
        flex-wrap: wrap;

        .left {
          flex-basis: 100%;
          width: var(--width_100);
          margin-bottom: 10px;
        }
        h2 {
          font-size: var(--size_2p0rem);

          font-weight: 400;
          text-align: center;
          width: var(--width_100);
        }
        p {
          font-size: var(--size_0p95rem);
          font-weight: 400;
          text-align: center;
          margin-bottom: 20px;
        }
        .main_buttons {
          float: unset;
          margin-top: 1em;
          display: block;
          margin: auto;
        }
      }
    }
  }

  .dashboard_container {
    z-index: 10;
    .dashboard_menu {
      display: none;
      
      
    }
    .main_dashboard {
      width: var(--width_100);
      background-image: url("/images/bg_img_1.jpg");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: scroll;

      position: relative;

      &::before {
        content: "";
        background-color: var(--secondary_color_rgba);
        position: absolute;
        top: 0;
        z-index: 1;
        left: 0;
        width: var(--width_100);
        height: var(--width_100);
        opacity: 0.15;
      }
      &::after {
        content: "";
        background-color: var(--theme_color_rgba);
        position: absolute;
        top: 0;
        z-index: 2;
        left: 0;
        width: var(--width_100);
        height: var(--width_100);
        opacity: 0.15;
      }

      .dashboard {
        
        .dash_top {
          
         
          .top_logo {
            
            button {
              &.large_toggle{
                display: none;
              }
              &.mobile_toggle {
                display: block;
              }
            }

            h1 {
              font-size: var(--size_1p2rem);
              color: var(--white_color);
              text-transform: uppercase;
            }
            &.forms {
              button {
                width: auto;
                height: unset;
                gap: 10px;
                svg {
                  width: 16px;
                  height: 16px;
                  path {
                    fill: var(--white_color);
                  }
                }
              }
            }
          }
          .right {
            .searchbar {
              position: relative;
              input {
                position: absolute;
                top: 50%;
                left: -200px;
                min-width: 180px;
                translate: 0 -50%;
                transition: 300ms ease-in-out;
                background-color: transparent;
                border: 1px solid var(--white_color_rgba);
                font-size: var(--size_0p9rem);
                color: var(--white_color);
                outline: none;
                padding: var(--size_0p3em) var(--size_0p8em);
                border-radius: 4px;
                opacity: 0;
                pointer-events: none;

                &::placeholder {
                  opacity: 0.6;
                  color: var(--white_color_rgba);
                }
                &.show {
                  opacity: 1;
                  pointer-events: initial;
                  left: -190px;
                }
              }
              button {
                background-color: var(--secondary_color);
                cursor: pointer;
                outline: none;
                border: 0;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                svg {
                  width: var(--width_80);
                  height: var(--width_80);

                  path {
                    fill: var(--white_color);
                  }
                }

                &#toggle_search {
                  position: relative;
                  z-index: 5;
                }
                &#search_button {
                  position: absolute;
                  top: 0;
                  right: 0;
                  z-index: 1;
                }
              }
            }

            .currency_controller {
              position: relative;
              min-width: 50px;
              .currency_btn {
                border-radius: 4px;
                font-size: var(--size_0p9rem);
                border: 1px solid var(--white_color);
                cursor: pointer;
                padding: 4px 8px;
                background-color: transparent;
                color: var(--theme_color);
                text-align: center;
                outline: none;
              }
              .custom_selector {
                position: absolute;
                left: -100px;
                top: 140%;
                opacity: 0;
                z-index: 10;
                transition: 350ms ease-in-out;
                pointer-events: none;
                background-color: var(--secondary_color);
                max-height: 200px;
                overflow-y: scroll;
                max-width: 140px;
                border: 1px solid var(--white_color_rgba2);
                border-radius: 4px;
                padding: 4px;
                padding-top: 0;

                .option_buttons {
                  width: var(--width_100);
                }

                .option_btn {
                  width: var(--width_100);
                  gap: 10px;
                  padding: 4px 8px;
                  transition: 300ms ease-in-out;
                  border-radius: 2px;
                  &:hover {
                    background-color: var(--white_color_rgba2);
                    span {
                      color: var(--theme_color);
                    }
                  }
                  img {
                    width: 20px;
                    object-fit: cover;
                    flex-shrink: 0;
                  }
                  span {
                    flex: 1;
                    text-align: left;
                    color: var(--white_color);
                    font-weight: 400;
                    font-size: var(--size_0p85rem);
                  }
                }

                .search_option {
                  width: var(--width_100);
                  background-color: var(--secondary_color);
                  margin-bottom: 10px;
                  position: sticky;
                  z-index: 4;
                  left: 0;
                  top: 0;
                  input {
                    border: 0;
                    border-bottom: 0.6px solid var(--white_color_rgba);
                    color: var(--white_color);
                    border-radius: 4px;
                    background-color: transparent;
                    font-size: var(--size_0p85rem);
                    cursor: auto;
                    padding: 4px 8px;

                    font-weight: 300;
                    outline: none;
                  }
                }
                &.show {
                  opacity: 1;
                  top: 115%;
                  pointer-events: initial;
                }
              }
            }
            .notification {
              position: relative;
              min-width: 40px;
              button {
                width: 30px;
                height: 30px;
                cursor: pointer;
                background-color: transparent;
                color: var(--theme_color);
                text-align: center;
                outline: none;
                border: 0;
                position: relative;
                span {
                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                  font-size: var(--size_0p75rem);
                  z-index: 2;
                  text-align: center;
                  background-color: var(--theme_color);
                  color: var(--white_color);
                  position: absolute;
                  font-weight: 500;
                  top: -6px;
                  right: -6px;
                }
                svg {
                  position: relative;
                  width: var(--width_100);
                  height: var(--width_100);
                  path {
                    fill: var(--white_color);
                  }
                }
              }
              .notification_pallete {
                position: absolute;
                left: -180px;
                top: 140%;
                opacity: 0;
                transition: 350ms ease-in-out;
                pointer-events: none;
                background-color: var(--secondary_color);
                max-height: 200px;
                overflow-y: scroll;
                min-width: 200px;
                max-width: 300px;
                border: 1px solid var(--white_color_rgba2);
                border-radius: 4px;
                padding: 4px;

                p {
                  width: var(--width_100);
                  text-align: justify;
                  font-size: var(--size_0p85rem);
                  color: var(--white_color);
                  font-weight: 300;
                }

                &.show {
                  top: 115%;
                  opacity: 1;
                  pointer-events: initial;
                }
              }
            }
            .profile_preview {
              position: relative;
              .user_image_btn {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                border: 1px solid var(--white_color);
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                cursor: pointer;
                outline: none;
              }
              .profile_menu {
                position: absolute;
                min-width: 260px;
                max-width: 300px;
                max-height: 450px;
                overflow-y: scroll;
                right: 0;
                top: 140%;
                opacity: 0;
                transition: 350ms ease-in-out;
                pointer-events: none;
                border: 1px solid var(--white_color_rgba2);
                background-color: var(--secondary_color);
                border-radius: 8px;
                padding: 1em;
                .user_image {
                  display: block;
                  margin: auto;
                  width: 80px;
                  height: 80px;
                  border-radius: 50%;
                  background-size: cover;
                  background-color: var(--white_color);
                  background-position: center;
                  background-repeat: no-repeat;
                  margin-bottom: var(--size_1p0em);
                }

                .user_data {
                  width: var(--width_100);
                  color: var(--white_color);
                  margin-bottom: var(--size_1p0em);
                  padding-bottom: var(--size_0p4em);
                  border-bottom: 1px solid var(--white_color_rgba);
                  h2 {
                    color: var(--theme_color);
                    width: var(--width_100);

                    margin-bottom: var(--size_1p0em);
                    padding-bottom: var(--size_0p3em);
                    border-bottom: 1px solid var(--white_color_rgba);
                    text-transform: uppercase;
                    font-size: var(--size_1p0rem);
                  }
                  h3 {
                    width: var(--width_100);
                    margin-bottom: var(--size_0p5em);
                    font-size: var(--size_0p9rem);
                    font-weight: 400;
                    text-align: center;
                    &.email {
                      font-style: italic;
                      color: var(--theme_color);
                    }
                  }
                }
                .account_data {
                  margin-bottom: var(--size_1p0em);
                  width: var(--width_100);
                  padding-bottom: var(--size_0p8em);
                  border-bottom: 1px solid var(--white_color_rgba);
                  .code {
                    width: var(--width_100);
                    margin-bottom: var(--size_1p0em);
                    .code_control {
                      width: var(--width_100);
                      color: var(--white_color);
                      margin-bottom: var(--size_0p6em);
                      h3 {
                        font-size: var(--size_0p95rem);
                      }
                      button {
                        width: 20px;
                        height: 20px;
                        cursor: pointer;
                        outline: none;
                        border: none;
                        background-color: transparent;
                        position: relative;
                        .show_copy {
                          position: absolute;
                          color: var(--theme_color);
                          background-color: var(--white_color);
                          padding: 4px;
                          border-radius: 4px;
                          font-size: 10px;
                          text-align: center;
                          top: -10px;
                          left: -65px;
                          min-width: 60px;
                          opacity: 0;
                          pointer-events: none;
                          transition: 300ms ease-in-out;
                          &.show {
                            opacity: 1;
                          }
                        }
                        svg {
                          width: var(--width_100);
                          height: var(--width_100);
                          path {
                            fill: var(--theme_color);
                          }
                        }
                      }
                    }
                    input {
                      width: var(--width_100);
                      text-align: left;
                      background-color: transparent;
                      pointer-events: none;
                      font-size: var(--size_0p9rem);
                      color: var(--theme_color);
                      border: 0;
                      font-weight: 300;
                      outline: none;
                      font-style: italic;
                    }
                  }
                }
                .profile_buttons {
                  .btn {
                    color: var(--white_color);
                    font-weight: 400;
                    font-size: var(--size_0p95rem);
                    padding: var(--size_0p4em) var(--size_0p8em);
                    border-radius: 4px;
                    &:hover {
                      background-color: var(--white_color);
                      color: var(--theme_color);
                    }
                  }
                }
                &.show {
                  opacity: 1;
                  top: 115%;
                  pointer-events: initial;
                }
              }
            }
          }
        }
        .dashboard_preview {
          
          .preview_box {
            border: 1px dotted var(--white_color_rgba2);
            background-color: var(--secondary_color);
            border-radius: 8px;
            padding: var(--size_0p6em);
            position: relative;
            .title_bar {
              width: var(--width_100);
              margin-bottom: var(--size_0p5em);
              padding-bottom: var(--size_0p4em);
              color: var(--white_color);
              border-bottom: 1px solid var(--white_color_rgba);
              h3 {
                text-transform: uppercase;
                font-weight: 500;
                font-size: var(--size_0p9rem);
                color: var(--theme_color);
              }
              .btn {
                width: 20px;
                height: 20px;
                cursor: pointer;
                svg {
                  width: var(--width_100);
                  height: var(--width_100);
                  path {
                    fill: var(--white_color);
                  }
                }
              }
            }
            .card_menu {
              position: absolute;
              right: 10px;
              top: 72px;
              z-index: 5;
              max-width: 140px;
              opacity: 0;
              pointer-events: none;
              transition: 350ms ease-in-out;
              background-color: var(--secondary_color);
              border: 1px solid var(--white_color_rgba2);
              border-radius: 4px;
              padding: var(--size_0p4em);
              button {
                width: var(--width_100);
                cursor: pointer;
                display: block;
                background-color: transparent;
                font-size: var(--size_0p85rem);
                transition: 300ms ease-in-out;
                outline: none;
                border: 0;
                text-align: left;
                padding: var(--size_0p2em);
                margin-bottom: var(--size_0p2em);
                color: var(--white_color);
                border-radius: 2px;
                &:hover {
                  color: var(--theme_color);
                  background-color: var(--white_color_rgba2);
                }
              }
              &.show {
                top: 36px;
                opacity: 1;
                pointer-events: initial;
              }
            }

            .pair {
              margin-bottom: var(--size_0p2em);
              width: var(--width_100);
              h2 {
                flex: 1;
                text-transform: uppercase;
                color: var(--white_color);
                font-size: var(--size_0p85rem);
                font-weight: 400;
                span {
                  text-transform: none;
                  font-weight: 300;
                  margin-left: var(--size_0p4em);
                  opacity: 1;
                }
              }
              &.withdraw {
                h2 {
                  flex: 2;
                }
                h2.lesser {
                  flex: 1;
                }
              }
            }
          }
        }

        
        
      }
    }
  }
}

@media (max-width: 650px) {
  .mobile_nav {
    display: block;
  }

  .mother_container {
    .home {
      &.auth_home {
        .hero {
          max-height: unset;
          overflow: hidden;

          .form_buttons {
            width: var(--width_100);
            position: absolute;
            grid-column: unset;
            height: auto;
            top: 0;
            left: 50%;
            translate: -50%;
            z-index: 8;

            .controllers {
              position: relative;
              right: auto;
              top: auto;
              translate: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: var(--size_0p8em);
              .btn {
                display: block;
                padding: var(--size_0p6em);
                background-color: transparent;
                width: 100px;
                border-top-left-radius: 15px;
                border-bottom-left-radius: 0px;
                border-top-right-radius: 15px;
                border-bottom-right-radius: 0px;
                border: 0;
                color: var(--white_color);
                font-size: var(--size_0p95rem);
                position: relative;
                span {
                  pointer-events: none;
                }

                .span_top {
                  width: 300px;
                  height: 15px;
                  border-bottom-right-radius: 15px;
                  position: absolute;
                  right: unset;
                  left: -300px;
                  top: unset;
                  bottom: 0;
                  background-color: transparent;

                  box-shadow: 6px 6px 0 3px transparent;

                  /* box-shadow: x-offset y-offset blur-radius spread-radius shadow-color */
                }
                .span_bottom {
                  width: 300px;
                  height: 15px;
                  border-top-right-radius: 0;
                  border-bottom-left-radius: 15px;
                  position: absolute;
                  right: -300px;
                  bottom: 0;
                  background-color: transparent;

                  box-shadow: -6px 6px 0 3px transparent;

                  /* box-shadow: x-offset y-offset blur-radius spread-radius shadow-color */
                }

                &.current {
                  background-color: var(--white_color);
                  color: var(--secondary_color);

                  .span_top {
                    box-shadow: 6px 6px 0 3px var(--white_color);
                  }
                  .span_bottom {
                    box-shadow: -6px 6px 0 3px var(--white_color);
                  }
                }
              }
            }
            &.subscribe {
              .controllers {
                .btn {
                  width: 120px;
                }
              }
            }
          }
          .form_content {
            flex-basis: 100%;
            width: 100%;
            position: relative;
            .forms_container {
              width: var(--width_100);
              padding: 0;

              position: relative;
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              flex-wrap: nowrap;

              .data_form {
                width: var(--width_100);
                min-width: var(--width_100);
                margin: auto;
                border: 1px solid var(--white_color);
                border-radius: 10px;
                padding: 30px;
                .form_data {
                  width: var(--width_100);
                }
                &#login_form {
                  z-index: 6;
                  translate: 0 4%;
                }
                &#signup_form {
                  z-index: 2;
                  translate: 0 6%;
                  margin-bottom: 6%;
                }
                &.focus#login_form {
                  translate: -120% 0;
                }
                &.focus#signup_form {
                  translate: -100% 6%;
                }
                /*
              
              &.focus#signup_form {
                translate: 0 0;
              } */

                &.recover_form {
                  width: var(--width_85);
                }
              }
              .linkerrs {
                position: absolute;
                top: 11%;
              }
            }
            &.recover_content {
              padding-top: 4em;
              min-height: unset;
              padding-bottom: 2em;

              .forms_container {
                width: var(--width_100);
                padding-right: unset;
                position: relative;
                justify-content: center;
                align-items: center;
              }
            }
          }
          &::before {
            width: 100vw;
            height: 100vh;
            z-index: 10;
            background-color: var(--white_color);
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }
    }

    .section {
      width: var(--width_100);

      .headline {
        max-width: var(--width_85);
        margin: auto;
        margin-bottom: var(--size_4p0em);

        h4 {
          text-transform: uppercase;
          font-weight: 400;
          font-size: var(--size_1p1rem);
          margin-bottom: var(--size_0p4em);
          text-align: center;
          color: var(--theme_color);
          width: var(--width_100);
        }
        h2 {
          width: var(--width_100);
          font-size: var(--size_2p0rem);

          &::before {
            width: var(--width_60);
            bottom: -26%;
          }
          &::after {
            content: "";
            height: 18px;
            width: 18px;
            bottom: calc(-26% - 7px);
          }
        }
      }

      .section_wrapper {
        max-width: var(--width_85);
        margin: auto;

        .section_col {
          .about_image {
            width: var(--width_80);
            min-height: 400px;
            background-image: url("/images/about_bg.jpg");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            border-radius: 4px;
            position: relative;
            .small_image {
              width: 200px;
              height: 180px;
              border-radius: 4px;
              border-top-left-radius: 0px;
              position: absolute;
              right: -100px;
              bottom: 0;
              background-image: url("/images/about_image2.jpg");
              background-position: center;
              background-size: cover;
              background-repeat: no-repeat;
              &::after {
                content: "";
                height: 6px;
                background-color: var(--white_color);
                width: 106px;
                position: absolute;
                left: -6px;
                top: -6px;
                border-top-left-radius: 8px;
                border-top-right-radius: 0px;
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 0px;
              }
              &::before {
                content: "";
                height: calc(100% + 6px);
                background-color: var(--white_color);
                width: 6px;
                position: absolute;
                left: -6px;
                top: -6px;
                border-radius: 4px;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
                border-bottom-left-radius: 0px;
                border-bottom-right-radius: 0px;
              }
            }
          }
          .about_content {
            width: var(--width_100);

            h4 {
              color: var(--theme_color);
              text-transform: uppercase;
              font-weight: 400;
              font-size: var(--size_1p0rem);
              margin-bottom: var(--size_0p6em);
            }
            h2 {
              color: var(--secondary_color);
              font-size: var(--size_2p0rem);
              text-align: justify;
              font-weight: 400;
              margin-bottom: var(--size_0p2em);
            }
            p {
              font-size: var(--size_1p0rem);
              font-weight: 400;
              margin-bottom: var(--size_1p2em);
              text-align: justify;
              color: var(--secondary_color);
            }
          }
          button {
            float: right;
          }
        }
      }
      &.vision {
        position: relative;
        z-index: 2;
        padding: 3em 0;
        .vision_bar {
          width: var(--width_80);
          position: relative;
          flex-direction: column;
          justify-content: center;
          justify-content: center;
          z-index: 2;
          bottom: auto;
          left: auto;
          margin: auto;
          translate: unset;

          gap: var(--size_2p0em);

          .card {
            background-color: var(--secondary_color);
            border-radius: 6px;
            border-color: var(--secondary_color);
            min-height: auto;
            flex: 1;
            .icon {
              margin-bottom: var(--size_1p2em);
              gap: var(--size_0p8em);

              h3 {
                text-transform: uppercase;
                font-size: var(--size_1p0rem);
                color: var(--theme_color);
                font-weight: 500;
              }
            }
          }
        }
      }
      &.about {
        .section_wrapper {
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: var(--width_5);
          margin-bottom: 15vh;
          padding-top: 6vh;
        }
      }
      &.not_found {
        height: 100vh;
        overflow: hidden;
        .section_wrapper {
          background-color: var(--sec_rgba_clr);
          border: 1px solid var(--btn_clr);
          padding: var(--size_2p2em);
          border-radius: 4px;
          h1 {
            font-size: var(--size_2p4rem);
            font-weight: 500;
            margin-bottom: var(--size_0p6em);
          }
          .red_buttons {
            gap: var(--size_1p0em);
            .btn {
              padding: var(--size_0p5em) var(--size_2p4em);
              border: 1px solid transparent;
              &:hover {
                background-color: var(--sec_text_clr);
                border: 1px solid var(--btn_clr);
                color: var(--btn_clr);
              }
              &:first-child {
                background-color: var(--btn_clr);
                color: var(--sec_text_clr);
                border: 1px solid var(--btn_clr);
                &:hover {
                  background-color: var(--sec_text_clr);
                  border: 1px solid var(--btn_clr);
                  color: var(--btn_clr);
                }
              }
            }
          }
        }
      }
      &.services {
        background-color: var(--secondary_color);
        padding: 6em 0;

        & > .main_buttons {
          margin-top: 8vh;
          float: unset;
        }

        .headline {
          margin-bottom: 20vh;
          h2 {
            color: var(--white_color);
          }
        }
        .section_wrapper {
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 0;
          .section_col {
            .service_card {
              position: relative;
              min-height: 400px;

              border-radius: 8px;

              .card_layer {
                background-color: var(--white_color);
                color: var(--secondary_color);
                position: absolute;
                border-radius: 8px;
                z-index: 5;
                bottom: 0;
                left: 0;
                transition: all 350ms ease;
                width: var(--width_100);
                overflow: hidden;
                height: 0;
                .layer_content {
                  padding: var(--size_2p2em) var(--size_1p6em);

                  h2 {
                    font-size: var(--size_1p1em);
                    margin-bottom: var(--size_1p0em);
                    text-align: center;
                    color: var(--secondary_color);
                  }
                  p {
                    text-align: justify;
                    font-size: var(--size_1p0rem);
                    font-weight: 400;
                    margin-bottom: var(--size_1p0em);
                    color: var(--secondary_color);
                  }
                  .main_buttons {
                    display: block;
                    margin: auto;
                    margin-top: var(--size_2p0em);
                    float: unset;
                    width: var(--width_70);
                    color: var(--secondary_color);
                    background-color: var(--white_color);
                    border-color: var(--secondary_color);
                    &:hover {
                      border-color: var(--theme_color);
                      color: var(--theme_color);
                    }
                  }
                }
              }
            }
            &.middle {
              margin-top: 20vh;
              margin-bottom: 20vh;
            }
          }
        }
      }

      &.investment {
        padding: 4em 0;

        & > .main_buttons {
          margin-top: 15vh;
        }

        .headline {
          margin-bottom: 10vh;
        }
        .section_wrapper {
          .section_col {
            .service_card {
              position: relative;
              min-height: 500px;
              border: 1px solid var(--secondary_color);
              border-radius: 8px;
              background-color: var(--white_color);

              .card_layer {
                background-color: var(--secondary_color);
                color: var(--white_color);
                position: absolute;
                border-radius: 8px;
                z-index: 2;
                bottom: 0;
                left: 0;
                transition: all 350ms ease;
                width: 0;
                height: var(--width_100);
              }

              .plan_name {
                width: var(--width_100);
                background-color: var(--secondary_color);
                position: relative;
                z-index: 5;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
                text-align: center;
                padding: var(--size_1p4em) var(--size_0p6em);
                color: var(--white_color);
                margin-bottom: var(--size_1p0em);
                border-bottom: 1px solid var(--white_color);

                .icon {
                  display: block;
                  margin: auto;
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  svg {
                    width: 45px;
                    height: 45px;
                    path {
                      fill: var(--theme_color);
                    }
                  }
                }
                h2 {
                  font-weight: 400;
                  font-size: var(--size_1p4rem);
                  font-family: var(--minor_family);
                  text-transform: uppercase;
                  margin-bottom: var(--size_0p8em);
                }
                h3 {
                  font-weight: 400;
                  font-size: var(--size_2p0rem);
                  font-family: var(--minor_family);
                  text-transform: uppercase;
                  margin-bottom: var(--size_0p2em);
                  color: var(--theme_color);
                }
                h4 {
                  font-weight: 400;
                  font-size: var(--size_1p2rem);
                }
              }
              .plan_details {
                position: relative;
                z-index: 4;
                padding: var(--size_0p5em) var(--size_1p0em);

                h3 {
                  font-weight: 500;
                  font-size: var(--size_1p2rem);
                  text-transform: uppercase;
                  margin-bottom: var(--size_0p4em);
                }
                ul {
                  width: var(--width_100);
                  padding-left: var(--size_0p5em);
                  li {
                    width: var(--width_100);
                    font-weight: 400;
                    font-size: var(--size_1p0rem);
                    gap: var(--size_0p6em);

                    &:not(:last-child) {
                      margin-bottom: var(--size_0p4em);
                    }
                    span {
                      flex-shrink: 0;
                      width: 8px;
                      height: 8px;
                      border-radius: 50%;
                      background-color: var(--secondary_color);
                    }
                  }
                }
              }
              .plan_button {
                position: absolute;
                right: 0;
                bottom: 0;
                z-index: 6;

                .plan_buttons {
                  width: 150px;
                  color: var(--secondary_color);
                  background-color: var(--white_color);
                  font-size: var(--size_1p2rem);
                  padding: var(--size_0p6em);
                  border-top-left-radius: 8px;
                  border-bottom-right-radius: 8px;
                  border-top: 2px solid var(--secondary_color);
                  border-left: 2px solid var(--secondary_color);
                  float: none;
                  text-align: center;
                  font-weight: 400;

                  &:hover {
                    border-top: 2px solid var(--white_color);
                    border-left: 2px solid var(--white_color);
                    color: var(--white_color);
                    background-color: var(--secondary_color);
                  }
                }
              }
              .interests {
                margin-top: var(--size_1p2em);
                padding-left: var(--size_1p2em);
                position: relative;
                z-index: 4;
                color: var(--theme_color);
                h3 {
                  font-weight: 400;
                  font-size: var(--size_2p0rem);
                }
                h4 {
                  font-weight: 300;
                  font-size: var(--size_1p0rem);
                }
              }
              &:hover {
                .card_layer {
                  width: var(--width_100);
                }
                .plan_details {
                  color: var(--white_color);

                  ul {
                    li {
                      span {
                        background-color: var(--white_color);
                      }
                    }
                  }
                }

                .interests {
                  color: var(--white_color);
                }
              }
            }
            &.middle {
              margin-top: 10vh;
            }
          }
        }
      }
      &.reasons {
        padding: 4em 0;

        .headline {
          margin-bottom: 10vh;
          h2 {
            &::after {
              border: 1px solid var(--white_color);
              background-color: var(--theme_color);
            }
          }
        }
        .section_wrapper {
          grid-template-columns: repeat(1, minmax(300px, 1fr));

          .section_col {
            margin-bottom: 30px;
            min-height: auto;
            flex-wrap: wrap;
            .col_left {
              height: 240px;
              width: 100%;
              flex-basis: 100%;
              position: relative;
              border-radius: 6px;
            }
            .col_right {
              flex-basis: 100%;
              width: 100%;
              margin-bottom: 10px;

              .icon {
                margin-bottom: var(--size_1p0em);
                svg {
                  width: 30px;
                  height: 30px;
                  flex-shrink: 0;
                  path {
                    fill: var(--theme_color);
                  }
                }
                h3 {
                  margin-left: var(--size_1p0em);
                  font-size: var(--size_1p4rem);
                  text-transform: uppercase;
                  color: var(--theme_color);
                  flex: 1;
                  padding-bottom: var(--size_0p3em);
                  border-bottom: 1px solid var(--theme_color);
                }
              }
              p {
                color: var(--secondary_color);
                font-weight: 400;
                font-size: var(--size_1p1rem);
                text-align: justify;
              }
            }
            &:nth-child(odd) {
              .col_left {
                order: 2;
              }
              .col_right {
                order: 1;
              }
            }
            &:nth-child(even) {
              .col_left {
                order: 2;
              }
              .col_right {
                order: 1;
              }
            }
          }
        }
      }
      &.testimonial {
        padding: 4em 0;

        & > .main_buttons {
          margin-top: 10vh;
        }

        .headline {
          margin-bottom: 10vh;
          h2 {
            &::after {
              border: 1px solid var(--white_color);
              background-color: var(--theme_color);
            }
          }
        }
        .section_wrapper {
          width: 100%;
          overflow-x: scroll;
          .slider_wrapper {
            width: 600%;
            margin-bottom: var(--size_2p4em);
            gap: 0.8%;

            .section_col {
              width: 16%;
              min-width: 16%;

              .col_content {
                height: 260px;
                overflow-y: scroll;
                .quote {
                  display: block;
                  float: left;
                  width: 30px;
                  margin-right: var(--size_0p6em);
                  svg {
                    height: 32px;
                    width: 32px;
                    path {
                      fill: var(--theme_color);
                      stroke-width: 0px;
                    }
                  }
                }
                p {
                  text-align: justify;
                  font-size: var(--size_0p95rem);
                  margin-bottom: var(--size_1p2em);
                  color: var(--white_color);
                }
                .names {
                  width: var(--width_100);
                  .stars {
                    margin-bottom: var(--size_0p4em);
                    img {
                      width: 100px;
                      object-fit: cover;
                    }
                    svg {
                      width: 100px;
                      path {
                        fill: var(--theme_color);
                        stroke-width: 0px;
                      }
                    }
                  }
                  h3 {
                    font-weight: 500;
                    text-transform: uppercase;
                    color: var(--theme_color);

                    font-size: var(--size_1p1rem);
                    margin-bottom: var(--size_0p4em);
                  }
                  h4 {
                    font-weight: 400;
                    color: var(--white_color);
                    font-size: var(--size_1p0rem);
                  }
                }
              }
            }
          }
        }
      }

      &.contact {
        background-color: var(--secondary_color);
        padding: 6em 0;

        .headline {
          margin-bottom: 10vh;
          h2 {
            color: var(--white_color);
          }
        }
        .section_wrapper {
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: var(--width_5);
          .section_col {
            button {
              float: none;
            }
            .col_content {
              width: var(--width_100);
              gap: 4%;
              flex-wrap: wrap;
              row-gap: 26px;
              .box {
                flex-basis: 48%;
                width: 48%;

                border-radius: 8px;
                padding: 15px;
                .icon {
                  margin: auto;
                  width: 35px;
                  height: 35px;
                  border-radius: 50%;
                  background-color: var(--white_color);
                  margin-bottom: var(--size_0p6em);
                  svg {
                    width: var(--width_60);
                    height: var(--width_60);
                    path {
                      fill: var(--secondary_color);
                    }
                  }
                }
                h3,
                h4 {
                  width: var(--width_100);
                  text-align: center;
                  color: var(--white_color);
                  font-weight: 400;
                }
                h3 {
                  font-size: var(--size_1p4rem);
                }
                .socials {
                  gap: 20px;
                  .social_btn {
                    height: 24px;
                    width: 24px;
                  }
                }
              }
              h2 {
                font-weight: 400;
                font-size: var(--size_1p4rem);
                text-transform: uppercase;
                color: var(--white_color);
                margin-bottom: var(--size_0p6em);
              }
              p {
                width: var(--width_100);
                text-align: justify;
                color: var(--white_color);
                margin-bottom: var(--size_0p6em);
              }
            }
            &.contact {
              grid-column: auto;
            }
            &.reach_us {
              grid-column: auto;
              grid-row: auto;
            }
          }
        }
      }
      &.faqs {
        padding: 4em 0;

        .headline {
          margin-bottom: 10vh;
          h2 {
            &::after {
              border: 1px solid var(--white_color);
              background-color: var(--theme_color);
            }
          }
        }
        .section_wrapper {
          gap: 0;
          .section_col {
            .question_image {
              display: none;
            }
            .col_content {
              width: var(--width_100);
              .question_container {
                width: var(--width_100);
                border: 1px solid var(--secondary_color);
                border-radius: 4px;
                margin-bottom: var(--size_1p0em);
                .question {
                  width: var(--width_100);
                  background-color: var(--secondary_color);
                  border: 1px solid var(--secondary_color);
                  padding: var(--size_0p4em) var(--size_0p8em);

                  cursor: pointer;
                  color: var(--white_color);

                  span {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    flex-shrink: 0;
                    transition: all 300ms ease-in-out;
                    svg {
                      height: 90%;
                      width: 90%;
                      path {
                        fill: var(--white_color);
                      }
                    }
                    &.rotate {
                      rotate: -180deg;
                    }
                  }
                }

                .answer {
                  width: var(--width_100);
                  border-bottom-left-radius: 4px;
                  border-bottom-right-radius: 4px;
                  transition: all 300ms ease-in-out;
                  display: grid;
                  grid-template-rows: 0fr;
                  .answer_content {
                    width: var(--width_100);
                    overflow: hidden;
                    p {
                      font-weight: 400;
                      font-size: var(--size_1p0rem);
                      padding: var(--size_0p5em);
                    }
                  }
                  &.show {
                    grid-template-rows: 1fr;
                  }
                }
              }
            }

            &.col_left {
              flex: unset;
            }
            &.col_right {
              flex-basis: 100%;
              width: 100%;
            }
          }
        }
      }
      .slider_btns {
        max-width: var(--width_80);
        margin: auto;
        gap: var(--size_1p2em);
        .btn {
          width: 18px;
          height: 18px;
          background-color: var(--secondary_color);
          &.current,
          &:hover {
            background-color: var(--theme_color);
          }
        }
        &.larger {
          display: none;
        }
        &.smaller {
          display: flex;
        }
      }
    }

    .bridge {
      width: var(--width_100);
      min-height: 300px;

      .bridge_content {
        width: var(--width_85);
        max-width: var(--width_85);
        flex-wrap: wrap;

        .left {
          flex-basis: 100%;
          width: var(--width_100);
          margin-bottom: 10px;
        }
        h2 {
          font-size: var(--size_2p0rem);

          font-weight: 400;
          text-align: center;
          width: var(--width_100);
        }
        p {
          font-size: var(--size_0p95rem);
          font-weight: 400;
          text-align: center;
          margin-bottom: 20px;
        }
        .main_buttons {
          float: unset;
          margin-top: 1em;
          display: block;
          margin: auto;
        }
      }
    }
  }

  .dashboard_container {
    .dashboard_menu {
      position: fixed;
      top: 0;
      left: -10%;
      z-index: 60;
      opacity: 0;
      pointer-events: none;
      width: var(--width_15);
      height: var(--width_100);
      background-color: var(--secondary_color);
      border-right: 1px solid var(--white_color);
      padding: var(--size_1p0em);
      transition: 350ms ease-in-out;
      .layer {
        width: 100vw;
        min-width: 100vw;
        height: var(--width_100);
        z-index: -1;
        background-color: var(--secondary_color_rgba);
      }
      .logo_area {
        width: var(--width_100);
        gap: var(--size_0p5em);
        border-bottom: 1px solid var(--white_color);
        padding-top: var(--size_1p0em);
        padding-bottom: var(--size_1p0em);
        margin-bottom: var(--size_1p0em);
        h2 {
          color: var(--white_color);
          text-align: center;
          text-transform: uppercase;
          font-size: var(--size_0p95rem);
          font-weight: 400;
        }
        h3 {
          color: var(--white_color);
          text-align: center;
          font-weight: 300;
          font-size: var(--size_0p85rem);
        }
        button {
          background-color: transparent;
          cursor: pointer;
          border: 0;
          outline: none;
          img {
            width: 60px;
          }
          svg {
            width: 24px;
            height: 24px;
            path {
              fill: var(--white_color);
            }
          }
        }
        .toggle_menu {
          position: absolute;
          top: 10px;
          right: 10px;
          svg {
            width: 20px;
            height: 20px;
          }
        }
      }
      .navigation {
        width: var(--width_100);
        .nav_list {
          width: var(--width_100);
          .nav_item {
            width: var(--width_100);
            margin-bottom: var(--size_0p4em);
            .nav_btn {
              width: var(--width_100);
              background-color: transparent;
              cursor: pointer;
              border: 0;
              padding: var(--size_0p4em) var(--size_0p6em);
              border-bottom: 1px solid var(--secondary_color);
              outline: none;
              gap: 10px;
              transition: 300ms ease-in-out;
              border-radius: 4px;
              color: var(--white_color);
              font-weight: 400;
              .icon {
                width: 16px;
                height: 16px;
                svg {
                  width: var(--width_100);
                  height: var(--width_100);
                  path {
                    fill: var(--white_color);
                  }
                }
              }
              span {
                font-size: var(--size_1p0rem);
              }
              &.current,
              &:hover {
                background-color: transparent;
                border-bottom: 1px solid var(--theme_color);

                color: var(--theme_color);
                .icon {
                  svg {
                    path {
                      fill: var(--theme_color);
                    }
                  }
                }
              }
            }
          }
          hr {
            border: 0;
            background-color: transparent;
            border-top: 1px solid var(--white_color);
            margin-top: var(--size_1p0em);
            margin-bottom: var(--size_1p0em);
          }
        }
      }
      &.visible {
        left: 0;
        opacity: 1;
        pointer-events: initial;
      }
    }
    .main_dashboard {
      .dashboard {
        width: var(--width_100);
        position: relative;
        z-index: 10;
        .dash_top {
          padding: var(--size_1p0em) 7.5%;
         

          .top_logo {
            gap: 10px;
            button {
              cursor: pointer;
              width: 20px;
              height: 20px;
              svg {
                width: 100%;
                height: 100%;
                path {
                  fill: var(--white_color);
                }
              }
            }

            h1 {
              font-size: var(--size_1p1rem);
              color: var(--white_color);
              text-transform: uppercase;
            }
            &.forms {
              button {
                width: auto;
                height: unset;
                gap: 10px;
                svg {
                  width: 16px;
                  height: 16px;
                  path {
                    fill: var(--white_color);
                  }
                }
              }
            }
          }
          .right {
            gap: 6px;
            .searchbar {
              position: relative;
              input {
                position: absolute;
                top: 50%;
                left: -200px;
                min-width: 180px;
                translate: 0 -50%;
                transition: 300ms ease-in-out;
                background-color: transparent;
                border: 1px solid var(--white_color_rgba);
                font-size: var(--size_0p9rem);
                color: var(--white_color);
                outline: none;
                padding: var(--size_0p3em) var(--size_0p8em);
                border-radius: 4px;
                opacity: 0;
                pointer-events: none;

                &::placeholder {
                  opacity: 0.6;
                  color: var(--white_color_rgba);
                }
                &.show {
                  opacity: 1;
                  pointer-events: initial;
                  left: -190px;
                }
              }
              button {
                background-color: var(--secondary_color);
                cursor: pointer;
                outline: none;
                border: 0;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                svg {
                  width: var(--width_80);
                  height: var(--width_80);

                  path {
                    fill: var(--white_color);
                  }
                }

                &#toggle_search {
                  position: relative;
                  z-index: 5;
                }
                &#search_button {
                  position: absolute;
                  top: 0;
                  right: 0;
                  z-index: 1;
                }
              }
            }

            .currency_controller {
              position: relative;
              min-width: 40px;
              .currency_btn {
                border-radius: 3px;
                font-size: var(--size_0p85rem);
                border: 0.65px solid var(--white_color);
                cursor: pointer;
                padding: 4px 6px;
              }
              .custom_selector {
                position: absolute;
                left: -120px;
                top: 140%;

                max-height: 220px;
                max-width: 160px;
              }
            }

            .profile_preview {
              position: relative;
              .user_image_btn {
                width: 35px;
                height: 35px;
              }
              .profile_menu {
                position: absolute;
                min-width: 260px;
                max-width: 300px;
                max-height: 450px;
                overflow-y: scroll;
                right: 0;
                top: 140%;
                opacity: 0;
                transition: 350ms ease-in-out;
                pointer-events: none;
                border: 1px solid var(--white_color_rgba2);
                background-color: var(--secondary_color);
                border-radius: 8px;
                padding: 1em;
                .user_image {
                  display: block;
                  margin: auto;
                  width: 80px;
                  height: 80px;
                  border-radius: 50%;
                  background-size: cover;
                  background-color: var(--white_color);
                  background-position: center;
                  background-repeat: no-repeat;
                  margin-bottom: var(--size_1p0em);
                }

                .user_data {
                  width: var(--width_100);
                  color: var(--white_color);
                  margin-bottom: var(--size_1p0em);
                  padding-bottom: var(--size_0p4em);
                  border-bottom: 1px solid var(--white_color_rgba);
                  h2 {
                    color: var(--theme_color);
                    width: var(--width_100);

                    margin-bottom: var(--size_1p0em);
                    padding-bottom: var(--size_0p3em);
                    border-bottom: 1px solid var(--white_color_rgba);
                    text-transform: uppercase;
                    font-size: var(--size_1p0rem);
                  }
                  h3 {
                    width: var(--width_100);
                    margin-bottom: var(--size_0p5em);
                    font-size: var(--size_0p9rem);
                    font-weight: 400;
                    text-align: center;
                    &.email {
                      font-style: italic;
                      color: var(--theme_color);
                    }
                  }
                }
                .account_data {
                  margin-bottom: var(--size_1p0em);
                  width: var(--width_100);
                  padding-bottom: var(--size_0p8em);
                  border-bottom: 1px solid var(--white_color_rgba);
                  .code {
                    width: var(--width_100);
                    margin-bottom: var(--size_1p0em);
                    .code_control {
                      width: var(--width_100);
                      color: var(--white_color);
                      margin-bottom: var(--size_0p6em);
                      h3 {
                        font-size: var(--size_0p95rem);
                      }
                      button {
                        width: 20px;
                        height: 20px;
                        cursor: pointer;
                        outline: none;
                        border: none;
                        background-color: transparent;
                        position: relative;
                        .show_copy {
                          position: absolute;
                          color: var(--theme_color);
                          background-color: var(--white_color);
                          padding: 4px;
                          border-radius: 4px;
                          font-size: 10px;
                          text-align: center;
                          top: -10px;
                          left: -65px;
                          min-width: 60px;
                          opacity: 0;
                          pointer-events: none;
                          transition: 300ms ease-in-out;
                          &.show {
                            opacity: 1;
                          }
                        }
                        svg {
                          width: var(--width_100);
                          height: var(--width_100);
                          path {
                            fill: var(--theme_color);
                          }
                        }
                      }
                    }
                    input {
                      width: var(--width_100);
                      text-align: left;
                      background-color: transparent;
                      pointer-events: none;
                      font-size: var(--size_0p9rem);
                      color: var(--theme_color);
                      border: 0;
                      font-weight: 300;
                      outline: none;
                      font-style: italic;
                    }
                  }
                }
                .profile_buttons {
                  .btn {
                    color: var(--white_color);
                    font-weight: 400;
                    font-size: var(--size_0p95rem);
                    padding: var(--size_0p4em) var(--size_0p8em);
                    border-radius: 4px;
                    &:hover {
                      background-color: var(--white_color);
                      color: var(--theme_color);
                    }
                  }
                }
                &.show {
                  opacity: 1;
                  top: 115%;
                  pointer-events: initial;
                }
              }
            }
          }
        }
        .dashboard_preview {
          


          .preview_box {
            border: 1px dotted var(--white_color_rgba2);
            background-color: var(--secondary_color);
            border-radius: 8px;
            padding: var(--size_0p6em);
            position: relative;
            .title_bar {
              width: var(--width_100);
              margin-bottom: var(--size_0p5em);
              padding-bottom: var(--size_0p4em);
              color: var(--white_color);
              border-bottom: 1px solid var(--white_color_rgba);
              h3 {
                text-transform: uppercase;
                font-weight: 500;
                font-size: var(--size_0p9rem);
                color: var(--theme_color);
              }
              .btn {
                width: 20px;
                height: 20px;
                cursor: pointer;
                svg {
                  width: var(--width_100);
                  height: var(--width_100);
                  path {
                    fill: var(--white_color);
                  }
                }
              }
            }
            .card_menu {
              position: absolute;
              right: 10px;
              top: 72px;
              z-index: 5;
              max-width: 140px;
              opacity: 0;
              pointer-events: none;
              transition: 350ms ease-in-out;
              background-color: var(--secondary_color);
              border: 1px solid var(--white_color_rgba2);
              border-radius: 4px;
              padding: var(--size_0p4em);
              button {
                width: var(--width_100);
                cursor: pointer;
                display: block;
                background-color: transparent;
                font-size: var(--size_0p85rem);
                transition: 300ms ease-in-out;
                outline: none;
                border: 0;
                text-align: left;
                padding: var(--size_0p2em);
                margin-bottom: var(--size_0p2em);
                color: var(--white_color);
                border-radius: 2px;
                &:hover {
                  color: var(--theme_color);
                  background-color: var(--white_color_rgba2);
                }
              }
              &.show {
                top: 36px;
                opacity: 1;
                pointer-events: initial;
              }
            }

            .pair {
              margin-bottom: var(--size_0p2em);
              width: var(--width_100);
              h2 {
                flex: 1;
                text-transform: uppercase;
                color: var(--white_color);
                font-size: var(--size_0p85rem);
                font-weight: 400;
                span {
                  text-transform: none;
                  font-weight: 300;
                  margin-left: var(--size_0p4em);
                  opacity: 1;
                }
              }
              &.withdraw {
                h2 {
                  flex: 2;
                }
                h2.lesser {
                  flex: 1;
                }
              }
            }
          }
        }

         .content_container {
  
          .column {
           overflow-x: hidden;
            h1 {
              font-size: var(--size_1p0rem);
              font-weight: 500;
             
           
              .btn {
                width: 20px;
                height: 20px;
                cursor: pointer;
                svg {
                  width: var(--width_100);
                  height: var(--width_100);
                  path {
                    fill: var(--white_color);
                  }
                }
              }

              
            }
          }
          
          .investment_container {
            
            .investment_details {
             
              h2 {
                
                font-size: var(--size_0p95rem);
                width: var(--width_100);
                
              }
              h6 {
           
                font-size: var(--size_0p85rem);
                
              }
              .content_row {
                
                
                .one_row {
                  
                  h3 {
                    font-size: var(--size_0p9rem);
                    
                  }
                  .detail {
                    h4 {
                      font-size: var(--size_0p8rem);
                      
                    }
                    p {
                      font-size: var(--size_0p85rem);
                     
                    }
                  }
                  .referral_detail {
                   

                    div {
                      
                      h4 {
                        font-size: var(--size_2p2rem);
                       
                      }
                      h5 {
                        font-size: var(--size_1p0rem);
                      }
                    }

                    p {
                      font-size: var(--size_0p85rem);
                    }
                  }
                  .col_content {
                    width: var(--width_100);
                    background-color: var(--white_color_rgba2);
                    padding: var(--size_0p8em);
                    border-radius: 6px;
                    position: relative;
                    .quote {
                      display: block;
                      float: left;
                      width: 30px;
                      margin-right: var(--size_0p6em);
                      svg {
                        height: 32px;
                        width: 32px;
                        path {
                          fill: var(--theme_color);
                          stroke-width: 0px;
                        }
                      }
                    }
                    p {
                      text-align: justify;
                      font-size: var(--size_1p0rem);
                      margin-bottom: var(--size_0p6em);
                      color: var(--white_color);
                    }
                    .names {
                      width: var(--width_100);
                      .stars {
                        margin-bottom: var(--size_0p4em);
                        img {
                          width: 100px;
                          object-fit: cover;
                        }
                        svg {
                          width: 100px;
                          path {
                            fill: var(--theme_color);
                            stroke-width: 0px;
                          }
                        }
                      }
                      h3 {
                        font-weight: 500;
                        text-transform: uppercase;
                        color: var(--theme_color);
                        border: 0;
                        font-size: var(--size_1p2rem);
                      }
                      h4 {
                        font-weight: 400;
                        color: var(--white_color);
                        font-size: var(--size_1p0rem);
                      }
                    }
                    .review_status {
                      position: absolute;
                      right: var(--size_0p8em);
                      bottom: var(--size_0p8em);
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      gap: 20px;
                      span {
                        font-style: italic;
                        font-size: var(--size_0p85rem);
                        &.pending_status {
                          color: var(--pending_clr);
                        }
                        &.success_status {
                          color: var(--success_clr);
                        }
                        &.cancel_status {
                          color: var(--fail_clr);
                        }
                      }
                      .btn {
                        border-radius: 6px;
                        padding: 4px 8px;
                        cursor: pointer;
                      }
                      .reject {
                        border: 1px solid var(--white_color_rgba);
                        &:hover {
                          color: var(--theme_color);
                          background-color: var(--white_color);
                        }
                      }
                      .accept {
                        border: 1px solid var(--white_color);
                        background-color: var(--white_color);
                        color: var(--theme_color);
                        &:hover {
                          color: var(--theme_color);
                          background-color: var(--white_color);
                        }
                      }
                    }
                  }

                  .data_form {
                    .field_group {
                      .form_control_group {
                        label {
                          font-weight: 400;
                          font-size: var(--size_1p0rem);
                        }

                        input {
                          border: 0;
                          border-bottom: 1px solid var(--white_color_rgba2);
                          border-radius: 0;
                        }
                        textarea {
                          max-height: 100px;
                          resize: none;
                        }
                      }
                      &.double {
                        gap: 30px;
                      }
                    }
                    .submit_button {
                      float: right;
                      display: none;
                      background-color: var(--white_color);

                      cursor: pointer;

                      &:hover {
                        color: var(--theme_color);
                        background-color: var(--white_color);
                      }
                    }
                    .pass_submit {
                      margin-left: 70%;
                      width: 30%;
                      position: relative;
                      border: 1px solid var(--white_color);
                      color: var(--secondary_color);
                      cursor: pointer;
                      background-color: var(--white_color);
                      text-align: center;
                      padding: var(--size_0p4em) var(--size_4p0em);
                      border-radius: 4px;

                      &:hover {
                        color: var(--theme_color);
                        background-color: var(--white_color);
                      }
                    }
                    &.editable {
                      .field_group {
                        .form_control_group {
                          input {
                            border: 0;
                            border-bottom: 1px solid var(--white_color);
                            border-radius: 4px;
                          }
                        }
                      }
                      .submit_button {
                        display: block;
                      }
                    }
                    &.security_form {
                      display: none;
                      &.editable {
                        display: block;
                      }
                    }
                    h6 {
                      width: var(--width_100);
                      text-align: left;
                      margin: 4px 0;
                      color: var(--theme_color);
                      font-style: italic;
                      font-size: var(--size_0p85rem);
                    }
                    .inputs {
                      input {
                        background-color: transparent;
                        text-align: left;
                        color: var(--theme_color);
                        font-style: italic;
                        font-size: var(--size_0p95rem);
                        outline: none;
                        border: 0;

                        padding: 4px 10px;
                      }
                    }
                    .form_btns {
                      .btn {
                        color: var(--white_color);
                        font-weight: 400;
                        font-size: var(--size_0p95rem);
                        border: 0;
                        padding: 4px 8px;
                        &:hover {
                          background-color: var(--white_color);
                          color: var(--theme_color);
                        }
                      }
                    }
                  }
                  &.currency_row {
                    border-bottom: 1px solid var(--white_color_rgba2);
                    padding-bottom: 10px;
                    h5 {
                      color: var(--theme_color);
                      font-style: italic;
                      font-size: var(--size_0p85rem);
                      text-align: left;
                      width: var(--width_100);
                    }
                    .custom_select {
                      .controller {
                        margin-top: 10px;
                        width: var(--width_100);
                        input[type="button"] {
                          min-width: 150px;
                        }
                      }
                    }
                  }
                  .account_btns {
                    width: var(--width_100);
                    button {
                      border: 0;
                      cursor: pointer;
                      color: var(--white_color);
                      font-weight: 400;
                      text-align: center;
                      padding: 4px 8px;
                      font-size: var(--size_0p95rem);
                      &:hover {
                        background-color: var(--white_color);
                        color: var(--theme_color);
                      }
                    }
                  }
                }
                .profile_image {
                  max-width: 120px;
                  flex-shrink: 0;
                  .user_image {
                    width: 120px;
                    height: 120px;
                    border-radius: 6px;
                    margin-bottom: var(--size_0p5em);
                    img {
                      width: var(--width_100);
                      height: var(--width_100);
                      border-radius: 6px;
                      object-fit: cover;
                    }
                  }
                  .data_form {
                    width: var(--width_100);
                    position: relative;
                    .field_group {
                      width: var(--width_100);
                      .form_control_group {
                        color: var(--white_color);

                        label {
                          width: var(--width_100);
                          max-height: 50px;
                          text-align: center;
                          padding: var(--size_0p4em);
                          position: absolute;
                          cursor: pointer;
                          z-index: 4;
                          font-weight: 300;
                          font-size: var(--size_0p95rem);
                          transition: 300ms ease-in-out;
                          border-radius: 4px;
                          text-wrap: nowrap;
                          overflow: hidden;
                          border: 0.6px solid var(--white_color);
                          &:hover {
                            background-color: var(--white_color);
                            color: var(--theme_color);
                          }
                        }
                        input {
                          position: relative;
                          opacity: 0;
                          z-index: 1;
                        }
                      }
                    }
                    .form_btns {
                      width: var(--width_100);
                      button {
                        background-color: transparent;
                        text-transform: uppercase;
                        text-align: center;
                        color: var(--white_color);
                        border: 0;
                        font-size: var(--size_0p9rem);
                        padding: 4px 8px;
                        cursor: pointer;
                        font-weight: 500;
                        border-radius: 4px;
                        width: var(--width_100);
                        transition: 300ms ease-in-out;
                        &:hover {
                          color: var(--theme_color);
                        }

                        &:nth-child(1) {
                          color: var(--secondary_color);
                          background-color: var(--white_color);
                          margin-bottom: var(--size_0p8em);
                          &:hover {
                            color: var(--theme_color);
                          }
                        }
                        &:nth-child(2) {
                          color: var(--white_color);
                          background-color: var(--secondary_color);
                          border: 1px solid var(--white_color_rgba);
                          &:hover {
                            background-color: var(--white_color);
                            color: var(--theme_color);
                          }
                        }
                      }
                    }
                  }
                }
                .stats_row {
                  flex-basis: 100%;
                  width: 100%;
                  gap: 15px;
                  .starts_col {
                    flex: 1;
                    /* background-color: aqua; */
                    .progress_bar {
                      width: 200px;
                      height: 200px;
                      border-radius: 50%;
                      position: relative;

                      display: flex;
                      align-items: center;
                      justify-content: center;
                      .content {
                        width: 185px;
                        height: 185px;
                        border-radius: 50%;
                        background-color: var(--secondary_color);
                        display: flex;
                        justify-content: center;
                        align-items: flex-start;
                        padding-left: 30px;
                        flex-direction: column;

                        .bar_detail {
                          display: flex;
                          flex-wrap: nowrap;
                          opacity: 0;
                          position: relative;
                          animation: fadeIn 2s ease 2s forwards;
                          span {
                            position: absolute;
                            width: 8px;
                            height: 8px;
                            top: 10px;
                            left: 0;
                          }
                          h3 {
                            margin-left: 15px;
                            font-size: 20px;
                            color: var(--theme_color);
                            small {
                              font-size: 11px;
                              color: var(--white_color);
                              text-transform: uppercase;
                              font-weight: 300;
                            }
                          }
                          &:nth-child(1) {
                            span {
                              background-color: var(--clr3);
                            }
                            h3 {
                              color: var(--clr3);
                              small.percent {
                                color: var(--clr3);
                                opacity: 1;
                              }
                            }
                          }
                          &:nth-child(2) {
                            span {
                              background-color: var(--clr1);
                            }
                            h3 {
                              color: var(--clr1);
                              small.percent {
                                color: var(--clr1);
                                opacity: 1;
                              }
                            }
                          }
                          &:nth-child(3) {
                            span {
                              background-color: var(--clr2);
                            }
                            h3 {
                              color: var(--clr2);
                              small.percent {
                                color: var(--clr2);
                                opacity: 1;
                              }
                            }
                          }
                        }
                      }

                      &.investment {
                        .content {
                          .bar_detail {
                            &:nth-child(1) {
                              span {
                                background-color: var(--white_color_rgba);
                              }
                              h3 {
                                color: var(--white_color_rgba);
                                small.percent {
                                  color: var(--white_color_rgba);
                                  opacity: 1;
                                }
                              }
                            }
                            &:nth-child(2) {
                              span {
                                background-color: var(--clr1);
                              }
                              h3 {
                                color: var(--clr1);
                                small.percent {
                                  color: var(--clr1);
                                  opacity: 1;
                                }
                              }
                            }
                            &:nth-child(3) {
                              span {
                                background-color: var(--clr2);
                              }
                              h3 {
                                color: var(--clr2);
                                small.percent {
                                  color: var(--clr2);
                                  opacity: 1;
                                }
                              }
                            }
                          }
                        }
                      }
                      &.days {
                        .content {
                          .bar_detail {
                            &:nth-child(1) {
                              span {
                                background-color: var(--clr1);
                              }
                              h3 {
                                color: var(--clr1);
                                small.percent {
                                  color: var(--clr1);
                                  opacity: 1;
                                }
                              }
                            }
                            &:nth-child(2) {
                              span {
                                background-color: var(--clr2);
                              }
                              h3 {
                                color: var(--clr2);
                                small.percent {
                                  color: var(--clr2);
                                  opacity: 1;
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }

                h4.no_record {
                  font-size: var(--size_0p9rem);
                  
                }

                .data_form {
                  width: var(--width_100);
                  margin-bottom: var(--size_0p8em);
                  h1 {
                    width: var(--width_100);
                    text-align: center;
                    color: var(--white_color);
                    font-size: var(--size_1p2rem);
                    text-transform: uppercase;
                    font-weight: 400;
                    margin-bottom: var(--size_0p5em);
                  }
                  p {
                    width: var(--width_100);
                    text-align: justify;
                    color: var(--white_color);
                    font-size: var(--size_1p0rem);
                    font-weight: 400;
                    margin-bottom: var(--size_0p5em);
                    padding-bottom: var(--size_0p4em);
                    border-bottom: 1px solid var(--white_color_rgba2);
                  }

                  .field_group {
                    position: relative;
                    .form_control_group {
                      position: relative;
                      label {
                        margin-bottom: var(--size_0p4em);
                        font-weight: 400;
                        font-size: var(--size_0p9rem);
                      }

                      textarea {
                        border: 1px solid var(--white_color_rgba2);
                      }

                      input {
                        outline: none;
                        border: 1px solid var(--white_color_rgba2);
                        &::placeholder {
                          font-size: var(--size_0p85rem);
                        }
                      }
                      &.phone_selector {
                        input#deposit_number {
                          padding-left: 55px;
                        }
                        input#binance_number {
                          padding-left: 55px;
                        }
                        input#withdraw_number {
                          padding-left: 55px;
                        }
                      }
                    }
                    &.withdraw_investments {
                      display: none;
                      &.show {
                        display: block;
                      }
                    }
                  }
                  .custom_select {
                    bottom: 4px;
                    .controller {
                      .value_selector {
                        font-weight: 400;
                        text-align: left;
                        min-width: var(--width_100);
                        padding: inherit;
                        font-size: var(--size_0p95rem);
                        padding: var(--size_0p4em) var(--size_0p8em);
                      }
                    }
                    .options {
                      min-width: 150px;
                      max-height: 160px;
                      input {
                        background-color: transparent;
                        border: 0;
                        display: block;
                        width: var(--width_100);
                        text-align: left;
                        color: var(--white_color);
                        padding: 4px 8px;
                        border-radius: 2px;
                        transition: 300ms ease-in-out;
                        cursor: pointer;
                        font-weight: 400;
                        font-size: var(--size_0p8rem);

                        &:hover {
                          background-color: var(--white_color_rgba2);
                          color: var(--theme_color);
                        }
                      }

                      button {
                        width: var(--width_100);
                        padding: 4px;
                        gap: 10px;
                        img {
                          width: 20px;
                        }
                        span {
                          font-weight: 400;
                          font-size: var(--size_0p85rem);
                        }
                        &:hover {
                          background-color: var(--white_color_rgba2);
                          span {
                            color: var(--theme_color);
                          }
                        }
                      }
                      .option_buttons {
                        width: var(--width_100);
                      }

                      .search_option {
                        width: var(--width_100);
                        background-color: var(--secondary_color);
                        position: sticky;
                        z-index: 4;
                        left: 0;
                        top: 0;
                        input {
                          border: 0;
                          border-bottom: 0.6px solid var(--white_color_rgba);
                          color: var(--white_color);
                          outline: none;
                          border-radius: 4px;
                          background-color: transparent;
                          font-size: var(--size_0p85rem);
                          cursor: auto;
                          font-weight: 300;
                          &:hover {
                            background-color: transparent;
                          }
                        }
                      }
                    }

                    &.country_selector,
                    &.verify_selector {
                      .controller {
                        .value_selector {
                          background-color: transparent;
                          border-radius: 4px;
                          border: 0;
                          color: var(--white_color);
                          font-weight: 400;
                          text-align: center;
                          min-width: var(--width_100);
                          padding: 4px 4px;
                          font-size: var(--size_0p95rem);
                        }
                      }
                      .options {
                        min-width: 120px;
                        max-height: 200px;
                        overflow-y: scroll;
                        position: absolute;
                        top: 160%;
                        opacity: 0;

                        background-color: var(--white_color);
                        border: 0.6px solid var(--secondary_color_rgba2);

                        .option_buttons {
                          width: var(--width_100);
                          button {
                            background-color: transparent;
                            border: 0;
                            display: flex;
                            align-items: center;
                            width: var(--width_100);
                            text-align: left;
                            color: var(--secondary_color);
                            padding: 4px 8px;
                            border-radius: 2px;
                            transition: 300ms ease-in-out;
                            cursor: pointer;
                            font-weight: 400;

                            gap: 8px;
                            flex-wrap: nowrap;

                            &:hover {
                              background-color: var(--white_color_rgba2);
                              color: var(--theme_color);
                            }
                            &:not(:last-child) {
                              margin-bottom: var(--size_0p4em);
                            }
                            img {
                              object-fit: cover;
                              width: 24px;
                              border-radius: 2px;
                            }
                            span {
                              font-size: var(--size_0p8rem);
                              font-weight: 400;
                            }
                          }
                        }

                        .search_option {
                          width: var(--width_100);
                          background-color: var(--white_color);
                          margin-bottom: 10px;
                          position: sticky;
                          z-index: 4;
                          left: 0;
                          top: 0;
                          input {
                            border: 0;
                            outline: none;
                            border-bottom: 0.6px solid
                              var(--secondary_color_rgba);
                            color: var(--secondary_color);
                            border-radius: 4px;
                            background-color: transparent;
                            font-size: var(--size_0p85rem);
                            cursor: auto;
                            font-weight: 300;
                            &::placeholder {
                              color: var(--secondary_color_rgba);
                            }
                          }
                        }
                        &.show {
                          top: 110%;
                          opacity: 1;
                          pointer-events: initial;
                        }
                      }
                    }
                    &.country_code {
                      max-width: 50px;
                      /* background-color: aqua; */
                      position: absolute;
                      bottom: 0px;
                      left: 0;

                      .controller {
                        input {
                          background-color: var(--white_color);
                          padding: 5px;
                          color: var(--secondary_color);
                          text-align: center;
                        }
                      }
                    }
                    &.rating_selector {
                      .options {
                        max-height: 90px;

                        button {
                          img {
                            width: 80px;
                          }
                          span {
                            font-size: var(--size_0p9rem);
                          }
                        }
                      }
                    }
                  }
                  .submit_button {
                    cursor: pointer;
                    width: var(--width_50);
                    margin-left: var(--width_50);

                    &:hover {
                      color: var(--theme_color);
                      background-color: var(--white_color);
                    }
                  }
                  &#gift_form {
                    .notes {
                      p {
                        border: 0;
                        font-weight: 300;
                        font-size: var(--size_0p9rem);
                        margin-bottom: var(--size_0p2em);
                      }
                      .div_element {
                        width: var(--width_100);
                        padding-top: var(--size_0p3em);

                        h5 {
                          width: var(--width_100);

                          font-size: var(--size_0p8rem);
                          font-weight: 400;
                          text-transform: uppercase;
                          margin-bottom: 8px;
                        }
                      }
                    }
                  }
                }

                .plan_data {
                  padding-top: var(--size_0p6em);
                  
                  h2 {
                    font-size: var(--size_1p0rem);
                  }
                  h3 {
                    font-size: var(--size_0p95rem);
                    
                  }
                  .pair {
                    width: var(--width_100);
                    h4 {
                      font-size: var(--size_0p9rem);
                      
                    }
                  }

                  &.visible {
                    display: block;
                  }
                }

                .slide {
                  width: var(--width_100);
                  position: relative;

                  .caution {
                    text-align: justify;
                    display: block;
                    flex: 1;
                    width: var(--width_100);
                    color: var(--white_color);
                  }

                  .method_buttons {
                    display: block;
                    width: var(--width_100);
                    padding: 0px;
                    position: relative;

                    button {
                      width: var(--width_100);
                      position: relative;
                      border-radius: 4px;
                      background-color: transparent;
                      border: 1px solid var(--white_color_rgba);
                      font-size: var(--size_1p0rem);
                      padding: 10px;
                      margin-bottom: var(--size_1p0em);
                      font-weight: 400;
                      cursor: pointer;
                      gap: 20px;
                      color: var(--white_color);
                      font-size: var(--size_1p0em);
                      transition: all 300ms ease-in-out;
                      svg {
                        width: 20px;
                        height: 20px;
                        path {
                          fill: var(--white_color);
                        }
                        &.arrow {
                          position: absolute;
                          right: 10px;
                          top: 50%;
                          translate: 0 -50%;
                        }
                      }
                      &:hover {
                        background-color: var(--white_color);
                        border: 1px solid var(--white_color);
                        color: var(--theme_color);
                        svg {
                          path {
                            fill: var(--theme_color);
                          }
                        }
                      }
                    }
                  }

                  .form_details {
                    color: var(--white_color);
                    & > p {
                      font-weight: 500;
                      text-transform: uppercase;
                    }

                    &.credit {
                      h4 {
                        width: var(--width_100);
                        text-align: center;
                        font-weight: 300;
                        color: var(--theme_color);
                        font-size: var(--size_0p9rem);
                      }
                    }
                    p {
                      border: 0;
                      font-size: var(--size_0p85rem);
                      font-weight: 300;
                    }
                    .notes {
                      width: var(--width_100);
                      padding-bottom: var(--size_0p4em);
                      border-bottom: 1px solid var(--white_color_rgba2);
                      margin-bottom: var(--size_0p6em);
                      h4 {
                        text-transform: uppercase;
                        margin-bottom: var(--size_0p3em);
                        color: var(--white_color);
                        text-align: left;
                        font-size: var(--size_0p95rem);
                      }
                      p {
                        margin-bottom: 0;
                        &:last-child {
                          margin-bottom: var(--size_0p3em);
                        }
                      }
                      .div_element {
                        width: var(--width_100);
                        padding-top: var(--size_0p3em);

                        h5 {
                          width: var(--width_100);

                          font-size: var(--size_0p8rem);
                          font-weight: 400;
                          text-transform: uppercase;
                          margin-bottom: 8px;
                        }
                      }
                    }
                    h2 {
                      text-transform: uppercase;
                      margin-bottom: var(--size_0p3em);
                      color: var(--white_color);
                      text-align: left;
                      font-size: var(--size_0p95rem);
                    }
                  }
                }
              }

              .col_content {
                width: var(--width_100);
                .question_container,
                .question_container_ask {
                  width: var(--width_100);
                  border: 1px solid var(--white_color_rgba2);
                  border-radius: 6px;
                  margin-bottom: var(--size_1p0em);
                  position: relative;
                  .question {
                    width: var(--width_100);
                    background-color: var(--white_color);
                    padding: var(--size_0p4em) var(--size_0p8em);
                    border-top-left-radius: 6px;
                    border-top-right-radius: 6px;
                    border-bottom-left-radius: 6px;
                    border-bottom-right-radius: 6px;

                    cursor: pointer;
                    color: var(--secondary_color);
                    border: 1px solid var(--white_color);
                    h2 {
                      flex: 1;
                      text-align: left;
                      color: var(--secondary_color);
                      margin-bottom: 0;
                    }
                    span {
                      width: 20px;
                      height: 20px;
                      border-radius: 50%;
                      flex-shrink: 0;
                      transition: 300ms ease-in-out;
                      svg {
                        height: 90%;
                        width: 90%;
                        path {
                          fill: var(--secondary_color);
                        }
                      }
                      &.rotate {
                        rotate: -180deg;
                      }
                    }
                  }
                  .question_ask {
                    width: var(--width_100);
                    background-color: var(--white_color);
                    padding: var(--size_0p4em) var(--size_0p8em);
                    border-top-left-radius: 6px;
                    border-top-right-radius: 6px;
                    border-bottom-left-radius: 6px;
                    border-bottom-right-radius: 6px;

                    cursor: pointer;
                    color: var(--secondary_color);
                    border: 1px solid var(--white_color);
                    h2 {
                      flex: 1;
                      text-align: left;
                      color: var(--secondary_color);
                      margin-bottom: 0;
                    }
                    span {
                      color: var(--theme_color);
                    }
                  }
                  .question_form {
                    position: absolute;
                    padding: var(--size_1p0em);
                    opacity: 0;
                    pointer-events: none;
                    top: 10%;
                    left: 50%;
                    translate: -50%;
                    border-radius: 8px;
                    transition: 300ms ease-in-out;
                    width: var(--width_100);
                    border: 1px solid var(--white_color_rgba2);
                    z-index: 100;
                    background-color: var(--secondary_color);
                    h2 {
                      text-transform: none;
                      font-size: var(--size_0p9rem);
                      color: var(--white_color);
                    }

                    .field_group {
                      width: var(--width_100);
                      margin-bottom: var(--size_1p0em);
                      position: relative;
                      .dismiss_button {
                        position: absolute;
                        right: 8px;
                        top: 0;
                        color: var(--white_color);
                        font-size: var(--size_0p85rem);
                        text-align: center;
                        background-color: transparent;
                        border: 0;
                        font-weight: 500;
                        outline: none;
                        cursor: pointer;
                      }
                      .form_control_group {
                        width: var(--width_100);
                        color: var(--white_color);
                        flex: 1;
                        label {
                          display: block;
                          width: var(--width_100);
                          margin-bottom: var(--size_0p4em);
                          font-size: var(--size_1p0rem);
                        }
                        textarea,
                        input {
                          display: block;
                          width: var(--width_100);
                          background-color: transparent;
                          border-radius: 4px;
                          outline: none;
                          border: 1px solid var(--white_color_rgba2);
                          padding: var(--size_0p4em) var(--size_0p8em);
                          color: var(--white_color);
                          font-size: var(--size_0p85rem);
                          font-weight: 400;
                          &::placeholder {
                            color: var(--white_color_rgba);
                            opacity: 0.4;
                            font-size: var(--size_0p8rem);
                          }
                        }
                        textarea {
                          max-height: 100px;
                          resize: none;
                        }
                      }
                      &.double {
                        display: flex;
                        justify-content: space-between;
                        gap: var(--size_0p5em);
                      }
                    }
                    .submit_button {
                      display: block;
                      float: right;
                      border: 1px solid var(--white_color);
                      color: var(--secondary_color);
                      background-color: var(--white_color);
                      text-align: center;
                      padding: var(--size_0p4em) var(--size_4p0em);
                      border-radius: 4px;
                      transition: 250ms ease;
                      cursor: pointer;

                      &:hover {
                        background-color: var(--white_color);
                        color: var(--theme_color);
                      }
                    }
                    &.show {
                      top: 0;
                      opacity: 1;
                      pointer-events: initial;
                    }
                  }

                  .answer {
                    width: var(--width_100);

                    transition: 300ms ease-in-out;
                    display: grid;
                    grid-template-rows: 0fr;
                    .answer_content {
                      width: var(--width_100);
                      overflow: hidden;
                      p {
                        width: var(--width_100);
                        font-weight: 400;
                        text-align: justify;
                        font-size: var(--size_1p0rem);
                        padding: var(--size_0p5em);
                      }
                    }
                  }
                  &.show {
                    .question {
                      border-bottom-left-radius: 0;
                      border-bottom-right-radius: 0;
                    }

                    .answer {
                      grid-template-rows: 1fr;
                    }
                  }
                }
              }

              .form_titles {
                display: flex;
                align-items: center;
                justify-content: space-between;
                button {
                  cursor: pointer;
                  background-color: transparent;
                  width: 18px;
                  border: 0;
                  outline: none;
                  height: 18px;
                  svg {
                    width: var(--width_100);
                    height: var(--width_100);
                    path {
                      fill: var(--white_color);
                    }
                  }
                }
              }
            }

            .section {
              width: var(--width_100);

              .headline {
              
                h4 {
              
                  font-size: var(--size_1p0rem);
                
                }

                h5 {
                  
                  font-size: var(--size_0p9rem);
                }
                .btn {
                  display: none;
                }
              }
              .section_wrapper {
                width: var(--width_100);
                .service_card {
                  padding: var(--size_0p6em);
                  gap: 20px;
                  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                  &:not(:last-child) {
                    margin-bottom: var(--size_1p0em);
                  }

                  .plan_name {
                   
                    .icon {
                      width: 40px;
                      height: 40px;
                      display: block;
                      margin: auto;
                      border-radius: 50%;
                      svg {
                        width: var(--width_100);
                        height: var(--width_100);
                        path {
                          fill: var(--theme_color);
                        }
                      }
                    }
                    h2 {
                      text-transform: uppercase;
                      font-size: var(--size_1p2rem);
                      width: var(--width_100);
                      display: block;
                      text-align: center;
                      
                    }
                    h3,
                    h4 {
                      font-size: var(--size_1p0rem);
                      
                    }
                    h3 {
                      margin-bottom: 8px;
                    }
                    h4 {
                      span {
                        color: var(--white_color);
                      }
                    }
                  }

                  .interests {
                    
                    h3 {
                      font-size: var(--size_2p0rem);
                      
                      span {
                        font-size: var(--size_1p0rem);
                        
                      }
                    }
                    h4 {
                      font-size: var(--size_1p0rem);
                      margin-bottom: var(--size_0p6em);
                    }

                    .btn {
                      border-radius: 4px;
                      font-size: var(--size_1p0rem);
                      padding: var(--size_0p5em) var(--size_1p0em);
                      display: block;
                      width: var(--width_100);
                      text-align: center;
                      
                    }
                  }
                }
              }

              &.section_pages {
                .section_wrapper {
                  .service_card {
                    border-radius: 6px;
                    grid-template-columns: repeat(2, minmax(150px, 1fr));

                    .plan_name {
                      .icon {
                        width: 40px;
                        height: 40px;
                      }
                      h2 {
                        font-size: var(--size_1p0rem);
                      }
                      h3,
                      h4 {
                        font-size: var(--size_0p95rem);
                      }
                      h4 {
                        span {
                          color: var(--white_color);
                        }
                      }
                    }

                    .interests {
                      h3 {
                        font-size: var(--size_2p0rem);
                      }
                      h4 {
                        font-size: var(--size_1p2rem);
                      }

                      .btn {
                        background-color: var(--secondary_color);
                        color: var(--theme_color);
                        border: 1px solid var(--white_color_rgba2);
                        border-radius: 4px;
                        font-size: var(--size_1p2rem);
                        padding: var(--size_0p5em) var(--size_1p0em);
                        text-transform: uppercase;
                        &:hover {
                          background-color: var(--white_color);
                          border: 1px solid var(--white_color);
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          .container_left {
            grid-column: 1/6;
            grid-row: 1/2;
            background-color: var(--secondary_color);
            border-radius: 8px;
            padding: var(--size_1p0em);
            .faq_form {
              position: absolute;
              padding: var(--size_1p0em);
              opacity: 0;
              pointer-events: none;
              top: 10%;
              left: 50%;
              translate: -50%;
              border-radius: 8px;
              transition: 300ms ease-in-out;
              width: var(--width_100);
              border: 1px solid var(--white_color_rgba2);
              z-index: 100;
              background-color: var(--secondary_color);

              .field_group {
                width: var(--width_100);
                margin-bottom: var(--size_1p0em);
                position: relative;
                .dismiss_button {
                  position: absolute;
                  right: 8px;
                  top: 0;
                  color: var(--white_color);
                  font-size: var(--size_0p85rem);
                  text-align: center;
                  background-color: transparent;
                  border: 0;
                  font-weight: 500;
                  outline: none;
                  cursor: pointer;
                }
                .form_control_group {
                  width: var(--width_100);
                  color: var(--white_color);
                  flex: 1;
                  label {
                    display: block;
                    width: var(--width_100);
                    margin-bottom: var(--size_0p4em);
                    font-size: var(--size_1p0rem);
                  }
                  textarea,
                  input {
                    display: block;
                    width: var(--width_100);
                    background-color: transparent;
                    border-radius: 4px;
                    outline: none;
                    border: 1px solid var(--white_color_rgba2);
                    padding: var(--size_0p4em) var(--size_0p8em);
                    color: var(--white_color);
                    font-size: var(--size_0p85rem);
                    font-weight: 400;
                    &::placeholder {
                      color: var(--white_color_rgba);
                      opacity: 0.4;
                      font-size: var(--size_0p8rem);
                    }
                  }
                  textarea {
                    max-height: 100px;
                    resize: none;
                  }
                }
                &.double {
                  display: flex;
                  justify-content: space-between;
                  gap: var(--size_0p5em);
                }
              }
              .submit_button {
                display: block;
                float: right;
                border: 1px solid var(--white_color);
                color: var(--secondary_color);
                background-color: var(--white_color);
                text-align: center;
                padding: var(--size_0p4em) var(--size_4p0em);
                border-radius: 4px;
                transition: 250ms ease;
                cursor: pointer;

                &:hover {
                  background-color: var(--white_color);
                  color: var(--theme_color);
                }
              }
              &.show {
                top: 0;
                opacity: 1;
                pointer-events: initial;
              }
            }
          }
          .container_right {
            grid-column: 1/6;
            grid-row: 2/3;
           
          }
          &.monies{
            overflow-y: unset;
            overflow: unset;
            
            
            .container_right {
            display: none;
           
          }

          


          }
        }

       
        
      }
    }
  }
}

@media (max-width: 550px) {
  .hidden_container {
 
  .interest_calculator {
    position: relative;
    z-index: 10;
    max-width: 90%;
    min-width: 90%;
    background-color: var(--secondary_color);
    border: 1px solid var(--white_color_rgba);
    border-radius: 8px;
    padding: 10px;
    .data_form {
      width: var(--width_100);
      margin-bottom: var(--size_0p8em);
      h1 {
        width: var(--width_100);
        text-align: center;
        color: var(--white_color);
        font-size: var(--size_1p2rem);
        text-transform: uppercase;
        font-weight: 400;
        margin-bottom: var(--size_0p5em);
      }
      p {
        width: var(--width_100);
        text-align: justify;
        color: var(--white_color);
        font-size: var(--size_1p0rem);
        font-weight: 400;
        margin-bottom: var(--size_0p5em);
        padding-bottom: var(--size_0p4em);
        border-bottom: 1px solid var(--white_color_rgba2);
      }

      .field_group {
        position: relative;
        .form_control_group {
          position: relative;
          label {
            margin-bottom: var(--size_0p4em);
            font-weight: 400;
            font-size: var(--size_0p9rem);
          }

          input {
            outline: none;
            border: 1px solid var(--white_color_rgba);
            &::placeholder {
              font-size: var(--size_0p85rem);
            }
          }
          &.phone_selector {
            input#deposit_number {
              padding-left: 55px;
            }
            input#binance_number {
              padding-left: 55px;
            }
            input#withdraw_number {
              padding-left: 55px;
            }
          }
        }
        &.withdraw_investments {
          display: none;
          &.show {
            display: block;
          }
        }
      }
      .custom_select {
        bottom: 0;
        .controller {
          .value_selector {
            font-weight: 400;
            text-align: left;
            min-width: var(--width_100);
            padding: inherit;
            font-size: var(--size_0p95rem);
            padding: var(--size_0p4em) var(--size_0p8em);
          }
        }
        .options {
          min-width: 150px;
          max-height: 160px;
          input {
            background-color: transparent;
            border: 0;
            display: block;
            width: var(--width_100);
            text-align: left;
            color: var(--white_color);
            padding: 4px 8px;
            border-radius: 2px;
            transition: 300ms ease-in-out;
            cursor: pointer;
            font-weight: 400;
            font-size: var(--size_0p8rem);

            &:hover {
              background-color: var(--white_color_rgba2);
              color: var(--theme_color);
            }
          }

          button {
            width: var(--width_100);
            padding: 4px;
            gap: 10px;
            img {
              width: 20px;
            }
            span {
              font-weight: 400;
              font-size: var(--size_0p85rem);
            }
            &:hover {
              background-color: var(--white_color_rgba2);
              span {
                color: var(--theme_color);
              }
            }
          }
          .option_buttons {
            width: var(--width_100);
          }

          .search_option {
            width: var(--width_100);
            background-color: var(--secondary_color);
            position: sticky;
            z-index: 4;
            left: 0;
            top: 0;
            input {
              border: 0;
              border-bottom: 0.6px solid var(--white_color_rgba);
              color: var(--white_color);
              border-radius: 4px;
              background-color: transparent;
              font-size: var(--size_0p85rem);
              cursor: auto;
              font-weight: 300;
              outline: none;
              &:hover {
                background-color: transparent;
              }
            }
          }
        }

        &.country_selector,
        &.verify_selector {
          .controller {
            .value_selector {
              background-color: transparent;
              border-radius: 4px;
              border: 0;
              color: var(--white_color);
              font-weight: 400;
              text-align: center;
              min-width: var(--width_100);
              padding: 4px;
              font-size: var(--size_0p95rem);
            }
          }
          .options {
            min-width: 120px;
            max-height: 200px;
            overflow-y: scroll;
            position: absolute;
            top: 160%;
            opacity: 0;

            background-color: var(--white_color);
            border: 0.6px solid var(--secondary_color_rgba2);

            .option_buttons {
              width: var(--width_100);
              button {
                background-color: transparent;
                border: 0;
                display: flex;
                align-items: center;
                width: var(--width_100);
                text-align: left;
                color: var(--secondary_color);
                padding: 4px 8px;
                border-radius: 2px;
                transition: 300ms ease-in-out;
                cursor: pointer;
                font-weight: 400;

                gap: 8px;
                flex-wrap: nowrap;

                &:hover {
                  background-color: var(--white_color_rgba2);
                  color: var(--theme_color);
                }
                &:not(:last-child) {
                  margin-bottom: var(--size_0p4em);
                }
                img {
                  object-fit: cover;
                  width: 24px;
                  border-radius: 2px;
                }
                span {
                  font-size: var(--size_0p8rem);
                  font-weight: 400;
                }
              }
            }

            .search_option {
              width: var(--width_100);
              background-color: var(--white_color);
              margin-bottom: 10px;
              position: sticky;
              z-index: 4;
              left: 0;
              top: 0;
              input {
                border: 0;
                border-bottom: 0.6px solid var(--secondary_color_rgba);
                color: var(--secondary_color);
                border-radius: 4px;
                background-color: transparent;
                font-size: var(--size_0p85rem);
                cursor: auto;
                font-weight: 300;
                outline: none;
                &::placeholder {
                  color: var(--secondary_color_rgba);
                }
              }
            }
            &.show {
              top: 110%;
              opacity: 1;
              pointer-events: initial;
            }
          }
        }
        &.country_code {
          max-width: 50px;
          /* background-color: aqua; */
          position: absolute;
          bottom: 0px;
          left: 0;

          .controller {
            input {
              background-color: var(--white_color);
              padding: 5px;
              color: var(--secondary_color);
              text-align: center;
            }
          }
        }
      }
      .submit_button {
        cursor: pointer;
        width: var(--width_70);
        margin-left: var(--width_30);

        &:hover {
          color: var(--theme_color);
          background-color: var(--white_color);
        }
      }
      &#gift_form {
        .notes {
          p {
            border: 0;
            font-weight: 300;
            font-size: var(--size_0p9rem);
            margin-bottom: var(--size_0p2em);
          }
          .div_element {
            width: var(--width_100);
            padding-top: var(--size_0p3em);

            h5 {
              width: var(--width_100);

              font-size: var(--size_0p8rem);
              font-weight: 400;
              text-transform: uppercase;
              margin-bottom: 8px;
            }
          }
        }
      }
    }

    .plan_data {
      width: var(--width_100);
      padding-top: var(--size_0p6em);
      border-top: 1px solid var(--white_color_rgba);
      color: var(--white_color);
      display: none;
      h2 {
        width: var(--width_100);
        text-align: center;
        text-transform: uppercase;
        font-size: var(--size_1p2rem);
        font-weight: 400;
        margin-bottom: var(--size_0p4em);
      }
      h3 {
        width: var(--width_100);
        text-align: left;
        font-size: var(--size_1p0rem);
        font-weight: 400;
        margin-bottom: var(--size_0p4em);
        text-transform: uppercase;
        span {
          color: var(--theme_color);
          text-transform: none;
        }
      }
      .pair {
        width: var(--width_100);
        h4 {
          flex: 1;
          width: var(--width_100);
          text-transform: uppercase;
          font-weight: 400;
          font-size: var(--size_0p95rem);
          text-align: left;
          span {
            text-transform: none;
          }
        }
      }

      &.visible {
        display: block;
      }
    }
    .error_messages {
      width: var(--width_100);
      background-color: var(--white_color);
      border-radius: 8px;
      z-index: 10;
      left: 0;
      p {
        flex: 1;
        text-align: center;
        font-size: var(--size_0p95rem);
        font-style: italic;
        font-weight: 400;
        max-width: var(--width_85);
      }
      .close_btn {
        position: absolute;
        top: 10px;
        right: 10px;
        svg {
          path {
            fill: var(--secondary_color);
          }
        }
      }
      &.show {
        opacity: 1;
        pointer-events: initial;
        top: 0%;
      }
    }
    &.multi_step {
      overflow: hidden;
      padding: 0;
      height: 540px;
    }
    &.transfers {
      .slide {
        width: 100%;
        min-width: 100%;
        height: var(--width_100);
        position: relative;

        h1 {
          width: var(--width_100);
          background-color: var(--white_color);
          color: var(--secondary_color);
          text-transform: uppercase;
          border-radius: 8px;
          text-align: center;
          font-weight: 500;
          font-size: var(--size_1p2rem);
          padding: var(--size_0p6em);
          position: absolute;
          top: 0;
          left: 0;
          z-index: 5;
          button {
            background-color: transparent;
            position: absolute;
            left: 10px;
            top: 50%;
            translate: 0 -50%;
            width: 20px;
            height: 20px;
            cursor: pointer;
            border: 0;
            outline: none;
            svg {
              width: var(--width_100);
              height: var(--width_100);
              path {
                fill: var(--secondary_color);
              }
            }
          }
        }
        .caution {
          text-align: justify;
          display: block;
          flex: 1;
          width: var(--width_100);
          color: var(--white_color);
        }

        .method_buttons {
          display: block;
          width: var(--width_100);
          padding: 20px;

          button {
            width: var(--width_100);
            position: relative;
            border-radius: 4px;
            background-color: transparent;
            border: 1px solid var(--white_color_rgba);
            font-size: var(--size_1p0rem);
            padding: 10px;
            margin-bottom: var(--size_1p0em);
            font-weight: 400;
            cursor: pointer;
            gap: 20px;
            color: var(--white_color);
            font-size: var(--size_1p0em);
            transition: all 300ms ease-in-out;
            svg {
              width: 20px;
              height: 20px;
              path {
                fill: var(--white_color);
              }
              &.arrow {
                position: absolute;
                right: 10px;
                top: 50%;
                translate: 0 -50%;
              }
            }
            &:hover {
              background-color: var(--white_color);
              border: 1px solid var(--white_color);
              color: var(--theme_color);
              svg {
                path {
                  fill: var(--theme_color);
                }
              }
            }
          }
        }

        .form_details {
          padding: 20px;
          padding-top: 60px;
          color: var(--white_color);
          height: var(--width_100);
          overflow-y: scroll;
          & > p {
            font-weight: 500;
            text-transform: uppercase;
          }

          &.credit {
            h4 {
              width: var(--width_100);
              text-align: center;
              font-weight: 300;
              color: var(--theme_color);
              font-size: var(--size_0p9rem);
            }
          }
          p {
            border: 0;
            font-size: var(--size_0p85rem);
            font-weight: 300;
          }
          .notes {
            width: var(--width_100);
            padding-bottom: var(--size_0p4em);
            border-bottom: 1px solid var(--white_color_rgba2);
            margin-bottom: var(--size_0p6em);
            h4 {
              text-transform: uppercase;
              margin-bottom: var(--size_0p3em);
              color: var(--white_color);
              text-align: left;
              font-size: var(--size_0p95rem);
            }
            p {
              margin-bottom: 0;
              &:last-child {
                margin-bottom: var(--size_0p3em);
              }
            }
            .div_element {
              width: var(--width_100);
              padding-top: var(--size_0p3em);

              h5 {
                width: var(--width_100);

                font-size: var(--size_0p8rem);
                font-weight: 400;
                text-transform: uppercase;
                margin-bottom: 8px;
              }
            }
          }
          h2 {
            text-transform: uppercase;
            margin-bottom: var(--size_0p3em);
            color: var(--white_color);
            text-align: left;
            font-size: var(--size_0p95rem);
          }
        }
      }
    }
    .slider_container {
      position: relative;
      z-index: 6;
      width: calc(4 * 100%);
      height: 540px;
      gap: 15px;
      flex-wrap: nowrap;
      .slide {
        width: calc(100% / 4);
        min-width: calc(100% / 4);
        height: var(--width_100);
        position: relative;

        h1 {
          width: var(--width_100);
          background-color: var(--white_color);
          color: var(--secondary_color);
          text-transform: uppercase;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          text-align: center;
          font-weight: 500;
          font-size: var(--size_1p2rem);
          padding: var(--size_0p6em);
          position: absolute;
          top: 0;
          left: 0;
          z-index: 5;
          button {
            background-color: transparent;
            position: absolute;
            left: 10px;
            top: 50%;
            translate: 0 -50%;
            width: 20px;
            height: 20px;
            cursor: pointer;
            border: 0;
            outline: none;
            svg {
              width: var(--width_100);
              height: var(--width_100);
              path {
                fill: var(--secondary_color);
              }
            }
          }
        }
        .caution {
          text-align: justify;
          display: block;
          flex: 1;
          width: var(--width_100);
          color: var(--white_color);
        }

        .method_buttons {
          display: block;
          width: var(--width_100);
          padding: 20px;

          button {
            width: var(--width_100);
            position: relative;
            border-radius: 4px;
            background-color: transparent;
            border: 1px solid var(--white_color_rgba);
            font-size: var(--size_1p0rem);
            padding: 10px;
            margin-bottom: var(--size_1p0em);
            font-weight: 400;
            cursor: pointer;
            gap: 20px;
            color: var(--white_color);
            font-size: var(--size_1p0em);
            transition: all 300ms ease-in-out;
            svg {
              width: 20px;
              height: 20px;
              path {
                fill: var(--white_color);
              }
              &.arrow {
                position: absolute;
                right: 10px;
                top: 50%;
                translate: 0 -50%;
              }
            }
            &:hover {
              background-color: var(--white_color);
              border: 1px solid var(--white_color);
              color: var(--theme_color);
              svg {
                path {
                  fill: var(--theme_color);
                }
              }
            }
          }
        }

        .form_details {
          padding: 20px;
          padding-top: 60px;
          color: var(--white_color);
          height: var(--width_100);
          overflow-y: scroll;
          & > p {
            font-weight: 500;
            text-transform: uppercase;
          }

          &.credit {
            h4 {
              width: var(--width_100);
              text-align: center;
              font-weight: 300;
              color: var(--theme_color);
              font-size: var(--size_0p9rem);
            }
          }
          p {
            border: 0;
            font-size: var(--size_0p85rem);
            font-weight: 300;
          }
          .notes {
            width: var(--width_100);
            padding-bottom: var(--size_0p4em);
            border-bottom: 1px solid var(--white_color_rgba2);
            margin-bottom: var(--size_0p6em);
            h4 {
              text-transform: uppercase;
              margin-bottom: var(--size_0p3em);
              color: var(--white_color);
              text-align: left;
              font-size: var(--size_0p95rem);
            }
            p {
              margin-bottom: 0;
              &:last-child {
                margin-bottom: var(--size_0p3em);
              }
            }
            .div_element {
              width: var(--width_100);
              padding-top: var(--size_0p3em);

              h5 {
                width: var(--width_100);

                font-size: var(--size_0p8rem);
                font-weight: 400;
                text-transform: uppercase;
                margin-bottom: 8px;
              }
            }
          }
          h2 {
            text-transform: uppercase;
            margin-bottom: var(--size_0p3em);
            color: var(--white_color);
            text-align: left;
            font-size: var(--size_0p95rem);
          }
        }
      }
    }
  }
  .layer {
    z-index: 5;
    background-color: var(--secondary_color_rgba2);
    .btn {
      position: absolute;
      top: 2%;
      right: 2%;
      width: 30px;
      height: 30px;
      border-color: var(--white_color_rgba);
      cursor: pointer;
      svg {
        width: 20px;
        height: 20px;
        path {
          fill: var(--white_color);
        }
      }
    }
  }

  &.visible {
    top: 0;
    opacity: 1;
    pointer-events: initial;
  }
  &.verify_container {
    z-index: 80;
    background-color: var(--secondary_color_rgba);
    backdrop-filter: blur(15px);
    .interest_calculator {
      position: relative;
      z-index: 5;
      &.multi_step {
        height: 360px;
      }

      .slider_container {
        width: calc(3 * 100%);
        height: 360px;
        .slide {
          width: calc(100% / 3);
          min-width: calc(100% / 3);
          .caution {
            text-align: center;
            font-style: italic;
            width: var(--width_100);
            color: var(--fail_clr);
            font-size: var(--size_0p95rem);
            margin-bottom: 10px;
          }

          .method_buttons {
            flex-basis: var(--width_100);
            width: var(--width_100);
          }
        }
      }
    }
  }
}
   .dashboard_container {
   
    .main_dashboard {
      .dashboard {
       
        

         .content_container {
  
          .column {
           overflow-x: hidden;
            h1 {
              font-size: var(--size_1p0rem);
              font-weight: 500;
             
           
              .btn {
                width: 20px;
                height: 20px;
                cursor: pointer;
                svg {
                  width: var(--width_100);
                  height: var(--width_100);
                  path {
                    fill: var(--white_color);
                  }
                }
              }

              
            }
          }
          
          .investment_container {
            
            .investment_details {
             
              h2 {
                
                font-size: var(--size_0p95rem);
                width: var(--width_100);
                
              }
              h6 {
           
                font-size: var(--size_0p85rem);
                
              }
              .content_row {
                
                
                .one_row {
                  
                  h3 {
                    font-size: var(--size_0p9rem);
                    
                  }
                  .detail {
                    h4 {
                      font-size: var(--size_0p8rem);
                      
                    }
                    p {
                      font-size: var(--size_0p85rem);
                     
                    }
                  }
                  .referral_detail {
                   

                    div {
                      
                      h4 {
                        font-size: var(--size_2p2rem);
                       
                      }
                      h5 {
                        font-size: var(--size_1p0rem);
                      }
                    }

                    p {
                      font-size: var(--size_0p85rem);
                    }
                  }
                  .col_content {
                    width: var(--width_100);
                    background-color: var(--white_color_rgba2);
                    padding: var(--size_0p8em);
                    border-radius: 6px;
                    position: relative;
                    .quote {
                      display: block;
                      float: left;
                      width: 30px;
                      margin-right: var(--size_0p6em);
                      svg {
                        height: 32px;
                        width: 32px;
                        path {
                          fill: var(--theme_color);
                          stroke-width: 0px;
                        }
                      }
                    }
                    p {
                      text-align: justify;
                      font-size: var(--size_0p9rem);
                   
                    }
                    .names {
                      width: var(--width_100);
                      .stars {
                        margin-bottom: var(--size_0p4em);
                        img {
                          width: 100px;
                          object-fit: cover;
                        }
                        svg {
                          width: 100px;
                          path {
                            fill: var(--theme_color);
                            stroke-width: 0px;
                          }
                        }
                      }
                      h3 {
                        font-weight: 500;
                        text-transform: uppercase;
                        color: var(--theme_color);
                        border: 0;
                        font-size: var(--size_1p2rem);
                      }
                      h4 {
                        font-weight: 400;
                        color: var(--white_color);
                        font-size: var(--size_1p0rem);
                      }
                    }
                    .review_status {
                      position: absolute;
                      right: var(--size_0p8em);
                      bottom: var(--size_0p8em);
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      gap: 20px;
                      span {
                        font-style: italic;
                        font-size: var(--size_0p85rem);
                        &.pending_status {
                          color: var(--pending_clr);
                        }
                        &.success_status {
                          color: var(--success_clr);
                        }
                        &.cancel_status {
                          color: var(--fail_clr);
                        }
                      }
                      .btn {
                        border-radius: 6px;
                        padding: 4px 8px;
                        cursor: pointer;
                      }
                      .reject {
                        border: 1px solid var(--white_color_rgba);
                        &:hover {
                          color: var(--theme_color);
                          background-color: var(--white_color);
                        }
                      }
                      .accept {
                        border: 1px solid var(--white_color);
                        background-color: var(--white_color);
                        color: var(--theme_color);
                        &:hover {
                          color: var(--theme_color);
                          background-color: var(--white_color);
                        }
                      }
                    }
                  }

                  .data_form {
                    .field_group {
                      .form_control_group {
                        label {
                          font-weight: 400;
                          font-size: var(--size_1p0rem);
                        }

                        input {
                          border: 0;
                          border-bottom: 1px solid var(--white_color_rgba2);
                          border-radius: 0;
                        }
                        textarea {
                          max-height: 100px;
                          resize: none;
                        }
                      }
                      &.double {
                        gap: 30px;
                      }
                    }
                    .submit_button {
                      float: right;
                      display: none;
                      background-color: var(--white_color);

                      cursor: pointer;

                      &:hover {
                        color: var(--theme_color);
                        background-color: var(--white_color);
                      }
                    }
                    .pass_submit {
                      margin-left: 40%;
                      width: 60%;
                     

                    }
                    &.editable {
                      .field_group {
                        .form_control_group {
                          input {
                            border: 0;
                            border-bottom: 1px solid var(--white_color);
                            border-radius: 4px;
                          }
                        }
                      }
                      .submit_button {
                        display: block;
                      }
                    }
                    &.security_form {
                      display: none;
                      &.editable {
                        display: block;
                      }
                    }
                    h6 {
                      width: var(--width_100);
                      text-align: left;
                      margin: 4px 0;
                      color: var(--theme_color);
                      font-style: italic;
                      font-size: var(--size_0p85rem);
                    }
                    .inputs {
                      input {
                        background-color: transparent;
                        text-align: left;
                        color: var(--theme_color);
                        font-style: italic;
                        font-size: var(--size_0p95rem);
                        outline: none;
                        border: 0;

                        padding: 4px 10px;
                      }
                    }
                    .form_btns {
                      .btn {
                        color: var(--white_color);
                        font-weight: 400;
                        font-size: var(--size_0p95rem);
                        border: 0;
                        padding: 4px 8px;
                        &:hover {
                          background-color: var(--white_color);
                          color: var(--theme_color);
                        }
                      }
                    }
                  }
                  &.currency_row {
                    border-bottom: 1px solid var(--white_color_rgba2);
                    padding-bottom: 10px;
                    h5 {
                      color: var(--theme_color);
                      font-style: italic;
                      font-size: var(--size_0p85rem);
                      text-align: left;
                      width: var(--width_100);
                    }
                    .custom_select {
                      .controller {
                        margin-top: 10px;
                        width: var(--width_100);
                        input[type="button"] {
                          min-width: 150px;
                        }
                      }
                    }
                  }
                  .account_btns {
                    width: var(--width_100);
                    button {
                      border: 0;
                      cursor: pointer;
                      color: var(--white_color);
                      font-weight: 400;
                      text-align: center;
                      padding: 4px 8px;
                      font-size: var(--size_0p95rem);
                      &:hover {
                        background-color: var(--white_color);
                        color: var(--theme_color);
                      }
                    }
                  }
                  &.investment_row{
                    flex-basis: 100%;
                  min-width: 100%;                  }
                }
                .profile_image {
                  max-width: unset;
                  width: 100%;
                  flex-basis: 100%;
                  display: flex;
                  align-items: flex-end;
                  justify-content: space-between;
                  gap: 15px;

                  flex-shrink: 0;
                  .user_image {
                    width: 140px;
                    height: 140px;
                    flex-shrink: 0;
                    border-radius: 6px;
                    margin-bottom: var(--size_0p5em);
                   
                  }
                  .data_form {
                    width: var(--width_100);
                    position: relative;
                    .field_group {
                      width: var(--width_100);
                      .form_control_group {
                        color: var(--white_color);

                        label {
                         
                          font-size: var(--size_0p95rem);
                        
                          
                        }
                        input {
                          position: relative;
                          opacity: 0;
                          z-index: 1;
                          font-size: var(--size_0p9rem);
                        }
                      }
                    }
                    .form_btns {
                      button {
                        
                       

                        &:nth-child(1) {
                          margin-bottom: 0;
                          
                        }
                       
                      }
                    }
                  }
                }
                .stats_row {
                  flex-basis: 100%;
                  width: 100%;
                  flex-direction: column;
                  gap: 15px;
                  .starts_col {
                    flex: 1;
                    /* background-color: aqua; */
                    .progress_bar {
                      
                      .content {
                      
                        
                      

                        .bar_detail {
                         
                          span {
                            position: absolute;
                            width: 8px;
                            height: 8px;
                            top: 10px;
                            left: 0;
                          }
                          h3 {
                            margin-left: 15px;
                            font-size: 20px;
                            color: var(--theme_color);
                            small {
                              font-size: 11px;
                              color: var(--white_color);
                              text-transform: uppercase;
                              font-weight: 300;
                            }
                          }
                          
                        }
                      }

                      &.investment {
                        .content {
                          .bar_detail {
                            &:nth-child(1) {
                              span {
                                background-color: var(--white_color_rgba);
                              }
                              h3 {
                                color: var(--white_color_rgba);
                                small.percent {
                                  color: var(--white_color_rgba);
                                  opacity: 1;
                                }
                              }
                            }
                            &:nth-child(2) {
                              span {
                                background-color: var(--clr1);
                              }
                              h3 {
                                color: var(--clr1);
                                small.percent {
                                  color: var(--clr1);
                                  opacity: 1;
                                }
                              }
                            }
                            &:nth-child(3) {
                              span {
                                background-color: var(--clr2);
                              }
                              h3 {
                                color: var(--clr2);
                                small.percent {
                                  color: var(--clr2);
                                  opacity: 1;
                                }
                              }
                            }
                          }
                        }
                      }
                      &.days {
                        .content {
                          .bar_detail {
                            &:nth-child(1) {
                              span {
                                background-color: var(--clr1);
                              }
                              h3 {
                                color: var(--clr1);
                                small.percent {
                                  color: var(--clr1);
                                  opacity: 1;
                                }
                              }
                            }
                            &:nth-child(2) {
                              span {
                                background-color: var(--clr2);
                              }
                              h3 {
                                color: var(--clr2);
                                small.percent {
                                  color: var(--clr2);
                                  opacity: 1;
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }

                h4.no_record {
                  font-size: var(--size_0p9rem);
                  
                }

                .data_form {
                  width: var(--width_100);
                  margin-bottom: var(--size_0p8em);
                  h1 {
                    width: var(--width_100);
                    text-align: center;
                    color: var(--white_color);
                    font-size: var(--size_1p2rem);
                    text-transform: uppercase;
                    font-weight: 400;
                    margin-bottom: var(--size_0p5em);
                  }
                  p {
                    width: var(--width_100);
                    text-align: justify;
                    color: var(--white_color);
                    font-size: var(--size_1p0rem);
                    font-weight: 400;
                    margin-bottom: var(--size_0p5em);
                    padding-bottom: var(--size_0p4em);
                    border-bottom: 1px solid var(--white_color_rgba2);
                  }

                  .field_group {
                    position: relative;
                    .form_control_group {
                      position: relative;
                      label {
                        margin-bottom: var(--size_0p4em);
                        font-weight: 400;
                        font-size: var(--size_0p9rem);
                      }

                      textarea {
                        border: 1px solid var(--white_color_rgba2);
                      }

                      input {
                        outline: none;
                        border: 1px solid var(--white_color_rgba2);
                        &::placeholder {
                          font-size: var(--size_0p85rem);
                        }
                      }
                      &.phone_selector {
                        input#deposit_number {
                          padding-left: 55px;
                        }
                        input#binance_number {
                          padding-left: 55px;
                        }
                        input#withdraw_number {
                          padding-left: 55px;
                        }
                      }
                    }
                    &.withdraw_investments {
                      display: none;
                      &.show {
                        display: block;
                      }
                    }
                  }
                  .custom_select {
                    bottom: 4px;
                    .controller {
                      .value_selector {
                        font-weight: 400;
                        text-align: left;
                        min-width: var(--width_100);
                        padding: inherit;
                        font-size: var(--size_0p95rem);
                        padding: var(--size_0p4em) var(--size_0p8em);
                      }
                    }
                    .options {
                      min-width: 150px;
                      max-height: 160px;
                      input {
                        background-color: transparent;
                        border: 0;
                        display: block;
                        width: var(--width_100);
                        text-align: left;
                        color: var(--white_color);
                        padding: 4px 8px;
                        border-radius: 2px;
                        transition: 300ms ease-in-out;
                        cursor: pointer;
                        font-weight: 400;
                        font-size: var(--size_0p8rem);

                        &:hover {
                          background-color: var(--white_color_rgba2);
                          color: var(--theme_color);
                        }
                      }

                      button {
                        width: var(--width_100);
                        padding: 4px;
                        gap: 10px;
                        img {
                          width: 20px;
                        }
                        span {
                          font-weight: 400;
                          font-size: var(--size_0p85rem);
                        }
                        &:hover {
                          background-color: var(--white_color_rgba2);
                          span {
                            color: var(--theme_color);
                          }
                        }
                      }
                      .option_buttons {
                        width: var(--width_100);
                      }

                      .search_option {
                        width: var(--width_100);
                        background-color: var(--secondary_color);
                        position: sticky;
                        z-index: 4;
                        left: 0;
                        top: 0;
                        input {
                          border: 0;
                          border-bottom: 0.6px solid var(--white_color_rgba);
                          color: var(--white_color);
                          outline: none;
                          border-radius: 4px;
                          background-color: transparent;
                          font-size: var(--size_0p85rem);
                          cursor: auto;
                          font-weight: 300;
                          &:hover {
                            background-color: transparent;
                          }
                        }
                      }
                    }

                    &.country_selector,
                    &.verify_selector {
                      .controller {
                        .value_selector {
                          background-color: transparent;
                          border-radius: 4px;
                          border: 0;
                          color: var(--white_color);
                          font-weight: 400;
                          text-align: center;
                          min-width: var(--width_100);
                          padding: 4px 4px;
                          font-size: var(--size_0p95rem);
                        }
                      }
                      .options {
                        min-width: 120px;
                        max-height: 200px;
                        overflow-y: scroll;
                        position: absolute;
                        top: 160%;
                        opacity: 0;

                        background-color: var(--white_color);
                        border: 0.6px solid var(--secondary_color_rgba2);

                        .option_buttons {
                          width: var(--width_100);
                          button {
                            background-color: transparent;
                            border: 0;
                            display: flex;
                            align-items: center;
                            width: var(--width_100);
                            text-align: left;
                            color: var(--secondary_color);
                            padding: 4px 8px;
                            border-radius: 2px;
                            transition: 300ms ease-in-out;
                            cursor: pointer;
                            font-weight: 400;

                            gap: 8px;
                            flex-wrap: nowrap;

                            &:hover {
                              background-color: var(--white_color_rgba2);
                              color: var(--theme_color);
                            }
                            &:not(:last-child) {
                              margin-bottom: var(--size_0p4em);
                            }
                            img {
                              object-fit: cover;
                              width: 24px;
                              border-radius: 2px;
                            }
                            span {
                              font-size: var(--size_0p8rem);
                              font-weight: 400;
                            }
                          }
                        }

                        .search_option {
                          width: var(--width_100);
                          background-color: var(--white_color);
                          margin-bottom: 10px;
                          position: sticky;
                          z-index: 4;
                          left: 0;
                          top: 0;
                          input {
                            border: 0;
                            outline: none;
                            border-bottom: 0.6px solid
                              var(--secondary_color_rgba);
                            color: var(--secondary_color);
                            border-radius: 4px;
                            background-color: transparent;
                            font-size: var(--size_0p85rem);
                            cursor: auto;
                            font-weight: 300;
                            &::placeholder {
                              color: var(--secondary_color_rgba);
                            }
                          }
                        }
                        &.show {
                          top: 110%;
                          opacity: 1;
                          pointer-events: initial;
                        }
                      }
                    }
                    &.country_code {
                      max-width: 50px;
                      /* background-color: aqua; */
                      position: absolute;
                      bottom: 0px;
                      left: 0;

                      .controller {
                        input {
                          background-color: var(--white_color);
                          padding: 5px;
                          color: var(--secondary_color);
                          text-align: center;
                        }
                      }
                    }
                    &.rating_selector {
                      .options {
                        max-height: 90px;

                        button {
                          img {
                            width: 80px;
                          }
                          span {
                            font-size: var(--size_0p9rem);
                          }
                        }
                      }
                    }
                  }
                  .submit_button {
                    cursor: pointer;
                    width: var(--width_70);
                    margin-left: var(--width_30);

                    &:hover {
                      color: var(--theme_color);
                      background-color: var(--white_color);
                    }
                  }
                  &#gift_form {
                    .notes {
                      p {
                        border: 0;
                        font-weight: 300;
                        font-size: var(--size_0p9rem);
                        margin-bottom: var(--size_0p2em);
                      }
                      .div_element {
                        width: var(--width_100);
                        padding-top: var(--size_0p3em);

                        h5 {
                          width: var(--width_100);

                          font-size: var(--size_0p8rem);
                          font-weight: 400;
                          text-transform: uppercase;
                          margin-bottom: 8px;
                        }
                      }
                    }
                  }
                }

                .plan_data {
                  padding-top: var(--size_0p6em);
                  
                  h2 {
                    font-size: var(--size_1p0rem);
                  }
                  h3 {
                    font-size: var(--size_0p95rem);
                    
                  }
                  .pair {
                    width: var(--width_100);
                    h4 {
                      font-size: var(--size_0p9rem);
                      
                    }
                  }

                  &.visible {
                    display: block;
                  }
                }

                .slide {
                  width: var(--width_100);
                  position: relative;

                  .caution {
                    text-align: justify;
                    display: block;
                    flex: 1;
                    width: var(--width_100);
                    color: var(--white_color);
                  }

                  .method_buttons {
                    display: block;
                    width: var(--width_100);
                    padding: 0px;
                    position: relative;

                    button {
                      width: var(--width_100);
                      position: relative;
                      border-radius: 4px;
                      background-color: transparent;
                      border: 1px solid var(--white_color_rgba);
                      font-size: var(--size_1p0rem);
                      padding: 10px;
                      margin-bottom: var(--size_1p0em);
                      font-weight: 400;
                      cursor: pointer;
                      gap: 20px;
                      color: var(--white_color);
                      font-size: var(--size_1p0em);
                      transition: all 300ms ease-in-out;
                      svg {
                        width: 20px;
                        height: 20px;
                        path {
                          fill: var(--white_color);
                        }
                        &.arrow {
                          position: absolute;
                          right: 10px;
                          top: 50%;
                          translate: 0 -50%;
                        }
                      }
                      &:hover {
                        background-color: var(--white_color);
                        border: 1px solid var(--white_color);
                        color: var(--theme_color);
                        svg {
                          path {
                            fill: var(--theme_color);
                          }
                        }
                      }
                    }
                  }

                  .form_details {
                    color: var(--white_color);
                    & > p {
                      font-weight: 500;
                      text-transform: uppercase;
                    }

                    &.credit {
                      h4 {
                        width: var(--width_100);
                        text-align: center;
                        font-weight: 300;
                        color: var(--theme_color);
                        font-size: var(--size_0p9rem);
                      }
                    }
                    p {
                      border: 0;
                      font-size: var(--size_0p85rem);
                      font-weight: 300;
                    }
                    .notes {
                      width: var(--width_100);
                      padding-bottom: var(--size_0p4em);
                      border-bottom: 1px solid var(--white_color_rgba2);
                      margin-bottom: var(--size_0p6em);
                      h4 {
                        text-transform: uppercase;
                        margin-bottom: var(--size_0p3em);
                        color: var(--white_color);
                        text-align: left;
                        font-size: var(--size_0p95rem);
                      }
                      p {
                        margin-bottom: 0;
                        &:last-child {
                          margin-bottom: var(--size_0p3em);
                        }
                      }
                      .div_element {
                        width: var(--width_100);
                        padding-top: var(--size_0p3em);

                        h5 {
                          width: var(--width_100);

                          font-size: var(--size_0p8rem);
                          font-weight: 400;
                          text-transform: uppercase;
                          margin-bottom: 8px;
                        }
                      }
                    }
                    h2 {
                      text-transform: uppercase;
                      margin-bottom: var(--size_0p3em);
                      color: var(--white_color);
                      text-align: left;
                      font-size: var(--size_0p95rem);
                    }
                  }
                }
              }

              .col_content {
                width: var(--width_100);
                .question_container,
                .question_container_ask {
                  width: var(--width_100);
                  border: 1px solid var(--white_color_rgba2);
                  border-radius: 6px;
                  margin-bottom: var(--size_1p0em);
                  position: relative;
                  .question {
                    width: var(--width_100);
                    background-color: var(--white_color);
                    padding: var(--size_0p4em) var(--size_0p8em);
                    border-top-left-radius: 6px;
                    border-top-right-radius: 6px;
                    border-bottom-left-radius: 6px;
                    border-bottom-right-radius: 6px;

                    cursor: pointer;
                    color: var(--secondary_color);
                    border: 1px solid var(--white_color);
                    h2 {
                      flex: 1;
                      text-align: left;
                      color: var(--secondary_color);
                      margin-bottom: 0;
                    }
                    span {
                      width: 20px;
                      height: 20px;
                      border-radius: 50%;
                      flex-shrink: 0;
                      transition: 300ms ease-in-out;
                      svg {
                        height: 90%;
                        width: 90%;
                        path {
                          fill: var(--secondary_color);
                        }
                      }
                      &.rotate {
                        rotate: -180deg;
                      }
                    }
                  }
                  .question_ask {
                    width: var(--width_100);
                    background-color: var(--white_color);
                    padding: var(--size_0p4em) var(--size_0p8em);
                    border-top-left-radius: 6px;
                    border-top-right-radius: 6px;
                    border-bottom-left-radius: 6px;
                    border-bottom-right-radius: 6px;

                    cursor: pointer;
                    color: var(--secondary_color);
                    border: 1px solid var(--white_color);
                    h2 {
                      flex: 1;
                      text-align: left;
                      color: var(--secondary_color);
                      margin-bottom: 0;
                    }
                    span {
                      color: var(--theme_color);
                    }
                  }
                  .question_form {
                    position: absolute;
                    padding: var(--size_1p0em);
                    opacity: 0;
                    pointer-events: none;
                    top: 10%;
                    left: 50%;
                    translate: -50%;
                    border-radius: 8px;
                    transition: 300ms ease-in-out;
                    width: var(--width_100);
                    border: 1px solid var(--white_color_rgba2);
                    z-index: 100;
                    background-color: var(--secondary_color);
                    h2 {
                      text-transform: none;
                      font-size: var(--size_0p9rem);
                      color: var(--white_color);
                    }

                    .field_group {
                      width: var(--width_100);
                      margin-bottom: var(--size_1p0em);
                      position: relative;
                      .dismiss_button {
                        position: absolute;
                        right: 8px;
                        top: 0;
                        color: var(--white_color);
                        font-size: var(--size_0p85rem);
                        text-align: center;
                        background-color: transparent;
                        border: 0;
                        font-weight: 500;
                        outline: none;
                        cursor: pointer;
                      }
                      .form_control_group {
                        width: var(--width_100);
                        color: var(--white_color);
                        flex: 1;
                        label {
                          display: block;
                          width: var(--width_100);
                          margin-bottom: var(--size_0p4em);
                          font-size: var(--size_1p0rem);
                        }
                        textarea,
                        input {
                          display: block;
                          width: var(--width_100);
                          background-color: transparent;
                          border-radius: 4px;
                          outline: none;
                          border: 1px solid var(--white_color_rgba2);
                          padding: var(--size_0p4em) var(--size_0p8em);
                          color: var(--white_color);
                          font-size: var(--size_0p85rem);
                          font-weight: 400;
                          &::placeholder {
                            color: var(--white_color_rgba);
                            opacity: 0.4;
                            font-size: var(--size_0p8rem);
                          }
                        }
                        textarea {
                          max-height: 100px;
                          resize: none;
                        }
                      }
                      &.double {
                        display: flex;
                        justify-content: space-between;
                        gap: var(--size_0p5em);
                      }
                    }
                    .submit_button {
                      display: block;
                      float: right;
                      border: 1px solid var(--white_color);
                      color: var(--secondary_color);
                      background-color: var(--white_color);
                      text-align: center;
                      padding: var(--size_0p4em) var(--size_4p0em);
                      border-radius: 4px;
                      transition: 250ms ease;
                      cursor: pointer;

                      &:hover {
                        background-color: var(--white_color);
                        color: var(--theme_color);
                      }
                    }
                    &.show {
                      top: 0;
                      opacity: 1;
                      pointer-events: initial;
                    }
                  }

                  .answer {
                    width: var(--width_100);

                    transition: 300ms ease-in-out;
                    display: grid;
                    grid-template-rows: 0fr;
                    .answer_content {
                      width: var(--width_100);
                      overflow: hidden;
                      p {
                        width: var(--width_100);
                        font-weight: 400;
                        text-align: justify;
                        font-size: var(--size_1p0rem);
                        padding: var(--size_0p5em);
                      }
                    }
                  }
                  &.show {
                    .question {
                      border-bottom-left-radius: 0;
                      border-bottom-right-radius: 0;
                    }

                    .answer {
                      grid-template-rows: 1fr;
                    }
                  }
                }
              }

              .form_titles {
                display: flex;
                align-items: center;
                justify-content: space-between;
                button {
                  cursor: pointer;
                  background-color: transparent;
                  width: 18px;
                  border: 0;
                  outline: none;
                  height: 18px;
                  svg {
                    width: var(--width_100);
                    height: var(--width_100);
                    path {
                      fill: var(--white_color);
                    }
                  }
                }
              }
            }

            .section {
              width: var(--width_100);

              .headline {
              
                h4 {
              
                  font-size: var(--size_1p0rem);
                
                }

                h5 {
                  
                  font-size: var(--size_0p9rem);
                }
                .btn {
                  display: none;
                }
              }
              .section_wrapper {
                width: var(--width_100);
                .service_card {
                  padding: var(--size_0p6em);
                  gap: 20px;
                  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                  &:not(:last-child) {
                    margin-bottom: var(--size_1p0em);
                  }

                  .plan_name {
                   
                    .icon {
                      width: 40px;
                      height: 40px;
                      display: block;
                      margin: auto;
                      border-radius: 50%;
                      svg {
                        width: var(--width_100);
                        height: var(--width_100);
                        path {
                          fill: var(--theme_color);
                        }
                      }
                    }
                    h2 {
                      text-transform: uppercase;
                      font-size: var(--size_1p2rem);
                      width: var(--width_100);
                      display: block;
                      text-align: center;
                      
                    }
                    h3,
                    h4 {
                      font-size: var(--size_1p0rem);
                      
                    }
                    h3 {
                      margin-bottom: 8px;
                    }
                    h4 {
                      span {
                        color: var(--white_color);
                      }
                    }
                  }

                  .interests {
                    
                    h3 {
                      font-size: var(--size_2p0rem);
                      
                      span {
                        font-size: var(--size_1p0rem);
                        
                      }
                    }
                    h4 {
                      font-size: var(--size_1p0rem);
                      margin-bottom: var(--size_0p6em);
                    }

                    .btn {
                      border-radius: 4px;
                      font-size: var(--size_1p0rem);
                      padding: var(--size_0p5em) var(--size_1p0em);
                      display: block;
                      width: var(--width_100);
                      text-align: center;
                      
                    }
                  }
                }
              }

              &.section_pages {
                .section_wrapper {
                  .service_card {
                    border-radius: 6px;
                    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

                    .plan_name {
                      .icon {
                        width: 40px;
                        height: 40px;
                      }
                      h2 {
                        font-size: var(--size_1p0rem);
                      }
                      h3,
                      h4 {
                        font-size: var(--size_0p95rem);
                      }
                      h4 {
                        span {
                          color: var(--white_color);
                        }
                      }
                    }

                    .interests {
                      h3 {
                        font-size: var(--size_1p8rem);
                      }
                      h4 {
                        font-size: var(--size_1p0rem);
                      }

                      .btn {
                       
                        border-radius: 4px;
                        font-size: var(--size_1p0rem);
                        padding: var(--size_0p5em) var(--size_1p0em);
                        
                      }
                    }
                  }
                }
              }
            }
          }

          .container_left {
            grid-column: 1/6;
            grid-row: 1/2;
            background-color: var(--secondary_color);
            border-radius: 8px;
            padding: var(--size_1p0em);
            .faq_form {
              position: absolute;
              padding: var(--size_1p0em);
              opacity: 0;
              pointer-events: none;
              top: 10%;
              left: 50%;
              translate: -50%;
              border-radius: 8px;
              transition: 300ms ease-in-out;
              width: var(--width_100);
              border: 1px solid var(--white_color_rgba2);
              z-index: 100;
              background-color: var(--secondary_color);

              .field_group {
                width: var(--width_100);
                margin-bottom: var(--size_1p0em);
                position: relative;
                .dismiss_button {
                  position: absolute;
                  right: 8px;
                  top: 0;
                  color: var(--white_color);
                  font-size: var(--size_0p85rem);
                  text-align: center;
                  background-color: transparent;
                  border: 0;
                  font-weight: 500;
                  outline: none;
                  cursor: pointer;
                }
                .form_control_group {
                  width: var(--width_100);
                  color: var(--white_color);
                  flex: 1;
                  label {
                    display: block;
                    width: var(--width_100);
                    margin-bottom: var(--size_0p4em);
                    font-size: var(--size_1p0rem);
                  }
                  textarea,
                  input {
                    display: block;
                    width: var(--width_100);
                    background-color: transparent;
                    border-radius: 4px;
                    outline: none;
                    border: 1px solid var(--white_color_rgba2);
                    padding: var(--size_0p4em) var(--size_0p8em);
                    color: var(--white_color);
                    font-size: var(--size_0p85rem);
                    font-weight: 400;
                    &::placeholder {
                      color: var(--white_color_rgba);
                      opacity: 0.4;
                      font-size: var(--size_0p8rem);
                    }
                  }
                  textarea {
                    max-height: 100px;
                    resize: none;
                  }
                }
                &.double {
                  display: flex;
                  justify-content: space-between;
                  gap: var(--size_0p5em);
                }
              }
              .submit_button {
                display: block;
                float: right;
                border: 1px solid var(--white_color);
                color: var(--secondary_color);
                background-color: var(--white_color);
                text-align: center;
                padding: var(--size_0p4em) var(--size_4p0em);
                border-radius: 4px;
                transition: 250ms ease;
                cursor: pointer;

                &:hover {
                  background-color: var(--white_color);
                  color: var(--theme_color);
                }
              }
              &.show {
                top: 0;
                opacity: 1;
                pointer-events: initial;
              }
            }
          }
          .container_right {
            grid-column: 1/6;
            grid-row: 2/3;
           
          }
          &.monies{
            overflow-y: unset;
            overflow: unset;
            
            
            .container_right {
            display: none;
           
          }

          


          }
        }

       
        
      }
    }
  }
}

@media (max-width: 475px) {
  .mobile_nav {
    display: block;
  }

  .main_nav {
    .nav_below {
      max-width: var(--width_90) !important;

      .navigation {
        justify-content: flex-end;
        .navigation_list {
          margin-right: 0;

          &.main_list {
            display: none;
          }
        }
      }
    }
    &.fixed {
      background-color: var(--secondary_color);
      position: fixed;
      top: 0;
      left: 0;
      .nav_below {
        .navigation {
          .navigation_list {
            &.main_list {
              .navigation_item {
                .nav_link {
                  &::after {
                    background-color: var(--theme_color);
                  }

                  &.current,
                  &:hover {
                    color: var(--theme_color);
                  }
                }
              }
            }

            &.auth_list {
              .navigation_item {
                .nav_link {
                  &:hover {
                    border: 1px solid var(--white_color);
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .mother_container {
    .home {
      .hero {
        max-width: var(--width_90);

        padding-top: 6vh;
        padding-bottom: 60px;

        .hero_content {
          color: var(--white_color);
          max-width: var(--width_90);
          h1 {
            /* text-transform: uppercase; */
            font-size: var(--size_1p6rem);

            font-weight: 300;
          }
          h4 {
            font-size: var(--size_0p95rem);
            margin-bottom: var(--size_2p0em);
          }
          .call_action {
            gap: var(--size_1p2em);
            span {
              width: 100px;
              height: 6px;
            }
            button {
              background-color: var(--white_color);
              border: 1px solid var(--white_color);
              padding: var(--size_0p4em) var(--size_2p2em);
              color: var(--theme_color);
              &:hover {
                background-color: transparent;
                color: var(--white_color);
              }
            }
          }
        }
      }
      .slider_buttons {
        width: 10px;

        right: 2.5%;

        /* translate: x y z ; */
        translate: 0 -50%;
        .buttons_bar {
          width: 10px;

          button {
            width: 8px;
            height: 20px;
          }
        }
      }
    }

    .section {
      width: var(--width_100);

      .headline {
        max-width: var(--width_90);
        margin: auto;
        margin-bottom: var(--size_4p0em);

        h4 {
          text-transform: uppercase;
          font-weight: 400;
          font-size: var(--size_1p1rem);
          margin-bottom: var(--size_0p4em);
          text-align: center;
          color: var(--theme_color);
          width: var(--width_100);
        }
        h2 {
          width: var(--width_100);
          font-size: var(--size_1p8rem);

          &::before {
            width: var(--width_60);
            bottom: -26%;
          }
          &::after {
            content: "";
            height: 18px;
            width: 18px;
            bottom: calc(-26% - 7px);
          }
        }
      }

      .section_wrapper {
        max-width: var(--width_90);
        margin: auto;

        .section_col {
          .about_image {
            width: var(--width_100);
            min-height: 340px;
            max-height: 360px;

            .small_image {
              width: 160px;
              height: 160px;
              border-radius: 4px;
              border-top-left-radius: 0px;
              position: absolute;
              right: 0px;

              &::after {
                height: 6px;
                background-color: var(--white_color);
                width: 166px;
                left: -6px;
                top: -6px;
              }
              &::before {
                content: "";
                height: calc(100% + 6px);

                width: 6px;
                position: absolute;
                left: -6px;
                top: -6px;
              }
            }
          }
          .about_content {
            width: var(--width_100);

            h4 {
              color: var(--theme_color);
              text-transform: uppercase;
              font-weight: 400;
              font-size: var(--size_1p1rem);
              margin-bottom: var(--size_0p6em);
            }
            h2 {
              color: var(--secondary_color);
              font-size: var(--size_2p0rem);
              text-align: left;
              margin-bottom: var(--size_0p2em);
            }
            p {
              font-size: var(--size_0p95rem);
              font-weight: 400;
            }
          }
          button {
            float: right;
          }
        }
      }
      &.vision {
        position: relative;
        z-index: 2;
        padding: 3em 0;
        .vision_bar {
          width: var(--width_80);
          position: relative;
          flex-direction: column;
          justify-content: center;
          justify-content: center;
          z-index: 2;
          bottom: auto;
          left: auto;
          margin: auto;
          translate: unset;

          gap: var(--size_2p0em);

          .card {
            background-color: var(--secondary_color);
            border-radius: 6px;
            border-color: var(--secondary_color);
            min-height: auto;
            flex: 1;
            .icon {
              margin-bottom: var(--size_1p2em);
              gap: var(--size_0p8em);

              h3 {
                text-transform: uppercase;
                font-size: var(--size_1p0rem);
                color: var(--theme_color);
                font-weight: 500;
              }
            }
          }
        }
      }

      &.not_found {
        height: 100vh;
        overflow: hidden;
        .section_wrapper {
          background-color: var(--sec_rgba_clr);
          border: 1px solid var(--btn_clr);
          padding: var(--size_2p2em);
          border-radius: 4px;
          h1 {
            font-size: var(--size_2p4rem);
            font-weight: 500;
            margin-bottom: var(--size_0p6em);
          }
          .red_buttons {
            gap: var(--size_1p0em);
            .btn {
              padding: var(--size_0p5em) var(--size_2p4em);
              border: 1px solid transparent;
              &:hover {
                background-color: var(--sec_text_clr);
                border: 1px solid var(--btn_clr);
                color: var(--btn_clr);
              }
              &:first-child {
                background-color: var(--btn_clr);
                color: var(--sec_text_clr);
                border: 1px solid var(--btn_clr);
                &:hover {
                  background-color: var(--sec_text_clr);
                  border: 1px solid var(--btn_clr);
                  color: var(--btn_clr);
                }
              }
            }
          }
        }
      }
      &.services {
        background-color: var(--secondary_color);
        padding: 6em 0;

        & > .main_buttons {
          margin-top: 8vh;
          float: unset;
        }

        .headline {
          margin-bottom: 20vh;
          h2 {
            color: var(--white_color);
          }
        }
        .section_wrapper {
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 0;
          .section_col {
            .service_card {
              position: relative;
              min-height: 400px;

              border-radius: 8px;

              .card_layer {
                background-color: var(--white_color);
                color: var(--secondary_color);
                position: absolute;
                border-radius: 8px;
                z-index: 5;
                bottom: 0;
                left: 0;
                transition: all 350ms ease;
                width: var(--width_100);
                overflow: hidden;
                height: 0;
                .layer_content {
                  padding: var(--size_2p2em) var(--size_1p6em);

                  h2 {
                    font-size: var(--size_1p1em);
                    margin-bottom: var(--size_1p0em);
                    text-align: center;
                    color: var(--secondary_color);
                  }
                  p {
                    text-align: justify;
                    font-size: var(--size_1p0rem);
                    font-weight: 400;
                    margin-bottom: var(--size_1p0em);
                    color: var(--secondary_color);
                  }
                  .main_buttons {
                    display: block;
                    margin: auto;
                    margin-top: var(--size_2p0em);
                    float: unset;
                    width: var(--width_70);
                    color: var(--secondary_color);
                    background-color: var(--white_color);
                    border-color: var(--secondary_color);
                    &:hover {
                      border-color: var(--theme_color);
                      color: var(--theme_color);
                    }
                  }
                }
              }
            }
            &.middle {
              margin-top: 20vh;
              margin-bottom: 20vh;
            }
          }
        }
      }

      &.investment {
        padding: 4em 0;

        & > .main_buttons {
          margin-top: 15vh;
        }

        .headline {
          margin-bottom: 10vh;
        }
        .section_wrapper {
          .section_col {
            .service_card {
              position: relative;
              min-height: 500px;
              border: 1px solid var(--secondary_color);
              border-radius: 8px;
              background-color: var(--white_color);

              .card_layer {
                background-color: var(--secondary_color);
                color: var(--white_color);
                position: absolute;
                border-radius: 8px;
                z-index: 2;
                bottom: 0;
                left: 0;
                transition: all 350ms ease;
                width: 0;
                height: var(--width_100);
              }

              .plan_name {
                width: var(--width_100);
                background-color: var(--secondary_color);
                position: relative;
                z-index: 5;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
                text-align: center;
                padding: var(--size_1p4em) var(--size_0p6em);
                color: var(--white_color);
                margin-bottom: var(--size_1p0em);
                border-bottom: 1px solid var(--white_color);

                .icon {
                  display: block;
                  margin: auto;
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  svg {
                    width: 45px;
                    height: 45px;
                    path {
                      fill: var(--theme_color);
                    }
                  }
                }
                h2 {
                  font-weight: 400;
                  font-size: var(--size_1p4rem);
                  font-family: var(--minor_family);
                  text-transform: uppercase;
                  margin-bottom: var(--size_0p8em);
                }
                h3 {
                  font-weight: 400;
                  font-size: var(--size_2p0rem);
                  font-family: var(--minor_family);
                  text-transform: uppercase;
                  margin-bottom: var(--size_0p2em);
                  color: var(--theme_color);
                }
                h4 {
                  font-weight: 400;
                  font-size: var(--size_1p2rem);
                }
              }
              .plan_details {
                position: relative;
                z-index: 4;
                padding: var(--size_0p5em) var(--size_1p0em);

                h3 {
                  font-weight: 500;
                  font-size: var(--size_1p2rem);
                  text-transform: uppercase;
                  margin-bottom: var(--size_0p4em);
                }
                ul {
                  width: var(--width_100);
                  padding-left: var(--size_0p5em);
                  li {
                    width: var(--width_100);
                    font-weight: 400;
                    font-size: var(--size_1p0rem);
                    gap: var(--size_0p6em);

                    &:not(:last-child) {
                      margin-bottom: var(--size_0p4em);
                    }
                    span {
                      flex-shrink: 0;
                      width: 8px;
                      height: 8px;
                      border-radius: 50%;
                      background-color: var(--secondary_color);
                    }
                  }
                }
              }
              .plan_button {
                position: absolute;
                right: 0;
                bottom: 0;
                z-index: 6;

                .plan_buttons {
                  width: 150px;
                  color: var(--secondary_color);
                  background-color: var(--white_color);
                  font-size: var(--size_1p2rem);
                  padding: var(--size_0p6em);
                  border-top-left-radius: 8px;
                  border-bottom-right-radius: 8px;
                  border-top: 2px solid var(--secondary_color);
                  border-left: 2px solid var(--secondary_color);
                  float: none;
                  text-align: center;
                  font-weight: 400;

                  &:hover {
                    border-top: 2px solid var(--white_color);
                    border-left: 2px solid var(--white_color);
                    color: var(--white_color);
                    background-color: var(--secondary_color);
                  }
                }
              }
              .interests {
                margin-top: var(--size_1p2em);
                padding-left: var(--size_1p2em);
                position: relative;
                z-index: 4;
                color: var(--theme_color);
                h3 {
                  font-weight: 400;
                  font-size: var(--size_2p0rem);
                }
                h4 {
                  font-weight: 300;
                  font-size: var(--size_1p0rem);
                }
              }
              &:hover {
                .card_layer {
                  width: var(--width_100);
                }
                .plan_details {
                  color: var(--white_color);

                  ul {
                    li {
                      span {
                        background-color: var(--white_color);
                      }
                    }
                  }
                }

                .interests {
                  color: var(--white_color);
                }
              }
            }
            &.middle {
              margin-top: 10vh;
            }
          }
        }
      }
      &.reasons {
        padding: 4em 0;

        .headline {
          margin-bottom: 10vh;
          h2 {
            &::after {
              border: 1px solid var(--white_color);
              background-color: var(--theme_color);
            }
          }
        }
        .section_wrapper {
          grid-template-columns: repeat(1, minmax(300px, 1fr));

          .section_col {
            margin-bottom: 30px;
            min-height: auto;
            flex-wrap: wrap;
            .col_left {
              height: 240px;
              width: 100%;
              flex-basis: 100%;
              position: relative;
              border-radius: 6px;
            }
            .col_right {
              flex-basis: 100%;
              width: 100%;
              margin-bottom: 10px;

              .icon {
                margin-bottom: var(--size_1p0em);
                svg {
                  width: 30px;
                  height: 30px;
                  flex-shrink: 0;
                  path {
                    fill: var(--theme_color);
                  }
                }
                h3 {
                  margin-left: var(--size_1p0em);
                  font-size: var(--size_1p4rem);
                  text-transform: uppercase;
                  color: var(--theme_color);
                  flex: 1;
                  padding-bottom: var(--size_0p3em);
                  border-bottom: 1px solid var(--theme_color);
                }
              }
              p {
                color: var(--secondary_color);
                font-weight: 400;
                font-size: var(--size_1p1rem);
                text-align: justify;
              }
            }
            &:nth-child(odd) {
              .col_left {
                order: 2;
              }
              .col_right {
                order: 1;
              }
            }
            &:nth-child(even) {
              .col_left {
                order: 2;
              }
              .col_right {
                order: 1;
              }
            }
          }
        }
      }
      &.testimonial {
        padding: 4em 0;

        & > .main_buttons {
          margin-top: 10vh;
        }

        .headline {
          margin-bottom: 10vh;
          h2 {
            &::after {
              border: 1px solid var(--white_color);
              background-color: var(--theme_color);
            }
          }
        }
        .section_wrapper {
          width: 100%;
          overflow-x: scroll;
          .slider_wrapper {
            width: 600%;
            margin-bottom: var(--size_2p4em);
            gap: 0.8%;

            .section_col {
              width: 16%;
              min-width: 16%;

              .col_content {
                height: 260px;
                overflow-y: scroll;
                .quote {
                  display: block;
                  float: left;
                  width: 30px;
                  margin-right: var(--size_0p6em);
                  svg {
                    height: 32px;
                    width: 32px;
                    path {
                      fill: var(--theme_color);
                      stroke-width: 0px;
                    }
                  }
                }
                p {
                  text-align: justify;
                  font-size: var(--size_0p95rem);
                  margin-bottom: var(--size_1p2em);
                  color: var(--white_color);
                }
                .names {
                  width: var(--width_100);
                  .stars {
                    margin-bottom: var(--size_0p4em);
                    img {
                      width: 100px;
                      object-fit: cover;
                    }
                    svg {
                      width: 100px;
                      path {
                        fill: var(--theme_color);
                        stroke-width: 0px;
                      }
                    }
                  }
                  h3 {
                    font-weight: 500;
                    text-transform: uppercase;
                    color: var(--theme_color);

                    font-size: var(--size_1p1rem);
                    margin-bottom: var(--size_0p4em);
                  }
                  h4 {
                    font-weight: 400;
                    color: var(--white_color);
                    font-size: var(--size_1p0rem);
                  }
                }
              }
            }
          }
        }
      }

      &.contact {
        background-color: var(--secondary_color);
        padding: 6em 0;

        .headline {
          margin-bottom: 10vh;
          h2 {
            color: var(--white_color);
          }
        }
        .section_wrapper {
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 30px;
          .section_col {
            button {
              float: none;
            }
            .col_content {
              width: var(--width_100);
              gap: 20px;
              flex-wrap: wrap;
              row-gap: 26px;
              .box {
                flex-basis: 100%;
                width: 100%;

                border-radius: 8px;
                padding: 15px;
                .icon {
                  margin: auto;
                  width: 35px;
                  height: 35px;
                  border-radius: 50%;
                  background-color: var(--white_color);
                  margin-bottom: var(--size_0p6em);
                  svg {
                    width: var(--width_60);
                    height: var(--width_60);
                    path {
                      fill: var(--secondary_color);
                    }
                  }
                }
                h3,
                h4 {
                  width: var(--width_100);
                  text-align: center;
                  color: var(--white_color);
                  font-weight: 400;
                }
                h3 {
                  font-size: var(--size_1p4rem);
                }
                .socials {
                  gap: 20px;
                  .social_btn {
                    height: 24px;
                    width: 24px;
                  }
                }
              }
              h2 {
                font-weight: 400;
                font-size: var(--size_1p4rem);
                text-transform: uppercase;
                color: var(--white_color);
                margin-bottom: var(--size_0p6em);
              }
              p {
                width: var(--width_100);
                text-align: justify;
                color: var(--white_color);
                margin-bottom: var(--size_0p6em);
              }
            }
            &.contact {
              grid-column: auto;
            }
            &.reach_us {
              grid-column: auto;
              grid-row: auto;
            }
          }
        }
      }
      &.faqs {
        padding: 4em 0;

        .headline {
          margin-bottom: 10vh;
          h2 {
            &::after {
              border: 1px solid var(--white_color);
              background-color: var(--theme_color);
            }
          }
        }
        .section_wrapper {
          .section_col {
            .question_image {
              display: none;
            }
            .col_content {
              width: var(--width_100);
              .question_container {
                width: var(--width_100);
                border: 1px solid var(--secondary_color);
                border-radius: 4px;
                margin-bottom: var(--size_1p0em);
                .question {
                  width: var(--width_100);
                  background-color: var(--secondary_color);
                  border: 1px solid var(--secondary_color);
                  padding: var(--size_0p4em) var(--size_0p8em);

                  cursor: pointer;
                  color: var(--white_color);

                  span {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    flex-shrink: 0;
                    transition: all 300ms ease-in-out;
                    svg {
                      height: 90%;
                      width: 90%;
                      path {
                        fill: var(--white_color);
                      }
                    }
                    &.rotate {
                      rotate: -180deg;
                    }
                  }
                }

                .answer {
                  width: var(--width_100);
                  border-bottom-left-radius: 4px;
                  border-bottom-right-radius: 4px;
                  transition: all 300ms ease-in-out;
                  display: grid;
                  grid-template-rows: 0fr;
                  .answer_content {
                    width: var(--width_100);
                    overflow: hidden;
                    p {
                      font-weight: 400;
                      font-size: var(--size_1p0rem);
                      padding: var(--size_0p5em);
                    }
                  }
                  &.show {
                    grid-template-rows: 1fr;
                  }
                }
              }
            }

            &.col_left {
              flex: unset;
            }
            &.col_right {
              flex-basis: 100%;
              width: 100%;
            }
          }
        }
      }
      .slider_btns {
        max-width: var(--width_80);
        margin: auto;
        gap: var(--size_1p2em);
        .btn {
          width: 18px;
          height: 18px;
          background-color: var(--secondary_color);
          &.current,
          &:hover {
            background-color: var(--theme_color);
          }
        }
        &.larger {
          display: none;
        }
        &.smaller {
          display: flex;
        }
      }
    }

    .bridge {
      width: var(--width_100);
      min-height: 300px;

      .bridge_content {
        width: var(--width_90);
        max-width: var(--width_90);
        flex-wrap: wrap;

        .left {
          flex-basis: 100%;
          width: var(--width_100);
          margin-bottom: 10px;
        }
        h2 {
          font-size: var(--size_2p0rem);

          font-weight: 400;
          text-align: center;
          width: var(--width_100);
        }
        p {
          font-size: var(--size_0p95rem);
          font-weight: 400;
          text-align: center;
          margin-bottom: 20px;
        }
        .main_buttons {
          float: unset;
          margin-top: 1em;
          display: block;
          margin: auto;
        }
      }
    }
  }
  footer {
    .footer_content {
      max-width: var(--width_90);

      .left {
        flex: 1;
      }
      .left {
        gap: var(--size_1p0em);
        img {
          width: 50px;
        }
        h3 {
          text-transform: uppercase;
          font-size: var(--size_1p6rem);
          font-weight: 400;
        }
      }
      .footer_nav {
        position: fixed;
        opacity: 0;
        pointer-events: none;
        transition: all 350ms ease-in-out;
        left: 0;
        bottom: 0;
        z-index: 5900;
        width: var(--width_100);
        border-top: 1px solid var(--white_color);
        padding: 20px 7.5%;
        background-color: var(--secondary_color);
        justify-content: space-between;
        align-items: center;

        gap: 10px;
        .btn {
          font-weight: 400;
          transition: all 0.25s ease-in-out;
          border-radius: 0;
          font-size: var(--size_0p95rem);

          &:hover {
            border-bottom: 1px solid var(--white_color);
          }
          &.hide {
            display: none;
          }
        }

        &.visible {
          bottom: 9%;
          opacity: 1;
          pointer-events: initial;
        }
      }
      .socials {
        gap: var(--size_1p0em);
        .social_btn {
          width: 23px;
          height: 23px;
          border-radius: 50%;
          background-color: transparent;
          border: 0;
          cursor: pointer;
          svg {
            width: 100%;
            height: 100%;
            path {
              fill: var(--white_color);
            }
          }
        }
      }
    }
    .copy_line {
      width: var(--width_100);
      border-top: 1px solid var(--white_color);
      padding: var(--size_1p0em);
      padding-bottom: 90px;
      p {
        width: var(--width_100);
        text-align: center;
        font-size: var(--size_0p9rem);
      }
    }
  }
}