/* Custom Styles for Nashaa Platform - Optimized Version NOTE: You MUST self-host Cairo fonts (400, 700 woff2) in a '/fonts/' directory relative to your CSS file. Then, adjust the 'src' URLs below to match your actual paths. You should also use 'preload' for these fonts in your HTML . This file is minified and doesn't import Google Fonts directly. Critical CSS needs to be extracted and inlined separately. */ /* Arabic Font Import (Self-hosted) */ @font-face{ font-family:Cairo; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/cairo-v31-arabic-regular.woff2') format('woff2') } @font-face{ font-family:Cairo; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/cairo-v31-arabic-700.woff2') format('woff2') } /* Root Variables */ :root{--primary:#2563eb;--secondary:#7c3aed;--accent:#10b981;--dark:#1e293b;--light:#f8fafc;--gray:#64748b} /* Global Styles */ *{margin:0;padding:0;box-sizing:border-box} body{font-family:'Cairo',sans-serif;direction:rtl;text-align:right;line-height:1.7;color:var(--dark);background-color:var(--light)} html{scroll-behavior:smooth} ::selection{background-color:var(--primary);color:#fff} /* Animations */ @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} /* التصحيح */ @keyframes slideInRight{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}} @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .animate-fadeInUp{animation:fadeInUp .8s ease-out} .animate-fadeIn{animation:fadeIn 1s ease-out} .animate-slideInRight{animation:slideInRight .8s ease-out} .animate-pulse{animation:pulse 2s infinite} .animate-float{animation:float 3s ease-in-out infinite} /* Navbar Styles */ .navbar{backdrop-filter:blur(10px);background-color:rgba(255,255,255,.95);box-shadow:0 2px 10px rgba(0,0,0,.05)} .navbar-scrolled{box-shadow:0 4px 20px rgba(0,0,0,.1)} .nav-link{position:relative;transition:color .3s ease} .nav-link::after{content:'';position:absolute;bottom:-5px;right:0;width:0;height:2px;background-color:var(--primary);transition:width .3s ease} .nav-link:hover::after{width:100%} .mobile-menu{max-height:0;overflow:hidden;transition:max-height .3s ease} .mobile-menu.active{max-height:500px} /* Buttons */ .btn{display:inline-block;padding:12px 30px;border-radius:8px;font-weight:600;text-decoration:none;transition:all .3s ease;cursor:pointer;border:none;outline:none} .btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:0 4px 15px rgba(37,99,235,.3)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,99,235,.4)} .btn-secondary{background-color:#fff;color:var(--primary);border:2px solid var(--primary)} .btn-secondary:hover{background-color:var(--primary);color:#fff} .btn-accent{background-color:var(--accent);color:#fff} .btn-accent:hover{background-color:#059669} /* Cards */ .card{background:#fff;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.08);transition:all .3s ease;overflow:hidden} .card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.15)} .card-hover-effect{position:relative;overflow:hidden} .card-hover-effect::before{content:'';position:absolute;top:-100%;right:-100%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.1),transparent);transition:all .6s ease} .card-hover-effect:hover::before{top:100%;right:100%} /* Service Cards */ .service-card{position:relative;padding:30px;border-radius:16px;background:#fff;transition:all .4s cubic-bezier(.175,.885,.32,1.275)} .service-card::before{content:'';position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:16px;opacity:0;transition:opacity .4s ease;z-index:-1} .service-card:hover::before{opacity:1} .service-card:hover{color:#fff;transform:translateY(-10px) scale(1.02)} .service-card:hover .service-icon{color:#fff!important;transform:scale(1.2) rotate(10deg)} .service-icon{transition:all .4s ease} /* Hero Section */ .hero-gradient{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);position:relative;overflow:hidden} .hero-gradient::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation:float 20s ease-in-out infinite} .hero-title{font-size:3.5rem;font-weight:900;line-height:1.2;background:linear-gradient(135deg,#fff 0%,#f0f9ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} @media (max-width:768px){.hero-title{font-size:2rem}} /* Stats Section */ .stat-number{font-size:3rem;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} /* Portfolio Grid */ .portfolio-item{position:relative;overflow:hidden;border-radius:16px} .portfolio-overlay{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.8) 100%);opacity:0;transition:opacity .4s ease} .portfolio-item:hover .portfolio-overlay{opacity:1} .portfolio-content{position:absolute;bottom:-100%;right:0;width:100%;padding:20px;transition:bottom .4s ease} .portfolio-item:hover .portfolio-content{bottom:0} /* Testimonials */ .testimonial-card{position:relative;padding:30px;background:#fff;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.08)} .testimonial-card::before{content:'"';position:absolute;top:-20px;right:20px;font-size:100px;color:var(--primary);opacity:.1;font-family:Georgia,serif} /* Forms */ .form-input,.form-textarea,.form-select{width:100%;padding:14px 18px;border:2px solid #e2e8f0;border-radius:10px;font-family:'Cairo',sans-serif;font-size:16px;transition:all .3s ease;background-color:#fff} .form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,.1)} .form-label{display:block;margin-bottom:8px;font-weight:600;color:var(--dark)} .form-error{color:#ef4444;font-size:14px;margin-top:5px} /* Loading Spinner */ .spinner{border:3px solid rgba(37,99,235,.1);border-top-color:var(--primary);border-radius:50%;width:40px;height:40px;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* Badge */ .badge{display:inline-block;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px} .badge-primary{background-color:#dbeafe;color:var(--primary)} .badge-success{background-color:#d1fae5;color:#059669} .badge-warning{background-color:#fef3c7;color:#d97706} /* Footer */ footer{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);color:#cbd5e1} .footer-link{color:#cbd5e1;transition:color .3s ease} .footer-link:hover{color:#fff} .social-icon{display:inline-flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:50%;background-color:rgba(255,255,255,.1);color:#fff;transition:all .3s ease} .social-icon:hover{background-color:var(--primary);transform:translateY(-3px)} /* Scroll to Top Button */ .scroll-to-top{position:fixed;bottom:30px;left:30px;width:50px;height:50px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transition:all .3s ease;box-shadow:0 4px 15px rgba(37,99,235,.3);z-index:1000} .scroll-to-top.show{opacity:1;visibility:visible} .scroll-to-top:hover{transform:translateY(-5px);box-shadow:0 6px 20px rgba(37,99,235,.4)} /* Breadcrumb */ .breadcrumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .breadcrumb-item{color:rgba(255,255,255,.8)} .breadcrumb-separator{color:rgba(255,255,255,.5)} /* Line Clamp (Truncate Text) */ .line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* Gradient Text */ .gradient-text{background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} /* Image Hover Effect */ .img-hover-zoom{overflow:hidden} .img-hover-zoom img{transition:transform .5s ease} .img-hover-zoom:hover img{transform:scale(1.1)} /* Glassmorphism Effect */ .glass{background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)} /* Skeleton Loading */ .skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s infinite} @keyframes loading{0%{background-position:200% 0}100%{background-position:-200% 0}} /* Tooltips */ .tooltip{position:relative} .tooltip::after{content:attr(data-tooltip);position:absolute;bottom:100%;right:50%;transform:translateX(50%);padding:8px 12px;background-color:rgba(0,0,0,.9);color:#fff;font-size:12px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s ease;margin-bottom:5px} .tooltip:hover::after{opacity:1} /* Print Styles */ @media print{.no-print{display:none!important}body{background-color:#fff}.card{box-shadow:none;border:1px solid #ddd}} /* Responsive Utilities */ @media (max-width:640px){.text-responsive{font-size:14px}.container-responsive{padding-left:15px;padding-right:15px}} /* Dark Mode Support (Optional) */ @media (prefers-color-scheme:dark){} /* Accessibility */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0} a:focus,button:focus,input:focus,textarea:focus,select:focus{outline:2px solid var(--primary);outline-offset:2px} /* Custom Scrollbar */ ::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-track{background:#f1f1f1} ::-webkit-scrollbar-thumb{background:var(--primary);border-radius:5px} ::-webkit-scrollbar-thumb:hover{background:var(--secondary)} /* Page Transitions */ .page-transition{animation:fadeIn .5s ease-in-out} /* Newsletter Form */ .newsletter-form{display:flex;gap:10px;max-width:500px;margin:0 auto} .newsletter-input{flex:1;padding:12px 20px;border:none;border-radius:50px;font-size:16px} .newsletter-button{padding:12px 30px;background-color:#fff;color:var(--primary);border:none;border-radius:50px;font-weight:600;cursor:pointer;transition:all .3s ease} .newsletter-button:hover{transform:scale(1.05)}