.connect {
  color: white;
  background-color: #005A8D;
  font-family: 'work sans', serif;
   font-size: 50px;
   font-weight: normal;
   text-align: left;
   padding-top: 35px;
   text-decoration: none;
   margin: auto;
   padding-left: 200px;
}


.design {
color: white;
background-color: #005A8D;
font-family: Taviraj, serif;
 font-size: 20px;
 font-weight: normal;
 text-align: center;
 padding-bottom: 35px;
 text-decoration: none;
 margin: auto;
}


.letter {
  position: relative;
  height: 110px;
  width: 115px;
  left: 785px;
  top: -119px;
}


.message {
  font-family: Taviraj, serif;
  font-size: 18px;
  color: #005A8D;
  position: relative;
  left: 555px;
  top:-212px;
}

.leave-a-message {
  font-family: Taviraj, serif;
  font-size: 22px;
  color: #005A8D;
  text-align: center;
  padding-bottom: 10px;
}


form {
  /* Just to center the form on the page */

  margin: 0 auto;
  width: 900px;
  height: 700px;
  color: #005A8D;
  font-family: 'Taviraj',serif;
  font-size: 18px;


  /* To see the outline of the form */
  padding: 1em;
  border: 2px solid #434F5B;
  border-radius: 1em;
}

 div + div {
  margin-top: 2em;
}

label {
  /* To make sure that all labels have the same size and are properly aligned */
  display: inline-block;
  width: 100px;
  text-align: left;
}

input, textarea {
  /* To make sure that all text fields have the same font settings
     By default, text areas have a monospace font */
  font: 1em 'Taviraj', serif;


  /* To give the same size to all text fields */
  width: 864px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;


  /* To harmonize the look & feel of text field border */
  border: 2px solid #434F5B;

}

input:focus, textarea:focus {
  /* To give a little highlight on active elements */
  border-color: #000;
}

textarea {
  /* To properly align multiline text fields with their labels */
  vertical-align: top;

  /* To give enough room to type some text */
  height: 5em;

  resize:vertical;
}

button {
  /* To position the buttons to the same position of the text fields */
  padding-center: 90px; /* same size as the label elements */
  color: #005A8D;
  height: 50px;
  width: 200px;
  font-size: 16px;
  }

button {
  /* This extra margin represent roughly the same space as the space
     between the labels and their text fields */
  margin-center: .5em;
}



/* Your existing CSS styles above */

/* Add the styling for the form container */
.form-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 1em;
  border: 2px solid #434F5B;
  border-radius: 1em;
  color: #005A8D;
  font-family: 'Taviraj', serif;
  font-size: 18px;
  background-color: #f2f2f2;
  display: flex; /* Add flex display to align items vertically */
  flex-direction: column; /* Align items in a column */
}

.form-container label {
  display: inline-block;
  width: 150px; /* Increased width for better alignment with longer label text */
  text-align: left;
}

.form-container input[type="text"],
.form-container input[type="email"],
.form-container select,
.form-container textarea {
  font: 1em 'Taviraj', serif;
  width: 100%; /* Use full width of the container */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid #434F5B;
  margin-bottom: 10px;
  padding: 10px;
}

.form-container input:focus, .form-container textarea:focus {
  border-color: #000;
}

.form-container textarea {
  vertical-align: top;
  height: 5em;
  resize: vertical;
}

.form-container .button {
  text-align: center;
  margin-top: 20px;
}

.form-container .button button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  font-size: 16px;
  cursor: pointer;
}

/* Your existing CSS styles below */
/* ... */


/* Your existing CSS styles above */

/* Styles for .connect, .design, .letter, .message, .leave-a-message */
.connect {
  color: white;
  background-color: #005A8D;
  font-family: 'work sans', serif;
  font-size: 50px;
  font-weight: normal;
  text-align: left;
  padding-top: 35px;
  text-decoration: none;
  margin: auto;
  padding-left: 200px;
}

.design {
  color: white;
  background-color: #005A8D;
  font-family: Taviraj, serif;
  font-size: 20px;
  font-weight: normal;
  text-align: center;
  padding-bottom: 35px;
  text-decoration: none;
  margin: auto;
}

.letter {
  position: relative;
  height: 110px;
  width: 115px;
  left: 785px;
  top: -119px;
}

.message {
  font-family: Taviraj, serif;
  font-size: 18px;
  color: #005A8D;
  position: relative;
  left: 555px;
  top: -212px;
}

.leave-a-message {
  font-family: Taviraj, serif;
  font-size: 22px;
  color: #005A8D;
  text-align: center;
  padding-bottom: 10px;
}

/* Styles for form and its elements */
form {
  margin: 0 auto;
  width: 900px;
  height: 700px;
  color: #005A8D;
  font-family: 'Taviraj', serif;
  font-size: 18px;
  padding: 1em;
  border: 2px solid #434F5B;
  border-radius: 1em;
}

div + div {
  margin-top: 2em;
}

label {
  display: inline-block;
  width: 100px;
  text-align: left;
}

input,
textarea {
  font: 1em 'Taviraj', serif;
  width: 864px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid #434F5B;
}

input:focus,
textarea:focus {
  border-color: #000;
}

textarea {
  vertical-align: top;
  height: 5em;
  resize: vertical;
}

button {
  padding: 10px 90px; /* Adjust padding to center the button */
  color: #005A8D;
  height: 50px;
  width: 200px;
  font-size: 16px;
  margin: 0.5em;
  border: none;
}

/* Styles for .form-container */
.form-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 1em;
  border: 2px solid #434F5B;
  border-radius: 1em;
  color: #005A8D;
  font-family: 'Taviraj', serif;
  font-size: 18px;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
}

.form-container label {
  display: inline-block;
  width: 150px;
  text-align: left;
}

.form-container input[type="text"],
.form-container input[type="email"],
.form-container select,
.form-container textarea {
  font: 1em 'Taviraj', serif;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid #434F5B;
  margin-bottom: 10px;
  padding: 10px;
}

.form-container input:focus,
.form-container textarea:focus {
  border-color: #000;
}

.form-container textarea {
  vertical-align: top;
  height: 5em;
  resize: vertical;
}

.form-container .button {
  text-align: center;
  margin-top: 20px;
}

.form-container .button button {
  background-color: #005A8D;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  font-size: 16px;
  cursor: pointer;
}




/* Your existing CSS styles below */
/* ... */

/* Media queries and remaining styles below */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* ... */
}






@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
.connect {

  font-size: 26px;
  text-align: left;
  padding-top: 30px;
  padding-left: 9px;
}

.design {
  font-size: 14px;
  text-align: left;
  padding-bottom: 30px;
  padding-left: 27px;
}


  .letter {
    height: 80px;
    width: 82px;
    left: 46px;
    top: 31px;
  }

.message {
  font-size: 16px;
  left: 130px;
  top: -46px;
}

.leave-a-message {
  font-size: 16px;
  padding-bottom: 19px;
  padding-left: 30px;
}

form {
  width: 80%;
  height: 700px;
  font-size: 16px;
  }

input, textarea {
  width: 221px;

}