/* BASIC VARIABLES (Dark Mode Defaults) */
:root {
    --dark-bg: #191c20; /* Primary Header Background: Deep Dark Gray/Blue */
    --light-text: #ffffff; /* White text (Default for Dark Mode) */
    --faded-text: #a1a1a1; /* Faded/utility text */
    --accent-color: #007bff; /* Bright Blue Accent */
    --secondary-header-bg: #282c34; /* Dark gray for sticky nav/dropdowns */
    --body-bg: #f4f4f4; /* Light body background for contrast */
    --hero-accent-color: #fffeb0;
    --hero-hover-color-dark: #fffed3;
   

    /* NEW JELLY TOGGLE VARIABLES */
    --toggle-dark-bg: #343a40; /* Darker grey for the toggle background */
    --toggle-light-bg: #f8f9fa; /* Lighter white for the toggle background */
    --toggle-shadow-dark: rgba(0, 0, 0, 0.5); /* Shadow for dark mode toggle */
    --toggle-shadow-light: rgba(0, 0, 0, 0.2); /* Shadow for light mode toggle */
    --toggle-active-bg: var(--accent-color); /* Background when active/hovered */
    --toggle-icon-color-dark: #f0f0f0;
    --toggle-icon-color-light: #343a40;
}

/* Light Mode Variables - Applied when body has .light-mode class */
body[data-theme="light"] {
    --dark-bg: #ffffff; /* Primary Header Background: White */
    --light-text: #191c20; /* Dark text (Default for Light Mode) */
    --faded-text: #5d5d5d;
    --secondary-header-bg: #ececec;
    --body-bg: #ffffff;

    /* JELLY TOGGLE LIGHT MODE SPECIFIC */
    --toggle-dark-bg: #f8f9fa; /* Reverse colors for light mode toggle */
    --toggle-light-bg: #343a40;
    --toggle-icon-color-dark: #343a40;
    --toggle-icon-color-light: #f0f0f0;
}


/* GLOBAL STYLING */
body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: var(--body-bg);
    transition: background-color 0.3s;
    overflow-x: hidden;
}

/* --- TIER 1: UTILITY BAR (#utility-bar) --- */
/* IMPORTANT CHANGE: Match background to --dark-bg for smooth transition */
#utility-bar {
    background-color: var(--dark-bg); 
    color: var(--faded-text);
    width: 100%;
    z-index: 1001; 
    transition: background-color 0.3s, color 0.3s;
}

.utility-content-bar {
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    /* Reduced vertical padding slightly for a smaller top bar */
    padding: 3px 60px; 
    font-size: 0.85em; /* Slightly smaller font for a shorter bar */
}

.utility-link {
    color: var(--faded-text);
    text-decoration: none;
    margin-left: 20px;
    font-weight: 500;
    transition: color 0.2s;
    position: relative; /* Added for underline animation */
}

/* Create animated underline */
.utility-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px; /* Slightly below text */
    width: 0%;
    height: 1.5px;
    background-color: var(--accent-color); /* Blue underline */
    transition: width 0.3s ease; /* Smooth animation */
}

.utility-link:hover {
    color: var(--light-text);
}

/* Expand underline on hover */
.utility-link:hover::after {
    width: 100%;
}

/* --- Language Selector / Country Region (Utility Bar) --- */
.language-selector {
    position: relative;
    cursor: pointer;
    color: var(--faded-text);
    margin-left: 20px;
    transition: color 0.2s;
}

.language-selector:hover {
    color: var(--light-text);
}

/* Add animated underline for language selector text */
.language-selector #selected-language-text {
    position: relative;
}

.language-selector #selected-language-text::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 1.5px;
    background-color: var(--accent-color);
    transition: width 0.4s ease;
}

.language-selector #selected-language-text:hover::after {
    width: 100%;
}

/* NEW: Circular Flag Styling */
.flag-circle {
    display: inline-block; /* Essential for setting width/height on a span */
    width: 25px; 
    height: 25px; 
    border-radius: 50%; /* Makes it circular */
    background-size: cover; /* Crops the image to fill the circle */
    background-position: center; /* Centers the image within the circle */
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-left: 5px;
    box-shadow: 0 0 3px rgba(0,0,0,0.3); /* Subtle shadow for depth */
}


/* --- TIER 2: MAIN NAVIGATION BAR (#main-header-bar) --- */
#main-header-bar {
    background-color: var(--dark-bg); 
    color: var(--light-text);
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s, color 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 
}

.main-content-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 60px; 
}

.header-left, .header-right {
    display: flex;
    align-items: center;
}

/* RIANSA LOGO SIZE AND POSITION ADJUSTED */
.logo img {
    height: 85px; 
    width: auto;
    vertical-align: middle;
    margin-top: -10px; 
    margin-bottom: 5px;
}

/* Main Navigation Links */
.main-nav a {
    color: var(--light-text); 
    text-decoration: none;
    margin: 0 15px;
    font-size: 1em;
    padding: 10px 5px; 
    display: inline-block; 
    transition: transform 0.3s ease-out, color 0.3s; 
    font-weight: 500;
    position: relative; /* Needed for underline animation */
}

/* Create animated underline */
.main-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0; /* Align at bottom of link */
    width: 0%;
    height: 1px; /* Thin underline */
    background-color: var(--accent-color); /* Blue underline */
    transition: width 0.4s ease;
}

