/* LandingPage/style.css - Page specific styles for the Landing Page */

/* Minimal Reset */
html, body, header, section, div, h1, p, img, video, button, a, ul, li {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1; /* Will be overridden by more specific body rule below */
}
ol, ul {
  list-style: none;
}
/* End Minimal Reset */


:root {
  --cs-font-ui: 'Titillium Web', sans-serif; 
  --font-primary: 'Poppins', sans-serif; 
  --font-heading-landing: 'Merriweather', serif; 

  --bg-light: #fefaf5;
  --bg-white: #ffffff;
  --primary-yellow: #ffd77b;
  --secondary-yellow: #ffe4a1;
  --text-dark: #333;
  --text-light: #f8f9fa;
  --shadow-soft: 0 6px 12px rgba(0,0,0,0.08);
  --shadow-medium: 0 8px 20px rgba(0,0,0,0.12);
  --border-radius: 10px;
  --navbar-height: 79px; 
  --below-navbar-height: 79px; /* Height of the navbar when scrolled */
   --scrollbar-track-bg: var(--bg-light); /* Or a slightly darker shade like #e0e0e0 */
  --scrollbar-thumb-bg: var(--primary-yellow);
  --scrollbar-thumb-hover-bg: #ffc658; /* A slightly brighter yellow for hover */
  --scrollbar-width: 8px; /* Width of the scrollbar */
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  overflow-y: scroll; /* Ensures scrollbar for snapping, important */
  height: 100%;
}

body {
  font-family: var(--font-primary);
  background-color: var(--bg-light);
  color: var(--text-dark);
  line-height: 1.7;
  overscroll-behavior-y: contain;
  min-height: 100%;
  /* Remove padding-top from body if common-header is fixed and snap-sections handle offset */
}

.snap-section {
  scroll-snap-align: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center; /* Horizontally centers .snap-section-main-content-wrapper */
  width: 100%;
  overflow: hidden; /* Important for snap */
  position: relative; /* For absolute positioning of scroll indicator if needed, though flex is better */

  /* THIS IS A KEY CHANGE: Apply navbar padding to the .snap-section itself */
  padding-top: var(--below-navbar-height); /* Space for fixed navbar */
  /* Adjust box-sizing if this padding affects the 100vh calculation undesirably.
     If common-header has box-sizing: border-box, this should be fine.
     Alternatively, calculate height: calc(100vh - var(--navbar-height)) and remove padding-top,
     but then fixed header needs to be accounted for differently.
     Let's stick with padding-top on the section first.
  */
  box-sizing: border-box; /* Ensure padding-top is included in height calculation */
}

.snap-section-content-area {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Take up remaining height within the padded .snap-section */
    width: 100%;
    max-width: 960px; /* Your content max-width */
    overflow: hidden; /* Contain its children */
}


/* Wrapper for the main content of a snap section, excluding the scroll indicator */
.snap-section-main-content {
    width: 100%;
    /* max-width is now on .snap-section-content-area */
    flex-grow: 1; /* Crucial: Allows this to take up available vertical space */
    display: flex;
    flex-direction: column;
    
    /* Padding for internal breathing room, NOT for navbar offset anymore */
    padding-top: 2rem; /* Breathing room from the top of its container */
    padding-bottom: 1rem; /* Space above the scroll indicator's reserved area */
    padding-left: 1.5rem;  /* Existing horizontal padding */
    padding-right: 1.5rem; /* Existing horizontal padding */

    overflow-y: auto; /* Allows internal scrolling */
    position: relative; /* Important for scrollbar positioning context if needed */
}

#hero.snap-section {
    padding-top: 0; /* Hero section's background video needs to go edge-to-edge under navbar */
}
#hero.snap-section .snap-section-content-area {
    /* The hero's content area still needs to respect the navbar */
    padding-top: var(--navbar-height);
    max-width: 1000px; /* As you had before */
}

#hero.snap-section .snap-section-main-content {
    /* Hero content is often vertically centered */
    justify-content: center;
    padding-top: 1rem; /* Less internal top padding for hero */
    padding-bottom: 0; /* Scroll indicator provides bottom spacing */
    padding-left: 0; /* Assuming hero-content-wrapper handles its own horiz padding */
    padding-right: 0;
}

