.topPortfolio {
  padding-block: 180px 500px;
  background-color: #fff;
}
.topPortfolio .inTopPortfolio {
  display: flex;
  justify-content: space-around;
}
.topPortfolio .inTopPortfolio .leftTopPortfolio {
  width: 70%;
  color: var(--text-color4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.topPortfolio .inTopPortfolio .leftTopPortfolio::after {
  content: "";
  width: 8px;
  background: #737b96;
  height: 100%;
  position: absolute;
  inset-inline-start: -20px;
  inset-block-start: 0;
  border-radius: 10px;
}
.leftTopPortfolio h1 {
  font-size: var(--h2-size);
  margin-block-end: 40px;
}
.dataPortfolio {
  font-size: var(--h3-size);
  font-weight: bold;
}
.topPortfolio .inTopPortfolio .rightTopPortfolio {
}
.topPortfolio .inTopPortfolio .rightTopPortfolio img {
  width: 150px;
}
.topPortfolio .inTopPortfolio .rightTopPortfolio .typeOfProject {
  display: flex;
  align-items: center;
  margin-block-start: 30px;
  font-weight: bold;
  color: var(--text-color4);
}
.topPortfolio .inTopPortfolio .rightTopPortfolio .typeOfProject span {
  background: #737b96;
  width: 35%;
  display: block;
  height: 10px;
  margin-inline-end: 8px;

  border-radius: 13px;
}
.macPreview {
  background: url(../img/macbook.svg) no-repeat;
  background-position: center;
  background-size: contain;
  width: 80%;
  margin: -400px auto 50px;
  height: 670px;
  position: relative;
}
.macPreview > span {
  position: absolute;
  text-align: center;
  width: 100%;
  top: -28px;
  color: var(--background-color);
  font-size: var(--text-size2);
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}
.macPreview > span > img {
  width: 20px;
  margin-inline-end: 5px;
}
.macPreview .inMacPreview {
  margin: 25px auto;
  width: 83%;
  height: 546px;
  overflow-y: scroll;
}
.macPreview .inMacPreview::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.macPreview .inMacPreview::-webkit-scrollbar-track {
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #737b96;
  border-radius: 10px;
}
.macPreview .inMacPreview img {
  width: 100%;
}
p.shortDescription {
  width: 50%;
  text-align: center;
  margin: 0 auto;
  font-size: 30px;
  line-height: var(--line-height);
}
.mainPortfolio {
  display: flex;
  justify-content: space-between;
  margin-block-start: 80px;
}
.mainPortfolio .leftMainPortfolio {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mainPortfolio .leftMainPortfolio h2 {
  font-size: var(--h2-size);
  margin-block: 20px 30px;
}
.mainPortfolio .leftMainPortfolio .rssPortfolio {
  background: #fff;
  color: var(--text-color4);
  padding: 15px;
  border-radius: var(--border-radius);
}
.mainPortfolio .leftMainPortfolio .rssPortfolio p {
  line-height: var(--line-height);
  margin-block-end: 30px;
}
.mainPortfolio .leftMainPortfolio .rssPortfolio .client,
.mainPortfolio .leftMainPortfolio .rssPortfolio .year {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-size3);
  margin-block-end: 10px;
}
.mainPortfolio .leftMainPortfolio .rssPortfolio .client span:last-child,
.mainPortfolio .leftMainPortfolio .rssPortfolio .year span:last-child {
  font-weight: bold;
}
.mainPortfolio .leftMainPortfolio .rssPortfolio .tagsPortfolio {
  display: flex;
  flex-wrap: wrap;
  margin-block-start: 25px;
}
.mainPortfolio .leftMainPortfolio .rssPortfolio .tagsPortfolio li {
  background-color: var(--primary-color);
  padding: 4px 18px;
  border-radius: var(--border-radius);
  margin-inline-end: 12px;
  margin-block-end: 11px;
  font-size: var(--text-size2);
}
.rightMainPortfolio {
  width: 58%;
}
.rightMainPortfolio img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}
.contentOfProject {
  line-height: var(--line-height);
  margin-block: 50px 100px;
  font-size: 1.3rem;
}
.contentOfProject p:last-of-type {
  margin-block-end: 50px;
}
.bne-gallery-masonry-wrapper .gallery-single img {
  height: auto !important;
  border-radius: var(--border-radius) !important;
}
/*********************
START: MEDIA
*********************/
@media screen and (min-width: 1440px) {
  .macPreview {
    width: 1400px;
    max-width: 1400px;
    height: 780px;

  }
  .macPreview .inMacPreview {
    width: 1157px;
    height: 659px;
    margin: 31px auto;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1440px) {
  .macPreview {
    width: 1100px;
    max-width: 1100px;
  }
  .macPreview .inMacPreview {
    width: 912px;
    height: 519px;
    margin: 53px auto;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .macPreview {
    width: 990px;
    height: 560px;

    max-width: 990px;
  }
  .macPreview .inMacPreview {
    width: 819px;
    height: 467px;
    margin: 26px auto;
  }
  p.shortDescription {
    width: 91%;
    font-size: 24px;
  }
  .mainPortfolio .leftMainPortfolio {
    width: 54%;
  }
  .rightMainPortfolio {
    width: 45%;
  }
  .mainPortfolio {
    align-items: flex-end;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .macPreview {
    width: 750px;
    max-width: 750px;
    height: 420px;
  }
  .macPreview .inMacPreview {
    width: 620px;
    height: 353px;
    margin: 18px auto;
  }
  p.shortDescription {
    width: 80%;
    font-size: 24px;
  }
  .mainPortfolio {
    align-items: flex-end;
  }
  .mainPortfolio .leftMainPortfolio {
    width: 57%;
  }
  .rightMainPortfolio {
    width: 40%;
  }
  .macPreview .inMacPreview::-webkit-scrollbar {
    width: 9px;
  }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
  .macPreview {
    width: 565px;
    margin: -90px auto 50px;
    height: 315px;
  }
  .macPreview .inMacPreview {
    margin: 13px auto;
    height: 266px;
    width: 469px;
  }
  .macPreview .inMacPreview::-webkit-scrollbar {
    width: 8px;
  }
}
@media screen and (min-width: 425px) and (max-width: 575px) {
  .macPreview {
    width: 420px;
    margin: -140px auto 50px;
    height: 260px;
  }
  .macPreview .inMacPreview {
    margin: 21px auto;
    height: 199px;
    width: 347px;
  }
  .macPreview .inMacPreview::-webkit-scrollbar {
    width: 7px;
  }
}
@media screen and (min-width: 375px) and (max-width: 424px) {
  .macPreview {
    width: 370px;
    margin: -140px auto 50px;
    height: 207px;
  }
  .macPreview .inMacPreview {
    margin: 9px auto;
    height: 173px;
    width: 306px;
  }
  .macPreview .inMacPreview::-webkit-scrollbar {
    width: 6px;
  }
}
@media screen and (min-width: 315px) and (max-width: 374px) {
  .macPreview {
    width: 300px;
    margin: -140px auto 50px;
    height: 207px;
  }
  .macPreview .inMacPreview {
    margin: 26px auto;
    height: 141px;
    width: 250px;
  }
  .macPreview .inMacPreview::-webkit-scrollbar {
    width: 5px;
  }
}
@media screen and (max-width: 768px) {
  .topPortfolio .inTopPortfolio .rightTopPortfolio {
    width: 30%;
  }
  .topPortfolio .inTopPortfolio .rightTopPortfolio img {
    width: 100%;
  }
  .leftTopPortfolio h1 {
    font-size: 1.5rem;
  }
  .dataPortfolio img {
    width: 15%;
  }
  .dataPortfolio {
    font-size: 1rem;
  }
  .topPortfolio {
    padding-block: 160px 180px;
  }

  .macPreview > span {
    font-size: 0.65rem;
  }
  .macPreview > span > img {
    width: 15px;
  }
  p.shortDescription {
    width: 90%;
    font-size: 20px;
  }
  .mainPortfolio {
    flex-wrap: wrap;
  }
  .mainPortfolio .leftMainPortfolio,
  .rightMainPortfolio {
    width: 100%;
  }
  .mainPortfolio .leftMainPortfolio .rssPortfolio {
    margin-block-end: 50px;
  }
  .mainPortfolio .leftMainPortfolio h2 {
    font-size: 2rem;
  }
}

@media screen and (max-width: 576px) {
}
/*********************
END: MEDIA
*********************/