/* RIANSA ZOOM EFFECT RESTORED */
.main-nav a:hover {
    transform: scale(1.1); 
    color: var(--light-text);
}

/* Animate underline on hover */
.main-nav a:hover::after {
    width: 100%;
}


/* --- SEARCH / MODE TOGGLE BUTTONS (Header Right) --- */

.search-controls {
    display: flex;
    align-items: center;
    color: var(--light-text);
}

#search-button {
    background: transparent;
    border: none;
    color: var(--light-text);
    font-size: 1em;
    cursor: pointer;
    margin-right: 15px;
    padding: 5px;
    font-weight: 500;
    transition: color 0.2s;
}

#search-button:hover {
    color: var(--accent-color);
}

/* Mode Toggle Button - JELLY STYLE */
.mode-toggle-pill {
    position: relative; /* Essential for containing pseudo-elements */
    background-color: var(--toggle-dark-bg); /* Default dark mode background */
    border: none;
    cursor: pointer;
    padding: 0; /* Remove internal padding, controlled by size below */
    margin-left: 15px;
    border-radius: 25px; /* Pill shape for the toggle */
    width: 50px; /* Width of the toggle pill */
    height: 30px; /* Height of the toggle pill */
    display: flex;
    align-items: center;
    justify-content: space-around; /* Distribute icons */
    overflow: hidden; /* Crucial for pseudo-element animation */
    box-shadow: 0 4px 6px var(--toggle-shadow-dark); /* Initial soft shadow */
    transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, transform 0.2s ease;
}

/* Click/Hover effect - a slight "squish" */
.mode-toggle-pill:active {
    transform: scale(0.95);
    box-shadow: 0 2px 4px var(--toggle-shadow-dark); /* Flatter shadow on press */
}

/* Pseudo-element for the moving "jelly" background/indicator */
.mode-toggle-pill::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px; /* Size of the moving circle */
    height: 24px;
    background-color: var(--toggle-icon-color-dark); /* Color of the moving "jelly" */
    border-radius: 50%;
    z-index: 1; /* Below the icons but above the main toggle background */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); /* Inner shadow for depth */
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), /* Jelly bounce */
                background-color 0.4s ease-in-out;
}

/* Icons inside the toggle */
.mode-toggle-pill i {
    font-size: 1em; /* Adjust icon size */
    z-index: 2; /* Ensure icons are above the jelly */
    position: relative; /* Needed for z-index to work with flex */
    color: var(--toggle-icon-color-dark); /* Default color for icons */
    opacity: 0.5; /* Faded by default */
    transition: color 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.mode-toggle-pill i.active {
    opacity: 1; /* Active icon is fully visible */
    color: var(--dark-bg); /* Active icon color is the main background color */
}

/* ➡️ FIX 3: Active Moon icon in Dark Mode (You want DARK) */
#moon-icon.active {
    color: var(--dark-bg); /* This variable is Deep Dark Gray/Blue in dark mode */
}
/* --- STICKY SECONDARY BAR (#breadcrumb-nav) --- */
#breadcrumb-nav {
    background-color: var(--secondary-header-bg); 
    color: var(--faded-text);
    padding: 8px 60px; 
    font-size: 0.9em;
    width: 100%;
    z-index: 998;
    position: sticky;
    top: 0; 
    transition: background-color 0.3s, color 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.breadcrumb a {
    color: var(--accent-color);
    text-decoration: none;
}



body[data-theme="light"]  .mode-toggle-pill {
    background-color: var(--toggle-light-bg); /* Light mode toggle background */
    box-shadow: 0 4px 6px var(--toggle-shadow-light); /* Lighter shadow */
}
body[data-theme="light"]  .mode-toggle-pill::before {
    transform: translateX(20px); /* Move "jelly" to the right for light mode */
    background-color: var(--toggle-icon-color-light); /* Light mode jelly color (Faded White) */
}

body[data-theme="light"] .mode-toggle-pill i {
    color: var(--toggle-icon-color-dark); /* Faded icons for light mode (Faded Dark) */
}

/* ➡️ FIX 1: Active Sun Icon in Light Mode (You want WHITE) */
body[data-theme="light"]  #sun-icon.active {
    color: var(--toggle-icon-color-light); /* This variable is Faded White in light mode */
}

/* ➡️ FIX 2: Inactive Moon Icon in Light Mode (You want DARK, already handled by body.light-mode .mode-toggle-pill i) */
body[data-theme="light"]  #moon-icon {
    color: var(--toggle-icon-color-dark); /* This variable is Faded Dark in light mode */
}




/* --- LANGUAGE SELECTION MODAL STYLING --- */
.language-modal-overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); 
    z-index: 10000; 
}

.language-modal-content {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 350px; 
    background-color: var(--dark-bg);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.8);
    padding: 20px 0;
    color: var(--light-text);
    overflow-y: auto;
    transition: background-color 0.3s, color 0.3s;
}

.modal-header {
    padding: 0 30px 20px 30px;
    border-bottom: 1px solid var(--secondary-header-bg);
}

.modal-header h3 {
    margin: 0;
    font-weight: 600;
}

