body {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  background: linear-gradient(to bottom, rgb(198, 219, 255), rgb(222, 234, 255), #ffffff);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh; 
}

:root {
  --moon-light: #fff;
  --moon-shadow: #333;
    --sky-bg-color: #022f84;
  --sky-border-color: white;
  --direction-color: #022f84;
  --label-color: white;
}

#top-titel{
      color: #031027;

}
#top-titel1{
  color: #000;
}
#top-line{
background-color: #0246C4;
}

    /* هيدر شفاف أولاً */
.navbar-transparent {
      background-color: transparent;
      transition: background-color 0.5s ease, box-shadow 0.5s ease;
    }

    /* خلفية عند التمرير */
.navbar.scrolled {
      background-color: #fff;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

.navbar .bi {
  font-size: 1.4rem;
      cursor: pointer;
    }


    .about-section {
      background-color: #f8f9fa;
      padding: 20px 20px;
      border-radius: 10px;
    }
    .about-title {
      display: flex;
      align-items: center;
      font-size: 1.8rem;
      font-weight: bold;
      color: #022f84;
      margin-bottom: 15px;
    }
    .blue-line {
      width: 6px;
      height: 35px;
      background-color: #022f84;
      margin-left: 12px;
      border-radius: 3px;
    }
    @media (max-width: 576px) {
      .about-title {
        font-size: 1.4rem;
      }
    }


    .section-wrapper {
  width: 95%;
  margin: 0 auto;
}
    .section-title {
      display: flex;
      align-items: center;
      text-align: center;
    }
    .section-title::before,
    .section-title::after {
      content: "";
      flex: 1;
      border-bottom: 1px solid black;
    }
    .section-title::before {
      margin-left: 1rem;
    }
    .section-title::after {
      margin-right: 1rem;
    }




/*لماذا تنضم للجمعية */
#Whyinj h5{
color: #01266c;
}

#Whyinj p{
    text-align: justify;
}

.carousel-wrapper {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  padding-bottom: 10px;
  scroll-behavior: smooth;
  direction: rtl; /* مهم لدعم الاتجاه من اليمين */
}

.card-carousel {
  flex: 0 0 70%;
  scroll-snap-align: start;
  background: white;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.card-carousel h5 {
  color: #022f84;
  font-weight: bold;
}


#themeIcon, .bi-list{
    color: #04225f;
    
}

#mySidebar{
  background-color: #d4e4f5;
  color: #0c234e;
}

.offcanvas-header{
    color: #0c234e;

}

  #mySidebarClose {
    color: #0c234e;         /* غيّر اللون حسب رغبتك */
    font-size: 2rem;    /* حجم الخط */
    cursor: pointer;    /* تغيير شكل المؤشر عند المرور */
    transition: 0.3s;   /* تأثير انتقالي ناعم */
  }





    #lineActive {
      width: 2px;
      background-color: #022f84;
      margin: 0;
      padding: 1px;
      border-radius: 3px;
      align-self: stretch; /* يجعل ارتفاعه يساوي أعلى عنصر في السطر */
    }
    .event-date {
      font-size: 1.2rem;
      white-space: nowrap;
    }





.event-card {
  width: 17rem;
}



.event-img {
  width: 100%;
  height: 272px;
  background-color: #ffffff;           /* الإطار الأبيض */
  padding: 15px;                        /* سمك البورد الأبيض */
  border-radius: 10px 10px 0 0;
  box-sizing: border-box;
  overflow: hidden;
}

.event-img-inner {
  width: 100%;
  height: 100%;
  background-color: #000000;           /* خلفية سوداء */
  border-radius: 6px;                  /* حواف سوداء داخلية */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.event-img-inner img {
  max-height: 90%;
  max-width: 45%;
  object-fit: contain;
}

.event-img-inner.single img {
  max-width: 80%;
}






 .site-footer {
    background-color: #4372a1;
    color: #f2f5f5;
    padding: 30px 0 15px;
    margin-top: 50px;
  }
  
  .quick-links-section {
    text-align: center;
    margin-bottom: 25px;
  }
  
  .footer-title {
    color: #ecf0f1;
    margin-bottom: 20px;
    font-size: 1.4rem;
  }
  
  .quick-links-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }
  
  .quick-link {
    color: #bdc3c7;
    text-decoration: none;
    padding: 5px 10px;
    transition: all 0.3s ease;
    font-size: 0.95rem;
  }
  
  .quick-link:hover {
    color: #3498db;
    transform: translateY(-2px);
  }
  
 .footer-bottom {
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid #34495e;
    margin-top: 20px;
  }
  
  .social-media {
    color: #bdc3c7;
    margin-bottom: 10px;
    font-size: 0.95rem;
  }
  
  .social-handle {
    color: #e8e8e8;
    font-weight: bold;
  }
  
  .copyright-section {
    color: #bdc3c7;
    font-size: 0.9rem;
  }



    #Condition h5{
  color: #01266c;
}




 /* المصورين*/
