@font-face {
  font-family: 'Fields';
  src: url('../content/Fields-SemiBold.otf') format('opentype');
  font-weight: 600; /* semibold */
  font-style: normal;

}
@font-face {
  font-family: 'Lora';
  src: url('../content/Lora-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito-Sans';
  src: url('../content/NunitoSans.ttf') format('truetype');
  font-weight: 800;
  font-style: bold;
}


:root {
      --cream: #F7F1E4;
      --warm-white: #F7F1E4;
      --blush: #F4C5B4;
      --terracotta: #c6803d;
      --deep-clay: #c6803d;
      --clay: #C6803D;
      --sage: #baaf69;
      --deep-sage: #68672b;
      --charcoal: #2E2A26;
      --text-soft: #5A504A;
      --text-muted: #8A7E78;
    }



 
.contact-section {
    margin: 0;
    padding: 0;
    min-height: 140vh;        /* extra height so image shows fully */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    background-attachment: scroll;
    background-image: url('owlBlue.png');
}

.contact-form-wrapper {
  max-width: 600px; /* this is the outter box size for the form*/
  margin: 60px auto;
  padding: 20px;
  background-color: var(--blush); /* blush color*/
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: 'Lora', serif;
animation: fadeIn 0.6s ease-out forwards;
}

.contact-form-wrapper .contact-title{
  margin-bottom: 20px;
  font-size: 20px;
  color: #F4C5B4;
  text-align: center;  
}
.contact-form {
    width: 100%;
    max-width: 100%;
}

.contact-content {
    display: flex;
     flex: 1;   
    justify-content: center;
    align-items: center;
    gap: 40px; /* space between form and image */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
.contact-contentindex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; /* space between form and image */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
     border-radius: 18px; 
}


.contact-form-wrapper h2 {
  margin-bottom: 20px;
  font-family: 'Nunito-Sans', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--charcoal);
  text-align: center;
}

.contact-form label {
  display: block;
  font-family: 'Lora', sans-serif;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--clay);
}
.contact-title p {
  font-family: 'Lora', sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--charcoal);
  text-align: center;
}
.drop { 
margin-bottom: 20px; /* adjust as needed */ 
font-family: 'Lora', serif;
}
.drop select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  font-family: 'Lora', serif !important;
  font-size: 16px;
  color: var(--charcoal);
}

.drop select option {
  font-family: 'Lora', serif !important;
  font-size: 18px;
  color: var(--charcoal);
}

input[type="text"],
input[type="email"],
textarea {
  font-family: 'Lora', serif !important;
  font-size: 14px;
  color: var(--charcoal);
}

#message {
    width: 100%;
    min-height: 180px;
    padding: 12px;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.sucess {
    font-family: 'Lora', serif !important;
  font-size: 22px;
  color: var(--charcoal);
}


.contact-form select {
width: 100%; 
padding: 10px; 
margin-bottom: 14px; /* matches your input spacing */ 
border: 1px solid #ccc; 
border-radius: 4px; 
font-size: 14px; 
box-sizing: border-box; 
}

.contact-form select option {
  font-family: 'Lora', serif !important;
}

.contact-form input {
  width: 100%;
  padding: 10px;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.contact-form input:focus {
  border-color: var(--charcoal);
  outline: none;
  box-shadow: 0 0 0 2px rgba(60, 36, 76, 0.2);
}

/* Disabled state */
#sendBtn:disabled {
    background-color: #cccccc;   /* gray */
    color: #666;
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;        /* prevents hover */
}


/* Enabled state */
#sendBtn {
    background-color: #9BB6DC;   /* light blue */
  cursor: pointer;
  transition: background-color 0.2s;
  font-family: 'Fields', sans-serif; 
  font-weight: 600;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Hover when enabled */
#sendBtn:not(:disabled):hover {
    background-color: #5985C4;   /* darker blue */
}



@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}