/* =====================================================
   ORIGINAL FILE - UPDATED FOR CLIENT BRAND
   - All backgrounds -> white / subtle white alternative
   - All text -> black / muted black
   - All yellow/gold replaced with brand blue sampled from logo (#74A9D0)
   - No other structural or animation changes were made
   ===================================================== */

:root {
  --bg: #FFFFFF; /* white per client request */
  --bg-alt: #F7F9FB; /* subtle alternate white tone for depth */
  --text: #000000; /* black text */
  --text-muted: #374151; /* muted dark gray for secondary text */
  --brand-blue: #74A9D0; /* sampled from hunter logo-02.jpg */
  --brand-blue-dim: #5f94b8;
  --panel: rgba(0,0,0,0.04);
  --glass: rgba(0,0,0,0.03);
  --gradient-hero: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.88) 100%);
  --shadow-soft: 0 10px 40px rgba(2,6,23,0.06);
  --shadow-hover: 0 20px 60px rgba(2,6,23,0.08);
  --border-blue: 1px solid rgba(116,169,208,0.18);
}

/* GLOBAL RESET & SMOOTH SCROLL */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { 
  scroll-behavior: smooth; 
  scroll-snap-type: y proximity; /* Softer snapping for better content visibility */
}
body {
  font-family: "Inter", -apple-system, sans-serif; /* Modern system font fallback */
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
}

/* ENHANCED NAVBAR - Glassy, Subtle Glow */
.lux-nav {
  position: fixed; top: 0; width: 100%; z-index: 999;
  background: var(--bg);
  backdrop-filter: blur(20px) saturate(180%);
  /* border-bottom: var(--border-blue); */
  padding: 1rem 0;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.lux-nav.scrolled { 
  padding: 0.5rem 0; 
  box-shadow: var(--shadow-soft);
}
.navbar .nav-link { 
  color: var(--text) !important; 
  opacity: 0.95; 
  font-weight: 500;
  transition: color 0.3s ease, transform 0.2s ease;
  position: relative;
}
.navbar .nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--brand-blue); transition: width 0.3s ease;
}
.navbar .nav-link:hover { 
  color: var(--brand-blue) !important; 
  transform: translateY(-1px);
}
.navbar .nav-link:hover::after { width: 100%; }

/* PRELOADER - Enhanced Timeline */
#preloader {
  position: fixed; inset:0; background: var(--bg);
  display:flex; justify-content:center; align-items:center; flex-direction:column;
  z-index:9999; transition: opacity 0.5s ease;
}
.preloader-logo { 
  height: 120px; margin-bottom: 24px; width: 100%;
  /* filter: drop-shadow(0 0 20px var(--brand-blue-dim)); */
  transition: transform 0.6s ease;
}
.preloader-line {
  width: 280px; height: 3px; background: linear-gradient(90deg, transparent, var(--brand-blue), transparent);
  border-radius: 2px; margin-bottom: 16px;
}
.preloader-text { 
  color: var(--text-muted); 
  font-size: 1.1rem; 
  letter-spacing: 1px; 
  font-weight: 300;
}

/* HERO VIDEO - Parallax Depth, Vignette Glow */
.cine-hero {
  position: relative;
  height: 100vh; /* Full viewport for impact */
  display:flex; justify-content:center; align-items:center;
  overflow:hidden;
  scroll-snap-align: start;
  padding-top:80px;
}

/* UPDATED: responsive video sits behind content */
.cine-video {
  position:absolute; inset:0;
  width:100%; height:100%; /* ensure it fills container */
  object-fit:cover;
  object-position:center;
  filter: brightness(0.98) contrast(1.02) saturate(1.02);
  transition: transform 0.1s linear; /* For mouse parallax if added */
  z-index: 0; /* behind vignette and content */
}

/* vignette overlay (keeps existing class but ensure stacking) */
.cine-vignette {
  position:absolute; inset:0;
  background: var(--gradient-hero);
  mix-blend-mode: multiply;
  z-index: 1; /* above video */
}

/* HERO CONTENT - Staggered PowerPoint Reveal */
.cine-inner { 
  position: relative; 
  text-align: center; 
  z-index: 5; /* above vignette and video */
  max-width: 1000px; 
  padding: 80px 2rem 0; /* added top padding to move down */
  color: var(--text);
}

.cine-headline {
  font-family:"Playfair Display", serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  margin-bottom: 1.5rem;
  color: var(--text);
  line-height: 1.1;
}
.branding-eyebrow {
  color: var(--brand-blue); 
  font-weight:600; 
  letter-spacing:3px;
  text-transform:uppercase; 
  font-size:1rem;
  margin-bottom: 1rem;
}
.cine-lead { 
  color: var(--text-muted); 
  font-size:1.25rem; 
  max-width: 600px;
  margin: 0 auto 2rem;
}

/* CTA Buttons - Modern Glow Hover */
.btn-cta-primary, .btn-cta-hero {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dim));
  color:#ffffff; 
  border-radius: 50px;
  padding:14px 40px; 
  font-weight:600; 
  margin-right:12px;
  box-shadow: var(--shadow-soft);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: none;
}
.btn-cta-primary:hover, .btn-cta-hero:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 50px rgba(116,169,208,0.18);
}
.btn-cta-outline {
  border:2px solid var(--brand-blue); 
  border-radius:50px;
  padding:14px 40px; 
  color:var(--brand-blue);
  background: transparent;
  transition: all 0.4s ease;
}
.btn-cta-outline:hover {
  background: var(--brand-blue);
  color: #fff;
  transform: translateY(-3px);
}

/* SCROLL HINT - Subtle Mouse Wheel */
.scroll-to-services {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  color: var(--brand-blue); font-size: 1.5rem; animation: bounce 2s infinite;
  z-index: 5;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}

