/* =========================================================
   Contact Us — page-scoped styling (light + dark)
   Requires <main class="contact-page"> wrapper in the template
   ========================================================= */

/* Brand tokens (light) */
.contact-page {
  --ct-bg:        #fafbfc;
  --ct-surface:   #ffffff;
  --ct-surface-2: #f6f8fb;
  --ct-text:      #1f2937;
  --ct-muted:     #6b7280;
  --ct-border:    #e5e7eb;
  --ct-accent:    #c9316d;
  --ct-shadow:    0 6px 28px rgba(45,28,62,0.075);
  --ct-shadow-sm: 0 2px 16px rgba(201,49,109,0.05);
}

/* Dark tokens */
.theme-dark .contact-page {
  --ct-bg:        #0b1220;
  --ct-surface:   #0f172a;
  --ct-surface-2: #111a2f;
  --ct-text:      #e5e7eb;
  --ct-muted:     #94a3b8;
  --ct-border:    #1f2a44;
  --ct-accent:    #a51c36; /* keep brand */
  --ct-shadow:    0 10px 30px rgba(0,0,0,.45);
  --ct-shadow-sm: 0 6px 20px rgba(0,0,0,.35);
}

/* Page background (never force body color here) */
.contact-page .container-fluid { 
  background: var(--ct-bg); 
  overflow-x: hidden;
}

/* Typography */
.contact-page .contact-heading {
  color: #a51c36;
  font-size: 2.3rem;
  font-weight: 700;
  margin-bottom: .3rem;
}
.contact-page .contact-subheading {
  color: var(--ct-accent);
  font-size: 1.55rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}
.contact-page,
.contact-page p,
.contact-page label { color: var(--ct-text); }
.contact-page .text-muted { color: var(--ct-muted) !important; }

/* Left: form container gets a surface */
.contact-page .form-section {
  background: var(--ct-surface);
  border: 1px solid var(--ct-border);
  border-radius: 12px;
  box-shadow: var(--ct-shadow);
  padding: 2rem;
}

/* Cards (Info + Sidebar) */
.contact-page .contact-info-section,
.contact-page .sidebar-block {
  background: var(--ct-surface);
  border: 1px solid var(--ct-border);
  border-radius: 12px;
  box-shadow: var(--ct-shadow-sm);
  color: var(--ct-text);
  padding: 1.5rem 1.8rem;
  margin-bottom: 2rem;        /* 🔑 space between stacked blocks */
}

.contact-page .contact-info-section h3,
.contact-page .contact-info-section h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: #a51c36;
  font-weight: 700;
}

.contact-page .contact-info-section p {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.contact-page .sidebar-section { background: transparent; }

/* Images */
.contact-page .sidebar-block img {
  width: 100%;
  border-radius: 9px;
  margin-bottom: 10px;
  box-shadow: 0 2px 16px rgba(156,76,129,0.09);
}

/* Buttons */
.contact-page .btn-contact {
  background: linear-gradient(88deg,#a51c36 13%,#c9316d 99%);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  padding-left: 32px;
  padding-right: 32px;
  box-shadow: 0 4px 24px 0 rgba(201,49,109,0.11);
  transition: filter .17s, background .17s;
}
.contact-page .btn-contact:hover { filter: brightness(0.95); }

/* Social icons */
.contact-page .social-icons a {
  font-size: 1.5rem;
  margin: 0 10px;
  color: var(--ct-accent);
  transition: color .14s;
}
.contact-page .social-icons a:hover { color: var(--ct-text); }

/* Forms */
.contact-page .form-control,
.contact-page .form-select {
  border-radius: 8px;
  border: 1.3px solid var(--ct-border) !important;
  background: var(--ct-surface) !important;
  color: var(--ct-text) !important;
  margin-bottom: 1.1rem;
  font-size: 1rem;
  box-shadow: none !important;
}
.contact-page .form-control::placeholder { color: var(--ct-muted); }

/* Link colors inside text blocks remain readable in dark */
.theme-dark .contact-page a { color: #93c5fd; }
.theme-dark .contact-page a:hover { color: #bfdbfe; }

/* Layout / spacing tweaks */
@media (max-width:991px){
  .contact-page .sidebar-section,
  .contact-page .sidebar-block {
    max-width: 510px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width:767px){
  .contact-page .contact-heading { font-size:1.5rem; }
  .contact-page .contact-subheading { font-size:1.15rem; }
  .contact-page .sidebar-section,
  .contact-page .form-section { padding: .65rem !important; }
}

/* Match your gutter spacing from the original CSS */
.contact-page .row.gx-5 { --bs-gutter-x: 1.1rem; }

/* Back-to-top button stays visible on dark */
.theme-dark .contact-page .back-to-top { 
  color:#fff; 
  background: var(--ct-accent) !important; 
}