/* Custom CSS to center the form on mobile */

/* Base styles for the form container, works on all devices */
#contact-form {
  max-width: 500px; /* Sets a maximum width for the form */
  margin-left: auto; /* Centers the form on desktops */
  margin-right: auto; /* Centers the form on desktops */
  padding: 20px;
}

/* Center text for the header */
.header-container {
  text-align: center;
}

/* Make input fields and buttons fill their container */
#form input,
#form button {
  width: 100%;
  box-sizing: border-box; /* Ensures padding doesn't affect width */
  margin-bottom: 10px; /* Adds space between fields */
}

/* Add a media query for mobile devices */
@media only screen and (max-width: 768px) {
  #contact-form {
    /* Set a specific width for mobile to ensure it centers effectively */
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Custom CSS for mobile devices */

/* On screens smaller than 768px (standard mobile breakpoint) */
@media (max-width: 767px) {
    /* Apply padding to the main content area */
    .upper-content .container {
        padding-left: 20px; /* Adjust left padding */
        padding-right: 20px; /* Adjust right padding */
    }
    
    /* Ensure the centered paragraph also has padding */
    .upper-content .container p {
        padding: 0 15px; /* Adjust padding for the paragraph */
    }
}

/* Adjust padding for the main h1 headers on small screens */
@media (max-width: 767px) {
    .flexslider h1 {
        padding-left: 10px;
        padding-right: 10px;
    }
}