.contact__container{
  background: var(  ---color-bg1);
  padding: 4rem;
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 4rem;
  height: 30rem;
  margin: 7rem auto;
  border-radius: 1rem;

}

/* ------------aside------- */

.contact__aside{
  background: var( ---color-primary);
  padding: 3rem;
  border-radius: 1rem;
  position: relative;
  bottom: 10rem;

}

.aside__image{
  width: 12rem;
  margin-bottom: 2rem;

}

.contact__aside h2{
  text-align: center;
  margin-bottom: 1rem;
}

.contact__aside p{
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.contact__details li{
display: flex;
gap: 1rem;
align-items: center;
margin-bottom: 1rem;
}

.contact__socials{
  display: flex;
  gap: 0.8rem;
  margin-top: 3rem;
}

.contact__socials a{
  background: var(---color-bg2);
  padding: 0.5rem;
  border-radius: 50%;
  font-size: 0.9rem;
  transition: var(  ----trasition);
}

.contact__socials a:hover{
  background: transparent;
}


/* ---------form------ */

.contact__form{
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-right: 4rem;

}

.form__name{
  display: flex;
  gap: 1.2rem;

}

.contact__form input [type="text"]{
width: 50%;
}

input, textarea{
width: 100%;
padding: 1rem;
background: var(---color-bg);
color: white;
}
.contact__form textarea{
  width: 100%;
padding: 1rem;
background: var(---color-bg);
color: white;


}

.contact__form .btn{
  width: max-content;
  margin-top: 1rem;
  cursor: pointer;

}

/* media quries tablet */


@media screen and (max-width: 1024px) {
.contact{
padding: 0%;
}   

.contact__container{
  gap: 1.5rem;
  margin-top: 3rem;
  height: auto;
  padding: 1.5rem;
}

.contact__aside{
  width: auto;
  padding: 1.5rem;
  bottom: 0;

}
.contact__form{
  align-self: center;
  margin-right: 1.5rem;
}

}


/* media quries phone */
@media screen and (max-width: 600px) {
  .contact__container{
      grid-template-columns: 1fr ;
      gap: 3rem;
      margin-top: 0%;
      padding: 0%;
  }

  .contact__form{
      margin: 0 1.5rem 3rem;
  }

  .form__name{
      flex-direction: column;
  }

  .form__name input [type="text"] {
      width: 100%;

  }
}