.port-head {
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  font-family: "Exo 2", sans-serif;
}


.port-subhead {
  font-family: "Exo 2", sans-serif;
  text-align: center;
  margin: 1rem 0;
  background: linear-gradient(220.55deg, #ff0000 0%, #470000 100%);
  font-size: 1.5rem;
  color: transparent;
  font-weight: 700;
  /* -webkit-text-stroke: 1px #212121; */
  font-family: "Exo 2", sans-serif;
  -webkit-background-clip: text;
  background-clip: text;
}

.port-anchor {
  font-family: "Exo 2", sans-serif;
  color: #fff;

  background: linear-gradient(220.55deg, #00b960 0%, #00552c 100%);
  font-size: 1.25rem;
  color: transparent;
  font-weight: 700;
  font-family: "Exo 2", sans-serif;
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 1.5rem;
}

.port-container {
  padding: 0rem;
}

.port-container .row {
  width: 1140px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.port-container .content {
  position: relative;
}

.port-container .screen {
  display: block;
  width: 300px;
  height: 230px;
  overflow: hidden;
  position: relative;
  border: 2px solid #b3b3b3;
  border-radius: 1px;
  margin: 1.5rem auto;
}

.port-container .screen img {
  bottom: -930px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .tt-img{
  bottom: -1210px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .p3-img{
  bottom: -940px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .p1-img{
  bottom: -915px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .p6-img{
  bottom: -1100px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .tabikaaccounting-img{
  bottom: -305px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .ssinteriorworld-img{
  bottom: -990px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .p9-img{
  bottom: -1790px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .p10-img{
  bottom: -1798px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .spa-img{
  bottom: -1465px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .abc-bakery-img{
  bottom: -529px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .pheelectronics-img{
  bottom: -645px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .educationforeveryone-img{
  bottom: -695px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .logicraft-img{
  bottom: -615px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .digitaldynamo-img{
  bottom: -615px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .fur-port-img{
  bottom: -875px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .reale-port-img{
  bottom: -720px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .constuction-port-img{
  bottom: -1430px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .misi-img{
  bottom: -355px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

.port-container .screen .lex-img{
  bottom: -650px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}




/*? img hover effect  */
.port-container .screen:hover img {
  bottom: 0;
  -webkit-transition: all 11s;
  -moz-transition: all 11s;
  -ms-transition: all 11s;
  -o-transition: all 11s;
  transition: all 11s;
  cursor: pointer;
}

.port-container .screen:hover .lex-img {
  bottom: 0 !important;
  -webkit-transition: all 11s !important;
  -moz-transition: all 11s !important;
  -ms-transition: all 11s !important;
  -o-transition: all 11s !important;
  transition: all 11s !important;
  cursor: pointer;
}

.port-container .screen:hover .misi-img {
  bottom: 0 !important;
  -webkit-transition: all 11s !important;
  -moz-transition: all 11s !important;
  -ms-transition: all 11s !important;
  -o-transition: all 11s !important;
  transition: all 11s !important;
  cursor: pointer;
}