:root{
  --primary:#0b1c39;
  --accent:#c6a85b;
  --light:#f5f4f0;
  --dark:#111;
}

body{
  font-family:'Poppins',sans-serif;
  background:#fff;
  color:#333;
  overflow-x:hidden;
}

html, body{
  height:100%;
}





/* ===============================
   NAVBAR LOGO + BACKGROUND FIX
================================= */

.navbar{
  padding:10px 0;
  min-height:80px;
  background:rgba(0,0,0,0.85); /* darker for visibility */
  backdrop-filter: blur(8px);
  transition:0.4s ease;
}

.navbar.scrolled{
  background:#000; /* solid black on scroll */
}

/* Logo */
.navbar-brand{
  display:flex;
  align-items:center;
}

.nav-logo{
  height:55px;
  width:auto;
  object-fit:contain;
  transition:0.3s ease;
}

/* Slight shrink on scroll */
.navbar.scrolled .nav-logo{
  height:48px;
}

/* Navbar links */
.navbar .nav-link{
  color:#fff !important;
  margin-left:15px;
  font-weight:500;
}

.navbar .nav-link:hover{
  color:var(--accent) !important;
}

/* Toggler */
.navbar-toggler{
  border:none;
}

.navbar-toggler:focus{
  box-shadow:none;
}

.navbar-toggler-icon{
  filter:invert(1);
}

.navbar.scrolled{
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
}


/* ===============================
   HERO SLIDER – PREMIUM VERSION
================================= */

.hero-slider{
  height:95vh;
  min-height:550px;
  position:relative;
  overflow:hidden;
}

/* Fade transition */
.carousel-fade .carousel-item{
  opacity:0;
  transition:opacity 1.2s ease-in-out;
}

.carousel-fade .carousel-item.active{
  opacity:1;
}

/* HERO SLIDE */
.hero-slide{
  height:95vh;
  min-height:550px;
  background-size:cover;
  background-position:center 30%;
  background-repeat:no-repeat;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
}

@media(min-width:1200px){

  .hero-slide{
    background-position:center 25%;
  }

}

@media(max-width:768px){

  .hero-slide{
    background-position:center;
  }

}



/* Background video */
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

/* Softer overlay */
.hero-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
      to bottom,
      rgba(0,0,0,0.35),
      rgba(0,0,0,0.55)
  );
  z-index:1;
}

