.contact{
    display: flex;
    justify-content: center;
    margin: 50px 0;
}

.contact-flex{
    display: flex;
}

.contactsubmit{
  height: 4em;
  background-color: #D74C4C;
  color: #ffffff;
  border-radius: 10px;
  border: none;
}

.map{
    width: 50%;
    border-radius: 10px;
    overflow: hidden;

}

.contact-form{
    width: 50%;
    padding: 0 20px;
}

.contact-form form{
    display: flex;
    flex-direction: column;
    gap: 20px;
}



textarea{
    padding-top: 10px;
    padding-left: 10px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #D9D9D9;
}

textarea, input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


label {
    position: relative;
  }
  
  label > .icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #ffffff;
  }
  
  label > input {
    padding-left: calc(1.3em + 10px + 8px); /* icon width + icon padding-left + desired separation*/
    height: 4em;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #D9D9D9;
  }


  
  /*
    SVG SpriteSheet
  */
  
  .spritesheet {
    display: none;
  }
  
  .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
  }

  .names{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;

  }

  .contact p{
    color: #B1B1B1;
    font-size: 14px;
    margin: 10px 0;
  }

.contact-details{
    display: flex;
    justify-content: center;
}

.contact-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    justify-content: center;
    text-align: center;
}

.contact-container{
    height: 100px;
    display: flex;
    justify-content: center;
}

.c-container{
    width: 1400px;
}

@media screen and (min-width: 280px) and (max-width: 680px) {

  .contact-flex{
    flex-direction: column;
    gap: 20px;
}

.map{
  width: 100%;
  border-radius: 10px;

}

.contact-form{
  width: 90%;
  padding: 0 20px;
}

.contact-grid{
  grid-template-columns: repeat(1,1fr);
}



}




@media screen and (min-width: 1200px) and (max-width: 1600px){

  .c-container{
    width: 1200px;
  }
}