.modal-location-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.location-item {
    display: flex;
    align-items: center;
    padding: 15px 30px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.location-item.selected {
    background-color: var(--accent-color); 
    color: var(--light-text);
}

.location-item:hover:not(.selected) {
    background-color: var(--secondary-header-bg);
}

/* NEW: Flag circle inside modal list items */
.location-item .flag-circle {
    width: 30px; /* Slightly larger for the modal list */
    height: 30px;
    margin-right: 15px; /* Adjust spacing */
    vertical-align: middle;
    /* Reset border for specific modal items if desired */
    border: 1px solid rgba(255, 255, 255, 0.3);
}

body[data-theme="light"]  .location-item .flag-circle {
    border: 1px solid rgba(0, 0, 0, 0.3);
}


/* --- LIGHT MODE CUSTOMIZATION SECTION --- */

body[data-theme="light"]  #utility-bar {
    background-color: var(--dark-bg); 
}

body[data-theme="light"]  header,
body[data-theme="light"] #utility-bar,
body[data-theme="light"]  #main-header-bar {
    color: var(--light-text); 
}

body[data-theme="light"] .utility-link {
    color: var(--faded-text); 
}

body[data-theme="light"]  .utility-link:hover {
    color: var(--light-text); 
}

body[data-theme="light"] .main-nav a {
    color: var(--light-text); 
}

body[data-theme="light"] #search-button {
    color: var(--light-text);
}

body[data-theme="light"]  #sun-icon.active {
    color: var(--toggle-light-bg); /* Active sun icon is the toggle background color */
}

/* Special case: Moon icon in dark mode is active */
#moon-icon.active {
    color: var(--dark-bg); /* Active moon icon is dark for contrast */
}



/* ================= MOBILE RESPONSIVE ================= */
@media screen and (max-width: 768px) {

  /* --- Utility Bar --- */
  #utility-bar {
    padding: 2px 10px;
  }


  .utility-content-bar {
    flex-direction: row;  /* stay in one row */
    flex-wrap: nowrap;    /* prevent wrapping */
    justify-content: space-between; /* align items across the width */
    align-items: center;
    font-size: 0.7em;
    gap: 8px; /* spacing between items */
  }

  .utility-link {
    margin: 0; /* remove extra margins */
  }

  .language-selector {
    margin-left: 10px;
  }

.language-selector .dropdown {
  position: relative; /* or absolute if needed */
  z-index: 10004;     /* higher than #mobile-menu-toggle (10003) */
}
  /* --- Main Header Bar --- */
  .main-content-bar {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 20px; /* smaller padding */
  }

  .logo img {
    height: 60px; /* smaller logo */
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Hide regular nav on mobile, show hamburger */
  .main-nav {
    position: fixed;
    top: 0;
    right: -100%; /* hidden by default */
    height: 100%;
    width: 250px;
    background-color: var(--dark-bg);
    flex-direction: column;
    padding-top: 80px;
    transition: right 0.3s ease-in-out;
    z-index: 10002;
    overflow-y: auto;
  }

  .main-nav.active {
    right: 0; /* slide in */
  }

  .main-nav a {
    margin: 15px 20px;
    font-size: 1.1em;
    display: block;
  }
/* ---------------- Desktop & Larger: Hide mobile toggle ---------------- */
#mobile-menu-toggle {
  display: none !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  font-size: 1.5em;
  margin-left: 12px;
  background: transparent;
  border: none;
  color: var(--light-text);
  cursor: pointer;
  z-index: 10003;
}


/* ---------------- Mobile / Tablet: Show Toggle ---------------- */
@media (max-width: 992px) {
  #mobile-menu-toggle {
    display: block !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}


/* ---------------- Toggle Button Styling ---------------- */
.mode-toggle-pill {
  width: 40px;
  height: 25px;
}

.mode-toggle-pill::before {
  width: 20px;
  height: 20px;
}

.mode-toggle-pill i {
  font-size: 0.9em;
}


  /* --- Breadcrumb Nav --- */
  #breadcrumb-nav {
    padding: 8px 20px;
    font-size: 0.8em;
  }

  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
  }
}

/* ------------------------------------------- */
/* HERO CONTENT (Text and CTA) */
/* ------------------------------------------- */

.hero-content {
    position: relative;
    z-index: 5; /* Ensure content is above the background grid */
    max-width: 800px;
    padding: 20px;
}

.hero-headline {
    font-size: 3.5em;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    color: var(--light-text);
    transition: color 0.4s;
}

.hero-subtext {
    font-size: 1.25em;
    font-weight: 400;
    margin-bottom: 40px;
    color: var(--faded-text);
    transition: color 0.4s;
}

/* ------------------------------------------- */
/* HERO CONTENT (Text and CTA) - DARK MODE FIX */
/* ------------------------------------------- */

.hero-cta {
    display: inline-block;
    background-color: var(--hero-accent-color);
    color: #222222; 
    
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    
    /* Dark Mode Glow/Shadow */
    box-shadow: 0 0 20px var(--hero-glow-light-blue);
    border: 1px solid var(--hero-glow-light-blue);
    
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s, color 0.3s;
}

.hero-cta:hover {
    background-color: var(--hero-glow-dark-blue);
    transform: translateY(-2px);
    box-shadow: 0 0 35px var(--hero-glow-light-blue);
    border-color: var(--hero-glow-light-blue);
    /* Ensure hover text remains dark */
    color: #222222; 
}

/* ================================================= */
/* LIGHT MODE: HERO CTA Override (Text Color Flip) */
/* ================================================= */

