Contact information

/* Variables - These will now try to match your theme if they exist, otherwise they use these clean fallbacks */ .custom-contact-wrapper { --accent-color: #d94848; --whatsapp-green: #25D366; margin: 2rem 0; font-family: inherit; /* Uses your site's font */ } .contact-card { max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; background: transparent; /* Lets your site background show through */ border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; overflow: hidden; } .contact-info { flex: 1; min-width: 300px; padding: 5%; color: inherit; /* Uses your site's text color */ } .contact-map { flex: 1; min-width: 300px; min-height: 400px; filter: grayscale(0.2); /* Makes map look a bit more high-end */ } .contact-info h2 { margin-top: 0; color: var(--accent-color); font-family: inherit; } .section-label { font-size: 0.75rem; text-transform: uppercase; opacity: 0.6; font-weight: 700; margin-top: 1.5rem; display: block; letter-spacing: 1px; } .detail { margin: 0.25rem 0 1rem 0; font-size: 1.1rem; } .btn-group { display: flex; gap: 10px; margin: 1rem 0; } .btn-action { padding: 10px 20px; border-radius: 6px; text-decoration: none !important; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; transition: opacity 0.2s; } .btn-directions { background: var(--accent-color); color: white !important; } .btn-whatsapp { background: var(--whatsapp-green); color: white !important; } .btn-action:hover { opacity: 0.8; } .map-iframe { width: 100%; height: 100%; border: none; min-height: 400px; } @media (max-width: 768px) { .contact-card { flex-direction: column-reverse; } .contact-map { min-height: 300px; } }