/*Google font*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); /* Import Roboto font */
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap'); /* Import Pinyon Script font */
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap'); /* Import Pinyon Script & Playfair Display */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap'); /* Import Playfair Display font */
@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap'); /* Import Merriweather font */
/* Base styles */
body { 
  background-image: url('../Images/Listings06.jpg'); /* Background image */
  background-size: cover; /* Cover entire background */
  background-attachment: fixed; /* Fixed background */
  background-repeat: no-repeat; /* No repeat */
  font-family: 'Merriweather', serif; /* Main font */
  color: #2E4053; /* Text color */
  margin: 0; /* Remove margin */
  padding: 0; /* Remove padding */
}

.contact-form { /* Contact form container */
  max-width: 800px; /* Max width */
  margin: 3rem auto; /* Centered with margin */
  padding: 2rem; /* Padding inside */
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 4px 4px 4px 4px hsla(221, 21%, 33%, 0.911); /* Shadow */
  animation: fadeIn 1s ease-in-out; /* Fade-in animation */
}

.contact-form h2 { /* Form title */
  font-size: 24px; /* Title size */
  opacity: 0;
  transform: translateY(-20px);
  animation: slideFade 1s ease-out forwards;
  font-size: 2rem;
  font-weight: bold;
  color: rgb(24, 24, 202);
  text-align: center;
}
@keyframes slideFade {
  to {
    opacity: 2;
    transform: translateY(0);
  }
}

/* Form layout */
.form-row { /* Row for form fields */
  display: flex; /* Flex layout */
  gap: 1rem; /* Space between items */
  flex-wrap: wrap; /* Wrap on small screens */
}

.form-group { /* Group for label & input */
  display: flex; /* Flex layout */
  flex-direction: column; /* Stack vertically */
  margin-bottom: 1.5rem; /* Space below */
  flex: 1; /* Grow to fill row */
}
.checkbox-group {
  flex: 2; /* Take more space */
  margin-top: 1rem; /* Space above */
  color: #0078d4; /* Text color */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* Font */
  font-weight: 500; /* Medium weight */
  text-shadow: 0 0 5px rgba(238, 118, 6, 0.2); /* Subtle shadow */
}
.checkbox-group-label {
  font-weight: 500; /* Bold */
  color: #555555; /* Gray color */
}

label { /* All labels */
  margin-bottom: 0.5rem; /* Space below */
  font-weight: 600; /* Bold */
  color: #555555; /* Gray color */
}

input, textarea, select { /* Inputs, text areas, selects */
  padding: 0.75rem; /* Padding */
  border: 1px solid #ccc; /* Light border */
  border-radius: 4px; /* Rounded corners */
  font-size: 1rem; /* Font size */
  transition: border-color 0.3s ease; /* Smooth border change */
}

input:focus, textarea:focus { /* Focused input/textarea */
  border-color: #0078D4; /* Blue border */
  outline: none; /* No outline */
}

/* Checkbox group */
.checkbox-group { /* Checkbox container */
  display: grid; /* Grid layout */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
  gap: 0.5rem; /* Space between */
  margin-top: 0.5rem; /* Space above */
}

.checkbox-group label { /* Checkbox label */
  font-weight: normal; /* Normal weight */
  display: flex; /* Flex layout */
  align-items: center; /* Center vertically */
  gap: 0.5rem; /* Space between */
}

/* Button styling */
button { /* All buttons */
  padding: 0.75rem 1.5rem; /* Padding */
  background-color: #0078D4; /* Blue background */
  color: white; /* White text */
  border: none; /* No border */
  border-radius: 4px; /* Rounded corners */
  font-size: 1rem; /* Font size */
  cursor: pointer; /* Pointer cursor */
  align-self: flex-start; /* Align left */
}