/* ENHANCED STATS - Glow on Hover */
.stat {
  background: var(--panel);
  padding:16px 24px;
  border-radius:16px;
  text-align:center;
  box-shadow: var(--shadow-soft);
  border: var(--border-blue);
  transition: all 0.4s ease;
}
.stat:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: var(--shadow-hover);
}
.stat-num { 
  font-weight:700; 
  color: var(--brand-blue); 
  font-size:1.5rem; 
}
.stat-label { 
  color: var(--text-muted); 
  font-size:0.85rem; 
}

/* SECTION SPACING - Alternating BGs for Depth */
.lux-section, .scene, .methodology-section, .why-image-wrap, .services-grid {
  padding:120px 0; 
  position: relative;
  scroll-snap-align: start;
}
.lux-section:nth-child(even), .scene:nth-child(even) {
  background: #ffffff;
}
.services-hero, .why-hero {
  padding: 140px 0 80px;
  background: var(--gradient-hero), var(--bg);
  text-align: center;
  min-height: 80vh; /* Ensure heroes snap properly */
}

/* ENHANCED CARDS & PANELS - Glassmorphism + Hover Lift */
.scene-card, .pro-card, .mini-card, .lux-card, .method-card, .service-card {
  background: var(--glass);
  backdrop-filter: blur(6px);
  border-radius:20px;
  padding:32px;
  box-shadow: var(--shadow-soft);
  border: var(--border-blue);
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}
.scene-card::before, .pro-card::before, .method-card::before, .service-card::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); transition: left 0.6s;
}
.scene-card:hover::before, .method-card:hover::before { left: 100%; } /* Shine effect */
.scene-card:hover, .pro-card:hover, .mini-card:hover, .lux-card:hover, .method-card:hover, .service-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: var(--shadow-hover);
}

/* SERVICE CARDS GRID - Modern Flex */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.service-card .icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--brand-blue);
  transition: transform 0.3s ease;
}
.service-card:hover .icon { transform: scale(1.1) rotate(5deg); }
.service-card h3 {
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: 1.3rem;
  color: #000000;
}
.service-card p {
  color: #000000;
  font-size: 1rem;
  line-height: 1.7;
}

/* METHODOLOGY GRID - Staggered */
.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto 4rem;
}
.method-card i {
  font-size: 2.8rem;
  margin-bottom: 1.5rem;
  color: var(--brand-blue);
  display: block;
}
.method-card h5 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

/* CASE STUDY ENHANCEMENTS */
.case-block {
  margin-bottom: 6rem;
}
.case-photo {
  width:100%; 
  height:550px;
  object-fit:cover;
  border-radius:20px;
  box-shadow: var(--shadow-hover);
  transition: transform 0.6s ease;
  filter: saturate(0.98) contrast(1.02) brightness(0.995);
}
.case-photo:hover { transform: scale(1.05); }
.case-block h3 {
  font-size: 2rem;
  margin: 2rem 0 1rem;
  color: var(--brand-blue);
}
.styled-list {
  list-style: none;
  padding-left: 0;
}
.styled-list li {
  padding: 0.5rem 0;
  position: relative;
  padding-left: 2rem;
}
.styled-list li::before {
  content: '→'; color: var(--brand-blue); position: absolute; left: 0;
}

/* TEAM CARDS */
.lux-card img {
  transition: transform 0.4s ease;
}
.lux-card:hover img { transform: scale(1.1); }

/* IMAGE WRAPS - Parallax Ready */
.why-image, .case-photo {
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.why-image:hover {
  transform: scale(1.05);
  /* box-shadow: var(--shadow-hover); */
}

/* CTA SECTION - Split Layout Polish */
.lux-section .row.align-items-center {
  max-width: 1000px;
  margin: 0 auto;
}
.lux-card {
  background: var(--glass);
  border: var(--border-blue);
}
.form-control {
  background: var(--panel);
  border: 1px solid rgba(0,0,0,0.06);
  color: var(--text);
  border-radius: 12px;
  transition: border-color 0.3s ease;
}
.form-control:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 0.2rem rgba(116,169,208,0.12);
}
.btn-primary {
  background: #0166ff;
  border: none;
  border-radius: 12px;
  transition: all 0.3s ease;
  color: #fff;
}
.btn-primary:hover { transform: translateY(-2px); }

/* FOOTER - Modern Subtle */
.lux-footer {
  padding:60px 0 40px;
  text-align:center;
  color:var(--text-muted);
  border-top: var(--border-blue);
  background: var(--bg-alt);
}
.social-icons a {
  color: var(--text-muted);
  font-size: 1.2rem;
  margin: 0 1rem;
  transition: color 0.3s ease;
}
.social-icons a:hover { color: var(--brand-blue); }

