/* General Styles */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #000;
  color: #fff;
  overflow-x: hidden; /* منع الشريط الأفقي */
  font-family: 'SFDroob', sans-serif; 
  font-display: swap; /* أو optional */
}

h1 {
    font-family: 'SFDroob', sans-serif;
    font-weight: 900; /* الوزن العريض */
    font-display: swap; /* أو optional */
}

.logo {
  text-decoration: none; /* إزالة التسطير */
  color: white; /* تغيير اللون إلى الأبيض */
  font-family: 'SFDroob', sans-serif; /* اختيار خط الكتابة إذا كنت تريد */
  font-size: 24px; /* حجم الخط (اختياري) */
}
/* حل مشكلة اختفاء القائمة المنسدلة الأخيرة */
.dropdown.align-right .dropdown-menu {
  /* 1. إزالة الإزاحة التلقائية من اليسار */
  left: auto;
  
  /* 2. بدء القائمة من حافة العنصر الأب اليمنى */
  right: 0;
  
  /* (اختياري: لتأكيد أن القائمة لا تتجاوز أي شيء) */
  transform: translateX(0);
}
/* Font Definitions */
@font-face {
  font-family: 'SFDroob';
  src: url('fonts/SFDroob.woff2') format('woff2'); 
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
@font-face {
  font-family: 'Abyan';
  src: url('fonts/Abyan.woff2') format('woff2'); 
  font-weight: 400;
  font-display: swap;
}
#Abyan h3 {
  font-family: 'Abyan', sans-serif;
  font-size: 3em;
}
@font-face {
font-family: 'Aden';
src: url('fonts/Aden.woff2') format('woff2'); 
font-weight: 400;
font-display: swap;
}
#Aden h3 {
font-family: 'Aden', sans-serif;
font-size: 3em;
}

@font-face {
  font-family: 'Article';
  src: url('fonts/Article.woff2') format('woff2'); 
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Article h3 {
  font-family: 'Article', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'Alghraa';
  src: url('fonts/Alghraa.woff2') format('woff2'); 
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Alghraa h3 {
  font-family: 'Alghraa', sans-serif;
  font-size: 3.5em;
}
@font-face {
font-family: 'Arwa';
src: url('fonts/Arwa.woff2') format('woff2'); 
font-weight: 100 900;
font-stretch: 100% 900%;
font-style: oblique 0deg 15deg;
font-display: swap; /* أو optional */
}
#Arwa h3 {
font-family: 'Arwa', sans-serif;
font-size: 1.5em;
}
@font-face {
font-family: 'Ausan';
src: url('fonts/Ausan.woff2') format('woff2');
font-weight: 100 900;
font-stretch: 100% 900%;
font-style: oblique 0deg 15deg;
font-display: swap; /* أو optional */
}
#Ausan h3 {
font-family: 'Ausan', sans-serif;
font-size: 3em;
}
@font-face {
font-family: 'AusanPro';
src: url('fonts/AusanPro.woff2') format('woff2');
font-weight: 100 900;
font-stretch: 100% 900%;
font-style: oblique 0deg 15deg;
font-display: swap; /* أو optional */
}
#AusanPro h3 {
font-family: 'AusanPro', sans-serif;
font-size: 3em;
}
@font-face {
font-family: 'Bold';
src: url('fonts/Bold.woff2') format('woff2');
font-weight: 100 900;
font-stretch: 100% 900%;
font-style: oblique 0deg 15deg;
font-display: swap; /* أو optional */
}
#Bold h3 {
font-family: 'Bold', sans-serif;
font-size: 3em;
}

