:root {
  --primary:#1d3557;
  --accent:#457b9d;
  --light:#f1f5f9;
  --dark:#0b2545;
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial;
}

body {
   background:
    linear-gradient(rgba(11,37,69,0.75), rgba(11,37,69,0.9)),
    url("../images/home/galaxy.jpg") center/cover fixed no-repeat;
}

/* GLOBAL STAR BACKGROUND */
body::before,
body::after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

/* small far stars */
body::before {
  background-image:
    radial-gradient(1px 1px at 5% 20%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 15% 80%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 35% 70%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 45% 10%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 65% 30%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 75% 60%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 95% 50%, rgba(255,255,255,0.6), transparent);

  animation: starsSlow 180s linear infinite;
}

/* medium stars */
body::after {
  background-image:
    radial-gradient(2px 2px at 10% 30%, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 30% 60%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 50% 20%, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 70% 80%, rgba(255,255,255,0.85), transparent),
    radial-gradient(2px 2px at 90% 40%, rgba(255,255,255,0.9), transparent);

  animation: starsMedium 120s linear infinite;
}

/* bright twinkling stars */
.global-stars {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;

  background-image:
    radial-gradient(3px 3px at 20% 50%, white, transparent),
    radial-gradient(3px 3px at 60% 25%, white, transparent),
    radial-gradient(3px 3px at 80% 75%, white, transparent),
    radial-gradient(3px 3px at 40% 85%, white, transparent);

  animation: starsFast 90s linear infinite, twinkle 4s ease-in-out infinite alternate;
}

@keyframes starsSlow {
  from { transform: translateY(0); }
  to { transform: translateY(-600px); }
}

@keyframes starsMedium {
  from { transform: translateY(0); }
  to { transform: translateY(-900px); }
}

@keyframes starsFast {
  from { transform: translateY(0); }
  to { transform: translateY(-1200px); }
}

@keyframes twinkle {
  from { opacity:0.3; }
  to { opacity:1; }
}

/* =========================
   HEADER
========================= */
header {
  position:fixed;
  top:0;
  width:100%;
  height:80px;
  display:flex;
  align-items:center;
  padding:0 20px;
  background:var(--primary);
  z-index:9999;

  background:
    linear-gradient(rgba(11,37,69,0.75), rgba(11,37,69,0.85)),
    url("../images/home/galaxy.jpg") center/cover no-repeat;

  backdrop-filter: blur(3px);
}

/* STAR LAYER BASE */
header::after,
header::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* ✨ SMALL FAR STARS */
header::before {
  background-image:
    radial-gradient(1px 1px at 5% 20%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 15% 80%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 35% 70%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 45% 10%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 65% 30%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 75% 60%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 95% 50%, rgba(255,255,255,0.6), transparent);

  animation: starsSlow 120s linear infinite;
}

/* ⭐ MEDIUM STARS */
header::after {
  background-image:
    radial-gradient(2px 2px at 10% 30%, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 30% 60%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 50% 20%, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 70% 80%, rgba(255,255,255,0.85), transparent),
    radial-gradient(2px 2px at 90% 40%, rgba(255,255,255,0.9), transparent);

  animation: starsMedium 70s linear infinite;
}

/* 🌟 BRIGHT TWINKLING STARS */
header .twinkle-stars {
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(3px 3px at 20% 50%, white, transparent),
    radial-gradient(3px 3px at 60% 25%, white, transparent),
    radial-gradient(3px 3px at 80% 75%, white, transparent);
  animation: starsFast 40s linear infinite, twinkle 3s ease-in-out infinite alternate;
}

@keyframes starsSlow {
  from { transform: translateY(0); }
  to { transform: translateY(-300px); }
}

@keyframes starsMedium {
  from { transform: translateY(0); }
  to { transform: translateY(-500px); }
}

@keyframes starsFast {
  from { transform: translateY(0); }
  to { transform: translateY(-700px); }
}

@keyframes twinkle {
  from { opacity:0.4; }
  to { opacity:1; }
}

/* =========================
   HEADER END
========================= */

.logo img {
  height:65px;
}

nav {
  flex:1;
}

.menu {
  list-style:none;
  display:flex;
  justify-content:center;
}

.menu li {
  margin:0 8px;
}

.menu a {
  padding:8px 10px;
  color:white;
  text-decoration:none;
  border-radius:25px;
  transition:.3s;

  text-shadow: 0 0 6px rgba(255,255,255,0.6);
}

.menu a:hover {
  background:rgba(69,123,157,0.35);
  backdrop-filter: blur(6px);
}

.menu li a{
    text-decoration: none;
    color: white;
    transition: 0.3s ease;
	white-space: nowrap;

	/* Responsive font size */
    font-size: clamp(0.8rem, 1.2vw, 1.2rem);
}

/* ACTIVE PAGE */

.menu li a.active{
    color: white;

    border-bottom: 2px solid white;

    padding-bottom: 5px;

    text-shadow:
        0 0 6px rgba(255,255,255,0.6),
        0 0 12px rgba(255,255,255,0.4);
}

/* =========================
   SEARCH
========================= */
.search-box {
  display:flex;
  gap:5px;
}

.search-box input {
  padding:6px;
  border:none;
  border-radius:20px;
}

.search-box button {
  padding:6px 10px;
  cursor:pointer;
  border:none;
  border-radius:20px;
}

/* =========================
   HERO
========================= */
.hero {
  margin-top:80px;
  height:120vh;
  min-height:650px;
  background:url("../images/home/prov_build.png") center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  z-index:1;
}

/* =========================
   INTRO BANNER
========================= */
.intro-banner {
  position:relative;
  overflow:hidden;
  
  color:white;
  text-align:center;
  padding:70px 20px;
  isolation:isolate;
}

.intro-banner::before {
  content:"";
  position:absolute;
  width:200%;
  height:200%;
  top:-50%;
  left:-50%;
  background:
    radial-gradient(circle at 20% 30%, rgba(69,123,157,0.9), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(168,218,220,0.7), transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(29,53,87,0.6), transparent 60%);
  filter:blur(100px);
  opacity:0.95;
  animation:neonMove 18s ease-in-out infinite alternate;
  z-index:0;
}

@keyframes neonMove {
  0% { transform:translate(-8%, -6%) scale(1); }
  50% { transform:translate(8%, 6%) scale(1.1); }
  100% { transform:translate(-6%, 8%) scale(1.05); }
}

.intro-banner p {
  position:relative;
  z-index:2;
  font-size:3.2rem;
  font-family:'Great Vibes', cursive;
  color:#e6eef7;
}

/* =========================
   WELCOME SECTION
========================= */
.welcome-split {
  display:flex;
  gap:40px;
  padding:80px 40px;
  align-items:center;
  background:#fff;
}

/* LEFT SIDE */
.welcome-text {
  flex:1;
}

/* TITLE */
.welcome-text h2 {
  margin-bottom:10px;
}

/* TEXT CAROUSEL */
.text-carousel {
  margin: 20px 0;
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  line-height: 2;
  color: #1d3557;

  min-height: 140px;

  letter-spacing: 0.3px;

  /* cinematic feel */
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);

  transition:
    opacity 1s ease,
    transform 1s ease,
    filter 1s ease;
}

/* fade animation */
.text-carousel.fade-out {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(6px);
}

/* RIGHT SIDE CAROUSEL */
.welcome-carousel {
  flex:1;
  position:relative;
  height:420px;
  overflow:hidden;
  border-radius:12px;
}

.welcome-carousel img {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1s ease;
}

.welcome-carousel img.active {
  opacity:1;
}

/* ARROWS */
.welcome-carousel button {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.4);
  color:white;
  border:none;
  font-size:24px;
  padding:10px 14px;
  cursor:pointer;
  opacity:0;
  transition:0.3s;
}

.welcome-carousel:hover button {
  opacity:1;
}

.prev { left:10px; }
.next { right:10px; }

.welcome-carousel button:hover {
  background:rgba(0,0,0,0.7);
}

/* MOBILE */
@media(max-width:768px) {
  .welcome-split {
    flex-direction:column;
  }
}

