/* ===================================================================
   CONTACT PAGE — contact.php
   =================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────── */
.contact-hero {
    position: relative;
    overflow: hidden;
}

.contact-hero-overlay {
    z-index: 1;
    pointer-events: none;
}

.hero-img-float-contact {
    max-width: 340px;
    box-shadow: 0 1rem 2rem rgba(100,32,39,0.12);
    border: 6px solid #fff;
    background: #fff;
}

/* ── Contact Section ──────────────────────────────────────────────── */
.contact-section-bg {
    background: var(--gradient-section-alt);
}

.animate-contact-card {
    opacity: 1;
    transform: none;
    border-radius: var(--card-radius);
}

@media (prefers-reduced-motion: no-preference) {
    .animate-contact-card {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }
}

/* ── Contact Icon ─────────────────────────────────────────────────── */
.contact-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #fff 60%, #ffe3e3 100%);
    color: var(--color-primary-hex);
    font-size: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(100,32,39,0.08);
}

/* ── Send Button ──────────────────────────────────────────────────── */
.contact-btn-animated {
    border-radius: var(--btn-radius);
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    box-shadow: 0 4px 24px rgba(255,193,7,0.18);
}

.contact-btn-animated:hover {
    background: #fff !important;
    color: var(--color-primary-hex) !important;
    transform: scale(1.07);
}