:root {
  --mainColor: #151515;
  --secondryColor: #f8f8f8;
  --secondryborderColor: 248,248,248;
  --mainborderColor: 21,21,21;
  --opacity:0.1;
  --opacity3:0.3;
  --opacity5:0.5;
}

.loadingover{
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: center;
  width: 100vw;
  height: 100vh;
  background-color: var(--secondryColor);
  z-index: 999999;
  box-shadow: 0 0 100px 145px var(--secondryColor);
}
.project.panel{
  min-height: 100vh !important;
  height: fit-content !important;
}
.project{
  color: var(--secondryColor);
  .projecttitle{
    margin-top: 60px;
    margin-bottom: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    h1{
      font-size: 5rem;
      letter-spacing: 2px;
      font-weight: 600;
    }
    .themecont{
      display: flex;
      align-items: center;
      .themetitle{
        margin-right: 13px;
        font-size: 10px;
        letter-spacing: 2px;
      }
      .theme{
        border: 1px dashed rgba(var(--secondryborderColor),var(--opacity3));
        height: 28px;
        width: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        overflow: hidden;
        .themeholder{
          display: flex;
          flex-direction: column;
          align-items: center;
          height: 100%;
          width: 100%;
          .themedark{
            margin: 5px 0;
            user-select: none;
          }
          .themelight{
            user-select: none;
          }
        }
      }
    }
  }
  .projectcontent{
    display: flex;
    flex-direction: column;
    .projecthero{
      font-size: 2.4rem;
      margin-bottom: 30px;
      letter-spacing: 3px;
      font-weight: 600;
      width: 50%;
      line-height: 1.2;
    }
    .projectdescription{
      width: 75%;
      text-align: justify;
      column-count: 2;
      column-gap: 45px;
      letter-spacing: 2px;
      font-size: .8rem;
      line-height: 1.4;
      margin-bottom: 45px;
    }
    .cover{
      width: 100%;
      margin-bottom: 45px;
      img{
        width: 100%;
      }
    }
    .overview{
      margin-bottom: 45px;
      display: flex;
      justify-content: flex-end;
      table{
        font-size: .7rem;
        font-weight: 500;
        letter-spacing: 3px;
        line-height: 1.5;
        tr{
          &:first-child{
            td{
              border-top: 1px dashed rgba(var(--secondryborderColor),var(--opacity));
            }
          }
          td{
            padding: 10px 20px;
            border-left: 1px dashed rgba(var(--secondryborderColor),var(--opacity));
            border-right: 1px dashed rgba(var(--secondryborderColor),var(--opacity));
            border-bottom: 1px dashed rgba(var(--secondryborderColor),var(--opacity));
            &:first-child{
              border-right: none;
            }
          }
        }
      }
    }
    .showcase1{
      width: 100%;
      margin-bottom: 100px;
      .showcaseimgs{
        width: 100%;
        display: flex;
        column-gap: 7px;
        div{
          width: calc(33.33% - 3.5px);
          object-fit: cover;
          img{
            width: 100%;
          }
        }
      }
    }
    .logoshowcase{
      margin-bottom: 20px;
      .logotitle{
        font-size: 3rem;
        font-weight: 400;
        letter-spacing: 2px;
        margin-bottom: 25px;
      }
      .logoexplain{
        text-align: justify;
        font-size: .8rem;
        letter-spacing: 2px;
        line-height: 1.4;
        width: 75%;
        column-count: 2;
        column-gap: 45px;
        margin-bottom: 30px;
      }
      .logoimg{
        width: 100%;
        img{
          width: 100%;
        }
      }
    }
    .showcase2{
      width: 100%;
      margin-bottom: 100px;
      .showcaseimgs{
        width: 100%;
        display: flex;
        column-gap: 7px;
        div{
          width: calc(33.33% - 3.5px);
          object-fit: cover;
          img{
            width: 100%;
          }
        }
      }
    }
    .visuallanguage{
      .visuallanguagetitle{
        font-size: 3rem;
        font-weight: 400;
        letter-spacing: 2px;
        margin-bottom: 25px;
      }
      .visuallanguageexplain{
        text-align: justify;
        font-size: .8rem;
        letter-spacing: 2px;
        line-height: 1.4;
        width: 75%;
        column-count: 2;
        column-gap: 45px;
        margin-bottom: 30px;
      }
      .visuallanguageimgs{
        width: 100%;
        height: fit-content;
        object-fit: cover;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        row-gap: 12px;
        column-gap: 7px;
        img{
          max-width: 100%;
        }
        .vlcover{
          width: 100%;
        }
        .row1{
          width: calc(50% - 3.5px);
        }
        .row2{
          width: calc(33.33% - 5px);
        }
        .vlend{
          width: 100%;
        }
      }
    }
    .svgdivider{
      position: relative;
      height: fit-content;
      width: 100vw !important;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 100px 0;
      svg{
        width: 100%;
        height: 100%;
        opacity: 0.2;
      }
    }
    .nextproject{
      height: 300px;
      margin-bottom: 45px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .nextprojectimg{
        width: 45%;
        height: 300px;
      }
      .buttonhalf{
        width: 50%;
        height: 70%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .nexttitle{
          font-weight: 600;
          font-size: 7rem;
          letter-spacing: 2px;
        }
        .nextbtn{
          width: 280px;
          height: 47px;
          position: relative;
          border: 1px dashed rgba(var(--secondryborderColor),var(--opacity3));
          a{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 99999;
          }
          .buttonhide{
            clip-path: polygon(0% 11%, 100% 11%, 100% 37%, 0% 37%);
            .text{
              width: 100%;
              height: 100%;
              padding: 15px 0;
              text-align: center;
            }
            .textcopy{
              width: 100%;
              height: 100%;
              padding: 15px 0;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
@media (max-width: 1400px) {
  .project{
    .projectcontent{
      .projecthero{
        width: 80%;
      }
      .projectdescription{
        width: 100%;
      }
      .showcase1{
        margin-bottom: 70px;
      }
      .logoshowcase{
        .logoexplain{
          width: 100%;
        }
      }
      .showcase2{
        margin-bottom: 70px;
      }
      .visuallanguage{
        .visuallanguageexplain{
          width: 100%;
        }
      }
      .svgdivider{
        margin: 70px 0;
      }
      .nextproject{
        .nextprojectimg{
          height: 212px;
          img{
            width: 100%;
            /* height: 100%;
            object-fit: cover; */
          }
        }
        .buttonhalf{
          height: 212px;
          .nexttitle{
            font-size: 5rem;
          }
        }
      }
    }
  }
}
@media (max-width: 1000px) {
  .project{
    .projectcontent{
      .projecthero{
        width: 100%;
        font-size: 2rem;
      }
      .projectdescription{
        font-size: .7rem;
      }
      .logoshowcase{
        .logoexplain{
          font-size: .7rem;
        }
      }
      .visuallanguage{
        .visuallanguageexplain{
          font-size: .7rem;
        }
      }
      .nextproject{
        height: fit-content;
        .nextprojectimg{
          height: 212px;
          img{
            width: auto;
            height: auto;
            object-fit: cover;
          }
        }
        .buttonhalf{
          height: 212px;
          .nexttitle{
            font-size: 4rem;
          }
        }
      }
    }
  }
}
@media (max-width: 800px){
  .projecttitle{
    flex-direction: column !important;
    .themecont{
      margin-top: 20px !important;
    }
  }
  .projectcontent{
    .projectdescription{
      column-count: 1 !important;
    }
    .overview{
      justify-content: center !important;
    }
    .logoshowcase{
      .logotitle{
        font-size: 2rem !important;
      }
      .logoexplain{
        column-count: 1 !important;
      }
    }
    .visuallanguage{
      .visuallanguagetitle{
        font-size: 2rem !important;
      }
      .visuallanguageexplain{
        column-count: 1 !important;
      }
    }
    .svgdivider{
      margin: 70px 0 85px 0 !important;
    }
    .nextproject{
      .buttonhalf{
        .nexttitle{
          font-size: 3rem !important;
        }
      }
    }
  }
}
@media (max-width: 600px) {
  .project{
    .projecttitle{
      h1{
        font-size: 3rem !important;
      }
    }
    .projectcontent{
      .projecthero{
        font-size: 1.5rem !important;
        margin-bottom: 40px !important;
      }
      .projectdescription{
        font-size: .9rem !important;
      }
    }
    .showcase1{
      .showcaseimgs{
        flex-direction: column !important;
        row-gap: 5px !important;
        div{
          width: 100% !important;
        }
      }
    }
    .logoshowcase{
      .logoexplain{
        column-count: 1 !important;
        font-size: .9rem !important;
      }
    }
    .showcase2{
      .showcaseimgs{
        row-gap: 5px !important;
        flex-wrap: wrap;
        div{
          width: 100% !important;
        }
      }
    }
    .visuallanguage{
      .visuallanguageimgs{
        row-gap: 5px !important;
        .row1{
          width: 100% !important;
        }
        .row2{
          width: 100% !important;
        }
      }
    }
    .svgdivider{
      margin: 55px 0 60px 0 !important;
      svg{
        scale: 2 !important;
      }
    }
    .nextproject{
      flex-direction: column !important;
      .nextprojectimg{
        height: 212px !important;
        width: 100% !important;
        img{
          width: auto !important;
          height: auto !important;
          /* object-fit: cover !important; */
        }
      }
      .buttonhalf{
        width: 100% !important;
        height: fit-content !important;
        justify-content: center !important; 
        align-items: center !important;
        .nexttitle{
          font-size: 4rem !important;
          text-align: center !important;
          margin: 20px 0 !important;
        }
      }
    }
  }
}
// contact
.panell.contactdiv{
  height: fit-content !important;
  min-height: 0 !important;
}
.contactdiv{
  border-top: 1px dashed rgba(var(--secondryborderColor),var(--opacity));
  background-color: var(--mainColor);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100vw !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  .linkshandle{
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
    ul{
    width: 12%;
    display: flex;
    flex-direction: column;
    padding: 15px;
    &:nth-child(2),&:nth-child(3){
      margin-left: 75px;
    }
    li{
      color: var(--secondryColor);
      &:nth-child(1){
        margin-top: 0;
        padding-top: 0;
        a{
          margin-top: 0;
          padding-top: 0;
        }
      }
      a{
        display: block;
        padding: 7px 0px;
        position: relative;
        font-size: 10px;
        letter-spacing: 2px;
        &::after{
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0;
          height: 1px;
          background-color: var(--secondryColor);
          transition: all 0.3s ease-in-out;
        }
        &:hover{
          &::after{
            width: 20%;
          }
        }
      }
    }
  }
  .email{
    width: fit-content;
    li{
      &:nth-child(1){
        font-size: 0.85rem;
      }
      &:nth-child(2){
        a{
          margin-top: 15px;
          padding: 5px 24px;
          border: 1px dashed rgba(var(--secondryborderColor),var(--opacity3));
          font-weight: 500;
          width: fit-content;
          font-size: 0.85rem;
          letter-spacing: 1px;
          .cwC{
            margin-top: 3px;
          }
          &::after{
            display: none;
          }
        }
      }
      & .li{
        display: flex;
        height: 18px;
        flex-direction: column;
        border: none;
        overflow: hidden;
        .mwC{
          margin-top: 1.5px;
        }
      }
    }
  }
  }
}
@media (max-width: 1400px) {
  .contactdiv{
    &.panell{
      height: 400px !important;
    }
    .gameouter{
      .contactgame{
        padding: 0 10px 10px;
        height: 85%;
      }
    }
  }
}
@media (max-width: 1000px) {
  .contactdiv{
    &.panell{
      height: 370px !important;
    }
    .linkshandle{
      ul{
        width: 17%;
      }
    }
  }
  .rights{
    font-size: 10px !important;
  }
}
@media (max-width: 800px) {
  .contactdiv{
    .linkshandle{
      ul{
        width: 140px;
        &:nth-child(2),&:nth-child(3){
          margin-left: 0px;
        }
        &:first-child{
          width: 100px;
        }
      }
    }
  }
}
@media (max-width: 686px) {
  .contactdiv{
    .linkshandle{
      flex-direction: column;
    }
  }
}
@media (max-width: 600px) {
  .contactdiv{
    &.panell{
      height: 480px !important;
      justify-content: flex-end;
    }
    .gameouter{
      display: none;
    }
    .linkshandle{
      ul{
        width: 100% !important;
        padding-left: 30px;
        &.email{
          li{
            font-size: 15px !important;
          }
        }
        li{
          a{
            font-size: 13px !important;
          }
        }
      }
    }
  }
}

@media (max-width: 1000px) {
  .trail-dot{
    display: none;
  }
}