

    :root {
      --space-cadet: #2A2F4F;
      --sky-blue: #87CEEB;
      --magic-mint: #B0E0E6;
      --deep-space: #0F1B2C;
      --nebula-purple: #6C5CE7;
      --space-black: #000013;
      --cosmic-blue: #0A1D37;
      --star-yellow: #FFD700;
    }

    body {
      font-family: 'Almarai', sans-serif;
      background: radial-gradient(circle at center, #f8f9fa, #e9ecef);
      background: rgba(10, 29, 55, 0.95) !important;

      min-height: 100vh;
      overflow-x: hidden;

    }
    /* تخصيص الـ Scroll بالكامل */
    ::-webkit-scrollbar {
      width: 10px; /* عرض التمرير */
      height: 1px; /* ارتفاع التمرير الأفقي */
    }

    ::-webkit-scrollbar-thumb {
      background: linear-gradient(to bottom, #007bff, #e80e9c); /* لون وشكل المقبض */
      border-radius: 10px; /* الزوايا المستديرة */
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #47c8ff; /* لون مختلف عند التمرير أو التحويم */
    }

    ::-webkit-scrollbar-track {
      background: #0A1D37F2 ;/* لون مسار التمرير */
      border-radius: 10px; /* زوايا المسار */
    }

    ::-webkit-scrollbar-track-piece {
      background: #0A1D37F2; /* لون الجزء الفارغ من المسار */
    }


    .artistic-nav {
      background: rgba(10, 29, 55, 0.95) !important;
      backdrop-filter: blur(15px);
      border-bottom: 1px solid var(--star-yellow);
      background: radial-gradient(circle at 70% 20%, var(--nebula-purple), var(--space-black));
      box-shadow: 0 4px 30px rgba(0,0,0,0.1);
      border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    /*6***********************************/
    .container {
      padding-left: 0; /* إزالة المساحة من اليسار */
      padding-right: 0; /* إزالة المساحة من اليمين */
    }
    .galaxy-nav {
      background: rgba(10, 29, 55, 0.95) !important;
      backdrop-filter: blur(15px);
      border-bottom: 5px solid #00B4D8;
    }
    .nebula-text {
      font-family: 'El Messiri', cursive;
      font-size: 3.5rem;
      background: linear-gradient(45deg, var(--star-yellow), var(--nebula-purple));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 30px rgba(255,215,0,0.3);
    }


    .holographic-btn {
      background: linear-gradient(45deg, var(--nebula-purple), var(--star-yellow));
      border: none;
      position: relative;
      overflow: hidden;
      transition: 0.4s;
    }
    .holographic-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 0 30px rgba(108,92,231,0.5);
    }


    /*6***********************************/


    .gallery-card {
      cursor: pointer;
      border: none;
      border-radius: 25px;
      background: #ffffff;
      transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      overflow: hidden;
      position: relative;
      box-shadow: 0 15px 45px rgba(0,0,0,0.07);
    }

    .gallery-card:hover {
      transform: translateY(-10px) rotateZ(1deg);
      box-shadow: 0 25px 60px rgba(255, 0, 0, 0.36);
    }

    .card-overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, var(--space-cadet), var(--deep-space));
      opacity: 0;
      transition: 0.4s;
      mix-blend-mode: multiply;
    }

    .gallery-card:hover .card-overlay {
      opacity: 0.15;
    }

    .style-badge {
      position: absolute;
      top: 20px;
      left: 20px;
      background: var(--sky-blue);
      color: var(--deep-space);
      padding: 8px 20px;
      border-radius: 30px;
      font-weight: 700;
      z-index: 2;
    }

    .dynamic-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      padding: 2rem;
    }


    .hero-section {
      margin-top: 3.5rem; /* ارتفاع النافبار التقريبي */
      /*background: linear-gradient(45deg, var(--magic-mint), #ffffff);*/
      /*------------------------------------------------------------*/
      background: linear-gradient(45deg, #0a0e1f, #ffffff);

      clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
      padding: 4rem 0; /* تعديل طفيف في البادنج */
    }

    .artistic-heading {
      font-family: 'Jomhuria', cursive;
      font-size: 4.5rem;
      color: var(--deep-space);
      text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }

    .fluid-button {
      background: var(--space-cadet);
      color: white !important;
      border: none;
      padding: 1rem 2.5rem;
      border-radius: 50px;
      position: relative;
      overflow: hidden;
      transition: 0.4s;
    }

    .fluid-button::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg,
      transparent,
      rgba(255,255,255,0.3),
      transparent);
      transform: rotate(45deg);
      transition: 0.5s;
    }

    .fluid-button:hover::before {
      left: 150%;
    }

    @media (max-width: 768px) {
      .artistic-heading { font-size: 3rem; }
      .dynamic-grid { grid-template-columns: 1fr; }
      .hero-section {
        margin-top: 3.5rem; /* تعديل للهواتف */
        padding: 3rem 0;
      }
      .nebula-text { font-size: 3rem; }
      :root{
        overflow-x: hidden;

      }

    }

  