/* Preloader overlay */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Loader dots */
.loader {
  display: flex;
  gap: 10px;
}

.loader .dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: rgb(226, 174, 42); /* golden */
}

/* Hide preloader after animation */
#preloader.hidden {
  opacity: 0;
  pointer-events: none;
}


/* ============================ General Styles ============================ */

body {
  font-family: 'Nunito', sans-serif;
  background: #fff;
  margin: 0;
  padding: 0;
}

/* ============================ Navbar ============================ */

.navbar-brand {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgb(34, 34, 34);
  font-size: 24px;
}

.nav-link {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgb(34, 34, 34);
  font-size: 18px;
  transition: color 0.4s ease;
}

.nav-link:hover { color: rgb(226, 174, 42); }



.donate-btn {
  background-color: rgb(226, 174, 42);
  color: white;
  font-weight: bold;
  padding: 12px 28px;
  border-radius: 30px;
  transition: 0.3s ease;
  text-decoration: none;
}
.donate-btn:hover {
  background-color: rgb(180, 140, 30);
  color: #fff;
  transform: scale(1.05);
}

/* ============================ Home Section ============================ */

.home { min-height: 80vh; padding: 50px 0; }

.box1 {
  background-image: url(../images/background.jpg);
  min-height: 100vh;
  padding: 60px 0;
  border-radius: 15%;
}

.left-box { display: flex; flex-direction: column; align-items: center; text-align: center; }

.bismillah { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 600; color: #222; }
.ayat { font-family: 'Playfair Display', serif; font-size: 46px; font-weight: 600; line-height: 1.6; color: #222; direction: rtl; text-align: center; margin: 0 0 8px; }
.tarjuma { font-size: 18px; color: #555; line-height: 1.8; margin-top: 12px; text-align: center; }

.imgicon { width: 160px; max-width: 100%; }
.firstimg { max-width: 90%; border-radius: 15%; }

/* ============================ Pillars ============================ */

.section-title { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; color: black; }
.section-subtitle { font-family: 'Playfair Display', serif; font-size: 40px; color: rgb(216, 167, 42); font-weight: 800; }

.pillar-box img {
  width: 200px; height: 250px; object-fit: cover;
  border-radius: 20%; display: block; margin: 0 auto;
  transition: filter 0.3s ease, transform 0.3s ease;
}
.pillar-box:hover img { filter: brightness(65%); transform: scale(1.05); }
.pillar-box h5 { margin-top: 12px; font-size: 28px; font-weight: 700; font-family: 'Playfair Display', serif; }

/* ============================ About Islam ============================ */

.about-islam { background: #f9f9f9; padding: 60px 0; }
.about-text { font-size: 18px; line-height: 1.8; color: #444; margin-bottom: 15px; }
.about-img { border-radius: 15px; max-width: 80%; transition: transform 0.3s ease; }
.about-img:hover { transform: scale(1.05); }

/* ============================ Prophet ============================ */

.prophet-text { font-size: 18px; line-height: 1.8; color: #333; max-width: 800px; margin: 0 auto; }
.hadith { font-size: 20px; font-style: italic; color: #d8a72a; margin: 20px auto; max-width: 700px; border-left: 4px solid #d8a72a; padding-left: 15px; }
.hadith-ref { display: block; margin-top: 5px; font-size: 16px; font-weight: 600; color: #555; }

/* ============================ History ============================ */

.history-section { background-color: #f5f3f3; }
.history-card { background: #f9f9f9; padding: 20px; border-radius: 12px; text-align: center; border-top: 4px solid rgb(226, 174, 42); }
.history-card h4 { font-size: 20px; font-weight: bold; margin-bottom: 12px; }
.history-card p { font-size: 16px; color: #555; }

/* ============================ Footer ============================ */

.footer { background-color: #000; border-top: 3px solid rgb(226, 174, 42); }
.footer-title { font-size: 20px; font-weight: 700; color: rgb(226, 174, 42); margin-bottom: 15px; }
.footer-title span { color: #fff; }
.footer-text { font-size: 15px; color: #fff; line-height: 1.8; }
.footer-links a { color: #fff; font-size: 16px; text-decoration: none; transition: color 0.3s ease; }
.footer-links a:hover { color: rgb(226, 174, 42); }
.footer-contact li { font-size: 15px; color: #fff; margin-bottom: 6px; }
.footer-bottom { border-top: 1px solid #ddd; padding-top: 15px; font-size: 14px; color: #fff; }

/* ============================ Animations ============================ */

@keyframes floatUp { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-15px);} }
@keyframes floatDown { 0%,100% { transform: translateY(0);} 50% { transform: translateY(15px);} }

/* Animate Pillars */
.pillars .row > [class*="col-"]:nth-child(1) .pillar-box { animation: floatUp 4s ease-in-out infinite; }
.pillars .row > [class*="col-"]:nth-child(2) .pillar-box { animation: floatDown 4s ease-in-out infinite; }
.pillars .row > [class*="col-"]:nth-child(3) .pillar-box { animation: floatUp 4s ease-in-out infinite; }
.pillars .row > [class*="col-"]:nth-child(4) .pillar-box { animation: floatDown 4s ease-in-out infinite; }
.pillars .row > [class*="col-"]:nth-child(5) .pillar-box { animation: floatUp 4s ease-in-out infinite; }