body {

      font-family: "El Messiri", sans-serif;
      /* font-family: "El Messiri", sans-serif; */
      direction: rtl;
      background-color: #fdfdfdfd;
    }

    /* ====== Navbar ====== */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #eae6db;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      z-index: 1000;
    }

    /* ====== Canva Logo ====== */
    .logoimg {
      width: 200px;
      height: 90px;
      border-radius: 8px;
      overflow: hidden;
      background-image: url(/images/lastlogo1.png);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }

  

    /* ====== Links ====== */
    .nav-links {
      display: flex;
      gap: 25px;
    }

    .nav-links a {
      text-decoration: none;
      color: #5a0029;
      font-weight: 600;
      font-size: 1.5rem;
      transition: background .18s, color .18s;
    }

    .nav-links a:hover {
      color: #f4ca3c;
    }

    /* ====== Hamburger ====== */
    .hamburger {
      width: 40px;
      height: 40px;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: none;
      background: transparent;
    }

    .hamburger span,
    .hamburger span::before,
    .hamburger span::after {
      content: "";
      display: block;
      width: 24px;
      height: 3px;
      background: #222;
      border-radius: 2px;
      transition: 0.3s ease;
      position: relative;
    }

    .hamburger span::before {
      position: absolute;
      top: -8px;
    }

    .hamburger span::after {
      position: absolute;
      top: 8px;
    }

    .hamburger.active span {
      background: transparent;
    }

    .hamburger.active span::before {
      top: 0;
      transform: rotate(45deg);
    }

    .hamburger.active span::after {
      top: 0;
      transform: rotate(-45deg);
    }

    /* ====== Sidebar ====== */
    .sidebar {
      position: fixed;
      top: 0;
      right: -250px;
      width: 250px;
      height: 100vh;
      background: #fdfdfd;
      box-shadow: -4px 0 10px rgba(0,0,0,0.1);
      transition: 0.3s ease;
      padding-top: 80px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      z-index: 1000;
    }

    .sidebar.open {
      right: 0;
    }

    .sidebar a {
      color: #5a0029;
      font-weight: 600;
      font-size: 25px;
      padding: 10px 20px;
      transition: background .18s, color .18s;
    }

    .sidebar a:hover {
      background: #f0f0f0;
    }

    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      opacity: 0;
      pointer-events: none;
      transition: 0.3s;
      z-index: 998;
    }

    .overlay.show {
      opacity: 1;
      pointer-events: all;
    }

/* navbar end  */
/* __---------------------------------- */

/* hero section */

