/* Process.css */

/* Overall page styling */
body {
    /* background-color: #f2f2f2; */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  
  .adoption-process {
    
    text-align: center;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  
  }
  .adoption-process-steps{
    margin-left: 30px;
  }
  .adoption-process-content {
    /* background-color: #E6F7FF; Light Blue background
    */
    background-color: #daad86c0;
    border-radius: 10px;
    padding: 20px;
    text-align: left;
    max-width: 1300px;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  
  .adoption-process-content {
    margin-top: 30px;
  }
  
  .adoption-process-content:hover {
    transform: scale(1.005);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }
  
  .adoption-process-title {
    font-size: 28px;
    color: #333; /* Dark gray text */
    margin-bottom: 10px;
  }
  
  .adoption-process-description {
    font-size: 16px;
    color: #555; /* Medium gray text */
  }
  
  .adoption-process-subtitle {
    font-size: 24px;
    color: #333; /* Dark gray text */
    margin-top: 20px;
  }
  
  /* Form styling */
  .adoption-form-title {
    font-size: 24px;
    color: #8D8741; /* Color #1 */
    margin-top: 20px;
  }
  
  .container {
    background-color: #daad86c0;
    border-radius: 5px;
    padding: 20px;
  
    max-width: 800px;
    margin: 0 auto;
  }
  
  .user-input-box {
    margin: 20px 0;
  }
  
  label {
    font-weight: bold;
    font-size: 18px;
    color: black; /* Color #3 */
  }
  
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #BC986A; /* Color #4 */
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s;
  }
  
  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="tel"]:focus,
  input[type="password"]:focus,
  textarea:focus {
    border-color: #FBEEC1; /* Color #5 */
  }
  
  .gender-details-box {
    margin: 20px 0;
  }
  
  .gender-title {
    font-weight: bold;
    font-size: 20px;
    color: #8D8741; /* Color #1 */
  }
  
  .gender-category {
    margin: 20px 0;
  }
  
  .gender-category label {
    font-size: 16px;
    color: #DAAD86; /* Color #3 */
  }
  
  .form-submit-btn {
    text-align: center;
    margin-top: 20px;
  }
  
  input[type="submit"] {
    background-color: #4CAF50; /* Green button background */
    color: #fff; /* White text */
    border: none;
    border-radius: 5px;
    padding: 12px 20px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  input[type="submit"]:hover {
    background-color: #45A43E; /* Darker green on hover */
  }
  
  /* Responsive styles */
  @media (max-width: 768px) {
    .adoption-process-content {
      max-width: 100%;
    }
  
    .container {
      padding: 10px;
      max-width: 100%;
    }
  }
  .container {
    background-color: #f2a05791;
    /* Light Blue background********88 */
    border-radius: 5px;
    padding: 40px; /* Increase padding for more space */
    max-width: 800px; /* Increase the maximum width */
    margin: 0 auto;
  }
  
  .adoption-form-title {
    font-size: 24px;
    color: #8D8741;
    margin-top: 20px;
  }
  
  .user-input-box {
    margin: 20px 0; /* Increase the margin for better spacing */
  }