body[data-theme="light"]  #hero-section .hero-cta {
    background-color: var(--accent-color) !important;
    
    /* FIX: Set text color to white for Light Mode */
    color: #ffffff !important; 
    
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    border: none !important;
}

body[data-theme="light"]  #hero-section .hero-cta:hover {
    background-color: #0053ad !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important; 
    /* Ensure hover text remains white/light */
    color: #ffffff !important; 
}



body[data-theme="light"]  #hero-section {
    background-color: var(--body-bg); /* Use light body background */
    color: var(--dark-text); /* Use dark text color */
}

body[data-theme="light"] .hero-headline,
body[data-theme="light"] .hero-subtext {
    color: var(--dark-text); /* Ensures text stays dark */
}
/* ================================================= */
/* DARK MODE: HERO CTA Hover Color Change */
/* ================================================= */
body[data-theme="dark"] #hero-section .hero-cta {
    background-color: var(--hero-hover-color-dark);
    color: #222222; /* Near-black text */
    box-shadow: 0 0 20px var(--hero-glow-light-blue);
    border: 1px solid var(--hero-glow-light-blue);
}

body[data-theme="dark"] #hero-section .hero-cta:hover {
    background-color: var(--hero-accent-color); /* New dark hover color */
    transform: translateY(-2px);
    box-shadow: 0 0 35px var(--hero-glow-light-blue);
    border-color: var(--hero-glow-light-blue);
    color: #222222; /* Keep text dark */
}
/* ================================================= */
/* HERO SECTION: NEON CONNECTIONS GRID */
/* ================================================= */

/* Ensure the background div is present in HTML: <div class="hero-grid-overlay"></div> */
.hero-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.7; /* Increased visibility */
    
    /* Neon Grid Lines: Using linear gradients */
    background-image: 
        linear-gradient(to right, var(--neon-line-color-dark) 1px, transparent 1px),
        linear-gradient(to bottom, var(--neon-line-color-dark) 1px, transparent 1px);
    background-size: 50px 50px; 
    
    /* Dark background for neon contrast (Dark Mode) */
    background-color: rgba(0, 0, 0, 0.2); 
    
    /* The Neon Glow Effect */
    box-shadow: inset 0 0 50px var(--neon-glow-primary), 
                0 0 20px var(--neon-glow-secondary);

    /* Animation for subtle movement */
    animation: moveGrid 30s linear infinite alternate;
    transition: background-color 0.4s, opacity 0.4s, box-shadow 0.4s;
}

@keyframes moveGrid {
    from { background-position: 0 0; }
    to { background-position: 100px 100px; }
}

body[data-theme="light"]  .hero-grid-overlay {
    opacity: 0.4;
    /* Uses the light-mode variables defined previously */
    background-image: 
        linear-gradient(to right, var(--neon-line-color-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--neon-line-color-dark) 1px, transparent 1px);
    background-color: rgba(255, 255, 255, 0.1); 
    
    /* Adjust the shadow/glow for light mode */
    box-shadow: inset 0 0 30px var(--neon-glow-primary), 
                0 0 10px var(--neon-glow-secondary);
}

#hero-section {
    position: relative;
    width: 100%;
    height: 700px;
    
    /* 1. ADD BACKGROUND IMAGE */
    background-image: url('images/hero-background.png'); 
    
    /* 2. BACKGROUND PROPERTIES */
    background-size: cover;       /* Ensure the image covers the entire section */
    background-position: center;  /* Center the image */
    background-repeat: no-repeat;
    
    /* 3. FALLBACK/COLOR OVERLAY */
    /* This radial gradient serves two purposes: 
       a) It provides the deep indigo color gradient as a fallback, 
       b) It acts as a DARK OVERLAY to ensure the white text and neon glow remain visible. */
    background-color: var(--hero-frame-dark); /* Fallback color */
    background-blend-mode: multiply, normal; /* Darkens the image */
    
    /* Ensure the existing radial gradient overlay is applied AFTER the image */
    background: 
 
        url('images/hero-background-white.png') center / cover no-repeat;

    display: flex;
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
    transition: background 0.4s;
    text-align: center;
}

/* ================================================= */
/* LIGHT MODE: Hero Headline Override */
/* ================================================= */

body[data-theme="light"] #hero-section .hero-headline {
    /* FORCE the color to be white, regardless of other rules */
    color: #ffffff !important; 
    
    /* Strong text shadow to ensure the white text is visible against the light background */
    text-shadow: 
        0 0 8px rgba(0, 0, 0, 0.6), /* Dark, strong shadow for contrast */
        0 0 15px var(--hero-glow-dark-blue); /* Subtle blue glow */
    transition: color 0.4s, text-shadow 0.4s;
}

/* ================================================= */
/* LIGHT MODE: Hero Section Background Change */
/* ================================================= */
body[data-theme="light"] #hero-section {
    /* Set the new light background image and properties */
    background-image: url('images/hero-background.png'); /* 1. NEW IMAGE FOR LIGHT MODE */
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* REMOVE the dark radial gradient overlay used in dark mode */
    /* The original background property must be overridden to remove the dark overlay */
    background: 
        url('images/hero-background.png') center / cover no-repeat;

    /* Override the background-color fallback to a light color */
    background-color: var(--body-bg); 
    
    /* Ensure blend mode is normal or unset (in this case, the shorthand above handles it) */
    background-blend-mode: normal; 
}

@media (max-width: 480px) {

  .hero-content {
    transform: translateX(-15px);
  }

}


