@media (max-width: 768px) {
  .leftimg {
    order: 1;
    max-width: 100%;
  }
  
  .rightimg {
    order: 2;
    max-width: 100%;
  }
  body{
    display:block;
  }
  form{
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    font-family: "Public Sans", sans-serif;
    flex-direction: column;
    background-color: white;
    border-radius: 20px;
  }

  
  .line{
    height: 1px;
    background-color: #E1E4E6;
    max-width:45rem;
    min-width: 109%;
    margin-top: 2rem;
    margin-left: -2rem;
    
  }
  input {
    z-index: 2;
  }
  label {
    border-radius: 10px;
      font-size: 14px;
      margin-left: 1rem;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      margin-bottom: -1rem;
      z-index: 5;
      background: white;
      color: black;
      display: inline-block; /* or display: inline; */
      overflow: hidden;
      white-space: nowrap;
      box-sizing: content-box;
  }
  
}
@media (min-width: 768px) {
  .line{
    height: 1px;
    background-color: #E1E4E6;
    width:55rem;
    max-width: 109%;
    margin-top: 2rem;
    margin-left: -2rem;
    
  }
  .leftimg {
    order: 1;
  }
  
  .rightimg {
    order: 2;
  }
  body {
    background-color: #f2f2f2;
    font-family: "Public Sans", sans-serif;
  }
  form {
    display: flex;
    align-items: flex-start;
    font-family: "Public Sans", sans-serif;
    flex-direction: column;
    background-color: white;
    border-radius: 20px;
    padding: 2rem;
    max-width: 45rem;
    margin:auto;
    
}

label {
      border-radius: 10px;
      font-size: 14px;
      margin-left: 1rem;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      margin-bottom: -1rem;
      z-index: 3;
      background: white;
      color: #919eab;
      display: inline-block; /* or display: inline; */
      overflow: hidden;
      white-space: nowrap;
      box-sizing: content-box;
    }
}

    root{
      max-width: 100%;
    }
       
    #map {
        height: 400px;
        width: 100%;
        border-radius: 10px;
        margin-top: 0rem;
        margin-bottom: 0.5rem;
        justify-content: center;
        align-items: center;
    }
    input {
        height: 3em;
        width: 100%;
        border-color: #E1E4E6;
        border: 1px solid #E1E4E6;
        border-radius: 10px;
        font-size: 14px;
        padding-left: 1rem;
        overflow: hidden;
        box-sizing: border-box;
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .name-label {
      color: #919eab; /* color for "Name" */
    }
    
    .required-asterisk {
      color: #ff0000; /* Red color for "*" */
    }
    select {
      height: 3em;
      width: 100%;
      border-color: #E1E4E6;
      border: 1px solid #E1E4E6;
      border-radius: 10px;
      font-size: 14px;
      padding-left: 1rem;
      box-sizing: border-box;
      margin-top: 0.5rem;
      margin-bottom: 1rem;
  }
    #photos{
      border:0px;
    }

    hr{
      margin-left:-5em;
    }
    input::placeholder {
      font-family: "Public Sans", sans-serif;
      color: #919eab; /* Change to your desired font color */
      font-size: 14px;
      margin-left: 10px;
    }

    p {
      font-size: 14px;
      
  }

  form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 45rem;
    margin: auto;
    padding: 2rem;
    font-family: "Public Sans", sans-serif;
    background-color: white;
    border-radius: 20px;
  }
  
  .button-container {
    /* Your other CSS styles for the button container... */
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
  }
  
  #submitButtonHome {
    /* Your other CSS styles for the submit button... */
    display: block;
    padding: 10px 20px;
    border: none;
    background-color: #212b36;
    width: 15rem;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 10px;
    font-size: 16px;
  }
  #submitButton {
    /* Your other CSS styles for the submit button... */
    display: block;
    padding: 10px 20px;
    border: none;
    background-color: #212b36;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 10px;
    font-size: 16px;
  }

  #submitButton:hover {
    background-color: #000000;
  }
  
  #submitButton:active {
    background-color: #000000;
  }
    #requestDesc{
      border-color: #E1E4E6;
      border-radius: 10px;
      height: 10em;
      resize: none;
      font-family: inherit;
      border: 1px solid #E1E4E6;
      font-size: 14px;
      width:100%;
      padding-left: 1rem;
      padding-top: 1rem;
      box-sizing: border-box;
      margin-top: 0.5rem;
    }

    #serviceArea, #requestType{
      font-family: "Public Sans", sans-serif;
      color: #919eab; /* Change to your desired font color */
      font-size: 14px;
      margin-bottom: 0.5rem;      
    }
    #requestDesc::placeholder{
      font-family: "Public Sans", sans-serif;
      color: #919eab; /* Change to your desired font color */
      font-size: 14px;
      
    }

    

    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    

    #attachments {
      /* margin-left: 20px; */
      display: flex;
      flex-wrap: wrap; /* Allow the images to wrap to the next row if necessary */
    }
    
    #attachments > div {
      display: flex;
      position: relative;
      margin: 0.5rem;
      align-items: center; /* Center the image and button vertically */
    }
    
    #pics {
      border-radius: 50%; /* Make the images rounded (circular) */
      width: 200px;
      height: 200px;
      object-fit: cover; /* Ensure the image fits within the container without stretching */
    }
    
    .delete-button {
      position: absolute;
      top: 5px;
      right: 5px;
      background-color: #000;
      color: #fff;
      padding: 4px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      width: 20px; /* Set the width of the delete button */
      height: 20px; /* Set the height of the delete button */
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    /* Add this additional style for the circular button */
    .delete-button::before {
      content: "x"; /* Display 'x' as the content of the pseudo-element */
    }
    h1, h3
    {
      color:#212B36;
      font-size: 22px;
    }
    h2 
    {
      color:#212B36;
      font-size: 16px;
    }
    #attach
    {
      color:#212B36;
    }

    /* #pics{
      border-radius: 10px;
      margin:0.5rem;
      max-width:5rem;
      max-height:5rem;
    } */

    #details{
      display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 45rem;
        background-color: #f2f2f2;
        border-radius: 10px;
    }