/* mobile version */
@media (max-width: 480px) {
  .main {
    padding: 0 14px;
  }

  .nav {
    height: 50px;
  }

  .hero-text {
    font-size: 1.3em;
    margin-top: 20px;
  }

  .middle-text {
    font-size: 1em;
    margin-bottom: 20px;
  }

  .scroll-down svg {
    width: 24px;
    margin-right: 8px;
  }

  .hero-image {
    height: 280px;
  }

  .hero-image img{
    border-radius: 10px;
  }

  .top-text{
    margin-top: 20px;
  }

  .top-text h1 {
    font-size: 1.2em;
    line-height: 1.12;
  }

  .link-icons svg {
    width: 32px;
  }

  .what-i-do {
    margin-top: 35px;
  }

  .layer .content1 h1,
  .pro h1 {
    font-size: 1.45em;
  }

  .layer .content1 h3,
  .pro h3 {
    font-size: 1em;
    line-height: 1.4;
  }

  .pro-top {
    font-size: 1.5em;
    margin-top: 120px;
  }

  .pro-top img {
    width: 32px;
  }

  .pro {
    min-height: 230px;
    padding-bottom: 48px;
  }

  .pro svg {
    width: 30px;
  }

  .pro svg:nth-of-type(2) {
    margin-left: 42px;
  }
}