/* Specific adjustments for hero */
.hero-video.snap-section {
  color: var(--text-light);
}
.hero-video .snap-section-main-content { /* Target hero's content wrapper */
    max-width: 1000px; 
    padding-top: 1rem; 
}

.final-cta.snap-section .snap-section-main-content {
    padding-bottom: 2rem; /* More bottom padding as no scroll indicator */
    justify-content: center;
}
.final-cta.snap-section .scroll-indicator-container {
    display: none;
}


/* --- Hero Video Section --- */
/* .hero-video styles mostly covered by .snap-section */
.hero-video { 
  color: var(--text-light);
}

.hero-background {
  position: absolute;
  /* Corrected: Cover the entire snap-section, not just viewport below navbar */
  top: 0; 
  left: 0;
  height: 100%; /* Full height of parent .snap-section */
  width: 100%;
  z-index: -2; 
  overflow: hidden;
}

.hero-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-video::before { 
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0; /* Cover entire section */
    background-color: rgba(0, 0, 0, 0.55); 
    z-index: -1; 
}

.hero-content-wrapper { 
    z-index: 1; /* Should be part of .snap-section-main-content */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.hero-logo {
  max-height: 130px; 
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInLogo 1s 0.5s ease-out forwards;
}
@keyframes fadeInLogo {
  to { opacity: 1; transform: translateY(0); }
}

.hero-content-wrapper h1 {
  font-family: var(--font-heading-landing); 
  font-size: clamp(2rem, 5vw, 2.8rem); 
  font-weight: 700;
  margin-bottom: 0.6rem;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInHeading 1s 0.8s ease-out forwards;
  color: var(--text-light); 
}
 @keyframes fadeInHeading {
  to { opacity: 1; transform: translateY(0); }
}

.hero-content-wrapper p.hero-subtitle { 
  font-size: clamp(0.9rem, 2.2vw, 1.05rem); 
  margin-bottom: 1.5rem; 
  max-width: 600px; 
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInParagraph 1s 1.1s ease-out forwards;
  color: #e0e0e0; 
}
@keyframes fadeInParagraph {
  to { opacity: 1; transform: translateY(0); }
}

.hero-features-carousel-container {
    width: 100%;
    max-width: 1000px; 
    margin: 1.5rem auto 0 auto; 
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInCarousel 1s 1.4s ease-out forwards;
    position: relative; 
    padding-left: 45px; 
    padding-right: 45px;
}
.hero-features-carousel-container .features-carousel { /* This is the .glider element */
    overflow: hidden;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
.hero-features-carousel-container .glider-slide {
    padding: 10px; 
}

.hero-features-carousel-container .glider-prev {
  left: 10px; /* Position 10px from the edge of the padded container */
}
.hero-features-carousel-container .glider-next {
  right: 10px; /* Position 10px from the edge of the padded container */
}
@keyframes fadeInCarousel { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLogo { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInHeading { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInParagraph { to { opacity: 1; transform: translateY(0); } }

.features-carousel .feature-card {
  background: rgba(255, 255, 255, 0.12); 
  backdrop-filter: blur(10px); 
  border-radius: var(--border-radius);
  padding: 1.2rem; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, z-index 0s linear 0.3s; 
  text-decoration: none;
  color: var(--text-light); 
  height: 130px; /* This is the card's height before scaling */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.15);
  position: relative; 
  z-index: 1; 
  width: 100%; /* Make card fill the padded .glider-slide area */
  box-sizing: border-box; /* Ensure padding is included in width/height */
}

.features-carousel .feature-card:hover {
  transform: translateY(-6px) scale(1.05); /* Slightly increased scale for more noticeable effect */
  background: rgba(255, 255, 255, 0.25); /* Brighter background on hover */
  box-shadow: 0 8px 25px rgba(0,0,0,0.35); /* Stronger shadow on hover */
  z-index: 5; 
}

.features-carousel .feature-card h3 {
  margin-top: 0; 
  margin-bottom: 0.4rem; 
  font-size: 1rem; 
  color: var(--primary-yellow); 
  font-weight: 600;
}
.features-carousel .feature-card p {
  font-size: 0.75rem; 
  line-height: 1.3;
  margin-bottom: 0; 
  color: #dadada; 
}



/* Reset any potential default Glider arrow styles that might hide OUR buttons */
.hero-features-carousel-container button.glider-prev,
.hero-features-carousel-container button.glider-next {
  z-index: 20 !important; /* Keep high z-index for arrows */
  display: flex !important; 
  opacity: 0.7 !important; 
  position: absolute !important; 
  top: 50% !important;
  transform: translateY(-50%) !important;
  
  background: rgba(0,0,0,0.45) !important;
  color: var(--text-light) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  font-size: 1.6rem !important; 
  align-items: center !important;
  justify-content: center !important;
  border: none !important; 
  padding: 0 !important; 
  cursor: pointer !important;
  transition: background-color 0.2s ease, opacity 0.2s ease !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3); 
}


.hero-features-carousel-container button.glider-prev {
  left: 5px !important; /* Position within the container's padding */
}

.hero-features-carousel-container button.glider-next {
  right: 5px !important; /* Position within the container's padding */
}

.hero-features-carousel-container button.glider-prev:hover,
.hero-features-carousel-container button.glider-next:hover {
  background: rgba(0,0,0,0.65) !important;
  opacity: 1 !important;
}

.hero-features-carousel-container .dots {
    position: absolute; 
    bottom: -25px; /* Position below the carousel slides */
    left: 50%;
    transform: translateX(-50%);
    z-index: 5; 
    display: flex; /* Ensure dots line up horizontally */
    justify-content: center;
    padding-top: 5px; /* Add some space if slides are very close to bottom */
    width: auto; /* Allow it to size based on content */
    background: transparent !important; /* Ensure no conflicting background from defaults */
}

.hero-features-carousel-container .dots .glider-dot {
  display: block !important; 
  width: 10px !important;
  height: 10px !important;
  margin: 0 5px !important; 
  border-radius: 50% !important;
  background-color: rgba(255,255,255,0.3) !important; 
  transition: background-color 0.3s ease, transform 0.3s ease !important;
  border: none !important; 
  padding: 0 !important; 
  cursor: pointer;
}
.hero-features-carousel-container .dots .glider-dot.active {
  background-color: var(--primary-yellow) !important;
  transform: scale(1.3) !important; 
}

.mute-button {
  position: fixed; 
  bottom: 20px; 
  right: 20px;
  z-index: 1001;
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--text-dark);
  border: none;
  border-radius: 6px;
  padding: 7px 10px; 
  font-size: 13px; 
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background 0.2s ease;
}
.mute-button:hover {
  background-color: white;
}

.scroll-indicator-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
  min-height: var(--scroll-indicator-total-height, 60px);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  opacity: 0;
  animation: fadeInScrollIndicator 1s 2s ease-out forwards;
}
@keyframes fadeInScrollIndicator {
  to { opacity: 0.85; }
}

.scroll-indicator-arrow {
  font-size: 2.2rem; 
  animation: bounceArrow 2s infinite;
}
.hero-video .scroll-indicator-arrow, 
.hero-video .scroll-indicator-text {
    color: var(--text-light); 
}
.light-bg-section .scroll-indicator-arrow,
.light-bg-section .scroll-indicator-text {
    color: var(--text-dark); 
}
@keyframes bounceArrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); } 
}
.scroll-indicator-text {
  font-size: 0.8rem; 
  margin-top: -8px; 
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3); 
}
.light-bg-section .scroll-indicator-text {
  text-shadow: none; 
}