/* Particles */
.particles-layer{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

/* ===============================
   SUBTLE FLOATING PARTICLES
================================= */


.particle{
  position:absolute;
  width:6px;
  height:6px;
  background:rgba(198,168,91,0.6); /* gold */
  border-radius:50%;
  opacity:0.4;
  animation:floatParticle linear infinite;
}

@keyframes floatParticle{
  from{
    transform:translateY(0) scale(1);
    opacity:0.4;
  }
  to{
    transform:translateY(-120vh) scale(1.3);
    opacity:0;
  }
}


/* Hero Content */
.hero-content{
  position:relative;
  z-index:3;
  max-width:800px;
  padding:20px;
}

/* ===============================
   TEXT ANIMATIONS
================================= */

.hero-content h1{
  font-family:'Playfair Display',serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  text-shadow:0 5px 20px rgba(0,0,0,0.4);
  margin-bottom:18px;
  font-size:clamp(1.8rem, 4vw, 3rem);
  line-height:1.2;

  opacity:0;
  transform:translateY(30px);
  animation:fadeUpTitle 1s ease forwards;
}

.hero-content p{
  font-size:clamp(0.95rem, 1.5vw, 1.15rem);
  margin-bottom:28px;
  font-weight:400;
  opacity:0;
  transform:translateY(30px);
  animation:fadeUpSub 1.2s ease forwards;
  animation-delay:0.3s;
}

.hero-content .btn{
  opacity:0;
  transform:translateY(30px);
  animation:fadeUpBtn 1.2s ease forwards;
  animation-delay:0.6s;
}

@keyframes fadeUpTitle{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes fadeUpSub{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes fadeUpBtn{
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* ===============================
   GLASSMORPHISM BUTTON STYLE
================================= */

/* ===============================
   PREMIUM BUTTON SYSTEM
================================= */

.btn-gold,
.live-btn{
  padding:12px 32px;
  font-weight:600;
  border-radius:50px;
  transition:all 0.3s ease;
  border:none;
  position:relative;
  overflow:hidden;
}

/* GOLD BUTTON */
.btn-gold{
  background:linear-gradient(135deg,#c6a85b,#a8842f);
  color:#111;
  box-shadow:0 6px 20px rgba(198,168,91,0.4);
}

.btn-gold:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(198,168,91,0.6);
  color:#000;
}

/* LIVE BUTTON */
.live-btn{
  background:linear-gradient(135deg,#ff2e2e,#b30000);
  color:#fff;
  box-shadow:0 6px 20px rgba(255,0,0,0.4);
}

.live-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(255,0,0,0.6);
  color:#fff;
}

/* subtle shine animation */
.btn-gold::before,
.live-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.4),transparent);
  transition:0.6s;
}

.btn-gold:hover::before,
.live-btn:hover::before{
  left:100%;
}


/* ===============================
   PROGRESS BAR
================================= */

.slide-progress{
  position:absolute;
  bottom:0;
  left:0;
  height:4px;
  background:var(--accent);
  width:0%;
  animation:progressBar 6s linear infinite;
}

@keyframes progressBar{
  from{width:0%;}
  to{width:100%;}
}


/* ===============================
   SCROLL INDICATOR
================================= */

.scroll-indicator{
  position:absolute;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
}

.scroll-indicator span{
  display:block;
  width:22px;
  height:40px;
  border:2px solid #fff;
  border-radius:20px;
  position:relative;
}

.scroll-indicator span::after{
  content:"";
  position:absolute;
  top:6px;
  left:50%;
  width:6px;
  height:6px;
  background:#fff;
  border-radius:50%;
  transform:translateX(-50%);
  animation:scrollMove 2s infinite;
}

@keyframes scrollMove{
  0%{top:6px; opacity:1;}
  100%{top:20px; opacity:0;}
}



/* ===============================
   COUNTDOWN
================================= */

.countdown-section{
  background:var(--primary);
  padding:40px 0;
  color:#fff;
}

.countdown-timer{
  font-size:1.8rem;
  font-weight:600;
  letter-spacing:2px;
}



/* ===============================
   PERFECT RESPONSIVE SCRIPTURE
================================= */
/* ===============================
   FULL WIDTH PREMIUM SCRIPTURE
================================= */

.scripture-rotation{
  position:relative;
  min-height:70vh;              /* THIS is key */
  display:flex;
  align-items:center;           /* vertical center */
  justify-content:center;
  padding:100px 20px;
  background:radial-gradient(circle at top, #122a56 0%, #000 70%);
  color:#fff;
  text-align:center;
  overflow:hidden;
}

/* Background overlay */
.scripture-rotation::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('/assets/images/light3.png') center/cover no-repeat;
  opacity:0.05;
  pointer-events:none;
}

/* Wrapper */
.scripture-wrapper{
  position:relative;
  max-width:900px;
  width:100%;
  padding:60px 50px;
  border-radius:25px;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
}

/* Text */
.scripture-rotation h4{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,3vw,2.8rem);
  line-height:1.8;
  margin-bottom:25px;
  transition:all 0.6s ease;
}

/* Quotes */
.scripture-rotation h4::before{
  content:"“";
  display:block;
  font-size:3rem;
  color:var(--accent);
  margin-bottom:15px;
  opacity:0.7;
}

.scripture-rotation h4::after{
  content:"”";
  display:block;
  font-size:3rem;
  color:var(--accent);
  margin-top:15px;
  opacity:0.7;
}

