.contact-hero { min-height: 46vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 140px 24px 72px; background: var(--black); position: relative; overflow: hidden; } .contact-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, transparent, var(--cyan), var(--blue), transparent ); } .contact-hero::after { content: ""; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 800px; background: radial-gradient( circle, rgba(0, 60, 140, 0.1) 0%, transparent 65% ); pointer-events: none; animation: hero-glow-pulse 6s ease-in-out infinite; } .contact-hero .scanlines { position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(255, 255, 255, 0.005) 3px, rgba(255, 255, 255, 0.005) 4px ); pointer-events: none; z-index: 1; } .hero-inner { position: relative; z-index: 2; max-width: 680px; } .hero-inner h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 18px; line-height: 1.15; } [lang="ar"] .hero-inner h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); } .hero-inner h1 span { background: var(--grad-cyan); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-inner p { color: var(--text-muted); font-size: 1rem; line-height: 1.8; margin-bottom: 28px; } .response-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-secondary); background: rgba(0, 195, 255, 0.06); border: 1px solid rgba(0, 195, 255, 0.16); border-radius: 40px; padding: 8px 18px; } .response-badge i { color: var(--cyan); font-size: 0.9rem; } .response-badge strong { color: var(--cyan); } @keyframes hero-glow-pulse { 0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }  .quick-strip { background: var(--deep); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 20px 24px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; position: relative; z-index: 3; } .quick-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: var(--t-base); } .quick-btn i { font-size: 1rem; } .quick-btn:hover { border-color: var(--border-cyan); color: var(--text-primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } .quick-btn.wb { color: #25d366; border-color: rgba(37, 211, 102, 0.22); } .quick-btn.wb:hover { background: rgba(37, 211, 102, 0.06); border-color: rgba(37, 211, 102, 0.45); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.08); } .quick-btn.ph { color: var(--cyan); border-color: rgba(0, 195, 255, 0.22); } .quick-btn.ph:hover { background: rgba(0, 195, 255, 0.06); border-color: var(--border-cyan); box-shadow: 0 8px 24px rgba(0, 195, 255, 0.08); } .quick-btn.em:hover { background: rgba(255, 255, 255, 0.04); color: #fff; } .quick-strip-label { font-size: 0.75rem; font-family: "Orbitron", sans-serif; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-right: 6px; }  .contact-section { background: var(--black); padding: 80px 24px 110px; position: relative; } .contact-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient( circle at 20% 40%, rgba(0, 60, 140, 0.05) 0%, transparent 50% ), radial-gradient( circle at 80% 70%, rgba(0, 120, 200, 0.04) 0%, transparent 50% ); pointer-events: none; } .contact-grid { max-width: 1200px; margin: auto; display: grid; grid-template-columns: 1fr 400px; gap: 50px; align-items: start; position: relative; z-index: 2; }  .form-wrap { background: rgba(13, 13, 24, 0.6); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 48px 44px; position: relative; overflow: hidden; backdrop-filter: blur(16px); } .form-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-cyan); } .form-header { margin-bottom: 36px; } .form-header h2 { font-size: 1.6rem; margin-bottom: 10px; margin-top: 14px; } .form-header p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; }  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .field-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .field-group.no-mb { margin-bottom: 0; } .field-group label { font-size: 0.76rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-secondary); } .field-group label span { color: var(--cyan); } .field-group input, .field-group select, .field-group textarea { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 16px; color: var(--text-primary); font-family: "Inter", sans-serif; font-size: 0.9rem; outline: none; transition: var(--t-base); -webkit-appearance: none; appearance: none; width: 100%; } .field-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2366788a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer; } .field-group select option { background: var(--black); color: var(--text-primary); } .field-group textarea { resize: vertical; min-height: 140px; line-height: 1.6; } .field-group input:focus, .field-group select:focus, .field-group textarea:focus { border-color: var(--border-cyan); background: rgba(0, 195, 255, 0.03); box-shadow: 0 0 0 3px rgba(0, 195, 255, 0.07); } .field-group input::placeholder, .field-group textarea::placeholder { color: var(--text-dim); } .field-group input.error, .field-group textarea.error { border-color: rgba(255, 80, 80, 0.5); box-shadow: 0 0 0 3px rgba(255, 80, 80, 0.06); } .error-msg { font-size: 0.75rem; color: rgba(255, 100, 100, 0.9); display: flex; align-items: center; gap: 5px; margin-top: 4px; }  .submit-btn { width: 100%; padding: 15px 28px; border-radius: var(--radius-sm); border: none; background: #fff; color: #000; font-family: "Orbitron", sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: var(--t-bounce); margin-top: 8px; position: relative; overflow: hidden; } .submit-btn::before { content: ""; position: absolute; inset: 0; background: var(--grad-cyan); opacity: 0; transition: opacity 0.25s var(--ease); } .submit-btn:hover::before { opacity: 1; } .submit-btn:hover { color: #000; transform: translateY(-3px); box-shadow: 0 12px 36px rgba(255, 255, 255, 0.2), 0 0 40px rgba(0, 195, 255, 0.15); } .submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .submit-btn span { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; } @keyframes spin { to { transform: rotate(360deg); } } .spin { animation: spin 0.8s linear infinite; display: inline-block; }  #success-state { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; animation: success-in 0.5s var(--ease-bounce) forwards; } .success-icon { width: 80px; height: 80px; border-radius: 50%; background: rgba(0, 255, 136, 0.08); border: 2px solid rgba(0, 255, 136, 0.35); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: var(--green); margin-bottom: 24px; box-shadow: 0 0 30px rgba(0, 255, 136, 0.15); } #success-state h3 { font-size: 1.5rem; color: var(--text-primary); margin-bottom: 10px; } #success-state p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; max-width: 400px; margin-bottom: 28px; } .success-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } @keyframes success-in { from { opacity: 0; transform: scale(0.9) translateY(16px); } to { opacity: 1; transform: scale(1) translateY(0); } }  .info-wrap { display: flex; flex-direction: column; gap: 16px; } .info-header { margin-bottom: 6px; } .info-header h3 { font-size: 1.1rem; color: var(--text-primary); margin-bottom: 6px; margin-top: 12px; } .info-header p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.7; }  .cinfo-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; display: flex; align-items: center; gap: 16px; text-decoration: none; transition: var(--t-base); position: relative; overflow: hidden; } .cinfo-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border); transition: var(--t-base); } .cinfo-card:hover::before { background: var(--grad-cyan); } .cinfo-card:hover { border-color: var(--border-cyan); transform: translateX(4px); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); } .cinfo-card.wb:hover::before { background: linear-gradient(to bottom, #25d366, #128c5e); } .cinfo-card.wb:hover { border-color: rgba(37, 211, 102, 0.25); } .cinfo-card.wb .cinfo-icon { color: #25d366; background: rgba(37, 211, 102, 0.08); border-color: rgba(37, 211, 102, 0.2); } .cinfo-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(0, 195, 255, 0.07); border: 1px solid var(--border-cyan); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--cyan); flex-shrink: 0; transition: var(--t-base); } .cinfo-card:hover .cinfo-icon { background: rgba(0, 195, 255, 0.13); box-shadow: 0 0 16px rgba(0, 195, 255, 0.15); } .cinfo-text { display: flex; flex-direction: column; gap: 2px; } .cinfo-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); } .cinfo-val { font-size: 0.9rem; color: var(--text-primary); font-weight: 500; }  .hours-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 22px; } .hours-card h4 { font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .hours-card h4 i { color: var(--cyan); } .hours-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.84rem; } .hours-row:last-child { border-bottom: none; padding-bottom: 0; } .hours-day { color: var(--text-secondary); } .hours-time { color: var(--text-primary); font-weight: 500; } .hours-time.closed { color: var(--text-dim); }  .status-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 0.75rem; font-weight: 600; color: var(--green); background: rgba(0, 255, 136, 0.07); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 20px; padding: 5px 12px; margin-bottom: 4px; } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: status-pulse 2s ease-in-out infinite; } @keyframes status-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } }  .social-row { display: flex; gap: 10px; } .social-link { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--text-muted); text-decoration: none; transition: var(--t-base); } .social-link:hover { border-color: var(--border-cyan); color: var(--cyan); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); }  .start-cta { background: linear-gradient( 135deg, rgba(0, 195, 255, 0.06) 0%, rgba(0, 80, 200, 0.07) 100% ); border: 1px solid rgba(0, 195, 255, 0.18); border-radius: var(--radius-md); padding: 24px 22px; text-align: center; } .start-cta p { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 14px; line-height: 1.6; } .start-cta .btn { width: 100%; justify-content: center; font-size: 0.72rem; }  @media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; gap: 36px; } .info-wrap { order: -1; } .form-wrap { padding: 36px 28px; } } @media (max-width: 600px) { .field-row { grid-template-columns: 1fr; gap: 0; } .form-wrap { padding: 28px 20px; } .quick-strip { gap: 10px; } .quick-btn { padding: 10px 16px; font-size: 0.8rem; } .quick-strip-label { display: none; } .hero-inner h1 { font-size: 2rem; } }