.section-inner {
  max-width: 100%; /* It's constrained by .snap-section-main-content's max-width */
  opacity: 0;
  transform: translateY(30px); 
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  width: 100%;
}
.section-inner.revealed {
  opacity: 1;
  transform: translateY(0);
}

.section-title {
  font-family: var(--cs-font-ui);
  font-size: clamp(1.8rem, 4.5vw, 2.2rem); 
  font-weight: 700;
  margin-bottom: 2rem; 
  color: var(--text-dark);
  text-align: center; 
  position: relative;
  padding-bottom: 0.75rem;
}
.section-title::after { 
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px; 
    height: 3px;
    background-color: var(--primary-yellow);
}

#about .section-inner {
    display: flex;
    flex-direction: column;
    align-items: center; 
}
.about-intro-text {
    font-size: 1.05rem; 
    line-height: 1.8;
    text-align: center;
    max-width: 780px; 
    margin-bottom: 2.5rem;
}
.about-intro-text strong {
    color: var(--primary-yellow);
    font-weight: 600;
}
.mission-statement {
    background-color: var(--bg-white);
    padding: 2rem 1.8rem; 
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    text-align: center;
    max-width: 800px; 
}
.mission-statement h3 {
    font-family: var(--cs-font-ui);
    font-size: 1.6rem; 
    color: var(--primary-yellow);
    margin-bottom: 1rem;
}
.mission-statement p {
    font-size: 1rem; 
    color: #444;
}
.mission-statement .highlight { 
    font-weight: 600;
    color: var(--text-dark);
}