.scripture-reference{
  font-size:1rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
}



/* ===============================
   SECTION TITLES
================================= */

.section-title{
  font-family:'Playfair Display',serif;
  font-size:2.1rem;
  margin-bottom:45px;
}



/* ===============================
   PREMIUM CARDS
================================= */

.premium-card{
  border:none;
  border-radius:20px;
  box-shadow:0 15px 35px rgba(0,0,0,0.05);
  transition:0.4s;
}

.premium-card:hover{
  transform:translateY(-8px);
}



/* ===============================
   PREMIUM FOOTER
================================= */

.main-footer{
  background:#0b1c39;
  color:#ccc;
  padding:80px 0 40px 0;
  font-size:0.95rem;
}

.footer-title{
  font-family:'Playfair Display',serif;
  font-size:1.2rem;
  color:#fff;
  margin-bottom:15px;
}

.footer-text{
  line-height:1.7;
}

.footer-text a{
  color:#c6a85b;
  text-decoration:none;
  transition:0.3s ease;
}

.footer-text a:hover{
  color:#fff;
}

.footer-divider{
  border-color:rgba(255,255,255,0.1);
  margin:40px 0 20px 0;
}

.copyright{
  font-size:0.85rem;
  opacity:0.7;
}

/* Mobile spacing */
@media(max-width:768px){
  .main-footer{
    text-align:center;
    padding:60px 20px 30px 20px;
  }
}

/* ===============================
   FOOTER SOCIAL ICONS
================================= */

.footer-social{
  display:flex;
  gap:18px;
  justify-content:flex-start;
}

.footer-social a{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:#c6a85b;
  font-size:18px;
  transition:0.3s ease;
}

.footer-social a:hover{
  background:#c6a85b;
  color:#0b1c39;
  transform:translateY(-4px);
  box-shadow:0 10px 25px rgba(198,168,91,0.5);
}

/* Mobile center */
@media(max-width:768px){
  .footer-social{
    justify-content:center;
  }
}

/* ===============================
   FOOTER LOGO
================================= */

.footer-logo-wrapper{
  display:flex;
  align-items:center;
}

.footer-logo{
  max-width:160px;
  height:auto;
  
  opacity:0.95;
  transition:0.3s ease;
}

.footer-logo:hover{
  opacity:1;
  transform:translateY(-3px);
}

/* Center logo on mobile */
@media(max-width:768px){
  .footer-logo-wrapper{
    justify-content:center;
  }
}



/* ===============================
   MOBILE OPTIMIZATION
================================= */

@media(max-width:768px){

  .hero-slider,
  .hero-slide{
    height:60svh;
    min-height:380px;
  }

  .hero-slide{
    padding-top:80px;
    background-position:center 10%;
  }

  .hero-content{
    padding:15px;
  }

  .hero-content h1{
    font-size:clamp(1.5rem, 6vw, 2rem);
  }

}

/* =====================================================
   APPLE SOCIAL SECTION – FIXED & STABLE VERSION
===================================================== */

.apple-social{
  background:#ffffff;
  padding:120px 0;
  position:relative;
}

/* Section header spacing */
.apple-social .section-title{
  margin-bottom:10px;
}

.apple-social p{
  color:#666;
  font-size:1.05rem;
}

/* GRID */
.social-grid{
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:35px;
  align-items:stretch;
}

/* CARD */
.social-card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:650px; /* use min-height instead of fixed height */
  box-shadow:
    0 15px 40px rgba(0,0,0,0.06),
    0 5px 15px rgba(0,0,0,0.03);
  transition:all 0.35s ease;
  position:relative;
}

/* Hover */
.social-card:hover{
  transform:translateY(-8px);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.12),
    0 10px 30px rgba(0,0,0,0.05);
}

/* LABEL */
.social-label{
  padding:20px 25px;
  font-weight:600;
  font-size:1rem;
  letter-spacing:0.5px;
  border-bottom:1px solid #eee;
  background:#fff;
  flex-shrink:0;
}

