.home{
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  .home__square{
    width: 0;
    height: 0;
    border-top: 100vh solid var(--blue-500);
    border-left: 100dvw solid var(--blue-500);
  }
  .logo{
    position: absolute;
    z-index: 2;
    width: 30rem;
  }

  @media screen and (max-width: 900px){
    .logo{
      width: 20rem;
    }
  }
}

.wedo{
  position: relative;
  height: 100%;
  width: 100%; 
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  .wedo__square{
    width: 0;
    height: 0;
    border-bottom: 100vh solid var(--green-500);
    border-top: 48px solid var(--blue-500);
    border-right: 100dvw solid var(--green-500);
  }
  .wedo__list{
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    .simple__text, .plus__text{
      list-style: none;
      font-size: 3rem;
      font-family: "Letters for Learners";
      color: var(--black-500);
    }
    .plus__text{
      font-size: 5rem;
      color: var(--white);
      text-transform: uppercase;
      letter-spacing: 1rem;
    }

    @media screen and (max-width: 900px){
      .simple__text, .plus__text{
        font-size: 3rem;
      }
      .plus__text{
        font-size: 3rem;
      }
    }
    
  }
}

.menu{
  position: relative;
  width: 100%; 
  height: 22rem;
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, var(--green-500), var(--white));
  .menu__item{
    font-family: 'Letters for Learners';
    font-size: 6rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
  }
  .item__we{
    position: absolute;
    top: 0;
    left: 0;
    width: calc((100%/3) + 2rem);
    clip-path: polygon(
      /* y , x sup izq */
      0% 0%, 
      100% 3%, 
      98% 100%, 
      0% 98%
      );
    background-color: var(--red-500);
  }
  .item__services{
    position: absolute;
    z-index: 2;
    top: 0;
    left: calc(100%/3 + 1rem);
    width: calc(100%/3);
    clip-path: polygon(
      2% 2.9%, 
      98% 7%, 
      100% 98%, 
      0% 100%
      );
    background-color: var(--blue-100);
  }
  .item__contact{
    position: absolute;
    z-index: 3;
    top: 0;
    left: calc(100%/3 + (100%/3));
    width: calc(100%/3);
    clip-path: polygon(
      0% 7%, 
      100% 5%, 
      100% 100%, 
      2% 98%
      );
    background-color: var(--yellow-500);
  }
  .menu__img{
    height: 10rem;
  }
  .menu__link{
    text-decoration: none;
    color: var(--black-500);
    display: grid;
    place-items: center;
  }
}

@media screen and (max-width: 900px){
  .menu{
    height: 60rem;
    .menu__item{
      font-size: 5rem;
    }
    .item__we{
      top: 0;
      left: 0;
      height: 20rem;
      width: 106%;
    }
    .item__services{
      top: 18rem;
      left: -1.2rem;
      height: 20rem;
      width: 108%;
    }
    .item__contact{
      top: 36rem;
      left: -1.2rem;
      height: 20rem;
      width: 105%;
    }
  }
}

.we__container{
  position: relative;
  height: 100dvh;
  width: 100%; 
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
  .we__square{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-bottom: 100vh solid var(--white);
    border-top: 48px solid var(--white);
    border-right: 100vw solid var(--white);
  }
  .we__title{
    z-index: 2;
    font-size: 3rem;
    font-family: 'Gotham Bold';
    text-transform: uppercase;
    color: var(--black-500);
    margin-bottom: 2.5rem;
  }
  .we__paragraph{
    z-index: 2;
    font-size: 3rem;
    font-family: 'Letters for Learners';
    font-weight: 600;
    color: var(--black-500);
  }
  .we__list{
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    .we__text{
      list-style: none;
      font-size: 3rem;
      font-family: "Letters for Learners";
    }
  }
  .we__img{
    position: absolute;
    z-index: 2;
    right: 5rem;
    bottom: 5rem;
    width: 11rem;
  
  }
  @media screen and (max-width: 900px){
    .we__title{
      font-size: 2rem;
    }
    .we__paragraph{
      font-size: 2rem;
      margin-bottom: 12rem;
    }
    .we__img{
      width: 8rem;
      bottom: 8rem;
    }
  }

}

.services__container{
  position: relative;
  height: 99dvh;
  width: 100%; 
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0 1rem;
  justify-content: center;
  align-items: center;
  .services__square{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-top:48px solid var(--blue-100);
    border-right: 50vw solid var(--blue-100);
    border-bottom: 100vh solid var(--blue-100);
    clip-path: polygon(0 5%, 56% 5%, 100% 0, 100% 98%, 50% 95%, 0 95%);
  }
  .services__title{
      z-index: 2;
      font-size: 3rem;
      font-family: 'Gotham Bold';
      text-transform: uppercase;
      color: var(--black-500);
      margin-bottom: 2.5rem;
  }
  .services__paragraph{
    z-index: 2;
    font-size: 3rem;
    font-weight: 600;
    font-family: 'Letters for Learners';
    color: var(--black-500);
  
  }
  .services__img{
    position: absolute;
    z-index: 2;
    left: 5rem;
    bottom: 5rem;
    width: 11rem;
  
  }

  @media screen and (max-width: 900px){
    .services__title{
      font-size: 2rem;
    }
    .services__paragraph{
      font-size: 2rem;
      margin-bottom: 12rem;
    }
    .services__img{
      width: 8rem;
      bottom: 8rem;
    }
  }
}

.contact__container{
  position: relative;
  height: 100dvh;
  width: 100%; 
  display: flex;
  justify-content: center;
  align-items: center;
  .contact__square{
    width: 100%;
    height: 100vh;
    border-bottom: 100vh solid var(--yellow-500);
    border-top:48px solid var(--yellow-500);
    border-right: 50dvw solid var(--yellow-500);
  }
  .contact__data{
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    .contact__title{
      z-index: 2;
      font-size: 3rem;
      margin-bottom: 2.5rem;
      font-family: 'Gotham Bold';
      text-transform: uppercase;
      color: var(--black-500);
    }
    .contact__list{
      list-style: none;
      text-align: center;

      .contact__text{
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Letters for Learners';
        font-weight: 600;
        font-size: 5rem;
        color: var(--black-500);
        .contact__icon{
            width: 3rem;
            margin-right: 1rem;
        }
        .link{
          text-decoration: none;
          color: var(--black-500);
        }
        
        &:nth-child(2) > .contact__icon, &:nth-child(4) > .contact__icon{
          margin-top: 1rem;
        }
      }
      @media screen and (max-width: 900px){
        .contact__text{
          font-size: 2rem;
          margin-bottom: 1rem;
          .contact__icon{
            width: 3.25rem;
          }
        }
      }
    }
    @media screen and (max-width: 900px){
      .contact__title{
        font-size: 2rem;
      }
      .contact__list{
        margin-bottom: 5rem;
      }
      .contact__list > .contact__text:nth-child(3){
        margin-bottom: 0;
      }
      .contact__list > .contact__text:nth-child(2) a{
        margin-top: 1rem;
      }
      .contact__list > .contact__text:nth-child(4) a{
        margin-top: 0.5rem;
      }
    }
  }
  .contact__img{
    position: absolute;
    right: 3rem;
    bottom: 3rem;
    width: 12rem;
  }
  @media screen and (max-width: 900px){
    .contact__img{
      width: 12rem;
      margin-bottom: 3rem;
    }
  }
}

.notext__mobile, .notext__desktop{
  display: none;
}

.text__mobile, .text__dektop{
  display: block;
}