/* fonts  */

@font-face {
  font-family: "myFont";
  src: url(/assets/fonts/Ahsing-Regular.ttf);
}
@font-face {
  font-family: "myFonttwo";
  src: url(/assets/fonts/CYRVETIC.ttf);
}
@font-face {
  font-family: "myFontthree";
  src: url(/assets/fonts/DroidArabicNaskh.ttf);
}
@font-face {
  font-family: "myFontfour";
  src: url(/assets/fonts/PlaypenSans.ttf);
}
@font-face {
  font-family: "myFontfive";
  src: url(/assets/fonts/Montserrat-Arabic-Regular.ttf);
}
@font-face {
  font-family: "myFontsix";
  src: url(/assets/fonts/Droid.Arabic.Kufi_DownloadSoftware.iR_.ttf);
}
 /* KeyFrames  */

@keyframes left {
  0%{
    transform: translateX(-2000px);
    
  }
  100%{
   transform: translateX(0);
    
  }
}
/* Toggle Color  */
.black-back{
  background: rgb(137, 131, 135);
  background: linear-gradient(
    135deg,
    rgba(137, 131, 135, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );
}

.light-back{
  background: rgb(191,191,191);
  background: linear-gradient(135deg, rgba(191,191,191,1) 0%, rgba(232,226,230,1) 50%, rgba(157,35,35,1) 100%);
}

.image-label-white{
  color: white !important;
}
.image-label-dark{
  color: rgb(0, 0, 0);
}
/* loader spinner  */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000070; /* خلفية سوداء */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  
}

/* إخفاء شاشة التحميل بعد انتهاء الصفحة */
.hidden {
  display: none;
}
/* General Styles */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  /* scroll-behavior: smooth; */
  scroll-snap-type: y proximity;
}
section {
  scroll-snap-align: start;
}
body {
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Header Styles */
header {
  height: 100vh;
  background: rgb(137, 131, 135);
  background: linear-gradient(
    135deg,
    rgba(137, 131, 135, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );
}
body{
  scroll-snap-type: y mandatory;
            overflow-y: scroll;
            height: 100vh;
}
header * {
  z-index: 10;
}
/* navbar  Start*/

.navbar {
  margin-top: -10px;
  position: fixed;
  z-index: 1000;
}
.navbar-nav .nav-link {
  color: white !important;
}
.nav-item {
  padding-left: 18px;
}
.navbar-nav {
  margin-right: 30px;
}
.navbar-collapse{
  animation: left .8s  ease forwards;
}
.navbar .dropdown-toggle::after {
  display: none;
}
.navbar-brand img {
  width: auto;
  height: 70px;
  position: relative;
  right: 15px;
  animation: left .8s ease forwards;
}

#home,
#about,
#burger{
  transition: all 0.3s ease-in-out;
}
#home:hover,
#about:hover,
#burger:hover{
  color:#991515 !important;

}
.navbar.scrolled {
  background-color: black !important;
  transition: background-color 0.3s;
}
.dropdown-menu {
  background-color: black !important;
}

.dropdown-item {
  color: white !important;
}

.dropdown-item:hover {
  background-color: #333333 !important; /* Dark gray instead of white */
  color: white !important; /* Keep the text visible */
}
/* Navbar End */
/* header Start */

.Welcome {
  font-family: myFont;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 10;
  height: 100vh;
  h1 {
    color: white;
    font-size: 220px;
   
    text-shadow: 0px 20px 15px #991515;
    transition: all 0.8s ease-in-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  h1:hover{
    transform: scale(1.03);
  }
  .primary-text {
    color: rgba(217, 217, 217, 0.68);
    position: relative;
    right: 125px;
    top: 100px;
  }
  .secondary-text {
    color: rgba(217, 217, 217, 0.68);
    position: relative;
    right: -170px;
    top: -10px;
  }
}

.creation-date {
  color: white;
  position: relative;
  transform: rotate(-90deg);
  left: 45%;
  word-spacing: 10px;
  top: 15px;
  
  .create-2013 {
    letter-spacing: 5px;
  }
}

.link-yfi {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -180px;
  left: 25px;
  margin: 10px;
  transition: all 0.3s ease-in-out;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
.link-yfi:hover,
.link-yfi-2:hover{
  background-color: #991515;
  color: white ;
}
 i{
  cursor: pointer;
 }
/* Header End */

/* Events Start  */
.events {

  height: 100vh;
}

.slider-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  margin: auto;
  
}
.event-title {
  display: flex;
  justify-content: left;
  align-items: center;
  animation: left .8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  h1 {
    color: white;
    font-size: 58.4px;
    margin: 30px;
    position: relative;
    right: 0px;
    top: 50px;
  }
}
.slider {
  display: flex;
  align-items: center;
  position: relative;
  width: 90%;
  top: 0px;
  margin: auto;
 
}

.image-list {
  display: flex;
  justify-content: space-around;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  scroll-behavior: smooth;
  transform: translateY(20px);
  gap: 0px;

}
.image-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  h4 {
    position: relative;
    top: 20px;
    color: white;
  }
}



.image-item {
  width: 240px; /* حجم الصورة */
  height: 300px; /* حجم الصورة */
  object-fit: cover;
  margin: 0 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  position: relative;
  top: 10px;
  transition: all 0.3s ease-in-out;
}
.image-item:hover {
  transform: scale(1.1);
  transform: translateY(-7px);
}

.left-button,
.right-button {
  cursor: pointer;
  font-size: 24px;
  background: rgba(0, 0, 0, 0); /* Add a semi-transparent background */
  color: rgb(255, 255, 255);
  padding: 10px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10; /* Ensure buttons appear above images */
}

