.imgradical {
  scale: 2.4;
  animation: slideRadicalImage 30s linear infinite;
  transition: all 0.6s;
}

.imgradical:hover {
  scale: 2.6;
  transition: all 0.6s;
}

.imgradicalwindows {
  scale: 1.45;
  animation: slideRadicalImagewindows 30s linear infinite;
  transition: all 0.6s;
}

.imgradicalwindows:hover {
  transition: all 0.6s;
  scale: 1.5;
}

@keyframes slideRadicalImage {
  0% {
    transform: translate(0%, 0%);
  }

  50% {
    transform: translate(-7%, 14%);
  }

  100% {
    transform: translate(0%, 0%);
  }
}

@keyframes slideRadicalImagewindows {
  0% {
    transform: translate(0%, 0%);
  }

  50% {
    transform: translate(-5%, 13%);
  }

  100% {
    transform: translate(0%, 0%);
  }
}

.projectTitle {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-weight: bold;
  font-size: 19px;
  cursor: pointer;
}

.projectTitle::before {
  content: "";
  width: 0;
  height: 1px;
  position: absolute;
  top: 1.55rem;
  transition: all 0.6s;
}
.hanmudo .projectTitle::before,
.shahri .projectTitle::before {
  top: 1.45rem;
}
.projectMobile:hover .projectTitle::before {
  width: 100%;
}

.projectWindows:hover .projectTitle::before {
  width: 100%;
}

.featureList {
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
}

.projectDesk {
  font-family: "Courier New", Courier, monospace;
}

.projectDesk2 {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 16.5px;
}

.projectMobile {
  overflow: hidden;
  border-radius: 4px;
  position: relative;
  transition: all 0.6s;
  width: 90%;
  max-width: 30rem;
  margin-right: auto;
  margin-left: auto;
  margin-top: 3rem;
  aspect-ratio: 1/1;
}

.maysam img {
  transition: all 0.5s;
}

.projectWindows {
  min-width: 50rem;
  width: 70%;
  max-width: 70rem;
  border-radius: 4px;
  transition: all 0.4s;
  aspect-ratio: 3/2;
  overflow: hidden;
  margin: auto;
  position: relative;
  margin-top: 4rem;
}

.maysam:hover img:nth-child(3) {
  transform: translate(2%, 0) scale(1.05);
  box-shadow: -3px 3px 10px rgb(0, 0, 0, 0.6);
  transition: all 0.5s;
}

.maysam:hover img:nth-child(2) {
  transform: translate(-2%, 0);
  transition: all 0.5s;
}

.maysamdesktop img {
  transition: all 0.5s;
}

.maysamdesktop:hover img:nth-child(2) {
  transform: translate(-2%, 0);
  transition: all 0.5s;
}

.maysamdesktop:hover img:nth-child(3) {
  transform: translate(2%, 0) scale(1.05);
  box-shadow: -3px 3px 10px rgb(0, 0, 0, 0.6);
  transition: all 0.5s;
}

#imgTvSobhan {
  animation: moveImgSobhan 10s ease-in-out infinite;
}

#imgTvSobhanDesktop {
  animation: moveImgSobhanDesktop 11.5s ease-in-out infinite;
}

.TV {
  transition: all 0.5s;
  left: 23%;
  top: 35%;
}

.sobhan:hover .TV {
  transform: translate(-17%, 0);
  transition: all 0.5s;
}

.TVdesktop {
  transition: all 0.5s;
  left: 36%;
  top: 30%;
}

.sobhan:hover .TVdesktop {
  transform: translate(-17%, 0);
  transition: all 0.5s;
}

@keyframes moveImgSobhan {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, -35%);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes moveImgSobhanDesktop {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, -32%);
  }

  100% {
    transform: translate(0, 0);
  }
}

.hanmudo:hover img:nth-child(1) {
  transform: translate(25%, -45%) scale(0.8);
  transition: all 0.4s;
}

.hanmudo:hover img:nth-child(2) {
  transform: translate(-12%, -9%);
  transition: all 0.4s;
  box-shadow: -2px 2px 30px rgb(20, 20, 20, 0.25);
}

.hanmudo img {
  transition: all 0.4s;
}

.shahriImg {
  animation: moveImgshahri 20s linear infinite;
  transition: all 0.5s;
}

.shahri:hover .shahriImg {
  width: 52%;
  box-shadow: 0px 2px 15px rgba(112, 112, 112, 0.4);
  transition: all 0.5s;
}

@keyframes moveImgshahri {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(50%, -25%);
  }

  40% {
    transform: translate(26%, -37.5%);
  }

  80% {
    transform: translate(-50%, -5%);
  }

  100% {
    transform: translate(0, 0);
  }
}

.shahriImgDesk {
  animation: moveImgshahriDesk 30s linear infinite;
  transition: all 0.5s;
}

.shahriDesk:hover .shahriImgDesk {
  width: 43.4%;
  box-shadow: 0px 2px 25px rgba(112, 112, 112, 0.4);
  transition: all 0.5s;
}

@keyframes moveImgshahriDesk {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(70%, -25%);
  }

  40% {
    transform: translate(26%, -35%);
  }

  80% {
    transform: translate(-68%, -10%);
  }

  100% {
    transform: translate(0, 0);
  }
}

.imgOldversionDesk {
  animation: moveImgOldVersion 1000s linear infinite;
}

.imgOldversionMobile {
  animation: moveImgOldVersion 1650s linear infinite;
}
section h2 {
  font-size: 22.5px;
}
@keyframes moveImgOldVersion {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 10000% 0%;
  }
}

@media only screen and (min-width: 390px) {
}
@media only screen and (min-width: 480px) {
}

@media only screen and (min-width: 640px) {
}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 1024px) {
  section h2 {
    font-size: 26px;
  }
  .projectTitle {
    font-size: 23px;
  }
  .projectTitle::before {
    top: 1.9rem;
  }
  .hanmudo .projectTitle::before,
  .shahriDesk .projectTitle::before {
    top: 1.75rem;
  }
}