@media (max-width: 480px) {

  #hero-section {
    background-position: 72% center !important;
  }

}

@media (max-width: 480px) {

  .hero-cta {
    margin-top: 12px !important;
  }

}

/* ================= MOBILE RESPONSIVE ================= */
@media screen and (max-width: 768px) {

  /* --- Hero Section --- */
  #hero-section {
    height: auto; /* auto height for mobile */
    padding: 60px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow-x: hidden; /* prevent horizontal scroll */
    background-size: cover;
    background-position: center;
  }


  .hero-content {
    max-width: 90%;
    padding: 15px;
  }

  .hero-headline {
    font-size: 2em;
    line-height: 1.3;
    margin-bottom: 15px;

  }

  .hero-subtext {
    font-size: 1em;
    margin-bottom: 25px;

  }

  .hero-cta {
    padding: 12px 25px;
    font-size: 1em;
    margin-bottom: 10px;

  }

  .hero-grid-overlay {
    background-size: 25px 25px; /* smaller grid for mobile */
  }

  /* Optional: adjust animation speed for mobile */
  @keyframes moveGrid {
      from { background-position: 0 0; }
      to { background-position: 50px 50px; }
  }

  /* Light mode adjustments on mobile */
  body[data-theme="light"] .hero-grid-overlay {
      opacity: 0.4;
      background-color: rgba(255, 255, 255, 0.1);
      box-shadow: inset 0 0 30px var(--neon-glow-primary), 
                  0 0 10px var(--neon-glow-secondary);
  }

}



/* Light Mode (default) */
#features-section {
    margin-top: -70px;  /* move section up */
    padding: 20px;      /* normal padding inside */
    background-color: #f9f9f9;
    text-align: center;
}


.section-header h2 {
    font-size: 3rem;
    margin-bottom: 10px;
    font-weight: 700;
    color: #000000;
}

.section-header p {
    font-size: 1.1rem;
    color: #4a4a4a;
    margin-bottom: 50px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
     background: linear-gradient(135deg, #987a22 0%, #caa427 100%);
    border-radius: 15px;
    padding: 30px 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s, color 0.3s;
    cursor: pointer;
    color: #ffffff;
}

.feature-card:hover {
    transform: scale(1.05) rotate(-1deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.card-icon {
    font-size: 2.5rem;
    color: #ffffff;
    margin-bottom: 20px;
}




/* Dark Mode */
body[data-theme="dark"] #features-section {
    background-color: #0d0d0d; /* dark background */
}

body[data-theme="dark"] .feature-card {
    background-color: #222; /* dark card background */
    color: #fff; /* text white */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

body[data-theme="dark"] .feature-card:hover {
    box-shadow: 0 15px 25px rgba(0,0,0,0.7);
}

body[data-theme="dark"] .card-icon {
    color: #fff; /* icons white */
}

body[data-theme="dark"] .section-header h2,
body[data-theme="dark"] .section-header p {
    color: #fff; /* header text white */
}


/* ===================== MOBILE VIEW (≤ 768px) ===================== */
@media screen and (max-width: 768px) {

  #features-section {
    margin-top: -20px; 
    padding: 40px 20px; 
    text-align: center;
  }

  /* Heading + Subtitle size adjustments */
  .section-header h2 {
    font-size: 1.8rem;
    margin-bottom: 6px;
  }

  .section-header p {
    font-size: 0.85rem;
    margin-bottom: 30px;
  }

  /* Convert grid to single stack */
  .features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 5px;
  }

  /* Card style optimized for thumb scroll */
  .feature-card {
    padding: 20px 16px;
    border-radius: 12px;
    transform: none !important;
  }

  .feature-card:hover {
    transform: none;
    box-shadow: 0 8px 22px rgba(0,0,0,0.2);
  }

  /* Smaller icon */
  .card-icon {
    font-size: 2rem;
    margin-bottom: 12px;
  }

  /* Title & paragraph scale down */
  .feature-card h3 {
    font-size: 1.1rem;
    margin-bottom: 6px;
  }

  .feature-card p {
    font-size: 0.8rem;
    line-height: 1.2rem;
  }

  /* Disable unintended horizontal scroll */
  body, html, #features-section {
    overflow-x: hidden;
  }
}




/* Section Height Adjusted */
#motion-path-section {
    position: relative; /* key change */
    width: 100%;
    height: 98vh; /* you can keep 100vh if you want full screen */
    overflow: hidden;
    text-align: center;
}


/* Full BG Video Wrapper */
.motion-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}


/* Fit Video Perfectly Within Section */
.motion-bg-video video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video fills area without stretching */
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* Optional overlay if needed */
.motion-bg-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2); /* can adjust/remove */
    z-index: 1;
}

/* Keep content above */
.motion-header,
.motion-path-container,
.motion-labels {
    position: relative;
    z-index: 5;
}


@media screen and (max-width: 768px) {

  #motion-path-section {
    width: 103vw;              /* reduced width */
    min-height: 72vh;
    margin: 0 auto;           /* center horizontally */
    padding: 20px 0;
    overflow: hidden;
    text-align: center;
  }

  .motion-bg-video {
    width: 108vw;              /* match section */
    height: 72vh;
    margin-right: 25px;
    border-radius: 0px;      /* optional: softer edges */
    overflow: hidden;
  }



  .motion-bg-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
  }

  /* Optional: center and improve spacing */
  .motion-header {
    margin-bottom: 15px;
  }

  .motion-labels,
  .motion-path-container {
    margin-top: 15px;
  }

  /* Font scaling */
  #motion-path-section h2 {
    font-size: 1.6rem;
  }

  #motion-path-section p {
    font-size: 0.95rem;
  }
}


