/* ============================================================
   NiuMedia Remodel — Design System Integration
   Overrides for Renev Template
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap&subset=latin,latin-ext");

:root {
  /* ---------- Brand colors ---------- */
  --niu-orange: #f06000;
  --niu-orange-600: #e55a00;
  --niu-orange-400: #ff7a1a;
  --niu-orange-300: #ff9447;
  --niu-orange-100: #ffe6d1;
  --niu-orange-50: #fff4ea;

  --niu-gray: #908080;
  --niu-gray-700: #6b5f5f;
  --niu-gray-600: #7a6e6e;
  --niu-gray-500: #908080;
  --niu-gray-400: #b0a5a5;
  --niu-gray-300: #cdc4c4;
  --niu-gray-200: #e5dfdf;
  --niu-gray-100: #f2eeee;
  --niu-gray-50: #faf8f8;

  --niu-ink: #2b2424;
  --niu-white: #ffffff;

  /* ---------- Semantic ---------- */
  --color-bg: var(--niu-white);
  --color-bg-soft: var(--niu-gray-50);
  --color-bg-tint: var(--niu-orange-50);
  --color-surface: var(--niu-white);
  --color-fg: var(--niu-ink);
  --color-fg-muted: var(--niu-gray-700);
  --color-brand: var(--niu-orange);
  --color-brand-hover: var(--niu-orange-600);
  --color-border: var(--niu-gray-200);

  /* ---------- Type ---------- */
  --font-display: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-lg: 14px;
  --r-pill: 999px;
  --r-blob: 60% 40% 65% 35% / 55% 45% 55% 45%;

  --shadow-orange: 0 12px 28px rgba(240, 96, 0, 0.28);
  --shadow-sm: 0 2px 6px rgba(43, 36, 36, 0.08);
  --shadow-md: 0 6px 18px rgba(43, 36, 36, 0.1);

  /* ---------- Brand gradient (used on icon badges, buttons, blobs) ---------- */
  --grad-orange: linear-gradient(135deg, #ff8a2b 0%, #f06000 60%, #e55a00 100%);
  --grad-orange-soft: linear-gradient(135deg, #ffe6d1 0%, #fff4ea 100%);
}

/* ============================================================
   Hero Section Animations
   ============================================================ */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes marquee-hero {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.animate-fade-in {
  animation: fadeSlideIn 0.8s ease-out forwards;
  opacity: 0;
}
.animate-marquee-hero {
  animation: marquee-hero 40s linear infinite;
}
.delay-100 {
  animation-delay: 0.1s;
}
.delay-200 {
  animation-delay: 0.2s;
}
.delay-300 {
  animation-delay: 0.3s;
}
.delay-400 {
  animation-delay: 0.4s;
}
.delay-500 {
  animation-delay: 0.5s;
}

/* Base Overrides */
body {
  font-family: var(--font-body) !important;
  color: #fff !important;
  background-color: var(--niu-ink) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important; /* Design system uses Title Case for body headings */
  color: #fff;
}

p {
  font-family: var(--font-body) !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Header & Nav
   --------------------------------------------------------------------
   Strategy: header sits *above* every section, so its background can't
   be transparent — that hides the white menu text whenever the section
   underneath is light. We keep a soft translucent-dark default with
   backdrop blur (looks good on both dark heros and white content) and
   solidify on scroll. */
.homepage1-menu {
  position: relative;
  z-index: 9999;
}

.vl-header-area,
.vl-transparent-header {
  background: rgba(43, 36, 36, 0.78) !important;
  background-color: rgba(43, 36, 36, 0.78) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.vl-header-area.header-sticky {
  background: rgba(43, 36, 36, 0.96) !important;
  background-color: rgba(43, 36, 36, 0.96) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
  border-bottom-color: rgba(240, 96, 0, 0.25);
}

.niu-header-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Logo wrapper stays transparent so the header bg shows through */
.vl-logo,
.vl-logo a,
.header-site-icon {
  background: transparent !important;
  background-color: transparent !important;
}

.vl-main-menu ul > li > a {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--niu-white) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.vl-main-menu ul > li > a:hover {
  color: var(--niu-orange-300) !important;
}

.hamburger_menu img {
  filter: brightness(0) invert(1);
}

.hamburger_menu,
.vl-offcanvas-toggle {
  background: transparent !important;
  border: none !important;
}

.vl-offcanvas-toggle i,
.vl-main-menu ul li a span i {
  color: var(--niu-white) !important;
}

/* Servicios dropdown — solid dark background so links are always readable */
.homepage1-menu .vl-main-menu ul > li .sub-menu {
  background: rgba(20, 16, 16, 0.96) !important;
  border-color: rgba(240, 96, 0, 0.2) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55) !important;
}

.homepage1-menu .vl-main-menu ul > li .sub-menu::after {
  background: var(--niu-orange) !important;
}

.homepage1-menu .vl-main-menu ul > li .sub-menu li a {
  color: rgba(255, 255, 255, 0.85) !important;
}

.homepage1-menu .vl-main-menu ul > li .sub-menu li a:hover {
  color: var(--niu-orange-300) !important;
}

.vl-logo img,
.footer-logo1 img,
.vl-offcanvas-logo img,
.sidebar-logo img {
  max-height: 50px !important;
  width: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  background-color: transparent !important;
  /* Filter removed: now using native white transparent PNGs */
}

.vl-logo,
.vl-logo a,
.footer-logo1,
.vl-offcanvas-logo,
.sidebar-logo {
  background: transparent !important;
  background-color: transparent !important;
}

/* Buttons */
.vl-btn1 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  background: var(--niu-orange) !important; /* Solid fallback */
  background: var(--grad-orange) !important;
  color: #fff !important;
  border-radius: var(--r-pill) !important;
  padding: 16px 36px !important;
  box-shadow: var(--shadow-orange) !important;
  border: none !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
  z-index: 1;
}

.vl-btn1:hover {
  background: var(--niu-orange-600) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 32px rgba(240, 96, 0, 0.35) !important;
  color: #fff !important;
}

.vl-btn1::before,
.vl-btn1::after {
  display: none !important; /* Remove template's weird button effects */
}

/* Headings */
.heading1 h5,
.heading2 h5,
.heading3 h5,
.hero-header-area h5 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  color: var(--niu-orange) !important;
  font-size: 13px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.heading1 h2,
.heading2 h2,
.heading3 h2 {
  font-size: 44px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: var(--niu-ink) !important;
  margin-top: 12px !important;
}

/* Hero Section — Dark theme */
.hero1-section-area {
  background: radial-gradient(
    ellipse at top right,
    #1a1414 0%,
    var(--niu-ink) 45%,
    #0d0a0a 100%
  ) !important;
  background-color: var(--niu-ink) !important;
  position: relative;
  overflow: hidden;
}

.hero1-section-area::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -150px;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(240, 96, 0, 0.25) 0%,
    rgba(240, 96, 0, 0) 60%
  );
  pointer-events: none;
  z-index: 0;
}

