/* ================================
   Global Variables
================================ */
:root {
  --color-primary: #1a73e8;       /* Blue for trust/links */
  --color-primary-hover: #155ab6;
  --color-secondary: #f97316;     /* Orange accent for highlights, buttons, icons */
  --color-secondary-dark: #e55d00;/* Optional darker shade */
  --color-grey: #6b7280;
  --color-bg-light: #f3f4f6;
  --color-white: #ffffff;
  --color-dark: #111827;
  --color-text: #555;
  --color-text-light: #bbb;
  --color-hero-title: #f3f3f3;    /* light grey for hero title over dark images */
}

@media (max-width: 768px) {
    .contact .row > .col-md-6 {
        margin-bottom: 30px;
    }
}

/* ================================
   Contact Specific Styles
================================ */
.contact-card {
  background: var(--color-bg-light);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 10px 15px rgba(0,0,0,0.1);
  border-radius: 8px;
  max-width: 600px;
  width: 100%;
}

.contact-card h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: var(--color-dark);
}

.contact-card label {
  font-weight: 500;
  color: var(--color-dark);
}

.contact-card input,
.contact-card textarea {
  background: var(--color-white);
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 16px;
  color: var(--color-text);
}

.contact-card input::placeholder,
.contact-card textarea::placeholder {
  color: var(--color-text-light);
}

.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-secondary:hover {
  background-color: var(--color-secondary-dark, #c95a11);
  border-color: var(--color-secondary-dark, #c95a11);
}