Get in Touch

We're here to help with any questions or concerns

.contact-container { min-height: calc(100vh - var(--header-height) - var(--footer-min-height)); padding: var(--spacing-3xl) 0; background-color: var(--primary-dark); } .contact-header { text-align: center; margin-bottom: var(--spacing-3xl); } .contact-title { font-family: var(--font-display); font-size: 3rem; font-weight: 300; margin-bottom: var(--spacing-md); } .contact-subtitle { font-size: 1.25rem; color: var(--text-secondary); } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-3xl); max-width: 1200px; margin: 0 auto; } /* Contact Form */ .contact-form-section { background-color: var(--secondary-dark); border-radius: var(--radius-lg); padding: var(--spacing-2xl); } .form-header { margin-bottom: var(--spacing-xl); } .form-title { font-size: 1.5rem; font-weight: 600; margin-bottom: var(--spacing-sm); } .form-description { color: var(--text-secondary); } .contact-form { display: grid; gap: var(--spacing-lg); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); } .inquiry-type { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); } .inquiry-option { position: relative; } .inquiry-option input[type="radio"] { position: absolute; opacity: 0; } .inquiry-label { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md); background-color: var(--tertiary-dark); border: 2px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); text-align: center; } .inquiry-option input:checked + .inquiry-label { border-color: var(--primary-gold); background-color: rgba(212, 175, 55, 0.1); } .inquiry-label:hover { border-color: var(--text-muted); } .inquiry-icon { font-size: 1.5rem; color: var(--primary-gold); } .inquiry-text { font-size: 0.875rem; font-weight: 500; } /* Contact Info */ .contact-info-section { display: grid; gap: var(--spacing-2xl); } .info-card { background-color: var(--secondary-dark); border-radius: var(--radius-lg); padding: var(--spacing-xl); } .info-header { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); } .info-icon { width: 48px; height: 48px; background-color: rgba(212, 175, 55, 0.1); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; } .info-icon i { font-size: 1.25rem; color: var(--primary-gold); } .info-title { font-size: 1.25rem; font-weight: 600; } .info-content { color: var(--text-secondary); line-height: 1.6; } .info-content a { color: var(--primary-gold); text-decoration: none; } .info-content a:hover { text-decoration: underline; } .contact-methods { display: grid; gap: var(--spacing-md); margin-top: var(--spacing-lg); } .contact-method { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background-color: var(--tertiary-dark); border-radius: var(--radius-md); } .method-icon { width: 40px; height: 40px; background-color: var(--primary-dark); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .method-icon i { color: var(--primary-gold); } .method-details h4 { font-weight: 600; margin-bottom: 0.125rem; } .method-details p { font-size: 0.875rem; color: var(--text-secondary); } /* Office Locations */ .locations-grid { display: grid; gap: var(--spacing-lg); } .location-card { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-md); padding: var(--spacing-lg); background-color: var(--tertiary-dark); border-radius: var(--radius-md); } .location-icon { width: 40px; height: 40px; background-color: rgba(212, 175, 55, 0.1); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; } .location-icon i { color: var(--primary-gold); } .location-details h4 { font-weight: 600; margin-bottom: var(--spacing-xs); } .location-address { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; } /* FAQ Section */ .faq-section { margin-top: var(--spacing-3xl); padding: var(--spacing-3xl) 0; background-color: var(--secondary-dark); } .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-2xl); max-width: 1200px; margin: 0 auto; } .faq-card { background-color: var(--tertiary-dark); border-radius: var(--radius-lg); padding: var(--spacing-xl); } .faq-question { font-size: 1.125rem; font-weight: 600; margin-bottom: var(--spacing-md); display: flex; align-items: start; gap: var(--spacing-sm); } .faq-question i { color: var(--primary-gold); margin-top: 0.125rem; } .faq-answer { color: var(--text-secondary); line-height: 1.6; padding-left: calc(1rem + var(--spacing-sm)); } /* Success Message */ .success-message { display: none; background-color: var(--success); color: white; padding: var(--spacing-lg); border-radius: var(--radius-md); text-align: center; margin-bottom: var(--spacing-xl); } .success-message.show { display: block; animation: fadeIn 0.3s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1024px) { .contact-content { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .inquiry-type { grid-template-columns: 1fr; } } @media (max-width: 640px) { .contact-title { font-size: 2rem; } .faq-grid { grid-template-columns: 1fr; } }