/* EMBED WRAPPER (IMPORTANT FIX) */
.social-card iframe,
.social-card .tiktok-embed{
  flex:1;
  width:100%;
  border:none;
  display:block;
  min-height:500px;
}

/* Prevent overflow cutting */
.social-card iframe{
  height:100%;
}

/* Glow Accent */
.social-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  background:radial-gradient(circle at top right,
      rgba(198,168,91,0.12),
      transparent 60%);
  opacity:0;
  transition:0.4s ease;
  pointer-events:none;
}

.social-card:hover::after{
  opacity:1;
}

/* Footer button spacing */
.apple-social-footer{
  margin-top:80px;
  text-align:center;
}

/* =========================
   RESPONSIVE
========================= */

/* Tablet */
@media(max-width:1200px){
  .social-grid{
    grid-template-columns:1fr 1fr;
  }
}

/* Mobile */
@media(max-width:768px){

  .social-grid{
    grid-template-columns:1fr;
  }

  .social-card{
    min-height:600px;
  }

  .apple-social{
    padding:80px 20px;
  }

}

/* ===============================
   PODCAST SECTION
================================= */

.podcast-card{
  background:#fff;
  padding:20px;
  border-radius:15px;
  box-shadow:0 10px 25px rgba(0,0,0,0.05);
  margin-bottom:20px;
  text-align:left;
}

.podcast-card h5{
  font-weight:600;
}

.podcast-card audio{
  width:100%;
  margin-top:10px;
}


/* ===============================
   SPOTIFY STYLE FLOATING PLAYER
================================= */

.floating-player{
  position:fixed;
  bottom:20px;
  right:20px;
  width:360px;
  max-height:85vh;
  background:#121212;
  color:#fff;
  padding:18px;
  border-radius:20px;
  box-shadow:0 25px 50px rgba(0,0,0,0.5);
  z-index:9999;
  cursor:grab;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
  transition:0.3s ease;
}

/* Top section */
.player-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.track-title{
  font-weight:600;
  font-size:15px;
}

.track-sub{
  font-size:12px;
  color:#aaa;
}

.player-actions span{
  margin-left:10px;
  cursor:pointer;
  font-size:18px;
}

/* Waveform */
.waveform{
  display:flex;
  align-items:flex-end;
  gap:4px;
  height:25px;
  opacity:0.5;
}

.waveform span{
  width:4px;
  background:var(--accent);
  height:8px;
  border-radius:3px;
  animation:wave 1s infinite ease-in-out;
}

@keyframes wave{
  0%,100%{height:8px;}
  50%{height:22px;}
}

/* Progress */
.progress-container{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:#aaa;
}

.progress-bar{
  flex:1;
  height:4px;
  background:#333;
  border-radius:10px;
  position:relative;
  cursor:pointer;
}

#progress{
  height:100%;
  width:0%;
  background:var(--accent);
  border-radius:10px;
}

/* Controls */
.player-controls{
  display:flex;
  justify-content:center;
  gap:20px;
}

.player-controls button{
  background:none;
  border:none;
  color:#fff;
  font-size:18px;
  cursor:pointer;
  transition:0.2s;
}

.player-controls button:hover{
  color:var(--accent);
}

/* Playlist scroll */
.floating-playlist{
  max-height:150px;
  overflow-y:auto;
}

.floating-playlist::-webkit-scrollbar{
  width:4px;
}

.floating-playlist::-webkit-scrollbar-thumb{
  background:#333;
  border-radius:10px;
}

/* Mini Mode */
.floating-player.mini{
  height:80px;
  overflow:hidden;
}

.floating-player.mini .waveform,
.floating-player.mini .progress-container,
.floating-player.mini .player-controls,
.floating-player.mini .floating-playlist,
.floating-player.mini .up-next{
  display:none;
}