#vision-flow {
    padding: 100px 5% 180px;
    text-align: center;
    background-color: rgb(0, 0, 0);
}

.flow-header h2 {
    color: #f9f9f9;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: -40px;
}

.flow-header p {
    color: #dcdcdc;
    font-size: 1.1rem;
    opacity: 0.75;
    margin-bottom: 80px;
}

.flow-container {
    width: 100%;
    max-width: 1800px;
    margin: auto;
    margin-top: 10px;
     overflow-x: hidden;
     box-sizing: border-box;
}

.flow-labels {
    position: relative;
    margin-top: -10px;
}

.flow-tag {
    position: absolute;
    transform: translateX(-50%);
    opacity: 0;
    font-size: 1.05rem;
    color: #ffffff;
    white-space: nowrap;
    margin-top: 18px;  /* 🔥 pushes labels directly under dots */
}



.flow-node {
    outline: none;
    stroke: none;
}
.flow-node:focus,
.flow-node:active {
    outline: none;
}

svg * {
    outline: none !important;
}
.flow-node {
    pointer-events: none;
}

/* LIGHT MODE: #vision-flow overrides */
body[data-theme="light"] #vision-flow {
    background-color: #f9f9f9; /* white background for light mode */
    color: #000000; /* black text for light mode */
}

body[data-theme="light"] #vision-flow .flow-header h2,
body[data-theme="light"] #vision-flow .flow-header p {
    color: #000000; /* ensure headings and paragraph text are black */
}

body[data-theme="light"] #vision-flow .flow-tag {
    color: #000000; /* labels/dots text color */
}

/* ================= MOBILE VIEW: VISION FLOW (Smaller Font Variant) ================= */
@media screen and (max-width: 768px) {

  #vision-flow {
    padding: 50px 8% 120px;
    text-align: center;
  }

  .flow-header h2 {
    font-size: 1.5rem; /* smaller title */
    margin-bottom: 4px;
  }

  .flow-header p {
    font-size: 0.8rem; /* smaller subtitle */
    margin-bottom: 35px;
    opacity: 0.75;
  }

  /* SVG Resize */
  #flow-svg {
    width: 100%;
    height: 160px;
  }

  #flow-path,
  #pulse-path {
    stroke-width: 3.5;
  }

  .flow-node {
    r: 8 !important;
  }

  /* LABELS with reduced size */
  .flow-labels {
    margin-top: 16px;
    position: relative;
  }

  .flow-tag {
    position: absolute;
    transform: translateX(-50%);
    width: 75px;
    font-size: 0.65rem;  /* reduced font size */
    white-space: normal;
    line-height: 1rem;
    text-align: center;
    opacity: 0.9;
  }

  /* Individual refined placement */
  .flow-tag:nth-child(1) { left: 12%; top: 0px; }
  .flow-tag:nth-child(2) { left: 32%; top: 8px; }
  .flow-tag:nth-child(3) { left: 50%; top: 18px; }
  .flow-tag:nth-child(4) { left: 70%; top: 8px; }
  .flow-tag:nth-child(5) { left: 90%; top: 0px; }

  /* Prevent scrolling */
  body, #vision-flow, .flow-container {
    overflow-x: hidden;
  }
}


.floating-title {
    position: absolute;
    top: -60px;       /* start above the card */
    left: 4%;
    transform: translateX(-50%);
    font-size: 1.7rem;
    font-weight: 700;
    pointer-events: none;
    color: #fff;
    transition: all 0.6s ease;
    white-space: nowrap;      /* prevent wrapping */
    overflow: hidden;         /* hide overflow if too long */
   
}

/* Initial position for first card title */
.cards-grid .card:nth-child(1) .floating-title {
    top: -22px;       /* start above the card */
    left: -5%;        /* move more left */
    transform: translateX(0);  /* no horizontal centering */
}

/* Hover animation for first card title */
.cards-grid .card:nth-child(1):hover .floating-title {
    top: 270px;        /* drop down inside the card */
    left: -5%;        /* keep it left on hover */
    transform: translateX(0);  /* maintain no centering */
}



/* Move title down into the card on hover */
.card:hover .floating-title {
    top: 270px;        /* moves down inside the card */
}


#interactive-cards {
    padding: 60px 5% 140px;
    text-align: center;
    background-color: #111;
    color: #fff;
}

.cards-header h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
   
}

.cards-header p {
    font-size: 1.2rem;
    opacity: 0.75;
    margin-bottom: 70px;
}

.cards-grid {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 1500px;
    margin: auto;
    perspective: 1500px;
}

.card {
    position: relative;
    width: 290px;
    height: 520px;
    background: #222;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.45s ease;
    box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}

/* Hover elevation */
.card:hover {
    transform: translateY(-12px);
}

/* Image */
.card-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease, opacity 0.6s ease;
    z-index: 2;
    pointer-events: none;
}