button:hover { /* On hover */
  background-image: linear-gradient(to right, #f5a905, #0078D4); /* Gradient */
  color: black; /* Black text */
  transform: scale(1.05); /* Slightly larger */
  transition: transform 0.3s ease-in-out; /* Smooth scaling */
}
.secondary-cta {
  text-align: center; /* Centered */
  margin-top: 2rem; /* Space above */
}

.secondary-cta p {
  font-size: 1.1rem; /* Slightly larger */
  margin-bottom: 2.5rem; /* Space below */
}
.secondary-cta a {
  padding: 0.75rem 1.5rem; /* Padding */
  background-color: #0078D4; /* Blue background */
  color: white; /* White text */
  border: none; /* No border */
  border-radius: 4px; /* Rounded corners */
  font-size: 1rem; /* Font size */
  cursor: pointer; /* Pointer cursor */
  align-self: flex-start; /* Align left */
  text-decoration: none;
}
.secondary-cta a:hover {
  background-image: linear-gradient(to right, #e5a40c, #e4730a, #ff0202); /* Gradient */
  color: black; /* Black text */
  transform: scale(1.05); /* Slightly larger */
  transition: transform 1.3s ease-in-out; /* Smooth scaling *
}
.hidden {
  display: none; /* Hide element */
}

@keyframes fadeInUp {
  from {
    opacity: 0; /* Invisible */
    transform: translateY(20px); /* Move down */
  }
  to {
    opacity: 1; /* Visible */
    transform: translateY(0); /* Move to place */
  }
}


/* Animation for form appearance for form */
@keyframes fadeIn{
  from { opacity: 0; transform: translateY(10px);} /* Start faded & down */
  to { opacity: 1; transform: translateY(0);} /* End visible & in place */
}
form {
  animation: fadeIn 2s ease-in-out; /* Animate form in */
}
input:focus, textarea:focus {
  outline: none; /* No outline */
  box-shadow: 0 0 5px rgba(0, 120, 212, 0.5); /* Blue glow */
  transition: box-shadow 0.3s ease; /* Smooth glow */
}
/* Animation for glowing text */
@keyframes glowPulse {
  0% {
    text-shadow: 0 0 8px rgba(0,120,212,0.6), 0 0 16px rgba(0,120,212,0.4); /* Start glow */
  }
  50% {
    text-shadow: 0 0 12px rgba(0,120,212,0.8), 0 0 24px rgba(0,120,212,0.6); /* Stronger glow */
  }
  100% {
    text-shadow: 0 0 8px rgba(0,120,212,0.6), 0 0 16px rgba(0,120,212,0.4); /* Back to start */
  }
}
/*Style for smaller screen Contact form*/
@media (max-width: 600px) {
  .body {
    font-family: Arial, Helvetica, sans-serif; /* Simpler font */
    padding: 10px; /* Padding */
    margin: 0; /* No margin */
    background-color: #ccc; /* Gray background */
  }
  form {
    display: flex; /* Flex layout */
    flex-direction: column; /* Stack vertically */
    gap: 1rem; /* Space between */
    padding: 10px; /* Padding */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  }
  label {
    font-size: 14px; /* Smaller font */
    margin-bottom: 1rem; /* Space below */
  }
  input, select, textarea {
    padding: 10px; /* Padding */
    font-size: 14px; /* Smaller font */
    border: 1px solid #ccc; /* Border */
    border-radius: 6px; /* More rounded */
    width: 100%; /* Full width */
    box-sizing: border-box; /* Include padding in width */
  }

  textarea {
    resize: vertical; /* Allow vertical resize */
    min-height: 100px; /* Minimum height */
  }

  button {
    padding: 12px; /* Padding */
    background-image: linear-gradient(to right, #f1e208, #488813); /* Gradient */
    font-size: 14px; /* Smaller font */
    color: black; /* Black text */
    border-radius: 6px; /* Rounded */
    border: 1px solid #d49b00; /* Border */
    cursor: pointer; /* Pointer cursor */
  }
  button:hover {
    background-image: linear-gradient(to right, #030c25, #0078D4); /* Blue gradient */
    color: white; /* White text */
  }
  
  .form-group .subject {
    margin-bottom: 2rem; /* Space below */
  }

  .form-group .checkbox-group label {
    display: flex;                              /* Flex for checkbox and label text */
    align-items: center;                        /* Vertically center items */
    font-size: 14px;                           /* Match other mobile text */
    margin: 0;                                  /* Remove margins */
    white-space: nowrap;                       /* Prevent text wrapping */
  }

   .form-group .checkbox-group {
    display: grid;                               /* Use grid layout */
    grid-template-columns: repeat(1 , 2rem);       /* 2 columns of equal width */
    gap: 1rem;                                   /* Space between items */
    width: 100%;                                 /* Full width */
    padding: 0.5rem;                            /* Some padding */
  }
  .form-group .checkbox-group input[type="checkbox"] {
    margin-right: 0.5rem;                      /* Space between checkbox and text */
  }
}