/*--------------------------------- section 3 ------------------------------- */
.Porfolio-s3-col {
  width: 100%;
  height: 454px;
  background-image: url(../images/Component\ 97.png);
  background-size: 100% 100%;
}
.Porfolio-s3-d {
  width: 100%;
  height: 100%;
}
.Porfolio-s3-d:hover {
  background-color: rgb(12, 12, 12, 0.4);
}
.Porfolio-s3-d:hover .Porfolio-s3-span {
  display: block;
}

.Porfolio-s3-span {
  font-size: 30px;
  font-weight: 700;
  display: none;
}
.Porfolio-s3-span1 {
  font-size: 30px;
  font-weight: 300;
}
.Porfolio-s3-b {
  width: 239px;
  height: 50px;
  transition: 800ms;
}
.Porfolio-s3-b:hover .Porfolio-s3-text {
  display: none;
}
.Porfolio-s3-icon {
  display: none;
}
.Porfolio-s3-b:hover .Porfolio-s3-icon {
  display: block;
}
/*-------------- ------------------- 2 */
.Porfolio-s3-col1 {
  width: 100%;
  height: 454px;
  background-image: url(../images/Component\ 104.png);
  background-size: 100% 100%;
}
.Porfolio-s3-d:hover {
  background-color: rgb(12, 12, 12, 0.4);
}
.Porfolio-s3-d:hover .Porfolio-s3-span {
  display: block;
}

.Porfolio-s7-h1 {
  font-size: 60px;
  font-weight: 700;
}

/* ================================== responsive================================ */
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .Porfolio-s3-span2 {
    font-size: 21px;
  }
  .Porfolio-s3-span1 {
    font-size: 21px;
  }
}
@media only screen and (max-width: 453px) and (min-width: 0px) {
  .Porfolio-s3-span2 {
    font-size: 22px;
  }
  .Porfolio-s3-span1 {
    font-size: 22px;
  }
}