.contact {
      width: 100%;
      box-sizing: border-box;
      padding: 125px 0;
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
  url("./assets/images/contactBackgroundCompressed.avif");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
  }
  .contact h1 {
      color: white;
      text-align: center;
  }
  .contactcontanner {
      width: 70%;
      margin: 0 auto;
      box-sizing: border-box;
      display: flex;
      align-items: center;
  }
  .contactcontanner .contanner {
      width: 30%;
  }
  .contactcontanner .contanner .heading {
      width: 100%;
      display: flex;
      align-items: center;
      border: 2px solid white;
      margin-bottom: 8px;
      box-shadow: 0px 4px 8px rgba(0,0,0,.07);
  }
  .heading .icon {
      padding: 0 0 0 20px;
      font-size: 20px;
      color:hsl(186, 100%, 19%);
  }
  .heading .info {
      width: 70%;
      margin: 25px auto;
      color: white;
  }
  .heading .info #contactinfo {
      color: rgba(255, 255, 255, 0.7);
      font-weight: 500;
  }
  
  /* message form */
  .messageform {
      width: 70%;
      box-sizing: border-box;
      box-shadow: 0px 4px 8px rgba(0,0,0,.07);
      margin-left: 20px;
      background-color: rgba(0, 0, 0, 0.2);
  }
  .messageform .form {
      width: 80%;
      margin: 50px auto;
  }
  .messageform input , .messageform #inputbox {
      width: 100%;
      color: white;
      box-sizing: border-box;
      padding: 10px;
      margin-top: 10px;
      border: 2px solid white;
      outline: none;
      background-color: transparent;
  }
  .messageform button {
      padding: 10px 50px;
      margin-top: 20px;
      font-size: 14px;
      color: white;
      letter-spacing: 1px;
      background: linear-gradient(to right , transparent 50% ,hsl(186, 100%, 19%)      50%);
      background-size: 200%;
      background-position: left;
      border: 2px solid white;
      cursor: pointer;
      transition: .3s;
  }
  .messageform button:hover {
      background-position: right;
  }
  
  .info p{
    color:hsl(186, 100%, 19%)
    ;
  }
  
  .error{
    color:rgb(239, 57, 57);
  }@media only screen and (max-width : 700px) {
    .contact h1{
        margin-top: 2rem;

    }
    .contact {
        padding: 50px 0;
    }
    .contactcontanner {
        width: 95%;
        display: block;
    }
    .contactcontanner .contanner {

        width: 100%;
    }
    /* message form */
    .messageform {
        width: 100%;
        margin-left: 0px;
        padding: 1px 0;
    }
    .messageform .form {
        width: 93%;
        margin: 50px auto;
    }
  }