*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:#fff;
  color:#555;
}

.page{
  max-width:1100px;
  margin:0 auto;
  padding:60px 20px 110px;
}

/* Header */
.brand{
  text-align:center;
  margin-bottom:26px;
}
.logo{
  max-width:520px;
  width:100%;
  height:auto;
}
.sub{
  margin-top:6px;
  font-size:14px;
  color:#9a9a9a;
  letter-spacing:.4px;
}

/* Text */
.txt{
  text-align:center;
  line-height:1.7;
  font-size:15px;
  color:#555;
}
.txt p{ margin:12px 0; }
.bold{ font-weight:500; }

/* Middle */
.mid{
  margin-top:70px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:90px;
}
.infos{
  font-size:18px;
  line-height:1.7;
}
.red{ color:#ff3b30; }
.avatar{
  width:165px;
  height:auto;
  display:block;
}

/* Contact */
.contact{
  margin-top:90px;
  max-width:620px;
  margin-left:auto;
  margin-right:auto;
}
.contact h2{
  font-size:34px;
  color:#000;
  margin-bottom:26px;
}

/* Form */
.form label{ display:block; margin-top:22px; }
.form span{
  display:block;
  font-size:12px;
  color:#111;
  margin-bottom:8px;
}
.row{
  display:flex;
  gap:40px;
}
.row label{ flex:1; }

input, textarea{
  width:100%;
  border:none;
  border-bottom:2px solid #111;
  padding:10px 2px;
  font-size:14px;
  outline:none;
  background:transparent;
  color:#111;
}

textarea{ resize:none; }

button{
  display:block;
  margin:40px auto 0;
  background:#000;
  color:#fff;
  border:0;
  padding:12px 44px;
  font-size:14px;
  border-radius:999px;
  cursor:pointer;
}
button:hover{ opacity:.85; }

/* Mobile */
@media (max-width:800px){
  .mid{ flex-direction:column; gap:35px; }
  .infos{ text-align:center; }
  .row{ flex-direction:column; gap:0; }
  .avatar{ width:150px; }
}