/* ANIM KEYFRAMES */
.fade-in-up {
  /* Removed initial opacity/transform - handled in JS for fallback visibility */
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-in-up.animate { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }
.delay-4 { transition-delay: 0.8s; }
.delay-5 { transition-delay: 1s; }
.delay-6 { transition-delay: 1.2s; }
.delay-7 { transition-delay: 1.4s; }
.delay-8 { transition-delay: 1.6s; }

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

/* FORCE TEXT COLORS - updated to black & muted */
body, h1, h2, h3, h4, h5, h6, p, span, strong, em, a, li, label, input, button,
.card *, .service-card *, .method-card *, .why-image-wrap *, .services-hero *, .why-hero *, .lux-footer *,
.nav-link, .text-muted {
  color: #000000 !important;
  opacity: 1 !important;
}
:root { --text: #000000 !important; --muted: #000000 !important; }

/* OUR JOURNEY IMAGE - Enhanced Card */
.lux-section img.why-image {
  /* background: rgba(0,0,0,0.02); */
  padding: 30px;
  border-radius: 20px;
  display: block;
  margin: 0 auto;
  /* box-shadow: var(--shadow-hover) !important; */
}

/* WHY IMAGE WRAP - Ensure Centering */
.why-image-wrap {
  text-align: center;
}
.why-image {
  margin: 0 auto !important;
}

/* Ensure images visible if not animated */
img.fade-in-up:not(.animate) {
  opacity: 1 !important;
}

/* MOBILE OPTIMIZATION (core) */
@media (max-width: 768px) {
  .lux-section, .scene, .methodology-section { padding: 80px 0; }
  .cine-headline { font-size: 2.5rem; }
  .services-grid, .method-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .case-photo { height: 250px; }

  /* VIDEO: use contain on mobile to avoid cropping important content */
  .cine-video {
    object-fit: contain;
    background-color: #f3f6f8; /* prevents white borders/gaps */
  }

  /* keep hero content readable and slightly elevated on small screens */
  .cine-inner {
      padding: 40px 1rem 0; /* move slightly down on mobile */
      top: auto;
      transform: none;
    }
}

/* === IMAGES: ALWAYS VISIBLE === */
img,
.case-photo,
.why-image,
.rounded-circle {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Remove fade-in-up from images */
img.fade-in-up {
  opacity: 1 !important;
  transform: none !important;
}

/* Card animation speed (JS handles, CSS just ensures fallback) */
.fade-in-up {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
/* === OUR JOURNEY IMAGE – WHITE BACKGROUND + NO ZOOM === */
.journey-image-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 2rem auto;
  padding: 30px;
  background: #FFFFFF; /* White background */
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(2,6,23,0.06);
  text-align: center;
  overflow: hidden;
}

.journey-image {
  width: 100% !important;
  height: auto !important;
  max-height: 650px;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
  border-radius: 16px;
  background: #FFFFFF;
  padding: 0;
  opacity: 1 !important;
}

/* Prevent other .why-image from breaking */
.why-image:not(.journey-image) {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  /* background: transparent; */
}
/* === POWERPOINT CARD REVEAL === */
.card-item {
  opacity: 0;
}

/* === OUR JOURNEY – WHITE CARD (duplicate block intentionally preserved) === */
.journey-image-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 2rem auto;
  padding: 40px;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(2,6,23,0.06);
  text-align: center;
  overflow: hidden;
}

.journey-image {
  width: 100% !important;
  height: auto !important;
  max-height: 650px;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
  border-radius: 16px;
  background: #FFFFFF;
  opacity: 1 !important;
}

/* === IMAGES NEVER DISAPPEAR === */
img, .case-photo, .why-image, .rounded-circle {
  opacity: 1 !important;
}
img.fade-in-up {
  opacity: 1 !important;
  transform: none !important;
}
/* Horizontal Scrolling Cards Layout */
.services-main {
    padding: 60px 0;
    background: var(--bg);
}

.service-category {
    margin-bottom: 80px;
    padding: 40px 0;
}

.category-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 0 20px;
}

.category-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dim));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 8px 25px rgba(116,169,208,0.08);
}

.category-icon i {
    font-size: 2.5rem;
    color: #000;
}

.category-header h2 {
    font-family: "Playfair Display", serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand-blue);
    margin-bottom: 15px;
}

.category-description {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Cards Scroller */
.cards-scroller {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 40px;
}

.cards-container {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    padding: 20px 10px;
    scroll-padding: 0 20px;
}

.cards-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: #0076ff;
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(2,6,23,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-btn:hover {
    background: var(--brand-blue-dim);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(2,6,23,0.08);
}

.scroll-left {
    left: 0;
}

.scroll-right {
    right: 0;
}

.scroll-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Service Cards */
.service-card {
    flex: 0 0 320px;
    background: var(--glass);
    backdrop-filter: blur(6px);
    border-radius: 20px;
    padding: 30px;
    border: var(--border-blue);
    box-shadow: var(--shadow-soft);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    transition: left 0.6s;
}

.service-card:hover::before {
    left: 100%;
}

.service-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-hover);
}

.card-icon {
    width: 60px;
    height: 60px;
    background: rgba(116,169,208,0.08);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 2px solid rgba(116,169,208,0.08);
}

.card-icon i {
    font-size: 1.5rem;
    color: var(--brand-blue);
}

.service-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #000000 !important;
    margin-bottom: 15px;
    line-height: 1.3;
}

.service-card p {
    color: #000000 !important;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1;
}

.card-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-features li {
    padding: 5px 0;
    color: #000000 !important;
    position: relative;
    padding-left: 15px;
    font-size: 0.9rem;
}

