body {
font-family: 'Tajawal', sans-serif;
margin: 0;
background: linear-gradient(135deg, #000000, #0d1b2a, #1b263b);
background-attachment: fixed;
color: white;
padding-top: 70px;
padding-bottom: 0;
line-height: 1.8;
}

/* شبكة متحركة باللون الأصفر أكثر وضوحًا */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;           
    height: 200%;
    background-image:
        linear-gradient(rgba(255,215,0,0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,215,0,0.12) 1px, transparent 1px);
    background-size: 50px 50px;  
    z-index: 0;                  
    pointer-events: none;        
    animation: moveGrid 20s linear infinite;
}

/* حركة الشبكة */
@keyframes moveGrid {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-50px, -50px); }
}

/* الشريط العلوي والسفلي */
#navbar-top {
position: fixed;
left: 0;
width: 100%;
height: 60px;
background: linear-gradient(135deg, #000000, #0d1b2a, #1b263b);
display: flex;
align-items: center;
justify-content: space-around;
z-index: 1000;
}
#navbar-top { top: 0; }

/* الأزرار */
#navbar-top button, 
#navbar-bottom button {
background: none;
border: none;
outline: none;
color: white;
font-size: 22px;
cursor: pointer;
transition: all 0.3s ease;
-webkit-tap-highlight-color: transparent;
}
#navbar-top button:hover, 
#navbar-bottom button:hover {
background: rgba(255,255,255,0.2);
transform: scale(1.1);
border-radius: 8px;
padding: 5px;
}

/* تأثير الأزرار */
.btn-clicked {
animation: buttonEffect 0.5s ease;
}
@keyframes buttonEffect {
0% { color: yellow; transform: scale(1.2) rotate(0deg); }
50% { color: yellow; transform: scale(0.9) rotate(-10deg); }
100% { color: white; transform: scale(1) rotate(0deg); }
}

/* تأثير اللوغو (لمبة ذهبية) */
.logo-clicked {
animation: glowEffect 0.6s ease;
}
@keyframes glowEffect {
0% {
transform: scale(1.2);
filter: drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 10px #ffd700);
}
50% {
transform: scale(0.95);
filter: drop-shadow(0 0 20px #ffd700) drop-shadow(0 0 35px #ffec8b);
}
100% {
transform: scale(1);
filter: drop-shadow(0 0 0px transparent);
}
}
#logo-container { position: fixed; display: flex; justify-content: center; -webkit-tap-highlight-color: transparent;}
#logo-img { height: 35px; max-width: 120px; -webkit-tap-highlight-color: transparent;}

/* البانر */
#banner {
height: 50vh;
background: url("https://img.freepik.com/free-vector/financial-technology-concept-dark-background_1017-34327.jpg") no-repeat center center/cover;
border-radius: 8px;
margin: 15px;
}

/* المحتوى */
#content {
max-width: 1000px;
margin: auto;
padding: 20px;
}
#content h2 {
font-family: 'Cairo', sans-serif;
font-size: 26px;
margin: 20px 0 10px;
color: #ffd700;
text-align: center;
}

/* شبكة البطاقات */
.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
margin-top: 20px;
}

/* بطاقة */
.card {
width: 250px;
height: 160px;
position: relative;
overflow: hidden;
border-radius: 20px;
transition: transform 0.6s ease;
background: #222;
border: 2px solid white;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.card:hover {
transform: scale(1.05) rotate(-1deg);
box-shadow: 0 10px 25px rgba(255,255,255,0.15);
}

/* الشريط العلوي */
.card .top-bar {
position: absolute;
top: 10px;
right: 10px;
width: 60px;
height: 6px;
background: yellow;
border-radius: 3px;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s ease;
}
.card:hover .top-bar { transform: scaleX(1); }

/* صورة */
.card img {
width: 100%;
height: 100%;
object-fit: cover;
clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
transition: clip-path 0.6s ease-in-out, transform 0.8s ease;
}
.card:hover img {
clip-path: polygon(0 5%, 95% 0, 100% 90%, 5% 100%);
transform: scale(1.1);
}

/* النص */
.card .content {
position: absolute;
bottom: 0;
width: 100%;
padding: 15px 20px;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
text-align: right;
}
.card h3 {
margin: 0;
font-size: 1.2rem;
color: #ffd700;
}
.card p {
font-size: 0.9rem;
color: #fff;
opacity: 0.85;
margin-top: 6px;
}
#menu-btn {
position: fixed;
left: calc(50% + 40%);
}
#search-btn {
position: fixed;
right: calc(50% + 40%);
}

/* الأقسام */
.section {
margin: 40px 0;
text-align: right;
direction: rtl;
}

.section h2 {
    font-family: 'Cairo', sans-serif;
    font-size: 22px;
    color: #ffd700;
    margin: 25px 0;
    padding: 20px 25px;

    /* خلفية زجاجية ثابتة */
    background: rgba(255, 255, 255, 0.08); /* شفافية خفيفة */
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    /* الحد والزوايا */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;

    /* بدون أي ظل */
    box-shadow: none;

    text-align: right;   /* النص إلى اليمين */
    direction: rtl;      /* اتجاه النص عربي */
    font-weight: bold;

    /* بدون أي تأثير عند hover */
    transition: none;
}

/* إزالة أي تأثير عند المرور */
.section h2:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    transform: none;
}

/* التمرير الأفقي */
.horizontal-scroll {
display: flex;
gap: 20px;
overflow-x: auto;
padding: 10px;
scroll-behavior: smooth;
}

.horizontal-scroll::-webkit-scrollbar {
height: 3px;
}
.horizontal-scroll::-webkit-scrollbar-track {
background: rgba(255,255,255,0.1);
border-radius: 10px;
}
.horizontal-scroll::-webkit-scrollbar-thumb {
background: #ffd700;
border-radius: 10px;
}

/* منع نزول العناصر */
.horizontal-scroll .card {
flex: 0 0 auto;
}

/* ===== Fullscreen Menu ===== */
#full-menu {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(255,215,0,0.08), transparent 40%),
    linear-gradient(145deg, #000814, #001d3d, #000814);
  backdrop-filter: blur(18px);
  z-index: 9999;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
-webkit-tap-highlight-color: transparent;
}

#full-menu.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* زر الإغلاق */
#close-menu {
  position: absolute;
  top: 22px;
  right: 22px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: .3s;
-webkit-tap-highlight-color: transparent;
}

#close-menu:hover {
  background: rgba(255,255,255,0.2);
  transform: rotate(90deg);
}

/* روابط القائمة */
.menu-links {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.menu-links li {
  margin: 20px 0;
  opacity: 0;
  transform: translateY(20px);
  animation: menuItem .6s ease forwards;
}

.menu-links li:nth-child(1){animation-delay:.1s}
.menu-links li:nth-child(2){animation-delay:.2s}
.menu-links li:nth-child(3){animation-delay:.3s}
.menu-links li:nth-child(4){animation-delay:.4s}
.menu-links li:nth-child(5){animation-delay:.5s}

@keyframes menuItem {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu-links a {
  font-family: 'Cairo', sans-serif;
  font-size: 26px;
  color: #ffd700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: .3s;
}

.menu-links a:hover {
  color: #fff;
  letter-spacing: 2px;
}