/* ══════ Self-Hosted Fonts (removes Google Fonts dependency) ══════ */ @font-face{font-family:'Vazirmatn';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/vazirmatn-400.ttf') format('truetype')} @font-face{font-family:'Vazirmatn';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/vazirmatn-700.ttf') format('truetype')} @font-face{font-family:'Vazirmatn';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/vazirmatn-800.ttf') format('truetype')} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400.ttf') format('truetype')} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-700.ttf') format('truetype')} .faq-capsule-title{font-size:1.05rem;font-weight:800;color:#0A1628;margin-bottom:12px;text-align:center}/* All CSS variables now defined in za-theme.css (single source of truth) */ * { margin: 0; padding: 0; box-sizing: border-box; } /* LTR English text wrapping — prevent overflow on mobile */ html[dir="ltr"], html[dir="ltr"] body { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; -webkit-hyphens: auto; hyphens: auto; } /* ── Mobile LTR: comprehensive overflow prevention ── */ @media (max-width: 768px) { [dir="ltr"] .hero h1, [dir="ltr"] .hero-tagline-full, [dir="ltr"] .hero p, [dir="ltr"] .section-header h2, [dir="ltr"] .section-header h3, [dir="ltr"] .section-header p, [dir="ltr"] .service-card h3, [dir="ltr"] .service-card p, [dir="ltr"] .project-detail-header h2, [dir="ltr"] .project-summary-box p, [dir="ltr"] .project-section h3, [dir="ltr"] .project-section p, [dir="ltr"] .project-section li, [dir="ltr"] .article-card-body h3, [dir="ltr"] .article-card-body p, [dir="ltr"] .article-meta, [dir="ltr"] .about-text-col p, [dir="ltr"] .about-text-col span, [dir="ltr"] .highlight-item, [dir="ltr"] .highlight-item span, [dir="ltr"] .contact-method-text strong, [dir="ltr"] .contact-method-text span, [dir="ltr"] .form-group label, [dir="ltr"] .form-group input, [dir="ltr"] .form-group textarea, [dir="ltr"] .form-group select, [dir="ltr"] .cert-card, [dir="ltr"] .cert-card h3, [dir="ltr"] .cert-card p, [dir="ltr"] .nav-links a, [dir="ltr"] .about-name-subtitle, [dir="ltr"] .testimonial-card p, [dir="ltr"] .faq-item summary, [dir="ltr"] .faq-answer p, [dir="ltr"] .aefaq-question, [dir="ltr"] .aefaq-answer, [dir="ltr"] .aefaq-answer p, [dir="ltr"] footer *, [dir="ltr"] .blog-header h1, [dir="ltr"] .blog-header p, [dir="ltr"] .pf-hero h1, [dir="ltr"] .pf-hero p, [dir="ltr"] .more-bd h3, [dir="ltr"] .more-bd p, [dir="ltr"] .footer-brand p, [dir="ltr"] .footer-pill, [dir="ltr"] .about-ig-box, [dir="ltr"] .hero-bullet-card, [dir="ltr"] .faq-capsule-title, [dir="ltr"] .qc-subtitle, [dir="ltr"] .quick-contact-card strong, [dir="ltr"] .quick-contact-card p { word-break: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; max-width: 100% !important; overflow-x: hidden !important; } /* Preserve nowrap where needed for layout integrity */ [dir="ltr"] .lang-btn, [dir="ltr"] .about-name-heading span:first-child, [dir="ltr"] .floating-contact-label { white-space: nowrap !important; overflow-x: visible !important; max-width: none !important; } } html { overflow-x: hidden; } body { font-family: 'Vazirmatn', 'IRANSans', Tahoma, Arial, system-ui, -apple-system, sans-serif; color: var(--text); background: linear-gradient(180deg, #40E0D0 0%, #5EEAD4 30%, #40E0D0 60%, #2DD4BF 100%); line-height: 1.8; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ⚠️ v4.0 NAVBAR FIX: navbar CSS moved to navbar.php (self-contained) — old styles removed */ .hero { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(135deg, #C8CDD0 0%, #D4D8DB 30%, #BCC2C5 60%, #C8CDD0 100%); position: relative; overflow: clip; padding: 70px 24px 19px; text-align: center; direction: rtl; box-sizing: border-box; } @media (max-height: 750px) { .hero { padding: 74px 24px 0; } .hero-top { margin-bottom: 12px; gap: 10px; } .hero-row { gap: 16px; } .hero h1 { font-size: clamp(1.4rem, 3.3vw, 2rem); margin-bottom: 8px; } .hero p, .hero-bullet-card { margin-bottom: 8px; } .hero-stats { margin-top: 0; gap: 10px; } .hero-stats .stat-number { font-size: 1.3rem; } .hero-logo-inline { height: clamp(42px, 5.5vw, 70px); } .hero-tagline-full { font-size: clamp(1.1rem, 2.8vw, 1.9rem); } } .hero::before { content: ''; position: absolute; top: -50%; right: -20%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 70%); border-radius: 50%; z-index: 0; } .hero::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(230, 194, 0, 0.08), transparent 70%); border-radius: 50%; z-index: 0; } .hero-bg { position: absolute; inset: 0; z-index: 0; background: url('/assets/images/bg/hero-desktop.webp') center/cover no-repeat; opacity: 0.65; } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(10,22,40,0.35); pointer-events: none; } [data-theme="dark"] .hero-overlay { background: rgba(5,12,24,0.65); } .hero-tagline-full { font-size: clamp(1.1rem, 2.5vw, 1.7rem); font-weight: 800; color: var(--navy); text-align: center; margin-bottom: 0; line-height: 1.4; animation: fadeInUp 0.8s ease-out both; position: relative; z-index: 1; } .hero-tagline-teal { color: #5EEAD4 !important; text-shadow: 0 0 16px rgba(94,234,212,0.7), 0 0 36px rgba(94,234,212,0.3) !important; } .hero-tagline-navy { color: #FFFFFF !important; text-shadow: 0 0 14px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.25) !important; } .hero-row { display: flex; align-items: flex-start; gap: 16px; max-width: 1100px; width: 100%; margin: 0 auto; padding: 0 24px; box-sizing: border-box; position: relative; z-index: 1; } .hero-main { flex: 1 1 0; min-width: 0; text-align: center; } .hero-content > .hero-quick-contact { grid-column: 2; grid-row: 1 / 6; width: 300px; margin: 0; animation: fadeInUp 0.8s ease-out 0.5s both; } .quick-contact-card { background: rgba(255,255,255,0.72); backdrop-filter: blur(var(--za-glass-blur-lg)); -webkit-backdrop-filter: blur(var(--za-glass-blur-lg)); border-radius: var(--za-glass-radius); padding: 20px 20px 18px; box-shadow: 0 8px 32px rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.6); direction: rtl; text-align: right; transition: all 0.3s ease; } .quick-contact-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.12); transform: translateY(-2px); } .quick-contact-card strong, .quick-contact-card .qc-header-text strong { font-size: 1rem; font-weight: 800; color: var(--navy); margin-bottom: 4px; text-align: right; display: block; } .quick-contact-card .qc-subtitle { font-size: 0.78rem; color: #1E293B; margin-bottom: 14px; text-align: right; font-weight: 700; } .quick-contact-card .qc-status { display: none; padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; font-weight: 600; font-size: 0.78rem; text-align: center; } .quick-contact-card .qc-status.success { display: block; background: rgba(46,213,115,0.12); color: #1a7a3a; border: 1px solid rgba(46,213,115,0.3); } .quick-contact-card .qc-status.error { display: block; background: rgba(255,71,87,0.1); color: #c0392b; border: 1px solid rgba(255,71,87,0.25); } .quick-contact-card .qc-status.loading { display: block; background: rgba(13,115,119,0.08); color: var(--teal); border: 1px solid rgba(13,115,119,0.2); } .quick-contact-card .qc-input { width: 100%; padding: 9px 12px; border: 2px solid var(--light-gray); border-radius: 10px; font-family: inherit; font-size: 0.85rem; transition: var(--transition); background: var(--off-white); color: var(--za-text); font-weight: 500; margin-bottom: 8px; } .quick-contact-card .qc-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,115,119,0.08); } .quick-contact-card .qc-select { width: 100%; padding: 9px 12px; border: 2px solid var(--light-gray); border-radius: 10px; font-family: inherit; font-size: 0.85rem; transition: var(--transition); background: var(--off-white); color: var(--za-text); font-weight: 500; margin-bottom: 8px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%230D7377' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; } .quick-contact-card .qc-select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,115,119,0.08); } .quick-contact-card .qc-btn { width: 100%; padding: 12px; background: linear-gradient(135deg,var(--navy),#0D1F3C); color: var(--white); border: none; border-radius: 12px; font-weight: 800; font-size: 0.98rem; cursor: pointer; transition:all .3s cubic-bezier(.4,0,.2,1); font-family:inherit; margin-top:4px; box-shadow:0 4px 20px rgba(10,22,40,.3); letter-spacing:.3px; } .quick-contact-card .qc-btn:hover { background:var(--navy-light); transform:translateY(-2px); box-shadow:0 8px 28px rgba(10,22,40,.35),0 0 0 4px rgba(230,194,0,.12); } .quick-contact-card .qc-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .hero-content { display: grid; grid-template-columns: 1fr 300px; gap: 10px 16px; text-align: center; position: relative; z-index: 1; } .hero-content > h1 { grid-column: 1; grid-row: 1; } .hero-content > .hero-stats { grid-column: 1; grid-row: 2; } .hero-content > .hero-bullets { grid-column: 1; grid-row: 3; } .hero-content > .hero-trust-badge { grid-column: 1; grid-row: 4; } .hero-content > .hero-buttons { grid-column: 1; grid-row: 5; margin: 0 auto 0; max-width: 920px; width: 100%; } .hero-top { display: flex; align-items: center; justify-content: center; gap: 1.5cm; margin: 0 auto 12px; flex-wrap: wrap; position: relative; z-index: 1; width: 100%; max-width: 1100px; } .hero-logo-inline { height: clamp(48px, 5vw, 100px); width: auto; vertical-align: middle; flex-shrink: 0; } /* Desktop — shift logo + tagline 5cm to the left */ @media (min-width: 769px) { .hero-top { transform: translateX(7cm); } .hero-content > .hero-quick-contact { position: relative; top: -3cm; left: -2cm; } } .hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; color: var(--navy); line-height: 1.25; margin-bottom: 0; animation: fadeInUp 0.8s ease-out 0.2s both; position: relative; z-index: 1; text-shadow: 0 0 6px rgba(94,234,212,0.25), 0 0 16px rgba(94,234,212,0.15); } .hero-tagline { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 700; color: var(--navy); text-align: center; margin-bottom: 24px; line-height: 1.6; animation: fadeInUp 0.8s ease-out both; background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero p { font-size: 0.92rem; color: #0A1628; margin-bottom: 8px; line-height: 1.6; animation: fadeInUp 0.8s ease-out 0.4s both; position: relative; z-index: 1; font-weight: 600; } /* Glass bullet cards */ .hero-bullets { display: flex; flex-direction: column; gap: 8px; margin: 0 auto 0; max-width: 920px; animation: fadeInUp 0.8s ease-out 0.4s both; position: relative; z-index: 1; direction: rtl; } .hero-bullet-card { display: flex; align-items: center; gap: 8px; padding: 9px 14px; width: 100%; box-sizing: border-box; min-width: 0; overflow: hidden; background: rgba(255,255,255,0.48); backdrop-filter: blur(var(--za-glass-blur-md)); -webkit-backdrop-filter: blur(var(--za-glass-blur-md)); border: 1px solid rgba(255,255,255,0.35); border-radius: var(--za-glass-radius); font-size: 17px; font-weight: 700; color: #0A1628; line-height: 1.55; cursor: default; transition: all 0.3s ease; text-align: right; } .hero-bullet-card:hover { background: rgba(255,255,255,0.58); transform: translateX(-4px); border-color: rgba(0,212,170,0.4); box-shadow: 0 4px 20px rgba(0,212,170,0.12); } .hero-bullet-dot { font-size: 1.25rem; color: #00D4AA; flex-shrink: 0; line-height: 1; } .hero-bullet-card > span:last-child { white-space: nowrap; flex: 1; min-width: 0; } [dir="ltr"] .hero-bullets { direction: ltr; } [dir="ltr"] .hero-bullet-card { text-align: left; font-size: 17px; } [dir="ltr"] .hero-bullet-card:hover { transform: translateX(4px); } /* ── LTR navbar: reduce font sizes so lang-switcher capsule fits ── */ /* ⚠️ v4.0 NAVBAR FIX: navbar CSS moved to navbar.php (self-contained) — old styles removed */ .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; animation: fadeInUp 0.8s ease-out 0.6s both; position: relative; z-index: 1; } .hero-buttons .btn { color:#000; font-weight:800; padding: 6px 14px; font-size: 0.76rem; border-radius: 50px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; overflow: hidden; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); animation: btnFloat 3s ease-in-out infinite; border: 1px solid; } .hero-buttons .btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); transition: left 0.6s ease; } .hero-buttons .btn:hover::after { left: 100%; } .hero-buttons .btn:hover { animation-play-state: paused; transform: translateY(-4px) scale(1.04); } .hero-buttons .btn:nth-child(1) { animation-delay: 0s; } .hero-buttons .btn:nth-child(2) { animation-delay: 0.4s; } .hero-buttons .btn:nth-child(3) { animation-delay: 0.8s; } .hero-buttons .btn:nth-child(4) { animation-delay: 1.2s; } .btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 22px; border-radius: 50px; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: var(--transition); cursor: pointer; border: none; font-family: inherit; } .btn-primary { background:var(--teal); color:#fff; border-color:var(--teal); box-shadow:0 4px 16px rgba(13,115,119,.25); } .btn-primary:hover { background:var(--teal-light); box-shadow:0 6px 28px rgba(13,115,119,.35),0 0 0 4px rgba(13,115,119,.08); transform:translateY(-2px); } .btn-outline { background:transparent; color:#475569; border:1.5px solid rgba(100,116,139,.25); } .btn-outline:hover { background:rgba(10,22,40,.06); border-color:rgba(10,22,40,.35); color:#0A1628; } .btn-bot { background: rgba(124,58,237,0.12); color: #7C3AED; border-color: rgba(124,58,237,0.35); } .btn-bot:hover { background: rgba(124,58,237,0.22); box-shadow: 0 0 24px rgba(124,58,237,0.35), 0 0 8px rgba(124,58,237,0.2); } .btn-ig { background: linear-gradient(135deg, rgba(249,206,52,0.18), rgba(238,42,123,0.18), rgba(98,40,215,0.14)); color: #C13584; border-color: rgba(238,42,123,0.4); } .btn-ig:hover { background: linear-gradient(135deg, rgba(249,206,52,0.28), rgba(238,42,123,0.28), rgba(98,40,215,0.22)); box-shadow: 0 0 24px rgba(238,42,123,0.4), 0 0 8px rgba(249,206,52,0.25); } .hero-buttons .btn.btn-ig { animation: btnFloat 3s ease-in-out infinite, igPulse 2s ease-in-out infinite; animation-delay: 1.2s, 0s; } .hero-stats { display: flex; gap: 30px; justify-content: center; margin: 0 auto; animation: fadeInUp 0.8s ease-out 0.3s both; position: relative; z-index: 1; } .stat-item { text-align: center; min-width: 80px; } .stat-number { font-size: calc(1.6rem + 3px); font-weight: 800; color: var(--teal); line-height: 1; } .stat-label { color: #334155; font-size: calc(0.75rem + 3px); margin-top: 2px; font-weight: 600; } .section { padding: 64px 4px; position: relative; overflow: hidden; content-visibility: auto; contain-intrinsic-size: 500px; } .section:not(#certifications) { background: linear-gradient(180deg, #40E0D0 0%, #5EEAD4 30%, #40E0D0 60%, #2DD4BF 100%); } #certifications { background: linear-gradient(180deg, #2D5A6E 0%, #48889D 25%, #306A7E 50%, #1E4A5C 100%); color: var(--white); position: relative; overflow: hidden; border-bottom: 1px solid rgba(94,234,212,0.15); box-shadow: 0 1px 0 rgba(94,234,212,0.06), 0 6px 32px rgba(0,0,0,0.35); animation: certsGlowPulse 3s ease-in-out infinite; } @keyframes certsGlowPulse { 0%, 100% { border-bottom-color: rgba(94,234,212,0.08); box-shadow: 0 1px 0 rgba(94,234,212,0.03), 0 6px 32px rgba(0,0,0,0.35); } 50% { border-bottom-color: rgba(94,234,212,0.4); box-shadow: 0 1px 0 rgba(94,234,212,0.22), 0 6px 32px rgba(0,0,0,0.35); } } #certifications .container { position: relative; z-index: 3; } #certifications .section-header h2 { color: #FFFFFF; text-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 4px 24px rgba(0,0,0,0.25); font-size: clamp(1.7rem, 3.8vw, 2.4rem); font-weight: 800; letter-spacing: -0.1px; line-height: 1.3; } #certifications .section-header p { color: #FFF3CD; font-size: 1.15rem; font-weight: 800; text-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 24px rgba(255,215,0,0.15); } #certifications .section-tag { background: rgba(255,255,255,0.12); color: #FFFFFF; font-weight: 700; letter-spacing: 0.3px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.22); } /* Video — full-bleed background */ .certs-bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; background: #0A1628; } /* Tile-block overlay — REAL div (z-index 1), no cascade issues */ .certs-tile-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; background-color: transparent; background-image: linear-gradient(to right, rgba(94,234,212,0.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(94,234,212,0.15) 1px, transparent 1px); background-size: calc(100% / 3) calc(100% / 2); background-position: 0 0; } .section-dark { background: var(--navy); color: var(--white); position: relative; overflow: hidden; } .section-gray { background: linear-gradient(180deg, #2DD4BF 0%, #40E0D0 50%, #5EEAD4 100%); position: relative; overflow: hidden; } /* ===== SECTION BACKGROUNDS ===== */ /* Product image layer (shared) */ .section::before, .section-dark::before, .section-gray::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0.06; pointer-events: none; background-size: cover; background-position: center; background-repeat: no-repeat; } #contact::before { background-image: url('/assets/images/bg/panel-bg.webp?v=2'); opacity: 0.18; } #testimonials::before { background-image: url('/assets/images/bg/testimonials-bg.webp?v=2'); opacity: 0.3; } /* (faq backgrounds now on #about-faq) */ /* Color overlays (per section) */ .section::after, .section-dark::after, .section-gray::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* --- فیروزه‌ای روشن --- */ #about-faq { padding: 24px 4px; } /* (about overlay moved to about-faq section) */ /* --- (certifications overlay disabled) --- */ /* --- فیروزه‌ای-خاکستری --- */ /* --- NAVY تیره (پروژه‌ها) --- */ #projects::after { background: linear-gradient(180deg, rgba(5,12,25,0.42), rgba(8,18,38,0.39), rgba(5,12,25,0.42)); } /* --- فیروزه‌ای روشن --- */ #testimonials::after { background: linear-gradient(180deg, rgba(13,115,119,0.28), rgba(20,163,168,0.23), rgba(13,115,119,0.28)); } #about-faq::after { background: linear-gradient(180deg, rgba(13,115,119,0.22), rgba(20,163,168,0.18), rgba(13,115,119,0.22)); } /* --- فیروزه‌ای-خاکستری متوسط --- */ /* (faq overlay now on #about-faq) */ /* --- فیروزه‌ای-خاکستری--- */ /* --- فیروزه‌ای روشن --- */ #contact::after { background: linear-gradient(180deg, rgba(64,224,208,0.28), rgba(94,234,212,0.26), rgba(64,224,208,0.28)); } @media (max-width: 380px) { /* ⚠️ v4.0 NAVBAR FIX: navbar CSS moved to navbar.php (self-contained) — old styles removed */ .contact-form h3 { font-size: 1.15rem; } .btn-submit { font-size: 1rem; padding: 12px; } .contact-method-icon { width: 36px; height: 36px; border-radius: 12px; font-size: 1.2rem; } .contact-method { padding: 8px 12px; gap: 12px; }} .container { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; } .section-header { text-align: center; margin-bottom: 36px; direction: rtl; } .section-tag { display: inline-block; background: rgba(13, 115, 119, 0.12); color: #0D7377; padding: 6px 20px; border-radius: 50px; font-weight: 700; font-size: 0.82rem; margin-bottom: 14px; letter-spacing: 0.5px; border: 1px solid rgba(13,115,119,0.15); } .section-dark .section-tag { background: rgba(64, 224, 208, 0.18); color: #5EEAD4; border: 1px solid rgba(94,234,212,0.25); } .section-header h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; margin-bottom: 10px; color: #0A1628; letter-spacing: -0.2px; line-height: 1.35; } .section-dark .section-header h2 { color: #FFFFFF; text-shadow: 0 2px 12px rgba(0,0,0,0.25); } .section-header h3 { font-size: clamp(1rem, 2.5vw, 1.2rem); font-weight: 800; margin-bottom: 6px; color: #0A1628; } /* ── About bullet list ── */ [dir="ltr"] .about-bullets { direction: ltr; } [dir="ltr"] .about-bullets li { padding-right: 0; padding-left: 22px; } [dir="ltr"] .about-bullets li::before { right: auto; left: 0; } .about-bullets { list-style: none; padding: 0; margin: 0 0 6px 0; direction: rtl; } .about-bullets li { font-size: clamp(0.88rem, 2vw, 1.05rem); font-weight: 800; color: #0A1628; line-height: 1.45; position: relative; padding-right: 22px; } /* ── About name heading ── */ .about-name-heading { text-align: center; margin: 0 0 18px; direction: rtl; } .about-name-heading span { display: block !important; } .about-name-heading span:first-child { font-size: clamp(1.3rem, 2.8vw, 1.7rem); font-weight: 900; color: #0A1628; line-height: 1.3; letter-spacing: -0.02em; white-space: nowrap; } .about-name-subtitle { font-size: clamp(0.88rem, 1.8vw, 1.05rem) !important; font-weight: 700 !important; color: #0A1628 !important; margin-top: 3px; } [dir="ltr"] .about-name-heading { direction: ltr; } .about-bullets li::before { content: ''; position: absolute; right: 0; top: 10px; width: 8px; height: 8px; border-radius: 2px; background: var(--teal); transform: rotate(45deg); box-shadow: 0 0 6px rgba(13,115,119,0.4); } /* ── Footer glass pills ── */ .footer-pills { display: flex; flex-direction: column; gap: 7px; width: 100%; } .footer-pill { display: block; max-width: 340px; padding: 6px 16px; border-radius: 50px; font-size: 0.78rem; font-weight: 700; line-height: 1.6; backdrop-filter: blur(var(--za-glass-blur-sm)); -webkit-backdrop-filter: blur(var(--za-glass-blur-sm)); border: 1px solid rgba(255,255,255,0.15); transition: all 0.3s ease; text-shadow: 0 1px 2px rgba(0,0,0,0.4); letter-spacing: 0.2px; white-space: normal; text-align: right; } .footer-pill:hover { transform: translateX(-4px); border-color: rgba(255,255,255,0.35); } .pill-teal { background: rgba(13,115,119,0.25); color: #5EEAD4; border-color: rgba(94,234,212,0.25); } .pill-teal:hover { background: rgba(13,115,119,0.4); box-shadow: 0 0 20px rgba(94,234,212,0.2); } .pill-amber { background: rgba(230,194,0,0.18); color: #FFD93D; border-color: rgba(255,217,61,0.25); } .pill-amber:hover { background: rgba(230,194,0,0.3); box-shadow: 0 0 20px rgba(255,217,61,0.2); } .pill-steel { background: rgba(148,163,184,0.15); color: #CBD5E1; border-color: rgba(148,163,184,0.25); } .pill-steel:hover { background: rgba(148,163,184,0.28); box-shadow: 0 0 20px rgba(148,163,184,0.2); } .pill-blue { background: rgba(59,130,246,0.15); color: #93C5FD; border-color: rgba(147,197,253,0.25); } .pill-blue:hover { background: rgba(59,130,246,0.28); box-shadow: 0 0 20px rgba(147,197,253,0.2); } .section-dark .section-header p { color: rgba(255,255,255,0.92); font-weight: 600; letter-spacing: 0.2px; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; direction: rtl; } .about-image-wrapper { width: 100%; max-width: 360px; margin: 0 auto; background: transparent; border-radius: 5px; overflow: visible; box-shadow: 0 2px 12px rgba(10,22,40,0.08); border: 1.2px solid rgba(70,75,85,0.35); padding: 0; position: relative; } .about-image-wrapper::after { content: none; } /* ── Electric Frame SVG ── */ .electric-frame-svg { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); z-index: 5; pointer-events: none; border-radius: 4px; overflow: visible; } @keyframes electricFlow1 { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -180; } } @keyframes electricFlow2 { 0% { stroke-dashoffset: -60; } 100% { stroke-dashoffset: 120; } } @keyframes electricPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .ec-line-1 { animation: electricFlow1 1.8s ease-in-out infinite alternate, electricPulse 1.2s ease-in-out infinite; } .ec-line-2 { animation: electricFlow2 2.2s ease-in-out infinite alternate, electricPulse 1.5s ease-in-out 0.3s infinite; } .ec-spark { animation: electricFlow1 2.5s linear infinite; } /* تصویر درون قاب */ .about-image-inner { position: relative; z-index: 1; overflow: hidden; border-radius: 3px; background: transparent; } .about-image-inner img { width: 100%; height: auto; object-fit: cover; display: block; transition: transform 0.4s ease; image-rendering: auto; } .about-image-wrapper:hover .about-image-inner img { transform: scale(1.03); } .about-content h3 { font-size: 1.6rem; font-weight: 700; margin-bottom: 16px; color: #0A1628; } .about-content p { color: #0A1628; margin-bottom: 16px; line-height: 2; font-weight: 400; } .about-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; } .highlight-item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(255,255,255,0.95); border-radius: var(--radius); box-shadow: var(--shadow); font-weight: 700; font-size: 0.82rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #0A1628; } .highlight-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .dot-teal { background: var(--teal); } .dot-yellow { background: var(--yellow); } .dot-navy { background: var(--navy); } .dot-gray { background: var(--gray-dark); } /* ===== SERVICES ===== */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; direction: rtl; } @media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } .service-card { background: rgba(255,255,255,0.55); backdrop-filter: blur(var(--za-glass-blur-lg)); -webkit-backdrop-filter: blur(var(--za-glass-blur-lg)); border-radius: var(--za-glass-radius); padding: 32px 22px 24px; box-shadow: var(--za-shadow), 0 0 0 1px rgba(255,255,255,0.5), inset 0 1px 0 rgba(255,255,255,0.4); transition: all 0.4s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; display: flex; flex-direction: column; isolation: isolate; border: 1px solid rgba(255,255,255,0.35); } .service-card::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0.04; transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; /* icon set per-card via ::after */ background-size: 70% auto; background-position: 50% 60%; background-repeat: no-repeat; } .service-card:hover::before { opacity: 0.09; transform: scale(1.06); } .service-card > * { position: relative; z-index: 1; } .service-card::after { content: ''; position: absolute; top: 0; right: 0; width: 5px; height: 48px; background: linear-gradient(180deg, var(--teal), var(--turquoise-dark)); border-radius: 0 0 0 8px; transition: height 0.35s cubic-bezier(0.4,0,0.2,1); z-index: 0; } .service-card:hover::after { height: 100%; border-radius: 0 0 0 16px; } .service-card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(10,22,40,0.14), 0 0 0 1px rgba(13,115,119,0.2), 0 0 0 6px rgba(13,115,119,0.04); border-color: rgba(13,115,119,0.3); background: rgba(255,255,255,0.65); } .service-icon { width: 64px; height: 64px; margin-bottom: 18px; flex-shrink: 0; position: relative; z-index: 1; } .service-icon .service-icon-img { width: 100%; height: 100%; object-fit: scale-down; display: block; transition: transform 0.35s ease; } .service-card:hover .service-icon-img { transform: scale(1.1); } .service-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; color: var(--teal); line-height: 1.5; } .service-card p { color: #1E293B; font-size: 0.85rem; line-height: 1.9; flex: 1; font-weight: 500; } .service-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; } .service-tag { padding: 5px 14px; border-radius: 50px; font-size: 0.75rem; font-weight: 600; background: rgba(13,115,119,0.07); color: var(--teal); transition: all 0.2s; } .service-tag:hover { background: rgba(13,115,119,0.14); } /* ========== PROJECT PAGE STYLES ========== */ .project-detail { background: rgba(255,255,255,0.92); border-radius: var(--radius); overflow: hidden; box-shadow: 0 8px 32px rgba(10,22,40,0.1); border: 1px solid rgba(255,255,255,0.4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); direction: rtl; transition: all 0.35s cubic-bezier(0.4,0,0.2,1); } .project-detail-image { width: 100%; background: linear-gradient(135deg, #0D1F3C, #0A1628); padding: 24px; display: flex; align-items: center; justify-content: center; } .project-detail-image img { max-width: 100%; height: auto; max-height: 600px; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); cursor: pointer; transition: transform 0.3s; } .project-detail-image img:hover { transform: scale(1.02); } .project-detail:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 12px 40px rgba(10,22,40,0.14), 0 0 0 1px rgba(13,115,119,0.18), 0 0 0 8px rgba(13,115,119,0.04); } .project-detail-body { padding: 32px 28px; } .project-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; direction: rtl; } .project-detail-header { margin-bottom: 24px; } .project-number { display: inline-block; background: var(--yellow); color: var(--navy); padding: 6px 18px; border-radius: 50px; font-weight: 700; font-size: 0.85rem; margin-bottom: 10px; } .project-detail-header h2 { font-size: 1.8rem; font-weight: 800; color: #000; margin-bottom: 8px; line-height: 1.5; } .project-summary-box { background: linear-gradient(135deg, rgba(13, 115, 119, 0.08), rgba(64, 224, 208, 0.08)); border-right: 4px solid var(--teal); padding: 14px 20px; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 24px; } .project-summary-box h4 { color: #000; font-size: 1rem; font-weight: 700; margin-bottom: 8px; } .project-summary-box p { color: #000; font-size: 0.95rem; line-height: 1.7; font-weight: 600; } .project-section { margin-bottom: 20px; } .project-section h3 { font-size: 1.25rem; font-weight: 700; color: #000; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .project-section h3 .section-icon { width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .project-section p, .project-section li { color: #000; font-size: 0.85rem; line-height: 1.7; margin-bottom: 8px; font-weight: 500; } .project-section ul { list-style: none; padding: 0; } .project-section ul li { padding-right: 28px; position: relative; margin-bottom: 8px; } .project-section ul li::before { content: '▸'; position: absolute; right: 0; color: var(--teal); font-weight: 800; font-size: 1rem; } .project-tech-stack { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--light-gray); } .tech-pill { padding: 8px 18px; border-radius: 50px; font-size: 0.85rem; font-weight: 600; } .tech-pill-1 { background: rgba(10, 22, 40, 0.08); color: var(--navy); } .tech-pill-2 { background: rgba(13, 115, 119, 0.1); color: var(--teal); } .tech-pill-3 { background: rgba(230, 194, 0, 0.15); color: #B89700; } .tech-pill-4 { background: rgba(74, 74, 74, 0.08); color: var(--gray-dark); } .project-dl-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; } .btn-dl { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 50px; font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: var(--transition); font-family: inherit; } .btn-dl-primary { background: var(--teal); color: var(--white); } .btn-dl-primary:hover { background: var(--teal-light); transform: translateY(-2px); } .btn-dl-outline { background: transparent; color: var(--teal); border: 2px solid var(--teal); } .btn-dl-outline:hover { background: var(--teal); color: var(--white); } .projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; direction: rtl; } /* Lightbox */ .lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 9999; align-items: center; justify-content: center; cursor: pointer; } .lightbox.active { display: flex; } .lightbox img { max-width: 95vw; max-height: 95vh; border-radius: 4px; } .lightbox-close { position: absolute; top: 24px; left: 32px; color: #fff; font-size: 2.5rem; cursor: pointer; z-index: 10000; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } /* ===== PROJECT TECH TOGGLE ===== */ .project-tech-heading { font-size: 1.25rem; font-weight: 700; color: #1E293B; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; } .project-read-more { display: inline-block; color: var(--teal); font-size: 0.92rem; font-weight: 600; cursor: pointer; padding: 4px 0; user-select: none; transition: color 0.2s; } .project-read-more:hover { color: var(--teal-light); text-decoration: underline; } .project-read-more.active { color: var(--teal-light); } .project-toggle-content { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.5s cubic-bezier(0.22,0.61,0.36,1), opacity 0.35s ease, margin 0.5s ease; margin-top: 0; } .project-toggle-content.open { max-height: 4000px; opacity: 1; margin-top: 12px; display: block; transition: max-height 0.7s cubic-bezier(0.22,0.61,0.36,1), opacity 0.4s ease 0.1s, margin 0.7s ease; } .project-toggle-content p { color: #0A1628; font-size: 0.88rem; line-height: 1.9; margin-bottom: 12px; font-weight: 500; } .project-toggle-content ul { margin: 0; padding: 0; list-style: none; } .project-toggle-content li { color: #0A1628; font-size: 0.88rem; line-height: 1.9; margin-bottom: 12px; padding-right: 28px; position: relative; font-weight: 500; } .project-toggle-content li::before { content: '\25b8'; position: absolute; right: 0; color: var(--teal); font-weight: 800; font-size: 1rem; } .project-toggle-content li:last-child { margin-bottom: 0; } [dir="ltr"] .project-toggle-content li { padding-right: 0; padding-left: 28px; } [dir="ltr"] .project-toggle-content li::before { right: auto; left: 0; } [dir="ltr"] .project-tech-heading { text-align: left; } .articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; } .article-card { background: rgba(255,255,255,0.65); border-radius: var(--radius); overflow: hidden; transition: var(--transition); box-shadow: 0 4px 20px rgba(10,22,40,0.06); border: 1px solid rgba(255,255,255,0.4); display: flex; flex-direction: column; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); text-decoration: none; color: var(--text); } .article-card:hover { transform: translateY(-6px); box-shadow: 0 12px 36px rgba(10,22,40,0.1); border-color: var(--teal); background: rgba(255,255,255,0.78); } .article-card-image { width: 100%; aspect-ratio: 16/10; background: linear-gradient(135deg, #0D7377, #14A3A8); display: flex; align-items: center; justify-content: center; font-size: 3rem; } .article-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; direction: rtl; } .article-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; } .article-journal { color: var(--teal); font-size: 0.8rem; font-weight: 600; } .article-date { color: #475569; font-size: 0.78rem; font-weight: 500; } .article-card-body h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; color: var(--navy); line-height: 1.6; } .article-card-body p { color: #1E293B; font-size: 0.84rem; line-height: 1.7; flex: 1; font-weight: 500; } .article-authors { color: #334155; font-size: 0.8rem; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--light-gray); font-weight: 500; } .article-placeholder { background: rgba(255,255,255,0.7); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; min-height: 200px; border: 2px dashed rgba(13, 115, 119, 0.2); color: #475569; font-size: 1.1rem; font-weight: 500; direction: rtl; } /* ===== CERTIFICATIONS ===== */ .certs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1050px; margin: 0 auto; direction: rtl; } .cert-card { background: transparent; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 16px; padding: 22px 18px 18px; text-align: center; transition: all 0.4s cubic-bezier(0.4,0,0.2,1); cursor: default; box-shadow: 0 4px 16px rgba(0,0,0,0.2), 0 0 0 1px rgba(94,234,212,0.14); position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(94,234,212,0.12); } .cert-card::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0.06; transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; background: radial-gradient(ellipse at 50% 30%, rgba(94,234,212,0.35) 0%, transparent 65%); } .cert-card:hover::before { opacity: 0.14; transform: scale(1.08); } .cert-card > * { position: relative; z-index: 1; } .cert-card::after { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 60px; background: linear-gradient(180deg, #5EEAD4, #00D4AA, #0D7377); border-radius: 0 0 0 12px; transition: height 0.4s cubic-bezier(0.4,0,0.2,1); z-index: 0; box-shadow: 0 0 8px rgba(94,234,212,0.3); } .cert-card:hover::after { height: 100%; border-radius: 0 0 0 16px; } .cert-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(94,234,212,0.45), 0 0 22px rgba(94,234,212,0.12); border-color: rgba(94,234,212,0.38); background: rgba(10,22,40,0.18); } .cert-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; overflow: visible; position: relative; z-index: 1; border-radius: 50%; padding: 0; box-shadow: 0 6px 28px rgba(0,0,0,0.38), 0 0 0 2px rgba(94,234,212,0.25), 0 0 22px rgba(94,234,212,0.15); transition: all 0.4s ease; background: transparent; } .cert-card:hover .cert-icon { box-shadow: 0 8px 36px rgba(0,0,0,0.45), 0 0 0 3px rgba(94,234,212,0.4), 0 0 32px rgba(94,234,212,0.25); transform: scale(1.05); } .cert-icon .service-icon-img { width: 100%; height: 100%; object-fit: contain; margin: 0; border-radius: 50%; } .cert-icon-img { width: 80px; height: 80px; object-fit: scale-down; display: block; margin: 0 auto 20px; transition: transform 0.3s ease; } .service-card:hover .service-icon-img { transform: scale(1.1); } .cert-card:hover .cert-icon .service-icon-img { transform: scale(1.08); } .cert-card h3 { font-size: 1.05rem; font-weight: 800; color: #FFFFFF; margin: 0 0 6px; line-height: 1.4; text-shadow: 0 2px 18px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.7), 0 0 32px rgba(0,0,0,0.5); letter-spacing: 0.01em; } .cert-card p { font-size: 0.88rem; color: rgba(255,255,255,0.95); line-height: 1.55; margin: 0; font-weight: 500; text-shadow: 0 1px 12px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.65), 0 0 20px rgba(0,0,0,0.45); } @media (max-width: 768px) { .certs-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 4px; } .cert-card { padding: 22px 14px 18px; } .cert-card h3 { font-size: 1rem; text-shadow: 0 2px 10px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.5); } .cert-card p { font-size: 0.84rem; text-shadow: 0 1px 6px rgba(0,0,0,0.7), 0 0 4px rgba(0,0,0,0.4); } .cert-icon { width: 62px; height: 62px; margin-bottom: 12px; } } @media (max-width: 480px) { .certs-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .cert-card { padding: 14px 10px 14px; } .cert-card h3 { font-size: 0.9rem; text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 5px rgba(0,0,0,0.5); } .cert-card p { font-size: 0.8rem; text-shadow: 0 1px 5px rgba(0,0,0,0.7), 0 0 3px rgba(0,0,0,0.4); } .cert-icon { width: 50px; height: 50px; margin-bottom: 8px; } /* Tighter spacing for tiny screens */ .hero { padding: 78px 16px 20px; } .hero h1 { font-size: 1.75rem; } .hero p, .hero-bullet-card { font-size: 0.85rem; } .hero-buttons .btn { font-size: 0.8rem; padding: 10px 8px; gap: 5px; } .hero-buttons { gap: 6px; } .hero-stats { gap: 8px; } .stat-number { font-size: 1.4rem; } .stat-label { font-size: 0.75rem; } .hero-tagline-full { font-size: 1rem !important; } .hero-trust-badge { font-size: 0.62rem; padding: 4px 7px; gap: 3px; border-radius: 24px; } .hero-trust-badge .trust-icon { font-size: 0.9rem; } .hero-trust-badge .trust-dot { width: 3px; height: 3px; margin: 0 1px; } .about-highlights { grid-template-columns: 1fr; } .section { padding: 40px 16px; } .section-header { margin-bottom: 28px; } .service-card { padding: 20px 14px 16px; } .service-card p { font-size: 0.82rem; } .service-card h3 { font-size: 0.9rem; } .footer { padding: 24px 12px 14px; } .floating-contact-btn { width: 42px; height: 42px; font-size: 1.15rem; } .floating-contact { right: 8px; bottom: 14px; gap: 8px; } .floating-contact-label { font-size: 0.72rem; padding: 6px 10px; } .back-to-top { bottom: 14px; left: 8px; width: 36px; height: 36px; } /* ⚠️ v4.0 NAVBAR FIX: navbar CSS moved to navbar.php (self-contained) — old styles removed */ .ig-cta-inner { padding: 10px 10px; gap: 8px; } .ig-cta-title { font-size: 0.82rem; } .ig-cta-handle { font-size: 0.75rem; } .ig-cta-icon { width: 30px; height: 30px; min-width: 30px; } .ig-cta-icon svg { width: 16px; height: 16px; } .project-detail-body { padding: 14px 12px; } .project-detail-image { padding: 12px 8px; } .project-detail-header h2 { font-size: 1.2rem; } .project-summary-box p { font-size: 0.9rem; } .project-section h3 { font-size: 1.05rem; } .testimonial-card { padding: 18px 14px; } .quick-contact-card { padding: 14px 14px 12px; } } /* ===== TESTIMONIALS ===== */ .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; direction: rtl; } .testimonial-card { background: rgba(255,255,255,0.55); border-radius: var(--za-glass-radius); padding: 28px 24px; border: 1px solid rgba(255,255,255,0.4); transition: var(--transition); backdrop-filter: blur(var(--za-glass-blur-md)); -webkit-backdrop-filter: blur(var(--za-glass-blur-md)); box-shadow: var(--za-shadow); position: relative; } .testimonial-card::before { content: '“'; position: absolute; top: 8px; left: 16px; font-size: 4rem; color: rgba(13,115,119,0.1); font-family: serif; line-height: 1; } .testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(10,22,40,0.12); border-color: rgba(13,115,119,0.3); background: rgba(255,255,255,0.65); } #testimonials .section-header h2 { color: #FFFFFF; } #testimonials .section-header p { color: rgba(255,255,255,0.85); } #testimonials .section-tag { background: rgba(64,224,208,0.15); color: var(--turquoise); } .testimonial-card p { font-size: 0.9rem; color: #0A1628; line-height: 1.8; margin-bottom: 16px; font-weight: 500; } .testimonial-author { display: flex; align-items: center; gap: 12px; } .testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; color: #fff; flex-shrink: 0; } .testimonial-avatar.ta1 { background: var(--teal); } .testimonial-avatar.ta2 { background: var(--navy); } .testimonial-avatar.ta3 { background: #E6C200; color: var(--navy); } .testimonial-author div strong { font-size: 0.85rem; color: #0A1628; display: block; font-weight: 700; } .testimonial-author div span { font-size: 0.75rem; color: #475569; font-weight: 500; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; direction: rtl; } .contact-methods { display: flex; flex-direction: column; gap: 8px; direction: rtl; } /* ── Glass Card Tiles ── */ .contact-method { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(255,255,255,0.25); backdrop-filter: blur(var(--za-glass-blur-lg)); -webkit-backdrop-filter: blur(var(--za-glass-blur-lg)); border-radius: var(--za-glass-radius); border: 1px solid rgba(255,255,255,0.50); box-shadow: 0 6px 24px rgba(10,22,40,0.09), 0 2px 6px rgba(10,22,40,0.05), inset 0 1px 0 rgba(255,255,255,0.45); transition: all 0.35s cubic-bezier(0.4,0,0.2,1); text-decoration: none; color: #1E293B; position: relative; overflow: hidden; } .contact-method::before { content: ''; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(135deg, rgba(64,224,208,0.06) 0%, transparent 50%, rgba(230,194,0,0.04) 100%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .contact-method:hover { transform: translateX(-6px) scale(1.02); box-shadow: 0 8px 28px rgba(10,22,40,0.12), 0 2px 8px rgba(10,22,40,0.06), 0 0 0 2px rgba(64,224,208,0.15), 0 0 24px rgba(64,224,208,0.08); border-color: rgba(64,224,208,0.45); } .contact-method:hover::before { opacity: 1; } /* Icon: glass pill */ .contact-method-icon { width: 34px; height: 34px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; background: rgba(255,255,255,0.50); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.55); box-shadow: 0 2px 10px rgba(10,22,40,0.06), inset 0 1px 0 rgba(255,255,255,0.6); transition: all 0.35s ease; } .contact-method:hover .contact-method-icon { transform: scale(1.10); box-shadow: 0 6px 18px rgba(10,22,40,0.12), 0 0 14px rgba(64,224,208,0.15); } .cm-teal { background: linear-gradient(135deg, rgba(64,224,208,0.22), rgba(13,115,119,0.12)); border-color: rgba(64,224,208,0.35); } .cm-yellow { background: linear-gradient(135deg, rgba(230,194,0,0.22), rgba(200,160,0,0.10)); border-color: rgba(230,194,0,0.35); } .cm-navy { background: linear-gradient(135deg, rgba(10,22,40,0.08), rgba(10,22,40,0.04)); border-color: rgba(10,22,40,0.18); } .cm-gray { background: linear-gradient(135deg, rgba(74,74,74,0.08), rgba(74,74,74,0.04)); border-color: rgba(74,74,74,0.18); } .contact-method-text strong { font-weight: 800; font-size: 0.95rem; color: var(--za-text); display: block; margin-bottom: 1px; letter-spacing: -0.01em; } .contact-method-text span { color: var(--za-text-sub); font-size: 0.88rem; word-break: break-all; font-weight: 600; } /* ── Staggered fade-in cascade ── */ .contact-methods.reveal.visible .contact-method { animation: contactCascadeIn 0.5s cubic-bezier(0.4,0,0.2,1) both; } .contact-methods.reveal.visible .contact-method:nth-child(1) { animation-delay: 0s; } .contact-methods.reveal.visible .contact-method:nth-child(2) { animation-delay: 0.08s; } .contact-methods.reveal.visible .contact-method:nth-child(3) { animation-delay: 0.16s; } .contact-methods.reveal.visible .contact-method:nth-child(4) { animation-delay: 0.24s; } .contact-methods.reveal.visible .contact-method:nth-child(5) { animation-delay: 0.32s; } .contact-methods.reveal.visible .contact-method:nth-child(6) { animation-delay: 0.40s; } .contact-methods.reveal.visible .contact-method:nth-child(7) { animation-delay: 0.48s; } @keyframes contactCascadeIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } } .contact-form { background: rgba(255,255,255,0.25); backdrop-filter: blur(var(--za-glass-blur-lg)); -webkit-backdrop-filter: blur(var(--za-glass-blur-lg)); border-radius: var(--za-glass-radius); padding: 12px 16px; box-shadow: 0 6px 24px rgba(10,22,40,0.09), 0 2px 6px rgba(10,22,40,0.05), inset 0 1px 0 rgba(255,255,255,0.45); direction: rtl; border: 1px solid rgba(255,255,255,0.50); } .contact-form h3 { font-size: 1rem; font-weight: 800; margin-bottom: 2px; color: var(--za-heading); } /* ── FAQ section-header compact ── */ #faq .section-header{margin-bottom:0!important} #about-faq .section-header{margin-bottom:18px} #faq .faq-capsule{margin-top:74px} /* ── Contact section tighter header ── */ #contact .section-header { margin-bottom: 10px; } #contact .section-tag { font-size: 0.75rem; padding: 4px 14px; margin-bottom: 2px; } #contact .section-header h2 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin-bottom: 2px; } #contact .section-header p { font-weight: 800 !important; color: #F59E0B !important; } .form-group { margin-bottom: 3px; } .form-group label { display: block; font-weight: 800; font-size: 0.82rem; margin-bottom: 1px; color: var(--za-text); } .form-group input, .form-group textarea { width: 100%; padding: 6px 10px; border: 2px solid var(--light-gray); border-radius: var(--radius); font-family: inherit; font-size: 0.9rem; transition: var(--transition); background: var(--off-white); resize: vertical; font-weight: 600; color: var(--za-text); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.1); } .form-group select { width: 100%; padding: 6px 10px; border: 2px solid var(--light-gray); border-radius: var(--radius); font-family: inherit; font-size: 0.95rem; transition: var(--transition); background: var(--off-white); appearance: none; -webkit-appearance: none; cursor: pointer; font-weight: 600; color: #000000; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230D7377' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 16px center; } .btn-submit { width: 100%; padding: 8px; background: var(--navy); color: var(--white); border: none; border-radius: 50px; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: var(--transition); font-family: inherit; margin-top: 4px; } .btn-submit:hover { background: var(--navy-light); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* ══════ Instagram Icons ══════ */ .ig-inline-icon{width:20px;height:20px;vertical-align:middle;display:inline-block;flex-shrink:0;border-radius:4px} .ig-about-icon{width:28px;height:28px;display:block;border-radius:6px} .ig-contact-icon{width:22px;height:22px;display:block;flex-shrink:0;border-radius:4px} .ig-author-icon{width:18px;height:18px;display:inline-block;flex-shrink:0;border-radius:3px} .form-status { display: none; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-weight: 600; font-size: 0.9rem; text-align: center; } .form-status.success { display: block; background: rgba(46, 213, 115, 0.12); color: #1a7a3a; border: 1px solid rgba(46, 213, 115, 0.3); } .form-status.error { display: block; background: rgba(255, 71, 87, 0.1); color: #c0392b; border: 1px solid rgba(255, 71, 87, 0.25); } .form-status.loading { display: block; background: rgba(13, 115, 119, 0.08); color: var(--teal); border: 1px solid rgba(13, 115, 119, 0.2); } /* ── FAQ Teal Capsule ── */ .faq-capsule { background: rgba(94, 234, 212, 0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(94, 234, 212, 0.22); border-radius: 18px; padding: 16px 18px; margin-right: 18px; box-shadow: 0 4px 20px rgba(94, 234, 212, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15); transition: all 0.35s ease; } .faq-capsule:hover { border-color: rgba(94, 234, 212, 0.4); box-shadow: 0 6px 28px rgba(94, 234, 212, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .faq-capsule .aefaq-search-wrap { margin-bottom: 12px; } .faq-capsule .aefaq-search-input { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(94, 234, 212, 0.25); color: #0A1628; } .faq-capsule .aefaq-search-input::placeholder { color: rgba(10, 22, 40, 0.4); } .faq-capsule .aefaq-search-input:focus { border-color: rgba(94, 234, 212, 0.5); box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.12); } .faq-capsule [dir="ltr"] .aefaq-wrapper { direction: ltr; } [dir="ltr"] .aefaq-header { flex-direction: row; } .aefaq-item { background: rgba(255, 255, 255, 0.45); border-radius: 12px; border: 1px solid rgba(94, 234, 212, 0.1); transition: all 0.3s ease; } .faq-capsule .aefaq-item:hover { background: rgba(255, 255, 255, 0.7); border-color: rgba(94, 234, 212, 0.3); } .faq-capsule .aefaq-header { color: #0A1628; } .faq-capsule .aefaq-question { color: #0A1628; } .faq-capsule .aefaq-answer { color: #1A2A3A; } .visitor-counter { max-width: 1100px; margin: 0 auto 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; direction: rtl; } .visitor-stat { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 50px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: var(--transition); min-width: 180px; } .visitor-stat:hover { background: rgba(255,255,255,0.07); border-color: rgba(230, 194, 0, 0.25); transform: translateY(-2px); } .visitor-stat-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .vs-icon-today { background: rgba(230, 194, 0, 0.15); color: var(--yellow); } .vs-icon-total { background: rgba(64, 224, 208, 0.15); color: var(--turquoise); } .visitor-stat-text { display: flex; flex-direction: column; text-align: right; } .visitor-stat-label { color: rgba(255,255,255,0.72); font-size: 0.72rem; font-weight: 600; } .visitor-stat-number { color: var(--white); font-size: 1.15rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; } .visitor-stat-number.loading { color: rgba(255,255,255,0.3); } @keyframes counterPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } .visitor-stat-number.loading::after { content: '···'; animation: counterPulse 1.4s ease-in-out infinite; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes btnFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes igPulse { 0%, 100% { box-shadow: 0 0 8px rgba(249,206,52,0.5), 0 0 16px rgba(238,42,123,0.35); } 50% { box-shadow: 0 0 18px rgba(249,206,52,0.75), 0 0 32px rgba(238,42,123,0.6); } } .reveal { opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.4,0,0.2,1); } .reveal.visible { opacity: 1; transform: translateY(0); } /* ── Stagger children inside .reveal ── */ .certs-grid.reveal.visible .cert-card, .services-grid.reveal.visible .service-card, .testimonials-grid.reveal.visible .testimonial-card, .projects-grid.reveal.visible .project-detail, .about-highlights-box.reveal.visible .highlight-item { animation: revealStagger 0.5s cubic-bezier(0.4,0,0.2,1) both; } .certs-grid.reveal.visible .cert-card:nth-child(1), .services-grid.reveal.visible .service-card:nth-child(1), .testimonials-grid.reveal.visible .testimonial-card:nth-child(1), .about-highlights-box.reveal.visible .highlight-item:nth-child(1) { animation-delay: 0.05s; } .certs-grid.reveal.visible .cert-card:nth-child(2), .services-grid.reveal.visible .service-card:nth-child(2), .testimonials-grid.reveal.visible .testimonial-card:nth-child(2), .about-highlights-box.reveal.visible .highlight-item:nth-child(2) { animation-delay: 0.12s; } .certs-grid.reveal.visible .cert-card:nth-child(3), .services-grid.reveal.visible .service-card:nth-child(3), .testimonials-grid.reveal.visible .testimonial-card:nth-child(3), .about-highlights-box.reveal.visible .highlight-item:nth-child(3) { animation-delay: 0.19s; } .certs-grid.reveal.visible .cert-card:nth-child(4), .services-grid.reveal.visible .service-card:nth-child(4), .about-highlights-box.reveal.visible .highlight-item:nth-child(4) { animation-delay: 0.26s; } .certs-grid.reveal.visible .cert-card:nth-child(5), .services-grid.reveal.visible .service-card:nth-child(5) { animation-delay: 0.33s; } .certs-grid.reveal.visible .cert-card:nth-child(6) { animation-delay: 0.40s; } @keyframes revealStagger { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes scrollBounce { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(8px); opacity: 1; } } @keyframes trustDotPulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } .hero-scroll-indicator { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2; } .hero-scroll-indicator svg { width: 28px; height: 28px; color: rgba(10,22,40,0.45); animation: scrollBounce 2s ease-in-out infinite; } .hero-trust-badge { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto; max-width: 920px; padding: 8px 18px; background: rgba(255,255,255,0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(10,22,40,0.12); border-radius: 50px; font-size: 0.78rem; font-weight: 700; color: #0A1628; text-align: center; animation: fadeInUp 0.8s ease-out 0.7s both; position: relative; z-index: 1; grid-column: 1; } .hero-trust-badge .trust-icon { font-size: 1.1rem; } .hero-trust-badge .trust-dot { display: inline-block; width: 6px; height: 6px; background: #0D7377; border-radius: 50%; margin: 0 4px; animation: trustDotPulse 1.8s ease-in-out infinite; } .hero-trust-badge .trust-dot:nth-child(2) { animation-delay: 0.6s; } .hero-trust-badge .trust-dot:nth-child(3) { animation-delay: 1.2s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── Section tag gentle float ── */ .section-tag { animation: tagFloat 4s ease-in-out infinite; } @keyframes tagFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* ── Glass card light sheen sweep on hover ── */ .cert-card::after, .service-card::after, .testimonial-card::after, .project-detail::after { pointer-events: none; } /* ── Progress scroll bar ── */ .scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, #5EEAD4, #00D4AA); z-index: 9999; transition: width 0.1s linear; border-radius: 0 2px 2px 0; box-shadow: 0 0 10px rgba(94,234,212,0.5); } /* ── Service icon subtle pulse ── */ .service-icon { animation: iconPulse 3s ease-in-out infinite; } @keyframes iconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .service-card:hover .service-icon { animation: none; transform: scale(1.1); } /* ── Button active press effect ── */ .btn:active, .btn-submit:active, .qc-btn:active { transform: scale(0.96) !important; transition: transform 0.1s ease !important; } /* ── Smooth image reveal ── */ .about-image-inner img, .project-detail-image img { transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), filter 0.4s ease; } .about-image-wrapper:hover .about-image-inner img, .project-detail:hover .project-detail-image img { transform: scale(1.05); } .project-detail-image img:hover { transform: scale(1.06) !important; } /* ── Floating contact buttons subtle bounce ── */ .floating-contact-btn { animation: floatBounce 3s ease-in-out infinite; } .floating-item:nth-child(2) .floating-contact-btn { animation-delay: 0.5s; } .floating-item:nth-child(3) .floating-contact-btn { animation-delay: 1s; } .floating-contact-btn:hover { animation: none; transform: scale(1.12); } @keyframes floatBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .back-to-top { position: fixed; bottom: 32px; left: 32px; width: 48px; height: 48px; border-radius: 50%; background: var(--turquoise); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; cursor: pointer; box-shadow: 0 4px 16px rgba(64,224,208,0.35); border: none; opacity: 0; transform: translateY(10px); transition: var(--transition); z-index: 100; pointer-events: none; } .back-to-top::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(64,224,208,0.35); pointer-events: none; z-index: -1; opacity: 0; transition: opacity 0.3s; } .back-to-top.show { opacity: 1; transform: translateY(0); pointer-events: all; } .back-to-top.show:hover { background: #2DD4BF; transform: translateY(-3px); box-shadow: 0 6px 24px rgba(64,224,208,0.45); } .back-to-top.show::after { opacity: 1; animation: bttPulseRing 2s ease-in-out infinite; } @keyframes jumpIn { 0% { opacity: 0; transform: scale(0.3) translateY(18px); } 55% { opacity: 1; transform: scale(1.12) translateY(-4px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes fadeWordIn { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes bttPulseRing { 0%, 100% { transform: scale(1); border-color: rgba(64,224,208,0.2); box-shadow: 0 0 0 0 rgba(64,224,208,0); } 50% { transform: scale(1.22); border-color: rgba(64,224,208,0.6); box-shadow: 0 0 18px rgba(64,224,208,0.2), 0 0 36px rgba(64,224,208,0.06); } } .floating-contact { position: fixed; bottom: 32px; right: 32px; z-index: 100; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; } .floating-item { display: flex; align-items: center; gap: 12px; direction: ltr; } .floating-contact-btn { width: 56px; height: 56px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; border: none; text-decoration: none; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); position: relative; } .floating-whatsapp { background: #25D366; box-shadow: 0 4px 18px rgba(37, 211, 102, 0.4); } .floating-whatsapp:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37, 211, 102, 0.55); } .floating-phone { background: var(--navy); box-shadow: 0 4px 18px rgba(10, 22, 40, 0.4); } .floating-phone:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(10, 22, 40, 0.55); } .floating-telegram { background: #0088cc; box-shadow: 0 4px 18px rgba(0, 136, 204, 0.4); } .floating-telegram:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0, 136, 204, 0.55); } .floating-contact-label { background: rgba(10, 22, 40, 0.92); color: #fff; padding: 10px 18px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateX(10px); transition: all 0.3s cubic-bezier(0.4,0,0.2,1); pointer-events: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .floating-item:hover .floating-contact-label { opacity: 1; transform: translateX(0); } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); } 70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } .floating-contact-btn::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; } .floating-whatsapp::after { animation: pulse-wa 2.5s infinite; } .floating-telegram::after { animation: pulse-tg 2.5s infinite; } .floating-phone::after { animation: pulse-ph 2.5s infinite; } @keyframes pulse-wa { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); } 70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } @keyframes pulse-tg { 0% { box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.5); } 70% { box-shadow: 0 0 0 14px rgba(0, 136, 204, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 136, 204, 0); } } @keyframes pulse-ph { 0% { box-shadow: 0 0 0 0 rgba(10, 22, 40, 0.5); } 70% { box-shadow: 0 0 0 14px rgba(10, 22, 40, 0); } 100% { box-shadow: 0 0 0 0 rgba(10, 22, 40, 0); } } @media (max-width: 768px) { /* ⚠️ v4.0 NAVBAR FIX: navbar CSS moved to navbar.php (self-contained) — old styles removed */ /* ═══════════ HERO ═══════════ */ .hero { padding: 66px 10px 0; min-height: auto; height: auto; display: block; } .hero-bg { background: url('/assets/images/bg/hero-mobile.webp') center top/contain no-repeat; opacity: 0.35; background-size: cover; background-attachment: scroll; } .hero-top { flex-direction: column; gap: 3px; margin-bottom: 6px; } .hero-logo-inline { height: clamp(90px, 22vw, 140px); width: auto; max-width: 75vw; } .hero-tagline-full { font-size: 0.88rem !important; margin-bottom: 4px !important; letter-spacing: -0.3px; font-weight: 800; line-height: 1.6; } .hero-tagline-teal { color: #5EEAD4 !important; text-shadow: 0 0 12px rgba(94,234,212,0.5), 0 0 24px rgba(94,234,212,0.2); } .hero-row { flex-direction: column; gap: 10px; align-items: center; } .hero-main { width: 100%; } .hero-content { display: flex; flex-direction: column; } .hero-content > h1, .hero-content > .hero-bullets, .hero-content > .hero-quick-contact, .hero-content > .hero-buttons, .hero-content > .hero-stats, .hero-content > .hero-trust-badge { grid-column: auto; grid-row: auto; } .hero-content > .hero-buttons { order: 3; margin-top: 0; } .hero-content > .hero-quick-contact { order: 4; margin-top: 6px; } .hero-quick-contact { width: 100% !important; max-width: 400px; margin: 0 auto 8px; padding: 0; } .hero h1 { font-size: clamp(1rem, 3.8vw, 1.4rem); margin-bottom: 8px; } .hero p, .hero-bullet-card { font-size: 0.78rem; margin-bottom: 0; padding: 8px 10px; line-height: 1.65; } .hero-bullet-card > span:last-child { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: normal; } .hero-bullets { gap: 6px; margin: 0; max-width: none; } .hero-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 0; width: 100%; max-width: 420px; margin: 0 auto; } .hero-buttons .btn { width: 100%; justify-content: center; padding: 8px 8px; font-size: 0.75rem; } .hero-stats { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; border-radius: 0; width: auto; height: auto; padding: 0; box-shadow: none; } .hero-stats .stat-item { min-width: 64px; padding: 0 4px; } .hero-stats .stat-number { font-size: 1.35rem; color: var(--teal); text-shadow: none; } .hero-stats .stat-label { font-size: 0.75rem; font-weight: 600; opacity: 1; } .hero-scroll-indicator { display: none; } .hero-content > .hero-trust-badge { grid-column: auto; order: 2; } .hero-trust-badge { max-width: 100%; margin: 8px auto 8px; font-size: 0.7rem; padding: 5px 10px; gap: 5px; border-radius: 30px; } .hero-trust-badge .trust-icon { font-size: 0.95rem; } .hero-trust-badge .trust-dot { width: 4px; height: 4px; margin: 0 2px; } /* ═══════════ SECTIONS ═══════════ */ .section { padding: 56px 4px; } .section-header { margin-bottom: 36px; } .section-header h2 { font-size: clamp(1.35rem, 5.5vw, 1.75rem); font-weight: 800; margin-bottom: 10px; letter-spacing: -0.2px; line-height: 1.35; } .section-header h3 { font-size: clamp(0.9rem, 4vw, 1.1rem); } .about-bullets li { font-size: clamp(0.82rem, 3.5vw, 0.95rem); padding-right: 18px; } [dir="ltr"] .about-bullets li { padding-right: 0; padding-left: 18px; } .about-name-heading { margin: 0 0 12px; } .about-name-heading span { display: block !important; } .about-name-heading span:first-child { font-size: clamp(1.1rem, 4vw, 1.4rem); white-space: normal !important; } .about-name-subtitle { font-size: clamp(0.78rem, 3vw, 0.9rem) !important; } .section-header p { font-size: 0.9rem; font-weight: 600; color: #0A1628; } #certifications .section-header p{font-size:clamp(1.05rem,4vw,1.4rem);color:#FFF3CD;font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,0.5);} #contact .section-header p{font-size:0.75rem;font-weight:800!important;color:#F59E0B!important;} .section-tag { font-size: 0.82rem; padding: 6px 18px; margin-bottom: 14px; font-weight: 700; letter-spacing: 0.5px; } /* ═══════════ ABOUT ═══════════ */ .about-grid { grid-template-columns: 1fr; gap: 32px; } .about-image-wrapper { max-width: 320px; max-width: 280px; } .about-highlights { grid-template-columns: repeat(2, 1fr); gap: 8px; } .highlight-item { font-size: 0.82rem; padding: 10px 12px; } .about-content h3 { font-size: 1.25rem; } .about-content p { font-size: 0.9rem; line-height: 2; } .about-faq-row { grid-template-columns: 1fr; gap: 18px; padding: 12px 3px; } .about-inner-row { grid-template-columns: 1fr; gap: 16px; } .about-image-col { order: -1; } .about-image-col .about-image-wrapper { max-width: 250px; margin: 0 auto; } .about-text-col p { font-size: 0.86rem; line-height: 1.9; padding: 0 6px; } .about-highlights-box { grid-template-columns: repeat(2, 1fr); gap: 6px; } .about-highlights-box .highlight-item { font-size: 0.78rem; padding: 8px 10px; white-space: normal; word-break: break-word; } .about-ig-box { margin: 12px auto 0; max-width: 320px; font-size: 0.82rem; padding: 10px 14px; } .about-name-heading span:first-child { font-size: 1.15rem; white-space: normal; font-weight: 900; } /* ═══════════ SERVICES ═══════════ */ .services-grid { grid-template-columns: 1fr; gap: 16px; } .service-card { padding: 24px 18px 20px; } .service-card h3 { font-size: 0.88rem; color: var(--teal); } .service-card p { font-size: 0.8rem; } .service-icon { width: 52px; height: 52px; margin-bottom: 14px; } /* ═══════════ PROJECTS ═══════════ */ .projects-grid { grid-template-columns: 1fr; gap: 24px; } .project-detail-body { padding: 24px 16px; } .project-detail-image { padding: 20px 12px; } .project-detail-header h2 { font-size: 1.2rem; } .project-two-col { grid-template-columns: 1fr !important; gap: 16px !important; } .project-section h3 { font-size: 1.1rem; } .project-section p, .project-section li { font-size: 0.88rem; line-height: 2; } .project-toggle-summary { padding: 14px 12px; font-size: 1.05rem; } .project-tech-heading { font-size: 1.05rem; } .project-read-more { font-size: 0.85rem; } .project-toggle-content p, .project-toggle-content li { font-size: 0.88rem; line-height: 2; color: #1E293B; } .project-toggle-content li { padding-right: 20px; margin-bottom: 8px; } [dir="ltr"] .project-toggle-content li { padding-right: 0; padding-left: 20px; } .project-summary-box { padding: 16px; } .project-summary-box p { font-size: 0.92rem; } /* ═══════════ FAQ ═══════════ */ .faq-item summary { padding: 14px 16px; font-size: 0.9rem; gap: 8px; } .faq-answer { padding: 0 16px 16px; } .faq-answer p { font-size: 0.85rem; line-height: 2; } /* ═══════════ TESTIMONIALS ═══════════ */ .testimonials-grid { grid-template-columns: 1fr; gap: 20px; } .testimonial-card { padding: 22px 18px; } .testimonial-card p { font-size: 0.85rem; } /* ═══════════ ARTICLES ═══════════ */ .articles-grid { grid-template-columns: 1fr; gap: 12px; } /* ═══════════ CONTACT ═══════════ */ .contact-grid { grid-template-columns: 1fr; gap: 16px; } .contact-form { padding: 12px 12px; } .contact-form h3 { font-size: 1.05rem; } .contact-method { padding: 8px 12px; gap: 10px; } .contact-method-icon { width: 36px; height: 36px; border-radius: 12px; font-size: 1.2rem; } .contact-method-text strong { font-size: 0.95rem; } .contact-method-text span { font-size: 0.88rem; } .form-group input, .form-group textarea, .form-group select { padding: 7px 10px; font-size: 0.92rem; } /* ═══════════ FOOTER ═══════════ */ .footer { padding: 28px 16px 16px; } .footer-brand p { font-size: 0.82rem; } .footer-pill { font-size: 0.74rem; padding: 6px 12px; max-width: none; } .visitor-counter { gap: 8px; } .visitor-stat { min-width: 130px; padding: 10px 14px; } .visitor-stat-number { font-size: 1rem; } .visitor-stat-label { font-size: 0.68rem; } /* ═══════════ FLOATING BUTTONS ═══════════ */ .floating-contact { right: 10px; bottom: 18px; gap: 10px; } .floating-contact-btn { width: 46px; height: 46px; font-size: 1.25rem; } .floating-contact-label { opacity: 1 !important; transform: translateX(0) !important; font-size: 0.7rem; padding: 7px 12px; } .back-to-top { bottom: 18px; left: 10px; width: 40px; height: 40px; font-size: 1.1rem; } /* ═══════════ INSTAGRAM CTA ═══════════ */ .ig-cta-card { margin: 0 8px; } .ig-cta-inner { padding: 12px 14px; gap: 10px; } .ig-cta-title { font-size: 0.82rem; } .ig-cta-handle { font-size: 0.75rem; } .ig-cta-icon { width: 36px; height: 36px; min-width: 36px; } .ig-cta-icon svg { width: 18px; height: 18px; } .ig-cta-arrow { font-size: 1rem; } /* ═══════════ iOS BACKGROUND ATTACHMENT FIX ═══════════ */ #contact { background-attachment: scroll !important; padding: 36px 16px !important; } #about-faq{padding:24px 4px!important} } @media (min-width: 769px) and (max-width: 900px) { /* Tablet: single-column hero like mobile */ .hero-top { flex-direction: column; gap: 16px; margin-bottom: 18px; } .hero-logo-inline { height: clamp(56px, 8vw, 90px); width: auto; } .hero-tagline-full { font-size: 1.5rem !important; } .hero-row { gap: 20px; } .hero-content { grid-template-columns: 1fr; } .hero-content > .hero-buttons { order: 3; margin-top: 0; } .hero-content > .hero-quick-contact { order: 4; margin-top: 6px; grid-row: auto; width: 100% !important; max-width: 420px; margin-left: auto; margin-right: auto; } .hero-content > .hero-stats { grid-column: 1; justify-self: auto; } .hero-stats { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 8px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; border-radius: 0; width: auto; height: auto; padding: 0; box-shadow: none; } .hero-stats .stat-number { font-size: 1.5rem; color: var(--teal); text-shadow: none; } .hero-stats .stat-label { font-size: 0.78rem; font-weight: 600; opacity: 1; } } /* === LTR Overrides for English === */ [dir="ltr"] .hero { direction: ltr; text-align: center; } [dir="ltr"] .quick-contact-card, [dir="ltr"] .quick-contact-card h3, [dir="ltr"] .quick-contact-card .qc-subtitle, [dir="ltr"] .quick-contact-card strong { direction: ltr; text-align: left; } [dir="ltr"] .quick-contact-card .qc-select { background-position: right 12px center; } [dir="ltr"] .section-header, [dir="ltr"] .about-grid, [dir="ltr"] .about-content, [dir="ltr"] .certs-grid, [dir="ltr"] .services-grid, [dir="ltr"] .testimonials-grid, [dir="ltr"] .articles-grid, [dir="ltr"] .faq-item, [dir="ltr"] .faq-grid, [dir="ltr"] .projects-grid, [dir="ltr"] .projects-glass, [dir="ltr"] .footer, [dir="ltr"] .project-detail, [dir="ltr"] .project-detail-body, [dir="ltr"] .project-two-col, [dir="ltr"] .visitor-counter, [dir="ltr"] .visitor-stat-text, [dir="ltr"] .article-placeholder { direction: ltr; } [dir="ltr"] .contact-grid, [dir="ltr"] .contact-methods, [dir="ltr"] .contact-form { direction: ltr; } [dir="ltr"] .contact-method-text { text-align: left; } [dir="ltr"] .hero-stats, [dir="ltr"] .hero-bullets, [dir="ltr"] .hero-buttons, [dir="ltr"] .hero-trust-badge { direction: ltr; } [dir="ltr"] .hero-main { text-align: center; } [dir="ltr"] .hero-content p, [dir="ltr"] .hero-content h1 { text-align: center; } [dir="ltr"] .hero-content .hero-quick-contact { text-align: left; } /* ── Performance: content-visibility for below-fold sections ── */ .faq-grid { display: flex; flex-direction: column; gap: 12px; max-width: 800px; margin: 0 auto; } .faq-item { background: rgba(255,255,255,0.9); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: var(--transition); direction: rtl; } .faq-item:hover { box-shadow: var(--shadow-lg); border-color: var(--teal); } .faq-item summary { padding: 18px 24px; cursor: pointer; font-weight: 700; font-size: 1rem; color: var(--navy); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: color 0.2s; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '\25BC'; font-size: 0.75rem; color: var(--teal); transition: transform 0.3s; flex-shrink: 0; } .faq-item[open] summary::after { transform: rotate(180deg); } .faq-item[open] summary { color: var(--teal); } .faq-answer { padding: 0 24px 20px 24px; } .faq-answer p { color: #1E293B; font-size: 0.88rem; line-height: 2.1; } /* ⚠️ v4.0 NAVBAR FIX: navbar CSS moved to navbar.php — v77 styles removed */ /* Nav Glass */ /* Footer Tagline */ .footer-brand-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:nowrap} .footer-brand-top img{height:85px;width:auto;margin:0!important;filter:drop-shadow(0 4px 20px rgba(94,234,212,0.35));flex-shrink:0} .footer-tagline{color:rgba(255,255,255,0.82);font-size:.92rem;font-weight:700;margin:0;line-height:1.4;letter-spacing:-0.2px;text-shadow:0 1px 4px rgba(0,0,0,0.3)} /* Glass Cards */ .projects-glass{display:grid;grid-template-columns:1fr 1fr;gap:20px} .project-glass-card{display:flex;flex-direction:column;background:rgba(255,255,255,0.04);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,0.10);border-radius:20px;padding:28px 30px;text-decoration:none;color:#fff;transition:all .45s cubic-bezier(0.4,0,0.2,1);position:relative;z-index:1;overflow:hidden;cursor:pointer;box-shadow:0 4px 24px rgba(0,0,0,0.15)} .project-glass-card::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:20px;background:linear-gradient(135deg,rgba(94,234,212,0.06) 0%,rgba(94,234,212,0.02) 30%,transparent 70%);z-index:0;transition:opacity .45s ease;opacity:0.6} .project-glass-card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 0%,rgba(94,234,212,0.12) 0%,transparent 65%);opacity:0;transition:opacity .45s ease;z-index:0} .project-glass-card:hover{background:rgba(255,255,255,0.08);border-color:rgba(94,234,212,0.35);transform:translateY(-6px);box-shadow:0 24px 56px rgba(0,0,0,0.45),0 0 0 1px rgba(94,234,212,0.15)} .project-glass-card:hover::before{opacity:1} .project-glass-card:hover::after{opacity:1} .project-glass-badge{display:inline-block;background:rgba(230,194,0,0.28);color:#E6C200;padding:5px 14px;border-radius:50px;font-weight:700;font-size:calc(.82rem + 3px);margin-bottom:12px;border:1px solid rgba(230,194,0,0.45);align-self:flex-start;letter-spacing:.5px;position:relative;z-index:1} .project-glass-card h3{font-size:calc(1.18rem + 3px);font-weight:700;color:#0A1628;margin-bottom:12px;line-height:1.65;position:relative;z-index:1} .project-glass-conclusion{font-size:.92rem;color:#000;font-weight:600;line-height:1.85;margin-bottom:16px;flex:1;font-weight:500;position:relative;z-index:1} .project-glass-link{display:inline-flex;align-items:center;gap:8px;color:#5EEAD4;font-weight:700;font-size:.92rem;transition:all .3s ease;position:relative;z-index:1} .project-glass-card:hover .project-glass-link{gap:14px;color:#fff;text-shadow:0 0 12px rgba(94,234,212,0.4)} /* Capsule */ @keyframes pf{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.03)}} @keyframes pg{0%,100%{box-shadow:0 1px 3px rgba(0,0,0,0.05)}50%{box-shadow:0 2px 10px rgba(0,212,170,0.15)}} [dir="ltr"] .partners-capsule-about, [dir="ltr"] .partners-capsule-inner-about { direction: ltr; } .partners-capsule-about{margin-top:12px;background:rgba(255,255,255,0.35);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.28);border-radius:18px;padding:8px 12px;box-shadow:0 2px 16px rgba(10,22,40,0.06);transition:all .35s ease} .partners-capsule-about:hover{background:rgba(255,255,255,0.55);border-color:rgba(0,212,170,0.3);box-shadow:0 4px 24px rgba(0,0,0,0.1)} .partners-capsule-inner-about{display:flex;flex-wrap:wrap;align-items:center;gap:6px;justify-content:center} .partners-capsule-inner-about a{display:inline-flex;text-decoration:none;line-height:0} .partners-capsule-inner-about img{height:44px;width:auto;padding:3px 8px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.08);border:1px solid rgba(0,0,0,0.05);filter:none!important;opacity:1!important;object-fit:contain;transition:all .35s ease;animation:pf 3s ease-in-out infinite,pg 3s ease-in-out infinite} .partners-capsule-inner-about a:nth-child(1) img{animation-delay:0s} .partners-capsule-inner-about a:nth-child(2) img{animation-delay:.45s} .partners-capsule-inner-about a:nth-child(3) img{animation-delay:.9s} .partners-capsule-inner-about a:nth-child(4) img{animation-delay:1.35s} .partners-capsule-inner-about a:nth-child(5) img{animation-delay:1.8s} .partners-capsule-inner-about a:nth-child(6) img{animation-delay:2.25s} .partners-capsule-inner-about a:nth-child(7) img{animation-delay:2.7s} .partners-capsule-inner-about a:nth-child(8) img{animation-delay:3.15s} .partners-capsule-inner-about a:nth-child(9) img{animation-delay:3.6s} .partners-capsule-inner-about a:hover img{animation:none;transform:translateY(-4px) scale(1.12);box-shadow:0 12px 28px rgba(0,0,0,0.16),0 0 0 4px rgba(0,212,170,0.25);border-color:rgba(0,212,170,0.5)} .partners-capsule-inner-about a:nth-child(odd):hover img{transform:translateY(-4px) scale(1.12) rotate(-5deg)} .partners-capsule-inner-about a:nth-child(even):hover img{transform:translateY(-4px) scale(1.12) rotate(5deg)} /* Portfolio */ .project-detail{color:#000;background:rgba(255,255,255,0.92);border:1px solid rgba(0,0,0,0.06);border-radius:18px;overflow:hidden;margin-bottom:24px;transition:all .35s ease;box-shadow:0 4px 24px rgba(0,0,0,0.08)} .project-detail:hover{border-color:rgba(13,115,119,0.3);box-shadow:0 8px 32px rgba(0,0,0,0.12)} .project-detail-body{padding:24px 28px} .project-detail-header{margin-bottom:14px;text-align:center} .project-number{display:inline-block;background:rgba(13,115,119,0.1);color:#0D7377;padding:5px 18px;border-radius:50px;font-weight:700;font-size:.82rem;margin-bottom:10px;border:1px solid rgba(13,115,119,0.15);letter-spacing:1px} .project-detail h2{font-size:1.25rem;font-weight:800;color:#000;line-height:1.6} .project-detail-image{margin-bottom:20px;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.15)} .project-detail-image img{width:100%;height:auto;display:block;transition:transform .5s ease} .project-detail:hover .project-detail-image img{transform:scale(1.02)} .project-summary-box{background:rgba(13,115,119,0.06);border:1px solid rgba(13,115,119,0.12);border-radius:12px;padding:18px 20px;margin-bottom:16px} .project-summary-box h3{color:#000;font-size:1.05rem;margin-bottom:8px;font-weight:800} .project-summary-box p{color:#000;line-height:1.75;font-size:.92rem;font-weight:600} .project-section{margin-bottom:14px} .project-section h3{color:#000;font-size:1rem;font-weight:800;margin-bottom:8px} .project-section p,.project-section li{color:#000;line-height:1.8;font-size:.88rem;font-weight:600} .project-section ul{padding-right:18px} .project-section li{margin-bottom:6px} .project-tech-heading{display:flex;align-items:center;gap:10px;margin-bottom:6px} .section-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0} .project-read-more{display:inline-block;color:#0D7377;cursor:pointer;font-weight:700;font-size:.85rem;margin-bottom:8px;transition:all .25s ease;user-select:none} .project-read-more:hover{color:#000} .project-toggle-content{max-height:0;overflow:hidden;transition:max-height .6s cubic-bezier(0.4,0,0.2,1)} .project-toggle-content.open{max-height:3000px} .project-tech-stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .tech-pill{padding:6px 14px;border-radius:50px;font-size:.75rem;font-weight:600;letter-spacing:.3px} .tech-pill-1{background:rgba(13,115,119,0.10);color:#0D7377;border:1px solid rgba(13,115,119,0.22)} .tech-pill-2{background:rgba(13,115,119,0.14);color:#0A1628;border:1px solid rgba(13,115,119,0.28)} .tech-pill-3{background:rgba(13,115,119,0.08);color:#0D7377;border:1px solid rgba(13,115,119,0.18)} .tech-pill-4{background:rgba(230,194,0,0.14);color:#9A7B00;border:1px solid rgba(230,194,0,0.28)} /* Footer */ .footer{background:linear-gradient(180deg,#0D1F3C,#0A1628);padding:40px 24px 20px;color:rgba(255,255,255,0.75)} .footer-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;margin-bottom:24px} .footer-brand p{font-size:.85rem;line-height:1.85;font-weight:500;color:rgba(255,255,255,0.65)} .footer-links strong{color:#fff;font-weight:700;margin-bottom:12px;display:block;font-size:.88rem} .footer-links ul{list-style:none;display:flex;flex-direction:column;gap:8px} .footer-links a{color:rgba(255,255,255,0.7);text-decoration:none;font-size:.82rem;transition:all .25s ease} .footer-links a:hover{color:#5EEAD4;padding-left:4px} .footer-bottom{max-width:1100px;margin:0 auto;padding-top:16px;border-top:1px solid rgba(255,255,255,0.08);text-align:center;font-size:.78rem;color:rgba(255,255,255,0.45)} .section-header{margin-bottom:48px} .section-header .section-tag{font-size:.85rem;letter-spacing:.6px;font-weight:700} .section-header h2{font-weight:800;letter-spacing:-.1px;line-height:1.35} .hero-content h1{font-size:clamp(1rem,3.5vw,2.2rem);line-height:1.35;font-weight:900} .hero .hero-content h1{font-size:clamp(0.62rem,3.8vw,1.6rem)!important;letter-spacing:-0.5px;color:#FFB040;max-width:100%} /* Hero capsule — dark blue glass for readability */ .hero .hero-content h1.hero-capsule{display:inline-block;white-space:nowrap;background:rgba(10,22,40,0.82);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(94,234,212,0.15);border-radius:12px;padding:5px 12px;color:#000!important;font-weight:900!important;box-shadow:0 6px 24px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.08)} .hero-tagline-full{font-size:clamp(0.65rem,4vw,1.5rem)!important;max-width:100%} /* Desktop — hero h1 capsule: no box, dark blue, turquoise glow */ @media (min-width: 769px) { .hero .hero-content h1.hero-capsule{display:inline-block;white-space:nowrap;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:none;border-radius:0;padding:0;color:#0A1628!important;font-weight:900!important;box-shadow:none;text-shadow:0 0 30px rgba(64,224,208,0.3),0 0 60px rgba(64,224,208,0.12);animation:heroGlow 4s ease-in-out infinite alternate} @keyframes heroGlow{0%{text-shadow:0 0 20px rgba(64,224,208,0.15),0 0 40px rgba(64,224,208,0.04)}100%{text-shadow:0 0 40px rgba(64,224,208,0.45),0 0 80px rgba(64,224,208,0.2)}} } .section-header{margin-bottom:36px} .section-header h2{font-size:clamp(1.35rem,5.5vw,1.75rem)} .projects-glass{grid-template-columns:1fr;gap:20px} .project-glass-card{padding:22px 18px;border-radius:18px;background:linear-gradient(135deg,rgba(15,145,140,0.28),rgba(8,85,105,0.22));backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid rgba(94,234,212,0.22);box-shadow:0 8px 32px rgba(0,0,0,0.25),inset 0 1px 0 rgba(94,234,212,0.12)} .project-glass-card h3{font-size:1.08rem;line-height:1.65;color:#0A1628;text-shadow:0 1px 3px rgba(0,0,0,0.3)} .project-glass-conclusion{font-size:.87rem;line-height:1.8;color:rgba(255,255,255,0.88);text-shadow:0 1px 2px rgba(0,0,0,0.2)} .project-glass-badge{background:rgba(230,194,0,0.32);color:#E6C200;border:1px solid rgba(230,194,0,0.45)} .project-glass-link{color:#fff;text-shadow:0 0 6px rgba(94,234,212,0.4)} .footer{padding:18px 10px 80px} .footer-grid{grid-template-columns:1fr;gap:10px;margin-bottom:16px} .footer-brand-top{display:block;width:100%} .footer-brand-top img{display:none !important} .footer-tagline{font-size:clamp(0.56rem,3vw,0.7rem);color:#FFF;font-weight:800;text-align:center;letter-spacing:-0.3px;margin:8px auto;display:inline-block;padding:8px 14px;border-radius:50px;background:linear-gradient(135deg,rgba(255,180,0,0.18),rgba(255,120,0,0.1));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1.5px solid rgba(255,180,0,0.45);box-shadow:0 0 18px rgba(255,160,0,0.45),0 0 40px rgba(255,130,0,0.25),inset 0 1px 0 rgba(255,255,255,0.15);text-shadow:0 0 10px rgba(255,200,0,0.9),0 0 25px rgba(255,150,0,0.5)} .footer-brand{overflow:visible} .footer-brand p{font-size:0.7rem;line-height:1.4;margin-bottom:2px} .footer-links:first-of-type strong{display:none} .footer-links strong{font-size:0.72rem;margin-bottom:4px} .footer-links:first-of-type ul{display:grid;grid-template-columns:repeat(2,1fr);gap:6px} .footer-links ul{gap:3px} .footer-links:first-of-type a{display:block;text-align:center;padding:9px 6px;border-radius:14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);font-size:0.7rem;text-decoration:none;color:rgba(255,255,255,0.8);font-weight:600;letter-spacing:-0.2px} .footer-links:first-of-type a:active{background:rgba(94,234,212,0.15);border-color:rgba(94,234,212,0.3)} .footer-links:first-of-type li:last-child{grid-column:1/-1}.footer-links:first-of-type a.faq-capsule{background:linear-gradient(135deg,rgba(94,234,212,0.18),rgba(20,184,166,0.08))!important;border:1.5px solid rgba(94,234,212,0.35)!important;box-shadow:0 0 14px rgba(94,234,212,0.2),inset 0 1px 0 rgba(255,255,255,0.1)!important;font-weight:800!important;font-size:0.7rem!important;letter-spacing:0!important;color:rgba(94,234,212,0.95)!important;text-shadow:0 0 8px rgba(94,234,212,0.4)!important;} .footer-links a{font-size:0.72rem} .footer-links:last-of-type strong{display:none} .footer-links:last-of-type ul{display:grid;grid-template-columns:1fr 1fr;gap:5px} .footer-links:last-of-type li{display:flex;align-items:center;justify-content:center;padding:8px 4px;border-radius:14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);min-height:36px} .footer-links:last-of-type li:first-child{grid-column:1/-1;background:rgba(230,194,0,0.1);border-color:rgba(230,194,0,0.2)} .footer-links:last-of-type a{font-size:0.72rem;color:rgba(255,255,255,0.8);font-weight:600;text-decoration:none;letter-spacing:-0.2px} .footer-links:last-of-type li:active{background:rgba(94,234,212,0.15);border-color:rgba(94,234,212,0.3)} .visitor-counter{padding-top:12px;margin-bottom:12px;gap:5px} .visitor-stat{padding:7px 12px;gap:6px;min-width:auto} .visitor-stat-icon{width:26px;height:26px;font-size:0.85rem} .visitor-stat-label{font-size:0.68rem} .visitor-stat-number{font-size:0.85rem} .footer-bottom{padding-top:8px;font-size:0.7rem} .hero{padding-left:6px;padding-right:6px;overflow:clip}.hero-logo-inline{height:clamp(90px,22vw,140px)!important;width:auto!important;max-width:75vw!important} #certifications .section-header h2{font-size:clamp(1.15rem,4.5vw,1.6rem);} [data-i18n="certs_tag"]{color:#5EEAD4!important;text-shadow:0 0 10px rgba(94,234,212,0.4);font-weight:800} [data-i18n="projects_tag"]{color:#FBBF24!important;text-shadow:0 0 10px rgba(251,191,36,0.4);font-weight:800} [data-i18n="testimonials_tag"]{color:#C084FC!important;text-shadow:0 0 10px rgba(192,132,252,0.4);font-weight:800} [data-i18n="about_tag"]{color:#FB7185!important;text-shadow:0 0 8px rgba(251,113,133,0.7),0 0 16px rgba(251,113,133,0.35);font-weight:800} [data-i18n="faq_tag"]{color:#38BDF8!important;text-shadow:0 0 8px rgba(56,189,248,0.7),0 0 16px rgba(56,189,248,0.35);font-weight:800} [data-i18n="contact_tag"]{color:#6EE7B7!important;text-shadow:0 0 8px rgba(110,231,183,0.7),0 0 16px rgba(110,231,183,0.35);font-weight:800} .project-detail-body{padding:20px 16px} .project-detail h2{font-size:1.1rem} .project-summary-box{padding:14px 16px} .project-section p,.project-section li{font-size:.85rem} /* ══════ 🔮 Glass Search Capsule ══════ */ .hero-glass-search { max-width: 620px; margin: 28px auto 0; padding: 0 24px; } .glass-search-inner { position: relative; display: flex; align-items: center; } .glass-search-icon { position: absolute; right: 18px; font-size: 1.1rem; z-index: 2; pointer-events: none; opacity: 0.55; } .glass-search-input { width: 100%; padding: 16px 48px 16px 24px; font-size: 1rem; font-family:'Vazirmatn','IRANSans',Tahoma,Arial,sans-serif; border: 1.5px solid rgba(255,255,255,0.22); border-radius: 60px; outline: none; transition: all .35s ease; background: rgba(255,255,255,0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); text-align: right; direction: rtl; font-family:'Vazirmatn','IRANSans',Tahoma,Arial,sans-serif; font-weight: 500; color: #fff; box-shadow: 0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.1); letter-spacing: 0.01em; } .glass-search-input::placeholder { color: rgba(255,255,255,0.45); } .glass-search-input:focus { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.14); box-shadow: 0 8px 40px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.15), 0 0 0 4px rgba(255,255,255,0.06); color: #fff; } .glass-search-clear { position: absolute; left: 14px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); text-decoration: none; font-size: .85rem; transition: all .25s; } .glass-search-clear:hover { background: rgba(255,255,255,0.25); color: #fff; } @media (max-width: 640px) { .hero-glass-search { max-width: 100%; padding: 0 20px; margin-top: 20px; } .glass-search-input { padding: 14px 44px 14px 20px; font-size: .9rem; } } /* ══════ 🔮 Glass Filter Pills ══════ */ .glass-filter-pills { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; max-width: 600px; margin: 16px auto 0; padding: 0 16px; } .glass-pill { padding: 12px 28px; border-radius: 50px; font-size: 1.05rem; font-weight: 700; font-family:'Vazirmatn','IRANSans',Tahoma,Arial,sans-serif; text-decoration: none; cursor: pointer; transition: all .3s cubic-bezier(0.4,0,0.2,1); border: 1.5px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.13); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: rgba(255,255,255,0.92); letter-spacing: 0.02em; font-family:'Vazirmatn','IRANSans',Tahoma,Arial,sans-serif; } .glass-pill:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.50); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .glass-pill.active { background: rgba(255,255,255,0.45); border-color: rgba(255,255,255,0.70); color: #0A1628; font-weight: 800; box-shadow: 0 4px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.35); transform: scale(1.05); } /* Focus ring — keyboard accessibility */ .glass-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(13,115,119,0.6), 0 0 0 6px rgba(94,234,212,0.25); border-color: rgba(94,234,212,0.7); } /* ══════ Social Share Buttons ══════ */ .share-btn {padding:9px 16px;border-radius:50px;font-size:.8rem;font-weight:600;text-decoration:none;transition:all .3s ease;cursor:pointer;font-family:inherit;border:1px solid;display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .share-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.08)} .share-tg{background:rgba(0,136,204,0.08);color:#0088cc;border-color:rgba(0,136,204,0.2)} .share-tg:hover{background:rgba(0,136,204,0.18);box-shadow:0 4px 16px rgba(0,136,204,0.2)} .share-wa{background:rgba(37,211,102,0.08);color:#25D366;border-color:rgba(37,211,102,0.2)} .share-wa:hover{background:rgba(37,211,102,0.18);box-shadow:0 4px 16px rgba(37,211,102,0.2)} .share-tw{background:rgba(29,161,242,0.08);color:#1DA1F2;border-color:rgba(29,161,242,0.2)} .share-tw:hover{background:rgba(29,161,242,0.18);box-shadow:0 4px 16px rgba(29,161,242,0.2)} .share-li{background:rgba(10,102,194,0.08);color:#0A66C2;border-color:rgba(10,102,194,0.2)} .share-li:hover{background:rgba(10,102,194,0.18);box-shadow:0 4px 16px rgba(10,102,194,0.2)} .share-copy{background:rgba(100,116,139,0.08);color:#64748b;border-color:rgba(100,116,139,0.2)} .share-copy:hover{background:rgba(100,116,139,0.18)} .share-copy.copied{background:rgba(34,197,94,0.15)!important;color:#16a34a!important;border-color:rgba(34,197,94,0.3)!important} /* ══════ Portfolio Project Share ══════ */ .project-share .share-btn{color:#fff !important;border-color:rgba(255,255,255,0.25) !important;background:rgba(255,255,255,0.06) !important} .project-share .share-btn:hover{background:rgba(255,255,255,0.15) !important} /* ══════ Word-like Table Styles ══════ */ article table, .post-content table, .ql-editor table { border-collapse:collapse;width:100%;margin:1.5em 0;font-size:0.92rem; border:1px solid var(--border,#e2e8f0);border-radius:8px;overflow:hidden; } article th, .post-content th, .ql-editor th { background:var(--navy,#0A1628);color:#fff;font-weight:700; padding:10px 14px;text-align:right;font-size:0.85rem; } article td, .post-content td, .ql-editor td { padding:8px 14px;text-align:right;border-bottom:1px solid var(--border,#e2e8f0); vertical-align:top; } article tr:last-child td, .post-content tr:last-child td, .ql-editor tr:last-child td { border-bottom:none; } article tr:nth-child(even) td, .post-content tr:nth-child(even) td, .ql-editor tr:nth-child(even) td { background:rgba(241,245,249,0.5); } article table, .post-content table {display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;} hr {border:none;height:2px;background:linear-gradient(to left,var(--navy,#0A1628),transparent);margin:2em 0;border-radius:1px;} .social-icon-inline{width:18px;height:18px;vertical-align:middle;display:inline-block;flex-shrink:0;margin-left:2px} .social-icon-share{width:18px;height:18px;vertical-align:middle;display:inline-block;flex-shrink:0} .social-icon-sticky{width:20px;height:20px;display:block} .social-icon-auth{width:18px;height:18px;display:block} .social-icon-float{width:56px;height:56px;display:block;margin:auto} .social-icon-contact{width:22px;height:22px;display:block;flex-shrink:0} .social-icon-twitter{filter:brightness(0) invert(1)} .footer-links .social-icon-inline{margin-left:3px;margin-right:0} [dir="ltr"] .footer-links .social-icon-inline{margin-left:0;margin-right:3px} .float-profile-pic{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2px solid rgba(255,255,255,0.25)} .float-wa-svg{width:100%;height:100%;border-radius:50%;display:block} /* ══════ Dark Mode — Shared Elements ══════ */ [data-theme="dark"] body{background:#0A1628} [data-theme="dark"] .footer{background:#060F1E;border-top:1px solid rgba(255,255,255,0.04)} [data-theme="dark"] .footer-links a{color:rgba(255,255,255,0.65)} [data-theme="dark"] .footer-links a:hover{color:#5EEAD4} [data-theme="dark"] .footer-bottom{color:rgba(255,255,255,0.4);border-top-color:rgba(255,255,255,0.06)!important} [data-theme="dark"] .footer-tagline{color:rgba(255,255,255,0.7)} [data-theme="dark"] .footer-brand p{color:rgba(255,255,255,0.55)} [data-theme="dark"] .visitor-counter{border-top-color:rgba(255,255,255,0.06)} [data-theme="dark"] .visitor-stat{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.06)!important} [data-theme="dark"] .visitor-stat-label{color:rgba(255,255,255,0.55)} [data-theme="dark"] .floating-contact-label{background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.9)!important} [data-theme="dark"] .back-to-top{background:#5EEAD4;color:#0A1628!important} [data-theme="dark"] .lang-btn{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.15)!important;color:rgba(255,255,255,0.7)!important} [data-theme="dark"] .lang-btn.active{background:#FBBF24;color:#0A1628!important;border-color:#FBBF24!important} [data-theme="dark"] .post-cta{background:linear-gradient(135deg,rgba(94,234,212,0.06),rgba(94,234,212,0.02));border-color:rgba(94,234,212,0.15)!important} [data-theme="dark"] .cta-btn-outline{color:#5EEAD4;border-color:rgba(94,234,212,0.4)!important} [data-theme="dark"] .cta-btn-outline:hover{background:#5EEAD4;color:#0A1628!important} [data-theme="dark"] .post-nav .btn{background:rgba(94,234,212,0.1);color:#5EEAD4!important} [data-theme="dark"] .post-nav .btn:hover{background:rgba(94,234,212,0.2)} /* ═══ Dark Mode: Hero & Homepage Text Overrides ═══ */ [data-theme="dark"] .hero-tagline-full{color:#F1F5F9} [data-theme="dark"] .hero-tagline-teal{color:#5EEAD4} [data-theme="dark"] .hero-tagline-navy{color:#94A3B8} [data-theme="dark"] .hero h1,[data-theme="dark"] .hero p{color:#CBD5E1} [data-theme="dark"] .hero-bullet-card{background:rgba(15,23,42,0.88);color:#CBD5E1!important;border-color:rgba(94,234,212,0.2)!important} [data-theme="dark"] .hero-bullet-card:hover{background:rgba(30,41,59,0.92);border-color:rgba(94,234,212,0.4)!important} [data-theme="dark"] .hero-trust-badge{background:rgba(15,23,42,0.82);color:#CBD5E1!important;border-color:rgba(94,234,212,0.15)!important} [data-theme="dark"] .btn-outline{background:rgba(255,255,255,0.08);color:#5EEAD4!important;border-color:rgba(94,234,212,0.3)!important} [data-theme="dark"] .quick-contact-card strong{color:#F1F5F9} [data-theme="dark"] .quick-contact-card .qc-subtitle{color:#94A3B8} [data-theme="dark"] .quick-contact-card{background:rgba(15,23,42,0.92);border-color:rgba(255,255,255,0.08)!important} [data-theme="dark"] .quick-contact-card .qc-input{background:rgba(30,41,59,0.6);border-color:rgba(255,255,255,0.12)!important;color:#E2E8F0!important} [data-theme="dark"] .quick-contact-card .qc-input::placeholder{color:#64748B} [data-theme="dark"] .quick-contact-card .qc-select{background:rgba(30,41,59,0.6);border-color:rgba(255,255,255,0.12)!important;color:#E2E8F0!important} [data-theme="dark"] .section-header h2,[data-theme="dark"] .section-header h3,[data-theme="dark"] .section-header p{color:#F1F5F9} [data-theme="dark"] .about-content h3,[data-theme="dark"] .about-name-heading span:first-child{color:#F1F5F9} [data-theme="dark"] .about-content p,[data-theme="dark"] .about-text-col p,[data-theme="dark"] .about-text-content p{color:#0A1628} [data-theme="dark"] .about-name-subtitle{color:#5EEAD4} [data-theme="dark"] .about-bullets li{color:#CBD5E1} [data-theme="dark"] .faq-capsule-title{color:#F1F5F9} [data-theme="dark"] .service-card p,[data-theme="dark"] .service-card h3{color:#CBD5E1} [data-theme="dark"] .blog-header p{color:#94A3B8} [data-theme="dark"] .project-glass-badge{color:#E6C200!important;border-color:rgba(230,194,0,0.45)!important}[data-theme="dark"] .project-glass-card h3{color:#000} [data-theme="dark"] .project-glass-card p{color:#000} [data-theme="dark"] .project-summary-box p{color:#000} [data-theme="dark"] .project-section h3{color:#000} [data-theme="dark"] .project-section p,[data-theme="dark"] .project-section li{color:#000} [data-theme="dark"] .project-toggle-content p{color:#000} [data-theme="dark"] .project-toggle-content li{color:#000} [data-theme="dark"] .testimonial-card p{color:#CBD5E1} [data-theme="dark"] .testimonial-author div strong{color:#F1F5F9} [data-theme="dark"] .contact-method-text strong{color:#F1F5F9} [data-theme="dark"] .contact-method-text span{color:#CBD5E1} [data-theme="dark"] .contact-form h3{color:#F1F5F9} [data-theme="dark"] .form-group label{color:#CBD5E1} [data-theme="dark"] .faq-capsule .aefaq-header,[data-theme="dark"] .faq-capsule .aefaq-question{color:#F1F5F9} [data-theme="dark"] .faq-capsule .aefaq-answer,[data-theme="dark"] .faq-answer p{color:#CBD5E1} [data-theme="dark"] .aefaq-question{color:#F1F5F9} [data-theme="dark"] .aefaq-answer{color:#CBD5E1} [data-theme="dark"] .article-card-body p{color:#CBD5E1} [data-theme="dark"] .tm-text{color:#CBD5E1} [data-theme="dark"] .tm-name{color:#F1F5F9} /* Robot Telegram floating icon */ .float-robot-icon{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2px solid rgba(255,255,255,0.25);transition:all .3s ease} .floating-telegram:hover .float-robot-icon{border-color:#07c;box-shadow:0 0 18px rgba(0,136,204,0.4)} .robot-icon{vertical-align:middle;display:inline-block;flex-shrink:0;border-radius:50%} /* ══════ CLS Prevention ══════ */ .service-card{min-height:280px} .project-glass-card{min-height:200px} img:not([width]){aspect-ratio:attr(width)/attr(height)} [data-theme=dark] .btn-primary{background:var(--turquoise);color:var(--navy);border-color:var(--turquoise);box-shadow:0 4px 20px rgba(64,224,208,.3)} [data-theme=dark] .btn-outline{border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.65)} [data-theme=dark] .btn-outline:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.25);color:#F1F5F9} .trust-stats{max-width:800px;margin:0 auto 20px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:center;gap:32px;flex-wrap:wrap;direction:rtl} .trust-stat{display:flex;align-items:center;gap:12px;padding:10px 16px;background:rgba(255,255,255,.06);border-radius:12px;border:1px solid rgba(255,255,255,.08)} .trust-stat-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:rgba(64,224,208,.12);color:var(--turquoise);flex-shrink:0} .trust-stat-number{display:block;font-size:1.1rem;font-weight:800;color:#fff;line-height:1.2} .trust-stat-label{display:block;font-size:.7rem;color:rgba(255,255,255,.55);font-weight:500;margin-top:2px} .project-metrics-strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;font-size:.72rem;font-weight:700;color:#000;line-height:1.6} [data-theme=dark] .project-metrics-strip{color:#5EEAD4} .brand-badge{display:inline-block;padding:7px 18px;border-radius:50px;font-size:.78rem;font-weight:700;background:rgba(255,255,255,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(13,115,119,.2);color:var(--navy);transition:all .3s ease;letter-spacing:.3px} .brand-badge:hover{background:var(--teal);color:#fff;border-color:var(--teal);transform:translateY(-2px);box-shadow:0 4px 16px rgba(13,115,119,.25)} [data-theme=dark] .brand-badge{background:rgba(30,41,59,.8);border-color:rgba(94,234,212,.15);color:#CBD5E1} [data-theme=dark] .brand-badge:hover{background:var(--turquoise);color:var(--navy);border-color:var(--turquoise)} /* ═══════════════════════════════════════════════════════════ JUSTIFY TEXT — تمام متون محتوایی و روایی سایت (RTL) text-justify: inter-word + hyphens: none برای فارسی موبایل (زیر ۴۸۰px): text-align: right (جلوگیری از کشیدگی کلمات) ═══════════════════════════════════════════════════════════ */ /* ── پست‌ها و مقالات (single post) ── */ .post-content, .post-content p, .post-content li, .post-content blockquote, .post-content h2, .post-content h3 { text-align: justify; direction: rtl; text-justify: inter-word; hyphens: none; } /* ── جزئیات نمونه‌کارها (portfolio detail) ── */ .project-detail-body, .project-detail-body p, .project-detail-body li, .project-summary-box p, .project-section p, .project-section li, .project-toggle-content p, .project-toggle-content li { text-align: justify; direction: rtl; text-justify: inter-word; hyphens: none; } /* ── بخش درباره ما (about) ── */ .about-text-col p, .about-text-col li, .about-highlights-box p, .about-highlights-box li { text-align: justify; direction: rtl; text-justify: inter-word; hyphens: none; } /* ── FAQ / سوالات متداول ── */ .aefaq-body, .aefaq-answer, .aefaq-body p, .aefaq-body li { text-align: justify; direction: rtl; text-justify: inter-word; hyphens: none; } /* ── توضیحات بخش‌ها (section descriptions) ── */ .section-header p { text-align: justify; direction: rtl; text-justify: inter-word; hyphens: none; } /* ── کارت‌های خدمات (service cards) ── */ .service-card p, .service-card li { text-align: justify; direction: rtl; text-justify: inter-word; hyphens: none; } /* ── فوتر ── */ .footer-brand p, .footer-grid p, .footer-grid li, .footer-bottom p { text-align: justify; direction: rtl; text-justify: inter-word; hyphens: none; } /* ══════ Mobile Fallback (< 480px) ══════ */ /* روی صفحه‌های خیلی باریک، justify فاصله‌های نامتعارف بین کلمات ایجاد می‌کند. در این حالت به text-align: right برمی‌گردیم. */ @media (max-width: 480px) { .post-content, .post-content p, .post-content li, .post-content blockquote, .post-content h2, .post-content h3, .project-detail-body, .project-detail-body p, .project-detail-body li, .project-summary-box p, .project-section p, .project-section li, .project-toggle-content p, .project-toggle-content li, .about-text-col p, .about-text-col li, .about-highlights-box p, .about-highlights-box li, .aefaq-body, .aefaq-answer, .aefaq-body p, .aefaq-body li, .section-header p, .service-card p, .service-card li, .footer-brand p, .footer-grid p, .footer-grid li, .footer-bottom p { text-align: right; } } /* ══════ Accessibility: Keyboard Focus ══════ */ :focus-visible{outline:2px solid var(--za-accent,#0D7377);outline-offset:2px;border-radius:4px} [data-theme=dark] :focus-visible{outline-color:var(--za-accent,#5EEAD4)} /* Respect prefers-reduced-motion */ @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} /* Screen reader only */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}