.contact-center-content {
    font-family: 'Poppins', sans-serif;
    text-align: center; /* Center-align text and inline elements */
    max-width: 400px; /* Set a max width for the container */
    margin: 0 auto; /* Center the container itself */
    margin-bottom: 40px;
}

.contact-center-content h1  {
    font-size: 24px;
}

/* contact form NEED. */
.contact-form {
    margin-top: 20px;
    background-color: #0e0e0e;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px 0;
}

.form-group {
    margin-bottom: 15px;
    position: relative;
}

.input-icon {
    display: flex; /* Use flexbox to align the icon and input */
    align-items: center; /* Center items vertically */
}


label {
    display: block;
    margin-bottom: 5px;
    color: #888;
}

.input-icon {
    margin: 0 auto; /* Center the input container */
    width: 85%;
    position: relative; /* Position relative to contain the absolute positioned icon */
}

.input-icon ion-icon {
    position: absolute; /* Absolutely position the icon */
    left: 10px; /* Position the icon inside the left side of the input */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for perfect vertical alignment */
    color: #f0f6fc; /* Icon color */
    pointer-events: none; /* Prevents click events on the icon */
    z-index: 10;
}

.email-input-field {
    font-family: 'Poppins', sans-serif;
    color: #f0f6fc;
    background-color: #333; 
    width: 100%; /* Use full width */
    padding: 10px 30px; /* Add extra padding on the left for the icon */
    border: none;
    border-radius: 5px; /* Rounded corners */
    transition: border-color 0.3s; /* Transition for focus effect */
    border: 2px solid transparent;
}



.message-input-field {
    font-family: 'Poppins', sans-serif;
    color: #f0f6fc;
    background-color: #333; 
    width: 80%;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 5px;
    transition: border-color 0.3s;
}

.message-input-field:focus,
.email-input-field:focus {
    outline: none; /* Remove outline */
    border: 2px solid #f0f6fc; /* Maintain consistent border size */
    transform: translateZ(0); /* Force hardware acceleration */
    background-color: #333; 
}


textarea {
    resize: vertical;
    height: 100px;
}

.send-button {
    font-family: 'Poppins', sans-serif;
    display: block;
    width: 20%;
    margin: 0 auto; 
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: rgb(112, 20, 20); 
    color: #f0f6fc;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
}

.send-button:hover {
    background-color: #360000;
  }

.connected-color {
    background-color: #360000; 
}

.connect-color {
    background-color: rgb(112, 20, 20); 
}

#feedbackMessage {
    min-height: 30px;
    margin-top: 20px;
    padding: 10px;
    color: #920000;
}