/* =========================
   OFFER
========================= */
.what-we-offer {
  padding: 60px 60px 10px;
  text-align:center;
  color:white;
}

.offer-cards {
  position:relative;
  height:260px;
  margin-top:40px;
}

.card {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  transition:all 1.2s cubic-bezier(.4,.1,.2,1);

  padding:25px;
  border-radius:12px;
  width:250px;
  
   /* thick white border */
  border:4px solid white;

  /* optional: make card slightly glassy */
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* soft glow so it stands out on galaxy */
  box-shadow: 0 0 20px rgba(255,255,255,0.25);
}

/* CENTER BIG CARD */
.card.active {
  transform: translate(-50%, -50%) scale(1.15);
  z-index:3;
  opacity:1;
}

/* LEFT CARD */
.card.left {
  transform: translate(-180%, -50%) scale(0.8);
  z-index:2;
  opacity:0.6;
}

/* RIGHT CARD */
.card.right {
  transform: translate(80%, -50%) scale(0.8);
  z-index:2;
  opacity:0.6;
}

/* =========================
   ornamental DIVIDER
========================= */
.section-dividerb {
  position: relative;
  text-align: center;
  margin: 0px 0px 10px;
  background: rgba(255,255,255,0.80);
}

.section-dividerb span {
  position: relative;
  font-size: 3rem;
  color: black;
  padding: 0 10px;
}

.section-dividerb::before,
.section-dividerb::after {
  content: "";

  position: absolute;
  top: 50%;

  width: 40%;
  height: 3px;

  background: rgba(0,0,0,0.4);
}

.section-dividerb::before {
  left: 0;
}

.section-dividerb::after {
  right: 0;
}

/* =========================
   white DIVIDER
========================= */
.section-divider {
  width: 100%;
  height: 120px;

  position: relative;

  overflow: hidden;
}

.section-divider::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 70%;
  height: 4px;

  transform: translate(-50%, -50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.9),
      transparent
    );

  box-shadow:
    0 0 10px rgba(168,218,220,0.7),
    0 0 25px rgba(69,123,157,0.7);

  border-radius: 999px;
}

.section-divider::after {
  content: "✦";

  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  color: white;

  font-size: 1.8rem;

  text-shadow:
    0 0 10px #fff,
    0 0 20px #a8dadc,
    0 0 40px #457b9d;
}

/* =========================
   TIMELINE
========================= */
.timeline {
  
  width: 100%;
  max-width: 1100px;
  color: white;

  /* 🔥 CRITICAL: FIX HEIGHT TO STOP JUMPING */
  min-height: 50px;
  height: clamp(50px, 35vh, 520px);

  display: flex;
  flex-direction: column;
  align-items: center;

  position: relative;

 

  border-radius: 18px;
  padding: 40px 20px;

  overflow: hidden;
}

/* YEARS ROW */
.timeline-years {
  display:flex;
  justify-content:center;
  gap:40px;
  margin:50px 0 10px;
  flex-wrap:wrap;
}

.year {
  font-size:1.5rem;
  opacity:0.4;
  cursor:pointer;
  transition:all .8s ease;
}

/* glowing focused year */
.year.active {
  font-size:2.7rem;
  opacity:1;
  color:white;
  text-shadow:
    0 0 10px #a8dadc,
    0 0 25px #457b9d,
    0 0 45px #457b9d;
}

/* glowing timeline line */
.timeline-years::after {
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  height:2px;
  margin-top:35px;
  background:linear-gradient(90deg, transparent, #a8dadc, transparent);
  filter:blur(1px);
}

.timeline-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;

  padding: 20px 20px 80px;

  /* prevents reflow impact on page */
  contain: layout paint;
}

/* TEXT AREA */
.timeline-content {
  position: relative;
  min-height: 90px;

  /* 💥 THIS IS THE KEY FIX */
  height: 120px;
  width: 100%;
  max-width: 900px;
  margin: 30px auto;

  display: grid;
  place-items: center;

  overflow: hidden;

  /* optional: stabilises rendering */
  contain: layout paint;
}

.t-text {
  grid-area: 1 / 1;

  opacity: 0;
  transform: scale(0.98);

  transition: opacity 0.8s ease, transform 0.8s ease;

  font-size: 1.3rem;
  font-family: 'Playfair Display', serif;
  text-align: center;
}

.t-text.active {
  opacity: 1;
  transform: translateY(-50%);
}

.year.active {
  font-size:2.7rem;
  opacity:1;
  color:white;
  text-shadow:
    0 0 10px #a8dadc,
    0 0 25px #457b9d,
    0 0 45px #457b9d;
}

.timeline-quote {
  display: block;
  width: fit-content;
  max-width: 80%;
  margin: 10px auto 60px;

  padding: 20px 20px;

  font-family: 'Great Vibes', cursive;
  font-size: 2rem;
  color: white;
  text-align: center;

  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
}

.timeline ul {
  list-style:none;
  margin:20px 0;
}

.timeline li {
  margin:10px 0;
}

/* =========================
   VIDEO
========================= */
.video-section {
  text-align:center;
  padding:60px;
  background: rgba(255,255,255,0.80);
}

/* =========================
   FOOTER
========================= */
footer {
  color:white;
  text-align:center;
  padding:20px;
}


/* =========================
   ABOUT
========================= */
.about-top-strip{
	background: rgba(255,255,255,0.80);
	height: 100px; /* adjust height */
	width: 100%;
}

.about-intro {
  padding: 50px 60px;

  text-align: center;
}

.about-intro h2 {
  margin-bottom: 30px;

  font-size: 3rem;

  font-family: 'Playfair Display', serif;

  color: white;
}

.audio-divider {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 25px;

  margin-top: 60px;
}

.audio-divider .line {
  width: 480px;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      transparent,
      white,
      transparent
    );

  opacity: 0.6;
}

.audio-btn {
  width: 75px;
  height: 75px;

  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  border: none;

  background: white;

  color: black;

  font-size: 2rem;

  cursor: pointer;

  transition:
    transform 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.15);
}

.audio-btn:hover {
  transform: scale(1.15);

  background: #fcff54;

  box-shadow:
    0 15px 35px rgba(69,123,157,0.35);
}

.audio-btn.playing {
  background: #457b9d;
}

.play-icon {
  transform: translateX(2px);
}

.pause-icon {
  transform: translateX(0);
}

.play-icon,
.pause-icon {
  display: inline-block;
}

/* =========================
   ABOUT history
========================= */
.about-story {
  display: flex;
  position: relative;
  gap: 50px;

  padding: 30px 60px 50px;

  align-items: center;

  background: rgba(255,255,255,0.80);
}

/* LEFT */
.about-text {
  flex: 1.4;

  height: 460px;

  display: flex;

  position: relative;
}

/* TEXT SLIDES */
.about-slide {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  opacity: 0;

  transform: translateY(20px);

  transition:
    opacity 1s ease,
    transform 1s ease;

  pointer-events: none;
}

.about-slide.active {
  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;
}

.about-slide h2 {
  font-size: 3rem;

  margin-bottom: 20px;

  color: #1d3557;

  font-family: 'Playfair Display', serif;
}

.about-slide h3 {
  font-size: 1.6rem;

  margin-bottom: 20px;

  color: #457b9d;
}

.about-slide p {
  font-size: 1.2rem;

  line-height: 2;

  color: #333;
}

.about-slide blockquote {
  margin-top: 35px;

  font-size: 2rem;

  font-family: 'Great Vibes', cursive;

  color: #1d3557;
}

/* RIGHT IMAGES */
.about-images {
  flex: 0.8;

  position: relative;

  height: 520px;

  border-radius: 20px;

  overflow: hidden;
}

.about-img {
  position: absolute;

  width: 100%;
  height: 100%;

  object-fit: contain;

  background: white;

  opacity: 0;

  transition: opacity 1s ease;
}

.about-img.active {
  opacity: 1;
}

