html, body { overflow-x: hidden; } *{ margin:0; padding:0; box-sizing:border-box; font-family: cursive; } body{ line-height:1.6; color:#222; } img{ max-width:100%; display:block; } .container{ width:90%; max-width:1200px; margin:auto; } /* ================= BUTTONS ================= */ .btn{ display:inline-block; padding:12px 26px; border-radius:30px; text-decoration:none; font-weight:500; transition:.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .btn.primary{ background:#6a35ff; color:#fff; } .btn.light{ background:#fff; color:#6C2791; } .btn.light:hover{ background:#6C2791; color:#fff; border: 2px white solid; } .btn.outline{ border:2px solid #fff; color:#fff; } .btn.outline:hover{ background-color:white; color:#6C2791; } .btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.15); } /* ================= HEADER ================= */ .header{ background: radial-gradient(ellipse 60% 140% at 82% 66%, #362061 0%, #6C2791 100%); padding:0 20px; position:absolute; width:100%; top:0; left:0; z-index:10; } .header-container{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; } .logo{ width:100px; } .nav-list{ list-style:none; display:flex; gap:25px; } .nav-list a{ color:#fff; text-decoration:none; font-weight:500; opacity:.9; } .nav-list a.active, .nav-list a:hover{ opacity:1; } .nav-actions{ display:flex; align-items:center; gap:15px; } .menu-toggle{ display:none; background:none; border:none; cursor:pointer; } .menu-toggle span{ display:block; width:25px; height:3px; background:#fff; margin:5px 0; } /* ================= HERO ================= */ .hero{ width:100%; min-height:600px; background: radial-gradient(ellipse 60% 140% at 82% 66%, #362061 0%, #6C2791 100%); border-bottom-left-radius:80px; border-bottom-right-radius:80px; display:flex; align-items:center; color:#fff; padding:0 20px; } .hero-container{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:50px; } .hero-content h1{ font-size:44px; line-height:1.2; } .hero-content p{ margin:20px 0 30px; opacity:.9; } .hero-buttons{ display:flex; gap:15px; flex-wrap:wrap; } .hero-stats{ display:flex; gap:30px; margin-top:40px; } .stat h3{ font-size:28px; } .stat span{ font-size:14px; opacity:.8; } /* ================= PORTFOLIO ================= */ .portfolio{ padding:40px 0 60px; } /* ===== SECTION HEADER (TITLE + ARROW IMAGE) ===== */ .section-header{ text-align:center; margin-bottom:40px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; } .section-header h1{ font-size:36px; } .section-header img{ margin:0; width:200px; /* حجم مناسب للسهم */ } /* ===== GRID ===== */ .portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:20px; } .portfolio-card{ padding:25px; border-radius:24px; color:#fff; position:relative; overflow:hidden; transition:.3s; } .portfolio-card::before{ content:""; position:absolute; top:-45px; right:-45px; width:140px; height:140px; background:white; border-radius:50%; z-index:1; border-right:4px solid #fff; } .portfolio-card > *{ position:relative; z-index:2; } /* ===== ARROW ON CARD ===== */ .card-arrow{ position:absolute; top:0; right:0; width:90px; height:90px; background:#FFD84D; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:70px; color:#fff; font-weight:700; cursor:pointer; z-index:10; box-shadow:0 6px 14px rgba(0,0,0,0.25); transition:.3s ease; } .portfolio-card:hover .card-arrow{ transform:scale(1.1) rotate(10deg); } .portfolio-card:hover{ transform:translateY(-6px); } .portfolio-card.pink{background:#ff4d8d} .portfolio-card.red{background:#ff4d4d} .portfolio-card.purple{background:#6a35ff} .card-info span{ font-size:13px; opacity:.8; } .card-info h3{ margin-top:6px; font-size:22px; } .card-image{ margin-top:20px; } .card-image img{ border-radius:20px; } /* ===== CTA ===== */ .portfolio-cta{ text-align:center; margin-top:40px; } .portfolio-cta .link{ color:#6C2791; text-decoration:none; font-weight:600; } /* ================= WHY US ================= */ .why-us { background: white; padding: 90px 0; } /* ================= RESPONSIVE ================= */ @media(max-width:900px){ .hero-container, .why-container, .footer-container{ grid-template-columns:1fr; text-align:center; } .portfolio-grid{ grid-template-columns:1fr; } } .why-container { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:50px; } .why-content{ display:flex; flex-direction:column; justify-content:center; } .why-content h2{ font-size:50px; margin-bottom:40px; text-align:center; } .why-list{ display:flex; flex-direction:column; gap:20px; } .why-item{ display:flex; gap:18px; align-items:flex-start; } .why-item .number{ font-weight:700; width:35px; height:35px; border:1px solid #6a35ff; border-radius:50%; background-color:#8D60AB; display:flex; align-items:center; justify-content:center; color:white; font-size:20px; flex-shrink:0; box-shadow:0 6px 15px rgba(141,96,171,0.4); } .why-item h4{ margin-bottom:6px; font-size:20px; } .why-item p{ color:#111011; } .why-item h4{ color:#8D60AB; } .why-image img{ width:70%; display:block; border-radius:20px; } /* ================= TESTIMONIALS ================= */ .testimonials { max-width: 1100px; margin: 60px auto; padding: 20px; text-align: center; } .testimonials h2 { margin-bottom: 40px; font-size: 28px; } .cards { display: flex; gap: 25px; justify-content: center; flex-wrap: wrap; } .card { background: #8e5bb7; color: #fff; width: 320px; padding: 25px; border-top-left-radius: 18px; border-top-right-radius: 18px; border-bottom-right-radius: 18px; box-shadow: 0 10px 10px 0 #8e5bb7b9; text-align: left; } .user { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; } .user img { border-radius: 50%; width: 40px; height: 40px; } .user h4 { margin: 0; font-size: 16px; } .card p { font-size: 14px; line-height: 1.6; margin-bottom: 15px; } .stars { color: gold; font-size: 18px; } /* ================= FOOTER ================= */ .footer { background: #f6f6ff; color: black; padding: 70px 0 0; position: relative; box-shadow: 0 -15px 30px rgba(108, 39, 145, 0.4); border-radius: 40px; } .footer-container{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; } .footer-links a{ display:block; color:black; margin:8px 0; text-decoration:none; } .footer-brand .mail { color : black; } .footer-brand p { color :#94A3B8; } .footer-links h4{ color: #94A3B8; } .footer-bottom{ text-align:center; padding:20px 0; margin-top:40px; border-top:1px solid #333; color:#aaa; } .footer-head{ color: #6C2791; } /* ================= RESPONSIVE ================= */ @media(max-width:900px){ .hero-container, .why-container, .footer-container{ grid-template-columns:1fr; text-align:center; } .hero-stats{ justify-content:center; } .portfolio-grid{ grid-template-columns:1fr; } .nav{ display:none; } .menu-toggle{ display:block; } .why-list{ align-items:center; } .why-item{ flex-direction:column; align-items:center; } } /* ================= NEXT LEVEL HERO VISUAL ================= */ .hero-visual { position: relative; display: flex; justify-content: center; align-items: center; perspective: 1200px; } /* Light Aura */ .hero-visual::before { content: ""; position: absolute; width: 420px; height: 420px; background: radial-gradient(circle, rgba(255,77,141,0.45), rgba(106,53,255,0.25), transparent 70%); filter: blur(80px); animation: auraPulse 6s ease-in-out infinite; z-index: 0; } /* Orbiting Ring */ .hero-visual::after { content: ""; position: absolute; width: 480px; height: 480px; border: 2px dashed rgba(255,255,255,0.25); border-radius: 50%; animation: orbitRotate 18s linear infinite; z-index: 0; } .hero-visual img { position: relative; z-index: 2; max-width: 420px; transform-style: preserve-3d; animation: heroBreath 4.5s ease-in-out infinite; filter: drop-shadow(0 50px 70px rgba(0,0,0,0.45)); transition: transform 0.6s cubic-bezier(.23,1,.32,1); } /* Hover = cinematic push */ .hero-visual:hover img { transform: translateZ(60px) rotateX(6deg) rotateY(-6deg) scale(1.08); } /* ================= ANIMATIONS ================= */ @keyframes heroBreath { 0% { transform: translateY(0) scale(1) rotateX(0deg); } 50% { transform: translateY(-22px) scale(1.05) rotateX(3deg); } 100% { transform: translateY(0) scale(1) rotateX(0deg); } } @keyframes auraPulse { 0% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.15); } 100% { opacity: 0.5; transform: scale(1); } } @keyframes orbitRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ===== Floating Animation سريع لكل كارت بشكل مستقل ===== */ @keyframes float1 { 0% { transform: translateY(0px); } 25% { transform: translateY(-15px); } 50% { transform: translateY(0px); } 75% { transform: translateY(10px); } 100% { transform: translateY(0px); } } @keyframes float2 { 0% { transform: translateY(0px); } 25% { transform: translateY(-10px); } 50% { transform: translateY(0px); } 75% { transform: translateY(12px); } 100% { transform: translateY(0px); } } @keyframes float3 { 0% { transform: translateY(0px); } 25% { transform: translateY(-20px); } 50% { transform: translateY(0px); } 75% { transform: translateY(15px); } 100% { transform: translateY(0px); } } /* Assign faster animation لكل كارت مع مدة مختلفة */ .portfolio-grid .portfolio-card:nth-child(1) { animation: float1 3.5s ease-in-out infinite; } .portfolio-grid .portfolio-card:nth-child(2) { animation: float2 3s ease-in-out infinite; } .portfolio-grid .portfolio-card:nth-child(3) { animation: float3 4s ease-in-out infinite; } .portfolio-grid .portfolio-card:nth-child(4) { animation: float2 3.2s ease-in-out infinite; } .portfolio-grid .portfolio-card:nth-child(5) { animation: float3 3.8s ease-in-out infinite; } .portfolio-grid .portfolio-card:nth-child(6) { animation: float1 3.6s ease-in-out infinite; } /* Hover effect يبقى أقوى */ .portfolio-card:hover { transform: translateY(-25px) scale(1.08); box-shadow: 0 25px 50px rgba(0,0,0,0.35); } .portfolio-card:hover .card-arrow{ transform: scale(1.25) rotate(15deg); } /* ================= RESPONSIVE ================= */ @media(max-width:900px){ .nav { display: block; position: absolute; top: 80px; left: 0; width: 100%; background: #4a2491; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; z-index: 1000; } .nav.open { max-height: 400px; padding-bottom: 20px; border-bottom: 2px solid rgba(255,255,255,0.1); } .nav-list { flex-direction: column; align-items: center; padding: 20px 0; gap: 20px; } .menu-toggle { display: block; } .hero-container, .why-container, .footer-container{ grid-template-columns:1fr; text-align:center; } .portfolio-grid{ grid-template-columns:1fr; } } /* ================= FIX MOBILE OVERFLOW ================= */ @media(max-width:900px){ /* تصغير الهيرو */ .hero{ min-height:auto; padding:120px 20px 60px; border-bottom-left-radius:40px; border-bottom-right-radius:40px; } .hero-content h1{ font-size:28px; } /* تصغير الصورة */ .hero-visual img{ max-width:260px; text-align: center; } .hero-visual::before{ width:220px; height:220px; filter: blur(50px); } .hero-visual::after{ width:260px; height:260px; } .portfolio-card:hover{ transform: translateY(-10px) scale(1.02); } .portfolio-card:hover .card-arrow{ transform: scale(1.05); } }


/* ================= MOBILE MENU (CENTERED TEXT) ================= */
@media(max-width:900px){
    
    .nav {
        display: block; 
        position: absolute;
        top: 75px; /* المسافة من فوق تحت الهيدر */
        right: 5%; /* مكان المنيو في اليمين */
        left: auto; 
        
        width: 180px; /* عرض المنيو (ممكن تغيره حسب رغبتك) */
        background: white; 
        
        max-height: 0;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 15px; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        z-index: 1000;
        padding: 0;
    }

    .nav.open {
        max-height: 450px;
        padding: 20px 0; /* بادينج فوق وتحت بس عشان الكلام يتوسطن بالعرض */
        border: 1px solid #eee;
    }

    .nav-list {
        display: flex;
        flex-direction: column;
        align-items: center; /* بيخلي الـ Li في نص الـ Nav */
        justify-content: center;
        gap: 15px;
        list-style: none;
        width: 100%;
        padding: 0;
    }

    .nav-list li {
        width: 100%;
        text-align: center; /* بيخلي النص جوه اللينك في النص */
    }

    .nav-list a {
        color: #362061; 
        font-size: 17px;
        font-weight: 600;
        text-decoration: none;
        display: block;
        padding: 8px 0;
        transition: 0.3s;
    }

    .nav-list a:hover {
        color: #6C2791;
        background-color: #f8f8f8; /* خلفية خفيفة عند الوقوف على اللينك */
    }

    /* زرار الهامبرجر (X) */
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }
}