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

.main_buttons {
  background-color: var(--sec_text_clr);
  border: 1px solid var(--sec_text_clr);
  padding: var(--size_0p4em) var(--size_2p5em);
  color: var(--btn_clr);
  &:hover {
    background-color: var(--btn_clr);
    color: var(--sec_text_clr);
    border: 1px solid var(--btn_clr);
  }
}
.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(--sec_text_clr);
      margin: auto;
      margin-bottom: var(--size_0p6em);
      svg {
        width: var(--width_70);
        height: var(--width_70);
        path {
          fill: var(--btn_clr);
        }
      }
    }
    h3,
    h4 {
      color: var(--sec_text_clr);
      text-align: center;
      width: var(--width_100);
      font-weight: 400;
    }
    h3 {
      text-transform: uppercase;
      font-size: var(--size_1p5rem);
      margin-bottom: var(--size_0p2em);
    }
  }
  .field_group {
    width: var(--width_100);
    margin-bottom: var(--size_1p0em);
    .form_control_group {
      color: var(--text_clr);
      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);
        font-size: var(--size_1p0rem);
        background-color: transparent;
        border-radius: 4px;
        outline: none;
        border: 1px solid var(--btn_clr);
        padding: var(--size_0p4em) var(--size_0p8em);
        color: var(--text_clr);
        font-size: var(--size_0p95rem);
        font-weight: 400;
        &::placeholder {
          color: var(--hover_clr);
          opacity: 0.65;
        }
      }
      textarea {
        max-height: 100px;
        resize: none;
      }
    }
    &.double {
      display: flex;
      justify-content: space-between;
      gap: var(--size_0p5em);
    }
  }
  .submit_button {
    display: block;
    margin-left: 0;
    border: 1px solid var(--btn_clr);
    color: var(--sec_text_clr);
    background-color: var(--btn_clr);
    text-align: center;
    padding: var(--size_0p4em) var(--size_4p0em);
    border-radius: 4px;
    &:hover {
      color: var(--btn_clr);
      background-color: var(--sec_text_clr);
    }
  }
  &.contact_form {
    .field_group {
      .form_control_group {
        label {
          display: none;
        }
      }
    }
  }
  &.news_form {
    .field_group {
      .btn {
        width: var(--width_30);
        background-color: var(--btn_clr);
        border-radius: 4px;
        border: 1px solid var(--btn_clr);
        color: var(--sec_text_clr);
        &:hover {
          color: var(--btn_clr);
          background-color: var(--sec_text_clr);
        }
      }
      .form_control_group {
        width: var(--width_60);

        label {
          display: none;
        }
      }
    }
  }
  &.account_form {
    background-color: var(--btn_clr);
    .field_group {
      .form_control_group {
        color: var(--sec_text_clr);

        textarea,
        input {
          border-radius: 0px;
          border-bottom-left-radius: 10px;
          border: 0;
          border-bottom: 1px solid var(--sec_text_clr);
          padding: var(--size_0p4em) var(--size_0p8em);
          color: var(--sec_text_clr);
          font-size: var(--size_1p0rem);
          &::placeholder {
            color: var(--sec_rgba_clr);
            font-size: var(--size_0p9rem);
            opacity: 0.85;
          }
        }
        textarea {
          max-height: 100px;
          resize: none;
        }
      }
      .other_actions {
        color: var(--sec_text_clr);
        gap: var(--size_0p4em);

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

            svg {
              width: var(--width_70);
              height: var(--width_70);
              path {
                fill: var(--btn_clr);
                stroke-width: 0px;
              }
            }
          }
          input {
            opacity: 0;
            pointer-events: none;
          }
        }
      }
      .btn.alt_btn {
        border: 0;
        color: var(--sec_text_clr);
        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(--sec_text_clr);
      color: var(--btn_clr);
      background-color: var(--sec_text_clr);
      padding: var(--size_0p4em) var(--size_4p0em);
      &:hover {
        color: var(--sec_text_clr);
        background-color: var(--btn_clr);
      }
    }
  }
}
.mother_container {
  background-color: var(--body_clr);
  background-attachment: fixed;

  .main_nav {
    width: var(--width_100);
    padding: var(--size_2p0rem) 0;
    transition: all 300ms ease-in-out;
    &.fixed {
      background-color: var(--btn_clr);
      position: fixed;
      top: 0;
      left: 0;
      .nav_below {
        .navigation {
          .navigation_list {
            &.main_list {
              .navigation_item {
                .nav_link {
                  &::after {
                    background-color: var(--sec_text_clr);
                  }

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

            &.auth_list {
              .navigation_item {
                .nav_link {
                  &:hover {
                    border: 1px solid var(--sec_text_clr);
                  }
                }
              }
            }
          }
        }
      }
    }
    z-index: 4;
  }
  .nav_below {
    margin: auto;
    max-width: var(--width_80);
    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_1p2rem);
            color: var(--sec_text_clr);
            position: relative;
          }
        }
        &.main_list {
          .navigation_item {
            .nav_link {
              position: relative;
              &::after {
                content: "";
                width: 0;
                height: 2px;
                background-color: var(--btn_clr);
                position: absolute;
                left: 50%;
                transition: inherit;
                transform: translateX(-50%);
                bottom: 0;
              }

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

        &.auth_list {
          .navigation_item {
            &:first-child {
              margin-right: var(--size_1p2em);
            }
            .nav_link {
              background-color: var(--sec_text_clr);
              color: var(--btn_clr);
              font-weight: 400;
              &:hover {
                background-color: var(--btn_clr);
                color: var(--sec_text_clr);
              }
            }
          }
        }
      }
    }
  }
  .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;
    &::before {
      content: "";
      background-color: rgba(0, 0, 0, 0.75);
      position: absolute;
      right: 0;
      left: 0;
      width: var(--width_100);
      height: var(--width_100);
    }

    .hero {
      max-width: var(--width_80);
      margin: auto;
      position: relative;
      z-index: 2;

      .hero_content {
        margin-top: 20vh;
        color: var(--sec_text_clr);
        max-width: var(--width_60);
        h1 {
          /* text-transform: uppercase; */
          font-size: var(--size_3p2rem);
          width: var(--width_100);
          line-height: var(--size_1p4em);
          margin-bottom: var(--size_0p5em);
          font-weight: 300;
        }
        h4 {
          font-size: var(--size_1p2rem);
          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(--sec_text_clr);
            border-radius: 5px;
          }
          button {
            background-color: var(--sec_text_clr);
            border: 1px solid var(--sec_text_clr);
            padding: var(--size_0p4em) var(--size_2p5em);
            color: var(--btn_clr);
            &:hover {
              background-color: var(--btn_clr);
              color: var(--sec_text_clr);
              border: 1px solid var(--btn_clr);
            }
          }
        }
      }
    }
    .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(--sec_text_clr);
          border-radius: 8px;
          &.current {
            opacity: 1;
          }
        }
      }
    }

    .vision_bar {
      width: var(--width_70);
      background-color: var(--sec_text_clr);
      position: absolute;
      z-index: 2;
      bottom: -14%;
      left: 50%;
      translate: -50%;
      gap: var(--size_2p0em);
      padding: var(--size_2p0em) var(--size_2p5em);
      border-radius: 2px;
      .card {
        flex: 1;
        .icon {
          margin-bottom: var(--size_1p2em);
          gap: var(--size_0p8em);

          h3 {
            text-transform: uppercase;
            font-size: var(--size_1p2rem);
            color: var(--btn_clr);
            font-weight: 500;
            flex: 1;
            padding-bottom: var(--size_0p2em);
            border-bottom: 2px solid var(--btn_clr);
          }
          svg {
            height: 30px;
            width: 30px;
            flex-shrink: 0;
            path {
              fill: var(--btn_clr);
            }
          }
        }
        p {
          text-align: justify;
          color: var(--text_clr);
          font-size: var(--size_1p0rem);
        }
      }
    }
    &.auth_home {
      margin-bottom: 0;
      background-image: url("/images/auth_bg.jpg");
      &::before {
        background-color: rgba(0, 0, 0, 0.85);
      }
      .hero {
        max-width: var(--width_100);
        border-top: 1px solid var(--btn_clr);

        height: 86vh;
        grid-template-columns: repeat(3, minmax(300px, 1fr));
        grid-template-rows: 1fr;
        .form_buttons {
          grid-column: span 1;
          position: relative;
          .controllers {
            position: absolute;
            right: 0;
            top: 50%;
            translate: 0 -50%;

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

              .span_top {
                width: 60px;
                height: 50px;
                border-bottom-right-radius: 20px;
                position: absolute;
                right: -5px;
                top: -47px;
                border-bottom: 4px solid transparent;
                border-right: 4px solid transparent;
                transition: inherit;
                &::after {
                  content: "";
                  width: 15px;
                  height: 15px;
                  position: absolute;
                  border-radius: 50%;
                  background-color: transparent;
                  bottom: -6px;
                  right: -10px;
                  transition: inherit;
                }
              }
              .span_bottom {
                width: 60px;
                height: 50px;
                border-top-right-radius: 20px;
                position: absolute;
                transition: inherit;
                right: -5px;
                bottom: -46px;
                border-top: 4px solid transparent;
                border-right: 4px solid transparent;
                &::after {
                  content: "";
                  width: 15px;
                  height: 15px;
                  position: absolute;
                  transition: inherit;
                  border-radius: 50%;
                  background-color: transparent;
                  top: -6px;
                  right: -11px;
                }
              }

              &.current {
                background-color: var(--btn_clr);
                border: 1px solid var(--btn_clr);
                .span_top {
                  border-bottom: 4px solid var(--btn_clr);
                  border-right: 4px solid var(--btn_clr);
                  &::after {
                    background-color: var(--btn_clr);
                  }
                }
                .span_bottom {
                  border-top: 4px solid var(--btn_clr);
                  border-right: 4px solid var(--btn_clr);
                  &::after {
                    background-color: var(--btn_clr);
                  }
                }
              }
            }
          }
        }
        .form_content {
          background-color: var(--btn_clr);
          grid-column: 2/4;
          .forms_container {
            width: var(--width_100);
            padding: var(--size_4p0em);
            padding-right: var(--width_20);
            position: relative;
            overflow: hidden;
            height: var(--width_100);
            .data_form {
              max-width: var(--width_65);
              border: 1px solid var(--sec_rgba_clr);
              border-radius: 10px;
              padding: var(--size_2p0em);
              transition: 300ms ease-in-out;
              &#login_form {
                position: absolute;
                z-index: 6;
                translate: 0 0;
              }
              &#signup_form {
                position: absolute;
                z-index: 2;
                translate: 0 120%;
              }
              &.focus#login_form {
                translate: 0 -140%;
              }
              &.focus#signup_form {
                translate: 0 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;
        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(--btn_clr);
          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(--btn_clr);
          background-color: var(--sec_text_clr);

          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(--sec_text_clr);
              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(--sec_text_clr);
              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);
          color: var(--text_clr);

          h4 {
            text-transform: uppercase;
            font-weight: 400;
            font-size: var(--size_1p2rem);
            margin-bottom: var(--size_0p6em);
          }
          h2 {
            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;
          }
        }
        button {
          float: right;
        }
      }
    }
    &.about {
      .section_wrapper {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--width_5);
        margin-bottom: 15vh;
      }
    }
    &.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(--sec_text_clr);
      padding: 6em 0;

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

          color: var(--btn_clr);
        }
      }

      .headline {
        margin-bottom: 20vh;
      }
      .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(50, 50, 93, 0.25) 0px 2px 5px -1px,
              rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
            /* box-shadow: none|h-offset v-offset blur spread color; */
            .card_layer {
              background-color: var(--btn_clr);
              color: var(--sec_text_clr);
              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: 30px;
                  height: 30px;
                  background-color: var(--sec_text_clr);

                  margin: auto;
                  margin-bottom: var(--size_1p0em);
                  border-radius: 50%;
                  border: 1px solid var(--sec_text_clr);

                  svg {
                    width: 20px;
                    height: 20px;
                    path {
                      fill: var(--btn_clr);
                    }
                  }
                }
                h2 {
                  text-transform: uppercase;
                  font-weight: 500;
                  font-size: var(--size_1p1em);
                  margin-bottom: var(--size_1p0em);
                  text-align: center;
                }
                p {
                  text-align: justify;
                  font-size: var(--size_1p0rem);
                  font-weight: 400;
                  margin-bottom: var(--size_1p0em);
                }
                .main_buttons {
                  display: block;
                  margin: auto;
                  margin-top: var(--size_2p0em);
                  float: unset;
                  width: var(--width_70);
                  &:hover {
                    border-color: var(--sec_text_clr);
                  }
                }
              }
            }
            .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: rgba(0, 0, 0, 0.4);
                  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(--body_clr);
                  position: absolute;
                  right: 0;
                  border-radius: 4px;
                  z-index: 2;
                  left: 0;
                  width: var(--width_100);
                  height: var(--width_100);
                  opacity: 0.6;
                }
              }
              .card_card_content {
                padding: var(--size_2p2em) var(--size_1p2em);
                color: var(--text_clr);
                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(--btn_clr);
        color: var(--sec_text_clr);
        border-color: var(--btn_clr);
        &:hover {
          background-color: var(--sec_text_clr);

          color: var(--btn_clr);
        }
      }

      .headline {
        margin-bottom: 10vh;
        h2 {
          &::after {
            border: 1px solid var(--sec_text_clr);
            background-color: var(--btn_clr);
          }
        }
      }
      .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-left: 2px solid var(--btn_clr);
            border-radius: 8px;
            background-color: var(--sec_text_clr);

            .card_layer {
              background-color: var(--btn_clr);
              color: var(--sec_text_clr);
              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(--btn_clr);
              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(--sec_text_clr);
              margin-bottom: var(--size_1p0em);
              border-bottom: 1px solid var(--sec_text_clr);

              .icon {
                display: block;
                margin: auto;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                svg {
                  width: 45px;
                  height: 45px;
                  path {
                    fill: var(--sec_text_clr);
                  }
                }
              }
              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);
              }
              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(--btn_clr);
                  }
                }
              }
            }
            .plan_button {
              position: absolute;
              right: 0;
              bottom: 0;
              z-index: 6;

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

                &:hover {
                  border-top: 2px solid var(--sec_text_clr);
                  border-left: 2px solid var(--sec_text_clr);
                  color: var(--sec_text_clr);
                  background-color: var(--btn_clr);
                }
              }
            }
            .interests {
              margin-top: var(--size_1p2em);
              padding-left: var(--size_1p2em);
              position: relative;
              z-index: 4;
              color: var(--btn_clr);
              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(--sec_text_clr);

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

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

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

          color: var(--btn_clr);
        }
      }

      .headline {
        margin-bottom: 10vh;
        h2 {
          &::after {
            border: 1px solid var(--sec_text_clr);
            background-color: var(--btn_clr);
          }
        }
      }
      .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: rgba(0, 0, 0, 0.4);
              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(--body_clr);
              position: absolute;
              right: 0;
              border-radius: 8px;
              z-index: 2;
              left: 0;
              width: var(--width_100);
              height: var(--width_100);
              opacity: 0.6;
            }
          }
          .col_right {
            flex-basis: 55%;

            .icon {
              margin-bottom: var(--size_1p0em);
              svg {
                width: 30px;
                height: 30px;
                flex-shrink: 0;
                path {
                  fill: var(--btn_clr);
                }
              }
              h3 {
                margin-left: var(--size_1p0em);
                font-size: var(--size_1p4rem);
                text-transform: uppercase;
                color: var(--btn_clr);
                flex: 1;
                padding-bottom: var(--size_0p3em);
                border-bottom: 1px solid var(--btn_clr);
              }
            }
            p {
              color: var(--text_clr);
              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(--btn_clr);
        color: var(--sec_text_clr);
        border-color: var(--btn_clr);
        &:hover {
          background-color: var(--sec_text_clr);

          color: var(--btn_clr);
        }
      }

      .headline {
        margin-bottom: 10vh;
        h2 {
          &::after {
            border: 1px solid var(--sec_text_clr);
            background-color: var(--btn_clr);
          }
        }
      }
      .section_wrapper {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--width_025);
        margin-bottom: var(--size_2p4em);
        .section_col {
          .col_content {
            width: var(--width_100);
            background-color: var(--sec_rgba_clr);
            padding: var(--size_0p8em);
            border-radius: 8px;
            .quote {
              display: block;
              float: left;
              width: 30px;
              margin-right: var(--size_0p6em);
              svg {
                height: 32px;
                width: 32px;
                path {
                  fill: #6878d6;
                  stroke-width: 0px;
                }
              }
            }
            p {
              text-align: justify;
              font-size: var(--size_1p0rem);
              margin-bottom: var(--size_0p6em);
            }
            .names {
              width: var(--width_100);
              .stars {
                margin-bottom: var(--size_0p4em);
                svg {
                  width: 100px;
                  path {
                    fill: #6878d6;
                    stroke-width: 0px;
                  }
                }
              }
              h3 {
                font-weight: 500;
                text-transform: uppercase;
                color: var(--btn_clr);

                font-size: var(--size_1p2rem);
              }
              h4 {
                font-weight: 400;
                color: var(--btn_clr);
                font-size: var(--size_1p0rem);
              }
            }
          }
        }
      }
    }

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

      .headline {
        margin-bottom: 10vh;
      }
      .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(77, 82, 116, 0.25) 0px 2px 5px -1px,
                rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
              border-radius: 8px;
              padding: 30px;
              .icon {
                margin: auto;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: var(--btn_clr);
                margin-bottom: var(--size_0p6em);
                svg {
                  width: var(--width_60);
                  height: var(--width_60);
                  path {
                    fill: var(--sec_text_clr);
                  }
                }
              }
              h3,
              h4 {
                width: var(--width_100);
                text-align: center;
                color: var(--btn_clr);
                font-weight: 400;
              }
              h3 {
                font-size: var(--size_1p8rem);
              }
              .socials {
                gap: 20px;
                .social_btn {
                  height: 26px;
                  width: 26px;
                  outline: none;
                  border-radius: 50%;
                  cursor: pointer;
                  border: 0;
                  background-color: transparent;
                  svg {
                    height: var(--width_90);
                    width: var(--width_90);
                    path {
                      fill: var(--btn_clr);
                    }
                  }
                }
              }
            }
            h2 {
              font-weight: 400;
              font-size: var(--size_1p4rem);
              text-transform: uppercase;
              color: var(--btn_clr);
              margin-bottom: var(--size_0p6em);
            }
            p {
              width: var(--width_100);
              text-align: justify;
              color: var(--text_clr);
              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(--sec_text_clr);
            background-color: var(--btn_clr);
          }
        }
      }
      .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: rgba(0, 0, 0, 0.4);
              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(--body_clr);
              position: absolute;
              right: 0;
              border-radius: 8px;
              z-index: 2;
              left: 0;
              width: var(--width_100);
              height: var(--width_100);
              opacity: 0.6;
            }
          }
          .col_content {
            width: var(--width_100);
            .question_container {
              width: var(--width_100);
              border: 1px solid var(--btn_clr);
              border-radius: 4px;
              margin-bottom: var(--size_1p0em);
              .question {
                width: var(--width_100);
                background-color: var(--btn_clr);
                border: 1px solid var(--btn_clr);
                padding: var(--size_0p4em) var(--size_0p8em);

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

                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(--sec_text_clr);
                    }
                  }
                  &.rotate {
                    rotate: -180deg;
                  }
                }
              }

              .answer {
                width: var(--width_100);
                background-color: var(--sec_text_clr);
                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(--sec_rgba_clr);
        &.current,
        &:hover {
          background-color: var(--sec_text_clr);
        }
      }
    }
  }

  .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: fixed;
    &::before {
      content: "";
      background-color: rgba(0, 0, 0, 0.75);
      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(--sec_text_clr);
        font-weight: 400;
        margin-bottom: var(--size_0p5em);
      }
      p {
        color: var(--sec_text_clr);
        font-size: var(--size_1p0rem);
        font-weight: 400;
      }
      .main_buttons {
        float: right;
        margin-top: 1em;
      }
    }
  }
}

footer {
  width: var(--width_100);
  background: var(--btn_clr);
  color: var(--sec_text_clr);
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--sec_text_clr);
  .footer_content {
    max-width: var(--width_80);
    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(--sec_text_clr);
        }
      }
    }
    .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(--sec_text_clr);
          }
        }
      }
    }
  }
  .copy_line {
    width: var(--width_100);
    border-top: 1px solid var(--sec_text_clr);
    padding: var(--size_1p0em);
    p {
      width: var(--width_100);
      text-align: center;
    }
  }
}