/* TEXT scroll */
.about-scroll {
  flex: 1;

  overflow-y: auto;

  padding: 25px;

  padding-right: 15px;

  margin-top: 20px;

  line-height: 2;

  background: #f8fbff;

  border-left: 4px solid #457b9d;

  border-radius: 12px;

  box-shadow:
    0 8px 25px rgba(0,0,0,0.05);

  scrollbar-width: thin;

  scrollbar-color: #457b9d #edf2f7;
}

.about-arrow {
  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 42px;
  height: 42px;

  border: none;
  border-radius: 50%;

  background: rgba(29,53,87,0.9);

  color: white;

  font-size: 1.3rem;

  cursor: pointer;

  z-index: 10;

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.about-arrow:hover {
  transform:
    translateY(-50%)
    scale(1.1);

  background: #457b9d;
}

.about-prev {
  left: 5px;
}

.about-next {
  right: 5px;
}


/* =========================
   Formation
========================= */
/* FORMATION TIMELINE */
.formation-timeline{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 50px;
	padding: 20px;
	text-align: center;
}

.timeline-item{
	color: white;
	font-size: 1.1rem;
	font-family: 'Playfair Display', serif;
	max-width: 180px;
	line-height: 1.5;
	opacity: 0;
	transform: translateX(-30px);
	animation: fadeSlide 1s forwards;
}

/* Delay each item */
.timeline-item:nth-child(1){
	animation-delay: 0.5s;
}

.timeline-item:nth-child(3){
	animation-delay: 1.5s;
}

.timeline-item:nth-child(5){
	animation-delay: 2.5s;
}

.timeline-item:nth-child(7){
	animation-delay: 3.5s;
}

.timeline-arrow{
	color: white;
	font-size: 2rem;
	opacity: 0;
	animation: fadeArrow 0.8s forwards;
}

.timeline-arrow:nth-child(2){
	animation-delay: 1s;
}

.timeline-arrow:nth-child(4){
	animation-delay: 2s;
}

.timeline-arrow:nth-child(6){
	animation-delay: 3s;
}

/* ANIMATIONS */
@keyframes fadeSlide{
	to{
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeArrow{
	to{
		opacity: 1;
	}
}

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

	.formation-timeline{
		flex-direction: column;
	}

	.timeline-arrow{
		transform: rotate(90deg);
	}

}

/* JOURNEY SECTION */
.journey-section{
	position: relative;
	padding: 60px 20px;
	min-height: 400px;
	text-align: center;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.8);
}

.journey-section h2{
	color: black;
	font-size: 2.3rem;
	margin-bottom: 30px;
	font-family: 'Playfair Display', serif;
	letter-spacing: 2px;
	text-decoration: underline;
}

.journey-slider{
	position: relative;
	width: 100%;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.journey-slide{
	position: absolute;
	width: 65%;
	max-width: 900px;

	color: black;

	opacity: 0;
	transform: translateX(250px);

	transition:
		opacity 1.2s ease,
		transform 1.2s ease;
}

/* ACTIVE SLIDE */
.journey-slide.active{
	opacity: 1;
	transform: translateX(0);
}

/* EXITING SLIDE */
.journey-slide.exit{
	opacity: 0;
	transform: translateX(-250px);
}

.journey-slide h3{
	font-size: 1.8rem;
	margin-bottom: 25px;
	font-family: 'Playfair Display', serif;
	color: #457b9d;
}

.journey-slide p{
	font-size: 1.1rem;
	line-height: 1.9;
}

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

	.journey-slide{
		width: 90%;
	}

	.journey-section h2{
		font-size: 1.5rem;
	}

	.journey-slide h3{
		font-size: 1.3rem;
	}

	.journey-slide p{
		font-size: 1rem;
		line-height: 1.7;
	}
}

/* DUAL CAROUSEL SECTION */
.dual-carousel-section{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 100px;

	padding: 100px 40px;
	flex-wrap: wrap;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(15,15,25,0.4) 25%,
		#f5f5f5 65%,
		white 100%
	);
}

/* CAROUSEL CARD */
.carousel-box{
	width: 620px;

	padding: 20px;

	border: 1px solid rgba(255,255,255,0.2);

	border-radius: 28px;

	background: rgba(255,255,255,0.05);

	backdrop-filter: blur(8px);

	box-shadow: 0 10px 35px rgba(0,0,0,0.35);

	text-align: center;

	transition: transform 0.4s ease;
}

.carousel-box:hover{
	transform: scale(1.1);
}
.pixel-carousel{
	position: relative;
	width: 100%;
	height: 450px;

	overflow: hidden;

	border-radius: 20px;
}

.pixel-carousel img{
	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	object-fit: contain;
	object-position: center;

	opacity: 0;

	transform: scale(1.02);

	transition:
		opacity 1.2s ease,
		transform 1.2s ease,
		filter 1.2s ease;

	filter: blur(12px);

	padding: 0;
	box-sizing: border-box;
}

.pixel-carousel img.active{
	opacity: 1;
	transform: scale(1);

	filter: blur(0);
}

.carousel-box h3{
	color: black;

	margin-top: 20px;

	font-size: 1.6rem;

	font-family: 'Playfair Display', serif;

	letter-spacing: 1px;

	line-height: 1.5;
}

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

	.dual-carousel-section{
		flex-direction: column;
		align-items: center;
	}

	.carousel-box{
		width: 90%;
		max-width: 420px;
	}

	.pixel-carousel{
		height: 420px;
	}
}

.about-bottom-strip{
	height: 120px;
	width: 100%;

	background: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(15,15,25,0.4) 25%,
		#f5f5f5 65%,
		white 100%
	);
}

/* =========================
   MISSION SECTION
========================= */

.mission-section{
	position: relative;

	padding: 140px 20px;

	text-align: center;

	overflow: hidden;

	background:
		linear-gradient(
			rgba(0,0,0,0.65),
			rgba(0,0,0,0.7)
		),
		url("../images/formation/bg.png");

	background-size: cover;
	background-position: center;
	
}

/* SOFT GLOW */
.mission-glow{
	position: absolute;

	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);

	width: 500px;
	height: 500px;

	background: radial-gradient(
		circle,
		rgba(255,255,255,0.12) 0%,
		rgba(255,255,255,0.04) 40%,
		transparent 75%
	);

	filter: blur(30px);

	pointer-events: none;
}

.mission-section h2{
	position: relative;

	color: white;

	font-size: 3rem;

	font-family: 'Playfair Display', serif;

	letter-spacing: 4px;

	margin-bottom: 70px;

	text-decoration: underline;
}

.mission-card{
	position: relative;

	max-width: 850px;

	margin: auto;

	padding: 70px 50px;

	border-radius: 30px;

	background: rgba(255,255,255,0.05);

	backdrop-filter: blur(15px);

	border: 1px solid rgba(255,255,255,0.15);

	box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

.mission-card h3{
	color: white;

	font-size: 2rem;

	margin-bottom: 50px;

	font-family: 'Great Vibes', cursive;

	font-weight: normal;
}

/* POEM LINES */
.mission-lines p{
	color: white;

	font-size: 1.2rem;

	line-height: 2.2;

	letter-spacing: 0.5px;

	opacity: 0;

	transform: translateY(40px);

	animation: missionFade 1s forwards;
}

/* STAGGER ANIMATION */
.mission-lines p:nth-child(1){ animation-delay: 0.3s; }
.mission-lines p:nth-child(2){ animation-delay: 0.6s; }
.mission-lines p:nth-child(3){ animation-delay: 0.9s; }
.mission-lines p:nth-child(4){ animation-delay: 1.2s; }
.mission-lines p:nth-child(5){ animation-delay: 1.5s; }
.mission-lines p:nth-child(6){ animation-delay: 1.8s; }
.mission-lines p:nth-child(7){ animation-delay: 2.1s; }
.mission-lines p:nth-child(8){ animation-delay: 2.4s; }

/* FADE UP */
@keyframes missionFade{

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

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

	.mission-section h2{
		font-size: 2rem;
	}

	.mission-card{
		padding: 50px 25px;
		position: relative;
		overflow: hidden;
	}

	.mission-card h3{
		font-size: 1.6rem;
	}

	.mission-lines p{
		font-size: 1rem;
		line-height: 2;
	}
}

/* =========================
   FIREWORK SPARKLES
========================= */

.sparkle{
	position: absolute;

	border-radius: 50%;

	pointer-events: none;

	opacity: 1;

	z-index: 999;

	background: radial-gradient(
		circle,
		rgba(255,255,255,1) 0%,
		rgba(255,220,140,0.9) 35%,
		rgba(255,255,255,0) 75%
	);

	filter: blur(0.5px);

	animation: sparkleBurst 1.4s ease-out forwards;
}

@keyframes sparkleBurst{

	0%{
		transform:
			translate(0,0)
			scale(1);

		opacity: 1;
	}

	70%{
		opacity: 1;
	}

	100%{
		transform:
			translate(
				var(--move-x),
				var(--move-y)
			)
			scale(0);

		opacity: 0;
	}
}

/* =========================
   MINISTRIES
========================= */
/* =========================
   HEALTHCARE SECTION
========================= */

.healthcare-section{
	padding: 120px 40px 60px;
	text-align: center;
	background: rgba(255,255,255,0.80);
	);
}