.card-features li:before {
    content: "•";
    color: var(--brand-blue);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Quote Section Styling */
.quote-section {
    padding: 60px 0;
    background: var(--bg-alt);
    margin-top: 40px;
    border-radius: 20px;
}

.quote-card {
    background: var(--panel);
    backdrop-filter: blur(6px);
    border-radius: 20px;
    padding: 50px 40px;
    border: var(--border-blue);
    box-shadow: var(--shadow-soft);
    text-align: center;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.quote-icon {
    width: 60px;
    height: 60px;
    background: var(--brand-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    box-shadow: 0 8px 25px rgba(116,169,208,0.08);
}

.quote-icon i {
    font-size: 1.5rem;
    color: #fff;
}

.quote-text {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--brand-blue) !important;
    line-height: 1.6;
    margin-bottom: 20px;
    font-style: italic;
}

.quote-author {
    font-size: 1.1rem;
    color: var(--text-muted) !important;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .services-main {
        padding: 40px 0;
    }
    
    .service-category {
        margin-bottom: 60px;
        padding: 30px 0;
    }
    
    .category-header {
        margin-bottom: 30px;
    }
    
    .category-icon {
        width: 60px;
        height: 60px;
    }
    
    .category-icon i {
        font-size: 2rem;
    }
    
    .category-header h2 {
        font-size: 2rem;
    }
    
    .category-description {
        font-size: 1.1rem;
        padding: 0 15px;
    }
    
    .cards-scroller {
        padding: 0 20px;
    }
    
    .scroll-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .service-card {
        flex: 0 0 280px;
        padding: 25px;
        min-height: 260px;
    }
    
    .card-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 15px;
    }
    
    .card-icon i {
        font-size: 1.3rem;
    }
    
    .service-card h3 {
        font-size: 1.2rem;
    }

    /* Responsive adjustments for quote section */
    .quote-section {
        padding: 40px 0;
    }
    
    .quote-card {
        padding: 30px 25px;
    }
    
    .quote-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 20px;
    }
    
    .quote-icon i {
        font-size: 1.3rem;
    }
    
    .quote-text {
        font-size: 1.2rem;
    }
    
    .quote-author {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .cards-scroller {
        padding: 0 10px;
    }
    
    .service-card {
        flex: 0 0 260px;
        padding: 20px;
        min-height: 240px;
    }
    
    .scroll-btn {
        width: 35px;
        height: 35px;
    }
}

/* Ensure all service categories have consistent spacing */
.service-category:last-of-type {
    margin-bottom: 0;
}
/* FIX FOR CONTENT LAG - Immediate visibility */
.lux-section,
.services-main, 
.methodology-section,
.why-hero,
.method-card,
.service-card, 
.lux-card,
.why-image,
.case-photo {
  visibility: visible !important;
}

/* Ensure images are always immediately visible */
img:not([data-lazy]),
.why-image,
.case-photo,
.rounded-circle {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Prevent FOUC (Flash of Unstyled Content) */
.fade-in-up {
  will-change: transform, opacity;
}

/* Critical above-fold content */
.services-hero .fade-in-up,
.why-hero .fade-in-up,
.methodology-section .fade-in-up:nth-child(-n+3) {
  opacity: 1 !important;
  visibility: visible !important;
}
.case2-photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 20px; /* adjust the curve */
}
/* Make only the mobile menu icon black */
@media (max-width: 991px) {
  .navbar-toggler {
    border-color: #000; /* black border for the toggle button */
  }

  .navbar-toggler-icon {
    filter: invert(0); /* ensure it stays black */
  }
}
/* Force the hamburger (menu) icon to be black */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* === Darker Glassy Card Effect === */
.card {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  transition: all 0.4s ease;
}

/* Hover effect */
.card:hover {
  transform: translateY(-6px);
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

/* Optional: glow with your brand blue */
.card:hover {
  border-color: var(--brand-blue);
  box-shadow: 0 15px 35px rgba(0, 60, 130, 0.5);
}
.case2-photo {
  width: 70%;         /* make it smaller — try 70% or 60% */
  height: auto;       /* keep aspect ratio */
  display: block;
  margin: 0 auto;     /* center it horizontally */
  border-radius: 20px; /* optional: rounded corners */
  object-fit: cover;   /* keeps proportions nicely */
}
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 40px;
  padding: 40px;
  justify-items: center;
  align-items: center;
}

.logo-grid img {
  max-width: 120px;
  height: auto;
  object-fit: contain;
}
/* Container */
.timeline-section {
  width: 100%;
  padding: 80px 20px;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Row layout */
.timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 10px;
}

/* Blue horizontal bar */
.timeline-line {
  position: absolute;
  top: 110px;
  left: 2%;
  width: 96%;
  height: 20px;
  background: linear-gradient(90deg,#0076ff,#0088ff);
  border-radius: 12px;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0,118,255,0.12);
}

/* Each timeline column */
.timeline-item {
  text-align: center;
  width: 18%; /* five items across */
  min-width: 160px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Top icon */
.timeline-item .icon {
  margin-bottom: 8px;
}

/* Year circle style */
.timeline-item .circle {
  width: 110px;
  height: 110px;
  background: #fff;
  border: 12px solid #0076ff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  color: #0076ff;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
}

/* Vertical connector and dot */
.timeline-item .line-down {
  width: 4px;
  height: 86px;
  background: #8b8b8b;
  margin: 10px auto 0;
  border-radius: 2px;
  position: relative;
}

.timeline-item .line-down::after {
  content: "";
  width: 16px;
  height: 16px;
  background: #8b8b8b;
  border-radius: 50%;
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Descriptions */
.timeline-item .desc {
  margin-top: 6px;
  text-align: left;
  max-width: 220px;
  font-size: 14px;
  color: #222;
}

.timeline-item .desc h4 {
  margin: 8px 0 6px;
  font-size: 16px;
  color: #004e9a;
}

.timeline-item .desc p {
  margin: 6px 0;
  line-height: 1.4;
  color: #333;
}

/* Responsive: stack to two rows on narrow screens */
@media (max-width: 900px) {
  .timeline {
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .timeline-item {
    width: 45%;
    margin-bottom: 40px;
  }
  .timeline-line { top: 180px; }
}

/* Mobile: single column */
@media (max-width: 520px) {
  .timeline-item { width: 100%; }
  .timeline-line { display: none; } /* optional: hide bar on narrow mobile for clarity */
  .timeline-item { padding-top: 6px; }
  .timeline-item .circle { width: 88px; height: 88px; font-size: 20px; }
}
.timeline-item {
  opacity: 0;
  transform: translateY(50px);
}
.custom-bullets {
  list-style: none;
  padding-left: 0;
}

.custom-bullets li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}

.custom-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  background: #000000;
  border-radius: 5px 5px 10px 10px; /* matches your shape */
}
.card-icon {
    width: 60px;
    height: 60px;
    background: #0076ff; /* blue color like your shape */
    border-radius: 18px 18px 28px 28px; /* same top/bottom curve as your image */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.category-icon {
    width: 80px;
    height: 80px;
    background: #0076ff;
    border-radius: 25px 25px 40px 40px; /* TOP / TOP / BOTTOM / BOTTOM */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 8px 25px rgba(116,169,208,0.15);
}
/* ENHANCED NAVBAR - Glassy, Subtle Glow */
.lux-nav {
  position: fixed; 
  top: 0; 
  width: 100%; 
  z-index: 999;
  background: var(--bg);
  backdrop-filter: blur(20px) saturate(180%);
  padding: 1rem 0;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lux-nav.scrolled { 
  padding: 0.5rem 0; 
  box-shadow: var(--shadow-soft);
}

/* Regular navbar links */
.navbar-nav .nav-link { 
  color: var(--text) !important; 
  opacity: 0.95; 
  font-weight: 500;
  transition: color 0.3s ease, transform 0.2s ease;
  position: relative;
  margin: 0 0.5rem;
}

.navbar-nav .nav-link::after {
  content: ''; 
  position: absolute; 
  bottom: -4px; 
  left: 0; 
  width: 0; 
  height: 2px; 
  background: var(--brand-blue); 
  transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover { 
  color: var(--brand-blue) !important; 
  transform: translateY(-1px);
}

.navbar-nav .nav-link:hover::after { 
  width: 100%; 
}

/* Phone number styling */
.navbar-nav .nav-link.text-gold {
  color: var(--brand-blue) !important;
  font-weight: 600;
}

/* Mobile menu styles */
@media (max-width: 991px) {
  .navbar-collapse {
    background: var(--bg);
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
  }
  
  .navbar-nav .nav-item {
    margin: 0.5rem 0;
  }
  
  .navbar-nav .nav-link {
    padding: 0.5rem 1rem;
    border-radius: 5px;
    transition: all 0.3s ease;
  }
  
  .navbar-nav .nav-link:hover {
    background: rgba(116, 169, 208, 0.1);
  }
}

/* Force black hamburger menu icon */
.navbar-toggler {
  border: 1px solid #000;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.dropdown-toggle::after {
display: none !important;
}
/* Dropdown Menu Styling */
.navbar .dropdown-menu {
    padding: 12px 0;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: #ffffff; /* keep same theme tone */
    backdrop-filter: blur(12px);
    animation: dropdownFade 0.25s ease forwards;
}

/* Dropdown Items */
.navbar .dropdown-item {
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 6px;
}

/* Hover Effect (no color change, just glow/shadow) */
.navbar .dropdown-item:hover {
    background: #ffffff;
    transform: translateX(4px);
}

/* Smooth fade/slide animation */
@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown caret rotation */
.navbar .dropdown-toggle::after {
    transition: 0.25s;
}

.navbar .dropdown.show .dropdown-toggle::after {
    transform: rotate(180deg);
}
/* ===== REMOVE TRANSITIONS FOR HERO HEADLINE ===== */
.cine-headline,
.headline-word,
.headline-word .dot,
.hero-initial-state .headline-word,
.hero-initial-state .headline-word .dot {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Ensure words appear immediately without delays */
.headline-word:nth-child(1),
.headline-word:nth-child(2), 
.headline-word:nth-child(3) {
  transition-delay: 0s !important;
  animation-delay: 0s !important;
}

/* Remove any staggered animation effects */
.cine-headline .headline-word {
  opacity: 1 !important;
  transform: translateY(0) rotateX(0) !important;
}

.cine-headline .headline-word .dot {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Override any JavaScript-controlled animations */
.hero-initial-state .cine-headline * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.lux-nav {
  background: #03045E !important; /* Dark blue background at top */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding: 0 !important; /* Remove padding for maximum logo space */
  box-shadow: 0 2px 20px rgba(3, 4, 94, 0.2);
  min-height: 130px !important; /* Increased height for ZOOMED logos */
}

/* Scrolled State */
.lux-nav.scrolled {
  background: #ffffff !important; /* White background when scrolled */
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1);
  padding: 0 !important; /* Consistent padding */
  min-height: 120px !important; /* Slightly smaller when scrolled */
}

/* Logo Styles - ZOOMED SIZE */
.navbar-brand {
  display: flex !important;
  align-items: center !important;
  height: 130px !important; /* ZOOMED height for navbar brand */
  margin-left: 40px !important; /* Force left positioning */
  padding: 0 !important;
  transform: scale(1.2); /* Additional zoom effect */
}

.nav-logo {
  height: 150px !important; /* ZOOMED logo size */
  width: auto !important;
  min-width: 250px !important; /* Minimum width to ensure ZOOMED size */
  max-width: 350px !important; /* Maximum width for very large screens */
  transition: all 0.4s ease;
  object-fit: contain;
  transform: scale(1.1); /* Additional zoom */
}

/* Ensure proper logo display with !important */
.default-logo {
  display: block !important;
}

.scrolled-logo {
  display: none !important;
}

.lux-nav.scrolled .default-logo {
  display: none !important;
}

.lux-nav.scrolled .scrolled-logo {
  display: block !important;
}

/* Container fluid for more left space */
.container-fluid {
  padding-left: 0 !important; /* Remove left padding */
  padding-right: 30px; /* Keep some right padding */
}

/* Navbar Links - Top of page (dark background) */
.lux-nav .nav-link {
  color: #ffffff !important;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  font-size: 1.2rem !important; /* Larger font for zoomed navbar */
  padding: 20px 25px !important; /* Increased padding for ZOOMED navbar */
  margin: 0 5px !important;
}

.lux-nav .nav-link:hover {
  color: #0166FF !important;
  transform: translateY(-2px) scale(1.05); /* Enhanced hover effect */
}

/* Navbar Links - Scrolled state (light background) */
.lux-nav.scrolled .nav-link {
  color: #000000 !important;
}

.lux-nav.scrolled .nav-link:hover {
  color: #0166FF !important;
  transform: translateY(-2px) scale(1.05); /* Consistent hover effect */
}

/* Phone number styling */
.lux-nav .nav-phone-icon {
  color: #ffffff !important;
  transition: color 0.3s ease;
  font-size: 1.3rem !important; /* Larger phone icon */
}

.lux-nav.scrolled .nav-phone-icon {
  color: #0166FF !important;
}

/* Mobile Toggler - Larger for zoomed navbar */
.navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 12px 15px !important; /* Larger padding */
  margin-right: 30px !important; /* More margin */
  transform: scale(1.2); /* Zoom the toggler */
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  width: 2em !important; /* Larger toggler icon */
  height: 2em !important;
}

.lux-nav.scrolled .navbar-toggler {
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.lux-nav.scrolled .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Enhanced Dropdown Styles - Larger for zoomed navbar */
.navbar .dropdown-menu {
    padding: 15px 0 !important; /* Larger padding */
    border-radius: 15px !important; /* Larger radius */
    border: 2px solid rgba(255,255,255,0.1) !important; /* Thicker border */
    background: #ffffff;
    backdrop-filter: blur(12px);
    animation: dropdownFade 0.25s ease forwards;
    box-shadow: 0 15px 40px rgba(2,6,23,0.15) !important; /* Larger shadow */
    min-width: 250px !important; /* Wider dropdown */
    transform: scale(1.05); /* Slight zoom */
}

.navbar .dropdown-item {
    padding: 12px 25px 12px 50px !important; /* Larger padding */
    font-weight: 600 !important; /* Bolder font */
    transition: all 0.3s ease;
    border-radius: 8px !important; /* Larger radius */
    margin: 3px 10px !important; /* More margin */
    color: #000000 !important;
    position: relative;
    overflow: hidden;
    font-size: 1.1rem !important; /* Larger font */
}

/* Custom bullet points for dropdown items - LARGER SIZE */
.navbar .dropdown-item::before {
    content: "";
    position: absolute;
    left: 25px !important; /* More left space */
    top: 50%;
    transform: translateY(-50%);
    width: 20px !important; /* Larger bullet */
    height: 20px !important;
    background-image: url("static/images/global/bullet.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Hover Effects */
.navbar .dropdown-item:hover {
    background: rgba(1, 102, 255, 0.12) !important; /* Stronger hover */
    transform: translateX(10px) scale(1.02) !important; /* Enhanced hover effect */
    color: #0166FF !important;
}

/* Smooth fade/slide animation */
@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1.05);
    }
}

/* Dropdown arrow button styling */
.dropdown-arrow {
    background: transparent;
    border: none;
    padding: 0 12px !important; /* Larger padding */
    margin-left: 5px !important; /* More margin */
    cursor: pointer;
    transition: transform 0.3s ease;
    display: none;
    color: inherit;
    transform: scale(1.3); /* Zoom the arrow */
}

.dropdown-arrow .arrow-icon {
    display: inline-block;
    font-size: 14px !important; /* Larger arrow */
    transition: transform 0.3s ease;
}

.dropdown.show .dropdown-arrow .arrow-icon {
    transform: rotate(180deg);
}

/* Nav item styling with dropdown arrow */
.navbar-nav .nav-item.dropdown {
    display: flex;
    align-items: center;
    position: relative;
}

.navbar-nav .nav-item.dropdown .nav-link {
    padding-right: 8px !important; /* More padding */
}

/* ===== FIXED MOBILE NAVBAR MENU BACKGROUND COLOR ON SCROLL ===== */
/* Mobile responsive - ZOOMED */
@media (max-width: 991px) {
    /* Mobile navbar collapse menu - FIXED BACKGROUND COLOR */
    .navbar-collapse {
        background: #03045E !important; /* Dark blue background for mobile menu */
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        box-shadow: 0 10px 30px rgba(3, 4, 94, 0.3) !important;
        border-top: 2px solid rgba(255, 255, 255, 0.1) !important;
        transition: all 0.4s ease !important; /* Add transition for smooth color change */
    }

    /* Mobile menu when navbar is scrolled - WHITE BACKGROUND */
    .lux-nav.scrolled .navbar-collapse {
        background: #ffffff !important; /* White background when scrolled */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
        border-top: 2px solid rgba(0, 0, 0, 0.1) !important;
    }

    /* Mobile menu links - white text on dark background */
    .navbar-nav .nav-link {
        color: #ffffff !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 20px 25px !important;
        font-weight: 600 !important;
        font-size: 1.2rem !important;
        transition: all 0.3s ease !important;
    }

    /* Mobile menu links when scrolled - black text on white background */
    .lux-nav.scrolled .navbar-nav .nav-link {
        color: #000000 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    .navbar-nav .nav-link:hover {
        color: #0166FF !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }

    .lux-nav.scrolled .navbar-nav .nav-link:hover {
        color: #0166FF !important;
        background: rgba(1, 102, 255, 0.05) !important;
    }

    /* Mobile dropdown arrows - white on dark background */
    .dropdown-arrow {
        color: #ffffff !important;
    }

    .dropdown-arrow .arrow-icon {
        color: #ffffff !important;
    }

    /* Mobile dropdown arrows when scrolled - black on white background */
    .lux-nav.scrolled .dropdown-arrow {
        color: #000000 !important;
    }

    .lux-nav.scrolled .dropdown-arrow .arrow-icon {
        color: #000000 !important;
    }

    /* Mobile dropdown menus */
    .navbar .dropdown-menu {
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .navbar .dropdown-item {
        color: #000000 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        padding: 15px 25px 15px 55px !important;
        font-weight: 500 !important;
    }

    .navbar .dropdown-item:hover {
        background: rgba(1, 102, 255, 0.1) !important;
        color: #0166FF !important;
    }

    /* Adjust navbar height for mobile */
    .lux-nav {
        padding: 0 !important;
        min-height: 100px !important; /* Still tall on mobile */
    }
    
    .navbar-brand {
        height: 100px !important; /* Tall height on mobile */
        margin-left: 20px !important;
        transform: scale(1.1); /* Slightly scaled for mobile */
    }
    
    .nav-logo {
        height: 90px !important; /* Large logo on mobile */
        min-width: 200px !important;
        max-width: 280px !important;
        transform: scale(1); /* Reset transform for mobile */
    }
    
    /* Show dropdown arrows on mobile */
    .dropdown-arrow {
        display: inline-block;
        transform: scale(1.1); /* Smaller zoom on mobile */
    }
    
    /* Fix mobile menu dropdown styling */
    .navbar-nav .nav-item.dropdown {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding: 0;
        border-bottom: 2px solid rgba(255,255,255,0.15); /* Thicker border */
    }
    
    .lux-nav.scrolled .navbar-nav .nav-item.dropdown {
        border-bottom: 2px solid rgba(0,0,0,0.15);
    }
    
    .navbar-nav .nav-item.dropdown:last-child {
        border-bottom: none;
    }
    
    .navbar-nav .nav-item.dropdown .nav-link {
        padding: 20px 25px !important; /* Larger padding on mobile */
        font-weight: 700 !important; /* Bolder font */
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        text-align: left;
        font-size: 1.3rem !important; /* Larger font on mobile */
    }
    
    /* Mobile dropdown menu styling */
    .navbar .dropdown-menu {
        position: static !important;
        width: 100% !important;
        transform: none !important;
        box-shadow: none;
        border-radius: 0;
        border: none;
        background: rgba(248, 249, 250, 0.9);
        margin-top: 0;
        padding: 0;
        display: none;
        animation: none;
        transform: scale(1) !important; /* Reset transform */
    }
    
    .navbar .dropdown-menu.show {
        display: block;
    }
    
    .navbar .dropdown-item {
        margin: 0;
        padding: 15px 25px 15px 55px !important; /* Larger padding */
        border-radius: 0;
        border-bottom: 2px solid rgba(0,0,0,0.08); /* Thicker border */
        font-weight: 600;
        font-size: 1.2rem !important; /* Larger font */
    }
    
    .navbar .dropdown-item:last-child {
        border-bottom: none;
    }
    
    .navbar .dropdown-item:hover {
        background: rgba(1, 102, 255, 0.15);
        transform: none;
    }
    
    /* Fix phone number in mobile */
    .navbar-nav .nav-item.ms-3 {
        margin-left: 0 !important;
        padding: 20px 0 !important; /* Larger padding */
        border-top: 2px solid rgba(255,255,255,0.15); /* Thicker border */
        text-align: center;
    }
    
    .lux-nav.scrolled .navbar-nav .nav-item.ms-3 {
        border-top: 2px solid rgba(0,0,0,0.15);
    }
    
    .navbar-nav .nav-item.ms-3 .nav-link {
        justify-content: center;
        font-size: 1.4rem !important; /* Larger phone number */
        padding: 20px 25px !important; /* Larger padding */
    }
    
    /* Mobile toggler adjustments */
    .navbar-toggler {
        padding: 10px 12px !important;
        margin-right: 20px !important;
        transform: scale(1.1);
    }
}

/* Desktop - hide arrows and use hover */
@media (min-width: 992px) {
    .dropdown-arrow {
        display: none !important;
    }
    
    .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
        display: block;
    }
    
    /* Proper dropdown positioning on desktop */
    .navbar .dropdown-menu {
        position: absolute;
        left: 0;
        top: 100%;
    }
}

/* Animation for dropdown items */
.navbar .dropdown-item {
    opacity: 0;
    transform: translateX(-15px); /* Larger initial transform */
    animation: dropdownItemReveal 0.3s ease forwards;
}

.navbar .dropdown-item:nth-child(1) { animation-delay: 0.05s; }
.navbar .dropdown-item:nth-child(2) { animation-delay: 0.1s; }
.navbar .dropdown-item:nth-child(3) { animation-delay: 0.15s; }
.navbar .dropdown-item:nth-child(4) { animation-delay: 0.2s; }

@keyframes dropdownItemReveal {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* MOBILE NAV – FULL HEIGHT + VERTICAL SCROLL, keep collapse working */
@media (max-width: 992px) {
  /* Make the collapsed menu scrollable inside navbar flow */
  .navbar-collapse {
    max-height: calc(100vh - 100px); /* full screen minus navbar height */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  /* Keep items vertical */
  .navbar-nav {
    flex-direction: column !important;
  }

  /* Keep dropdowns working normally */
  .dropdown-menu {
    position: static !important;
    float: none !important;
  }
}
/* Custom bullet points for dropdown menu */
.navbar-nav .dropdown-menu {
    --bs-dropdown-link-active-bg: transparent;
    --bs-dropdown-link-active-color: inherit;
}

.navbar-nav .dropdown-menu .dropdown-item {
    position: relative;
    padding-left: 30px; /* Make space for the bullet */
    transition: all 0.3s ease;
    color: #333;
}

/* Add custom bullet using pseudo-element */
.navbar-nav .dropdown-menu .dropdown-item::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url('static/images/global/bullet.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hover effects */
.navbar-nav .dropdown-menu .dropdown-item:hover {
    background-color: rgba(3, 4, 94, 0.05);
    color: #03045E;
    padding-left: 35px; /* Slightly increase padding on hover */
}

.navbar-nav .dropdown-menu .dropdown-item:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

/* Active/focus state */
.navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar-nav .dropdown-menu .dropdown-item.active {
    background-color: rgba(3, 4, 94, 0.1);
    color: #03045E;
    font-weight: 600;
}

.navbar-nav .dropdown-menu .dropdown-item:focus::before,
.navbar-nav .dropdown-menu .dropdown-item.active::before {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
}

/* Remove default Bootstrap dropdown styling */
.navbar-nav .dropdown-menu {
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 10px 0;
    min-width: 220px;
}

/* Adjust dropdown positioning */
.navbar-nav .dropdown {
    position: relative;
}

.navbar-nav .dropdown-menu {
    margin-top: 5px;
}

/* Ensure dropdown arrows are properly aligned */
.dropdown-arrow {
    background: none;
    border: none;
    color: inherit;
    padding: 0 5px;
    cursor: pointer;
}

.dropdown-arrow .arrow-icon {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.dropdown.show .dropdown-arrow .arrow-icon {
    transform: rotate(180deg);
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .navbar-nav .dropdown-menu .dropdown-item {
        padding-left: 40px; /* More space for mobile */
    }
    
    .navbar-nav .dropdown-menu .dropdown-item::before {
        left: 15px;
        width: 18px;
        height: 18px;
    }
    
    .navbar-nav .dropdown-menu {
        border: none;
        box-shadow: none;
        background-color: rgba(248, 249, 250, 0.5);
    }
}
/* Custom bullet for dropdown menu items – with perfect spacing */
.navbar .dropdown-menu .dropdown-menu .dropdown-item {
    position: relative;
    padding-left: 42px !important;        /* increased space for bullet + gap */
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.navbar .dropdown-menu .dropdown-item::before {
    content: '';
    position: absolute;
    left: 18px;                    /* moved a bit to the right */
    top: 50%;
    transform: translateY(-50%);
    width: 16px;                   /* slightly smaller for elegance */
    height: 16px;
    background-image: url("../images/global/bullet.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.9;
}

/* Hover effect – bullet pops a little + extra breathing room */
.navbar .dropdown-menu .dropdown-item:hover {
    padding-left: 48px !important;
    background-color: rgba(1, 102, 255, 0.08);
}

.navbar .dropdown-menu .dropdown-item:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1.15);
}
/* ===== ENHANCED SCROLL POSITIONING FOR SECTION NAVIGATION ===== */

/* Ensure all section anchors have consistent offset */
[id] {
  scroll-margin-top: 80px; /* Standard margin for most sections */
}

/* Default spacing for all sections */
#data-collection,
#analysis,
#reporting,
#cati-tabi,
#methodology,
#solutions,
#moci,
#doha-oasis,
#qdb-export {
  scroll-margin-top: 80px;
  position: relative;
}

/* Smaller spacing for these specific sections */
#credentials,
#Global,
#journey,
#team {
  scroll-margin-top: 60px; /* Reduced from 80px to 60px */
  position: relative;
}

/* Clients section with 110px spacing */
#clients {
  scroll-margin-top: 110px;
  position: relative;
}

/* ONLY Solutions gets smaller spacing */
#solutions {
  scroll-margin-top: 50px; /* Even smaller spacing for solutions only */
  position: relative;
}

/* Add a pseudo-element to create a better scroll target */
[id]::before {
  content: '';
  display: block;
  height: 80px; /* Standard for most sections */
  margin-top: -80px;
  visibility: hidden;
  pointer-events: none;
}

/* Special pseudo-element for smaller spacing sections */
#credentials::before,
#Global::before,
#journey::before,
#team::before {
  height: 60px; /* Reduced from 80px to 60px */
  margin-top: -60px;
}

/* Special pseudo-element for clients - 110px */
#clients::before {
  height: 110px;
  margin-top: -110px;
}

/* Special pseudo-element for solutions only - even smaller */
#solutions::before {
  height: 50px; /* Even smaller for solutions only */
  margin-top: -50px;
}

/* For section titles that might have different structure */
.section-title,
.scene-title {
  scroll-margin-top: 80px;
}

/* Smaller spacing for these specific section titles */
#credentials .section-title,
#credentials .scene-title,
#Global .section-title,
#Global .scene-title,
#journey .section-title,
#journey .scene-title,
#team .section-title,
#team .scene-title {
  scroll-margin-top: 60px; /* Reduced from 80px to 60px */
}

/* Clients section titles get 110px */
#clients .section-title,
#clients .scene-title {
  scroll-margin-top: 110px;
}

/* Solutions section titles get even smaller spacing */
#solutions .section-title,
#solutions .scene-title {
  scroll-margin-top: 50px; /* Even smaller for solutions only */
}

