/* ======================================== */
/* contacts.css - Extracted from blade      */
/* ======================================== */

.contacts-hero { background: linear-gradient(135deg, #024A57 0%, #04A5B5 100%); padding: 56px 0 48px; text-align: center; position: relative; overflow: hidden; }
.contacts-hero::before { content:''; position: absolute; top:-60px; right:-40px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.04); }
.contacts-hero h1 { font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 8px; position: relative; z-index:1; }
.contacts-hero p { font-size: .95rem; color: rgba(255,255,255,.65); position: relative; z-index:1; }

.contacts-wrap { padding: 48px 0 72px; }
.contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 40px; }

.contact-info { display: flex; flex-direction: column; gap: 18px; }
.ci-card { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 24px 28px; display: flex; align-items: flex-start; gap: 16px; transition: all .2s; }
.ci-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.06); transform: translateY(-1px); }
.ci-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ci-icon.teal { background: rgba(4,165,181,.1); color: #04A5B5; }
.ci-icon.green { background: rgba(16,185,129,.1); color: #10B981; }
.ci-icon.purple { background: rgba(139,92,246,.1); color: #8B5CF6; }
.ci-icon.red { background: rgba(239,68,68,.1); color: #EF4444; }
.ci-text h3 { font-size: .92rem; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.ci-text p { font-size: .84rem; color: #777; line-height: 1.6; }
.ci-text a { color: #04A5B5; text-decoration: none; font-weight: 600; }
.ci-text a:hover { text-decoration: underline; }

.contact-form-card { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 32px; }
.contact-form-card h2 { font-size: 1.15rem; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; }
.contact-form-card .sub { font-size: .84rem; color: #888; margin-bottom: 22px; }
.cf-field { margin-bottom: 14px; }
.cf-field label { display: block; font-size: .82rem; font-weight: 600; color: #555; margin-bottom: 5px; }
.cf-field input, .cf-field textarea { width: 100%; padding: 11px 14px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: .86rem; color: #1a1a1a; outline: none; transition: border .15s; font-family: 'Inter', sans-serif; }
.cf-field input:focus, .cf-field textarea:focus { border-color: #04A5B5; box-shadow: 0 0 0 3px rgba(4,165,181,.08); }
.cf-field textarea { resize: vertical; min-height: 100px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf-submit { width: 100%; padding: 13px; border: none; border-radius: 12px; background: linear-gradient(135deg,#024A57,#04A5B5); color: #fff; font-size: .92rem; font-weight: 700; cursor: pointer; transition: opacity .2s; margin-top: 6px; }
.cf-submit:hover { opacity: .92; }

.contacts-map { border-radius: 16px; overflow: hidden; border: 1px solid #eee; height: 380px; }
.contacts-map iframe { width: 100%; height: 100%; border: 0; }

.social-row { display: flex; gap: 12px; margin-top: 10px; }
.social-btn { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all .15s; border: 1px solid #e0e0e0; color: #666; }
.social-btn:hover { border-color: #04A5B5; color: #04A5B5; transform: translateY(-1px); }

@media (max-width: 768px) {
    .contacts-grid { grid-template-columns: 1fr; }
    .cf-row { grid-template-columns: 1fr; }
    .contacts-hero h1 { font-size: 1.5rem; }
    .contacts-wrap { padding: 28px 0 48px; }
}

@media (max-width: 480px) {
    .contacts-hero { padding: 36px 0 32px; }
    .contacts-hero h1 { font-size: 1.25rem; }
    .contact-form-card { padding: 20px 16px; }
    .ci-card { padding: 16px 18px; gap: 12px; }
    .contacts-map { height: 260px; }
}