.healthcare-section h2{
	display: inline-block;

	color: black;

	font-size: 3rem;

	margin-bottom: 60px;

	padding: 14px 40px;

	font-family: 'Playfair Display', serif;

	letter-spacing: 2px;

	border: 5px solid rgba(0,0,0,0.40);

	border-radius: 18px;

	background: rgba(0,0,0,0.15);

	backdrop-filter: blur(6px);

	box-shadow:
		0 8px 25px rgba(0,0,0,0.10);

	transition:
		transform 0.4s ease,
		box-shadow 0.4s ease;
}

/* MAIN SLIDER */
.healthcare-main-slider{
	position: relative;
	max-width: 1350px;
	height: 660px;
	margin: auto;
	overflow: hidden;
	border-radius: 18px;
}

/* CARDS */
.healthcare-card{
	position: absolute;
	inset: 0;

	opacity: 0;
	transform: scale(1.05);

	transition:
		opacity 1.5s ease,
		transform 1.5s ease;
}

.healthcare-card.active{
	opacity: 1;
	transform: scale(1);
	z-index: 2;
}

/* IMAGE GALLERY */
.health-gallery{
	position: absolute;
	inset: 0;
}

.health-gallery img{
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;

	opacity: 0;

	transform: scale(1.08);

	transition:
		opacity 1.8s ease,
		transform 7s ease;
}

.health-gallery img.active{
	opacity: 1;
	transform: scale(1);
}

/* DARK OVERLAY */
.health-overlay{
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			to top,
			rgba(0,0,0,0.75),
			rgba(0,0,0,0.15)
		);

	z-index: 3;
}

/* TEXT */
.health-content{
	position: absolute;

	left: 50%;
	bottom: 90px;

	transform: translateX(-50%);

	width: 80%;
	max-width: 900px;

	z-index: 5;

	color: white;
}

.health-content h3{
	font-size: 3rem;
	margin-bottom: 20px;
	font-family: 'Playfair Display', serif;
	text-shadow: 0 4px 15px rgba(0,0,0,0.7);
}

.health-content p{
	font-size: 1.2rem;
	line-height: 1.9;
	text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}

/* NAVIGATION */
.health-main-nav{
	margin-top: 40px;

	display: flex;
	justify-content: center;
	gap: 25px;
}

.health-main-nav button{
	width: 60px;
	height: 60px;

	border: none;
	border-radius: 50%;
	background: rgba(0,0,0,0.2);
	

	font-size: 1.5rem;

	cursor: pointer;

	transition: all 0.4s ease;
}

.health-main-nav button:hover{
	transform: scale(1.12);
	background: rgba(0,0,0,0.4);
}

/* =========================
   EDUCATION SECTION
========================= */

.education-section{
	position: relative;

	padding: 100px 50px;

	text-align: center;

	overflow: hidden;
	background: rgba(255,255,255,0.08);
}

.education-section h2{
	color: white;

	display: inline-block;

	font-size: 3rem;

	margin-bottom: 60px;

	padding: 14px 40px;

	font-family: 'Playfair Display', serif;

	letter-spacing: 2px;

	border: 5px solid rgba(255,255,255,0.65);

	border-radius: 18px;

	background: transparent;

	backdrop-filter: blur(6px);

	box-shadow:
		0 8px 25px rgba(0,0,0,0.08);

	transition:
		transform 0.4s ease,
		box-shadow 0.4s ease;
}

/* GRID */
.education-grid{
	display: grid;

	grid-template-columns:
		repeat(auto-fit, minmax(380px, 1fr));

	gap: 50px;

	max-width: 1600px;

	margin: auto;
}

/* =========================
   CARD
========================= */

.education-card{
	position: relative;
	isolation: isolate;
	height: 350px;
	border-radius: 30px;

	overflow: hidden;

	cursor: pointer;

	transform: translateY(60px);

	opacity: 0;

	transition:
		transform 0.8s ease,
		opacity 0.8s ease,
		box-shadow 0.5s ease;
}

/* =========================
   GLOWING BORDER
========================= */

.education-card::before{
	content: "";

	position: absolute;
	inset: 0;

	padding: 2px;

	border-radius: 30px;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,0.7),
			rgba(255,255,255,0.08),
			rgba(255,255,255,0.6)
		);

	/* BORDER EFFECT */
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);

	-webkit-mask-composite: xor;

	mask-composite: exclude;

	opacity: 0.45;

	z-index: 10;

	pointer-events: none;

	transition:
		opacity 0.5s ease,
		filter 0.5s ease;
}

/* HOVER GLOW */
.education-card:hover::before{
	opacity: 1;

	filter:
		drop-shadow(0 0 12px rgba(255,255,255,0.55))
		drop-shadow(0 0 25px rgba(255,255,255,0.25));
}

/* REVEAL */
.education-card.show{
	transform: translateY(0);
	opacity: 1;
}

/* HOVER */
.education-card:hover{
	transform:
		translateY(-12px)
		scale(1.03);

	box-shadow:
		0 25px 60px rgba(255,255,255,0.18);
}

/* =========================
   IMAGE GALLERY
========================= */

.education-gallery{
	position: absolute;
	inset: 0;
}

.education-gallery img{
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;

	opacity: 0;

	transform: scale(1.08);

	filter: brightness(0.8);

	transition:
		opacity 1.8s ease,
		transform 7s ease;
}

/* ACTIVE IMAGE */
.education-gallery img.active{
	opacity: 1;
	transform: scale(1);
}

/* =========================
   OVERLAY
========================= */

.education-overlay{
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			to top,
			rgba(0,0,0,0.82),
			rgba(0,0,0,0.15)
		);

	z-index: 2;
}

/* =========================
   GLOW EFFECT
========================= */

.education-glow{
	position: absolute;

	width: 250px;
	height: 250px;

	background:
		radial-gradient(
			circle,
			rgba(255,255,255,0.18),
			transparent 70%
		);

	pointer-events: none;

	transform: translate(-50%, -50%);

	opacity: 0;

	transition: opacity 0.4s ease;

	z-index: 3;
}

.education-card:hover .education-glow{
	opacity: 1;
}

/* =========================
   CONTENT
========================= */

.education-content{
	position: absolute;

	left: 50%;
	bottom: 45px;

	transform: translateX(-50%);

	width: 85%;

	z-index: 5;

	color: white;
}

.education-content h3{
	font-size: 1.5rem;

	line-height: 1.4;

	margin-bottom: 15px;

	font-family: 'Playfair Display', serif;

	text-shadow: 0 4px 15px rgba(0,0,0,0.7);

	transition: transform 0.5s ease;
}

.education-content p{
	font-size: 1.1rem;

	letter-spacing: 1px;

	opacity: 0.9;

	transform: translateY(20px);

	opacity: 0;

	transition:
		transform 0.5s ease,
		opacity 0.5s ease;
}

/* HOVER TEXT */
.education-card:hover .education-content h3{
	transform: translateY(-8px);
}

.education-card:hover .education-content p{
	transform: translateY(0);
	opacity: 1;
}

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

