.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  
  color: white;
}

.page-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 95%;
  max-width: 1200px;
  gap: 20px;
  margin: 20px auto;
}



.website-title {
  font-size: 1.75rem;
  flex: 1;
  text-align: center;
  height: 100%;
  width: 100%;
  background:  linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%), #000;
  border-radius: 56px;
  font-family: 'bruno ace', sans-serif;
}

.website-title:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%), #000;
}

.page-title {
  font-size: 1.60rem;
  text-align: center;

  flex: 2;
  background: #0D1B2A;
  border-radius: 56px;

}


/*********************************************************************/

.contact-form-card {
  background:  linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%), #1B3B6F;
  width: 95%;
  max-width: 1200px;

  border-radius: 54px;
}

.contact-form-card .form-group {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 20px;
  
}

.form-group .form-subgroup {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.form-content{
  margin: 40px;
  
  display: flex;
  flex-direction: column;
  
  padding: 20px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  padding: 20px;
}



@media (max-width: 1200px) {
  .page-nav {
    flex-direction: column;
    align-items: center;
    
  }

  .website-title, .page-title {
    flex: none;
    width: 100%;
  }

  .contact-form-card {
    width: 95%;
  }

  .contact-form-card .form-group {
    flex-direction: column;
  }

  .form-content{
    margin: 0;
  }

  .form-group{
    padding: 0;
    
  }
}