/* Adjust for mobile */
@media (max-width: 768px) {
  [id] {
    scroll-margin-top: 70px;
  }
  
  /* Default mobile spacing */
  #data-collection,
  #analysis,
  #reporting,
  #cati-tabi,
  #methodology,
  #solutions,
  #moci,
  #doha-oasis,
  #qdb-export {
    scroll-margin-top: 70px;
  }
  
  /* Smaller mobile spacing for these specific sections */
  #credentials,
  #Global,
  #journey,
  #team {
    scroll-margin-top: 55px; /* Reduced from 70px to 55px on mobile */
  }
  
  #clients {
    scroll-margin-top: 100px;
  }
  
  /* ONLY Solutions gets even smaller on mobile */
  #solutions {
    scroll-margin-top: 45px; /* Even smaller for solutions only on mobile */
  }
  
  [id]::before {
    height: 70px;
    margin-top: -70px;
  }
  
  /* Smaller pseudo-element for specific sections on mobile */
  #credentials::before,
  #Global::before,
  #journey::before,
  #team::before {
    height: 55px; /* Reduced from 70px to 55px on mobile */
    margin-top: -55px;
  }
  
  #clients::before {
    height: 100px;
    margin-top: -100px;
  }
  
  #solutions::before {
    height: 45px; /* Even smaller for solutions only on mobile */
    margin-top: -45px;
  }
  
  /* Smaller spacing for these section titles on mobile */
  #credentials .section-title,
  #credentials .scene-title,
  #Global .section-title,
  #Global .scene-title,
  #journey .section-title,
  #journey .scene-title,
  #team .section-title,
  #team .scene-title {
    scroll-margin-top: 55px; /* Reduced from 70px to 55px on mobile */
  }
  
  /* Solutions titles on mobile - even smaller */
  #solutions .section-title,
  #solutions .scene-title {
    scroll-margin-top: 45px; /* Even smaller for solutions only on mobile */
  }
}

/* ===== ENHANCED SCROLL BEHAVIOR ===== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Standard padding for most sections */
}

/* For browsers that support :has() pseudo-class */
html:has(#clients:target) {
  scroll-padding-top: 110px;
}

/* For browsers that support :has() pseudo-class - solutions only gets smaller */
html:has(#solutions:target) {
  scroll-padding-top: 50px; /* Smaller for solutions only */
}

/* For browsers that support :has() pseudo-class - smaller spacing sections */
html:has(#credentials:target),
html:has(#Global:target),
html:has(#journey:target),
html:has(#team:target) {
  scroll-padding-top: 60px; /* Reduced spacing for these sections */
}

/* Ensure all anchor links work consistently */
a[href*="#"]:not([href="#"]) {
  scroll-behavior: smooth;
}
/* ===== IMPROVED TEXT ALIGNMENT - BETTER READABILITY ===== */

/* Remove all justification - go back to clean left alignment */


/* Specifically for the timeline descriptions */
.timeline-section .desc p {
    text-align: justify;
    text-wrap: balance;
    text-justify: inter-word;
    hyphens: auto;
      max-width: 800px;
    margin: 0 auto;
}