.hero1-section-area > .container {
  position: relative;
  z-index: 1;
}

.hero1-section-area .hero-header-area h5 {
  color: var(--niu-orange-300) !important;
}

.hero1-section-area .hero-bottom-images .img1 img {
  height: auto !important;
  max-height: 520px !important;
  border: 4px solid var(--niu-orange) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

.hero1-section-area .hero-bottom-images .started-btn {
  position: relative !important;
  top: -60px !important;
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: inline-block !important;
  margin-top: 40px !important;
}

.hero-header-area h1 {
  font-size: 64px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  color: #ffffff !important;
}

.hero-header-area h1 mark,
.hero-header-area h1 .niu-mark {
  color: var(--niu-orange-300) !important;
  background: none !important;
}

/* Hero "Empieza Aquí" button text legible sobre fondo oscuro */
.hero1-section-area .started-btn a {
  color: var(--niu-ink) !important;
}

.service1-section-area {
  background: var(--niu-ink) !important;
  background-image: none !important;
}

.service-header h2 {
  color: #fff !important;
}

.service-header h5 {
  color: var(--niu-orange) !important;
}

/* Service Cards */
.service-branding-boxesarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--r-lg) !important;
  padding: 40px !important;
  box-shadow: none !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.service-branding-boxesarea:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--niu-orange) !important;
  box-shadow: 0 20px 40px rgba(240, 96, 0, 0.25) !important;
  transform: translateY(-8px) !important;
}

