.mockup ::-webkit-scrollbar {
  display: none;
}

section.browser-mockup-section {
  /* padding: 6em 0; */
  padding: 6em 0 0 0;
  overflow: hidden;
}

.browser-mockup-section p {
  margin-top: 65px;
}

.mockup-col {
  perspective: 100vw;
}

.mockup {
  border: solid 10px #e8e8e8;
  border-top-width: 45px;
  border-radius: 6px;
  transform: rotateX(0deg) rotateY(-20deg) rotateZ(0deg);
  transition: all ease 0.4s;
  box-shadow: 3px /*12px*/ 1px 30px -8px rgb(224 231 235 / 40%);
}

.mockup .scroll-container {
  overflow-y: scroll;
  max-height: 400px;
}

.mockup ::-webkit-scrollbar {
  width: 0;
}

.mockup img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

.browser-control {
  position: absolute;
  height: 10px;
  width: 10px;
  top: -27px;
  left: 30px;
  background: #000;
  background: #fec031;
  border-radius: 50%;
  opacity: 0.12;
  opacity: 1;
}

.browser-control::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: -20px;
  background: #000;
  background: #ff6054;
  border-radius: 50%;
}

.browser-control::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  right: -20px;
  background: #000;
  background: #00ce4a;
  border-radius: 50%;
}

.scroll-icon {
  position: absolute;
  width: 60px;
  padding: 10px;
  background: #272932bf;
  fill: #fff;
  z-index: 9999;
  top: 340px;
  left: 40px;
  border-radius: 16px;
}

.scroll-animation {
  animation: scrollIcon ease 2s infinite;
}

@keyframes scrollIcon {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  49% {
    transform: translateY(-10px);
    opacity: 0;
  }
  51% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.scroll-animation {
  animation: scrollIcon linear 1.7s infinite;
}

@keyframes scrollIcon {
  0% {
    transform: translateY(15px);
    opacity: 0;
  }
  50% {
    transform: translateY(7.5px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

@media only screen and (max-width: 990px) {
  .mockup-col {
    perspective: none;
  }
  .mockup {
    transform: none;
  }
  .browser-control {
    top: 18px;
    left: 50px;
  }
  .scroll-icon {
    left: -10px;
  }
  .browser-mockup-section h1 {
    margin-top: 0;
  }
}

.mockup:hover {
  transform: rotateX(0) rotateY(-16deg) rotateZ(0);
}

#scroll-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  padding: 10px 15px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
}

.project-pa {
  margin: 65px auto 65px auto;
}

.project-pav {
  margin: 65px auto 65px 50px;
}

.project-pa a,
.project-linglab a {
  color: #e0e7eb !important;
  font-weight: bold;
}