.left-button {
  left: -25px;
}

.right-button {
  right: -10px;
}


/* Events End  */
/* History Start  */
.history {
  height: 100vh;

  display: flex;
  flex-direction: row;
}
.history-left-side {
  width: 44vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-left: 5%;
  h1 {
    color: white;
    font-size: 51.6px;
    position: relative;
    bottom: -20px;
    animation: left 1s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  h4 {
    color: white;
    font-size: 12.7px;
    position: relative;
    bottom: -20px;
    animation: left 1s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  p {
    color: white;
    font-size: 17.6px;
    text-align: center;
    position: relative;
    top: 70px;
    animation: left 1s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
}
.history-right-side {
  display: inherit;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  img {
    width: 356px;
    height: 406px;
    border-radius: 30px;
    position: relative;
    right: -150px;
    top: 60px;
    animation: left 1s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
}
/* History End  */
/* Contact Start */
#contact-section{
  background: rgb(137, 131, 135);
  background: linear-gradient(
    135deg,
    rgba(137, 131, 135, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );

}
.contact {
  height: 100vh;
  background: rgb(137, 131, 135);
  background: linear-gradient(
    135deg,
    rgba(137, 131, 135, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  display: flex;
  flex-direction: row;
}
.contact-left-side {
  width: 50vw;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-left: 5%;
  position: relative;
  top: 70px;
  right: 60px;
  animation: left 1s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  h1 {
    color: white;
    font-size: 55px;
    position: relative;
    bottom: -20px;
    text-align: center;
    font-family: "myFontthree", sans-serif;
    letter-spacing: 1px;
  }
  h2 {
    color: white;
    font-size: 30.7px;
    position: relative;
    bottom: -20px;
    text-align: center;
    margin-top: 10px;
    font-family: "myFonttwo";
  }
  h6 {
    color: white;
    font-size: 17.1px;
    position: relative;
    bottom: -20px;
    text-align: center;
    font-family: "myFontfour";
    opacity: 0.74;
  }
  h4 {
    color: white;
    font-size: 12.7px;
    position: relative;
    bottom: -20px;
    text-align: center;
  }
  h5 {
    color: white;
    font-size: 17.1px;
    position: relative;
    bottom: -20px;
    text-align: center;
    font-family: "myFonttwo";
    opacity: 0.74;
  }
  p {
    color: white;
    font-size: 17.6px;
    text-align: center;
    position: relative;
    top: 70px;
    text-align: center;
  }
}
.link-yfi-2 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -90px;
  right: 210px;
  margin: 10px;
  transition: all 0.3s ease-in-out;
  
}
.contact-right-side {
  width: 528px;
  height: 445px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-left: 0;
  position: relative;
  top: 100px;
  right: 20px;
  
  animation: left 1s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
 
  border-radius: 61px;
  box-shadow: -20px 20px 40px 10px rgba(0, 0, 0, 0.5);
  h1 {
    font-family: "myfontthree", sans-serif;
    font-size: 41.3px;
    text-transform: uppercase;
    color: white;
    position: relative;
    top: -10px;
    text-align: center;
  }
  form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  input {
    background-color: rgba(240, 248, 255, 0);
    border: rgba(0, 0, 0, 0) 1px solid;
    border-radius: 0px;
    border-bottom: white 1px solid !important;
    margin: 20px;
    width: 307px;
    color: white;
  }
  #send{
    transition: all 0.3s ease-in-out;
  }
  #send:hover{
    cursor: pointer;
    background-color: #636363;
    box-shadow: 0px 0px 15px #ffffff;
  }
  #phone-input-contact {
    position: relative;
    top: -10px;
  }
  #email-input-contact {
    position: relative;
    top: -2px;
  }
  textarea {
    background-color: rgba(240, 248, 255, 0);
    border: none;
    resize: none;
    border-radius: 0px;
    border-bottom: white 1px solid ;
    margin-bottom: 21px;
    width: 307px;
    color: white;
    height: 26px;
  }
  textarea::placeholder {
    color: white;
  }
  input::placeholder {
    color: white;
  }
  button {
    width: 140px;
    height: 50px;
  
    
    border: none;
    color: white;
    border-radius: 12px;
    box-shadow: 0px 0px 15px black;
  }
}
.contact-box input:focus,
.contact-box textarea:focus {
  border: none; /* تأكيد إزالة كل الحدود */
  border-bottom: 1px solid white; /* الحد السفلي الأبيض عند التركيز */
  outline: none;
}

/* Contact End */

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
background-color: #000000;
height: 100vh;
h4{
  color: #66666670;
  padding: 50px;
}
}


/* CSS */
#home,
#about {
  color: white !important; /* اللون الأبيض كحالة افتراضية */
}

.dark-mode #home,
.dark-mode #about {
  color: black !important; /* اللون الأسود في الوضع الداكن */
}
/* CSS */
.dark-mode ::placeholder {
  color: black !important; /* لون الـ placeholder في الوضع الداكن */
}
input, textarea {
  transition: border-bottom 0.3s ease-in-out; /* تأثير ناعم */
}
footer{
  height: 100%;
  background-color: rgb(9, 9, 45);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  height: 100px;
}
/* loader spinner  */

.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1212126d; /* خلفية سوداء */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* سبينر */
.spinner {
  width: 80px;
  height: 80px;
  border: 8px solid rgba(255, 255, 255, 0.2);
  border-top: 8px solid #b10b0a; /* لون متغير */
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}

/* حركة الدوران */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* إخفاء اللودينج بعد تحميل الصفحة */
.hidden {
  display: none;
}