/* QIWAI color palette */ :root { --q-primary: #0d6efd; --q-secondary: #6f42c1; --q-accent: #0dcaf0; --q-success: #198754; --q-warning: #ffc107; --q-danger: #dc3545; --q-dark: #0b1b35; --q-light: #f8f9fa; --q-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --q-gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --q-gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); --q-gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); } html, body { height: 100%; } body { font-feature-settings: "rlig" 1, "calt" 1; } /* Improve section spacing on small screens */ section { scroll-margin-top: 74px; } #home { scroll-margin-top: 0; } /* Hero image rounding consistency */ img.rounded { border-radius: .5rem !important; } /* Language toggle states */ #lang-en[aria-pressed="true"], #lang-ar[aria-pressed="true"] { border-color: var(--q-primary); } /* RTL helpers when */ [dir="rtl"] { direction: rtl; } /* Swap margin utilities used in headings with emojis */ [dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; } [dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: .5rem !important; } /* Align navbar toggler icon better in RTL */ [dir="rtl"] .navbar-toggler { border-left: 1px solid rgba(0,0,0,.1); border-right: none; } /* Cards list spacing */ .card ul { padding-left: 1.1rem; } [dir="rtl"] .card ul { padding-left: 0; padding-right: 1.1rem; } /* Footer layout nuance */ footer .small { color: #6c757d; } /* Typography & global polish */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&family=Inter:wght@300;400;600;700&display=swap'); html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; color: #212529; line-height: 1.7; } html[lang="ar"] body { font-family: 'Cairo', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif; } /* Logo styling */ .navbar-brand { display: flex; align-items: center; gap: 0.5rem; padding: 0; transition: transform .3s ease; } .navbar-brand:hover { transform: scale(1.02); } /* Logo image */ .navbar-logo { height: 45px; width: auto; max-width: 45px; object-fit: contain; transition: transform .3s ease; border-radius: 8px; } .offcanvas-logo { height: 40px; width: auto; max-width: 40px; object-fit: contain; border-radius: 6px; } .offcanvas-title { display: flex; align-items: center; gap: 0.5rem; } /* Logo text */ .logo-text-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1; } .logo-text { font-size: 1.75rem; font-weight: 800; letter-spacing: 1px; background: var(--q-gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .logo-accent { font-weight: 700; } .logo-tagline { font-size: 0.65rem; font-weight: 600; color: var(--q-primary); letter-spacing: 1.5px; text-transform: uppercase; margin-top: -2px; opacity: 0.85; } html.scrolled .logo-tagline { opacity: 0.7; } .offcanvas-title .logo-text { background: linear-gradient(135deg, #667eea 0%, #0dcaf0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .offcanvas-title { display: flex; align-items: center; gap: 0.5rem; } /* Navbar: transparent over hero, solid on scroll */ header.navbar { background: transparent !important; border-bottom: none !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } header.navbar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } html.scrolled header.navbar { background: rgba(255,255,255,.95) !important; border-bottom: 1px solid rgba(0,0,0,.08) !important; box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,0.1); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } html.scrolled header.navbar::before { opacity: 1; } header.navbar .nav-link { color: rgba(11,27,53,.8); } html:not(.scrolled) header.navbar .nav-link { color: #0b1b35; } header.navbar .nav-link.active { color: #667eea; font-weight: 700; } header.navbar .nav-link:hover { color: #667eea; } header.navbar { will-change: transform; } html.scrolling-down header.navbar { transform: translateY(-110%); } html.scrolling-up header.navbar { transform: translateY(0); } /* Mobile navbar toggler improvements */ .navbar-toggler { border: 2px solid rgba(11,27,53,.2); border-radius: 8px; padding: 0.5rem; transition: all 0.3s ease; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); } html:not(.scrolled) .navbar-toggler { background: rgba(255,255,255,0.95); border-color: rgba(11,27,53,.3); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .navbar-toggler:hover { background: rgba(255,255,255,1); border-color: var(--q-primary); transform: scale(1.05); box-shadow: 0 4px 12px rgba(102,126,234,0.2); } .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(102,126,234,0.25); border-color: var(--q-primary); } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2811, 27, 53, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); width: 1.5em; height: 1.5em; transition: transform 0.3s ease; } .navbar-toggler:hover .navbar-toggler-icon { transform: scale(1.1); } /* Desktop navbar underline indicator */ #desktopNav { gap: .5rem; } #desktopNav .nav-link { position: relative; padding: .875rem 1.25rem; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.3px; border-radius: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #desktopNav .nav-link:hover { background: rgba(102,126,234,0.08); transform: translateY(-1px); } .nav-ink { position: absolute; bottom: 4px; height: 2px; width: 0; background: var(--q-gradient-1); border-radius: 2px; transition: transform .25s ease, width .25s ease, left .25s ease, right .25s ease; } [dir="rtl"] .nav-ink { right: 0; left: auto; } /* Offcanvas polish */ .offcanvas { box-shadow: 0 25px 50px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,0.1); background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%); color: #1e293b; --bs-offcanvas-width: min(85vw, 380px); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1055; position: fixed; top: 0; right: 0; height: 100vh; transform: translateX(100%); visibility: hidden; border-left: 1px solid rgba(0,0,0,0.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .offcanvas.show, .offcanvas.showing { transform: translateX(0); visibility: visible; } /* Offcanvas backdrop */ .offcanvas-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); z-index: 1050; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .offcanvas-backdrop.show { opacity: 1; visibility: visible; } .offcanvas-header { border-bottom: 1px solid rgba(0,0,0,.06); padding: 2rem 1.5rem 1.5rem; background: linear-gradient(135deg, rgba(102,126,234,.02), rgba(13,202,240,.02)); position: relative; overflow: hidden; } .offcanvas-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(102,126,234,0.3), transparent); } .offcanvas .btn-close { filter: none; padding: 0.75rem; margin: -0.75rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient(135deg, rgba(0,0,0,0.05), rgba(0,0,0,0.1)); border-radius: 50%; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .offcanvas .btn-close:hover { transform: scale(1.1) rotate(90deg); background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(13,202,240,0.1)); border-color: rgba(102,126,234,0.2); box-shadow: 0 4px 12px rgba(102,126,234,0.2); } [dir="rtl"] .offcanvas .btn-close { margin-left: -0.75rem; margin-right: auto; } .offcanvas-title .logo-text { background: linear-gradient(135deg, #fff 0%, #0dcaf0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .offcanvas-body { padding: 2rem 1.5rem 1.5rem; display: flex; flex-direction: column; justify-content: space-between; min-height: calc(100vh - 140px); position: relative; } .offcanvas-body::before { content: ''; position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent); } .mobile-nav-links { flex-grow: 1; } .mobile-nav-links .nav-item { opacity: 0; transform: translateY(20px); animation: fadeInSlide 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation-delay: calc(var(--i) * 0.1s + 0.4s); margin-bottom: 0.75rem; } .mobile-nav-links .nav-link { padding: 1.5rem 1.25rem; font-weight: 600; font-size: 1.1rem; color: #475569; display: flex; align-items: center; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 16px; position: relative; overflow: hidden; border: 1px solid transparent; background: rgba(255,255,255,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .mobile-nav-links .nav-link::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(102,126,234,0.15), transparent); transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-nav-links .nav-link:hover::before { left: 100%; } .mobile-nav-links .nav-link:hover { color: #667eea; transform: translateX(12px) translateY(-2px); background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(13,202,240,0.08)); border-color: rgba(102,126,234,0.2); box-shadow: 0 8px 25px rgba(102,126,234,0.2), 0 0 0 1px rgba(102,126,234,0.1); } [dir="rtl"] .mobile-nav-links .nav-link:hover { transform: translateX(-12px) translateY(-2px); } .mobile-nav-links .nav-link:active { transform: translateX(6px) scale(0.96); } [dir="rtl"] .mobile-nav-links .nav-link:active { transform: translateX(-6px) scale(0.96); } .mobile-nav-links .nav-link i { color: var(--q-accent); font-size: 1.4rem; width: 2.5rem; text-align: center; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 0.5rem; border-radius: 8px; background: rgba(13,202,240,0.1); } .mobile-nav-links .nav-link:hover i { transform: scale(1.15) rotate(5deg); color: #667eea; background: rgba(102,126,234,0.15); box-shadow: 0 2px 8px rgba(102,126,234,0.2); } [dir="rtl"] .mobile-nav-links .nav-link i { margin-left: 1rem; margin-right: 0; } .offcanvas .btn-group { margin-top: 2rem; padding: 1.5rem; border-top: 1px solid rgba(0,0,0,0.06); background: rgba(255,255,255,0.3); border-radius: 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(0,0,0,0.05); } .offcanvas .btn-group .btn { min-width: 48px; padding: 0.875rem 1.75rem; font-weight: 600; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 12px; border: 1px solid rgba(0,0,0,0.1); background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .offcanvas .btn-group .btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 6px 20px rgba(102,126,234,0.25); border-color: rgba(102,126,234,0.3); background: rgba(255,255,255,0.95); } @keyframes fadeInSlide { to { opacity: 1; transform: translateY(0); } } /* Language toggle refinement */ .btn-group .btn { line-height: 1.2; font-weight: 600; min-width: 42px; transition: all .2s ease; } .btn-group .btn[aria-pressed="true"] { z-index: 1; background: var(--q-gradient-1) !important; border-color: transparent !important; color: white !important; } .btn-group .btn:not([aria-pressed="true"]):hover { background: rgba(102,126,234,.1); border-color: #667eea; color: #667eea; } /* Hero section with full-width slideshow */ .hero-fullwidth { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; } .hero-content { position: relative; z-index: 5; width: 100%; padding: 8rem 0 6rem; color: white; } .hero-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(0,0,0,0.1), rgba(11,27,53,0.1)); opacity: 0.3; pointer-events: none; } .hero-content h1 { text-shadow: 0 8px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2); color: white; letter-spacing: -0.5px; position: relative; z-index: 2; } .hero-content .lead { text-shadow: 0 4px 16px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.2); color: rgba(255,255,255,.95); font-size: clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem); position: relative; z-index: 2; } .hero-content .btn-outline-light { border-width: 2px; font-weight: 600; } .hero-content .btn-outline-light:hover { background: white; color: var(--q-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,255,255,.3); } /* Professional Slideshow - Full Width */ .slideshow-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transform: scale(1.1); transition: opacity 1s ease-in-out, transform 1s ease-in-out; z-index: 1; } .slide.active { position: relative; opacity: 1; transform: scale(1); z-index: 2; } .slide img { width: 100%; height: 100%; min-height: 100vh; object-fit: cover; display: block; } .slide-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,.5), rgba(11,27,53,.5)); z-index: 1; } /* Slideshow Controls */ .slideshow-controls { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 2rem; z-index: 10; opacity: 0; transition: opacity .3s ease; } .hero-fullwidth:hover .slideshow-controls { opacity: 1; } .slide-btn { background: rgba(255,255,255,.9); border: none; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .3s ease; box-shadow: 0 4px 12px rgba(0,0,0,.15); color: var(--q-dark); font-size: 1.25rem; } .slide-btn:hover { background: white; transform: scale(1.1); box-shadow: 0 6px 20px rgba(102,126,234,.3); color: #667eea; } .slide-btn:active { transform: scale(0.95); } /* Slideshow Dots */ .slideshow-dots { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.75rem; z-index: 10; } .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: all .3s ease; border: 2px solid transparent; } .dot:hover { background: rgba(255,255,255,.8); transform: scale(1.2); } .dot.active { background: white; width: 32px; border-radius: 5px; box-shadow: 0 2px 8px rgba(0,0,0,.3); } /* Responsive */ @media (max-width: 991.98px) { .hero-fullwidth { min-height: 85vh; } .hero-content { padding: 6rem 0 4rem; text-align: center; } .hero-content .d-flex { justify-content: center; flex-direction: column; align-items: center; gap: 1rem; } .hero-content .btn { width: 100%; max-width: 280px; } .hero-content h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.2; } .hero-content .lead { font-size: clamp(1rem, 2.5vw, 1.2rem); max-width: 90%; margin: 0 auto 2rem; } } @media (max-width: 767.98px) { .hero-fullwidth { min-height: 80vh; } .hero-content { padding: 5rem 0 3rem; } .hero-content h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); margin-bottom: 1.5rem; } .hero-content .lead { font-size: clamp(0.95rem, 3vw, 1.1rem); margin-bottom: 2rem; } .hero-content .btn { padding: 0.875rem 1.5rem; font-size: 1rem; } } @media (max-width: 575.98px) { .hero-fullwidth { min-height: 75vh; } .hero-content { padding: 4rem 0 2.5rem; } .hero-content h1 { font-size: clamp(1.4rem, 6vw, 1.8rem); margin-bottom: 1rem; } .hero-content .lead { font-size: clamp(0.9rem, 3.5vw, 1rem); margin-bottom: 1.5rem; } .hero-content .btn { padding: 0.75rem 1.25rem; font-size: 0.95rem; width: 100%; max-width: 250px; } .slide-btn { width: 38px; height: 38px; font-size: 1rem; } .slideshow-controls { padding: 0 1rem; } .slideshow-dots { bottom: 1.5rem; gap: 0.5rem; } .dot { width: 8px; height: 8px; } .dot.active { width: 24px; } } /* Section titles & badges */ .section-title { position: relative; display: inline-flex; align-items: center; gap: .5rem; } .section-title::after { content: ""; display: inline-block; width: 48px; height: 3px; background: var(--q-gradient-1); border-radius: 2px; margin-inline-start: .5rem; } [dir="rtl"] .section-title::after { margin-inline-start: 0; margin-inline-end: .5rem; } .badge { font-weight: 600; letter-spacing: 0.3px; } .display-4 { font-weight: 700; letter-spacing: -0.5px; color: var(--q-dark); font-size: clamp(2.2rem, 1.5143rem + 3.4286vw, 4rem); } .display-6 { font-weight: 700; letter-spacing: -0.5px; color: var(--q-dark); font-size: clamp(2rem, 1.6rem + 2vw, 3rem); } /* Section backgrounds */ #about { background: linear-gradient(135deg, #fff 0%, rgba(102,126,234,.02) 50%, rgba(13,202,240,.02) 100%); position: relative; } #about::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 80%, rgba(102,126,234,0.03) 0%, transparent 50%); pointer-events: none; } #services { background: linear-gradient(135deg, rgba(67,233,123,.02), rgba(56,249,215,.02)); position: relative; } #services::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 80% 20%, rgba(67,233,123,0.03) 0%, transparent 50%); pointer-events: none; } #industries { background: linear-gradient(135deg, #fff 0%, rgba(240,147,251,.02) 100%); position: relative; } #industries::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 50% 50%, rgba(240,147,251,0.03) 0%, transparent 50%); pointer-events: none; } #whyus { background: linear-gradient(135deg, rgba(74,252,254,.02), rgba(0,242,254,.02)); position: relative; } #whyus::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 70%, rgba(74,252,254,0.03) 0%, transparent 50%); pointer-events: none; } #partners { background: #fff; } #contact { background: var(--q-gradient-1) !important; position: relative; overflow: hidden; } #contact::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.1) 0%, transparent 50%); pointer-events: none; } /* Cards */ .card { border: none; box-shadow: 0 8px 32px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,0.02); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: #fff; border-radius: 16px; position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(102,126,234,0.3), transparent); opacity: 0; transition: opacity 0.3s ease; } .card:hover::before { opacity: 1; } .card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(102,126,234,.15), 0 0 0 1px rgba(102,126,234,0.1); } .card .card-title { font-weight: 700; color: var(--q-dark); font-size: 1.15rem; letter-spacing: -0.2px; } .card .card-text { color: #5a6677; line-height: 1.7; font-size: 0.95rem; } .card .card-body { padding: 2rem; position: relative; z-index: 2; } /* Service icons */ .service-icon { font-size: 2.5rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 1rem; border-radius: 12px; background: rgba(102,126,234,0.05); display: inline-block; position: relative; overflow: hidden; } .service-icon::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.6s ease; } .service-icon-pink { color: #f093fb; background: rgba(240,147,251,0.05); } .service-icon-cyan { color: #4facfe; background: rgba(79,172,254,0.05); } .card:hover .service-icon { transform: scale(1.15) rotate(8deg); box-shadow: 0 8px 25px rgba(102,126,234,0.2); } .card:hover .service-icon::before { left: 100%; } /* Card color accents */ #services .col-lg-3:nth-child(1) .card { border-top: 4px solid #667eea; } #services .col-lg-3:nth-child(2) .card { border-top: 4px solid #43e97b; } #services .col-lg-3:nth-child(3) .card { border-top: 4px solid #f093fb; } #services .col-lg-3:nth-child(4) .card { border-top: 4px solid #4facfe; } #services .col-lg-3:nth-child(1) .card:hover { background: linear-gradient(to bottom, rgba(102,126,234,.03), #fff); } #services .col-lg-3:nth-child(2) .card:hover { background: linear-gradient(to bottom, rgba(67,233,123,.03), #fff); } #services .col-lg-3:nth-child(3) .card:hover { background: linear-gradient(to bottom, rgba(240,147,251,.03), #fff); } #services .col-lg-3:nth-child(4) .card:hover { background: linear-gradient(to bottom, rgba(79,172,254,.03), #fff); } /* Buttons */ .btn-primary { background: var(--q-gradient-1); border: none; box-shadow: 0 8px 25px rgba(102,126,234,.3), 0 0 0 1px rgba(255,255,255,0.1); position: relative; overflow: hidden; } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.6s ease; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { background: linear-gradient(135deg, #5a6fd8 0%, #6a3f96 100%); box-shadow: 0 12px 35px rgba(102,126,234,.4), 0 0 0 1px rgba(255,255,255,0.2); transform: translateY(-2px); } .btn { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; font-weight: 600; letter-spacing: 0.3px; } .btn-outline-primary { border-color: var(--q-primary); color: var(--q-primary); border-width: 2px; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .btn-outline-primary:hover { background: var(--q-primary); border-color: var(--q-primary); transform: translateY(-1px); box-shadow: 0 8px 25px rgba(102,126,234,.3); } /* Subtle fade-in on scroll (noscript-safe baseline) */ .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); filter: blur(2px); } .reveal.show { opacity: 1; transform: translateY(0); filter: blur(0); } /* Scroll progress bar */ #scrollProgress { position: fixed; inset: 0 auto auto 0; height: 4px; width: 0%; background: var(--q-gradient-1); z-index: 1100; box-shadow: 0 4px 12px rgba(102,126,234,.4), 0 0 20px rgba(102,126,234,.2); border-radius: 0 2px 2px 0; transition: width 0.1s ease; } /* Better spacing */ section.py-5 { padding-top: 5rem !important; padding-bottom: 5rem !important; } h2, h3, h4, h5 { margin-bottom: 1rem; } p { margin-bottom: 1.25rem; } .lead { font-size: 1.15rem; font-weight: 400; } /* Mobile responsive improvements */ @media (max-width: 991.98px) { section.py-5 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } .container { padding-left: 1rem; padding-right: 1rem; } } @media (max-width: 767.98px) { section.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .display-6 { font-size: clamp(1.5rem, 4vw, 2.2rem); } .card .card-body { padding: 1.5rem; } .card .card-title { font-size: 1.1rem; } } @media (max-width: 575.98px) { section.py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .container { padding-left: 0.75rem; padding-right: 0.75rem; } .display-6 { font-size: clamp(1.3rem, 5vw, 1.8rem); } .card .card-body { padding: 1.25rem; } .card .card-title { font-size: 1rem; } .service-icon { font-size: 2rem; } } /* Industries section color accents */ #industries .border { border: 2px solid rgba(0,0,0,.08) !important; transition: all .3s ease; background: #fff; border-radius: 8px; font-weight: 600; } #industries .border:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); } #industries .col-md-4:nth-child(1) .border { border-left: 4px solid #667eea !important; } #industries .col-md-4:nth-child(2) .border { border-left: 4px solid #43e97b !important; } #industries .col-md-4:nth-child(3) .border { border-left: 4px solid #f093fb !important; } #industries .col-md-4:nth-child(4) .border { border-left: 4px solid #4facfe !important; } #industries .col-md-4:nth-child(5) .border { border-left: 4px solid #ffc107 !important; } #industries .col-md-4:nth-child(6) .border { border-left: 4px solid #f5576c !important; } [dir="rtl"] #industries .border { border-left: 2px solid rgba(0,0,0,.08) !important; } [dir="rtl"] #industries .col-md-4:nth-child(1) .border { border-right: 4px solid #667eea !important; } [dir="rtl"] #industries .col-md-4:nth-child(2) .border { border-right: 4px solid #43e97b !important; } [dir="rtl"] #industries .col-md-4:nth-child(3) .border { border-right: 4px solid #f093fb !important; } [dir="rtl"] #industries .col-md-4:nth-child(4) .border { border-right: 4px solid #4facfe !important; } [dir="rtl"] #industries .col-md-4:nth-child(5) .border { border-right: 4px solid #ffc107 !important; } [dir="rtl"] #industries .col-md-4:nth-child(6) .border { border-right: 4px solid #f5576c !important; } /* Why Us section */ #whyus ul li { position: relative; padding-left: 2rem; } #whyus ul li::before { content: "✓"; position: absolute; left: 0; color: #43e97b; font-weight: 700; font-size: 1.2em; } [dir="rtl"] #whyus ul li { padding-left: 0; padding-right: 2rem; } [dir="rtl"] #whyus ul li::before { left: auto; right: 0; } /* Stats Counter Section */ #stats { background: linear-gradient(135deg, #0b1b35 0%, #1a2744 100%); } .stat-item { padding: 1.5rem; transition: transform .3s ease; } .stat-item:hover { transform: translateY(-5px); } .stat-icon { font-size: 3rem; color: var(--q-accent); display: block; } .stat-number { font-size: 3rem; font-weight: 800; background: var(--q-gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; } .stat-label { font-size: 1rem; color: rgba(255,255,255,.8); margin: 0; font-weight: 600; } @media (max-width: 575.98px) { .stat-item { padding: 1rem 0.5rem; } .stat-icon { font-size: 2.5rem; } .stat-number { font-size: 2.2rem; } .stat-label { font-size: 0.9rem; } } /* Testimonials Section */ .testimonial-card { background: white; padding: 2.5rem; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,0.02); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; } .testimonial-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(102,126,234,0.3), transparent); opacity: 0; transition: opacity 0.3s ease; } .testimonial-card:hover::before { opacity: 1; } .testimonial-card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 20px 60px rgba(102,126,234,.15), 0 0 0 1px rgba(102,126,234,0.1); } .testimonial-stars { color: #ffc107; font-size: 1.1rem; } .testimonial-text { flex-grow: 1; font-style: italic; color: #4a5568; line-height: 1.7; margin-bottom: 1.5rem; } .testimonial-author { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.08); } .author-avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--q-gradient-1); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; box-shadow: 0 8px 25px rgba(102,126,234,.3); border: 3px solid rgba(255,255,255,0.2); transition: all 0.3s ease; } .testimonial-card:hover .author-avatar { transform: scale(1.1); box-shadow: 0 12px 35px rgba(102,126,234,.4); } .author-name { font-weight: 700; color: var(--q-dark); margin-bottom: 0.25rem; } .author-title { font-size: 0.9rem; color: #6c757d; } /* Testimonials responsive */ @media (max-width: 767.98px) { .testimonial-card { padding: 1.5rem; } .testimonial-text { font-size: 0.95rem; margin-bottom: 1.25rem; } .author-avatar { width: 45px; height: 45px; font-size: 1rem; } .author-name { font-size: 0.95rem; } .author-title { font-size: 0.85rem; } } @media (max-width: 575.98px) { .testimonial-card { padding: 1.25rem; } .testimonial-text { font-size: 0.9rem; line-height: 1.6; } .testimonial-author { gap: 0.75rem; } .author-avatar { width: 40px; height: 40px; font-size: 0.9rem; } } /* FAQ Accordion */ .accordion-item { border: none; margin-bottom: 1.5rem; border-radius: 12px !important; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,0.02); transition: all 0.3s ease; } .accordion-item:hover { box-shadow: 0 12px 35px rgba(102,126,234,.12), 0 0 0 1px rgba(102,126,234,0.1); transform: translateY(-2px); } .accordion-button { font-weight: 600; font-size: 1.05rem; padding: 1.5rem 2rem; background: white; color: var(--q-dark); border: none; transition: all 0.3s ease; } .accordion-button:not(.collapsed) { background: linear-gradient(to right, rgba(102,126,234,.08), rgba(118,75,162,.05)); color: #667eea; box-shadow: none; } .accordion-button:focus { box-shadow: none; border: none; } .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23667eea'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .accordion-body { padding: 2rem; color: #4a5568; line-height: 1.7; background: rgba(102,126,234,0.02); } /* FAQ responsive */ @media (max-width: 767.98px) { .accordion-button { font-size: 1rem; padding: 1rem 1.25rem; } .accordion-body { padding: 1.25rem; font-size: 0.95rem; } } @media (max-width: 575.98px) { .accordion-button { font-size: 0.95rem; padding: 0.875rem 1rem; } .accordion-body { padding: 1rem; font-size: 0.9rem; line-height: 1.6; } } /* Enhanced Footer */ .footer-enhanced { background: #0b1b35; color: rgba(255,255,255,.8); } .footer-enhanced .logo-text { font-size: 1.5rem; } .footer-enhanced h5 { color: white; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; } .social-links { display: flex; gap: 0.75rem; margin-top: 1rem; } .social-link { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: all .3s ease; font-size: 1.1rem; } .social-link:hover { background: var(--q-gradient-1); transform: translateY(-3px); color: white; } .footer-links li { margin-bottom: 0.5rem; } .footer-links a { color: rgba(255,255,255,.7); text-decoration: none; transition: color .3s ease, padding-left .3s ease; display: inline-block; } .footer-links a:hover { color: white; padding-left: 5px; } .footer-contact li { margin-bottom: 0.75rem; color: rgba(255,255,255,.7); } .footer-contact i { color: var(--q-accent); } .footer-legal { color: rgba(255,255,255,.6); text-decoration: none; transition: color .3s ease; } .footer-legal:hover { color: white; } /* Footer responsive */ @media (max-width: 767.98px) { .footer-enhanced .logo-text { font-size: 1.3rem; } .footer-enhanced h5 { font-size: 0.9rem; margin-bottom: 1rem; } .social-links { gap: 0.5rem; margin-top: 0.75rem; } .social-link { width: 36px; height: 36px; font-size: 1rem; } .footer-links li { margin-bottom: 0.4rem; } .footer-links a { font-size: 0.9rem; } .footer-contact li { margin-bottom: 0.6rem; font-size: 0.9rem; } } @media (max-width: 575.98px) { .footer-enhanced .logo-text { font-size: 1.2rem; } .footer-enhanced h5 { font-size: 0.85rem; margin-bottom: 0.75rem; } .social-links { gap: 0.4rem; margin-top: 0.5rem; } .social-link { width: 32px; height: 32px; font-size: 0.9rem; } .footer-links a { font-size: 0.85rem; } .footer-contact li { margin-bottom: 0.5rem; font-size: 0.85rem; } .footer-legal { font-size: 0.8rem; } } /* Footer */ footer { background: #fff; } /* Touch interactions and mobile optimizations */ @media (hover: none) and (pointer: coarse) { /* Disable hover effects on touch devices */ .card:hover { transform: none; box-shadow: 0 6px 24px rgba(0,0,0,.06); } .btn:hover { transform: none; } .social-link:hover { transform: none; } .testimonial-card:hover { transform: none; box-shadow: 0 8px 24px rgba(0,0,0,.06); } .mobile-nav-links .nav-link:hover { transform: none; background: rgba(102,126,234,0.08); border-color: rgba(102,126,234,0.15); } .mobile-nav-links .nav-link:hover::before { left: -100%; } .mobile-nav-links .nav-link:active { transform: scale(0.98); background: rgba(102,126,234,0.12); } } /* Improved touch targets for mobile */ @media (max-width: 767.98px) { .btn { min-height: 44px; min-width: 44px; } .navbar-toggler { min-height: 44px; min-width: 44px; } .slide-btn { min-height: 44px; min-width: 44px; } .dot { min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; } .accordion-button { min-height: 48px; } .social-link { min-height: 44px; min-width: 44px; } } /* Smooth scrolling for mobile */ @media (max-width: 767.98px) { html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } } /* Prevent zoom on input focus for iOS */ @media screen and (-webkit-min-device-pixel-ratio: 0) { select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] { font-size: 16px; } }