.quote-block {
  background-color: #fff9e6; 
  border-left: 5px solid var(--primary-yellow);
  padding: 1.5rem; 
  font-style: italic;
  margin: 2rem auto; 
  max-width: 700px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  box-shadow: var(--shadow-soft);
  font-size: 1.05rem; 
}

.sdg-section { 
  background-color: #fff4d1; 
}
.sdg-section .section-inner p {
  max-width: 800px;
  margin: 0 auto 1.5rem auto; 
  font-size: 1.05rem; 
  text-align: center;
}
.sdg-section .section-inner .quote-block { 
    background-color: rgba(255,255,255,0.7);
}

.final-cta { 
  text-align: center;
  background-color: var(--bg-light); 
}
.final-cta h2 {
  font-size: clamp(1.8rem, 4.5vw, 2.1rem); 
  color: var(--text-dark);
  margin-bottom: 1rem;
}
.final-cta p {
  font-size: 1.05rem; 
  color: #555; 
  margin-bottom: 2rem;
  font-weight: 500;
}
.btn-primary {
  background: linear-gradient(90deg, var(--secondary-yellow), var(--primary-yellow));
  color: #333;
  font-weight: bold;
  padding: 0.9rem 2.2rem; 
  font-size: 1.05rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn-primary:hover {
  background: linear-gradient(90deg, var(--primary-yellow), var(--secondary-yellow));
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  transform: translateY(-3px) scale(1.03);
}

/* Custom Scrollbar Styling */
/* For Webkit browsers (Chrome, Safari, Edge, Opera) */
.snap-section-main-content::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.snap-section-main-content::-webkit-scrollbar-track {
  background: var(--scrollbar-track-bg);
  border-radius: calc(var(--scrollbar-width) / 2);
  margin-block: 0.5rem; /* Adjust for top/bottom gap within its own container */
  margin-inline: 2px; /* If you want side gaps */
}

.snap-section-main-content::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-bg);
  border-radius: calc(var(--scrollbar-width) / 2); /* Rounded thumb */
  border: 2px solid var(--scrollbar-track-bg); /* Creates a "padding" effect */
}

.snap-section-main-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover-bg);
}

/* For Firefox (limited customization) */
.snap-section-main-content {
  scrollbar-width: thin; /* Options: 'auto', 'thin', 'none' */
  scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg); /* thumb track */
}

/* JomKL Heritage Journey Guide - Visual Flow Section */
#jomkl-journey-guide { /* The snap-section itself */
    background-color: #fdfcfa; /* A slightly different light shade for variety */
}

#jomkl-journey-guide .section-title {
    margin-bottom: 1.5rem; /* Slightly less margin before subtitle */
}

#jomkl-journey-guide .section-subtitle {
    font-size: 1.1rem;
    color: var(--text-dark);
    line-height: 1.7;
    margin-bottom: 4rem; /* More space before the steps */
    max-width: 780px; /* Ensure it's constrained */
    margin-left: auto;
    margin-right: auto;
}

.journey-flow-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5rem; /* Generous vertical space for the icon overlap */
    max-width: 900px; /* Max width for the 3-column layout on desktop */
    margin: 0 auto; /* Center the container if it's narrower */
}

.journey-flow-step {
    background-color: var(--bg-white);
    border-radius: 16px; /* Softer, larger radius */
    box-shadow: 0 8px 25px rgba(0,0,0,0.07); /* Softer initial shadow */
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 40px; /* More space for the larger icon */
    /* Reveal animation base styles */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), 
                transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), 
                box-shadow 0.3s ease-in-out;
}

