/* إعدادات عامة */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    background-color: #050505 !important; 
    color: white; 
    margin: 0; 
    padding: 0; 
}

/* Header */
.contact-header { text-align: center; padding: 60px 20px; }
.contact-header h1 { font-size: 3rem; margin-bottom: 10px; }

/* Container */
.contact-wrapper { max-width: 1100px; margin: 0 auto; padding: 20px; }
.contact-container { 
    display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; 
    background: #0a0a0a; padding: 50px; border-radius: 15px; border: 1px solid #1a1a1a; 
}

/* Info Section */
.contact-info h2 { color: #8b0000; margin-bottom: 20px; }
.contact-info p { color: #888; margin-bottom: 30px; line-height: 1.6; }
.info-box { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; }
.info-box i { font-size: 20px; color: #8b0000; width: 40px; }

/* Social Links */
.social-links { display: flex; gap: 15px; margin-top: 30px; }
.social-links a { 
    width: 45px; height: 45px; background: #111; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    color: white; transition: 0.3s; border: 1px solid #222; 
}
.social-links a:hover { background: #8b0000; transform: translateY(-5px); }

/* Form */
.contact-form input, .contact-form textarea {
    width: 100%; padding: 15px; margin-bottom: 20px;
    background: #111; border: 1px solid #222; color: #fff; 
    border-radius: 8px; transition: 0.3s;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: #8b0000; outline: none; background: #151515; }
.contact-form button {
    width: 100%; padding: 18px; background: #8b0000; border: none; 
    color: #fff; font-weight: 800; cursor: pointer; border-radius: 8px; transition: 0.3s;
}
.contact-form button:hover { background: #a00000; letter-spacing: 1px; }

/* Map */
.contact-map { padding: 50px 20px; max-width: 1100px; margin: 0 auto; text-align: center; }
.map-placeholder { height: 400px; background: #111; border-radius: 15px; display: flex; align-items: center; justify-content: center; border: 1px solid #222; }

/* Footer */
.footer { background: #0a0a0a; padding: 60px; border-top: 1px solid #222; margin-top: 50px; }
.footer-container { display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; }
.footer-col h3 { color: #8b0000; margin-bottom: 15px; }
.socials { display: flex; gap: 15px; }
.socials a { width: 40px; height: 40px; background: #111; border: 1px solid #222; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #bdbdbd; transition: 0.3s; }
.socials a:hover { background: #8b0000; color: white; }
.copyright { text-align: center; padding-top: 20px; border-top: 1px solid #1a1a1a; margin-top: 20px; color: #666; font-size: 13px; }

/* Responsive */
@media (max-width: 768px) {
    .navbar { flex-direction: column; gap: 20px; }
    .contact-container { grid-template-columns: 1fr; padding: 30px; }
    .footer-container { flex-direction: column; gap: 30px; }
}