@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-family: IBM Plex Sans Arabic, sans-serif;
}
/* حط ده في ملف الـ CSS */
::selection {
  background-color: #6c0bda; /* غير اللون براحتك */
  color: #ffffff;
}
a {
  text-decoration: none !important;
  color: #fff;
}

/* اقتراح ذكي: رجع الخط بس لما الماوس ييجي عليه (ممتاز لتجربة المستخدم UX) */

/* Animations replacing Framer Motion */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 {
  transition-delay: 100ms;
}
.delay-200 {
  transition-delay: 200ms;
}
.delay-300 {
  transition-delay: 300ms;
}
.delay-400 {
  transition-delay: 400ms;
}

/* Mobile Menu Animation */
#mobileMenu {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

#mobileMenu.show {
  display: block;
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

#mobileMenu.hide-menu {
  opacity: 0;
  transform: translate(-50%, -20px) scale(0.95);
  pointer-events: none;
}
.title {
  color: #6c0bda;
  font-size: 3.5rem;
  font-weight: bolder;
}
.text {
  color: #6c0bda;
  font-weight: bold;
  font-size: xx-large;
}
.btns {
  background-color: #6c0bda;
  text-decoration: none;
  text-align: center;
  color: #fff;
  padding: 15px;
  border-radius: 15px;
  border: 3px solid #000;
  box-shadow: 0px 0px #000;
  transition: all 0.3s ease-in-out;
}
.btns:hover {
  box-shadow: 5px 5px 0px 0px #000;
}
mux-player {
  width: 100%;
  --media-object-fit: cover;
  border-radius: 20px;
  overflow: hidden;
}
.swiper {
  width: 100%;
  padding-bottom: 50px;
}
.swiper-button-prev,
.swiper-button-next {
  background-color: #6c0bda;
  color: #fff;
  padding: 10px;
  border-radius: 50%;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: #6c0bda59;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 18px !important;
}
@media (max-width: 750px){
  mux-player{
    width: 150%;
  }
}