/* Overlay Image - dark background once hovered */
.card-overlay {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(40%);
    transition: filter 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

/* Content */
.card-content {
    position: absolute;
    inset: 30px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}


/*** Initial State (Before Hover) ***/
.card-content h3 {
    font-size: 1.6rem;
    font-weight: 700;
    opacity: 1;
    transform: translateY(45px);
    transition: all 0.6s ease;
}

.card-content p,
.card-content a {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.45s ease;
}

/*** Hover Reveal ***/
.card:hover .card-content h3 {
    transform: translateY(0);
}

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

/* Button */
.learn-btn {
    padding: 8px 18px;
    background-color: #0084ff;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
    margin-top: 10px;
    position: relative;
    z-index: 999;
    pointer-events: auto;
}



.learn-btn:hover {
    background-color: #00ceff;
}

/* Image slide effect */
.card:hover .card-image {
    transform: translate(50px, 60px);
    opacity: 0;
}

.card:hover .card-overlay {
    filter: brightness(60%);
}

/* ================================================= */
/* LIGHT MODE FOR INTERACTIVE CARDS */
/* ================================================= */
body[data-theme="light"] #interactive-cards {
    background-color: #fff;
    color: #111;
}


/* Light mode card content stays white */
body[data-theme="light"] #interactive-cards .card-content,
body[data-theme="light"] #interactive-cards .card-content p,
body[data-theme="light"] #interactive-cards .card-content a {
    color: #fff;
}


body[data-theme="light"] #interactive-cards .learn-btn {
    background-color: #0084ff;
    color: #fff;
}

body[data-theme="light"] #interactive-cards .learn-btn:hover {
    background-color: #0053ad;
}

body[data-theme="light"] #interactive-cards .card-overlay {
    filter: brightness(70%);
}

body[data-theme="light"] #interactive-cards .card-image {
    filter: brightness(100%);
}

/* ================= MOBILE RESPONSIVE ================= */
@media screen and (max-width: 768px) {

  /* --- Interactive Cards Header --- */
  #interactive-cards .cards-header h2 {
    font-size: 1.7rem; /* reduced font size */
    margin-bottom: 8px;
  }

  #interactive-cards .cards-header p {
    font-size: 0.80rem; /* reduced font size */
    margin-bottom: 25px;
  }

}
body, section {
    margin: 0;
    padding: 0;
}

.strengths-section {
    width: 100%;
    margin-top: 120px;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.strength-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 80px;
    flex-wrap: wrap;
}

.strength-block:nth-child(even) {
    flex-direction: row-reverse;
}

.strength-image {
    width: 45%;
    min-width: 300px;
    height: 350px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    transition: transform .5s ease;
}


.strength-content {
    width: 45%;
    min-width: 300px;
    padding: 30px;
    background: #f9f9f9;
    border-radius: 10px;
 transition: transform .5s ease, box-shadow .5s ease;
    position: relative;
}

.strength-content:hover {
    transform: scale(1.05);
    box-shadow: 0px 15px 50px rgba(0,0,0,0.25);
}

.strength-content span {
    font-size: 14px;
    color: #777;
    letter-spacing: 1px;
    font-weight: bold;
}

.strength-content h2 {
    margin: 10px 0;
    font-size: 28px;
    font-weight: 600;
}

.strength-content p {
    margin: 10px 0 20px;
    line-height: 1.6;
    color: #444;
}

.strength-footer {
    font-size: 14px;
    color: #0046c5;
    font-weight: bold;
    margin-top: 10px;
}

/* -------------------- 🌞 LIGHT MODE + 🌙 DARK MODE Shared Card Style -------------------- */

