@font-face{ font-family:'Cairo';src:url('cairo.ttf') format('truetype');font-display:swap;font-weight:300 900;}.project-page{ font-family:'Cairo','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;line-height:1.6 !important;color:#333 !important;background:linear-gradient(21deg,#000000 0%,#890000 50%,#000000 100%) !important;min-height:100vh !important;padding:0 !important;margin:0 !important;width:100% !important;overflow-x:hidden !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;}.project-page *{ box-sizing:border-box !important;}.project-page .project-container{ max-width:1200px !important;width:100% !important;margin:0 auto !important;background:rgba(255,255,255,0.05) !important;backdrop-filter:blur(10px) !important;border-radius:20px !important;padding:30px !important;box-shadow:0 15px 35px rgba(0,0,0,0.3) !important;border:1px solid rgba(255,255,255,0.1) !important;position:relative !important;}.project-page .language-switcher{ position:fixed !important;top:20px !important;right:20px !important;z-index:1000 !important;display:flex !important;gap:10px !important;}.project-page .language-switcher .btn{ padding:8px 16px !important;background:rgba(255,255,255,0.1) !important;color:white !important;text-decoration:none !important;border-radius:25px !important;font-size:0.9rem !important;font-weight:500 !important;transition:all 0.3s ease !important;backdrop-filter:blur(10px) !important;border:1px solid rgba(255,255,255,0.2) !important;}.project-page .language-switcher .btn:hover,.project-page .language-switcher .btn.active{ background:rgba(243,156,18,0.8) !important;transform:translateY(-2px) !important;box-shadow:0 5px 15px rgba(243,156,18,0.3) !important;}.project-page .back-btn{ display:inline-flex !important;align-items:center !important;gap:8px !important;padding:12px 20px !important;background:rgba(243,156,18,0.9) !important;color:white !important;text-decoration:none !important;border-radius:25px !important;font-weight:600 !important;transition:all 0.3s ease !important;margin-bottom:30px !important;backdrop-filter:blur(10px) !important;border:1px solid rgba(243,156,18,0.3) !important;}.project-page .back-btn:hover{ background:rgba(243,156,18,1) !important;transform:translateY(-3px) !important;box-shadow:0 8px 20px rgba(243,156,18,0.4) !important;}.project-page .project-layout{ display:flex !important;flex-direction:column !important;gap:30px !important;margin-top:20px !important;width:100% !important;max-width:100% !important;align-items:center !important;}@media (min-width:1024px){ .project-page .project-layout{ display:flex !important;flex-direction:column !important;gap:30px !important;align-items:center !important;}.project-page .project-sidebar{ order:2 !important;position:static !important;width:100% !important;max-width:800px !important;margin:0 auto !important;}}.project-page .project-main-content{ width:100% !important;max-width:100% !important;display:flex !important;flex-direction:column !important;gap:30px !important;order:1 !important;}.project-page .project-article{ width:100% !important;max-width:100% !important;display:flex !important;flex-direction:column !important;gap:30px !important;}.project-page .project-header{ margin-bottom:30px !important;text-align:center !important;width:100% !important;max-width:100% !important;}.project-page .project-title{ font-size:3rem !important;font-weight:700 !important;color:white !important;margin:0 0 20px 0 !important;text-shadow:0 3px 6px rgba(0,0,0,0.5) !important;line-height:1.2 !important;}.project-page .project-image{ width:100% !important;max-width:100% !important;height:500px !important;object-fit:cover !important;border-radius:20px !important;box-shadow:0 25px 50px rgba(0,0,0,0.4) !important;margin:0 auto 30px auto !important;display:block !important;transition:transform 0.3s ease !important;cursor:pointer !important;}.project-page .project-image:hover{ transform:scale(1.02) !important;box-shadow:0 30px 60px rgba(0,0,0,0.5) !important;}.project-page .project-meta{ display:flex !important;flex-wrap:wrap !important;gap:15px !important;margin-bottom:40px !important;padding:30px !important;background:rgba(255,255,255,0.1) !important;border-radius:20px !important;backdrop-filter:blur(15px) !important;border:1px solid rgba(255,255,255,0.2) !important;width:100% !important;max-width:100% !important;box-shadow:0 10px 30px rgba(0,0,0,0.1) !important;justify-content:center !important;align-items:center !important;}.project-page .meta-item{ display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;color:white !important;font-size:0.95rem !important;font-weight:600 !important;padding:15px 20px !important;background:rgba(243,156,18,0.15) !important;border-radius:25px !important;border:1px solid rgba(243,156,18,0.3) !important;transition:all 0.3s ease !important;text-align:center !important;min-height:55px !important;flex:0 0 auto !important;white-space:nowrap !important;min-width:120px !important;position:relative !important;}.project-page .meta-item span{ display:flex !important;align-items:center !important;justify-content:center !important;text-align:center !important;width:100% !important;height:100% !important;}.project-page .meta-item:hover{ background:rgba(243,156,18,0.25) !important;transform:translateY(-3px) !important;box-shadow:0 8px 20px rgba(243,156,18,0.3) !important;border-color:rgba(243,156,18,0.5) !important;}.project-page .meta-item i{ color:#f39c12 !important;font-size:1.3rem !important;min-width:20px !important;text-align:center !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;}.project-page .meta-item strong{ display:flex !important;align-items:center !important;justify-content:center !important;text-align:center !important;flex:1 !important;}.project-page .project-content{ background:rgb(0 0 0 / 32%) !important;color:#ffffff !important;padding:40px !important;border-radius:20px !important;margin-bottom:30px !important;box-shadow:0 15px 30px rgba(0,0,0,0.1) !important;line-height:1.8 !important;width:100% !important;max-width:100% !important;}.project-page .project-content p{ margin-bottom:20px !important;color:#ffffff !important;font-size:1.1rem !important;}.project-page .no-content{ color:#666 !important;font-style:italic !important;text-align:center !important;padding:40px !important;background:rgba(236,240,241,0.5) !important;border-radius:15px !important;}.project-page .project-features{ background:rgb(0 0 0 / 32%) !important;color:#ffffff !important;padding:40px !important;border-radius:20px !important;margin-bottom:30px !important;box-shadow:0 15px 30px rgba(0,0,0,0.1) !important;width:100% !important;max-width:100% !important;}.project-page .features-title{ color:#ffffff !important;font-size:1.8rem !important;font-weight:700 !important;margin-bottom:25px !important;display:flex !important;align-items:center !important;gap:12px !important;text-align:center !important;justify-content:center !important;}.project-page .features-title i{ color:#f39c12 !important;font-size:1.6rem !important;}.project-page .features-content{ display:grid !important;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) !important;gap:20px !important;}.project-page .feature-item{ display:flex !important;align-items:center !important;gap:15px !important;padding:20px !important;background:rgba(52,152,219,0.1) !important;border-radius:15px !important;border-left:4px solid #3498db !important;transition:all 0.3s ease !important;}.project-page .feature-item:hover{ background:rgba(52,152,219,0.15) !important;transform:translateX(5px) !important;box-shadow:0 5px 15px rgba(52,152,219,0.2) !important;}.project-page .feature-item i{ color:#27ae60 !important;font-size:1.3rem !important;}.project-page .project-technologies{ background:rgba(255,255,255,0.95) !important;padding:40px !important;border-radius:20px !important;margin-bottom:30px !important;box-shadow:0 15px 30px rgba(0,0,0,0.1) !important;width:100% !important;max-width:100% !important;}.project-page .technologies-title{ color:#2c3e50 !important;font-size:1.8rem !important;font-weight:700 !important;margin-bottom:25px !important;display:flex !important;align-items:center !important;gap:12px !important;text-align:center !important;justify-content:center !important;}.project-page .technologies-title i{ color:#f39c12 !important;font-size:1.6rem !important;}.project-page .technologies-content{ display:flex !important;flex-wrap:wrap !important;gap:12px !important;justify-content:center !important;}.project-page .tech-tag{ background:linear-gradient(135deg,#f39c12,#e67e22) !important;color:white !important;padding:12px 24px !important;border-radius:25px !important;font-size:1rem !important;font-weight:600 !important;box-shadow:0 4px 8px rgba(243,156,18,0.3) !important;transition:transform 0.3s ease !important;}.project-page .tech-tag:hover{ transform:translateY(-3px) !important;box-shadow:0 6px 12px rgba(243,156,18,0.4) !important;}.project-page .project-requirements{ background:rgb(0 0 0 / 32%) !important;color:#ffffff !important;padding:40px !important;border-radius:20px !important;margin-bottom:30px !important;box-shadow:0 15px 30px rgba(0,0,0,0.1) !important;width:100% !important;max-width:100% !important;}.project-page .requirements-title{ color:#ffffff !important;font-size:1.8rem !important;font-weight:700 !important;margin-bottom:25px !important;display:flex !important;align-items:center !important;gap:12px !important;text-align:center !important;justify-content:center !important;}.project-page .requirements-title i{ color:#f39c12 !important;font-size:1.6rem !important;}.project-page .requirements-content{ background:rgba(231,76,60,0.1) !important;padding:25px !important;border-radius:15px !important;border-left:4px solid #e74c3c !important;line-height:1.8 !important;font-size:1.05rem !important;color:#ffffff !important;}.project-page .project-installation{ background:rgb(0 0 0 / 32%) !important;color:#ffffff !important;padding:40px !important;border-radius:20px !important;margin-bottom:30px !important;box-shadow:0 15px 30px rgba(0,0,0,0.1) !important;width:100% !important;max-width:100% !important;}.project-page .installation-title{ color:#ffffff !important;font-size:1.8rem !important;font-weight:700 !important;margin-bottom:25px !important;display:flex !important;align-items:center !important;gap:12px !important;text-align:center !important;justify-content:center !important;}.project-page .installation-title i{ color:#f39c12 !important;font-size:1.6rem !important;}.project-page .installation-content{ background:rgba(155,89,182,0.1) !important;padding:25px !important;border-radius:15px !important;border-left:4px solid #9b59b6 !important;line-height:1.8 !important;font-size:1.05rem !important;color:#ffffff !important;}.project-page .project-tags{ background:rgb(0 0 0 / 32%) !important;color:#ffffff !important;padding:40px !important;border-radius:20px !important;margin-bottom:30px !important;box-shadow:0 15px 30px rgba(0,0,0,0.1) !important;width:100% !important;max-width:100% !important;}.project-page .tags-title{ color:#ffffff !important;font-size:1.8rem !important;font-weight:700 !important;margin-bottom:25px !important;display:flex !important;align-items:center !important;gap:12px !important;text-align:center !important;justify-content:center !important;}.project-page .tags-title i{ color:#f39c12 !important;font-size:1.6rem !important;}.project-page .tags-content{ display:flex !important;flex-wrap:wrap !important;gap:12px !important;justify-content:center !important;}.project-page .tag-item{ background:rgba(52,152,219,0.2) !important;color:#2980b9 !important;padding:10px 20px !important;border-radius:25px !important;font-size:0.95rem !important;font-weight:500 !important;border:1px solid rgba(52,152,219,0.3) !important;transition:all 0.3s ease !important;}.project-page .tag-item:hover{ background:rgba(52,152,219,0.3) !important;transform:translateY(-2px) !important;box-shadow:0 4px 8px rgba(52,152,219,0.3) !important;}.project-page .project-gallery{ background:rgb(0 0 0 / 32%) !important;color:#ffffff !important;padding:40px !important;border-radius:20px !important;margin-bottom:30px !important;box-shadow:0 15px 30px rgba(0,0,0,0.1) !important;width:100% !important;max-width:100% !important;}.project-page .gallery-title{ color:#ffffff !important;font-size:1.8rem !important;font-weight:700 !important;margin-bottom:25px !important;display:flex !important;align-items:center !important;gap:12px !important;text-align:center !important;justify-content:center !important;}.project-page .gallery-title i{ color:#f39c12 !important;font-size:1.6rem !important;}.project-page .gallery-content{ display:grid !important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important;gap:20px !important;}.project-page .gallery-item{ position:relative !important;border-radius:15px !important;overflow:hidden !important;cursor:pointer !important;transition:all 0.3s ease !important;box-shadow:0 5px 15px rgba(0,0,0,0.1) !important;}.project-page .gallery-item:hover{ transform:scale(1.05) !important;box-shadow:0 10px 25px rgba(0,0,0,0.3) !important;}.project-page .gallery-image{ width:100% !important;height:180px !important;object-fit:cover !important;transition:all 0.3s ease !important;}.project-page .gallery-item:hover .gallery-image{ transform:scale(1.1) !important;}.project-page .project-links-section{ 
    background:rgb(0 0 0 / 32%) !important;
    color:#ffffff !important;
    padding:40px !important;
    border-radius:20px !important;
    margin-bottom:30px !important;
    box-shadow:0 15px 30px rgba(0,0,0,0.1) !important;
    width:100% !important;
    max-width:100% !important;
}