.service-branding-boxesarea.funnel-card {
  background: #fff !important;
  color: var(--niu-ink) !important;
  padding: 30px !important;
  border: 1px solid var(--niu-gray-200) !important;
  box-shadow: var(--shadow-sm) !important;
}

.service-branding-boxesarea.funnel-card:hover {
  border-color: var(--niu-orange) !important;
  box-shadow: 0 10px 25px rgba(240, 96, 0, 0.2) !important;
  transform: translateY(-5px) !important;
}

.service-branding-boxesarea.funnel-card h3 {
  color: var(--niu-ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: italic !important;
}

.service-branding-boxesarea.funnel-card p {
  color: var(--niu-gray-700) !important;
}

.service-branding-boxesarea .service-list a {
  color: rgba(255, 255, 255, 0.6) !important;
}

.service-branding-boxesarea .service-list a:hover {
  color: var(--niu-orange) !important;
}

/* About Section */
.about1-section-area {
  background-color: var(--niu-gray-50) !important;
}

/* Blobs (Organic shapes) */
.reveal img,
.image-anime img {
  border-radius: var(--r-blob) !important;
  border: 8px solid var(--niu-orange) !important;
}

/* Portfolio / Cases */
.portfolio-boxarea {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
}

.portfolio-boxarea .content-area {
  background: #fff !important;
  padding: 24px !important;
}

.portfolio-boxarea .content-area a {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: var(--niu-ink) !important;
}

/* Partners / Authority */
.authority-section {
  background: var(--niu-gray-50) !important;
}

.partner-box {
  background: #fff !important;
  border: 1px solid var(--niu-gray-200) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

.partner-box h3 {
  color: var(--niu-gray-700) !important;
}

/* Funnel Section */
.funnel-section-area {
  background: #ffffff !important;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.funnel-section-area h2 {
  color: var(--niu-ink) !important;
}

.funnel-section-area .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

.funnel-section-area [class*="col-"] {
  display: flex !important;
  margin-bottom: 30px;
}

.funnel-section-area .service-branding-boxesarea.funnel-card {
  background: #2b2424 !important; /* Solid premium dark gray */
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  min-height: 280px !important; /* Compact vertical size */
  padding: 30px 20px !important; /* Condensed padding */
  border-radius: 24px !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.funnel-section-area .service-branding-boxesarea.funnel-card:hover {
  background: #362d2d !important;
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

.funnel-section-area .service-branding-boxesarea.funnel-card .niu-badge {
  flex-shrink: 0 !important;
  width: 60px !important; /* Smaller badge */
  height: 60px !important;
  margin-bottom: 20px !important;
}

.funnel-section-area .service-branding-boxesarea.funnel-card .niu-badge img {
  width: 30px !important; /* Smaller icons */
}

.funnel-section-area .service-branding-boxesarea.funnel-card h3 {
  color: #fff !important;
  margin-bottom: 10px !important;
  font-size: 20px !important; /* Condensed text */
  font-weight: 800 !important;
}

.funnel-section-area .service-branding-boxesarea.funnel-card p {
  color: rgba(255, 255, 255, 0.8) !important;
  margin-top: 0 !important;
  font-size: 14px !important; /* Condensed text */
  line-height: 1.4 !important;
  max-width: 220px;
}

/* Case Studies Section */
.portfolio1-section-area {
  background: #ffffff !important;
  border-bottom: 1px solid #f0f0f0;
}

.portfolio1-section-area h2 {
  color: var(--niu-ink) !important;
}

.portfolio1-section-area .portfolio-boxarea .content-area a {
  color: var(--niu-ink) !important;
}

.portfolio1-section-area .portfolio-boxarea .content-area p {
  color: var(--niu-orange) !important;
  font-weight: 700;
}

/* Testimonials Section */
.testimonials-2 {
  background: #ffffff !important;
  background-image: none !important;
}

.testimonials-2 h2 {
  color: var(--niu-ink) !important;
}

.testimonials-2 .testimonial-boxarea {
  background: #fdfdfd !important;
  border: 1px solid #f0f0f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

.testimonials-2 .testimonial-boxarea p,
.testimonials-2 .testimonial-boxarea a {
  color: var(--niu-ink) !important;
}

.testimonials-2 .testimonial-boxarea svg path {
  fill: var(--niu-orange) !important;
}

/* ----------------------------------------------------------------
   Testimonials — fix floating avatars overlapping the card.
   The Renev template hardcodes left:1120px / left:1160px on the
   right-side thumbnails, which only works at the original layout
   width. We mirror the left-side offsets using `right:` so the
   avatars sit outside the card on any container width.
   ---------------------------------------------------------------- */
.testimonials-2 .map-testimonial {
  pointer-events: none; /* avatars are decorative; clicks pass through */
}
.testimonials-2 .map-testimonial .swiper-slide {
  pointer-events: auto;
}

.testimonials-2 .map-testimonial .swiper-slide:nth-child(4) {
  left: auto !important;
  right: 100px;
  bottom: 5%;
}
.testimonials-2 .map-testimonial .swiper-slide:nth-child(5) {
  left: auto !important;
  right: 50px;
  top: 120px;
}
.testimonials-2 .map-testimonial .swiper-slide:nth-child(6) {
  left: auto !important;
  right: 100px;
  top: 240px;
}

/* On narrower viewports (<1280px) where 100px columns squeeze the
   card, hide the floating thumbs entirely — the active swiper-thumb
   is decorative, not navigation. */
@media (max-width: 1279px) {
  .testimonials-2 .map-testimonial {
    display: none;
  }
  .testimonials-2 .col-lg-7 {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Footer */
footer,
.footer-section,
.vl-footer1-section-area {
  background: var(--niu-ink) !important;
  background-color: #2b2424 !important; /* Hardcoded fallback */
  color: #fff !important;
}

.vl-footer1-section-area h3,
.vl-footer1-section-area h4 {
  color: var(--niu-orange) !important;
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
}

.vl-footer1-section-area p,
.vl-footer1-section-area a,
.vl-footer1-section-area li {
  color: rgba(255, 255, 255, 0.7) !important;
}

.vl-footer1-section-area a:hover {
  color: var(--niu-orange) !important;
}

.vl-footer1-section-area .vl-btn1 {
  color: #fff !important;
}

.vl-copyright-area p {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Started Buttons (Call to Action) */
.started-btn svg path {
  fill: var(--niu-orange) !important;
}

.started-btn a {
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: italic !important;
}

.started-btn a span {
  background-color: var(--niu-ink) !important;
  color: var(--niu-orange) !important;
}

.started-btn a span i {
  color: var(--niu-orange) !important;
}

/* ============================================================
   Marquee fix — sin huecos, infinite seamless
   El template original animaba 0 → -100% con 1 copia, dejando hueco al loop.
   Truco: duplicamos contenido (set + clon) y animamos 0 → -50%.
   ============================================================ */
.slider1-section-area .marquee-wrap {
  overflow: hidden !important;
}

.slider1-section-area .marquee-wrap .marquee-text {
  display: inline-flex !important;
  width: max-content !important;
  animation: niu-marquee 35s linear infinite !important;
  padding: 24px 0 !important;
  gap: 0 !important;
  white-space: nowrap !important;
}

.slider1-section-area .marquee-wrap:hover .marquee-text {
  animation-play-state: paused !important;
}

.slider1-section-area .brand-single-box {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  padding-right: 0 !important;
}

.slider1-section-area .brand-single-box h3 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 30px !important;
  margin: 0 !important;
  padding-right: 30px !important;
}

.slider1-section-area .brand-single-box h3 img {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

@keyframes niu-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Aplicar mismo fix al slider2 (sectores en about) */
.slider2-section-area .marquee-wrap {
  overflow: hidden !important;
}
.slider2-section-area .marquee-wrap .marquee-text {
  display: inline-flex !important;
  width: max-content !important;
  animation: niu-marquee 40s linear infinite !important;
  white-space: nowrap !important;
}
.slider2-section-area .marquee-wrap:hover .marquee-text {
  animation-play-state: paused !important;
}
.slider2-section-area .brand-single-box {
  flex-shrink: 0 !important;
}

/* ============================================================
   Animaciones globales de entrada (cards, botones, hover)
   ============================================================ */

/* Hover lift universal en cards de servicios y portfolio */
.service-branding-boxesarea,
.portfolio-boxarea,
.partner-box {
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease !important;
  will-change: transform;
}

.partner-box:hover {
  transform: translateY(-6px) !important;
  border-color: var(--niu-orange) !important;
  box-shadow: 0 16px 32px rgba(240, 96, 0, 0.18) !important;
}

.portfolio-boxarea:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 48px rgba(43, 36, 36, 0.18) !important;
}

/* Boton primario con efecto sutil */
.vl-btn1 {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    background-color 0.25s ease !important;
}

/* Iconos de arrow con animacion sutil */
.service-branding-boxesarea .arrow a,
.portfolio-boxarea .arrow a {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s ease !important;
}

.service-branding-boxesarea:hover .arrow a {
  transform: rotate(-45deg) !important;
}

.portfolio-boxarea:hover .arrow a {
  transform: scale(1.1) !important;
}

/* Footer links con underline animado */
.vl-footer1-section-area ul li a {
  position: relative;
  transition:
    color 0.25s ease,
    padding-left 0.25s ease !important;
}

.vl-footer1-section-area ul li a:hover {
  padding-left: 6px !important;
}

/* Numeros (counter) con animacion sutil al cargar */
.counter-box {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.counter-box:hover {
  transform: translateY(-4px) !important;
}

/* Hero btn "Empieza Aqui" con rotacion del SVG verde */
.started-btn svg.keyframe5 {
  animation: niu-spin-slow 18s linear infinite !important;
  transform-origin: center !important;
}

@keyframes niu-spin-slow {
  to {
    transform: rotate(360deg);
  }
}

/* Imagen con keyframe6 (esfera 3D del hero) — flotacion suave */
.keyframe6 {
  animation: niu-float 6s ease-in-out infinite !important;
}

@keyframes niu-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

/* Inner page hero — overrides para hover de breadcrumb y separadores */
.inner-section-area {
  position: relative;
  overflow: hidden;
}

.inner-section-area::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -150px;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(240, 96, 0, 0.22) 0%,
    rgba(240, 96, 0, 0) 65%
  );
  pointer-events: none;
  z-index: 0;
}

.inner-section-area > .container {
  position: relative;
  z-index: 1;
}

.inner-section-area .hero-header-area h4 a {
  transition: opacity 0.25s ease !important;
}

.inner-section-area .hero-header-area h4 a:hover {
  opacity: 0.7 !important;
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .slider1-section-area .marquee-wrap .marquee-text {
    animation: none !important;
  }
}

/* Inner Page Hero (Contact, About, etc) */
.inner-section-area {
  background-color: var(--niu-ink);
  background-image:
    linear-gradient(rgba(10, 11, 13, 0.85), rgba(10, 11, 13, 0.85)),
    url(../img/all-images/bg/hero-bg1.png);
  background-position: center !important;
  background-size: cover !important;
  border-bottom: 1px solid rgba(240, 96, 0, 0.2) !important;
}

.vl-logo img {
  background: transparent !important;
}

.inner-section-area .hero-header-area h1 {
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -2px !important;
}

.inner-section-area .hero-header-area h4,
.inner-section-area .hero-header-area h4 a,
.inner-section-area .hero-header-area h4 i {
  color: var(--niu-orange) !important;
}

/* FAQ Service Sections */
.niu-service-title {
  color: var(--niu-orange) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  border-left: 5px solid var(--niu-orange);
  padding-left: 20px;
  letter-spacing: 1px;
}

.faq-service-section {
  padding: 40px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--r-lg);
  border: 1px solid rgba(240, 96, 0, 0.08);
  transition: all 0.3s ease;
}

.faq-service-section:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(240, 96, 0, 0.2);
}

.faq-inner-section-area .accordion-item {
  background: var(--niu-ink, #1a1a1a) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
}

.faq-inner-section-area .accordion-item:hover {
  transform: translateY(-5px);
  border-color: var(--niu-orange) !important;
  box-shadow: 0 15px 40px rgba(240, 96, 0, 0.2) !important;
}

.faq-inner-section-area .accordion-button {
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.faq-inner-section-area .accordion-button:not(.collapsed) {
  color: #ffffff !important;
  background: var(--niu-orange) !important;
}

.faq-inner-section-area .accordion-body {
  color: rgba(255, 255, 255, 0.8) !important;
  line-height: 1.6;
}

/* Header CTA Button Enhancement */
header .vl-btn1 {
  background-color: var(--niu-orange) !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  box-shadow: 0 0 15px rgba(240, 96, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s ease !important;
}

header .vl-btn1:hover {
  background-color: #ff6a00 !important;
  box-shadow: 0 0 25px rgba(240, 96, 0, 0.5) !important;
  transform: translateY(-2px);
}

/* Preloader & Scroll Progress */
#loader {
  border-top-color: var(--niu-orange) !important;
}

.progress-wrap::after {
  color: var(--niu-orange) !important;
}

.progress-circle path {
  stroke: var(--niu-orange) !important;
}

/* Animations */
@keyframes niu-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes niu-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.niu-spin {
  animation: niu-spin 12s linear infinite !important;
}

.niu-float {
  animation: niu-float 3s ease-in-out infinite !important;
}

/* Fix for centered hero button animation */
.hero1-section-area .started-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero1-section-area .started-btn svg {
  animation: niu-spin 15s linear infinite !important;
}

/* Sidebar / Slidebar Overrides */
.slide-bar {
  background-color: var(--niu-ink) !important;
  color: #fff !important;
}

.slide-bar .sidebar-content ul li a {
  color: #fff !important;
}

.slide-bar .sidebar-info .sidebar-logo {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.close-mobile-menu a {
  color: var(--niu-orange) !important;
}

.slide-bar:not(.show) {
  right: -100% !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.slide-bar.show {
  right: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
}

/* Force dark theme for sidebar content */
.sidebar-info {
  background-color: var(--niu-ink) !important;
}

/* Specific fix for About page hero background */
.about-hero-premium {
  background-color: #000 !important;
}

/* Light-section scope — for sections with white background that need to
   opt out of the global dark theme (which forces white body text, etc.). */
.niu-section--light,
.niu-section--light h1,
.niu-section--light h2,
.niu-section--light h3,
.niu-section--light h4,
.niu-section--light h5,
.niu-section--light h6 {
  color: var(--niu-ink) !important;
}

.niu-section--light p {
  color: var(--niu-gray-700) !important;
  opacity: 1 !important;
}

/* FAQ Custom Tabs (Project.html style) */
.tabs-area .nav-pills {
  background: rgba(255, 255, 255, 0.03);
  padding: 10px;
  border-radius: 20px;
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.tabs-area .nav-pills .nav-link {
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  padding: 12px 25px !important;
  border-radius: 15px !important;
  transition: all 0.3s ease !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}

.tabs-area .nav-pills .nav-link.active {
  background: var(--niu-orange) !important;
  background: var(--grad-orange) !important;
  box-shadow: 0 10px 20px rgba(240, 96, 0, 0.2) !important;
}

.tabs-area .nav-pills .nav-link:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* FAQ Accordion Enhancements */
/* FAQ Accordion Enhancements */
/* FAQ Accordion Enhancements */
.accordion-button::after {
  filter: brightness(0) invert(1) !important;
}

.accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1) !important;
}

/* Authority section partner boxes (moved from inline style) */
.authority-section .partner-box {
  background: rgba(255, 255, 255, 0.03);
  padding: 2.5rem 4rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  min-width: 250px;
  text-align: center;
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.4s,
    border-color 0.4s,
    box-shadow 0.4s;
  backdrop-filter: blur(5px);
}

.authority-section .partner-box:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.06);
  border-color: #ff5722;
  box-shadow: 0 15px 30px rgba(255, 87, 34, 0.1);
}

.partner-box h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* ============================================================
   Mobile Responsiveness & Centering
   ============================================================ */
@media (max-width: 768px) {
  /* Center main headings */
  .heading1,
  .heading2,
  .heading3,
  .service-header,
  .hero-header-area {
    text-align: center !important;
  }

  .heading1 h2,
  .heading2 h2,
  .heading3 h2,
  .service-header h2 {
    font-size: 34px !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }

  .hero-header-area h1 {
    font-size: 42px !important;
    text-align: center !important;
    line-height: 1.1 !important;
  }

  /* Fix Funnel section title size specifically */
  .funnel-section-area .heading1 h2 {
    font-size: 30px !important;
  }

  /* Center the sub-logo icons with text */
  .heading1 h5,
  .heading2 h5,
  .heading3 h5,
  .hero-header-area h5 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  /* Adjust margins for mobile */
  .space-margin60 {
    margin-bottom: 30px !important;
  }

  .space60 {
    height: 30px !important;
  }

  /* Fix SplitText alignment issues */
  .text-anime-style-1,
  .text-anime-style-2,
  .text-anime-style-3,
  .split-line {
    text-align: center !important;
  }
}

/* FAQ Tab Overrides for Light Background */
.faq-inner-section-area .tabs-area .nav-pills { background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.1); }
.faq-inner-section-area .tabs-area .nav-pills .nav-link { color: var(--niu-ink, #1a1a1a) !important; }
.faq-inner-section-area .tabs-area .nav-pills .nav-link.active { color: #fff !important; }
.faq-inner-section-area .tabs-area .nav-pills .nav-link:hover:not(.active) { background: rgba(0,0,0,0.1) !important; border-color: rgba(0,0,0,0.15) !important; }

/* ============================================================
   Shine Border Animation
   ============================================================ */
@keyframes shine-pulse {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  to {
    background-position: 0% 0%;
  }
}

.shine-border {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.shine-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--border-width, 2px);
  border-radius: inherit;
  background-image: var(
    --background-radial-gradient,
    radial-gradient(
      transparent,
      transparent,
      #f06000,
      #ffcd75,
      #00ffff,
      transparent,
      transparent
    )
  );
  background-size: 300% 300%;
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: shine-pulse var(--shine-pulse-duration, 8s) infinite linear;
  z-index: 1;
}

/* --- SECCIÓN HEADERS ALIGNMENT --- */
.niu-header-flex {
  display: block !important;
  text-align: center !important;
  margin-bottom: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;
  width: 100% !important;
  color: var(--niu-orange) !important;
}

/* Para encabezados alineados a la izquierda */
.niu-header-flex--left {
  text-align: left !important;
}