@media(max-width:768px){

	.education-section{
		padding: 100px 20px;
	}

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

	.education-card{
		height: 420px;
	}

	.education-section h2{
		font-size: 2rem;
	}

	.education-content h3{
		font-size: 1.5rem;
	}

}

/* =========================
   ELDERLY SECTION
========================= */

.elderly-section{
	position: relative;

	padding: 140px 60px;

	text-align: center;
	background: rgba(255,255,255,0.80);
	overflow: hidden;
}

/* TITLE */
.elderly-section h2{
	display: inline-block;

	color: black;

	font-size: 3rem;

	padding: 14px 40px;

	margin-bottom: 80px;

	border: 5px solid rgba(0,0,0,0.5);

	border-radius: 20px;

	letter-spacing: 2px;

	font-family: 'Playfair Display', serif;

	background: rgba(0,0,0,0.15);
	box-shadow:
		0 8px 25px rgba(0,0,0,0.10);
	backdrop-filter: blur(5px);
}

/* CONTAINER */
.elderly-container{
	display: flex;
	flex-direction: column;
	gap: 50px;

	max-width: 1200px;

	margin: auto;
}

/* CARD */
.elderly-card{
	position: relative;

	height: 440px;

	border-radius: 35px;

	overflow: hidden;

	cursor: pointer;

	border: 2px solid rgba(255,255,255,0.12);

	box-shadow:
		0 20px 50px rgba(0,0,0,0.35);

	transform: translateY(80px);

	opacity: 0;

	transition:
		transform 1s ease,
		opacity 1s ease,
		box-shadow 0.5s ease;
}

/* REVEAL */
.elderly-card.show{
	transform: translateY(0);
	opacity: 1;
}

/* HOVER */
.elderly-card:hover{
	transform: scale(1.02);

	box-shadow:
		0 30px 70px rgba(255,220,180,0.18);
}

/* IMAGE SLIDER */
.elderly-slider{
	position: absolute;

	inset: 0;

	width: 100%;
	height: 100%;
}

/* IMAGES */
.elderly-slider img{
	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;

	object-position: center;

	opacity: 0;

	transform: scale(1.08);

	filter: blur(10px);

	transition:
		opacity 1.4s ease,
		transform 1.4s ease,
		filter 1.4s ease;
}

/* ACTIVE IMAGE */
.elderly-slider img.active{
	opacity: 1;

	transform: scale(1);

	filter: blur(0);
}

.elderly-slider img.active{
	opacity: 1;

	transform: scale(1);

	filter: blur(0);
}

/* WARM OVERLAY */
.elderly-overlay{
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			to top,
			rgba(0,0,0,0.72),
			rgba(0,0,0,0.15)
		);
}

/* TEXT */
.elderly-content{
	position: absolute;

	left: 50%;
	bottom: 40px;

	transform: translateX(-50%);

	z-index: 5;

	color: white;

	text-align: center;

	width: 90%;
}

.elderly-content h3{
	font-size: 2rem;

	margin-bottom: 12px;

	font-family: 'Playfair Display', serif;
}

.elderly-content p{
	font-size: 1rem;

	letter-spacing: 1px;
}

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

	.elderly-section{
		padding: 100px 20px;
	}

	.elderly-card{
		height: 260px;
	}

	.elderly-content h3{
		font-size: 1.4rem;
	}

	.elderly-section h2{
		font-size: 2rem;
	}
}

/* =========================
   PASTORAL SECTION
========================= */

/* =========================
   MISSION SKY
========================= */

.mission-sky-section{
	position: relative;

	padding: 90px 40px 20px;

	overflow: hidden;

	background:
		radial-gradient(circle at 20% 30%,
			rgba(120,140,255,0.08),
			transparent 35%),

		radial-gradient(circle at 80% 70%,
			rgba(255,180,220,0.06),
			transparent 40%),

		rgba(4,8,20,1);

	text-align: center;
}

/* TITLE */
.mission-sky-section h2{
	display: inline-block;

	color: white;

	font-size: 3rem;

	padding: 14px 40px;

	margin-bottom: 70px;

	font-family: 'Playfair Display', serif;

	border: 5px solid rgba(255,255,255,0.2);

	border-radius: 20px;

	letter-spacing: 2px;

	backdrop-filter: blur(8px);
}

/* SKY */
.mission-sky{
	position: relative;

	width: 100%;
	height: 520px;
}

/* NODE */
.mission-node{
	position: absolute;

	display: flex;
	align-items: center;

	gap: 16px;

	cursor: pointer;

	z-index: 5;

	animation: floatNode 8s ease-in-out infinite;
}

/* POSITIONS */
.node1{ top: 10%; left: 4%; }
.node2{ top: 28%; left: 14%; }
.node3{ top: 16%; left: 28%; }
.node4{ top: 35%; left: 40%; }
.node5{ top: 12%; left: 52%; }
.node6{ top: 30%; left: 64%; }
.node7{ top: 14%; left: 76%; }
.node8{ top: 38%; left: 84%; }
.node9{ top: 20%; left: 88%; }
.node10{ top: 44%; left: 40%; }

/* STAR */
.star{
	position: relative;

	width: 16px;
	height: 16px;

	border-radius: 50%;

	background: white;

	box-shadow:
		0 0 10px white,
		0 0 22px rgba(255,255,255,0.8),
		0 0 40px rgba(255,255,255,0.5);

	transition:
		transform 0.4s ease,
		box-shadow 0.4s ease;
}

/* STAR SIZES */
.large-star .star{
	width: 22px;
	height: 22px;
}

.medium-star .star{
	width: 16px;
	height: 16px;
}

.small-star .star{
	width: 10px;
	height: 10px;
}

/* STAR PULSE */
.star::before{
	content: "";

	position: absolute;

	inset: -8px;

	border-radius: 50%;

	background:
		radial-gradient(
			rgba(255,255,255,0.7),
			transparent 70%
		);

	animation: pulseStar 3s infinite;
}

/* LABEL */
.node-label{
	text-align: left;
}

.node-label h3{
	color: white;

	font-size: 1rem;

	font-family: 'Playfair Display', serif;

	margin-bottom: 4px;

	letter-spacing: 1px;
}

.node-label p{
	color: rgba(255,255,255,0.75);

	font-size: 0.75rem;
}

/* HOVER */
.mission-node:hover .star{
	transform: scale(1.7);

	box-shadow:
		0 0 18px white,
		0 0 40px rgba(255,255,255,1),
		0 0 80px rgba(255,255,255,0.9);
}

/* PREVIEW CARD */
.node-preview{
	position: absolute;

	width: 420px;
	height: 320px;

	border-radius: 28px;

	overflow: hidden;

	background: white;

	border: 2px solid rgba(255,255,255,0.7);

	box-shadow:
		0 15px 45px rgba(0,0,0,0.25);

	opacity: 0;
	pointer-events: none;

	transform: scale(0.6);

	transition:
		opacity 0.4s ease,
		transform 0.4s ease;

	z-index: 20;
}

.node-preview img{
	position: absolute;

	inset: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;

	z-index: 1;
}

.node-preview::after{
	content: "";

	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			to top,
			rgba(0,0,0,0.85),
			rgba(0,0,0,0.25),
			transparent
		);

	z-index: 2;
}

.node-info{
	position: absolute;

	left: 20px;
	right: 20px;
	bottom: 18px;

	z-index: 3;
}

.node-info h3{
	color: white;

	font-size: 1.15rem;

	margin-bottom: 6px;

	font-family: 'Playfair Display', serif;

	line-height: 1.4;
}

.node-info p{
	color: rgba(255,255,255,0.9);

	font-size: 0.95rem;

	line-height: 1.5;
}

/* SHOW CARD */
.mission-node:hover .node-preview{
	opacity: 1;

	transform:
		translateX(-50%)
		scale(1);
}

/* IMAGE SLIDER */
.node-slider{
	position: relative;

	width: 100%;
	height: 220px;

	border-radius: 18px;

	overflow: hidden;
}