/* Desktop Height Fix */
@media(min-width:1200px){
  .floating-player{
    bottom:30px;
    right:30px;
    max-height:75vh;
  }
}



/* ===============================
   NETFLIX VIDEO SLIDER
================================= */

.netflix-section{
  background:#000;
  color:#fff;
}

.netflix-wrapper{
  position:relative;
}

.netflix-slider{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:20px 0;
}

.netflix-slider::-webkit-scrollbar{
  display:none;
}

.video-card{
  min-width:320px;
  position:relative;
  border-radius:15px;
  overflow:hidden;
  cursor:pointer;
  transition:0.4s ease;
}

.video-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  transition:0.4s ease;
}

.video-card:hover{
  transform:scale(1.1);
  z-index:5;
}

.video-card:hover img{
  filter:brightness(1.2);
}

/* Arrow Buttons */

.slider-btn{
  position:absolute;
  top:40%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.6);
  color:#fff;
  border:none;
  font-size:30px;
  padding:10px 15px;
  cursor:pointer;
  z-index:10;
  border-radius:50%;
}

.left-btn{ left:0; }
.right-btn{ right:0; }

.playlist-list{
  max-width:600px;
  margin:0 auto;
  text-align:left;
}

.playlist-item{
  padding:12px 15px;
  border-bottom:1px solid #eee;
  cursor:pointer;
  transition:0.3s;
}

.playlist-item:hover{
  background:#f5f5f5;
}

.playlist-item.active{
  background:var(--accent);
  color:#000;
  font-weight:600;
}


/* ===============================
   UP NEXT PREVIEW
================================= */

.up-next{
  background:#1a1a1a;
  padding:8px 12px;
  border-radius:10px;
  font-size:13px;
  margin-bottom:10px;
  color:#ccc;
}

.up-next strong{
  color:var(--accent);
}

/* Highlight Service Name */
.service-name{
  color:var(--accent);
  font-weight:700;
  letter-spacing:0.5px;
}

.timezone-text{
  font-size:12px;
  opacity:0.7;
}

/* Live Glow */
.glow-live{
  color:#ff2e2e;
  font-weight:700;
  animation:liveGlow 1.2s infinite alternate;
}

@keyframes liveGlow{
  from{ text-shadow:0 0 5px #ff0000; }
  to{ text-shadow:0 0 20px #ff0000; }
}

/* Upcoming soft glow */
.glow-upcoming{
  color:var(--accent);
  animation:softGlow 2s infinite alternate;
}

@keyframes softGlow{
  from{ text-shadow:0 0 5px rgba(198,168,91,0.5); }
  to{ text-shadow:0 0 15px rgba(198,168,91,0.9); }
}

/* Live Banner */
.live-indicator{
  margin-top:10px;
  font-weight:700;
  color:#ff2e2e;
  animation:liveGlow 1s infinite alternate;
}

/* ===============================
   MOBILE FIX FOR NETFLIX SLIDER
================================= */

@media(max-width:768px){

  .netflix-section .section-title{
    font-size:1.5rem;
    text-align:center;
  }

  .video-card{
    min-width:240px;
  }

  .video-card img{
    height:160px;
  }

  .slider-btn{
    display:none; /* hide arrows on mobile */
  }

  .netflix-slider{
    gap:12px;
    padding:10px 0;
  }

  .video-overlay{
    font-size:12px;
    padding:6px;
  }

}

.video-overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color:#fff;
  padding:10px;
  font-size:14px;
}

/* Offline State */
.offline-box{
  padding:40px;
  background:#111;
  border-radius:20px;
  color:#fff;
  text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,0.4);
}

@media(max-width:768px){

  body{
    overflow-x:hidden;
  }

  footer{
    margin-bottom:0 !important;
  }

  .py-5{
    padding-bottom:2rem !important;
  }

}

.live-main{
  flex:1;
}

@media(max-width:768px){
  .live-main{
    min-height:calc(100vh - 160px); /* adjust if needed */
  }
}


