@font-face {
    font-family: IRANSans;
    src: url(IRANSansUltraLight.ttf); 
} 

.form__group {
  position: relative;
  padding: 15px 0 0;
  margin-top: 10px;
}

.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #d2d2d2;
  outline: 0;
  font-size: 16px;
  color: #d8d8d8;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
}

.form__field::placeholder {
  color: transparent;
}

.form__field:placeholder-shown ~ .form__label {
  font-size: 16px;
  cursor: text;
  top: 20px;
}

label,
.form__field:focus ~ .form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 12px;
  color: #9b9b9b;
}

.form__field:focus ~ .form__label {
  color: #009788;
}

.form__field:focus {
  padding-bottom: 6px;
  border-bottom: 2px solid #009788;
}
body {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;

    display: flex;
    flex-direction: row-reverse;
    padding: 50px;
}
.aboutme {
    width: 50%;
    height: 100%;
    padding-right: 50px;

    display: flex;
    flex-direction: column;
}
.aboutme nav ul {
    width: 100%;
    display: flex;
}
.aboutme nav ul li {
    margin-right: 70px;
}
.aboutme nav ul li a {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition-duration: 0.3s;
}
.aboutme .text_container {
    font-family: IRANSans;
    font-size: 28px;
    text-decoration: none;

    max-width: 700px;
    margin-top: auto;
    margin-bottom: auto;
    padding: 50px 0;
}
.aboutme .text_container h3 {
    font-weight: 200;
    font-size: 10px;
    margin-bottom: 0px;
}
.aboutme .text_container h2 {
    font-weight: 400;
    font-size: 20px;
    margin-bottom: 10px;
}
.aboutme .text_container h1 {
    font-weight: 600;
    font-size: 50px;
    letter-spacing: 0.02em;
    line-height: 1.2em;
    margin-bottom: 20px;
}
.aboutme .text_container p {
    font-weight: 300;
    font-size: 19px;
    line-height: 1.5em;
    letter-spacing: .06em;
    margin-bottom: 30px;
}
.aboutme .text_container a {
    font-weight: 500;
    font-size: 20px;
    text-decoration: none;
}

.hero_image {
    width: 50%;
    height: 100%;
    overflow: hidden;
}
button {
    background-color: transparent;
    font-size: 20px;
    font-family: IRANSans;
    color: white;
    border-color: transparent;
}
button:hover {
    border-bottom:2px solid #ffffff;
}
.hero_image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: left;
}