html,
body {
  margin: 0;
  font-family: "hk-grotesk", sans-serif, sans-serif;
  font-size: 1em;
  background-image: url("../bg.svg");
  background-repeat: repeat-y;
  background-size: 105vw;
  overflow-x: hidden;
}
.monitormockup_wrapper {
  position: relative;
  align-content: flex-end;
  width: 100%;
  height: 100%;
  width: 125vw;
  height: 100vh;

}
.monitormockup_wrapper .monitormockup_content {
  position: relative;
  top: 5%;
  width: 100vh;
  height: 100vh;
  margin: auto;
  
}
.monitormockup_wrapper .monitormockup_content .mm_monitor {
  position: relative;
  z-index: 2;
  top: 0;
  right: -225px;
  height: 100%;
  width: 100%;
  margin: auto;
  overflow: visible;
  pointer-events: none;
}
.monitormockup_wrapper .monitormockup_content .mm_monitor img {
  position: relative;
  top: 3%;
  left: 72%;
  transform: translateX(-50%);
  width: 100%;
  overflow: hidden;
}
.monitormockup_wrapper .monitormockup_content .mm_mockup {
    position: absolute;
    z-index: 1;
    top: 7.5%;
    left: 91%;
    transform: translateX(-50%);
    width: 91%;
    height: 51%;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .monitormockup_wrapper .monitormockup_content .mm_body {
    position: absolute;
    padding-left: 10%;
    z-index: 5;
    top: 0%;
    left: 10%;
    transform: translateX(-50%);
    width: 42%;
    height: 30%;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .monitormockup_wrapper .monitormockup_content .mm_mockup img {
    display: block;
    width: auto;
    padding-left: 25.5%;
    overflow-x: hidden;
    overflow-y: scroll;
  }
.text {
    width: 120%;
    position: relative;
    z-index: 50;
  display: flex;
  text-align: left;
  align-items: left;
  padding-left: 20%;
  justify-content: center;
  flex-direction: column;
  height: 10rem;
  font-family: "hk-grotesk", serif;
}

footer {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 10rem;
  font-family: "hk-grotesk", serif;
}

footer > * {
  padding: 0 0;
}

.font-size-1 {
  font-size: 1.5em !important;
}


  
.te {
  display: inline-block;
  z-index: 55;
  position: absolute;
  text-align: left;
  height: auto;
  width: 60%;
  left: 5%;
  top: 10%;
  margin: auto;
  font-family: "poppins", sans-serif;
    font-weight: 600;
    font-size: 1.7em;
    }

.te p {
  text-align: left;
  width: 100%;
  font-family: "poppins", sans-serif;
    font-weight: 800;
    font-size: 2.5em;
    }
    .te h1 {
      text-align: left;
      width: 100%;
      font-family: "poppins", sans-serif;
        font-weight: 300;
        font-size: large;
        margin-left: 3%;
        margin-top: -13%;
        }

    .title {
      height: auto;
      font-family: "josefin sans", sans-serif;
        font-weight: 800;
        font-size: 2.5em;
        margin: auto auto auto 15%;
        width: 55%;
        padding: 30px;
        z-index: 6;
        position: relative;
      }

    .about {
      background-color: #ECDDE3;
      border-radius: 35px;
      height: auto;
      font-family: "josefin sans", sans-serif;
      letter-spacing: 5px;
        font-weight: 400;
        font-size: 2.5em;
        line-height: 30px;
        margin: auto auto auto 15%;
        width: 35%;
        padding: 30px 50px 15px 30px;
        z-index: 5;
        position: relative;
        top: 50px;
      }
      .about h3{
        font-size: 0.5em;
        margin-left: 150px;
        line-height: 15px;
      }
  .center{
        text-align: center;
      }


.sub{
    position: relative;
margin: -30px auto 50px auto;
    background-color: #fff;
    z-index: 1;
    border-radius: 25px;
    height: auto;
    font-family: "poppins", sans-serif;
      font-weight: 400;
      font-size: 1em;
      width: 50%;
      left: 0;
      padding: 40px 40px 40px 40px;
      top: 50px;
    }
    
    .sub img{
      width: 35%;
      height: auto;
            }
      
            .sub .icon{
              width: 5%;
              height: 5%;
              padding: 5px;
                    }

.sub .full {
  position: static;
text-align: center;
z-index: 100;
}

.sub .full img{
width: 60%;
}


            @media screen and (max-width: 850px) {
              .monitormockup_wrapper {
                margin-left: 0 !important;
              }
              .mm_body .mm_mockup .mm_monitor img{
                width: 100%;
                height: 50%;
              }
              .right{
                width: auto;}
              .te{
                position: relative;
                top: -30%;
              }
              .mm_monitor {
                display: none;
              }
              .monitormockup_wrapper {
                width: 100% !important;
              }
              .monitormockup_wrapper .monitormockup_content {
                width: 100% !important;
                height: 100% !important;
                background-image: url("bg.svg");
                background-repeat: repeat;
              }
            }

            @media screen and (max-width: 450px) {
              .monitormockup_wrapper {
                margin-left: 0 !important;
              }
              .mm_body .mm_mockup .mm_monitor img{
                display: none;
              }
              .right{
                width: auto;}
                .te{
                  position: absolute;
                  top: 0%;
                  padding: 5%;
                  width: 50%;
                }
                .te p{
                  font-size: 2em;
                }

              .mm_monitor {
                display: none;
              }
              .monitormockup_wrapper .monitormockup_content .mm_mockup img {
                display: none;
              }
              .monitormockup_wrapper .monitormockup_content {
                width: 100% !important;
                height: 100% !important;
                background-image: url("bg.svg");
                background-repeat: repeat;
              }

              .about{
                width: 60%;
                left: -50px;
                position: relative;
                top: -450px;
                font-size: 1.35em;
              }

              .sub{
                position: relative;
                top: -450px;
                width: 70%;
                padding: 30px;
              }

              .sub img{
                width: 100%;
                height: auto;
                position: relative;
              }

              .sub .icon{
                width: 25%;
                height: auto;
            }
              .sub .full img{
                width: 90%;
              }
          }

            .right {
              width:auto}

            .right img{
              display: flex;
              position: relative;
              justify-content: left;
              align-content: left;
              left: 20%;
              width: 25%;
              height: 50%;
              align-items: left;
            }