.hero{
  height: 100vh;
  background-color: gray;
  margin-top: 30px;
  padding: 3rem 4rem 2rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background-image: linear-gradient(to  bottom ,#eae6dba4,transparent),url(/images/bg4.png);
  background-position:right;
  background-attachment:fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

.herop1{
  text-align: center;
  font-size: 3rem;
  font-weight: bolder;
  color: #f4ca3c;
}

.herop2{
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: #f1f1f1;
  background-color: rgba(0, 0, 0, 0.219);
  padding: 10px;
  border-radius: 1rem;
  font-family: "Amiri Quran", serif;
}

.herop3{
  width: 65%;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 400;
  color: #e7e4e4f8;
}

/* hero end */
/* __________________________________________ */
/* section 1 start */

.section1{
  padding: 2rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-size: 2rem;
}
.section1part1{
  padding: 5px;
  background-image: linear-gradient(to top, #eae6db,transparent);
  box-shadow:  0 0 10px 0 #bda46077;
  border-radius: 4px;

}
.section1part2{
  width: 40vw;
  text-align: center;
  padding: 10px;
  color: #f4ca3c;
  box-shadow:  0 0 2px 0 #35322a77;
}
.section1part2:hover{
  transform: scale(1.1);
  transition: all 1s;
}


/* section 1 end  */
/* _____________________________--------------------- */

/* section 2 start */
.section2{
  padding: 2rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}
.section2part1{
  font-size: 2rem;
}
.section2part2{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.section2part2card{
  width:32% ;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 #2c2c2c59;
  border: 10px solid #eae6db;
}


.section2part2cardp1{
  color: #5a0029;
  font-size: 2rem;
  font-weight: bold;
}

.section2part2cardp2{
  color: #194b7e;
  font-size: 1.25rem;
  font-weight: 500;
}

.section2part2card:hover{
  background-color: #eae6db;
  border: 2px solid #f4ca3c;  
}

/* ______________------------------------------- */

/* section 3 start */
.section3{
  
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 4rem ;
}
.section3img{
  height: 500px;
  width: 700px;
 background-image: url(/images/quranimg2.png);
  background-position: center;
  background-repeat: no-repeat;
  justify-content: center;
  background-size: cover;
  box-shadow: 0 0 20px 0 #000000;
}


/* <!-- ====== CSS الخاص بالدورات ====== --> */
.section4{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

  :root{
    --card: #ffffff;
    --accent: #0ea5a4;
    --muted:#6b7280;
    --shadow: 0 8px 24px rgba(2,6,23,0.08);
    --radius: 14px;
    --gap: 20px;
  }

  .grid{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:var(--gap);
    direction: rtl;
  }

  @media (max-width:1000px){
    .grid{ grid-template-columns: repeat(2,1fr); }
  }
  @media (max-width:640px){
    .grid{ grid-template-columns: 1fr; padding:0 6px; }
  }

  .card{
    background: linear-gradient(180deg, rgba(255,255,255,0.9), var(--card));
    border-radius: var(--radius);
    padding:18px;
    box-shadow: var(--shadow);
    display:flex;
    gap:14px;
    align-items:flex-start;
    transition: transform .18s ease, box-shadow .18s ease;
    overflow: hidden;
    position:relative;

  }

  .card:hover{
    transform: translateY(-6px);
    box-shadow: 0 20px 40px #0206171f;
  }


  .card .emoji{
    flex: 0 0 64px;
    width:64px;
    height:64px;
    border-radius:12px;
    display:grid;
    place-items:center;
    font-size:28px;
    background: linear-gradient(180deg,#723e2849);
    color:var(--accent);
    box-shadow: 0 6px 18px rgba(14,165,164,0.06) inset;
  }

  .card .meta{
    flex:1;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .meta h2{
    color: #de8a29;
  }
   .meta h5{
    color: #6b7280;
  }


  .corner-tag{
    position:absolute;
    left:14px; /* لأن الصفحة RTL */
    top:14px;
    background: rgba(14,165,164,0.08);
    color:var(--accent);
    padding:6px 8px;
    border-radius:8px;
    font-weight:700;
    font-size:12px;
  }


/* section 5 start
 */
 /* slider */

.carouselcard{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 2rem 4rem;
  background-color: #eae6db;
  height: 100vh;
}

.carouselcardimg{
  width: 210px;
  height: 210px;
  background-image: url(/images/manimg1.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
}
.womenimg{
  background-image: url(/images/womenimg.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.carouselcard p{
  width: 60%;
  text-align: center;
  font-size: 1.5rem;
  color: rgba(46, 46, 46, 0.692);
}

/* يجعل أزرار السلايدر بلون غامق وواضح */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.623); /* لون غامق */
  border-radius: 50%; /* يجعلها دائرية */
  width: 50px;
  height: 50px;
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
}

/* لمسة بسيطة عند المرور بالماوس */
.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  background-color: rgba(0, 0, 0, 1); /* أغمق عند hover */
}


/* section 6 start */

.ad-banner {
  background: linear-gradient(135deg, #8B5E3C, #D4AF37); /* تدرج بني ذهبي */
  color: white;
  margin: 2rem 4rem;
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  border-radius: 12px;
  font-size: 2rem; /* خط أكبر */
  font-weight: bold;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.411);
  animation: pulse 2.5s infinite ease-in-out;
}

.ad-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.15) 100%
  );
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.09);
  }
}


/* section 7 */


.packages-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 50px 20px;
  background-image: url(/images/quranimg6.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  direction: rtl;
  font-family: "Cairo", sans-serif;
}

/* البطاقات العامة */
.package-card {
  width: 300px;
  color: white;
  padding: 25px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.package-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

/* ألوان كل باقة */
.gold {
  background: linear-gradient(to bottom, #8b5e3cd2, #d4af37d8,transparent);
}

.silver {
  background: linear-gradient(135deg, #a0a0a0ce, #dcdcdcce,transparent);
}

/* .bronze {
  background: linear-gradient(135deg, #8c6239b4, #cd8032af);
} */

/* النصوص */
.package-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #eae6db;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.package-detail {
  font-weight: bold;
  color: #000;
  font-size: 1.5rem;
  margin: 10px 0;
  background: #fafafa63;
  padding: 10px;
  border-radius: 8px;
}



/* Section Phone and WhatsApp start */
 .sectionWhatsApp{
  background-color: #369e49;
  width: 3rem;
  height: 3rem;
  padding: 15px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
   position: fixed;
  bottom: 100px;
  left: 20px;
  box-shadow: 0 0px 20px 2px #494948c4;
  animation: volumew 5s linear 2s infinite forwards;
}

@keyframes volumew{
  25%{
    transform: scale(1.1);
    background-color: #3aff5e;
    box-shadow: 0 0 30 0 #494948c4;
  }
}





/* to top button */

 .to-top {
      position: fixed;
      bottom: 100px;
      right: 20px;
      z-index: 9999;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      border: 2px solid #CB7B45;
      box-shadow: 0 2px 20px 2px #252524c4;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      /* مخفي في البداية */
      opacity: 0;
      transform: translateY(12px) scale(0.98);
      pointer-events: none;
      transition: opacity 220ms ease, transform 220ms ease;
  }

  .to-top.show {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
  }

  .to-top:focus {
      outline: 3px solid #ffd700;
      outline-offset: 2px;
  }



/* Footer */
  .foot{
    background-color: #723e28;
    color: #f4ca3c;
    padding: 2rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }

  .footpart1{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;

  }
  
  .footlogo{
    width: 250px;
    height: 150px;
    background-image: url(/images/logo3.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
 
  .description{
    width: 40%;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.808);
  }

  .footlinks ul{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 10px;
  }
  .footlinks ul a{
    font-size: 1.25rem;
    color: #d38754;
  }
  .footlinks ul a:hover{
    font-size: 1.25rem;
    color: #fff8ea;
    border-bottom:2px solid #D4AF37;
    transform: scale(1.2);
    transition: all .1s;
  }

  .foothorizentalline{
    width: 100%;
    height: 2px;
    background-color: #3a1d06a8;
  }
  .developedby:hover{
    transform: scale(1.2);
    color: #fceebf;
    transition: all 1s;
  }

  

@media (max-width: 768px) {
    .nav-links {
      display: none;
    }

    .hamburger {
      display: flex;
    }

    .logoimg{
      /* box-shadow: 0  0 20px 0 black; */
      height: 90px;
      width: 170px;
    }

    /* hero sectiion */
    .hero{
      padding: 1rem 2rem;
      justify-content: center;
      gap: 1.5rem;
      background-image: linear-gradient(to  bottom ,#eae6db59,transparent),url(/images/bg4.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size:cover;

    }

    .herop1{
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
  }

  .herop2{
  font-size: 1.4rem;
  font-weight: 600;
  font-family: "Scheherazade New", serif;
}

.herop3{
  font-size: 1rem;
  font-weight: 500;
  width: 90%;

}

/* section 1 */

.section1{
  padding: 2rem 2rem;
  font-size: 1.5rem;
  font-weight: bold;
}
.section1part1{
  padding: 10px;
  background-image: linear-gradient(to top left, #f1d58b,transparent);
  box-shadow: inset 0 0 10px 0 #35322a77;
  border-radius: 4px;

}

.section1part2{
  width: 90vw;
  /* color: #5a0029; */
  box-shadow:  0 0 5px 0 #2c2920;
  border-radius: 6px;
}
.section1part2:hover{
  transform: scale(1);
}

/* section 2 */

.section2{
  padding: 2rem 2rem;
}
.section2part1{
  font-size: 1.5rem;
  font-weight: bold
}

.section2part2{
  flex-direction: column;
  background-color: #f4c93c62;
  padding: 20px 0;
}
.section2part2card{
  width:90% ;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 #222121c4;
  border: 0px solid #194b7e;
  background-color: white;
}
.section2part2cardp1{
  font-size: 1.5rem;
}

/* section 3 */
.section3{
  padding: 0 2rem ;
}
.section3img{
  background-size: contain;
  box-shadow: 0 0 0 0 black;
}

/* section 5 start */

.carouselcard{
  padding: 0 1rem;
  text-align: center;
  height: 70vh;
}

.carouselcardimg{
  width: 130px;
  height: 130px;
  border-radius: 50%;
}

.carouselcard p{
  width: 100%;
  font-size: 1.25rem;
  color: rgba(46, 46, 46, 0.808);
}

/* section 6 */

.ad-banner {
  height: 15vh;
  font-size: 1.5rem;
  margin: 2rem 2rem;
}



/* Footer */

 .foot{
    padding: 1rem 2rem;
  }

  .footpart1{
    flex-direction: column;

  }

   .footlogo{
    width: 250px;
    height: 150px;
    
  }

  .description{
    width: 100%;
    text-align: center;
    font-size: 1.25rem;
  }

   .footlinks ul a{
    font-size: 1.25rem;
    font-weight: bold;
    color: #ffffff;
  }

  .developedby{
    text-align: center;
    padding: 0;
  }

  .developedby:hover{
    transform: scale(1);
    color: #f4ca3c;
  }




}