.journey-flow-step.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delays */
.journey-flow-container .journey-flow-step:nth-child(1).revealed { transition-delay: 0.1s; }
.journey-flow-container .journey-flow-step:nth-child(2).revealed { transition-delay: 0.2s; }
.journey-flow-container .journey-flow-step:nth-child(3).revealed { transition-delay: 0.3s; }

.journey-flow-step:hover .journey-flow-video-container video {
    transform: scale(1.03); /* Slightly less zoom for video, can be distracting */
}

.journey-flow-icon-container {
    position: absolute;
    top: -35px; /* (70px / 2) */
    left: 50%;
    transform: translateX(-50%);
    background-image: linear-gradient(135deg, var(--secondary-yellow), var(--primary-yellow));
    border-radius: 50%;
    width: 80px; /* Increased size */
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 15px rgba(255,215,123,0.5); /* Yellowish glow */
    z-index: 10; /* Ensure it's above image */
    border: 5px solid var(--bg-white); /* Cleaner separation */
    transition: transform 0.3s ease-in-out;
}
.journey-flow-step:hover .journey-flow-icon-container {
    transform: translateX(-50%) scale(1.1) rotate(5deg); /* Playful hover on icon */
}

.journey-flow-icon {
    font-size: 2.5rem; /* Adjusted for new container size */
    color: #8c5c00; /* Darker, richer gold for icon */
    stroke-width: 1.5;
}

.journey-flow-image-container {
    width: calc(100% - 3rem); /* Slightly more inset */
    margin: 0 auto 1.5rem auto; /* Centered, space below */
    height: 280px; /* Consistent height */
    border-radius: 10px; /* Match card's softer radius */
    overflow: hidden;
    background-color: #f0f0f0; /* Lighter placeholder */
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.08); /* Inner shadow for image depth */
    position: relative; /* For potential overlays if needed */
}

.journey-flow-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* Center is usually good, adjust if specific parts are cut */
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease-in-out; /* Smooth zoom */
}
.journey-flow-step:hover .journey-flow-image-container img {
    transform: scale(1.05); /* Subtle image zoom */
    filter: brightness(1.03); /* Slight brightness pop */
}

.journey-flow-content {
    padding: 0 2rem 2rem 2rem; /* More padding */
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.journey-flow-number {
    font-size: 4rem; /* Larger, more stylistic number */
    font-weight: 700;
    font-family: var(--font-heading-landing); /* Use a distinct heading font */
    color: rgba(var(--primary-yellow-rgb, 255, 215, 123), 0.25); /* Very light yellow, define --primary-yellow-rgb in :root if using rgba with var */
    /* If you can't define RGB var, use a hex with opacity: #ffd77b40 */
    line-height: 1;
    margin-bottom: -0.5em; /* Pull title up slightly over the number */
    user-select: none;
    z-index: 1; /* Below content if it overlaps slightly */
    text-align: center; /* Ensure it's centered */
}

.journey-flow-content h3 {
    font-family: var(--cs-font-ui);
    font-size: 1.8rem; /* More prominent heading */
    color: var(--text-dark);
    margin-bottom: 1rem;
    position: relative; /* For z-index if number overlaps */
    z-index: 2;
}

.journey-flow-content p {
    font-size: 1rem; /* Slightly larger paragraph text */
    color: #4a4a4a; /* Slightly darker grey for better readability */
    line-height: 1.75;
    margin-bottom: 2rem; /* More space before actions */
    flex-grow: 1;
}

.journey-flow-actions {
    margin-top: auto;
    padding-top: 1rem;
}

.journey-flow-video-container { /* Replaces journey-flow-image-container */
    width: calc(100% - 2rem); /* Adjust inset as needed */
    margin: 0 auto 1.5rem auto;
    height: 240px; /* Adjust height as needed for video aspect ratios */
    border-radius: 10px;
    overflow: hidden;
    background-color: #1a1a1a; /* Dark bg for videos if they don't fill */
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.08);
    position: relative;
}

.journey-flow-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Critical for videos */
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}