.node-slider img{
	position: absolute;

	width: 100%;
	height: 100%;

	object-fit: cover;

	opacity: 0;

	transform: scale(1.08);

	filter: blur(8px);

	transition:
		opacity 1.2s ease,
		transform 1.2s ease,
		filter 1.2s ease;
}

.node-slider img.active{
	opacity: 1;

	transform: scale(1);

	filter: blur(0);
}

/* FLOATING */
@keyframes floatNode{

	0%,100%{
		transform:
			translateY(0px)
			translateX(0px);
	}

	25%{
		transform:
			translateY(-8px)
			translateX(5px);
	}

	50%{
		transform:
			translateY(-12px)
			translateX(-4px);
	}

	75%{
		transform:
			translateY(-5px)
			translateX(8px);
	}
}

/* STAR GLOW */
@keyframes pulseStar{

	0%,100%{
		opacity: 0.4;
		transform: scale(1);
	}

	50%{
		opacity: 1;
		transform: scale(1.6);
	}
}

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

	.mission-sky{
		height: 900px;
	}

	.mission-node{
		transform: scale(0.9);
	}

	.node-preview{
		width: 240px;
	}

	.node-slider{
		height: 180px;
	}
}

/* =========================
   LEFT SIDE POPUPS
========================= */
.node1 .node-preview,
.node2 .node-preview,
.node3 .node-preview{
	left: 0;
	transform: scale(0.6);
}

/* SHOW */
.node1:hover .node-preview,
.node2:hover .node-preview,
.node3:hover .node-preview{
	transform: scale(1);
}


/* =========================
   CENTER POPUPS
========================= */
.node4 .node-preview,
.node5 .node-preview,
.node6 .node-preview,
.node7 .node-preview{
	left: 50%;
	transform:
		translateX(-50%)
		scale(0.6);
}

/* SHOW */
.node4:hover .node-preview,
.node5:hover .node-preview,
.node6:hover .node-preview,
.node7:hover .node-preview{
	transform:
		translateX(-50%)
		scale(1);
}


/* =========================
   RIGHT SIDE POPUPS
========================= */
.node8 .node-preview,
.node9 .node-preview,
.node10 .node-preview{
	left: auto;
	right: 0;

	transform: scale(0.6);
}

/* SHOW */
.node8:hover .node-preview,
.node9:hover .node-preview,
.node10:hover .node-preview{
	transform: scale(1);
}

.node1{ top: 20%; }
.node2{ top: 55%; }
.node3{ top: 35%; }

.node4{ top: 70%; }
.node5{ top: 28%; }

.node6{ top: 50%; }
.node7{ top: 18%; }

.node8{ top: 62%; }
.node9{ top: 35%; }
.node10{ top: 10%; }

/* BASE STAR */
.mission-node{
	position: absolute;

	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}


/* =========================
   INDIVIDUAL FLOATING
========================= */

.node1{
	animation: float1 7s infinite;
}

.node2{
	animation: float2 9s infinite;
}

.node3{
	animation: float3 8s infinite;
}

.node4{
	animation: float4 10s infinite;
}

.node5{
	animation: float5 6s infinite;
}

.node6{
	animation: float6 11s infinite;
}

.node7{
	animation: float7 7.5s infinite;
}

.node8{
	animation: float8 9.5s infinite;
}

.node9{
	animation: float9 8.5s infinite;
}

.node10{
	animation: float10 12s infinite;
}

@keyframes float1{
	0%{ transform: translate(0,0); }
	25%{ transform: translate(10px,-8px); }
	50%{ transform: translate(18px,-14px); }
	75%{ transform: translate(6px,-5px); }
	100%{ transform: translate(0,0); }
}

@keyframes float2{
	0%{ transform: translate(0,0); }
	25%{ transform: translate(-8px,10px); }
	50%{ transform: translate(-18px,16px); }
	75%{ transform: translate(-6px,8px); }
	100%{ transform: translate(0,0); }
}

@keyframes float3{
	0%{ transform: translate(0,0); }
	25%{ transform: translate(6px,12px); }
	50%{ transform: translate(14px,20px); }
	75%{ transform: translate(5px,8px); }
	100%{ transform: translate(0,0); }
}

@keyframes float4{
	0%{ transform: translate(0,0); }
	25%{ transform: translate(-12px,-8px); }
	50%{ transform: translate(-20px,-18px); }
	75%{ transform: translate(-7px,-5px); }
	100%{ transform: translate(0,0); }
}

@keyframes float5{
	0%{ transform: translate(0,0); }
	25%{ transform: translate(14px,5px); }
	50%{ transform: translate(22px,10px); }
	75%{ transform: translate(8px,3px); }
	100%{ transform: translate(0,0); }
}

@keyframes float6{
	0%{ transform: translate(0,0); }
	25%{ transform: translate(-10px,6px); }
	50%{ transform: translate(-20px,12px); }
	75%{ transform: translate(-7px,4px); }
	100%{ transform: translate(0,0); }
}

@keyframes float7{
	0%{ transform: translate(0,0); }
	25%{ transform: translate(8px,-10px); }
	50%{ transform: translate(14px,-18px); }
	75%{ transform: translate(5px,-6px); }
	100%{ transform: translate(0,0); }
}

@keyframes float8{
	0%{ transform: translate(0,0); }
	25%{ transform: translate(-10px,-8px); }
	50%{ transform: translate(-18px,-14px); }
	75%{ transform: translate(-5px,-5px); }
	100%{ transform: translate(0,0); }
}

@keyframes float9{
	0%{ transform: translate(0,0); }
	25%{ transform: translate(8px,12px); }
	50%{ transform: translate(16px,18px); }
	75%{ transform: translate(5px,6px); }
	100%{ transform: translate(0,0); }
}

@keyframes float10{
	0%{ transform: translate(0,0); }
	25%{ transform: translate(-6px,10px); }
	50%{ transform: translate(-14px,16px); }
	75%{ transform: translate(-4px,5px); }
	100%{ transform: translate(0,0); }
}

/* =========================
   vocation promotion section
========================= */
/* =========================================
   VOCATION PAGE
========================================= */

/* HERO */

.vocation-hero{
	min-height:100vh;

	display:flex;
	align-items:center;
	justify-content:center;

	text-align:center;

	position:relative;

	padding:120px 8%;

	background:
		linear-gradient(
			rgba(5,10,20,.75),
			rgba(5,10,20,.88)
		),
		url('../images/vocation/1.png')
		center/cover no-repeat;

	overflow:hidden;
}

.vocation-hero-content{
	max-width:900px;

	animation:fadeUp 1.5s ease;
}


.vocation-hero h1{
	font-family:'Playfair Display', serif;

	font-size:clamp(3rem,7vw,6rem);
	color:white;

	line-height:1.05;

	margin:25px 0;

	text-shadow:
		0 0 20px rgba(255,255,255,.15);
}

.vocation-hero p{
	font-size:1.2rem;

	line-height:1.9;

	color:#d8dee9;

	max-width:720px;

	margin:auto;
}

/* BUTTONS */

.vocation-buttons{
	margin-top:45px;

	display:flex;

	justify-content:center;

	gap:20px;

	flex-wrap:wrap;
}

.vocation-btn{
	padding:14px 34px;

	border-radius:999px;

	text-decoration:none;

	transition:.4s;

	font-weight:500;
}

.vocation-btn-primary{
	background:#d4af37;

	color:#111;
}

.vocation-btn-primary:hover{
	transform:translateY(-4px);

	box-shadow:
		0 10px 30px rgba(212,175,55,.35);
}

.vocation-btn-secondary{
	color:white;

	border:1px solid rgba(255,255,255,.15);

	background:rgba(255,255,255,.06);

	backdrop-filter:blur(10px);
}

.vocation-btn-secondary:hover{
	background:rgba(255,255,255,.12);

	transform:translateY(-4px);
}

/* SECTION */

.vocation-section{
	padding:120px 10%;

	background:rgba(255,255,255,.80);
}

/* =========================================
   CALLING IMAGE
========================================= */

.calling-image{
	width:80%;

	position:relative;
}

/* CALLING GRID */

.calling-grid{
	display:grid;

	grid-template-columns:1fr 1fr;

	gap:80px;

	align-items:center;
}