.project-page .links-title{ 
    color:#ffffff !important;
    font-size:1.8rem !important;
    font-weight:700 !important;
    margin-bottom:25px !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    text-align:center !important;
    justify-content:center !important;
}

.project-page .links-title i{ 
    color:#f39c12 !important;
    font-size:1.6rem !important;
}

.project-page .project-links{ 
    display:flex !important;
    flex-wrap:wrap !important;
    gap:20px !important;
    justify-content:center !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
}

.project-page .project-link{ 
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    padding:15px 25px !important;
    background:linear-gradient(135deg,#f39c12,#e67e22) !important;
    color:white !important;
    text-decoration:none !important;
    border-radius:25px !important;
    font-weight:600 !important;
    transition:all 0.3s ease !important;
    box-shadow:0 5px 15px rgba(243,156,18,0.3) !important;
    font-size:1rem !important;
    min-width:150px !important;
    text-align:center !important;
    border:2px solid rgba(255,255,255,0.2) !important;
}

.project-page .project-link:hover{ 
    transform:translateY(-3px) !important;
    box-shadow:0 8px 25px rgba(243,156,18,0.4) !important;
    background:linear-gradient(135deg,#e67e22,#d35400) !important;
    color:white !important;
    text-decoration:none !important;
    border-color:rgba(255,255,255,0.4) !important;
}

.project-page .project-link i{ 
    font-size:1.2rem !important;
    color:white !important;
    transition:all 0.3s ease !important;
}

.project-page .project-link:hover i{ 
    transform:scale(1.1) !important;
}.project-page .project-info-integrated{ background:rgb(0 0 0 / 32%) !important;color:#ffffff !important;padding:40px !important;border-radius:20px !important;margin-bottom:30px !important;box-shadow:0 15px 30px rgba(0,0,0,0.1) !important;width:100% !important;max-width:100% !important;}.project-page .info-title{ color:#ffffff !important;font-size:1.8rem !important;font-weight:700 !important;margin-bottom:25px !important;display:flex !important;align-items:center !important;gap:12px !important;text-align:center !important;justify-content:center !important;}.project-page .info-content{ display:grid !important;gap:20px !important;}.project-page .info-item{ display:flex !important;align-items:center !important;gap:15px !important;padding:20px !important;background:rgba(52,152,219,0.1) !important;border-radius:15px !important;border-left:4px solid #3498db !important;transition:all 0.3s ease !important;}.project-page .info-item:hover{ background:rgba(52,152,219,0.15) !important;transform:translateX(5px) !important;}.project-page .info-item i{ color:#f39c12 !important;font-size:1.2rem !important;}.project-page .info-label{ font-weight:600 !important;color:#ffffff !important;min-width:100px !important;}.project-page .info-value{ color:#ffffff !important;}.project-page .info-link{ color:#3498db !important;text-decoration:none !important;font-weight:500 !important;transition:color 0.3s ease !important;}.project-page .info-link:hover{ color:#2980b9 !important;}.project-page .comments-section{ background:rgb(0 0 0 / 32%) !important;color:#ffffff !important;padding:40px !important;border-radius:20px !important;margin-bottom:30px !important;box-shadow:0 15px 30px rgba(0,0,0,0.1) !important;width:100% !important;max-width:100% !important;}.project-page .comments-header h3{ color:#ffffff !important;font-size:1.8rem !important;font-weight:700 !important;margin-bottom:25px !important;text-align:center !important;}.project-page .comment-form{ background:rgba(52,152,219,0.1) !important;padding:30px !important;border-radius:15px !important;margin-bottom:30px !important;}.project-page .comment-form h4{ color:#ffffff !important;margin-bottom:20px !important;font-size:1.3rem !important;text-align:center !important;}.project-page .row{ display:grid !important;grid-template-columns:1fr 1fr !important;gap:20px !important;margin-bottom:20px !important;}.project-page .form-group{ margin-bottom:20px !important;}.project-page .form-group label{ display:block !important;margin-bottom:8px !important;color:#ffffff !important;font-weight:500 !important;}.project-page .form-group input,.project-page .form-group textarea{ width:100% !important;padding:15px !important;border:2px solid rgba(52,152,219,0.3) !important;border-radius:10px !important;font-size:1rem !important;transition:border-color 0.3s ease !important;background:white !important;font-family:inherit !important;}.project-page .form-group input:focus,.project-page .form-group textarea:focus{ outline:none !important;border-color:#3498db !important;box-shadow:0 0 0 3px rgba(52,152,219,0.1) !important;}.project-page .submit-btn{ background:linear-gradient(135deg,#f39c12,#e67e22) !important;color:white !important;padding:15px 30px !important;border:none !important;border-radius:25px !important;font-weight:600 !important;cursor:pointer !important;transition:all 0.3s ease !important;box-shadow:0 5px 15px rgba(243,156,18,0.3) !important;font-size:1.05rem !important;}.project-page .submit-btn:hover{ transform:translateY(-2px) !important;box-shadow:0 8px 20px rgba(243,156,18,0.4) !important;}.project-page .comment{ background:rgba(255,255,255,0.1) !important;backdrop-filter:blur(10px) !important;padding:25px !important;border-radius:20px !important;margin-bottom:25px !important;border:1px solid rgba(255,255,255,0.2) !important;box-shadow:0 8px 25px rgba(0,0,0,0.1) !important;transition:all 0.3s ease !important;position:relative !important;overflow:hidden !important;}.project-page .comment:hover{ transform:translateY(-5px) !important;box-shadow:0 15px 35px rgba(0,0,0,0.2) !important;border-color:rgba(243,156,18,0.5) !important;background:rgba(255,255,255,0.15) !important;}.project-page .comment::before{ content:'' !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;height:3px !important;background:linear-gradient(90deg,#f39c12,#3498db,#e74c3c) !important;opacity:0 !important;transition:opacity 0.3s ease !important;}.project-page .comment:hover::before{ opacity:1 !important;}.project-page .comment-author{ font-weight:700 !important;color:#ffffff !important;margin-bottom:12px !important;font-size:1.2rem !important;display:flex !important;align-items:center !important;gap:10px !important;text-shadow:0 2px 4px rgba(0,0,0,0.3) !important;}.project-page .comment-author::before{ content:'👤' !important;font-size:1.1rem !important;opacity:0.8 !important;}.project-page .comment-date{ color:rgba(255,255,255,0.7) !important;font-size:0.95rem !important;margin-bottom:15px !important;font-style:italic !important;display:flex !important;align-items:center !important;gap:8px !important;}.project-page .comment-date::before{ content:'🕒' !important;font-size:0.9rem !important;opacity:0.8 !important;}.project-page .comment-content{ color:#ffffff !important;line-height:1.8 !important;font-size:1.1rem !important;background:rgba(255,255,255,0.05) !important;padding:20px !important;border-radius:15px !important;border-left:4px solid #f39c12 !important;margin-top:10px !important;position:relative !important;}.project-page .comment-replies{ margin-top:20px !important;margin-left:30px !important;padding-left:20px !important;border-left:2px solid rgba(243,156,18,0.3) !important;}.project-page .reply-form{ margin-top:20px !important;padding:20px !important;background:rgba(255,255,255,0.05) !important;border-radius:15px !important;border:1px solid rgba(255,255,255,0.1) !important;}.project-page .reply-form .form-group{ margin-bottom:15px !important;}.project-page .reply-form label{ color:#ffffff !important;font-weight:500 !important;margin-bottom:5px !important;display:block !important;}.project-page .reply-form input,.project-page .reply-form textarea{ width:100% !important;padding:12px !important;border:1px solid rgba(255,255,255,0.2) !important;border-radius:8px !important;background:rgba(255,255,255,0.1) !important;color:#ffffff !important;font-size:1rem !important;transition:all 0.3s ease !important;}.project-page .reply-form input:focus,.project-page .reply-form textarea:focus{ outline:none !important;border-color:#f39c12 !important;box-shadow:0 0 0 2px rgba(243,156,18,0.2) !important;background:rgba(255,255,255,0.15) !important;}.project-page .reply-form input::placeholder,.project-page .reply-form textarea::placeholder{ color:rgba(255,255,255,0.6) !important;}.project-page .recaptcha-container{ margin:20px 0 !important;display:flex !important;justify-content:center !important;align-items:center !important;padding:15px !important;background:rgba(255,255,255,0.05) !important;border-radius:10px !important;border:1px solid rgba(255,255,255,0.1) !important;}.project-page .g-recaptcha{ transform:scale(0.9) !important;transform-origin:center !important;}.project-page .g-recaptcha iframe{ border-radius:8px !important;box-shadow:0 2px 8px rgba(0,0,0,0.1) !important;}.project-page .alert.alert-danger{ background:rgba(220,53,69,0.1) !important;border:1px solid rgba(220,53,69,0.3) !important;color:#dc3545 !important;padding:12px 16px !important;border-radius:8px !important;margin:10px 0 !important;display:flex !important;align-items:center !important;gap:8px !important;font-size:0.9rem !important;}.project-page .alert.alert-danger i{ font-size:1.1rem !important;}@media (max-width:768px){ .project-page .recaptcha-container{ margin:15px 0 !important;padding:10px !important;}.project-page .g-recaptcha{ transform:scale(0.8) !important;}.project-page .alert.alert-danger{ font-size:0.85rem !important;padding:10px 12px !important;}}.project-page .comment-replies .comment{ background:rgba(255,255,255,0.08) !important;border-left:3px solid #3498db !important;margin-bottom:15px !important;padding:20px !important;}.project-page .comment-replies .comment:hover{ border-left-color:#f39c12 !important;background:rgba(255,255,255,0.12) !important;}.project-page .comment-actions{ margin-top:15px !important;display:flex !important;gap:15px !important;align-items:center !important;}.project-page .reply-btn,.project-page .btn,.project-page .btn-link,.project-page .btn-sm{ background:rgba(52,152,219,0.2) !important;color:#3498db !important;padding:8px 16px !important;border:1px solid rgba(52,152,219,0.3) !important;border-radius:20px !important;font-size:0.9rem !important;font-weight:500 !important;cursor:pointer !important;transition:all 0.3s ease !important;text-decoration:none !important;display:inline-flex !important;align-items:center !important;gap:5px !important;margin-left:8px !important;}.project-page .reply-btn:hover,.project-page .btn:hover,.project-page .btn-link:hover,.project-page .btn-sm:hover{ background:rgba(52,152,219,0.3) !important;color:#ffffff !important;transform:translateY(-2px) !important;box-shadow:0 4px 12px rgba(52,152,219,0.3) !important;text-decoration:none !important;}.project-page .reply-btn::before{ content:'💬' !important;font-size:0.8rem !important;}.project-page .btn-link{ background:transparent !important;border:1px solid rgba(243,156,18,0.3) !important;color:#f39c12 !important;}.project-page .btn-link:hover{ background:rgba(243,156,18,0.2) !important;color:#ffffff !important;border-color:#f39c12 !important;box-shadow:0 4px 12px rgba(243,156,18,0.3) !important;}.project-page .btn-sm{ padding:6px 12px !important;font-size:0.85rem !important;border-radius:15px !important;}.project-page .ms-2{ margin-left:8px !important;}.project-page .btn-primary{ background:linear-gradient(135deg,#f39c12,#e67e22) !important;color:#ffffff !important;border:none !important;box-shadow:0 4px 15px rgba(243,156,18,0.3) !important;}.project-page .btn-primary:hover{ background:linear-gradient(135deg,#e67e22,#d35400) !important;transform:translateY(-2px) !important;box-shadow:0 6px 20px rgba(243,156,18,0.4) !important;}.project-page .btn-secondary{ background:rgba(108,117,125,0.2) !important;color:#6c757d !important;border:1px solid rgba(108,117,125,0.3) !important;}.project-page .btn-secondary:hover{ background:rgba(108,117,125,0.3) !important;color:#ffffff !important;box-shadow:0 4px 12px rgba(108,117,125,0.3) !important;}.project-page .btn-danger{ background:rgba(220,53,69,0.2) !important;color:#dc3545 !important;border:1px solid rgba(220,53,69,0.3) !important;}.project-page .btn-danger:hover{ background:rgba(220,53,69,0.3) !important;color:#ffffff !important;box-shadow:0 4px 12px rgba(220,53,69,0.3) !important;}.project-page .no-comments{ text-align:center !important;padding:60px 40px !important;background:rgba(255,255,255,0.05) !important;border-radius:20px !important;border:2px dashed rgba(255,255,255,0.2) !important;color:rgba(255,255,255,0.7) !important;font-size:1.1rem !important;font-style:italic !important;}.project-page .no-comments::before{ content:'💭' !important;font-size:3rem !important;display:block !important;margin-bottom:20px !important;opacity:0.6 !important;}.project-page .pending-comments-message{ background:linear-gradient(135deg,rgba(255,193,7,0.1),rgba(255,152,0,0.1)) !important;border:2px solid rgba(255,193,7,0.3) !important;border-radius:20px !important;padding:25px !important;margin:30px 0 !important;display:flex !important;align-items:center !important;gap:20px !important;backdrop-filter:blur(10px) !important;box-shadow:0 8px 25px rgba(255,193,7,0.1) !important;position:relative !important;overflow:hidden !important;}.project-page .pending-comments-message::before{ content:'' !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;height:3px !important;background:linear-gradient(90deg,#ffc107,#ff9800,#ff5722) !important;}.project-page .pending-icon{ flex-shrink:0 !important;width:60px !important;height:60px !important;background:linear-gradient(135deg,#ffc107,#ff9800) !important;border-radius:50% !important;display:flex !important;align-items:center !important;justify-content:center !important;box-shadow:0 4px 15px rgba(255,193,7,0.3) !important;animation:pulse 2s infinite !important;}.project-page .pending-icon i{ font-size:1.8rem !important;color:#ffffff !important;}.project-page .pending-content{ flex:1 !important;}.project-page .pending-content h4{ color:#ffffff !important;font-size:1.3rem !important;font-weight:700 !important;margin-bottom:8px !important;text-shadow:0 2px 4px rgba(0,0,0,0.3) !important;}.project-page .pending-content p{ color:rgba(255,255,255,0.9) !important;font-size:1.1rem !important;margin-bottom:5px !important;line-height:1.5 !important;}.project-page .pending-content small{ color:rgba(255,255,255,0.7) !important;font-size:0.95rem !important;font-style:italic !important;}@keyframes pulse{ 0%{ transform:scale(1);box-shadow:0 4px 15px rgba(255,193,7,0.3);}50%{ transform:scale(1.05);box-shadow:0 6px 20px rgba(255,193,7,0.5);}100%{ transform:scale(1);box-shadow:0 4px 15px rgba(255,193,7,0.3);}}

/* Advanced Mobile Enhancements */
@media (max-width:768px){
    /* Enhanced Project Layout */
    .project-page .project-layout{
        display:flex !important;
        flex-direction:column !important;
        gap:20px !important;
    }
    
    .project-page .project-main-content{
        order:1 !important;
    }
    
    .project-page .project-sidebar{
        order:2 !important;
        position:static !important;
        top:auto !important;
    }
    
    /* Enhanced Project Cards */
    .project-page .project-card{
        margin:10px 0 !important;
        transition:all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    }
    
    .project-page .project-card:hover{
        transform:translateY(-5px) scale(1.02) !important;
        box-shadow:0 15px 40px rgba(0,0,0,0.2) !important;
    }
    
    /* Enhanced Comment System */
    .project-page .comment-form{
        background:linear-gradient(135deg,rgba(255,255,255,0.1),rgba(255,255,255,0.05)) !important;
        border:1px solid rgba(255,255,255,0.2) !important;
        backdrop-filter:blur(10px) !important;
    }
    
    .project-page .comment-form input,
    .project-page .comment-form textarea{
        background:rgba(255,255,255,0.1) !important;
        border:1px solid rgba(255,255,255,0.2) !important;
        color:#fff !important;
        transition:all 0.3s ease !important;
    }
    
    .project-page .comment-form input:focus,
    .project-page .comment-form textarea:focus{
        background:rgba(255,255,255,0.15) !important;
        border-color:#f39c12 !important;
        box-shadow:0 0 0 3px rgba(243,156,18,0.2) !important;
    }
    
    .project-page .comment-form input::placeholder,
    .project-page .comment-form textarea::placeholder{
        color:rgba(255,255,255,0.6) !important;
    }
    
    /* Enhanced Submit Button */
    .project-page .submit-btn{
        background:linear-gradient(135deg,#f39c12,#e67e22) !important;
        border:none !important;
        padding:12px 30px !important;
        border-radius:25px !important;
        color:#000 !important;
        font-weight:600 !important;
        font-size:1rem !important;
        cursor:pointer !important;
        transition:all 0.3s ease !important;
        box-shadow:0 4px 15px rgba(243,156,18,0.3) !important;
    }
    
    .project-page .submit-btn:hover{
        background:linear-gradient(135deg,#e67e22,#d35400) !important;
        transform:translateY(-2px) !important;
        box-shadow:0 6px 20px rgba(243,156,18,0.4) !important;
    }
    
    .project-page .submit-btn:active{
        transform:translateY(0) !important;
    }
    
    /* Enhanced Comments Display */
    .project-page .comment{
        background:linear-gradient(135deg,rgba(255,255,255,0.1),rgba(255,255,255,0.05)) !important;
        border:1px solid rgba(255,255,255,0.2) !important;
        backdrop-filter:blur(10px) !important;
        transition:all 0.3s ease !important;
    }
    
    .project-page .comment:hover{
        background:linear-gradient(135deg,rgba(255,255,255,0.15),rgba(255,255,255,0.08)) !important;
        transform:translateY(-2px) !important;
    }
    
    /* Enhanced Related Projects */
    .project-page .related-card{
        background:linear-gradient(135deg,rgba(255,255,255,0.1),rgba(255,255,255,0.05)) !important;
        border:1px solid rgba(255,255,255,0.2) !important;
        backdrop-filter:blur(10px) !important;
        transition:all 0.3s ease !important;
    }
    
    .project-page .related-card:hover{
        background:linear-gradient(135deg,rgba(255,255,255,0.2),rgba(255,255,255,0.1)) !important;
        transform:translateY(-5px) !important;
        box-shadow:0 10px 30px rgba(0,0,0,0.2) !important;
    }
    
    /* Enhanced Gallery */
    .project-page .gallery-item{
        position:relative !important;
        overflow:hidden !important;
        border-radius:10px !important;
        transition:all 0.3s ease !important;
    }
    
    .project-page .gallery-item:hover{
        transform:scale(1.02) !important;
        box-shadow:0 8px 25px rgba(0,0,0,0.2) !important;
    }
    
    .project-page .gallery-item img{
        transition:transform 0.3s ease !important;
    }
    
    .project-page .gallery-item:hover img{
        transform:scale(1.05) !important;
    }
}

@media (max-width:480px){
    /* Ultra Mobile Optimizations */
    .project-page .project-layout{
        gap:15px !important;
    }
    
    .project-page .project-card{
        margin:8px 0 !important;
    }
    
    .project-page .comment-form{
        padding:15px !important;
    }
    
    .project-page .comment-form input,
    .project-page .comment-form textarea{
        padding:10px 12px !important;
        font-size:0.9rem !important;
    }
    
    .project-page .submit-btn{
        padding:10px 25px !important;
        font-size:0.9rem !important;
    }
    
    .project-page .comment{
        padding:10px !important;
    }
    
    .project-page .related-card{
        margin:8px 0 !important;
    }
    
    .project-page .gallery-item{
        margin:5px 0 !important;
    }
}

/* Advanced Touch Interactions */
@media (hover:none) and (pointer:coarse){
    .project-page .project-card:active{
        transform:scale(0.98) !important;
        box-shadow:0 2px 8px rgba(0,0,0,0.2) !important;
    }
    
    .project-page .comment:active{
        transform:scale(0.99) !important;
    }
    
    .project-page .related-card:active{
        transform:scale(0.98) !important;
    }
    
    .project-page .gallery-item:active{
        transform:scale(0.98) !important;
    }
    
    .project-page .submit-btn:active{
        transform:scale(0.95) !important;
    }
    
    .project-page .project-link:active{
        transform:scale(0.95) !important;
    }
}

/* Advanced Accessibility */
@media (prefers-reduced-motion:reduce){
    .project-page .project-card,
    .project-page .comment,
    .project-page .related-card,
    .project-page .gallery-item,
    .project-page .submit-btn,
    .project-page .project-link{
        transition:none !important;
    }
    
    .project-page .project-card:hover,
    .project-page .comment:hover,
    .project-page .related-card:hover,
    .project-page .gallery-item:hover{
        transform:none !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast:high){
    .project-page .project-card,
    .project-page .comment,
    .project-page .related-card{
        border:2px solid currentColor !important;
    }
    
    .project-page .comment-form input,
    .project-page .comment-form textarea{
        border:2px solid currentColor !important;
    }
    
    .project-page .submit-btn{
        border:2px solid currentColor !important;
    }
}

/* Dark Mode Enhancements */
@media (prefers-color-scheme:dark){
    .project-page .project-card{
        background:linear-gradient(135deg,rgba(0,0,0,0.3),rgba(0,0,0,0.1)) !important;
        border:1px solid rgba(255,255,255,0.1) !important;
    }
    
    .project-page .comment{
        background:linear-gradient(135deg,rgba(0,0,0,0.2),rgba(0,0,0,0.1)) !important;
        border:1px solid rgba(255,255,255,0.1) !important;
    }
    
    .project-page .related-card{
        background:linear-gradient(135deg,rgba(0,0,0,0.2),rgba(0,0,0,0.1)) !important;
        border:1px solid rgba(255,255,255,0.1) !important;
    }
}

/* Critical Mobile Overflow Fixes */
@media (max-width:768px){
    /* Prevent all horizontal overflow */
    .project-page{
        overflow-x:hidden !important;
        width:100% !important;
    }
    
    .project-page *{
        max-width:100% !important;
        box-sizing:border-box !important;
    }
    
    /* Fix project container */
    .project-page .project-container{
        width:100% !important;
        max-width:100% !important;
        padding:10px !important;
        margin:0 auto !important;
        overflow-x:hidden !important;
    }
    
    /* Fix project layout */
    .project-page .project-layout{
        width:100% !important;
        max-width:100% !important;
        flex-direction:column !important;
        gap:15px !important;
    }
    
    .project-page .project-main-content{
        width:100% !important;
        max-width:100% !important;
        order:1 !important;
    }
    
    .project-page .project-sidebar{
        width:100% !important;
        max-width:100% !important;
        order:2 !important;
        position:static !important;
    }
    
    /* Fix project article */
    .project-page .project-article{
        width:100% !important;
        max-width:100% !important;
    }
    
    .project-page .project-header{
        width:100% !important;
        padding:15px !important;
    }
    
    .project-page .project-title{
        font-size:1.8rem !important;
        word-wrap:break-word !important;
        overflow-wrap:break-word !important;
        hyphens:auto !important;
    }
    
    .project-page .project-image{
        width:100% !important;
        max-width:100% !important;
        height:250px !important;
        object-fit:cover !important;
    }
    
    .project-page .project-meta{
        width:100% !important;
        flex-direction:column !important;
        gap:10px !important;
        padding:15px !important;
    }
    
    .project-page .meta-item{
        width:100% !important;
        max-width:100% !important;
        text-align:center !important;
        word-wrap:break-word !important;
    }
    
    /* Fix project content */
    .project-page .project-content{
        width:100% !important;
        max-width:100% !important;
        padding:15px !important;
        word-wrap:break-word !important;
        overflow-wrap:break-word !important;
    }
    
    .project-page .project-content p{
        word-wrap:break-word !important;
        overflow-wrap:break-word !important;
        hyphens:auto !important;
    }
    
    /* Fix features */
    .project-page .project-features{
        width:100% !important;
        max-width:100% !important;
        padding:15px !important;
    }
    
    .project-page .features-content{
        grid-template-columns:1fr !important;
        gap:10px !important;
    }
    
    .project-page .feature-item{
        width:100% !important;
        word-wrap:break-word !important;
    }
    
    /* Fix technologies */
    .project-page .project-technologies{
        width:100% !important;
        max-width:100% !important;
        padding:15px !important;
    }
    
    .project-page .technologies-content{
        flex-wrap:wrap !important;
        justify-content:center !important;
        gap:8px !important;
    }
    
    .project-page .tech-tag{
        word-wrap:break-word !important;
        overflow-wrap:break-word !important;
    }
    
    /* Fix requirements */
    .project-page .project-requirements{
        width:100% !important;
        max-width:100% !important;
        padding:15px !important;
    }
    
    .project-page .requirements-content{
        word-wrap:break-word !important;
        overflow-wrap:break-word !important;
        hyphens:auto !important;
    }
    
    /* Fix installation */
    .project-page .project-installation{
        width:100% !important;
        max-width:100% !important;
        padding:15px !important;
    }
    
    .project-page .installation-content{
        word-wrap:break-word !important;
        overflow-wrap:break-word !important;
        hyphens:auto !important;
    }
    
    /* Fix tags */
    .project-page .project-tags{
        width:100% !important;
        max-width:100% !important;
        padding:15px !important;
    }
    
    .project-page .tags-content{
        flex-wrap:wrap !important;
        justify-content:center !important;
        gap:8px !important;
    }
    
    .project-page .tag-item{
        word-wrap:break-word !important;
        overflow-wrap:break-word !important;
    }
    
    /* Fix gallery */
    .project-page .project-gallery{
        width:100% !important;
        max-width:100% !important;
        padding:15px !important;
    }
    
    .project-page .gallery-content{
        grid-template-columns:1fr !important;
        gap:10px !important;
    }
    
    .project-page .gallery-item{
        width:100% !important;
    }
    
    .project-page .gallery-image{
        width:100% !important;
        height:200px !important;
        object-fit:cover !important;
    }
    
    /* Fix project links */
    .project-page .project-links{
        width:100% !important;
        max-width:100% !important;
        flex-direction:column !important;
        padding:15px !important;
        gap:15px !important;
    }
    
    .project-page .project-link{
        width:100% !important;
        max-width:100% !important;
        margin:5px 0 !important;
        text-align:center !important;
        word-wrap:break-word !important;
        overflow-wrap:break-word !important;
    }
    
    /* Fix project info */
    .project-page .project-info-integrated{
        width:100% !important;
        max-width:100% !important;
        padding:15px !important;
    }
    
    .project-page .info-content{
        grid-template-columns:1fr !important;
        gap:10px !important;
    }
    
    .project-page .info-item{
        width:100% !important;
        word-wrap:break-word !important;
        overflow-wrap:break-word !important;
    }
    
    /* Fix comments */
    .project-page .comments-section{
        width:100% !important;
        max-width:100% !important;
        padding:15px !important;
    }
    
    .project-page .comment-form{
        width:100% !important;
        padding:15px !important;
    }
    
    .project-page .comment-form .row{
        grid-template-columns:1fr !important;
        gap:10px !important;
    }
    
    .project-page .comment{
        width:100% !important;
        padding:15px !important;
        word-wrap:break-word !important;
        overflow-wrap:break-word !important;
    }
    
    .project-page .comment-content{
        word-wrap:break-word !important;
        overflow-wrap:break-word !important;
        hyphens:auto !important;
    }
    
    /* Fix related projects */
    .project-page .related-projects{
        width:100% !important;
        max-width:100% !important;
        padding:15px !important;
    }
    
    .project-page .related-grid{
        grid-template-columns:1fr !important;
        gap:10px !important;
    }
    
    .project-page .related-card{
        width:100% !important;
    }
    
    .project-page .related-title{
        word-wrap:break-word !important;
        overflow-wrap:break-word !important;
    }
    
    .project-page .related-excerpt{
        word-wrap:break-word !important;
        overflow-wrap:break-word !important;
        hyphens:auto !important;
    }
    
    /* Fix language switcher */
    .project-page .language-switcher{
        position:fixed !important;
        top:10px !important;
        right:10px !important;
        z-index:1001 !important;
        flex-direction:column !important;
        gap:5px !important;
    }
    
    .project-page .language-switcher .btn{
        padding:6px 12px !important;
        font-size:0.8rem !important;
        white-space:nowrap !important;
    }
    
    /* Fix back button */
    .project-page .back-btn{
        width:100% !important;
        max-width:100% !important;
        text-align:center !important;
        margin-bottom:20px !important;
        word-wrap:break-word !important;
    }
}

@media (max-width:480px){
    /* Ultra mobile fixes */
    .project-page .project-container{
        padding:5px !important;
    }
    
    .project-page .project-title{
        font-size:1.5rem !important;
    }
    
    .project-page .project-image{
        height:200px !important;
    }
    
    .project-page .project-meta{
        padding:10px !important;
    }
    
    .project-page .project-content,
    .project-page .project-features,
    .project-page .project-technologies,
    .project-page .project-requirements,
    .project-page .project-installation,
    .project-page .project-tags,
    .project-page .project-gallery,
    .project-page .project-links,
    .project-page .project-info-integrated,
    .project-page .comments-section{
        padding:10px !important;
    }
    
    .project-page .comment-form{
        padding:10px !important;
    }
    
    .project-page .comment{
        padding:10px !important;
    }
    
    .project-page .gallery-image{
        height:150px !important;
    }
    
    .project-page .project-link{
        padding:10px 15px !important;
        font-size:0.9rem !important;
    }
    
    .project-page .language-switcher{
        top:5px !important;
        right:5px !important;
    }
    
    .project-page .language-switcher .btn{
        padding:4px 8px !important;
        font-size:0.7rem !important;
    }
    
    .project-page .back-btn{
        padding:10px 15px !important;
        font-size:0.9rem !important;
    }
}

/* Fix text overflow issues */
@media (max-width:768px){
    .project-page h1,
    .project-page h2,
    .project-page h3,
    .project-page h4,
    .project-page h5,
    .project-page h6{
        word-wrap:break-word !important;
        overflow-wrap:break-word !important;
        hyphens:auto !important;
    }
    
    .project-page p,
    .project-page span,
    .project-page div{
        word-wrap:break-word !important;
        overflow-wrap:break-word !important;
    }
    
    .project-page .btn,
    .project-page .project-link{
        word-wrap:break-word !important;
        overflow-wrap:break-word !important;
    }
    
    .project-page a{
        word-break:break-all !important;
        overflow-wrap:break-word !important;
    }
    
    .project-page table{
        width:100% !important;
        table-layout:fixed !important;
        word-wrap:break-word !important;
    }
    
    .project-page td,
    .project-page th{
        word-wrap:break-word !important;
        overflow-wrap:break-word !important;
        hyphens:auto !important;
    }
}/* Enhanced Mobile Responsive Design */
@media (max-width:768px){ 
    .project-page .project-container{ 
        padding:20px !important;
        margin-top:20px !important;
    }
    
    .project-page .project-title{ 
        font-size:2.2rem !important;
        line-height:1.2 !important;
    }
    
    .project-page .project-image{ 
        height:300px !important;
        border-radius:15px !important;
    }
    
    .project-page .project-meta{ 
        gap:10px !important;
        padding:20px !important;
        justify-content:center !important;
        flex-direction:column !important;
    }
    
    .project-page .meta-item{ 
        min-height:45px !important;
        padding:10px 15px !important;
        font-size:0.85rem !important;
        min-width:100px !important;
        width:100% !important;
        max-width:280px !important;
    }
    
    .project-page .features-content{ 
        grid-template-columns:1fr !important;
        gap:15px !important;
    }
    
    .project-page .gallery-content{ 
        grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
        gap:15px !important;
    }
    
    .project-page .gallery-image{ 
        height:150px !important;
    }
    
    .project-page .project-links{ 
        flex-direction:column !important;
        align-items:center !important;
        gap:20px !important;
        padding:30px 20px !important;
    }
    
    .project-page .project-link{ 
        width:100% !important;
        max-width:300px !important;
        padding:15px 25px !important;
        font-size:1rem !important;
    }
    
    .project-page .row{ 
        grid-template-columns:1fr !important;
        gap:15px !important;
    }
    
    .project-page .project-sidebar{ 
        padding:25px !important;
        margin-top:20px !important;
        margin-bottom:20px !important;
    }
    
    .project-page .related-grid{ 
        grid-template-columns:1fr !important;
        gap:15px !important;
    }
    
    .project-page .footer-content{ 
        grid-template-columns:1fr !important;
        gap:30px !important;
    }
    
    .project-page .footer-bottom-content{ 
        flex-direction:column !important;
        text-align:center !important;
    }
    
    .project-page .comment{ 
        background:rgba(255,255,255,0.1) !important;
        border-radius:15px !important;
        padding:20px !important;
        margin-bottom:20px !important;
        border-left:4px solid #3498db !important;
        display:block !important;
        visibility:visible !important;
    }
    
    .project-page .comment-author{ 
        font-size:1.1rem !important;
        font-weight:bold !important;
        color:#ffffff !important;
        margin-bottom:10px !important;
    }
    
    .project-page .comment-date{ 
        font-size:0.9rem !important;
        color:#bdc3c7 !important;
        margin-bottom:15px !important;
    }
    
    .project-page .comment-content{ 
        padding:15px !important;
        font-size:1rem !important;
        color:#ecf0f1 !important;
        line-height:1.6 !important;
    }
    
    .project-page .comment-replies{ 
        margin-left:15px !important;
        padding-left:15px !important;
    }
    
    .project-page .comments-list{ 
        display:block !important;
        visibility:visible !important;
        min-height:100px !important;
        background:rgba(0,0,0,0.1) !important;
        border-radius:15px !important;
        padding:20px !important;
        margin:20px 0 !important;
    }
    
    .project-page .no-comments{ 
        text-align:center !important;
        padding:40px !important;
        color:#bdc3c7 !important;
    }
    
    .project-page .no-comments i{ 
        font-size:3rem !important;
        margin-bottom:20px !important;
        display:block !important;
    }
    
    .project-page .comment-actions{ 
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:10px !important;
    }
    
    .project-page .reply-btn{ 
        width:100% !important;
        justify-content:center !important;
    }
    
    .project-page .btn,.project-page .btn-link,.project-page .btn-sm{ 
        padding:10px 16px !important;
        font-size:0.9rem !important;
        margin-bottom:8px !important;
    }
    
    .project-page .ms-2{ 
        margin-left:0 !important;
        margin-top:8px !important;
    }
}

@media (max-width:480px){
    .project-page .project-container{ 
        padding:15px !important;
        margin-top:15px !important;
    }
    
    .project-page .project-title{ 
        font-size:1.8rem !important;
        line-height:1.1 !important;
    }
    
    .project-page .project-image{ 
        height:250px !important;
    }
    
    .project-page .project-meta{ 
        padding:15px !important;
        gap:8px !important;
    }
    
    .project-page .meta-item{ 
        min-height:40px !important;
        padding:8px 12px !important;
        font-size:0.8rem !important;
        gap:6px !important;
        width:100% !important;
        max-width:280px !important;
        min-width:auto !important;
    }
    
    .project-page .meta-item i{ 
        font-size:1rem !important;
    }
    
    .project-page .project-links{ 
        padding:25px 15px !important;
        gap:15px !important;
        margin:25px 0 !important;
    }
    
    .project-page .project-link{ 
        padding:15px 25px !important;
        font-size:1rem !important;
        min-width:140px !important;
        gap:10px !important;
        width:100% !important;
        max-width:300px !important;
    }
    
    .project-page .project-link i{ 
        font-size:1.2rem !important;
    }
    
    .project-page .gallery-content{ 
        grid-template-columns:repeat(auto-fit,minmax(120px,1fr)) !important;
        gap:10px !important;
    }
    
    .project-page .gallery-image{ 
        height:120px !important;
    }
    
    .project-page .project-sidebar{ 
        padding:20px !important;
        margin-top:15px !important;
        margin-bottom:15px !important;
    }
    
    .project-page .related-grid{ 
        grid-template-columns:1fr !important;
        gap:12px !important;
    }
    
    .project-page .related-image{ 
        height:120px !important;
    }
    
    .project-page .modal-content{ 
        width:95% !important;
        padding:10px !important;
    }
    
    .project-page .close{ 
        font-size:30px !important;
        right:15px !important;
    }
    
    
    .project-page .language-switcher{ 
        top:10px !important;
        right:10px !important;
    }
}.project-page .project-sidebar{ background:rgb(0 0 0 / 32%) !important;padding:40px !important;border-radius:25px !important;box-shadow:0 20px 40px rgba(0,0,0,0.15) !important;height:fit-content !important;width:100% !important;max-width:100% !important;order:2 !important;backdrop-filter:blur(15px) !important;border:1px solid rgba(255,255,255,0.3) !important;margin-top:20px !important;margin-bottom:20px !important;}.project-page .sidebar-section{ margin-bottom:30px !important;}.project-page .sidebar-title{ color:#ffffff !important;font-size:1.5rem !important;font-weight:700 !important;margin-bottom:25px !important;display:block !important;text-align:center !important;padding-bottom:15px !important;border-bottom:2px solid #f39c12 !important;position:relative !important;}.project-page .sidebar-title::after{ content:'' !important;position:absolute !important;bottom:-2px !important;left:50% !important;transform:translateX(-50%) !important;width:50px !important;height:2px !important;background:#f39c12 !important;}.project-page .related-grid{ display:grid !important;grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) !important;gap:20px !important;}.project-page .related-card{ display:block !important;text-decoration:none !important;color:inherit !important;background:rgba(52,152,219,0.1) !important;border-radius:20px !important;padding:20px !important;transition:all 0.3s ease !important;border:1px solid rgba(52,152,219,0.2) !important;box-shadow:0 5px 15px rgba(52,152,219,0.1) !important;}.project-page .related-card:hover{ background:rgba(52,152,219,0.15) !important;transform:translateY(-5px) !important;box-shadow:0 10px 25px rgba(52,152,219,0.3) !important;border-color:rgba(52,152,219,0.4) !important;}.project-page .related-image{ width:100% !important;height:150px !important;object-fit:cover !important;border-radius:15px !important;margin-bottom:15px !important;transition:transform 0.3s ease !important;}.project-page .related-card:hover .related-image{ transform:scale(1.05) !important;}.project-page .related-title{ color:#ffffff !important;font-size:1.2rem !important;font-weight:700 !important;margin-bottom:10px !important;line-height:1.3 !important;}.project-page .related-excerpt{ color:#666 !important;font-size:0.95rem !important;line-height:1.5 !important;margin-bottom:0 !important;}.project-page .image-modal{ display:none !important;position:fixed !important;z-index:10000 !important;left:0 !important;top:0 !important;width:100% !important;height:100% !important;background-color:rgba(0,0,0,0.9) !important;backdrop-filter:blur(5px) !important;}.project-page .modal-content{ position:relative !important;margin:auto !important;padding:20px !important;width:90% !important;max-width:800px !important;top:50% !important;transform:translateY(-50%) !important;}.project-page .modal-content img{ width:100% !important;height:auto !important;border-radius:15px !important;box-shadow:0 15px 40px rgba(0,0,0,0.5) !important;}.project-page .close{ position:absolute !important;top:10px !important;right:20px !important;color:#fff !important;font-size:35px !important;font-weight:bold !important;cursor:pointer !important;z-index:10001 !important;transition:all 0.3s ease !important;}.project-page .close:hover{ color:#f39c12 !important;transform:scale(1.1) !important;}.project-page .site-footer{ color:white !important;padding:80px 0 20px !important;margin-top:auto !important;width:100% !important;order:3 !important;}.project-page .footer-container{ max-width:1200px !important;margin:0 auto !important;padding:0 20px !important;}.project-page .footer-content{ display:grid !important;grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) !important;gap:40px !important;margin-bottom:40px !important;}.project-page .footer-section{ margin-bottom:30px !important;}.project-page .footer-title{ font-size:1.5rem !important;font-weight:700 !important;margin-bottom:20px !important;color:#f39c12 !important;}.project-page .footer-subtitle{ font-size:1.2rem !important;font-weight:600 !important;margin-bottom:20px !important;color:#ecf0f1 !important;}.project-page .footer-description{ line-height:1.6 !important;margin-bottom:20px !important;color:#bdc3c7 !important;}.project-page .footer-social{ display:flex !important;gap:15px !important;}.project-page .social-link{ display:flex !important;align-items:center !important;justify-content:center !important;width:40px !important;height:40px !important;background:rgba(255,255,255,0.1) !important;color:white !important;border-radius:50% !important;text-decoration:none !important;transition:all 0.3s ease !important;}.project-page .social-link:hover{ background:#f39c12 !important;transform:translateY(-3px) !important;box-shadow:0 5px 15px rgba(243,156,18,0.4) !important;}.project-page .footer-links{ list-style:none !important;padding:0 !important;margin:0 !important;}.project-page .footer-links li{ margin-bottom:10px !important;}.project-page .footer-links a{ color:#bdc3c7 !important;text-decoration:none !important;transition:color 0.3s ease !important;}.project-page .footer-links a:hover{ color:#f39c12 !important;}.project-page .footer-contact{ display:flex !important;flex-direction:column !important;gap:15px !important;}.project-page .contact-item{ display:flex !important;align-items:center !important;gap:10px !important;color:#bdc3c7 !important;}.project-page .footer-bottom{ border-top:1px solid rgba(255,255,255,0.1) !important;padding-top:20px !important;}.project-page .footer-bottom-content{ display:flex !important;justify-content:space-between !important;align-items:center !important;flex-wrap:wrap !important;gap:20px !important;}.project-page .copyright{ color:#bdc3c7 !important;margin:0 !important;}.project-page .footer-credit{ color:#bdc3c7 !important;margin:0 !important;display:flex !important;align-items:center !important;gap:5px !important;}.project-page .heart{ color:#e74c3c !important;animation:heartbeat 1.5s ease-in-out infinite !important;}@keyframes heartbeat{ 0%{ transform:scale(1);}50%{ transform:scale(1.1);}100%{ transform:scale(1);}}@media (max-width:1024px){ .project-page .project-layout{ gap:25px !important;display:flex !important;flex-direction:column !important;}.project-page .project-sidebar{ order:2 !important;position:static !important;}.project-page .project-container{ padding:25px !important;}.project-page .project-image{ height:400px !important;}.project-page .project-title{ font-size:2.5rem !important;}.project-page .project-meta{ gap:12px !important;padding:25px !important;justify-content:center !important;}.project-page .meta-item{ min-height:50px !important;padding:12px 18px !important;font-size:0.9rem !important;min-width:110px !important;display:flex !important;align-items:center !important;justify-content:center !important;text-align:center !important;}.project-page .meta-item span{ display:flex !important;align-items:center !important;justify-content:center !important;text-align:center !important;width:100% !important;height:100% !important;}}@media (max-width:768px){ .project-page{ padding:10px !important;}.project-page .project-container{ padding:20px !important;border-radius:15px !important;}.project-page .project-title{ font-size:2.2rem !important;}.project-page .project-image{ height:300px !important;}.project-page .project-meta{ gap:10px !important;padding:20px !important;justify-content:center !important;}.project-page .meta-item{ min-height:45px !important;padding:10px 15px !important;font-size:0.85rem !important;min-width:100px !important;display:flex !important;align-items:center !important;justify-content:center !important;text-align:center !important;}.project-page .meta-item span{ display:flex !important;align-items:center !important;justify-content:center !important;text-align:center !important;width:100% !important;height:100% !important;}.project-page .features-content{ grid-template-columns:1fr !important;}.project-page .gallery-content{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;gap:15px !important;}.project-page .gallery-image{ height:150px !important;}.project-page .project-links{ flex-direction:column !important;align-items:center !important;}.project-page .row{ grid-template-columns:1fr !important;}.project-page .project-sidebar{ padding:25px !important;margin-top:20px !important;margin-bottom:20px !important;}.project-page .related-grid{ grid-template-columns:1fr !important;gap:15px !important;}.project-page .footer-content{ grid-template-columns:1fr !important;gap:30px !important;}.project-page .footer-bottom-content{ flex-direction:column !important;text-align:center !important;}}@media (max-width:480px){ .project-page{ padding:5px !important;}.project-page .project-container{ padding:15px !important;}.project-page .project-title{ font-size:1.8rem !important;}.project-page .project-image{ height:250px !important;}.project-page .project-meta{ padding:15px !important;gap:8px !important;justify-content:center !important;flex-direction:column !important;}.project-page .meta-item{ min-height:40px !important;padding:8px 12px !important;font-size:0.8rem !important;gap:6px !important;width:100% !important;max-width:280px !important;min-width:auto !important;display:flex !important;align-items:center !important;justify-content:center !important;text-align:center !important;}.project-page .meta-item span{ display:flex !important;align-items:center !important;justify-content:center !important;text-align:center !important;width:100% !important;height:100% !important;}.project-page .meta-item i{ font-size:1rem !important;}.project-page .project-links{ padding:30px 20px !important;gap:20px !important;margin:30px 0 !important;background:rgb(0 0 0 / 32%) !important;color:#ffffff !important;}.project-page .project-link{ padding:18px 30px !important;font-size:1.1rem !important;min-width:160px !important;gap:12px !important;}.project-page .project-link i{ font-size:1.3rem !important;}.project-page .gallery-content{ grid-template-columns:repeat(auto-fit,minmax(120px,1fr)) !important;gap:10px !important;}.project-page .project-links{ padding:25px 15px !important;gap:15px !important;margin:25px 0 !important;flex-direction:column !important;align-items:center !important;background:rgb(0 0 0 / 32%) !important;color:#ffffff !important;}.project-page .project-link{ padding:15px 25px !important;font-size:1rem !important;min-width:140px !important;gap:10px !important;width:100% !important;max-width:300px !important;}.project-page .project-link i{ font-size:1.2rem !important;}.project-page .gallery-image{ height:120px !important;}.project-page .project-sidebar{ padding:20px !important;margin-top:15px !important;margin-bottom:15px !important;}.project-page .related-grid{ grid-template-columns:1fr !important;gap:12px !important;}.project-page .related-image{ height:120px !important;}.project-page .modal-content{ width:95% !important;padding:10px !important;}.project-page .close{ font-size:30px !important;right:15px !important;}.project-page .pending-comments-message{ flex-direction:column !important;text-align:center !important;gap:15px !important;padding:20px !important;}.project-page .pending-icon{ width:50px !important;height:50px !important;}.project-page .pending-content h4{ font-size:1.2rem !important;}.project-page .pending-content p{ font-size:1rem !important;}.project-page .language-switcher{ top:10px !important;right:10px !important;}}.project-page[dir="rtl"] .feature-item,.project-page[dir="rtl"] .info-item{ border-left:none !important;border-right:4px solid #3498db !important;}.project-page[dir="rtl"] .requirements-content,.project-page[dir="rtl"] .installation-content{ border-left:none !important;border-right:4px solid #e74c3c !important;}.project-page[dir="rtl"] .comment{ border-left:none !important;border-right:4px solid #3498db !important;}.project-page .project-container{ animation:fadeInUp 0.8s ease-out !important;}@keyframes fadeInUp{ from{ opacity:0;transform:translateY(40px);}to{ opacity:1;transform:translateY(0);}}.project-page .project-card,.project-page .service-card{ transition:all 0.3s ease !important;}.project-page .project-card:hover,.project-page .service-card:hover{ transform:translateY(-5px) !important;box-shadow:0 20px 40px rgba(0,0,0,0.2) !important;}.project-page .comment-success{ background:rgba(39,174,96,0.1) !important;color:#27ae60 !important;padding:15px !important;border-radius:10px !important;border-left:4px solid #27ae60 !important;margin-bottom:20px !important;font-weight:500 !important;}.project-page .comment-error{ background:rgba(231,76,60,0.1) !important;color:#e74c3c !important;padding:15px !important;border-radius:10px !important;border-left:4px solid #e74c3c !important;margin-bottom:20px !important;font-weight:500 !important;}.project-page .project-title,.project-page .project-meta,.project-page .project-image,.project-page .project-content{ box-sizing:border-box !important;}

/* Enhanced Image Modal */
.image-modal {
    display: none !important;
    position: fixed !important;
    z-index: 10000 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(5px) !important;
    animation: fadeIn 0.3s ease !important;
}

/* Force display when shown */
.image-modal.show,
.image-modal[style*="display: block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force display for testing */
.image-modal.show,
.image-modal[style*="display: block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.image-modal.show {
    display: block !important;
    animation: fadeIn 0.3s ease !important;
}

.image-modal .modal-content {
    position: relative !important;
    margin: auto !important;
    padding: 20px !important;
    width: 90% !important;
    max-width: 1200px !important;
    height: 90vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
}

.image-modal .modal-content img {
    max-width: 100% !important;
    max-height: 80vh !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    animation: zoomIn 0.3s ease !important;
}

.image-modal .close {
    position: absolute !important;
    top: 20px !important;
    right: 30px !important;
    color: #fff !important;
    font-size: 40px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 10001 !important;
    transition: color 0.3s ease !important;
}

.image-modal .close:hover {
    color: #f39c12 !important;
}

.nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: white !important;
    font-size: 30px !important;
    padding: 15px 20px !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px) !important;
    z-index: 10001 !important;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: 30px;
}

.next-btn {
    right: 30px;
}

.image-counter {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    backdrop-filter: blur(10px);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .image-modal .modal-content {
        width: 95%;
        height: 95vh;
        padding: 10px;
    }
    
    .image-modal .close {
        top: 10px;
        right: 15px;
        font-size: 30px;
    }
    
    .nav-btn {
        font-size: 20px;
        padding: 10px 15px;
    }
    
    .prev-btn {
        left: 15px;
    }
    
    .next-btn {
        right: 15px;
    }
    
    .image-counter {
        bottom: 20px;
        font-size: 14px;
        padding: 8px 16px;
    }
}

/* Update History Section */
.project-page .project-updates{ background:rgb(0 0 0 / 32%) !important;color:#ffffff !important;padding:40px !important;border-radius:20px !important;margin-bottom:30px !important;box-shadow:0 15px 30px rgba(0,0,0,0.1) !important;width:100% !important;max-width:100% !important;}
.project-page .updates-title{ color:#ffffff !important;font-size:1.8rem !important;font-weight:700 !important;margin-bottom:25px !important;display:flex !important;align-items:center !important;gap:12px !important;text-align:center !important;justify-content:center !important;}
.project-page .updates-title i{ color:#f39c12 !important;font-size:1.6rem !important;}
.project-page .updates-content{ display:flex !important;flex-direction:column !important;gap:15px !important;}
.project-page .update-item{ background:rgba(52,152,219,0.1) !important;border-radius:15px !important;padding:20px !important;border-left:4px solid #3498db !important;transition:all 0.3s ease !important;}
.project-page .update-item:hover{ background:rgba(52,152,219,0.15) !important;transform:translateX(5px) !important;box-shadow:0 5px 15px rgba(52,152,219,0.2) !important;}
.project-page .update-header{ display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important;margin-bottom:10px !important;}
.project-page .update-version{ display:inline-flex !important;align-items:center !important;gap:8px !important;background:linear-gradient(135deg,#f39c12,#e67e22) !important;color:#fff !important;padding:6px 12px !important;border-radius:20px !important;font-weight:700 !important;}
.project-page .update-time{ color:rgba(255,255,255,0.8) !important;font-size:0.9rem !important;}
.project-page .update-notes{ background:rgba(255,255,255,0.05) !important;padding:15px !important;border-radius:12px !important;line-height:1.7 !important;font-size:1.05rem !important;border-left:4px solid #f39c12 !important;}
.project-page[dir="rtl"] .update-item{ border-left:none !important;border-right:4px solid #3498db !important;}
.project-page[dir="rtl"] .update-notes{ border-left:none !important;border-right:4px solid #f39c12 !important;}
.project-page .version-badge{ display:inline-flex !important;align-items:center !important;gap:6px !important;margin-left:10px !important;background:rgba(243,156,18,0.2) !important;color:#f39c12 !important;border:1px solid rgba(243,156,18,0.4) !important;padding:6px 10px !important;border-radius:14px !important;font-size:0.9rem !important;}