div p {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 600;
  font-size: small;
  font-style: normal;
  background-color: #fff;
  width: 320px;
  height: 80px;
  padding-top: 20px;

}


.WorksTop {
  padding-top: 200px;
  padding-bottom: 100px;
  font-size: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}


.Workslogo {
  margin-right: 15px;
}


.WORKS img,
.Workslogo img {
  max-width: 100%;
  height: auto;
  display: block;
}



.Workslogo {
  flex: 0 1 auto;
  max-width: 40%;
}





.years {
  width: 100%;
  height: 40px;
  font-size: 15px;
  background-color: rgb(229, 229, 229);
  display: flex;
  justify-content: center;
  text-align: center;
  font-family: "M PLUS 1p", sans-serif;

}


.years .button {
  width: 150px;
  height: 40px;
  padding: 10px 50px;
  border-left: 5px solid #fff;
  border-right: 5px solid #fff;
  font-weight: bold;
  cursor: pointer;
}

.years .button+.button {
  border-left: 0;
  border-right: 5px solid #fff;

}

.years .button:hover {
  background-color: rgb(75, 0, 100);
  color: #fff
}




.f-text1,
.f-text2,
.f-text3 {
  width: 320px;
  height: 80px;
  z-index: 10;
  padding-top: 10px;
  padding-left: 10px;
}


.f-text4{
  width: 340px;
  height: 50px;
  z-index: 10;
  padding-left: 10px;
}

.f-text5{
  width: 340px;
  height: 25px;
  z-index: 10;
  padding-left: 10px;
}



.flex-container1-3 {
  display: flex;
  justify-content: center;
  margin: 4px auto;
}



.flex-container2-3 {
  display: flex;
  justify-content: center;
  gap: 8px;
}



.flex-container3-3 {
  display: flex;

  justify-content: center;
  gap: 7px;
  margin: 2px auto;
}





.no-border {
  border: none;
}





#works2025 h2 {
  text-align: center;
  color: #878787;
  font-size: 2em;
  margin: 60px;
}




.works35 {
  position: relative;
}

.works35text {
  position: absolute;
  inset: 88% auto auto 24%;
  transform: translate(-50%, -50%);
  z-index: 10;
}



.works30 {
  position: relative;
}

.works30text {
  position: absolute;
  inset: 80% auto auto 24%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.works31 {
  position: relative;
}

.works31text {
  position: absolute;
  inset: 80% auto auto 24%;
  transform: translate(-50%, -50%);
}




.works27 {
  position: relative;
}

.works27text {
  position: absolute;
  inset: 75% auto auto 37%;
  transform: translate(-50%, -50%);
}

.works28 {
  position: relative;
}

.works28text {
  position: absolute;
  inset: 75% auto auto 37%;
  transform: translate(-50%, -50%);
}


.works29 {
  position: relative;
}

.works29text {
  position: absolute;
  inset: 75% auto auto 37%;
  transform: translate(-50%, -50%);
}



.works32 {
  position: relative;
}

.works32text {
  position: absolute;
  inset: 83% auto auto 24%;
  transform: translate(-50%, -50%);
  padding-top: 5px;
}

.works33 {
  position: relative;
}

.works33text {
  position: absolute;
  inset: 83% auto auto 24%;
  transform: translate(-50%, -50%);
  padding-top: 5px;
}


.works34 {
  position: relative;
}

.works34text {
  position: absolute;
  inset: 88% auto auto 24%;
  transform: translate(-50%, -50%);
  padding-top: 3px;
}


.works42 {
  position: relative;
}

.works42text {
  position: absolute;
  inset: 75% auto auto 37%;
  transform: translate(-50%, -50%);
}

.works43 {
  position: relative;
}

.works43text {
  position: absolute;
  inset: 75% auto auto 37%;
  transform: translate(-50%, -50%);
}


.works44 {
  position: relative;
}

.works44text {
  position: absolute;
  inset: 75% auto auto 37%;
  transform: translate(-50%, -50%);
}




#works2024 h2 {
  text-align: center;
  color: #878787;
  font-size: 2em;
  margin: 60px;
}



.works21 {
  position: relative;
}

.works21text {
  position: absolute;
  inset: 75% auto auto 12%;
  transform: translate(-50%, -50%);
  z-index: 10;
}



.works21text a {
  padding-left: 10px;
}






#works2023 h2 {
  text-align: center;
  color: #878787;
  font-size: 2em;
  margin: 60px;
}





.works36 {
  position: relative;
}

.works36text {
  position: absolute;
  inset: 75% auto auto 24%;
  transform: translate(-50%, -50%);
}

