#work-popup {
  flex-direction: column;
  height: 100vh;
  width: 100%;
  margin-left: auto;
  position: fixed;
  top: 0;
  left: 0;
  gap: 1%;
  background-color: white;
}

#closeddds {
  background-color: #c1c7d0;
  width: 20px;
  height: 20px;
  text-align: center;
}

.closebtn {
  display: flex;
  width: 92%;
  margin: 0 auto;
  justify-content: flex-end;
  margin-top: 1%;
}

#project1 {
  height: 90vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.featured-image-container {
  width: 94%;
  height: 75%;
  background-repeat: no-repeat;
  background-size: 98% 99%;
  background-position: 50% 0;
}

#title1 {
  width: 42%;
  display: flex;
  justify-content: flex-start;
}

.project-name {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
}

#source {
  margin-right: 0;
}

#live {
  width: 42%;
  display: flex;
  justify-content: flex-end;
  gap: 2%;
}

#live-demo,
#source {
  display: flex;
  flex-basis: content;
  line-height: 0;
  text-decoration: none;
  justify-content: center;
  align-items: center;
}

.see-project,
.resume,
.sbtn {
  transition-property: box-shadow, background-color, border-radius, border;
  transition-duration: 3s, 3s, 3s, 3s;
}

.see-project,
.resume {
  padding: 12px;
  gap: 10px;
  width: 122px;
  height: 48px;
  background: #36b37f;
  border: solid #36b37f;
  border-radius: 4px;
  color: #fff;
  font-weight: 500;
  font-size: 17px;
}

#source,
img {
  flex-basis: content;
}

#technologypopUp {
  width: 93%;
}

.langues-use {
  display: flex;
  list-style: none;
  gap: 6px;
}

.language {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: #3a4a42;
  text-align: left;
  background: #ebf0ee;
  border-radius: 4px;
  flex-basis: content;
  height: 30px;
  padding: 5px;
  padding-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#details {
  width: 93%;
  line-height: 22px;
  color: unset;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
}

h4 {
  text-align: center;
  font-weight: 600;
  font-size: 24px;
  color: #344563;
}

#live-demo,
source {
  display: flex;
  flex-basis: content;
}

@media screen and (max-width: 768px) {
  #title1 {
    width: 92%;
    margin: 0 auto;
  }

  .project-name {
    text-align: left;
    line-height: 25px;
  }

  .featured-image-container {
    height: 60%;
  }

  #live-demo,
  #source {
    line-height: 25px;
  }

  .see-project:active {
    background-color: #008552;
  }

  #live {
    order: 5;
    width: 94%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 2%;
  }
}

@media screen and (max-width: 425px) {
  .featured-image-container {
    height: 35%;
  }
}

@media screen and (max-width: 320px) {
  .featured-image-container {
    height: 23%;
  }
}