.hero{
  position:relative;

  width:100%;
  height:100vh;

  overflow:hidden;
  padding: 0;
}

.bg-image{
  position:absolute;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position: right center;

  top:0;
  left:0;

  z-index:1;
}
.contact-content{
  position: absolute;
  right: 12%;
  top: 45%;
  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
  gap: 16px;

  align-items: flex-start;
  z-index: 2;
}
.contact-text h1{
color:rgb(250, 187, 234);
  font-family:'Oswald', sans-serif;
  font-size:8rem;

  line-height:0.9;

  font-weight:400;

  margin-bottom:40px;
}
.label{
  font-weight: 600;
  color:rgb(250, 187, 234);
  font-family:'Oswald', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
}

.value{
  font-weight: 200;
  font-size: 1.4rem;
}
p{
  display: flex;
  gap: 20px;
  align-items: baseline;
  margin-bottom: 20px;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:500px;
}

.contact-form input,
.contact-form textarea{
  background:black;
  border:1px solid rgb(250, 187, 234);;
  color:white;
  padding:10px;
  font-family: 'Inter', sans-serif;
}

.contact-form textarea{
  min-height:120px;
  resize:none;
}

.contact-form button{
  background:rgb(250, 187, 234);;
  color:black;
  border:none;
  padding:10px;
  cursor:pointer;
}

@media (max-width:1100px){

  .bg-image{
    object-position:60% center;
  }

  .contact-content{
  left: auto;
    right: 20px;
    top: 35%;
    transform: translateY(-50%);
  }

  .contact-text{
    width: 100%;
    text-align: right;
  }

  .contact-text h1{
    font-size: 5rem;
    font-weight: 400;
  }
  .label{
  font-weight: 600;
  font-size: 1.1rem;
}

.value{
  font-weight: 200;
  font-size: 1.1rem;
}
p{
  gap: 10px;
  margin-bottom: 10px;
  
}
.contact-form{
  width:250px;
}
}