.contact-page { padding: 60px 20px; color:var( --text-color4); min-height: 80vh; }
.contact-page h1 { text-align: center; margin-bottom: 40px; font-size: 32px; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }

.contact-form-box, .contact-info-box { 
    background: rgba(255,255,255,0.05); 
    padding: 30px; 
    border-radius: 16px; 
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
}
.contact-form-box h2, .contact-info-box h2 { margin-bottom: 20px; color: #38bdf8; }

.contact-form-box input, .contact-form-box textarea { 
    width: 100%; padding: 14px; margin-bottom: 15px; border-radius: 10px; 
    border: 1px solid #334155; background: #1e293b; color: white; font-size: 16px;
}
.btn-send { background: linear-gradient(90deg, #0ea5e9, #38bdf8); color: white; padding: 14px 25px; border: none; border-radius: 10px; cursor: pointer; width: 100%; font-weight: bold; transition: 0.3s; }
.btn-send:hover { transform: scale(1.03); }

.contact-info-box .info-item { margin: 18px 0; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.contact-info-box .info-item a { color: #38bdf8; text-decoration: none; }

.qr-code-desktop { text-align: center; margin-top: 25px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 12px; }
.qr-code-desktop #qrcode { display: flex; justify-content: center; padding: 10px; background: white; border-radius: 8px; }

/* ====== ده اهم جزء ====== */
/* في الكمبيوتر: اخفي الكتابة واظهر QR */
.contact-text-mobile { display: none; }

/* في الموبايل: اخفي QR واظهر الكتابة */
@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr; } /* عمود واحد */
    .qr-code-desktop { display: none; } /* اخفي الQR */
    .contact-text-mobile { display: block; } /* اظهر الكتابة */
}