body {
  background-color: #f8f9fa;
  padding-top: 70px;
}

.hero {
  height: 90vh;
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
              url('../assets/img/hero.jpg') center/cover no-repeat;
}

.nav-link {
  font-size: 1.1rem;
  transition: color .3s ease;
}

.nav-link:hover {
  color: #ffc107 !important;
}

.offcanvas {
  border-left: 2px solid rgba(255,255,255,0.2);
}





.carousel-section {
  max-width: 100%;
  margin: auto;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.carousel-caption {
  background: rgba(0,0,0,0.5);
  border-radius: 8px;
  padding: 10px 20px;
}

.carousel-caption h5 {
  font-weight: 700;
  color: #ffc107;
}

.carousel-caption p {
  color: #fff;
}




/* FEATURES SECTION */
.features-section {
  margin-top: 50px;
}

/* Feature Boxes */
.feature-box {
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  transition: transform .3s ease, box-shadow .3s ease;
  border-radius: 15px;
}

/* Background Images */
.bg-1 {
  background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
                    url('../assets/img/feature1.png');
background-position: left;
}

.bg-2 {
  background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
                    url('../assets/img/feature2.png');
background-position: right;  
}

.bg-3 {
  background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
                    url('../assets/img/feature3.png');
}



/* Hover Effect */
.feature-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}


.footer-links a {
  color: #f8f9fa;
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
  transition: color .3s ease;
}

.footer-links a:hover {
  color: #ffc107;
}

.social-icons a {
  font-size: 28px;
  color: #f8f9fa;
  transition: color .3s ease;
}

.social-icons a:hover {
  color: #ffc107;
}

footer hr {
  opacity: 0.3;
}


/* HERO VIDEO SECTION */
.hero-video-section {
  position: relative;
  height: 95vh;
  overflow: hidden;
}

/* Background Video */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark Overlay */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55));
}

/* Content */
.hero-content {
  position: relative;
  z-index: 2;
}

/* Floating Icons */
.floating-icons .float-icon {
  position: absolute;
  font-size: 60px;
  color: #ffc107;
  opacity: 0.85;
  animation: float 6s ease-in-out infinite;
}

.icon-1 { top: 20%; left: 10%; animation-delay: 0s; }
.icon-2 { top: 60%; right: 12%; animation-delay: 1.5s; }
.icon-3 { bottom: 15%; left: 45%; animation-delay: 3s; }

/* Floating Animation */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

/* Biography Hero */
.bio-hero {
  height: 50vh;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
              url('../assets/img/bio-bg.jpg') center/cover no-repeat;
}

/* Timeline */
.timeline {
  list-style: none;
  padding-left: 0;
}

.timeline li {
  padding: 12px 0;
  border-left: 3px solid #5C4033;
  padding-left: 15px;
  margin-left: 10px;
}

.timeline li span {
  font-weight: bold;
  color: #5C4033;
}


/* Latest News Hero */
.news-hero {
  height: 45vh;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
              url('../assets/img/news-bg.jpg') center/cover no-repeat;
}

/* News Cards */
.news-card img {
  height: 220px;
  object-fit: cover;
}

.news-card:hover {
  transform: translateY(-8px);
  transition: .3s ease;
}


/* Media Hero */
.media-hero {
  height: 45vh;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
              url('../assets/img/media-bg.jpg') center/cover no-repeat;
}

/* Gallery Images */
.gallery-img {
  height: 220px;
  width: 100%;
  object-fit: cover;
  transition: .3s ease;
}

.gallery-img:hover {
  transform: scale(1.05);
}


/* Live Stream Hero */
.live-hero {
  height: 45vh;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
              url('../assets/img/live-bg.jpg') center/cover no-repeat;
}



/* Join Silsilah Hero */
.join-hero {
  height: 45vh;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
              url('../assets/img/join-bg.jpg') center/cover no-repeat;
}


/* Shajarah Hero */
.shajarah-hero {
  height: 45vh;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
              url('../assets/img/shajarah-bg.jpg') center/cover no-repeat;
}

/* PDF Viewer */
.pdf-container {
  height: 80vh;
  overflow: hidden;
}

.pdf-frame {
  width: 100%;
  height: 100%;
  border: none;
}


/* Contact Hero */
.contact-hero {
  height: 45vh;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
              url('../assets/img/contact-bg.jpg') center/cover no-repeat;
}