.contact {
    display: flex;
    flex-direction: column;
    background-color: #333; /* Dark background color */
    color: white; /* White text color */
    min-height: 100vh;
    width: 100vw;
    padding: 20px;
    margin-top: 7vh;
  }
  
  
 .contact-socials{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 3% auto;
 }
  /* Styling for social media icons */
.contact-socials a {
  color: white; /* White icon color */
  font-size: 24px; /* Icon size */
  margin: 0 10px; /* Space between icons */
  transition: color 0.3s ease; /* Smooth transition for hover effect */
  text-decoration: none; /* Remove underline */
}

/* Hover effect for social media icons */
.contact-socials a.fa-linkedin:hover {
  color: #0073b1; /* LinkedIn blue for hover */
}

.contact-socials a.fa-twitter:hover{
  color: #1da1f2; /* Twitter blue for hover */
}


.contact-socials a.fa-envelope:hover{
  color: #4CAF50;
}

.contact-socials a.fa-github:hover {
  color: #6e5494; /* GitHub purple for hover */
}

  .contact .field {
    margin-bottom: 10px;
  }
  
  .contact form {
    width: 50%;
    align-self: center;
    padding: 2%; /* Increased padding for more space inside the container */
  background-color: #1c1c1c; /* Darker background for the containers */
  color: #f1f1f1; /* Light text color for better readability */
  border-radius: 20px; /* Rounded corners */
  box-shadow: 0 0px 25px rgba(255, 255, 255, 0.2); /* Light shadow for dark background */
  margin: 0 auto;
  }
  
  .contact form .hide {
    display: none; /* Hide the hidden_tag div if necessary */
  }
  
  .contact .flash {
    color: red; /* Example: Red color for error messages */
  }
  
  .contact form input[type="text"],
  .contact form input[type="email"],
  .contact form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
  }
  
  .contact form input[type="submit"] {
    background-color: #4CAF50; /* Green submit button */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
  }
  
  .contact form input[type="submit"]:hover {
    background-color: #45a049;
  }
  
  .contact form textarea {
    resize: vertical; /* Allow vertical resize of textarea */
    height: 150px; /* Set initial height for textarea */
  }
  

  
  .contact h5:last-child {
    margin-bottom: 0; /* Remove bottom margin from last h5 element */
  }

h5{
    align-self: center;
}
.contact-line{
    margin: auto;
    
}

.success-email{
  align-self: center;
  align-content: center;
  align-items: center;
  text-align: center;
}
@media (max-width: 768px) {
  .contact {
    display: flex;
    flex-direction: column;
    background-color: #333; /* Dark background color */
    color: white; /* White text color */
    min-height: 100vh;
    width: 100vw;
    padding: 30px;
    margin-top: 5vh;
  }
  .contact form{
    padding: 5%; /* Increased padding for more space inside the container */
    background-color: #1c1c1c; /* Darker background for the containers */
    color: #f1f1f1; /* Light text color for better readability */
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0 0px 25px rgba(255, 255, 255, 0.2); /* Light shadow for dark background */
    width: 90%;
    margin: 0 auto;
  }

  .contact-socials{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 7% auto;
   }
}