@font-face {
  font-family: 'SF Pro Display';
  src: url('fonts/SFPRODISPLAYBOLD.OTF') format('opentype');
  font-weight: bold;
  font-style: normal;
}


@font-face {
  font-family: 'SF Pro Normal';
  src: url('fonts/SFPRODISPLAYREGULAR.OTF') format('opentype');
  font-weight: normal;
  font-style: normal;
}


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #F5F3F0;
}

.main{
    
    height: 100vh;
    width: 100vw;
    padding: 0px 40px;
    font-family: 'SF Pro Display';
}

.hero{
    width: 100%;
    height: 100vh;
}

.nav{
    height: 60px;
    width: 100%;
    /* background-color: red; */
}


.hero-text{
    font-size: 3.4em;
    line-height: 1;
}

.location{
    font-family: 'SF Pro Normal';
}

.middle-text{
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 1.4em;
    display: flex;
    justify-content: space-between;
}


.scroll-down{
    display: flex;
    font-family: "SF Pro Normal";
}

.scroll-down svg{
    width: 30px;
    margin-right: 10px;

}

.hero-image{
    height:600px;
    width: 100%;
    background-color: blue;
    overflow: hidden
}


.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.short-about{
    width: 100%;
    height: 100vh;
    margin-top: 10px;
}

.top{
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.top-text{
    font-size: 1.8em;
    line-height: 1.1;
}

.link-icons{
    width: 200px;
    /* background-color: red; */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.link-icons svg {
  width: 50px;
  height: auto;
  fill: rgb(0, 0, 0); /* change color here */
  cursor: pointer;
}


.what-i-do{
    /* background-color: red; */
    width: 100%;
    margin-top: 100px;
}

.layer{
    height: 250px;
    width: 100%;
    /* background-color: red; */
    display: flex;
    margin-bottom: 20px;
}

.layer .content1{
    width: 470px;
    height: 100%;
    margin-right: 200px;
}

.layer .content1 h1{
    font-size: 2.1em;
}

.layer .content1 h3{
    font-size: 1.7em;
    margin-top: 20px;
    font-family: "SF Pro Normal";
    color: #5C5C5C;
}

.projects-show{
    width: 100%;
    height: 100vh;
}

.pro-top{
    display: flex;
    justify-content: center;
    font-size: 4em;
}

.pro-top img{
    width: 50px;
    margin-left: 10px;
}

.first-grid{
    margin-top: 60px;
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: space-between;
}

.pro{
    width: 400px;
    /* background-color: red; */
    position: relative;

}

.pro h1{
    font-size: 2.1em;
}

.pro h3{
    font-size: 1.5em;
    margin-top: 20px;
    font-family: "SF Pro Normal";
    color: #5C5C5C;
}

.pro svg{
    width: 40px;
    height: auto;
    fill: rgb(0, 0, 0);
    position: absolute;
    bottom: 0;
}

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