.btn-journey-link {
    display: inline-flex; /* Align icon and text */
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 2px solid var(--primary-yellow);
    color: var(--primary-yellow);
    padding: 0.8rem 1.8rem; /* Larger padding */
    border-radius: 30px; /* More pronounced pill shape */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother transition */
    font-size: 0.95rem;
    margin: 0.5rem 0.3rem;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.btn-journey-link i.ti {
    margin-left: 0.5rem;
    font-size: 1.1em; /* Icon slightly larger */
    transition: transform 0.25s ease-out;
}

.btn-journey-link:hover {
    background-color: var(--primary-yellow);
    color: var(--text-dark);
    border-color: var(--primary-yellow);
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(255,215,123,0.35);
}
.btn-journey-link:hover i.ti {
    transform: translateX(5px) rotate(5deg); /* Add slight rotation */
}


/* Responsive adjustments for the visual journey flow */
@media (min-width: 768px) and (max-width: 1199px) { /* Tablet - 2 columns */
    .journey-flow-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 2.5rem; /* row-gap column-gap */
    }
    .journey-flow-image-container, /* Apply to video container too */
    .journey-flow-video-container {
        height: 220px;
    }
     .journey-flow-content h3 {
        font-size: 1.4rem;
    }
    .journey-flow-content p {
        font-size: 0.9rem;
        min-height: 70px; /* Adjust */
    }
}

@media (min-width: 1200px) { /* Larger Desktop - 4 columns */
    .journey-flow-container {
        grid-template-columns: repeat(4, 1fr); /* Changed to 4 columns */
        gap: 2rem; /* Adjust gap for 4 columns */
        max-width: 1200px; /* Allow container to be wider for 4 items */
    }
    .journey-flow-step {
        padding-top: 35px; /* Adjust icon padding if needed */
    }
    .journey-flow-icon-container {
        width: 70px;
        height: 70px;
        top: -35px;
    }
    .journey-flow-icon {
        font-size: 2.2rem;
    }
    .journey-flow-image-container, /* Apply to video container too */
    .journey-flow-video-container {
        height: 180px; /* Height will be smaller for 4-col */
    }
     .journey-flow-content h3 {
        font-size: 1.3rem;
    }
    .journey-flow-content p {
        font-size: 0.85rem;
        min-height: 100px; /* Give more space for text in narrower cards */
        margin-bottom: 1.5rem;
    }
    .btn-journey-link {
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
    }
}


/* ... (Keep all existing styles) ... */

/* Journey Flow - Video/Image Enlargement */
.journey-flow-video-container { /* Or .journey-flow-image-container if you use images too */
    /* ... existing styles ... */
    position: relative; /* For positioning the overlay icon */
    cursor: pointer; /* Indicate it's clickable */
}

a.journey-media-enlarger {
    display: block; /* Make the link take up the container space */
    width: 100%;
    height: 100%;
    position: relative; /* For the icon overlay */
    text-decoration: none;
}

.enlarge-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem; /* Adjust icon size */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* So it doesn't interfere with video controls if any */
}

.journey-flow-video-container:hover .enlarge-icon-overlay,
a.journey-media-enlarger:focus .enlarge-icon-overlay { /* Show on focus for accessibility */
    opacity: 1;
}

/* Modal Styles */
.journey-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2000; /* Sit on top of everything */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if content is too big */
    background-color: rgba(0,0,0,0.85); /* Darker overlay */
    padding-top: var(--navbar-height); /* Account for fixed navbar */
    box-sizing: border-box;
    animation: fadeInModal 0.3s ease-out;
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.journey-modal-content {
    margin: auto;
    display: block;
    width: 85%; /* Default width */
    max-width: 900px; /* Max width for videos/images */
    max-height: calc(100vh - var(--navbar-height) - 80px); /* Max height considering padding and caption */
    padding: 10px; /* Some padding around the content if needed */
    position: relative; /* For potential absolute positioned children if any */
}

.journey-modal-content video,
.journey-modal-content img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - var(--navbar-height) - 100px); /* Stricter max height for the media itself */
    margin: auto; /* Center the media */
    border-radius: 8px; /* Optional: rounded corners for enlarged media */
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.journey-modal-close {
    position: absolute;
    top: calc(var(--navbar-height) + 15px); /* Position relative to viewport, below navbar */
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    z-index: 2001; /* Above modal content */
}