/* CAROUSEL */

.calling-carousel{
	position:relative;

	width:100%;

	height:650px;

	overflow:hidden;

	border-radius:30px;

	box-shadow:
		0 20px 60px rgba(0,0,0,.45);
}

.calling-slides{
	position:absolute;

	inset:0;

	opacity:0;

	transition:opacity 1s ease;
}

.calling-slides.active{
	opacity:1;

	z-index:2;
}

.calling-slides img{
	width:100%;

	height:100%;

	object-fit:cover;
}

/* CAROUSEL BUTTONS */

.carousel-btn{
	position:absolute;

	top:50%;

	transform:translateY(-50%);

	width:50px;

	height:50px;

	border:none;

	border-radius:50%;

	cursor:pointer;

	font-size:1.5rem;

	color:white;

	background:
		rgba(0,0,0,.35);

	backdrop-filter:blur(10px);

	transition:.3s;

	z-index:5;
}

.carousel-btn:hover{
	background:
		rgba(255,255,255,.15);

	transform:
		translateY(-50%)
		scale(1.08);
}

.prev-btn{
	left:20px;
}

.next-btn{
	right:20px;
}

/* CONTENT */

.calling-content h2{
	font-family:'Playfair Display', serif;

	color:#d4af37;

	font-size:4rem;

	margin-bottom:25px;
}

.calling-content p{
	color:#14336b;

	line-height:2;

	margin-bottom:18px;

	font-size:1.05rem;
}

/* SCRIPTURE */

.scripture-section{
	padding:160px 10%;

	text-align:center;

	background:
		linear-gradient(
			rgba(8,12,20,.88),
			rgba(8,12,20,.88)
		),
		url('../images/vocation/2.png')
		center/cover;
}

.scripture-card{
	max-width:850px;

	margin:auto;

	padding:70px 50px;

	border-radius:35px;

	background:rgba(255,255,255,.05);

	backdrop-filter:blur(12px);

	border:1px solid rgba(255,255,255,.08);

	box-shadow:
		0 20px 60px rgba(0,0,0,.45);
}

.scripture-card h2{
	font-family:'Playfair Display', serif;
	color:white;

	font-size:clamp(2.5rem,5vw,4.5rem);

	line-height:1.2;

	margin-bottom:20px;
}

.scripture-card p{
	color:#d4af37;

	letter-spacing:3px;

	text-transform:uppercase;
}

/* REVEAL */

.reveal{
	opacity:0;

	transform:translateY(50px);

	transition:1s ease;
}

.reveal.active{
	opacity:1;

	transform:translateY(0);
}

/* ANIMATION */

@keyframes fadeUp{

	from{
		opacity:0;
		transform:translateY(40px);
	}

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

/* MOBILE */

@media(max-width:900px){

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

	.calling-carousel{
		height:500px;
	}

	.calling-content h2{
		font-size:3rem;
	}

	.vocation-buttons{
		flex-direction:column;

		align-items:center;
	}

	.vocation-btn{
		width:100%;

		max-width:320px;

		text-align:center;
	}
}

/* =========================================
   JOURNEY SECTION
========================================= */

.journey-section{
	padding:140px 10%;

	position:relative;
}

/* TITLE */

.journey-title{
	text-align:center;

	max-width:750px;

	margin:auto auto 90px;
}

.journey-title h2{
	font-family:'Playfair Display', serif;

	font-size:clamp(3rem,6vw,5rem);

	color:#1e2a38;

	margin-bottom:20px;
}

.journey-description{
	font-size:1.1rem;

	line-height:1.9;

	color:#6b7280;
}

/* GRID */

.journey-grid{
	display:grid;

	grid-template-columns:
		repeat(auto-fit,minmax(280px,1fr));

	gap:35px;
}

/* CARD */

.journey-card{
	position:relative;

	padding:55px 40px;

	border-radius:30px;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,.95),
			rgba(248,244,236,.95)
		);

	border:
		1px solid rgba(0,0,0,.05);

	box-shadow:
		0 15px 40px rgba(0,0,0,.08);

	text-align:center;

	transition:.45s ease;

	overflow:hidden;
}

/* HOVER */

.journey-card:hover{
	transform:
		translateY(-12px);

	box-shadow:
		0 25px 50px rgba(0,0,0,.12);
}

/* TOP GLOW */

.journey-card::before{
	content:"";

	position:absolute;

	top:0;
	left:0;

	width:100%;
	height:5px;

	background:
		linear-gradient(
			90deg,
			#d4af37,
			#f4d06f,
			#d4af37
		);
}

/* ICON */

.journey-icon{
	width:90px;
	height:90px;

	margin:0 auto 30px;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:2.5rem;

	border-radius:50%;

	background:
		linear-gradient(
			145deg,
			#fff8e8,
			#f7e6b7
		);

	box-shadow:
		0 10px 25px rgba(212,175,55,.2);
}

/* HEADINGS */

.journey-card h3{
	font-family:'Playfair Display', serif;

	font-size:2rem;

	color:#1f2937;

	margin-bottom:20px;
}

/* TEXT */

.journey-card p{
	color:#6b7280;

	line-height:1.9;

	font-size:1rem;
}

/* MOBILE */

@media(max-width:900px){

	.journey-section{
		padding:100px 8%;
	}

	.journey-card{
		padding:45px 30px;
	}
}

/* =========================================
   CONTACT SECTION
========================================= */

.contact-section{
	padding:140px 10%;
	position:relative;
	background:rgba(0,0,0,.60);
}

/* WRAPPER */

.contact-wrapper{
	max-width:850px;

	margin:auto;

	text-align:center;
}

/* SUBTITLE */

.contact-subtitle{
	letter-spacing:4px;

	text-transform:uppercase;

	color:#c49b3d;

	font-size:2.5rem;

	margin-bottom:20px;
}

/* TITLE */

.contact-wrapper h2{
	font-family:'Playfair Display', serif;

	font-size:clamp(3rem,6vw,5rem);

	color:white;

	margin-bottom:25px;
}

/* DESCRIPTION */

.contact-description{
	max-width:650px;

	margin:auto auto 60px;

	font-size:1.1rem;

	line-height:1.9;

	color:#adb7c9;
}

/* CARD */

.contact-card{
	position:relative;

	padding:60px 50px;

	border-radius:35px;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,.96),
			rgba(248,244,236,.96)
		);

	border:
		1px solid rgba(0,0,0,.05);

	box-shadow:
		0 20px 50px rgba(0,0,0,.08);

	overflow:hidden;
}

/* TOP GLOW */

.contact-card::before{
	content:"";

	position:absolute;

	top:0;
	left:0;

	width:100%;
	height:5px;

	background:
		linear-gradient(
			90deg,
			#d4af37,
			#f4d06f,
			#d4af37
		);
}

/* ITEM */

.contact-item{
	display:flex;

	align-items:center;

	justify-content:center;

	gap:25px;

	margin-bottom:35px;

	flex-wrap:wrap;
}

/* ICON */

.contact-icon{
	width:90px;
	height:90px;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:2.5rem;

	border-radius:50%;

	background:
		linear-gradient(
			145deg,
			#fff8e8,
			#f7e6b7
		);

	box-shadow:
		0 10px 25px rgba(212,175,55,.2);
}

/* CONTENT */

.contact-content{
	text-align:left;
}

.contact-content h3{
	font-family:'Playfair Display', serif;

	font-size:2rem;

	color:#1f2937;
	text-align: center;
	margin-bottom:10px;
}

.contact-content p{
	color:#6b7280;

	line-height:1.8;
}

/* DIVIDER */

.contact-divider{
	width:100%;
	height:1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(0,0,0,.12),
			transparent
		);

	margin:35px 0;
}

/* NUMBERS */

.contact-numbers{
	display:flex;

	flex-direction:column;

	gap:18px;
}

.contact-number{
	text-decoration:none;

	font-size:1.15rem;

	font-weight:600;

	color:#b8860b;

	transition:.3s ease;
}

.contact-number:hover{
	transform:translateY(-2px);

	color:#8a6a08;
}