@media(max-width:768px){
  .floating-player{
    bottom:10px;
  }
}

/* ===============================
   FULLSCREEN LIVE MODE
================================= */

.live-fullscreen{
  position:relative;
  width:100%;
  height:100vh;
  background:#000;
  overflow:hidden;
}

.live-video-wrapper{
  position:absolute;
  inset:0;
}

.live-video-wrapper iframe{
  width:100%;
  height:100%;
  border:none;
}

/* Top overlay title */
.live-overlay-top{
  position:absolute;
  top:90px;
  left:40px;
  z-index:10;
  color:#fff;
  font-weight:700;
  letter-spacing:1px;
}

.live-overlay-top h4{
  background:rgba(0,0,0,0.6);
  padding:10px 20px;
  border-radius:50px;
}

/* Offline Mode */
.live-offline{
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:#000;
  color:#fff;
}

/* Hide footer + floating player in live mode */
.live-fullscreen ~ footer,
.live-fullscreen ~ #floatingPlayer{
  display:none !important;
}

.live-fullscreen ~ .navbar{
  display:none;
}

/* ===============================
   PREMIUM TESTIMONY SLIDER
================================= */

.testimony-section{
  background:linear-gradient(135deg,#0b1c39,#000);
  color:#fff;
  padding:100px 0;
}

.testimony-slide{
  max-width:800px;
  margin:0 auto;
  text-align:center;
}

.testimony-slide img{
  width:110px;
  height:110px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:20px;
  border:3px solid var(--accent);
}

.testimony-text{
  font-size:1.2rem;
  line-height:1.7;
  font-style:italic;
  margin-bottom:20px;
}

.testimony-slide h5{
  font-weight:600;
  color:var(--accent);
}

/* ===============================
   PRAYER SECTION
================================= */

.prayer-section{
  background:#f5f5f5;
}

.prayer-form{
  max-width:700px;
  margin:0 auto;
}

.prayer-form .form-control{
  border-radius:12px;
  padding:12px 15px;
  border:1px solid #ddd;
}

.prayer-form textarea{
  resize:none;
}

.prayer-form .btn{
  border-radius:50px;
}

.pagination .page-item.active .page-link{
  background-color: var(--accent);
  border-color: var(--accent);
  color:#000;
}

#blogCarousel img{
  height:350px;
  object-fit:cover;
}

/* ======================================================
   ABOUT PAGE – CINEMATIC ELEVATION VERSION
   Clean Layer Order + No Conflicts
====================================================== */



/* ======================================================
   TEXT REVEAL ANIMATION
====================================================== */

.reveal-text{
  opacity:0;
  transform:translateY(40px);
  transition:all 1.2s cubic-bezier(0.22,1,0.36,1);
}

.reveal-text.active{
  opacity:1;
  transform:translateY(0);
}

.reveal-text.delay-1{
  transition-delay:0.3s;
}


/* ======================================================
   LUXURY CONTENT BLOCK
====================================================== */

.premium-content{
  padding:140px 0;
  background:#fff;
}

.premium-content p{
  font-size:1.15rem;
  line-height:1.9;
  color:#444;
  margin-bottom:15px;
}


/* ======================================================
   STATEMENT QUOTE SECTION
====================================================== */

.statement-section{
  background:#0b1c39;
  color:#fff;
  padding:140px 20px;
  text-align:center;
  position:relative;
}

.statement-section h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,4vw,3rem);
  font-weight:600;
  max-width:900px;
  margin:0 auto;
  line-height:1.6;
}

.statement-section span{
  display:block;
  margin-top:30px;
  color:#c60000;
  font-weight:600;
  letter-spacing:2px;
}


/* ======================================================
   VISION & MISSION SECTION
====================================================== */

.vision-mission-premium{
  padding:120px 0;
  background:#f8f8f8;
}

.vm-box{
  padding:60px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 30px 60px rgba(0,0,0,0.06);
  height:100%;
  transition:0.4s ease;
}