.photographer-name{
  color: #01153b;
}


.card.bg-semi {
  background-color: rgba(255, 255, 255, 0.7); /* أبيض مع شفافية 80% */
  border: 1px solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(2px); /* يعطي تأثير زجاجي ناعم */
}



.desc-link-btn {
  background: transparent;
  border: none;
  color:rgb(1, 21, 44, 0.5); /* يمكنك تغييره للون الذي تريده */
  text-decoration: underline;
  font-size: 0.9rem;
  padding: 0;
  margin: 0;
  cursor: pointer;
}


.desc-link-btn:hover {
  color:rgb(0, 0, 0, 0.7);
  text-decoration: none;
}

.modal-slide-up .modal-content {
  border-radius: 1rem 1rem 0 0;
  height: 30vh;
  overflow-y: auto;
  pointer-events: auto;
    background: rgba(222, 233, 255);


}

.backLens{
  color: #01153b;
}



        .view-btn {
            border-color:rgb(12, 52, 112);
            color:rgb(12, 52, 112);
            background-color: white;
        }
        .view-btn.active {
            background-color:rgb(12, 52, 112);
            color: white;
        }

                .view-btn1 {
            border-color:rgb(12, 52, 112);
            color:rgb(12, 52, 112);
            background-color: white;
        }
        .view-btn1.active {
            background-color:rgb(12, 52, 112);
            color: white;
                        border-color:rgb(12, 52, 112);

        }





        
.hero-section {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* 🔥 موبايل فقط */
  overflow: hidden;
}

/* ✅ من آيباد وفوق (576px+) نحول إلى fullscreen */
@media (min-width: 576px) {
  .hero-section {
    aspect-ratio: unset;
    height: 80vh;
  }
}




/* الخلفية */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 1s ease-in-out;
  z-index: 1;
}

.hero-bg1 {
  z-index: 2;
  opacity: 1;
}

.hero-bg2 {
  z-index: 1;
  opacity: 0;
}



/* طبقة اللون اللي تغطي */
.color-cover {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to top,  rgb(222, 234, 255), #ffffff);
  z-index: 8;
  border-top-left-radius: 50% 20px;
  border-top-right-radius: 50% 20px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2); /* ظل ناعم من الأعلى */
  transition: height 0.4s ease;
}


.orbit-shape {
  position: absolute;
  bottom: 0;
  width: 200vw;              /* أوسع من الشاشة بنسبة 50% */
  left: 50%;                 /* توسيط */
  transform: translateX(-50%);
  pointer-events: none;
  transition: all 0.6s ease;
}

.orbit-back {
  height: 80vh; /* كان 700px */
  z-index: 4;
  fill: rgb(198, 219, 255);
  fill-opacity: 0.3;
}

.orbit-mid {
  height: 70vh; /* كان 600px */
  z-index: 5;
  fill: rgb(198, 219, 255);
  fill-opacity: 0.6;
}

.orbit-front {
  height: 60vh; /* كان 500px */
  z-index: 6;
  fill: rgb(198, 219, 255);
  fill-opacity: 1;
}


/* النص */
.hero-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999; /* أعلى من المدار الأمامي وغيره */
  text-align: center;
  padding: 0; /* 🔥 مهم */
  margin: 0;
  font-size: 1.4rem;
  color: rgba(1, 38, 108);
  text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.5);
  background: transparent;
}
/* تكبير الخط من 768px وفوق (آيباد) */
@media (min-width: 768px) {
  .hero-text {
    font-size: 1.6rem;
  }
}

/* تكبير أكبر من 1200px (شاشات كبيرة جدًا) */
@media (min-width: 1200px) {
  .hero-text {
    font-size: 1.8rem;
  }
}


/* عند التمرير */
.hero-section.scrolled .color-cover {
  height: 100%;
}

.hero-section.scrolled .hero-text {
  opacity: 0;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* فوق الصور وتحت كل شيء ثاني */
  background: rgba(1, 38, 108,0.3); /* لون غامق خفيف */
  pointer-events: none; /* ما يمنع الضغط */
}