@font-face {
  font-family: 'Change';
  src: url('fonts/Change.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Change h3 {
  font-family: 'Change', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'ChangePro';
  src: url('fonts/ChangePro.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#ChangePro h3 {
  font-family: 'ChangePro', sans-serif;
  font-size: 3em;
}
@font-face {
font-family: 'Kleeshay';
src: url('fonts/Kleeshay.woff2') format('woff2');
font-weight: 100 900;
font-stretch: 100% 900%;
font-style: oblique 0deg 15deg;
font-display: swap; /* أو optional */
}
#Kleeshay h3 {
font-family: 'Kleeshay', sans-serif;
font-size: 3em;
}

@font-face {
  font-family: 'Crater';
  src: url('fonts/Crater.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Crater h3 {
  font-family: 'Crater', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'SFDroob';
  src: url('fonts/SFDroob.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#SFDroob h3 {
  font-family: 'SFDroob', sans-serif;
  font-size: 4em;
}

@font-face {
  font-family: 'Droob';
  src: url('fonts/Droob.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Droob h3 {
  font-family: 'Droob', sans-serif;
  font-size: 4em;
}

@font-face {
  font-family: 'Droob7';
  src: url('fonts/Droob7.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Droob7 h3 {
font-family: 'Droob7', sans-serif;
font-size: 3em;
}

@font-face {
  font-family: 'Elias';
  src: url('fonts/Elias.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Elias h3 {
  font-family: 'Elias', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'Free';
  src: url('fonts/Free-Bold.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
#Free h3 {
  font-family: 'Free', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'Graphic';
  src: url('fonts/Graphic.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
#Graphic h3 {
  font-family: 'Graphic', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'Handix';
  src: url('fonts/Handix.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

#Handix h3 {
  font-family: 'Handix', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'Handwriting-Bold';
  src: url('fonts/Handwriting-Bold.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

#Handwriting h3 {
  font-family: 'Handwriting-Bold', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'Hilaal';
  src: url('fonts/Hilaal.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Hilaal h3 {
  font-family: 'Hilaal', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'Hussein';
  src: url('fonts/Hussein.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

#Hussein h3 {
  font-family: 'Hussein', sans-serif;
  font-size: 4em;
}

@font-face {
  font-family: 'Khaled';
  src: url('fonts/Khaled-Bold.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
#Khaled h3 {
  font-family: 'Khaled', sans-serif;
  font-size: 2.5em;

}

@font-face {
  font-family: 'Kitab';
  src: url('fonts/Kitab.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
#Kitab h3 {
  font-family: 'Kitab', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'Liner';
  src: url('fonts/Liner.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
#Liner h3 {
  font-family: 'Liner', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'Mada';
  src: url('fonts/Mada.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Mada h3 {
  font-family: 'Mada', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'MadaV2';
  src: url('fonts/MadaV2.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#MadaV2 h3 {
  font-family: 'MadaV2', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'Medad';
  src: url('fonts/Medad.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Medad h3 {
  font-family: 'Medad', sans-serif;
  font-size: 3em;
}
@font-face {
font-family: 'Mabsut';
src: url('fonts/Mabsut.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
#Mabsut h3 {
font-family: 'Mabsut', sans-serif;
font-size: 3em;
}
@font-face {
font-family: 'Manchit';
src: url('fonts/Manchit.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
#Manchit h3 {
font-family: 'Manchit', sans-serif;
font-size: 3em;
}
@font-face {
font-family: 'Mayyun';
src: url('fonts/Mayyun.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
#Mayyun h3 {
font-family: 'Mayyun', sans-serif;
font-size: 3em;
}
@font-face {
  font-family: 'Mettle';
  src: url('fonts/Mettle.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Mettle h3 {
  font-family: 'Mettle', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'Mohamed';
  src: url('fonts/Mohamed.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
#Mohamed h3 {
  font-family: 'Mohamed', sans-serif;
  font-size: 3em;
}
@font-face {
font-family: 'Moon';
src: url('fonts/Moon.woff2') format('woff2');
font-weight: 100 900;
font-stretch: 100% 900%;
font-style: oblique 0deg 15deg;
font-display: swap; /* أو optional */
}
#Moon h3 {
font-family: 'Moon', sans-serif;
font-size: 3em;
}

@font-face {
  font-family: 'Motif';
  src: url('fonts/Motif.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Motif h3 {
  font-family: 'Motif', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'Mukalla';
  src: url('fonts/Mukalla.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Mukalla h3 {
  font-family: 'Mukalla', sans-serif;
  font-size: 3em;
}
@font-face {
font-family: 'Musnad';
src: url('fonts/Musnad.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
#Musnad h3 {
font-family: 'Musnad', sans-serif;
font-size: 3em;
}
@font-face {
font-family: 'Nada';
src: url('fonts/Nada.woff2') format('woff2');
font-weight: 100 900;
font-stretch: 100% 900%;
font-style: oblique 0deg 15deg;
font-display: swap; /* أو optional */
}
#Nada h3 {
font-family: 'Nada', sans-serif;
font-size: 3.5em;
}

@font-face {
  font-family: 'Nahia';
  src: url('fonts/Nahia-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
#Nahia h3 {
  font-family: 'Nahia', sans-serif;
  font-size: 3em;
}

  @font-face {
    font-family: 'News';
    src: url('fonts/News-Bold.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
  }
  #News h3 {
    font-family: 'News', sans-serif;
    font-size: 3em;
    }

    @font-face {
      font-family: 'Nishan';
      src: url('fonts/Nishan.woff2') format('woff2');
      font-weight: 100 900;
      font-stretch: 100% 900%;
      font-style: oblique 0deg 15deg;
      font-display: swap;
    }
    #Nishan h3 {
      font-family: 'Nishan', sans-serif;
      font-size: 3em;
    }
    
@font-face {
font-family: 'NizarPro';
src: url('fonts/NizarPro-Bold.woff2') format('woff2');
font-weight: 400;
font-display: swap;
font-size: 3em;
}
#NizarPro h3 {
font-family: 'NizarPro', sans-serif;
font-size: 3em;
}
@font-face {
font-family: 'Nizar';
src: url('fonts/Nizar.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
#Nizar h3 {
font-family: 'Nizar', sans-serif;
font-size: 3em;
}

@font-face {
font-family: 'Noha';
src: url('fonts/Noha.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
#Noha h3 {
font-family: 'Noha', sans-serif;
font-size: 3em;
}

@font-face {
  font-family: 'Oxagon';
  src: url('fonts/Oxagon.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Oxagon h3 {
  font-family: 'Oxagon', sans-serif;
  font-size: 3em;
}
@font-face {
  font-family: 'Oxagon';
  src: url('fonts/Oxagon.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Oxagon h3 {
  font-family: 'Oxagon', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'Pastel';
  src: url('fonts/PastelPink.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
#Pastel h3 {
  font-family: 'Pastel', sans-serif;
  font-size: 3em;
}
@font-face {
font-family: 'Plain';
src: url('fonts/Plain.woff2') format('woff2');
font-weight: 100 900;
font-stretch: 100% 200%;
font-style: oblique 0deg 15deg;
font-display: swap; /* أو optional */
}
#Plain h3 {
font-family: 'Plain', sans-serif;
font-size: 3em;
}
@font-face {
font-family: 'Pumice';
src: url('fonts/Pumice.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
#Pumice h3 {
font-family: 'Pumice', sans-serif;
font-size: 3em;
}

@font-face {
  font-family: 'Qalam';
  src: url('fonts/Qalam.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Qalam h3 {
  font-family: 'Qalam', sans-serif;
  font-size: 3em;
}
@font-face {
font-family: 'Qaws';
src: url('fonts/Qaws.woff2') format('woff2');
font-weight: 100 900;
font-stretch: 100% 900%;
font-style: oblique 0deg 15deg;
font-display: swap; /* أو optional */
}
#Qaws h3 {
font-family: 'Qaws', sans-serif;
font-size: 3em;
}

@font-face {
  font-family: 'Rasmi';
  src: url('fonts/Rasmi.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 200%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Rasmi h3 {
  font-family: 'Rasmi', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'Respect';
  src: url('fonts/Respect.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 200%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Respect h3 {
  font-family: 'Respect', sans-serif;
  font-size: 3em;
}
@font-face {
font-family: 'RuqahPro';
src: url('fonts/RuqahPro-Bold.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
#RuqahPro h3 {
font-family: 'RuqahPro', sans-serif;
font-size: 3em;
}
@font-face {
font-family: 'Ruqah';
src: url('fonts/RuqahLongo-Bold.woff2') format('woff2');
font-weight: 400;
font-display: swap;
font-size: 3em;
}
#Ruqah h3 {
font-family: 'Ruqah', sans-serif;
font-size: 3em;
}
@font-face {
font-family: 'Saggar';
src: url('fonts/Saggar.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
#Saggar h3 {
font-family: 'Saggar', sans-serif;
font-size: 3em;
}
@font-face {
  font-family: 'Saladin';
  src: url('fonts/Saladin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 200%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Saladin h3 {
  font-family: 'Saladin', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'Seen';
  src: url('fonts/Seen.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 200%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Seen h3 {
  font-family: 'Seen', sans-serif;
  font-size: 3em;
}
@font-face {
font-family: 'Shabwa';
src: url('fonts/Shabwa.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
#Shabwa h3 {
font-family: 'Shabwa', sans-serif;
font-size: 3em;
}
@font-face {
font-family: 'Solo';
src: url('fonts/Solo.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
#Solo h3 {
font-family: 'Solo', sans-serif;
font-size: 3em;
}
@font-face {
font-family: 'Swollen';
src: url('fonts/Swollen.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
#Swollen h3 {
font-family: 'Swollen', sans-serif;
font-size: 3em;
}

@font-face {
  font-family: 'Spark';
  src: url('fonts/Spark.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
}
#Spark h3 {
  font-family: 'Spark', sans-serif;
  font-size: 3em;
}

@font-face {
  font-family: 'Sultan';
  src: url('fonts/Sultan.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
  }
  #Sultan h3 {
  font-family: 'Sultan', sans-serif;
  font-size: 3em;
}
  
  @font-face {
  font-family: 'Tarim';
  src: url('fonts/Tarim.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 200%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
  }
  #Tarim h3 {
  font-family: 'Tarim', sans-serif;
  font-size: 3em;
}
  @font-face {
    font-family: 'Tawahi';
    src: url('fonts/Tawahi.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
  }
      #Tawahi h3 {
    font-family: 'Tawahi', sans-serif;
    font-size: 3em;
  }

  @font-face {
    font-family: 'Tobba';
    src: url('fonts/Tobba.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
  }
      #Tobba h3 {
    font-family: 'Tobba', sans-serif;
    font-size: 3em;
  }
    @font-face {
      font-family: 'Topic';
      src: url('fonts/Topic.woff2') format('woff2');
      font-weight: 100 900;
      font-stretch: 100% 200%;
      font-style: oblique 0deg 15deg;
      font-display: swap; /* أو optional */
      }
      #Topic h3 {
      font-family: 'Topic', sans-serif;
      font-size: 3em;
    }

  @font-face {
  font-family: 'Trojena';
  src: url('fonts/Trojena.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 200%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
  }
  #Trojena h3 {
  font-family: 'Trojena', sans-serif;
  font-size: 3em;
}
  
  @font-face {
  font-family: 'Vision';
  src: url('fonts/Vision.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100% 900%;
  font-style: oblique 0deg 15deg;
  font-display: swap; /* أو optional */
  }
  #Vision h3 {
  font-family: 'Vision', sans-serif;
  font-size: 3em;
}
  @font-face {
    font-family: 'Yazan';
    src: url('fonts/Yazan.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
  }
      #Yazan h3 {
    font-family: 'Yazan', sans-serif;
    font-size: 3em;
  }
    @font-face {
      font-family: 'Zabur';
      src: url('fonts/Zabur.woff2') format('woff2');
      font-weight: 400;
      font-display: swap;
    }
          #Zabur h3 {
      font-family: 'Zabur', sans-serif;
      font-size: 3em;
}
    
/* Navigation */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 10px 20px;
  position: sticky;
  top: 0;
  z-index: 100; /* ضمان ظهور الشريط فوق العناصر الأخرى */
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav ul li {
  position: relative;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
  display: block;
}

nav ul li a:hover {
  background-color: #555;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 180px;
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  scrollbar-color: #888 #444;
  scrollbar-width: thin;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 14px;
  color: #fff;
  text-decoration: none;
}

.dropdown-menu li a:hover {
  background-color: #666;
}

/* شريط تمرير أنيق */
.dropdown-menu::-webkit-scrollbar {
  width: 6px;
}
.dropdown-menu::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 3px;
}

/* عرض القائمة عند التحويم أو النقر */
.dropdown:hover .dropdown-menu,
.dropdown.open .dropdown-menu {
  display: block;
}
/* إعادة تعيين بعض الأنماط الافتراضية */
body {
  text-align: center;
  font-family: 'SFDroob', sans-serif;
  font-weight: 400; /* Regular للنصوص العادية */
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #000;
  color: #fff;
  transition: all 0.3s ease;
}

/* تنسيق الهيدر */
header {
  background-color: #1a1a1a;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

header h1 {
  margin: 0;
  font-size: 2.5em;
  font-family: 'SFDroob', sans-serif;
  font-weight: 900; /* Black للشعار */
}

header > div {
  font-family: 'SFDroob', sans-serif;
  font-size: 1.5em;
  font-weight: 900; /* Black لـ "Sultan Fonts" */
  color: #fff;
  margin-left: 10px;
}

/* القسم الرئيسي */
.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('images/background.webp');
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 100px 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 400px;
}

.hero h2 {
  font-size: 2.5em;
  margin: 0;
  font-family: 'SFDroob', sans-serif;
  font-weight: 900; /* Black للعنوان */
}

.hero p {
  font-size: 1.2em;
  margin: 0;
  font-family: 'SFDroob', sans-serif;
  font-weight: 400; /* Regular للنص */
}

.hero button {
  background-color: #007bff;
  border: none;
  padding: 15px 30px;
  color: #fff;
  font-size: 1.1em;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'SFDroob', sans-serif;
  font-weight: 400; /* Regular للزر */
}

.hero button:hover {
  background-color: #0056b3;
}

/* معرض الصور (Carousel) */
.carousel {
width: 100%;
overflow: hidden;
position: relative;
margin-bottom: 20px;
}

.carousel-inner {
display: flex;
transition: transform 0.5s ease;
width: 100%;
}

.carousel-item {
flex: 0 0 100%;
height: 200px;
}

.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
}

.carousel-item img:hover {
opacity: 0.8;
}

.carousel-control {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
border: none;
color: #fff;
font-size: 24px;
padding: 10px 15px;
cursor: pointer;
z-index: 1;
border-radius: 5px;
}

.carousel-control.prev {
left: 10px;
}

.carousel-control.next {
right: 10px;
}

/* الأقسام */
.sections {
display: flex;
justify-content: center;
gap: 20px;
padding: 20px 10px;
flex-wrap: wrap;
}

.section {
background-color: #1a1a1a;
padding: 10px 10px;
border-radius: 5px;
border-top: 0.5px solid rgb(150, 150, 150);
flex: 1 1 calc(25% - 20px); /* 4 أقسام في كل سطر */
text-align: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
min-width: 220px; /* يضمن شكل مرتب */
}

.section:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.section h3 {
margin: 0;
font-size: 2.5em;
font-family: 'SFDroob', sans-serif;
font-weight: 900;
}

.section button {
background-color: #0070ba;
border: none;
padding: 0;
color: #fff;
font-size: 2em;
border-radius: 5px;
cursor: pointer;
font-family: 'SFDroob', sans-serif;
font-weight: 100;
transition: background-color 0.3s ease, transform 0.3s ease;
}

.section button:hover {
background-color: #007bff;
transform: translateY(-5px);
}
.section-img {
width: 100%;        /* الصورة تملأ عرض القسم */
height: auto;       /* الارتفاع يتناسب مع العرض */
border-radius: 5px; /* زوايا ناعمة مثل الصندوق */
object-fit: cover;  /* تقطيع ذكي للصورة داخل الإطار */
max-height: 200px;  /* حد أقصى للارتفاع حتى لا تكبر كثير */
}

/* شاشات التابلت */
@media (max-width: 992px) {
.section {
    flex: 1 1 calc(33.33% - 20px); /* 3 أقسام في السطر */
}
}

/* شاشات الجوال */
@media (max-width: 600px) {
.section {
    flex: 1 1 calc(50% - 20px); /* 2 أقسام في السطر */
}
}

/* جوالات صغيرة جدًا */
@media (max-width: 400px) {
.section {
    flex: 1 1 100%; /* قسم واحد بالسطر */
}
}
/* التذييل */
footer {
  background-color: #414040;
  padding: 20px 0;
  text-align: center;
  margin-top: auto;
  border-top: 1px solid #333;
}

footer p {
  margin: 5px 0;
  font-family: 'SFDroob', sans-serif;
  font-weight: 400; /* Regular للنص */
}

/* التصميم المتجاوب */
@media (max-width: 768px) {
  .hero {
      padding: 50px 10px;
      min-height: 250px;
      gap: 10px;
  }

  .hero h2 {
      font-size: 1.5em;
  }

  .hero p {
      font-size: 0.9em;
  }

  .hero button {
      font-size: 0.8em;
      padding: 10px 20px;
  }

  .sections {
      flex-wrap: wrap;
  }

  .section {
      width: calc(50% - 40px);
  }
}

@media (max-width: 480px) {
  .section {
      width: 100%;
  }
}
/* حجم الخط الأساسي */
html {
  font-size: 16px;
}

body {
  font-family: 'SFDroob', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

/* حجم الخط للعناوين */
header h1 {
  font-size: 2.5rem; /* 40px */
  font-weight: 900;
}

header > div {
  font-size: 1.5rem; /* 24px */
  font-weight: 900;
}

.hero h2 {
  font-size: 2rem; /* 32px */
  font-weight: 900;
}

.hero p {
  font-size: 1.2rem; /* 19.2px */
  font-weight: 400;
}

.section h3 {
  font-size: 4rem; /* 24px */
  font-weight: 900;
}

/* حجم الخط للأزرار */
button {
  font-size: 1rem; /* 16px */
  font-weight: 400;
}

/* حجم الخط للروابط */
a {
  font-size: 1rem; /* 16px */
  font-weight: 400;
}

/* التصميم المتجاوب */
@media (max-width: 768px) {
  html {
      font-size: 14px;
  }

  header h1 {
      font-size: 2rem; /* 28px */
  }

  header > div {
      font-size: 1.25rem; /* 20px */
  }

  .hero h2 {
      font-size: 1.75rem; /* 24.5px */
  }

  .hero p {
      font-size: 1rem; /* 14px */
  }

  .section h3 {
      font-size: 1.25rem; /* 17.5px */
  }
}

@media (max-width: 480px) {
  html {
      font-size: 12px;
  }

  header h1 {
      font-size: 1.75rem; /* 21px */
  }

  header > div {
      font-size: 1rem; /* 12px */
  }

  .hero h2 {
      font-size: 1.5rem; /* 18px */
  }

  .hero p {
      font-size: 0.9rem; /* 10.8px */
  }

  .section h3 {
      font-size: 1rem; /* 12px */
  }
}
a {
  text-decoration: none !important;
}
.btn {
  text-decoration: none !important;
}

@keyframes animateFontFull {
  0% {
    font-variation-settings: 'wght' 100, 'wdth' 100, 'KSHD' 100, "ital" 0;
    transform: scale(1);
  }
  20% {
    font-variation-settings: 'wght' 300, 'wdth' 125, 'KSHD' 130, "ital" 0,3;
    transform: scale(1.03);
  }
  40% {
    font-variation-settings: 'wght' 600, 'wdth' 160, 'KSHD' 170, "ital" 0.7;
    transform: scale(1.08);
  }
  60% {
    font-variation-settings: 'wght' 900, 'wdth' 200, 'KSHD' 200, "ital" 1;
    transform: scale(1.15);
  }
  80% {
    font-variation-settings: 'wght' 500, 'wdth' 140, 'KSHD' 150, "ital" 0,5;
    transform: scale(1.05);
  }
  100% {
    font-variation-settings: 'wght' 100, 'wdth' 100, 'KSHD' 100, "ital" 0;
    transform: scale(1);
  }
}

.animated-font {
  animation: animateFontFull 7s infinite cubic-bezier(0.4, 0.0, 0.2, 1);
  display: inline-block;
  transition: transform 0.4s ease-in-out;
}
  
.animated-font {
  animation: animateFontFull 6s infinite ease-in-out;
  display: inline-block;
  transition: transform 0.3s ease-in-out;
}

footer a {
  color: #fff;
  text-decoration: none;
  font-family: 'SFDroob', sans-serif;
  font-weight: 400; /* Regular للرابط */
}

footer a:hover {
  color: #ddd;
}

/* نافذة الدردشة */
#chat-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #007bff;
  border-radius: 50%;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

#chat-icon:hover {
  background-color: #0056b3;
}

#chat-window {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 300px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  color: #000;
  display: none;
  z-index: 1000;
}

.chat-header {
  background-color: #007bff;
  color: #fff;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header h3 {
  margin: 0;
  font-size: 16px;
  font-family: 'SFDroob', sans-serif;
  font-weight: 900; /* Black للعنوان */
}

#close-chat {
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.chat-body, .chat-footer {
  padding: 10px;
}

#chat-message {
  resize: none;
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-family: 'SFDroob', sans-serif;
  font-weight: 400; /* Regular للنص */
}

#send-message {
  width: 100%;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'SFDroob', sans-serif;
  font-weight: 400; /* Regular للزر */
}

#send-message:hover {
  background-color: #0056b3;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
gap: 5px; /* مسافة بين العناصر */
}

.pagination button {
padding: 8px 12px;
border: 1px solid #ccc;
background-color: #f8f8f8;
color: #333;
cursor: pointer;
border-radius: 5px;
font-size: 1em;
transition: background-color 0.3s ease;
margin-bottom: 10px;
}

.pagination button:hover {
background-color: #eee;
}

.pagination button.active {
background-color: #007bff; /* لون الصفحة النشطة */
color: white;
border-color: #007bff;
}

.pagination-separator, .pagination-dots {
margin: 0;
padding: 8px 0; /* محاذاة عمودية مع الأزرار */
border: none;
background: none;
cursor: default;
font-size: 1em;
line-height: inherit;
color: #777; /* لون الفواصل والنقاط */
}

.pagination button:disabled {
opacity: 0.6;
cursor: not-allowed;
}  


.modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); padding-top: 60px; direction: rtl; }
.modal-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 700px; border-radius: 8px; position: relative; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); }
.close-button { color: #aaa; float: left; font-size: 28px; font-weight: bold; cursor: pointer; }
.close-button:hover, .close-button:focus { color: black; text-decoration: none; }
.modal-body { padding: 10px 0; text-align: right; }
.modal-body h2 { text-align: center; margin-bottom: 20px; color: #333; }
.font-info-modal-card { background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 5px; padding: 10px 15px; margin-bottom: 10px; }
.font-info-modal-card h3 { color: #555; margin-top: 0; margin-bottom: 5px; font-size: 1.1em; }
.font-info-modal-card p { margin: 0; font-size: 0.95em; color: #666; }