.works37 {
  position: relative;
}

.works37text {
  position: absolute;
  inset: 75% auto auto 24%;
  transform: translate(-50%, -50%);
}


.works15 {
  position: relative;
}

.works15text {
  position: absolute;
  inset: 75% auto auto 24%;
  transform: translate(-50%, -50%);
}

.works14 {
  position: relative;
}

.works14text {
  position: absolute;
  inset: 75% auto auto 24%;
  transform: translate(-50%, -50%);
}





.works38 {
  position: relative;
}

.works38text {
  position: absolute;
  inset: 75% auto auto 37%;
  transform: translate(-50%, -50%);
}

.works39 {
  position: relative;
}

.works39text {
  position: absolute;
  inset: 75% auto auto 37%;
  transform: translate(-50%, -50%);
}


.works40 {
  position: relative;
}

.works40text {
  position: absolute;
  inset: 75% auto auto 37%;
  transform: translate(-50%, -50%);
}








.works41 {
  position: relative;
}

.works41text {
  position: absolute;
  inset: 75% -15% auto auto;
  transform: translate(-50%, -50%);
  z-index: 10;
}








#works2022 h2 {
  text-align: center;
  color: #878787;
  font-size: 2em;
  margin: 60px;
}



.works2 {
  position: relative;
}

.works2text {
  position: absolute;
  inset: 75% auto auto 24%;
  transform: translate(-50%, -50%);
}










.bottom-contact {
  text-align: center;
  margin: 100px 50px 50px 50px;

}

.bottom-contact h2 a {
  border-left: 3px solid #c8c8c8;
  border-right: 3px solid #c8c8c8;
  padding: 10px;
  color: #646464;
}

iframe {
  border: 0;
}









@media (max-width: 1329px) {

  .years,
  .flex-container1-3,
  .flex-container2-3,
  .flex-container3-3 {
    transform: scale(0.85);
    transform-origin: center;
  }


  .flex-container1-3 iframe,
  .flex-container1-3 img,
  .flex-container2-3 iframe,
  .flex-container2-3 img,
  .flex-container3-3 iframe,
  .flex-container3-3 img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
    margin: 0 auto;
  }


  .flex-container1-3 iframe,
  .flex-container1-3 img {
    max-width: 652px;
  }

  .flex-container2-3 iframe,
  .flex-container2-3 img {
    max-width: 322px;
  }

  .flex-container3-3 iframe,
  .flex-container3-3 img {
    max-width: 213px;
  }

  .f-text1,
  .f-text2,
  .f-text3{
    height: 80px;
    z-index: 10;
    padding-top: 10px;
    padding-left: 10px;
  }

  .f-text1 {
    width: 652px;
  }

  .f-text2 {
    width: 322px;
  }

  .f-text3 {
    width: 213px;
  }




  .works2text,
  .works14text,
  .works15text,
  .works21text,
  .works27text,
  .works28text,
  .works29text,
  .works30text,
  .works31text,
  .works32text,
  .works33text,
  .works34text,
  .works35text,
  .works36text,
  .works37text,
  .works38text,
  .works39text,
  .works40text,
  .works41text,
  .works42text,
  .works43text,
  .works44text {
    position: static;
    transform: none;
    text-align: center;
    margin-top: 8px;
    font-size: clamp(10px, 2vw, 12px);
  }

}


@media screen and (max-width: 767px) {

  .years {
    transform: scale(0.75);
    transform-origin: center;
  }


  .flex-container1-3,
  .flex-container2-3,
  .flex-container3-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

  }


  .flex-container1-3 iframe,
  .flex-container2-3 iframe,
  .flex-container3-3 iframe {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .flex-container1-3 img,
  .flex-container2-3 img,
  .flex-container3-3 img {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;

  }

  .f-text1,
  .f-text2,
  .f-text3 {
    height: 80px;
    z-index: 10;
    padding-top: 10px;
    padding-left: 10px;
  }

  .f-text1,
  .f-text2,
  .f-text3{
    width: 320px;
  }

  .works2text,
  .works14text,
  .works15text,
  .works21text,
  .works27text,
  .works28text,
  .works29text,
  .works30text,
  .works31text,
  .works32text,
  .works33text,
  .works34text,
  .works35text,
  .works36text,
  .works37text,
  .works38text,
  .works39text,
  .works40text,
  .works41text,
  .works42text,
  .works43text,
  .works44text {
    position: static;
    transform: none;
    text-align: center;
    margin-top: 8px;
  }
}


@media screen and (max-width: 598px) {


  .years {
    display: none;
  }
}