.journey-modal-close:hover,
.journey-modal-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.journey-modal-caption {
    margin: 15px auto 30px auto; /* Spacing for caption */
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    font-size: 0.9rem;
}

/* Animation for closing modal (optional) */
.journey-modal.closing {
    animation: fadeOutModal 0.3s ease-out forwards;
}
@keyframes fadeOutModal {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Responsive adjustments for modal on smaller screens */
@media (max-width: 768px) {
    .journey-modal-content {
        width: 95%;
        max-height: calc(100vh - var(--navbar-height-mobile) - 60px);
    }
     .journey-modal-content video,
    .journey-modal-content img {
        max-height: calc(100vh - var(--navbar-height-mobile) - 80px);
    }
    .journey-modal-close {
        top: calc(var(--navbar-height-mobile) + 10px);
        right: 20px;
        font-size: 30px;
    }
    .journey-modal-caption {
        font-size: 0.85rem;
        margin-top: 10px;
        margin-bottom: 20px;
    }
     /* Ensure navbar height is considered for modal padding */
    .journey-modal {
        padding-top: var(--navbar-height-mobile);
    }
}


/* Ensure mobile styles from previous response are still applied for journey-flow-step etc. */
@media (max-width: 767px) {
    #jomkl-journey-guide .section-subtitle {
        margin-bottom: 3rem;
        font-size: 1rem;
    }
    .journey-flow-container {
        gap: 4.5rem; /* More vertical space for icon overlap on mobile */
    }
    .journey-flow-icon-container {
        width: 70px;
        height: 70px;
        top: -35px;
    }
    .journey-flow-icon {
        font-size: 2.2rem;
    }
    .journey-flow-image-container,
    .journey-flow-video-container {
        height: 220px;
    }
    .journey-flow-content {
        padding: 0 1.2rem 1.5rem 1.2rem;
    }
    .journey-flow-content h3 {
        font-size: 1.5rem;
    }
     .journey-flow-content p {
        font-size: 0.9rem;
    }
    .journey-flow-actions {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }
    .btn-journey-link {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
  .snap-section {
     padding-top: var(--navbar-height-mobile); /* Use mobile navbar height for section offset */
  }
   .snap-section-main-content {
    padding-top: 1.5rem; /* Internal top padding */
    padding-bottom: 1rem; /* Internal bottom padding */
  }

  #hero.snap-section {
      padding-top: 0; /* Hero still edge-to-edge */
  }
  #hero.snap-section .snap-section-content-area {
      padding-top: var(--navbar-height-mobile); /* Hero content respects mobile navbar */
  }
  #hero.snap-section .snap-section-main-content {
      padding-top: 1rem; /* Internal for hero */
  }

  .hero-video.snap-section {
      padding-top: var(--navbar-height); 
  }

  .final-cta.snap-section .snap-section-main-content {
      padding-bottom: calc(var(--navbar-height-mobile) + 1.5rem);
  }

  .hero-logo { max-height: 100px; } 
  .hero-video h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
  .hero-video p.hero-subtitle { font-size: clamp(0.85rem, 2vw, 0.95rem); margin-bottom: 1.5rem;}

  .hero-features-carousel-container { max-width: 100%; margin-top: 1rem;} 
  .features-carousel .feature-card { height: 110px; padding: 0.7rem; }
  .features-carousel .feature-card h3 { font-size: 0.9rem; }
  .features-carousel .feature-card p { font-size: 0.7rem; }

  .section-title { font-size: 1.5rem; }
  .quote-block { padding: 0.8rem; font-size: 0.9rem; }
  .about-intro-text { font-size: 0.9rem; }
  .mission-statement h3 { font-size: 1.3rem; }
  .mission-statement p { font-size: 0.85rem; }
  .sdg-section .section-inner p { font-size: 0.9rem; }
  .final-cta h2 { font-size: 1.5rem; }
  .final-cta p { font-size: 0.9rem; }
  .btn-primary { padding: 0.7rem 1.5rem; font-size: 0.9rem; }

  .mute-button {
    bottom: 10px; right: 10px; 
    padding: 4px 7px; font-size: 11px;
  }
  .scroll-indicator-arrow { font-size: 1.6rem; }
  .scroll-indicator-text { font-size: 0.65rem; margin-top: -6px; }
}