.vm-box:hover{
  transform:translateY(-10px);
}


/* ======================================================
   LEADERSHIP SECTION
====================================================== */

.leadership-section{
  padding:160px 0;
  background:#fff;
}

.leader-card{
  display:flex;
  align-items:center;
  gap:80px;
  margin-bottom:120px;
}

.leader-card img{
  width:100%;
  max-width:520px;
  border-radius:25px;
  box-shadow:0 40px 80px rgba(0,0,0,0.2);
}

.leader-info h3{
  font-family:'Playfair Display',serif;
  font-size:2rem;
  margin-bottom:10px;
}

.leader-info span{
  color:#c60000;
  font-weight:600;
  letter-spacing:1px;
  display:block;
  margin-bottom:25px;
}

.leader-card.reverse{
  flex-direction:row-reverse;
}

@media(max-width:992px){
  .leader-card,
  .leader-card.reverse{
    flex-direction:column;
    text-align:center;
    gap:40px;
  }
}

@media(max-width:992px){
  .vision-mission-premium{
    padding:80px 0;
  }
}

/* ======================================================
   FINAL CTA
====================================================== */

.premium-cta{
  background:linear-gradient(135deg,#0b1c39,#000);
  color:#fff;
  padding:140px 20px;
  text-align:center;
}

/* ===============================
   PAGE HERO (MESSAGES PAGE)
   Animated Black → Dark Blue
================================= */

.page-hero{
  height:55vh;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:120px; /* prevents navbar overlap */
  color:#fff;
  position:relative;
  overflow:hidden;

  /* Animated Gradient */
  background:linear-gradient(
      -45deg,
      #000000,
      #000814,
      #0b1c39,
      #122a56,
      #000000
  );

  background-size:400% 400%;
  animation:gradientMove 18s ease infinite;
}

/* Smooth gradient animation */
@keyframes gradientMove{
  0%{
    background-position:0% 50%;
  }
  50%{
    background-position:100% 50%;
  }
  100%{
    background-position:0% 50%;
  }
}

/* Soft gold overlay glow */
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(
      circle at center,
      rgba(198,168,91,0.15),
      transparent 60%
  );
  pointer-events:none;
  z-index:1;
}

/* Content above particles + overlay */
.page-hero-content{
  position:relative;
  z-index:2;
  max-width:800px;
  padding:20px;
}

.page-hero h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.2rem,4vw,3.5rem);
  font-weight:700;
  margin-bottom:15px;
}

.page-hero p{
  font-size:1.1rem;
  opacity:0.85;
}

/* Fix spacing below hero */
.page-hero + .py-5{
  padding-top:80px !important;
}


/* ===============================
   DEPARTMENTS SLIDER
================================= */


/* ===============================
   AUTO INFINITE DEPARTMENTS SLIDER
================================= */

.departments-section{
  background:#000;
  padding:100px 0;
}

.departments-wrapper{
  overflow:hidden;
  position:relative;
}

.departments-track{
  display:flex;
  gap:20px;
  width:max-content;
  animation:scrollLoop 40s linear infinite;
}

/* Pause on hover */
.departments-wrapper:hover .departments-track{
  animation-play-state:paused;
}

/* CARD */
.department-card{
  flex:0 0 300px;
  height:380px;
  background:#111;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:0.3s ease;
}

.department-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.department-card:hover{
  transform:translateY(-5px);
}

/* Overlay */
.department-overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:20px;
  background:linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  color:#fff;
  pointer-events:none;
}

/* Seamless animation */
@keyframes scrollLoop{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}

/* MOBILE */
@media(max-width:768px){

  .department-card{
    flex:0 0 240px;
    height:280px;
  }

}

/* ===============================
   LIGHTBOX
================================= */

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.9);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}

.lightbox img{
  max-width:90%;
  max-height:85%;
  border-radius:15px;
}