.out,
.in,
.pro {
  display: flex;
  margin: 20px;
}

.out {
  flex-direction: column;
}

.in {
  flex-direction: column;
  width: 20%;
}

img {
  border-radius: 20px;
  margin-top: auto;
  margin-bottom: auto;
}

.pro img {
  width: 200px;
  height: 300px;
}

.pro {
  width: 80%;
  background-position: center;
  border-radius: 20px;
  display: flex;
  box-shadow: 5px 5px 10px;
}

#akhdan {
  background-image: url(../Assets/akhdan-b.webp);
  background-size: cover;
}
#ihsan {
  background-image: url(../Assets/ihsan-b.jpg);
  background-size: cover;
}
#zayyan {
  background-image: url(../Assets/zayyan-b.png);
  background-size: cover;
}
#agna {
  background-image: url(../Assets/agna-b.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0px -50px;
}
#aziz {
  background-image: url(../Assets/aziz-b.png);
  background-size: cover;
}
#alghar {
  background-image: url(../Assets/alghar-b.jpeg);
  background-size: cover;
  background-position: left 60px top -300px;
}
.pro * * {
  background-color: white;
  border-radius: 1px;
}

.pro * {
  margin: 20px;
}

p {
    overflow-wrap: break-word;
}

.out {
  border-radius: 20px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin: 0;
  padding-top: 5vh;
  position: 0px -20px;
}

#cap, #eng, #biz {
  background-color: #fca400;
}

#vc, #med {
  background-color: #ffeea9;
}