.strength-content {
    background: linear-gradient(135deg, #cfa93e 0%, #ad8a2c 30%, #dac248 60%, #b68b24 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0px 8px 30px rgba(0,0,0,0.15);
    transition: all .4s ease-in-out;
}

.strength-content h2,
.strength-content p,
.strength-content span,
.strength-footer {
    color: #161616;
}

.strength-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

/* LEARN MORE BUTTON (hidden by default) */
.learn-btn {
    padding: 8px 18px;
    background: #fff;
    color: #000;
    border: none;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;

    opacity: 0;
    transform: translateX(10px);
    transition: all .4s ease;
    pointer-events: none;
}

.strength-content:hover .learn-btn {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Button hover animation */
.learn-btn:hover {
    transform: scale(1.12);
    background: #000;
    color: #fff;
}
/* -------------------- 🌞 LIGHT MODE PAGE -------------------- */

body[data-theme="light"] .strengths-section {
    background-color: #fff;
}



/* -------------------- 🌙 DARK MODE PAGE -------------------- */

body[data-theme="dark"] .strengths-section {
    background: #0d0d0d;
}

body[data-theme="dark"] .strength-image {
    filter: brightness(80%);
}

body[data-theme="dark"] .strength-content:hover {
    border-color: rgba(255, 215, 0, 0.45);
    box-shadow: 0px 0px 25px rgba(255, 215, 0, 0.35);
}


@media (max-width: 768px) {

    .strengths-section {
        padding: 0;
        margin-top: 40px;
    }

    .strength-block {
        flex-direction: column !important;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 18px; /* reduced spacing so image and text look connected */
        width: 100%;
    }

    .strength-image {
        width: 92%;
        height: 230px;
        border-radius: 14px;
        margin: 0 auto;
    }

    .strength-content {
        width: 88%;
        margin: 0 auto;
        padding: 25px;
        text-align: center;
        border-radius: 14px;
    }

    .strength-content span,
    .strength-content h2,
    .strength-content p,
    .strength-footer {
        text-align: center;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}



/* Footer */
#footer {
    background-color: #f2f5f9;
    color: #1a1a1a;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.6;
     position: relative;

}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
     padding: 40px 20px 20px 20px;
     gap: 20px;
    justify-content: space-between;
}

.footer-column h4 {
    font-weight: 600;
    margin-bottom: 15px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-column ul li a:hover {
    color: #0084ff;
}

/* Brand logos */
.brands .brand-logos img {
    display: block;
    margin-bottom: 5px; /* smaller space between logos */
    max-width: 150px;
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid #d9d9d9;
    text-align: center;
    padding: 10px 0;
}

.footer-bottom p {
    margin-bottom: 10px;
}

/* Social icons */
.footer-bottom .social-icons a {
    display: inline-block;
    margin: 0 6px;
    color: #1a1a1a;
    font-size: 18px;
    transition: color 0.3s;
}

.footer-bottom .social-icons a:hover {
    color: #0084ff;
}

/* Light mode: adjust Riansa Edutech logo */
.brands .brand-logos img.logo2 {
    max-width: 182px;     /* slightly larger than default 155px */
    margin-left: -18px;   /* move slightly to the left */
    height: auto;
}
/* -------------------- 🌙 DARK MODE FOOTER -------------------- */
body[data-theme="dark"] {
    background-color: #0d0d0d !important; /* Dark mode background black */
}
body[data-theme="dark"] #footer {
    background-color: #070707; /* Dark background */
    color: #f2f2f2; /* White/light text */
    box-shadow: #333333;
}

body[data-theme="dark"] .footer-column ul li a {
    color: #f2f2f2; /* Footer links in white */
}

body[data-theme="dark"] .footer-column ul li a:hover {
    color: #FFD700; /* Gold hover */
}

body[data-theme="dark"] .footer-bottom {
    border-top: 1px solid #333; /* Darker border */
    color: #f2f2f2;
}

body[data-theme="dark"] .footer-bottom p {
    color: #f2f2f2;
}

body[data-theme="dark"] .footer-bottom .social-icons a {
    color: #f2f2f2; /* Social icons white */
}

body[data-theme="dark"] .footer-bottom .social-icons a:hover {
    color: #FFD700; /* Hover color for social icons */
}

/* Brand logos for dark mode: different images with reduced size */
body[data-theme="dark"] .brands .brand-logos img.logo1 {
    content: url('images/riansa-logo-white.png');
    max-width: 135px; /* reduced from 150px */
    height: auto;
}

body[data-theme="dark"] .brands .brand-logos img.logo3 {
    content: url('images/riansa-ventures-white.png');
    max-width: 140px;
    margin-left: -2px;
    margin-top: -5px;
    height: auto;
}

body[data-theme="dark"] .brands .brand-logos img.logo4 {
    content: url('images/riansa-technologies-white.png');
    max-width: 140px;
    margin-left: -2px;
    margin-top: -5px;
    height: auto;
}

body[data-theme="dark"] .brands .brand-logos img.logo2 {
    content: url('images/riansa-edutech-white.png');
    max-width: 165px;
    margin-left: -17px;
    height: auto;
    margin-top: -7px;
}

/* --------------------------------------  
   📱 FULL RESPONSIVE FOOTER (MOBILE ≤ 768px)  
-------------------------------------- */
@media (max-width: 768px) {

    #footer {
        padding: 0;
    }

    .footer-container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        padding: 25px 12px;
        flex-wrap: nowrap;
    }

    /* --- Column Width Control --- */
    .footer-column {
        flex: 1;
        min-width: 100px;
    }

    /* --- Text Size Adjustments --- */
    .footer-column ul li a {
        font-size: 11px;
        line-height: 1.4;
        white-space: nowrap;
    }

    .footer-column h4 {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 8px;
        white-space: nowrap;
    }

    /* --- Standardized Logo Sizing --- */
    .brands .brand-logos {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .brands .brand-logos img {
        width: 115px;   /* Same width frame */
        height: 45px;   /* Same height area */
        object-fit: contain;
        object-position: left;
        display: block;
    }

    .brands .brand-logos img.logo2 {
    width: 125px;  /* adjust here */
    height: 45px;  /* adjust height if needed */
    object-fit: contain;
    margin-left: -13px;
}

@media (max-width: 768px) {

  .footer-column:nth-child(2) {
    margin-left: 10px;
  }

  .footer-column:nth-child(3) {
    margin-left: -50px !important;
  }

}




    /* --- Dark Mode Consistency --- */
    body[data-theme="dark"] .brands .brand-logos img.logo1 {
         width: 115px;   /* Same width frame */
        height: 45px;   /* Same height area */
        object-fit: contain;
        object-position: left;
        display: block;
    }

    body[data-theme="dark"] .brands .brand-logos img.logo2 {
     width: 125px;  /* adjust here */
    height: 48px;  /* adjust height if needed */
    object-fit: contain;
    margin-left: -13px;
}


    /* --- Footer Bottom Section --- */
    .footer-bottom {
        text-align: center;
        padding: 14px 10px;
        border-top: 1px solid #ccc;
    }

    .footer-bottom p {
        font-size: 11px;
        margin-bottom: 10px;
        white-space: nowrap;
    }

    .footer-bottom .social-icons a {
        font-size: 16px;
        margin: 0 6px;
    }
}