/* MOBILE */

@media(max-width:900px){

	.contact-section{
		padding:100px 8%;
	}

	.contact-card{
		padding:50px 30px;
	}

	.contact-content{
		text-align:center;
	}

	.contact-item{
		flex-direction:column;
	}
}

/* ===== ROULETTE CAROUSEL SECTION ===== */

.roulette-section{
    width: 100%;
    background: rgba(255,255,255,.80);
    padding: 0 0 100px 0;
    overflow: hidden;
}

/* ===== CAROUSEL ===== */

.rollcarousel{
    position: relative;
    width: 1200px;
    height: 360px;
    margin: auto;
}

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

.rollcard{
    position: absolute;
	top: 50px;
    width: 350px;
    height: 350px;
    border-radius: 20px;
	border-color: black;
    overflow: hidden;
    transition: all 0.8s ease;
    opacity: 1;
    transform: scale(0.6);
}

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

/* ===== POSITIONS ===== */

.pos1{
    left: 80px;
    transform: scale(0.8);
    opacity: 0.5;
    z-index: 1;
}

/* CENTER */

.pos2{
    left: 425px;
    transform: scale(1);
    opacity: 1;
    z-index: 3;
}

/* RIGHT */

.pos3{
    left: 770px;
    transform: scale(0.8);
    opacity: 0.5;
    z-index: 1;
}

/* Hidden cards */

.hidden{
    opacity: 0;
    transform: scale(0.5);
    z-index: 0;
}

/* =========================================
   FASFHIC SECTION
========================================= */

.fasfhic-section{
    width: 100%;
    background: rgba(255,255,255,.80);
    color: black;
    padding: 100px 0;
}

.fasfhic-container{
    width: 85%;
    max-width: 1200px;
    margin: auto;
}

/* TITLE */

.fasfhic-title{
    font-size: 60px;
    text-align: center;
    margin-bottom: 15px;
    font-weight: 700;
}

.fasfhic-tagline{
    text-align: center;
    color: #d4af37;
    font-size: 24px;
    margin-bottom: 60px;
    font-weight: 400;
}

/* CONTENT */

.fasfhic-content{
    max-width: 900px;
    margin: auto;
}

.fasfhic-content p{
    font-size: 20px;
    line-height: 1.9;
    margin-bottom: 30px;
    text-align: center;
    color: black;
}

/* VALUES */

.fasfhic-values{
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 80px;
    flex-wrap: wrap;
}

.value-card{
    background: #1c1c1c;
    padding: 40px 30px;
    border-radius: 20px;
    width: 300px;
    transition: 0.4s ease;
    text-align: center;
}

.value-card:hover{
    transform: translateY(-10px);
}

.value-card h2{
    color: #d4af37;
    margin-bottom: 20px;
    font-size: 30px;
}

.value-card p{
    line-height: 1.8;
    color: #d9d9d9;
}

/* =========================================
   JOIN SECTION
========================================= */

.join-section{
    width: 100%;
    background: #0d0d0d;
    padding: 120px 0;
}

.join-us{
    width: 85%;
    max-width: 900px;
    margin: auto;
    text-align: center;
    padding: 40px 0;
}

.join-us h2{
    font-size: 55px;
    margin-bottom: 35px;
    color: #d4af37;
}

.join-us p{
    font-size: 20px;
    line-height: 1.9;
    margin-bottom: 25px;
    color: #e5e5e5;
}

/* BUTTON */

.join-btn{
    display: inline-block;
    margin-top: 30px;
    padding: 18px 40px;
    background: #d4af37;
    color: black;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    transition: 0.3s ease;
}

.join-btn:hover{
    background: white;
}

/* MOBILE */

@media(max-width: 768px){

    .fasfhic-title{
        font-size: 42px;
    }

    .fasfhic-tagline{
        font-size: 20px;
    }

    .fasfhic-content p,
    .join-us p{
        font-size: 18px;
    }

    .join-us h2{
        font-size: 38px;
    }

}

/* =========================================
   POPUP FORM
========================================= */

.popup-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* ACTIVE */

.popup-overlay.active{
    display: flex;
}

/* FORM BOX */

.popup-form{
    background: white;
    width: 90%;
    max-width: 500px;
    padding: 40px;
    border-radius: 20px;
    position: relative;
    animation: popupFade 0.4s ease;
}

@keyframes popupFade{

    from{
        transform: scale(0.8);
        opacity: 0;
    }

    to{
        transform: scale(1);
        opacity: 1;
    }

}

.popup-form h2{
    margin-bottom: 25px;
    text-align: center;
    color: #111;
}

/* CLOSE BUTTON */

.close-popup{
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
}

/* INPUTS */

.popup-form input,
.popup-form textarea{
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 16px;
}

/* BUTTON */

.popup-form button{
    width: 100%;
    padding: 15px;
    background: #d4af37;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s ease;
}

.popup-form button:hover{
    background: #111;
    color: white;
}

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

.leadership-section{
    width: 100%;
	background: rgba(255,255,255,0.5);
    padding: 120px 0;
    color: white;
}

.leadership-container{
    width: 85%;
    max-width: 1300px;
    margin: auto;
}

/* TITLE */

.leadership-title{
    text-align: center;
    font-size: 60px;
    margin-bottom: 80px;
    color: white;

    /* BLACK BORDER */
    -webkit-text-stroke: 2px black;

    /* SHADOW */
    text-shadow:
        3px 3px 8px rgba(0,0,0,0.7);
}

/* GRID */

.leadership-grid{
    display: flex;
    gap: 40px;
    justify-content: center;
    flex-wrap: wrap;
}

/* CARD */

.leadership-card{
    background: #1b1b1b;
    width: 500px;
    padding: 50px;
    border-radius: 25px;
    transition: 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.leadership-card:hover{
    transform: translateY(-10px);
}

/* HEADINGS */

.leadership-card h2{
    color: #d4af37;
    font-size: 32px;
    margin-bottom: 20px;
}

.leadership-card h3{
    font-size: 26px;
    margin-bottom: 35px;
    color: #ffffff;
    font-weight: 500;
}

/* ADDRESS */

.leadership-address p{
    font-size: 18px;
    line-height: 1.8;
    color: #d9d9d9;
    margin-bottom: 5px;
}

/* COUNCILLORS */

.councillors{
    margin-bottom: 35px;
}

.councillors h4{
    color: #d4af37;
    font-size: 24px;
    margin-bottom: 20px;
}

.councillors ul{
    padding-left: 20px;
}

.councillors li{
    margin-bottom: 15px;
    line-height: 1.7;
    color: #e5e5e5;
    font-size: 17px;
}

/* MOBILE */

@media(max-width: 768px){

    .leadership-title{
        font-size: 42px;
    }

    .leadership-card{
        width: 100%;
        padding: 35px;
    }

    .leadership-card h2{
        font-size: 28px;
    }

    .leadership-card h3{
        font-size: 22px;
    }

}

.address-title{
    color: #d4af37;
    font-size: 22px;
    margin-bottom: 15px;
    margin-top: 10px;
}

/* =========================================
   HIGHLIGHTS SECTION
========================================= */
/* Authentication Popup */

.auth-modal {

    position: fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.85);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}


.auth-container {

    background:#1b1b1b;

    width:400px;

    padding:40px;

    border-radius:20px;

    text-align:center;

    color:white;

    box-shadow:
    0 0 30px rgba(212,175,55,0.4);

}


.auth-container h2 {

    color:#d4af37;

    font-size:32px;

}


.auth-container input {


    width:90%;

    padding:14px;

    margin:10px;

    border-radius:8px;

    border:none;

}


.auth-container button {


    width:90%;

    padding:14px;

    margin:8px;

    border-radius:8px;

    border:none;

    background:#d4af37;

    color:black;

    font-weight:bold;

    cursor:pointer;

}


.auth-container button:hover {

    background:white;

}


#authMessage {

    margin-top:15px;

    color:#d4af37;

}

#forgotPassword {
    color: white;
    text-decoration: none;
}


#forgotPassword:hover {
    color: #cccccc;
    text-decoration: underline;
}