/* =========================================================
   GLOBAL
========================================================= */
:root{
  --nav-bg: rgba(245, 245, 245, 0.55);
  --nav-border: rgba(255, 255, 255, 0.35);
  --text-dark: #101828;
}

html{
  scroll-behavior: smooth;
}

body{
  color: var(--text-dark);
}

/* utility (optional) */
.section-title{
  font-weight: 600;
}

/* =========================================================
   FROSTED NAVBAR
========================================================= */
#siteNavbar{
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#siteNavbar .navbar-nav .nav-link{
  font-weight: 500;
}

#siteNavbar .navbar-brand img{
  display:block;
}

/* Make dropdown look modern */
.dropdown-menu{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
  padding: 10px;
}

.dropdown-item{
  border-radius: 10px;
  padding: 10px 12px;
}

/* Improve contrast for navbar toggler icon on glass background */
.navbar-toggler{
  border: 1px solid rgba(0,0,0,0.12);
}
.navbar-toggler-icon{
  filter: contrast(1.1);
}

/* =========================================================
   HERO CAROUSEL
   - Keeps consistent height and crop
========================================================= */
#heroCarousel .carousel-item img{
  height: 70vh;
  min-height: 420px;
  object-fit: cover;
}

@media (max-width: 768px){
  #heroCarousel .carousel-item img{
    height: 52vh;
    min-height: 320px;
  }
}

/* =========================================================
   MOUSE SCROLL ICON (animated)
========================================================= */
.mouse-scroll{
  width: 28px;
  height: 44px;
  border: 2px solid rgba(16,24,40,0.55);
  border-radius: 999px;
  position: relative;
}

.mouse-scroll::after{
  content:"";
  position: absolute;
  left: 50%;
  top: 10px;
  width: 5px;
  height: 8px;
  border-radius: 999px;
  background: rgba(16,24,40,0.65);
  transform: translateX(-50%);
  animation: mouseDot 1.4s ease-in-out infinite;
}

@keyframes mouseDot{
  0%   { opacity: 0; transform: translate(-50%, -2px); }
  20%  { opacity: 1; }
  60%  { opacity: 1; transform: translate(-50%, 12px); }
  100% { opacity: 0; transform: translate(-50%, 18px); }
}

/* =========================================================
   CARDS: subtle hover lift
========================================================= */
.card{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  overflow: hidden;
}

.card img{
  object-fit: cover;
}

a .card{
  transition: transform .25s ease, box-shadow .25s ease;
}

a:hover .card{
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.10);
}

/* =========================================================
   APPS MARQUEE (right → left)
========================================================= */
.apps-marquee{
  padding: 12px 0;
}

.apps-track{
  display: inline-flex;
  gap: 18px;
  align-items: center;
  width: max-content;
  animation: marqueeLeft 28s linear infinite;
  will-change: transform;
}

.apps-track img{
  height: 220px;
  width: auto;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  background: #fff;
}

@media (max-width: 768px){
  .apps-track img{
    height: 150px;
    border-radius: 14px;
  }
}

/* pause on hover (optional nice touch) */
.apps-marquee:hover .apps-track{
  animation-play-state: paused;
}

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

/* =========================================================
   PARTNER LOGOS MARQUEE (two directions)
========================================================= */
.logos-marquee{
  padding: 10px 0;
}

/* Grey tone for consistency */
.logos-track img{
  height: 52px;
  width: auto;
  opacity: 0.85;
  filter: grayscale(100%);
  transition: opacity .2s ease, filter .2s ease;
}

.logos-track img:hover{
  opacity: 1;
  filter: none;
}

/* Row directions */
.direction-ltr{
  animation: marqueeRight 26s linear infinite;
}
.direction-rtl{
  animation: marqueeLeft 26s linear infinite;
}

/* pause on hover */
.logos-marquee:hover .logos-track{
  animation-play-state: paused;
}

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

/* =========================================================
   FOOTER LINKS
========================================================= */
#siteFooter a:hover{
  text-decoration: underline !important;
}

/* =========================================================
   OPTIONAL: reduce motion support
========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .apps-track,
  .direction-ltr,
  .direction-rtl,
  .mouse-scroll::after{
    animation: none !important;
  }
}
/* =========================================================
   PREMIUM NAVBAR POLISH (Paste at end of style.css)
========================================================= */

/* Stronger readable nav text on frosted glass */
#siteNavbar .nav-link{
  color: rgba(16, 24, 40, 0.92);
  padding: 10px 12px;
  border-radius: 12px;
  position: relative;
}

/* Subtle hover underline + light background glow */
#siteNavbar .nav-link:hover{
  color: rgba(16, 24, 40, 1);
  background: rgba(255, 255, 255, 0.45);
}

/* Active link (manual: add .active on current page link) */
#siteNavbar .nav-link.active{
  background: rgba(255, 255, 255, 0.70);
  color: rgba(16, 24, 40, 1);
  font-weight: 600;
}

/* Nice underline animation */
#siteNavbar .nav-link::after{
  content:"";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: rgba(16,24,40,0.25);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

#siteNavbar .nav-link:hover::after,
#siteNavbar .nav-link.active::after{
  transform: scaleX(1);
}

/* Dropdown: cleaner item hover */
.dropdown-item{
  color: rgba(16, 24, 40, 0.92);
}
.dropdown-item:hover{
  background: rgba(16, 24, 40, 0.06);
}
.dropdown-item:active{
  background: rgba(16, 24, 40, 0.10);
}

/* Brochure button: premium look */
#siteNavbar .btn-outline-light{
  border-color: rgba(16, 24, 40, 0.18);
  color: rgba(16, 24, 40, 0.92);
  background: rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  padding: 8px 14px;
}
#siteNavbar .btn-outline-light:hover{
  background: rgba(255, 255, 255, 0.70);
  border-color: rgba(16, 24, 40, 0.22);
  color: rgba(16, 24, 40, 1);
}

/* Brand: slightly stronger */
#siteNavbar .navbar-brand{
  letter-spacing: 0.2px;
}

/* Add premium shadow on scroll */
#siteNavbar.is-scrolled{
  box-shadow: 0 14px 40px rgba(0,0,0,0.10);
  border-bottom-color: rgba(0,0,0,0.06);
}

/* =========================================================
   NAVBAR DROPDOWN FIX + PREMIUM DROPDOWN POLISH
========================================================= */

/* Ensure navbar + dropdowns appear above hero/carousel */
#siteNavbar{ z-index: 1055; }
#siteNavbar .dropdown-menu{ z-index: 1060; }

/* Slightly wider dropdown for premium feel */
#siteNavbar .dropdown-menu{
  min-width: 260px;
  margin-top: 10px;
}

/* Smooth dropdown animation (works when shown) */
#siteNavbar .dropdown-menu{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  display: block;              /* allow transition */
  visibility: hidden;
  pointer-events: none;
}

/* When Bootstrap shows dropdown */
#siteNavbar .dropdown-menu.show{
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

/* Desktop: open on hover (mobile remains click) */
@media (min-width: 992px){
  #siteNavbar .dropdown:hover > .dropdown-menu{
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
}

/* Optional: a little space between icon and text inside dropdown items */
#siteNavbar .dropdown-item{
  display: flex;
  gap: 10px;
  align-items: center;
}
/* =========================================================
   DROPDOWN HOVER UX FIX (EASY MOUSE MOVEMENT)
========================================================= */

/* Increase hover-safe area between nav item and dropdown */
.navbar .dropdown{
  position: relative;
}

.navbar .dropdown::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;          /* hover bridge */
  background: transparent;
}

/* Slightly lower dropdown so it overlaps hover bridge */
.navbar .dropdown-menu{
  margin-top: -4px;
}

/* Larger clickable items */
.dropdown-item{
  padding: 12px 18px;
}
#products .card-img-top {
  height: 220px;
  object-fit: cover;
}
:root{
  --brand: #06a3e9;
  --brandGlow: rgba(6,163,233,.55);
  --deep1: rgba(3, 22, 44, .92);
  --deep2: rgba(4, 52, 88, .80);
}

.video-section.premium-corp{
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.video-bg{
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
  filter: saturate(1.05) contrast(1.05) brightness(.92);
}

.premium-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 500px at 25% 25%, rgba(6,163,233,.28), transparent 60%),
    radial-gradient(800px 500px at 75% 20%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(135deg, var(--deep1), var(--deep2));
}

.glass-box{
  max-width: 860px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  border-radius: 22px;
  padding: 58px 48px;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    0 28px 70px rgba(0,0,0,.35),
    0 0 0 1px rgba(6,163,233,.10) inset;
  position: relative;
  z-index: 2;
}

.premium-title{
  letter-spacing: .6px;
  text-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.btn-brand{
  background: #ffffff;
  color: var(--brand);
  font-weight: 700;
  border-radius: 999px;
  border: none;
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

.btn-brand:hover{
  background: var(--brand);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 0 34px var(--brandGlow);
}

.reveal-up{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}

.reveal-up.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px){
  .video-section.premium-corp{
    min-height: 460px;
  }

  .glass-box{
    padding: 36px 22px;
  }

  .premium-title{
    font-size: 1.6rem;
  }
}
/* Moving dim light sweep */
.light-sweep{
  position: absolute;
  inset: -30%;
  z-index: 2; /* above overlay, below content */
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(6,163,233,.14) 45%,
    rgba(255,255,255,.10) 50%,
    rgba(6,163,233,.14) 55%,
    transparent 65%);
  transform: translateX(-35%) rotate(6deg);
  animation: sweep 7.5s ease-in-out infinite;
  pointer-events: none;
  opacity: .75;
}

@keyframes sweep{
  0%   { transform: translateX(-38%) rotate(6deg); opacity: .55; }
  50%  { transform: translateX(18%) rotate(6deg);  opacity: .85; }
  100% { transform: translateX(-38%) rotate(6deg); opacity: .55; }
}
:root{
  --brand: #06a3e9;
}

/* Strong Brand Blue Gradient Overlay */
.premium-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      135deg,
      rgba(6,163,233,0.90) 0%,
      rgba(6,163,233,0.75) 40%,
      rgba(4,90,150,0.85) 100%
    );
}

/* Moving Light Sweep (brand glow effect) */
.light-sweep{
  position: absolute;
  inset: -30%;
  z-index: 2;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255,255,255,.15) 48%,
    rgba(6,163,233,.35) 52%,
    transparent 65%
  );
  transform: translateX(-40%) rotate(6deg);
  animation: sweep 8s ease-in-out infinite;
  pointer-events: none;
  opacity: .6;
}

@keyframes sweep{
  0%   { transform: translateX(-45%) rotate(6deg); }
  50%  { transform: translateX(25%) rotate(6deg); }
  100% { transform: translateX(-45%) rotate(6deg); }
}
/* =============== INSIGHTFUL PREMIUM (Solutions + Products) =============== */
:root{
  --is-blue:  #06a3e9;
  --is-green: #6db123;
  --is-yellow:#fbb515;
  --is-red:   #ed4446;

  --ink: #0b1b2b;
  --muted: rgba(11,27,43,.65);
  --cardShadow: 0 18px 55px rgba(0,0,0,.10);
}

/* Section background + heading treatment */
.premium-section{
  position: relative;
  overflow: hidden;
}
.premium-section::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(6,163,233,.10), transparent 55%),
    radial-gradient(900px 420px at 80% 20%, rgba(109,177,35,.10), transparent 55%),
    radial-gradient(900px 420px at 60% 90%, rgba(251,181,21,.08), transparent 60%);
  pointer-events:none;
}
.premium-section > .container{ position:relative; z-index:1; }

.premium-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 18px;
}
/* White title ONLY inside video section */
#discover .premium-title{
  color: #ffffff;
}
/* Default title color for rest of site */
.premium-title{
  color: #0b1b2b;
}
.premium-title .accent-line{
  display:block;
  width: 88px;
  height: 4px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--is-blue), var(--is-green), var(--is-yellow));
  opacity: .95;
}
.premium-link{
  font-weight: 600;
  color: var(--is-blue);
  text-decoration: none;
  position: relative;
}
.premium-link:hover{ color: #058cc8; }
.premium-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:100%; height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--is-blue), transparent);
  transform: scaleX(.55);
  transform-origin:left;
  transition: transform .25s ease;
  opacity:.9;
}
.premium-link:hover::after{ transform: scaleX(1); }

/* Premium cards */
.premium-card{
  border: 0 !important;
  border-radius: 18px !important;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  box-shadow: var(--cardShadow);
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
}
.premium-card::before{
  content:"";
  position:absolute; left:0; top:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--accent, var(--is-blue)), rgba(255,255,255,0));
  opacity: .95;
  z-index: 2;
}
.premium-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 75px rgba(0,0,0,.14);
}
.premium-card .card-img-top{
  height: 190px;
  object-fit: cover;
  transform: scale(1);
  transition: transform .35s ease;
}
.premium-card:hover .card-img-top{ transform: scale(1.05); }

.premium-card .card-body{
  padding: 18px 18px 16px;
}
.premium-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: .82rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,43,.10);
  background: rgba(255,255,255,.75);
  color: var(--ink);
  margin-bottom: 10px;
}
.premium-pill .dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--accent, var(--is-blue));
  box-shadow: 0 0 0 6px rgba(6,163,233,.12);
}

.premium-card h5{ color: var(--ink); letter-spacing:.2px; }
.premium-card p{ color: var(--muted) !important; }

/* Make anchor cards feel clickable */
.premium-card-link{
  display:block;
  color: inherit;
  text-decoration:none;
}
.premium-card-link:focus-visible{
  outline: 3px solid rgba(6,163,233,.35);
  outline-offset: 4px;
  border-radius: 18px;
}

/* Small tweak for your existing bg-light on Solutions */
#solutions.bg-light{ background: #f6f9fc !important; }
/* ===== Premium Navbar (Frosted Glass) ===== */
:root{
  --brand: #06a3e9;
  --ink: #0b1b2b;
}

.navbar-glass{
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.35);
  transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
  padding: 14px 0;
}

.navbar-glass.nav-scrolled{
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 45px rgba(0,0,0,.10);
  padding: 10px 0;
}

.site-logo{
  height: 56px;
  width: auto;
  transition: transform .25s ease, filter .25s ease;
  filter: drop-shadow(0 4px 12px rgba(6,163,233,.25));
}

.navbar-glass.nav-scrolled .site-logo{
  height: 50px;
}

.navbar-brand:hover .site-logo{
  transform: scale(1.05);
  filter: drop-shadow(0 6px 16px rgba(6,163,233,.35));
}


/* Premium nav links */
.navbar-premium .nav-link{
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .2px;
  padding: .65rem .85rem;
  border-radius: 12px;
  position: relative;
  transition: color .2s ease, background .2s ease;
}

.navbar-premium .nav-link:hover{
  background: rgba(6,163,233,.08);
  color: #063b62;
}

/* Gradient underline on hover */
.navbar-premium .nav-link::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #06a3e9, rgba(6,163,233,0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
  opacity: .95;
}
.navbar-premium .nav-link:hover::after{
  transform: scaleX(1);
}

/* Dropdown menu: glass + modern */
.dropdown-glass{
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 22px 70px rgba(0,0,0,.14);
  margin-top: 10px;
}

.dropdown-glass .dropdown-item{
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--ink);
  transition: background .2s ease, transform .2s ease;
}

.dropdown-glass .dropdown-item:hover{
  background: rgba(6,163,233,.10);
  transform: translateX(2px);
}

/* Make icons look “stunning” */
.navbar i.bi{
  font-size: 1.05rem;
  color: #0a3557;
  opacity: .92;
}
.dropdown-glass i.bi{
  color: var(--brand);
  opacity: 1;
}

/* Premium Brochure Button */
.brochure-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  letter-spacing: .2px;
  border: 1px solid rgba(6,163,233,.22);
  background: linear-gradient(135deg, rgba(6,163,233,.12), rgba(255,255,255,.65));
  color: #063b62;
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.brochure-btn .icon-wrap{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(6,163,233,.18);
  border: 1px solid rgba(6,163,233,.18);
}

.brochure-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 55px rgba(0,0,0,.14);
  background: linear-gradient(135deg, rgba(6,163,233,.18), rgba(255,255,255,.78));
  color: #042a44;
}

/* Better focus for accessibility */
.navbar-premium .nav-link:focus-visible,
.brochure-btn:focus-visible,
.dropdown-glass .dropdown-item:focus-visible{
  outline: 3px solid rgba(6,163,233,.35);
  outline-offset: 3px;
}
/* ===== Active Glow Dot ===== */
.navbar-premium .nav-item{
  position: relative;
}

.navbar-premium .nav-link.active::before{
  content:"";
  position:absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #06a3e9;
  box-shadow:
    0 0 8px rgba(6,163,233,.8),
    0 0 16px rgba(6,163,233,.6),
    0 0 24px rgba(6,163,233,.4);
  animation: glowPulse 2s infinite ease-in-out;
}

@keyframes glowPulse{
  0%,100%{ transform: translateX(-50%) scale(1); }
  50%{ transform: translateX(-50%) scale(1.3); }
}
/* ===== Safe Premium Navbar (no dropdown issues) ===== */
:root{ --brand:#06a3e9; --ink:#0b1b2b; }

#siteNavbar{
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.35);
  transition: box-shadow .25s ease, background .25s ease, padding .25s ease;
  padding: 14px 0;
}

#siteNavbar.nav-scrolled{
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 45px rgba(0,0,0,.10);
  padding: 10px 0;
}

/* Logo bigger + crisp */
#siteNavbar .site-logo{
  height: 56px;
  width: auto;
  filter: drop-shadow(0 4px 12px rgba(6,163,233,.20));
}
#siteNavbar.nav-scrolled .site-logo{ height: 50px; }

/* Links premium */
#siteNavbar .nav-link{
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .2px;
  padding: .65rem .85rem;
  border-radius: 12px;
  position: relative;
  transition: background .2s ease, color .2s ease;
}
#siteNavbar .nav-link:hover{
  background: rgba(6,163,233,.08);
  color: #063b62;
}

/* Elegant underline */
#siteNavbar .nav-link::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
  opacity:.95;
}
#siteNavbar .nav-link:hover::after{ transform: scaleX(1); }

/* Active glow dot (safe) */
#siteNavbar .nav-link.active::before{
  content:"";
  position:absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow:
    0 0 8px rgba(6,163,233,.8),
    0 0 16px rgba(6,163,233,.5);
}

/* Dropdown premium (still Bootstrap default behavior) */
#siteNavbar .dropdown-menu{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 22px 70px rgba(0,0,0,.12);
}
#siteNavbar .dropdown-item{
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
}
#siteNavbar .dropdown-item:hover{
  background: rgba(6,163,233,.10);
}
#siteNavbar .btn-outline-light{
  border: 1px solid rgba(6,163,233,.25) !important;
  color: #063b62 !important;
  background: linear-gradient(135deg, rgba(6,163,233,.12), rgba(255,255,255,.60)) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  padding: 10px 14px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
}
#siteNavbar .btn-outline-light:hover{
  background: #06a3e9 !important;
  color: #fff !important;
  transform: translateY(-2px);
}
/* =====================================================
   PREMIUM PARTNERS (UNIQUE + DISTINCT STYLE)
===================================================== */

.premium-partners{
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  position: relative;
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Soft blue glow behind section */
.premium-partners::before{
  content:"";
  position:absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 400px;
  background: radial-gradient(circle,
      rgba(6,163,233,.12) 0%,
      rgba(6,163,233,.05) 40%,
      transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.premium-partners .container{
  position: relative;
  z-index: 1;
}

/* Title styling */
.premium-partners h2{
  font-weight: 800;
  letter-spacing: .4px;
  color: #0b1b2b;
}

.premium-partners p{
  font-size: 0.95rem;
}

/* Marquee */
.logos-marquee{
  position: relative;
  padding: 15px 0;
}

/* Smaller, more refined logos */
.logos-track{
  display: inline-flex;
  align-items: center;
  gap: 32px;
  width: max-content;
  animation: premiumScroll 38s linear infinite;
}

.direction-ltr{ animation-direction: reverse; }

.logos-marquee:hover .logos-track{
  animation-play-state: paused;
}

/* Unique premium logo card */
.logo-card{
  min-width: 150px;
  height: 80px;
  background: #ffffff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;

  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 8px 20px rgba(0,0,0,.05);

  transition: all .3s ease;
}

/* Smaller logos */
.logo-card img{
  max-height: 38px;
  width: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  opacity: .85;
  transition: all .3s ease;
}

/* Hover effect (subtle premium glow) */
.logo-card:hover{
  transform: translateY(-3px);
  box-shadow:
    0 12px 30px rgba(0,0,0,.08),
    0 0 0 1px rgba(6,163,233,.25),
    0 0 18px rgba(6,163,233,.20);
}

.logo-card:hover img{
  opacity: 1;
}

/* Animation */
@keyframes premiumScroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* Elegant side fade */
.logos-marquee::before,
.logos-marquee::after{
  content:"";
  position:absolute;
  top:0;
  width:90px;
  height:100%;
  z-index:2;
  pointer-events:none;
}

.logos-marquee::before{
  left:0;
  background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%);
}

.logos-marquee::after{
  right:0;
  background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%);
}
/* =========================================================
   SMART PREMIUM POLISH (Solutions + Products only)
   - Clear separation between sections
   - Premium icon chips (no emojis)
   - Premium hover / smart-tech vibe
========================================================= */

:root{
  --brand:#06a3e9;
  --ink:#0b1b2b;
}

/* ----- Section separation ----- */
#solutions.smart-premium-sep{
  background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%) !important;
  padding-top: 90px;
  padding-bottom: 90px;
  position: relative;
}
#products.smart-premium-sep{
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%) !important;
  padding-top: 90px;
  padding-bottom: 90px;
  position: relative;
}

/* top accent line */
#solutions.smart-premium-sep::before,
#products.smart-premium-sep::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  background: linear-gradient(90deg, rgba(6,163,233,0), rgba(6,163,233,.75), rgba(6,163,233,0));
  opacity: .9;
}

/* soft glow behind section */
#solutions.smart-premium-sep::after,
#products.smart-premium-sep::after{
  content:"";
  position:absolute;
  top:-140px;
  left:50%;
  transform: translateX(-50%);
  width: 980px;
  height: 420px;
  background: radial-gradient(circle, rgba(6,163,233,.08) 0%, transparent 70%);
  pointer-events:none;
  z-index: 0;
}
#solutions.smart-premium-sep .container,
#products.smart-premium-sep .container{
  position: relative;
  z-index: 1;
}

/* ----- Headings look premium ----- */
#solutions.smart-premium-sep .premium-title,
#products.smart-premium-sep .premium-title{
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .25px;
}

#solutions.smart-premium-sep .accent-line,
#products.smart-premium-sep .accent-line{
  display:block;
  width: 66px;
  height: 3px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--brand), rgba(6,163,233,0));
}

/* ----- Card polish (only these sections) ----- */
#solutions.smart-premium-sep .premium-card,
#products.smart-premium-sep .premium-card{
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, outline-color .28s ease;
}

#solutions.smart-premium-sep a:hover .premium-card,
#products.smart-premium-sep a:hover .premium-card{
  transform: translateY(-8px);
  box-shadow: 0 26px 78px rgba(0,0,0,.12);
  outline: 1px solid rgba(6,163,233,.25);
}

/* image polish + zoom */
#solutions.smart-premium-sep .premium-card .card-img-top,
#products.smart-premium-sep .premium-card .card-img-top{
  filter: saturate(1.05) contrast(1.05);
  transition: transform .4s ease;
}
#solutions.smart-premium-sep a:hover .premium-card .card-img-top,
#products.smart-premium-sep a:hover .premium-card .card-img-top{
  transform: scale(1.05);
}

/* subtitle tone */
#solutions.smart-premium-sep .card-text,
#products.smart-premium-sep .card-text{
  color: rgba(11,27,43,.68) !important;
}

/* ----- Premium Icon Chips (no emojis) ----- */
.smart-title{
  position: relative;
  padding-left: 46px;
  font-weight: 750;
  letter-spacing: .15px;
}

/* icon chip box */
.smart-title::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(6,163,233,.12);
  border: 1px solid rgba(6,163,233,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* icon glyph */
.smart-title::after{
  content:"";
  position:absolute;
  left: 9px;
  top:50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #06a3e9, #045a96);
  -webkit-mask: var(--mask) no-repeat center / contain;
          mask: var(--mask) no-repeat center / contain;
}

/* icon masks */
.smart-ic-home{ --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 3 10v11h7v-7h4v7h7V10z'/%3E%3C/svg%3E"); }
.smart-ic-hotel{ --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V3h14v18h-2v-2H6v2Zm2-4h10V5H6z'/%3E%3C/svg%3E"); }
.smart-ic-office{ --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 22V2h16v20h-2v-2H6v2Zm2-4h12V4H6z'/%3E%3C/svg%3E"); }
.smart-ic-restaurant{ --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v9H7V2Zm4 0h2v9h-2V2Zm4 0h2v9h-2V2ZM5 11h14v2H5v-2Zm5 4h4v7h-4v-7Z'/%3E%3C/svg%3E"); }

.smart-ic-audio{ --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10v4h4l5 4V6L8 10H4Zm13.5 2a3.5 3.5 0 0 0-2-3.16v6.32a3.5 3.5 0 0 0 2-3.16Z'/%3E%3C/svg%3E"); }
.smart-ic-automation{ --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E"); }
.smart-ic-security{ --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Z'/%3E%3C/svg%3E"); }
.smart-ic-wifi{ --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13a10 10 0 0 1 14 0l-2 2a7 7 0 0 0-10 0l-2-2Z'/%3E%3C/svg%3E"); }
.smart-ic-theatre{ --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v12H4z'/%3E%3C/svg%3E"); }
.smart-ic-keypad{ --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10v20H7z'/%3E%3C/svg%3E"); }
/* =========================================================
   Themeforest-like Title Style (Solutions + Products)
   - Left vertical mark + top bar
   - Two-tone heading
   - Uppercase subtitle
========================================================= */

:root{
  --brand:#06a3e9;
  --deep:#0b4fbf;  /* deep blue for bold word */
}

.is-titlebar{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 34px;
}

.is-titlebar__text{ flex: 1; min-width: 240px; }

.is-titlebar__mark{
  width: 2px;
  height: 62px;
  background: rgba(11,79,191,.55);
  position: relative;
  margin-right: 10px;
  flex: 0 0 auto;
}

/* small top bar (cross-like detail in screenshot) */
.is-titlebar__mark::before{
  content:"";
  position:absolute;
  left: -10px;
  top: 10px;
  width: 32px;
  height: 2px;
  background: rgba(11,79,191,.55);
}

/* Heading */
.is-titlebar__h{
  margin: 0;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(1.6rem, 2.2vw, 2.4rem);
}

/* Two-tone */
.is-titlebar__strong{
  color: var(--deep);
  font-weight: 800;
}
.is-titlebar__light{
  color: var(--brand);
  font-weight: 300;
}

/* Subtitle */
.is-titlebar__sub{
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(11,27,43,.72);
}

/* Right link styled premium */
.is-titlebar__link{
  text-decoration: none;
  font-weight: 700;
  color: rgba(11,27,43,.86);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(6,163,233,.08);
  border: 1px solid rgba(6,163,233,.18);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}

.is-titlebar__link:hover{
  transform: translateY(-2px);
  background: rgba(6,163,233,.12);
  box-shadow: 0 14px 35px rgba(0,0,0,.10);
}

/* Mobile stacking */
@media (max-width: 576px){
  .is-titlebar{
    align-items: flex-start;
    flex-direction: column;
  }
  .is-titlebar__link{
    align-self: flex-start;
  }
  .is-titlebar__mark{
    height: 54px;
  }
}
/* =========================================================
   HERO BOLD TECH (Themeforest-like)
========================================================= */
:root{
  --brand:#06a3e9;
  --hero-deep:#071a2e;
}

/* Hero sizing */
.hero-tech .hero-img{
  height: 78vh;
  min-height: 520px;
  object-fit: cover;
}

/* overlays */
.hero-tech .hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(135deg,
    rgba(7,26,46,.78) 0%,
    rgba(6,163,233,.20) 45%,
    rgba(7,26,46,.82) 100%);
  z-index: 1;
}

.hero-tech .hero-grid{
  position:absolute;
  inset:0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 70px 70px;
  opacity: .25;
  mask-image: radial-gradient(circle at 55% 40%, #000 0%, rgba(0,0,0,.7) 55%, transparent 75%);
}

.hero-tech .hero-sweep{
  position:absolute;
  inset:-35%;
  z-index: 3;
  background: linear-gradient(115deg,
    transparent 40%,
    rgba(255,255,255,.12) 48%,
    rgba(6,163,233,.35) 52%,
    transparent 62%);
  transform: translateX(-45%) rotate(6deg);
  animation: heroSweep 7.5s ease-in-out infinite;
  pointer-events:none;
  opacity:.6;
}

@keyframes heroSweep{
  0%   { transform: translateX(-45%) rotate(6deg); }
  50%  { transform: translateX(30%) rotate(6deg); }
  100% { transform: translateX(-45%) rotate(6deg); }
}

/* caption layout */
.hero-tech .hero-caption{
  z-index: 4;
  text-align: left;
  bottom: 18%;
  left: 8%;
  right: 8%;
  padding: 0;
}

.hero-tech .carousel-caption{ position: absolute; }

/* left accent mark like demo */
.hero-tech .hero-mark{
  width: 2px;
  height: 72px;
  background: rgba(6,163,233,.9);
  position: relative;
  margin-bottom: 16px;
  box-shadow: 0 0 22px rgba(6,163,233,.55);
}
.hero-tech .hero-mark::before{
  content:"";
  position:absolute;
  top: 10px;
  left: -12px;
  width: 34px;
  height: 2px;
  background: rgba(6,163,233,.9);
  box-shadow: 0 0 22px rgba(6,163,233,.55);
}

/* badge */
.hero-tech .hero-badge{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .9px;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  margin-bottom: 14px;
}

/* title */
.hero-tech .hero-title{
  font-size: clamp(2.1rem, 4.2vw, 3.8rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: .3px;
  margin-bottom: 12px;
  text-shadow: 0 26px 70px rgba(0,0,0,.55);
}
.hero-tech .hero-accent{
  color: var(--brand);
  font-weight: 300;
}

/* subtitle */
.hero-tech .hero-subtitle{
  max-width: 760px;
  font-size: 1.08rem;
  opacity: .92;
  margin-bottom: 16px;
}

/* rotating line */
.hero-tech .hero-rotate{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-bottom: 22px;
  font-weight: 700;
}
.hero-tech .hero-rotate__label{
  opacity: .85;
}
.hero-tech .hero-rotate__words{
  color: #fff;
  border-bottom: 2px solid rgba(6,163,233,.55);
  padding-bottom: 2px;
  min-height: 24px;
}

/* buttons */
.hero-tech .hero-buttons{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-tech .hero-btn{
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 800;
  letter-spacing: .2px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.hero-tech .hero-btn-primary{
  background: var(--brand);
  color: #fff;
  border: none;
  box-shadow: 0 22px 60px rgba(6,163,233,.35);
}
.hero-tech .hero-btn-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 28px 75px rgba(6,163,233,.45);
}

.hero-tech .hero-btn-ghost{
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
}
.hero-tech .hero-btn-ghost:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,.16);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* indicators / arrows premium */
.hero-tech .carousel-indicators [data-bs-target]{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  margin: 0 6px;
  background-color: rgba(255,255,255,.35);
}
.hero-tech .carousel-indicators .active{
  background-color: var(--brand);
  box-shadow: 0 0 18px rgba(6,163,233,.65);
}

.hero-tech .carousel-control-prev-icon,
.hero-tech .carousel-control-next-icon{
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.55));
}

/* simple reveal animation on active slide */
.hero-tech .carousel-item .hero-caption *{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.hero-tech .carousel-item.active .hero-caption *{
  opacity: 1;
  transform: translateY(0);
}
.hero-tech .carousel-item.active .hero-caption .hero-badge{ transition-delay: .08s; }
.hero-tech .carousel-item.active .hero-caption .hero-title{ transition-delay: .16s; }
.hero-tech .carousel-item.active .hero-caption .hero-subtitle{ transition-delay: .26s; }
.hero-tech .carousel-item.active .hero-caption .hero-rotate{ transition-delay: .34s; }
.hero-tech .carousel-item.active .hero-caption .hero-buttons{ transition-delay: .42s; }

/* responsive */
@media (max-width: 768px){
  .hero-tech .hero-img{ height: 62vh; min-height: 420px; }
  .hero-tech .hero-caption{ bottom: 10%; left: 6%; right: 6%; }
}
/* =========================================================
   PROCESS + PHONE + FAQ (Themeforest-like split section)
   BG: slider1.jpg | Phone: contact-phone.png
========================================================= */
:root{
  --brand:#06a3e9;
}

/* wrapper */
.is-process-request{
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  border-radius: 14px;
}

/* background image */
.is-process-request .is-pr-bg{
  position:absolute;
  inset:0;
  background: url("assets/images/slider/slider1.jpg") center/cover no-repeat;
  transform: scale(1.02);
  z-index:0;
}

/* overlay gradient */
.is-process-request .is-pr-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,
    rgba(10,120,120,.70) 0%,
    rgba(6,163,233,.55) 50%,
    rgba(7,26,46,.72) 100%);
  z-index:1;
}

/* content above */
.is-process-request .container{
  position: relative;
  z-index: 2;
}

/* glass panels */
.is-pr-panel{
  border-radius: 14px;
  padding: 34px 28px;
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 28px 80px rgba(0,0,0,.22);
}

/* title style */
.is-pr-title{ margin-bottom: 22px; }

.is-pr-mark{
  display:block;
  width:2px;
  height:60px;
  background: rgba(255,255,255,.82);
  position: relative;
  margin-bottom: 14px;
}

.is-pr-mark::before{
  content:"";
  position:absolute;
  top:10px;
  left:-12px;
  width:34px;
  height:2px;
  background: rgba(255,255,255,.82);
}

.is-pr-title h2{
  margin:0;
  font-size: clamp(1.7rem, 2.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: .2px;
  color:#fff;
}

.is-pr-title h2 span{
  color: rgba(255,255,255,.86);
  font-weight: 300;
}

.is-pr-sub{
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .9px;
  text-transform: uppercase;
  opacity: .85;
  color:#fff;
}

/* steps */
.is-pr-steps{
  display:flex;
  flex-direction: column;
  gap: 18px;
}

.is-pr-step{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}

.is-pr-num{
  width:34px;
  height:34px;
  border-radius: 50%;
  background: rgba(6,163,233,.95);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  flex: 0 0 auto;
  box-shadow: 0 0 0 6px rgba(6,163,233,.18);
}

.is-pr-step-title{
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 3px;
  color:#fff;
}

.is-pr-step-text{
  opacity: .92;
  font-size: .95rem;
  line-height: 1.45;
  color:#fff;
}

/* phone */
.is-pr-phone{
  max-height: 620px;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,.40));
  transform: translateY(-10px);
}

/* FAQ accordion premium */
.is-pr-accordion .is-pr-acc-item{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}

.is-pr-accordion .is-pr-acc-btn{
  background: transparent !important;
  color: #fff !important;
  font-weight: 800;
  letter-spacing: .15px;
  padding: 14px 16px;
}

.is-pr-accordion .accordion-button::after{
  filter: invert(1);
  opacity: .95;
}

.is-pr-accordion .is-pr-acc-body{
  background: rgba(0,0,0,.10);
  color: rgba(255,255,255,.92);
  padding: 14px 16px;
  line-height: 1.55;
}

/* remove default bootstrap accordion borders */
.is-pr-accordion .accordion-item{
  border: none;
}

/* responsive */
@media (max-width: 992px){
  .is-pr-phone{ max-height: 520px; transform:none; }
  .is-process-request{ padding: 70px 0; border-radius: 0; }
}
/* =====================================================
   GLOBAL PREMIUM ARROW ICON (Brand Consistent)
   Replaces Bootstrap + / chevrons everywhere
===================================================== */

:root{
  --brand:#06a3e9;
}

/* Remove default Bootstrap icons */
.accordion-button::after,
.dropdown-toggle::after{
  background-image: none !important;
  border: none !important;
  content: "";
}

/* Base arrow style */
.accordion-button,
.dropdown-toggle{
  position: relative;
}

/* Add custom arrow */
.accordion-button::before,
.dropdown-toggle::before{
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 3px solid var(--brand);
  border-bottom: 3px solid var(--brand);
  transform: translateY(-50%) rotate(-45deg);
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Rotate when open (accordion active) */
.accordion-button:not(.collapsed)::before{
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 12px rgba(6,163,233,.6);
}

/* Dropdown open rotation */
.dropdown.show .dropdown-toggle::before{
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 12px rgba(6,163,233,.6);
}

/* Hover glow effect */
.accordion-button:hover::before,
.dropdown-toggle:hover::before{
  box-shadow: 0 0 10px rgba(6,163,233,.5);
}

/* Prevent overlap with text */
.accordion-button,
.dropdown-toggle{
  padding-right: 40px !important;
}
/* =====================================================
   GLOBAL BRAND ARROW (WORKING)
   Replaces Bootstrap accordion + dropdown chevrons site-wide
===================================================== */
:root{ --brand:#06a3e9; }

/* ------------------ ACCORDION (Bootstrap) ------------------ */
/* Disable Bootstrap's default icons */
.accordion{
  --bs-accordion-btn-icon: none !important;
  --bs-accordion-btn-active-icon: none !important;
}

/* Ensure we have room for our arrow */
.accordion .accordion-button{
  padding-right: 3.2rem !important;
  position: relative;
}

/* Add our arrow using ::after (Bootstrap already uses ::after, so we replace it) */
.accordion .accordion-button::after{
  content:"" !important;
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;

  /* brand arrow shape */
  border-right: 3px solid var(--brand) !important;
  border-bottom: 3px solid var(--brand) !important;

  /* position */
  background: none !important;
  transform: rotate(-45deg) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;

  /* make it visible even on dark bg */
  opacity: 1 !important;
}

/* Rotate when open */
.accordion .accordion-button:not(.collapsed)::after{
  transform: rotate(45deg) !important;
  box-shadow: 0 0 12px rgba(6,163,233,.6) !important;
}

/* ------------------ DROPDOWNS (Bootstrap) ------------------ */
.dropdown-toggle{
  padding-right: 2.4rem !important;
  position: relative;
}

/* Replace Bootstrap caret (it uses ::after with borders) */
.dropdown-toggle::after{
  content:"" !important;
  display: inline-block !important;
  vertical-align: middle !important;

  width: 9px !important;
  height: 9px !important;

  border-right: 3px solid var(--brand) !important;
  border-bottom: 3px solid var(--brand) !important;

  /* remove Bootstrap caret triangle */
  border-left: 0 !important;
  border-top: 0 !important;

  margin-left: .6rem !important;
  transform: rotate(45deg) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

/* Rotate when dropdown is open */
.dropdown.show > .dropdown-toggle::after{
  transform: rotate(-135deg) !important;
  box-shadow: 0 0 12px rgba(6,163,233,.6) !important;
}
/* =========================================================
   GLOBAL BRAND ARROW ICONS (WORKING WITH YOUR HTML)
   - Dropdown caret (navbar)
   - Accordion icon (all accordions incl. prFaq + faqAccordion)
========================================================= */
:root { --brand: #06a3e9; }

/* -------------------- DROPDOWN CARET (Navbar) -------------------- */
/* Bootstrap makes a triangle with borders; we replace it */
#siteNavbar .dropdown-toggle::after{
  /* kill bootstrap triangle */
  border: 0 !important;
  margin-left: .6rem !important;

  /* draw brand arrow */
  content: "" !important;
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  background: none !important;

  border-right: 3px solid var(--brand) !important;
  border-bottom: 3px solid var(--brand) !important;
  transform: translateY(-1px) rotate(45deg) !important;

  transition: transform .22s ease, box-shadow .22s ease !important;
  opacity: 1 !important;
}

/* rotate on open dropdown (Bootstrap adds .show on parent li.dropdown) */
#siteNavbar .dropdown.show > .dropdown-toggle::after{
  transform: translateY(-1px) rotate(-135deg) !important;
  box-shadow: 0 0 12px rgba(6,163,233,.55) !important;
}

/* -------------------- ACCORDION ICON (All accordions) -------------------- */
/* Bootstrap uses vars for icon images — disable them */
.accordion{
  --bs-accordion-btn-icon: none !important;
  --bs-accordion-btn-active-icon: none !important;
}

/* Make sure the button has room for the icon */
.accordion .accordion-button{
  padding-right: 3.25rem !important;
  position: relative !important;
}

/* Replace the default ::after */
.accordion .accordion-button::after{
  content: "" !important;
  background-image: none !important;
  background: none !important;

  width: 12px !important;
  height: 12px !important;

  border-right: 3px solid var(--brand) !important;
  border-bottom: 3px solid var(--brand) !important;

  transform: rotate(-45deg) !important;
  opacity: 1 !important;

  transition: transform .22s ease, box-shadow .22s ease !important;
}

/* Open state */
.accordion .accordion-button:not(.collapsed)::after{
  transform: rotate(45deg) !important;
  box-shadow: 0 0 12px rgba(6,163,233,.55) !important;
}

/* Extra: if any older CSS hides icons */
.accordion .accordion-button::after{
  display: block !important;
}
/* =========================================================
   GLOBAL BRAND ARROW (WORKS WITH YOUR NAVBAR UNDERLINE)
   - Dropdown caret arrow (navbar)
   - Accordion arrow (FAQ)
   Brand color: #06a3e9
========================================================= */

:root{ --brand:#06a3e9; }

/* ---------------- NAVBAR DROPDOWN ARROW (FIX) ---------------- */
/* Your navbar already uses .nav-link::after for underline.
   So for dropdown links, we STOP using ::after underline and instead use background underline.
   Then we use ::after for the caret arrow. */

#siteNavbar .nav-link.dropdown-toggle{
  padding-right: 2.2rem; /* space for arrow */
  background-image: linear-gradient(90deg, var(--brand), transparent);
  background-repeat: no-repeat;
  background-position: 14px calc(100% - 8px);
  background-size: 0% 2px;
  transition: background-size .25s ease, background-color .2s ease, color .2s ease;
}

/* disable underline pseudo only on dropdown toggles */
#siteNavbar .nav-link.dropdown-toggle::after{
  /* we will draw the arrow here (so no underline here) */
  position: absolute;
  right: 12px;
  top: 50%;
  margin: 0 !important;

  content: "" !important;
  width: 10px;
  height: 10px;

  /* arrow shape */
  border-right: 3px solid var(--brand);
  border-bottom: 3px solid var(--brand);

  /* default direction */
  transform: translateY(-50%) rotate(45deg);
  background: none !important;

  transition: transform .22s ease, box-shadow .22s ease;
}

/* show underline on hover like your other links */
#siteNavbar .nav-link.dropdown-toggle:hover{
  background-size: calc(100% - 28px) 2px; /* similar underline width */
}

/* rotate arrow when dropdown open */
#siteNavbar .dropdown.show > .nav-link.dropdown-toggle::after{
  transform: translateY(-50%) rotate(-135deg);
  box-shadow: 0 0 12px rgba(6,163,233,.55);
}

/* ---------------- ACCORDION ARROW (GLOBAL) ---------------- */
/* Kill bootstrap default icon variables */
.accordion{
  --bs-accordion-btn-icon: none !important;
  --bs-accordion-btn-active-icon: none !important;
}

/* Replace accordion icon */
.accordion .accordion-button{
  padding-right: 3.25rem !important;
}

.accordion .accordion-button::after{
  content: "" !important;
  background: none !important;
  background-image: none !important;

  width: 12px !important;
  height: 12px !important;

  border-right: 3px solid var(--brand) !important;
  border-bottom: 3px solid var(--brand) !important;

  transform: rotate(-45deg) !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
  opacity: 1 !important;
  display: block !important;
}

/* open state */
.accordion .accordion-button:not(.collapsed)::after{
  transform: rotate(45deg) !important;
  box-shadow: 0 0 12px rgba(6,163,233,.55) !important;
}
:root{ --brand:#06a3e9; }

/* NAVBAR: use ::before (because your underline uses ::after) */
#siteNavbar .nav-link.dropdown-toggle{
  position: relative !important;
  padding-right: 2.4rem !important;
}
#siteNavbar .nav-link.dropdown-toggle::before{
  content:"" !important;
  position:absolute !important;
  right: 14px !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 3px solid var(--brand) !important;
  border-bottom: 3px solid var(--brand) !important;
  transform: translateY(-50%) rotate(45deg) !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
  pointer-events:none !important;
  opacity: 1 !important;
}
#siteNavbar .dropdown.show > .nav-link.dropdown-toggle::before{
  transform: translateY(-50%) rotate(-135deg) !important;
  box-shadow: 0 0 12px rgba(6,163,233,.55) !important;
}

/* ACCORDION: replace Bootstrap icon */
.accordion{
  --bs-accordion-btn-icon: none !important;
  --bs-accordion-btn-active-icon: none !important;
}
.accordion .accordion-button{
  padding-right: 3.2rem !important;
}
.accordion .accordion-button::after{
  content:"" !important;
  background: none !important;
  background-image: none !important;
  width: 12px !important;
  height: 12px !important;
  border-right: 3px solid var(--brand) !important;
  border-bottom: 3px solid var(--brand) !important;
  transform: rotate(-45deg) !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
  opacity: 1 !important;
  display: block !important;
}
.accordion .accordion-button:not(.collapsed)::after{
  transform: rotate(45deg) !important;
  box-shadow: 0 0 12px rgba(6,163,233,.55) !important;
}
:root{ --brand:#06a3e9; }

/* ================= NAVBAR DROPDOWN ARROW (uses ::before) ================= */
/* Your underline uses .nav-link::after, so we use ::before for the arrow */
#siteNavbar .nav-link.dropdown-toggle{
  padding-right: 2.4rem !important;
  position: relative !important;
}

#siteNavbar .nav-link.dropdown-toggle::before{
  content:"" !important;
  position:absolute !important;
  right: 14px !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 3px solid var(--brand) !important;
  border-bottom: 3px solid var(--brand) !important;
  transform: translateY(-50%) rotate(45deg) !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
  pointer-events:none !important;
  opacity: 1 !important;
}

/* rotate when dropdown open */
#siteNavbar .dropdown.show > .nav-link.dropdown-toggle::before{
  transform: translateY(-50%) rotate(-135deg) !important;
  box-shadow: 0 0 12px rgba(6,163,233,.55) !important;
}

/* ================= ACCORDION ARROW (ALL accordions site-wide) ================= */
.accordion{
  --bs-accordion-btn-icon: none !important;
  --bs-accordion-btn-active-icon: none !important;
}

.accordion .accordion-button{
  padding-right: 3.2rem !important;
}

.accordion .accordion-button::after{
  content:"" !important;
  background: none !important;
  background-image: none !important;
  width: 12px !important;
  height: 12px !important;
  border-right: 3px solid var(--brand) !important;
  border-bottom: 3px solid var(--brand) !important;
  transform: rotate(-45deg) !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
  opacity: 1 !important;
  display: block !important;
}

.accordion .accordion-button:not(.collapsed)::after{
  transform: rotate(45deg) !important;
  box-shadow: 0 0 12px rgba(6,163,233,.55) !important;
}
/* =========================================================
   GLOBAL BRAND ARROWS (ONE CONSOLIDATED BLOCK)
   - Accordion icon (Bootstrap 5.3.x SVG) -> brand arrow
   - Navbar dropdown caret -> brand arrow
   Brand: #06a3e9
========================================================= */

:root{ --brand:#06a3e9; }

/* ---------------- ACCORDION (ALL) ---------------- */
/* Bootstrap 5.3 uses an SVG via background-image var(). We must kill it. */
.accordion{
  --bs-accordion-btn-icon: none !important;
  --bs-accordion-btn-active-icon: none !important;
}

.accordion .accordion-button{
  padding-right: 3.2rem !important; /* room for arrow */
}

.accordion .accordion-button::after{
  /* remove bootstrap SVG icon */
  background-image: none !important;
  background: none !important;

  /* force our arrow */
  content: "" !important;
  width: 12px !important;
  height: 12px !important;

  border-right: 3px solid var(--brand) !important;
  border-bottom: 3px solid var(--brand) !important;

  transform: rotate(-45deg) !important;
  opacity: 1 !important;
  display: block !important;

  transition: transform .25s ease, box-shadow .25s ease !important;
}

.accordion .accordion-button:not(.collapsed)::after{
  transform: rotate(45deg) !important;
  box-shadow: 0 0 12px rgba(6,163,233,.55) !important;
}

/* ---------------- NAVBAR DROPDOWN (SITE NAVBAR) ---------------- */
/* Replace Bootstrap caret triangle with brand arrow */
#siteNavbar .dropdown-toggle{
  padding-right: 2.4rem !important; /* room for arrow */
  position: relative !important;
}

#siteNavbar .dropdown-toggle::after{
  /* kill caret triangle */
  border: none !important;

  /* draw arrow */
  content: "" !important;
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;

  border-right: 3px solid var(--brand) !important;
  border-bottom: 3px solid var(--brand) !important;

  transform: rotate(45deg) !important;
  margin-left: .6rem !important;

  transition: transform .25s ease, box-shadow .25s ease !important;
}

/* rotate when open (Bootstrap adds .show on parent .dropdown) */
#siteNavbar .dropdown.show > .dropdown-toggle::after{
  transform: rotate(-135deg) !important;
  box-shadow: 0 0 12px rgba(6,163,233,.55) !important;
}

/* optional subtle glow on hover */
#siteNavbar .dropdown-toggle:hover::after,
.accordion .accordion-button:hover::after{
  box-shadow: 0 0 10px rgba(6,163,233,.45) !important;
}
/* =========================================================
   FINAL GLOBAL BRAND ARROWS (ABSOLUTE OVERRIDE)
   Navbar + Accordion
   Brand Color: #06a3e9
========================================================= */

:root { --brand:#06a3e9; }

/* ================= NAVBAR DROPDOWN ================= */

/* Remove bootstrap caret triangle completely */
#siteNavbar .dropdown-toggle::after {
  display: none !important;
}

/* Add brand arrow using ::before instead */
#siteNavbar .dropdown-toggle {
  position: relative !important;
  padding-right: 28px !important;
}

#siteNavbar .dropdown-toggle::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 10px;
  height: 10px;

  border-right: 3px solid var(--brand);
  border-bottom: 3px solid var(--brand);

  transform: translateY(-50%) rotate(45deg);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Rotate when open */
#siteNavbar .dropdown.show > .dropdown-toggle::before {
  transform: translateY(-50%) rotate(-135deg);
  box-shadow: 0 0 12px rgba(6,163,233,.6);
}

/* ================= ACCORDION ================= */

/* Disable Bootstrap SVG icon completely */
.accordion-button::after {
  display: none !important;
}

/* Add brand arrow via ::before */
.accordion-button {
  position: relative !important;
  padding-right: 36px !important;
}

.accordion-button::before {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 12px;
  height: 12px;

  border-right: 3px solid var(--brand);
  border-bottom: 3px solid var(--brand);

  transform: translateY(-50%) rotate(-45deg);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Open state */
.accordion-button:not(.collapsed)::before {
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 12px rgba(6,163,233,.6);
}
/* =========================================================
   WORKFLOW + FAQ (Dynamic, Corporate, Multi-color Accents)
   ========================================================= */

.section-kicker{
  letter-spacing:.16em;
  font-size:.72rem;
  font-weight:700;
  color:#6b7280;
}

.workflow-modern{
  position:relative;
  background:
    radial-gradient(900px 280px at 15% 15%, rgba(46, 196, 182, .12), transparent 60%),
    radial-gradient(900px 300px at 85% 30%, rgba(255, 99, 132, .10), transparent 65%),
    radial-gradient(900px 260px at 55% 95%, rgba(255, 193, 7, .10), transparent 60%),
    #fff;
}

.wf-card{
  border:1px solid rgba(15, 23, 42, .10);
  border-radius:16px;
  padding:16px 14px;
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
  transition: transform .25s ease, box-shadow .25s ease;
  position:relative;
  overflow:hidden;
}

.wf-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .10);
}

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

.wf-step{
  font-weight:800;
  font-size:.92rem;
  color:#0f172a;
  background: rgba(15, 23, 42, .06);
  border:1px solid rgba(15, 23, 42, .10);
  padding:6px 10px;
  border-radius:999px;
}

.wf-dot{
  width:12px;height:12px;border-radius:999px;
  box-shadow: 0 0 0 6px rgba(0,0,0,.03);
}

/* Multi-color dots */
.wf-dot-1{ background:#2ec4b6; }
.wf-dot-2{ background:#3b82f6; }
.wf-dot-3{ background:#8b5cf6; }
.wf-dot-4{ background:#f59e0b; }
.wf-dot-5{ background:#ef4444; }
.wf-dot-6{ background:#10b981; }

.wf-title{
  font-weight:700;
  color:#0f172a;
}

.wf-text{
  font-size:.88rem;
  color:#475569;
  line-height:1.35rem;
}

.wf-line{
  position:absolute;
  left: 8%;
  right: 8%;
  top: 62%;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.18), transparent);
  pointer-events:none;
  opacity:.75;
}

/* FAQ modern */
.faq-modern{
  background:
    radial-gradient(800px 260px at 10% 20%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(700px 260px at 90% 15%, rgba(16,185,129,.10), transparent 60%),
    radial-gradient(800px 260px at 40% 100%, rgba(245,158,11,.10), transparent 60%),
    #f8fafc;
}

.faq-cta{
  border-radius:999px;
}

.faq-side{
  border-radius:18px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

.faq-badge{
  display:inline-block;
  font-weight:800;
  font-size:.75rem;
  padding:7px 12px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(59,130,246,.14), rgba(16,185,129,.14), rgba(245,158,11,.14));
  border:1px solid rgba(15,23,42,.10);
  color:#0f172a;
  margin-bottom:10px;
}

.faq-points{
  padding-left: 1.1rem;
  margin:0;
  color:#334155;
}
.faq-points li{
  margin: 8px 0;
}

/* Accordion premium look */
.faq-acc .accordion-item{
  border:0;
  background: transparent;
  margin-bottom:12px;
}

.faq-acc .accordion-button{
  border-radius:16px !important;
  padding:16px 18px;
  font-weight:700;
  color:#0f172a;
  background: rgba(255,255,255,.90);
  border:1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}

.faq-acc .accordion-button:focus{
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.12);
}

/* Nice accent bar on left */
.faq-acc .accordion-button{
  position:relative;
  overflow:hidden;
}
.faq-acc .accordion-button::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background: linear-gradient(180deg, #3b82f6, #10b981, #f59e0b);
}

/* Remove default bootstrap chevron color issues */
.faq-acc .accordion-button::after{
  opacity:.75;
}

.faq-acc .accordion-body{
  margin-top:10px;
  border-radius:16px;
  background: rgba(255,255,255,.85);
  border:1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
  color:#475569;
}
/* =========================================================
   PROCESS + FAQ — INSIGHTFUL BRAND MATCHED VERSION
   ========================================================= */

#process-faq.is-process-request{
  --brand-blue: #00AEEF;      /* logo blue */
  --brand-green: #7AC943;     /* logo green */
  --brand-orange: #F7931E;    /* logo orange */
  --brand-dark: #0c1b2a;

  position: relative;
  padding: 80px 0;
  overflow: hidden;
}

/* Background */
#process-faq .is-pr-bg{
  position:absolute;
  inset:0;
  background: url("assets/images/slider1.jpg") center/cover no-repeat;
  transform: scale(1.05);
  filter: contrast(1.05) saturate(1.1);
}

/* Corporate overlay */
#process-faq .is-pr-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 350px at 10% 20%, rgba(0,174,239,.25), transparent 60%),
    radial-gradient(900px 350px at 90% 20%, rgba(122,201,67,.22), transparent 60%),
    linear-gradient(180deg, rgba(8,20,40,.85), rgba(8,20,40,.70));
}

/* Panels */
#process-faq .is-pr-panel{
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.15);
  padding: 28px;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}

/* Top brand strip */
#process-faq .is-pr-panel::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:5px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-green), var(--brand-orange));
}

/* Titles */
#process-faq .is-pr-title h2 span{
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-green));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:900;
}

#process-faq .is-pr-sub{
  color: rgba(255,255,255,.75);
  font-size:.78rem;
  letter-spacing:.18em;
  font-weight:700;
}

/* Step cards */
#process-faq .is-pr-step{
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.15);
  transition: all .25s ease;
}

#process-faq .is-pr-step:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,.10);
}

/* Number badges */
#process-faq .is-pr-num{
  width:46px;
  height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#fff;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-green));
  box-shadow: 0 10px 25px rgba(0,174,239,.35);
}

/* FAQ Accordion */
#process-faq .is-pr-acc-btn{
  background: rgba(255,255,255,.07) !important;
  border-radius:16px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  font-weight:800;
  color:#fff !important;
  padding:16px !important;
}

#process-faq .is-pr-acc-btn::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background: linear-gradient(180deg, var(--brand-blue), var(--brand-green));
}

#process-faq .is-pr-acc-body{
  background: rgba(255,255,255,.06);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.85);
}

/* Phone image enhancement */
#process-faq .is-pr-phone{
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.45));
  transition: transform .3s ease;
}

#process-faq .is-pr-phone:hover{
  transform: translateY(-6px);
}
/* ================= FOOTER CONTACT FORM ================= */

.is-footer-form{
  margin-top: 10px;
}

.is-footer-input{
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 12px 14px;
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.is-footer-input::placeholder{
  color: rgba(255,255,255,.55);
}

.is-footer-input:focus{
  border-color: rgba(0,174,239,.6);
  box-shadow: 0 0 0 3px rgba(0,174,239,.2);
  background: rgba(255,255,255,.08);
}

.is-footer-btn{
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 900;
  letter-spacing: .02em;
  color: #081426;
  background: linear-gradient(90deg, var(--is-blue), var(--is-green), var(--is-orange));
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}

.is-footer-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
/* Footer tagline premium FX */
.is-tagline-fx{
  position: relative;
  display: inline-block;
  font-weight: 600;
  letter-spacing: .3px;
  line-height: 1.35;

  /* gradient text */
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(140,180,255,.95), rgba(255,255,255,.92));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  opacity: .95;
}

/* subtle glow */
.is-tagline-fx{
  text-shadow: 0 0 18px rgba(120,170,255,.22);
}

/* animated shine sweep */
.is-tagline-fx::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.55) 35%,
    transparent 70%
  );

  transform: translateX(-140%) skewX(-18deg);
  animation: isTaglineSweep 3.6s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: .55;
}

@keyframes isTaglineSweep{
  0%, 45% { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
  55% { opacity: .55; }
  100% { transform: translateX(140%) skewX(-18deg); opacity: 0; }
}
/* ===================== COOKIE CONSENT (Premium) ===================== */
.is-cookie{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;

  display: none;
  transform: translateY(14px);
  opacity: 0;
  transition: .35s ease;
}

.is-cookie.is-show{
  display: block;
  transform: translateY(0);
  opacity: 1;
}

.is-cookie-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 14px;
  border-radius: 18px;

  background: rgba(10, 14, 24, .72);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.is-cookie-title{
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
}

.is-cookie-desc{
  color: rgba(255,255,255,.72);
  font-size: .95rem;
  line-height: 1.35;
}

.is-cookie-link{
  color: rgba(140,180,255,.95);
  text-decoration: none;
}
.is-cookie-link:hover{ text-decoration: underline; }

.is-cookie-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.is-cookie-btn{
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 700;

  color: #0b1220;
  background: rgba(140,180,255,.95);
  box-shadow: 0 12px 30px rgba(140,180,255,.18);
  transition: .25s ease;
}
.is-cookie-btn:hover{ transform: translateY(-1px); }

.is-cookie-btn-ghost{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
}

/* Modal (dark glass) */
.is-cookie-modal{
  background: rgba(10, 14, 24, .92);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  border-radius: 18px;
}

.is-cookie-opt{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}

.is-cookie-pill{
  font-size: .85rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(140,180,255,.18);
  border: 1px solid rgba(140,180,255,.25);
  color: rgba(200,220,255,.95);
}

/* Switch */
.is-switch{
  position: relative;
  width: 52px;
  height: 30px;
  display: inline-block;
}
.is-switch input{ display:none; }

.is-slider{
  position:absolute; inset:0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  transition: .25s ease;
}
.is-slider:before{
  content:"";
  position:absolute;
  width: 22px; height: 22px;
  left: 4px; top: 50%;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  transition: .25s ease;
}

.is-switch input:checked + .is-slider{
  background: rgba(140,180,255,.35);
  border-color: rgba(140,180,255,.35);
}
.is-switch input:checked + .is-slider:before{
  left: 26px;
  background: rgba(140,180,255,.95);
}

/* Responsive */
@media (max-width: 700px){
  .is-cookie-inner{
    flex-direction: column;
    align-items: stretch;
  }
  .is-cookie-actions{
    justify-content: flex-start;
  }
}
/* =========================================================
   FIX: HERO CAROUSEL arrows + dots not clickable
   Reason: hero-overlay/hero-grid are above and blocking clicks
========================================================= */

/* Overlays must never capture clicks */
.hero-tech .hero-overlay,
.hero-tech .hero-grid,
.hero-tech .hero-sweep{
  pointer-events: none !important;
}

/* Make sure indicators are above everything */
.hero-tech .carousel-indicators{
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* Make sure arrows are above everything */
.hero-tech .carousel-control-prev,
.hero-tech .carousel-control-next{
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* Optional: if caption buttons ever feel unclickable */
.hero-tech .hero-caption{
  z-index: 9 !important;
  pointer-events: auto !important;
}
/* =========================================================
   HERO SLIDER – PREMIUM ACTIVE DOT WITH GRADIENT PULSE
========================================================= */

/* Base dot style */
.hero-tech .carousel-indicators button{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: none;
  margin: 0 6px;
  transition: all 0.3s ease;
  position: relative;
}

/* Active dot */
.hero-tech .carousel-indicators .active{
  background: linear-gradient(135deg, #8cb4ff, #5a8cff);
  box-shadow: 0 0 0 0 rgba(140,180,255,0.7);
  animation: heroDotPulse 2s infinite;
}

/* Smooth hover */
.hero-tech .carousel-indicators button:hover{
  background: rgba(255,255,255,0.7);
  transform: scale(1.1);
}

/* Pulse animation */
@keyframes heroDotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(140,180,255,0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(140,180,255,0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(140,180,255,0);
  }
}
/* ===================== PARTNERS (Premium / Futuristic) ===================== */
.premium-partners{
  background: radial-gradient(1200px 600px at 15% 20%, rgba(140,180,255,.12), transparent 55%),
              radial-gradient(900px 520px at 90% 30%, rgba(120,200,255,.08), transparent 55%),
              linear-gradient(180deg, rgba(9,12,20,.35), rgba(9,12,20,.15));
  overflow: hidden;
}

.pp-bg-glow{
  position:absolute; inset:-40% -10% auto -10%;
  height: 520px;
  background: radial-gradient(circle at 25% 35%, rgba(140,180,255,.18), transparent 60%);
  filter: blur(10px);
  pointer-events:none;
}

.pp-bg-grid{
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .08;
  mask-image: radial-gradient(circle at 50% 40%, rgba(0,0,0,1), transparent 70%);
  pointer-events:none;
}

.pp-kicker{
  display:inline-block;
  font-weight: 700;
  letter-spacing: .18em;
  font-size: .78rem;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(200,220,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 10px;
}

.pp-title{
  color: rgba(255,255,255,.95);
  text-shadow: 0 0 18px rgba(140,180,255,.12);
}

.pp-sub{ color: rgba(255,255,255,.65) !important; }

.pp-marquee{
  position: relative;
  padding: 12px 0;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.pp-fade{
  position:absolute; top:0; bottom:0;
  width: 90px;
  z-index: 3;
  pointer-events:none;
}
.pp-fade-left{
  left:0;
  background: linear-gradient(90deg, rgba(9,12,20,.92), rgba(9,12,20,0));
}
.pp-fade-right{
  right:0;
  background: linear-gradient(270deg, rgba(9,12,20,.92), rgba(9,12,20,0));
}

/* Logo card premium */
.pp-logo{
  width: 160px;
  height: 86px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  margin: 0 10px;
  position: relative;
  overflow: hidden;
}

/* subtle shine */
.pp-logo::before{
  content:"";
  position:absolute; inset:-40% -60%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.16), transparent 65%);
  transform: translateX(-40%) rotate(8deg);
  opacity: 0;
  transition: opacity .25s ease, transform .6s ease;
}

.pp-logo img{
  max-width: 78%;
  max-height: 52px;
  filter: grayscale(100%) brightness(1.25);
  opacity: .92;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}

.pp-logo:hover{
  transform: translateY(-3px);
  border-color: rgba(140,180,255,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(140,180,255,.14) inset;
}
.pp-logo:hover::before{
  opacity: 1;
  transform: translateX(35%) rotate(8deg);
}
.pp-logo:hover img{
  filter: none;
  opacity: 1;
  transform: scale(1.03);
}

/* Keep your existing marquee animation classes working */
.logos-track{ will-change: transform; }

/* Mobile tweaks */
@media (max-width: 576px){
  .pp-logo{ width: 140px; height: 78px; margin: 0 8px; }
  .pp-logo img{ max-height: 46px; }
  .pp-fade{ width: 60px; }
}
/* =========================================================
   PARTNERS – Fix small/blurred logos
========================================================= */

/* Let logos occupy more space inside the card */
#partners .pp-logo{
  padding: 10px 14px;        /* was too roomy, made logos look small */
}

/* Make image render sharper + fill card better */
#partners .pp-logo img{
  width: 100%;
  height: 100%;
  max-width: 92%;            /* bigger than 78% */
  max-height: 66px;          /* bigger than 52px */
  object-fit: contain;
  object-position: center;

  /* crisp rendering hints */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;

  /* Remove filters that can make low-res look worse */
  filter: none;
  opacity: 1;
  transform: none;
}

/* Keep hover premium but avoid scaling that exposes blur */
#partners .pp-logo:hover img{
  transform: none;           /* remove zoom */
}

/* Optional: keep a soft uniform tone without harming clarity */
#partners .pp-logo{
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Mobile */
@media (max-width: 576px){
  #partners .pp-logo img{
    max-height: 56px;
  }
}
/* =========================
   MOBILE MENU SPACING FIX
========================= */
@media (max-width: 991.98px) {

  /* If you are using Bootstrap Offcanvas */
  .offcanvas-body{
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important; /* IMPORTANT */
    gap: 10px;
    padding: 14px 14px 18px;
  }

  /* If you are using navbar-collapse instead of offcanvas */
  .navbar-collapse{
    justify-content: flex-start !important;
  }

  /* Tighten nav links */
  .offcanvas-body .nav,
  .navbar-collapse .nav{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .offcanvas-body .nav-link,
  .navbar-collapse .nav-link{
    padding: 12px 14px;
    margin: 0 !important;
    line-height: 1.2;
  }

  /* Dropdown toggle row (icon + arrow) */
  .offcanvas-body .dropdown-toggle,
  .navbar-collapse .dropdown-toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* IMPORTANT: kill "push to bottom" spacers if any */
  .offcanvas-body .mt-auto,
  .navbar-collapse .mt-auto{
    margin-top: 0 !important;
  }

  /* If you added a manual spacer div, hide it on mobile */
  .menu-spacer{ display:none !important; }
}
/* =========================
   HERO / CAROUSEL MOBILE FIT
========================= */
@media (max-width: 575.98px){

  /* Give hero enough height */
  #hero .carousel-item{
    min-height: 72vh;
  }

  /* Make sure caption has top room under fixed navbar */
  #hero .hero-overlay,
  #hero .carousel-caption{
    padding-top: calc(var(--nav-h, 72px) + 14px) !important;
    padding-bottom: 22px !important;
  }

  /* Scale text down so it fits */
  #hero .hero-title,
  #hero h1{
    font-size: 1.55rem !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
  }

  #hero .hero-subtitle,
  #hero p{
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
    margin-bottom: 14px !important;
  }

  /* Buttons fit better */
  #hero .btn{
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
  }

  /* Dots a bit lower */
  #hero .carousel-indicators{
    bottom: 10px !important;
  }
}
/* ==============================
   MOBILE NAV (Collapse) FIX
================================ */
@media (max-width: 991.98px){

  /* The collapse panel itself */
  #navMain.navbar-collapse{
    padding: 12px 12px 16px;
  }

  /* Your UL */
  #navMain .navbar-premium{
    /* IMPORTANT: stop "space-between" / full-height layouts */
    display: flex;
    flex-direction: column;
    align-items: stretch !important;

    height: auto !important;
    min-height: 0 !important;

    justify-content: flex-start !important;
    gap: 10px !important;

    padding: 10px 8px;
    margin-top: 10px;
    border-radius: 18px;

    /* optional: subtle glass block so links look grouped */
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  /* Each item/link */
  #navMain .nav-item{ margin: 0 !important; }

  #navMain .nav-link{
    padding: 12px 14px !important;
    border-radius: 14px;
    margin: 0 !important;
    line-height: 1.2;
  }

  /* Brochure button should NOT push down / float */
  #navMain .nav-item.ms-lg-3{ margin-left: 0 !important; }
  #navMain .brochure-btn{ width: 100%; justify-content: center; }

  /* Dropdowns: make them behave like an accordion list on mobile */
  #navMain .dropdown-menu{
    position: static !important;
    transform: none !important;
    float: none !important;

    width: 100%;
    margin: 6px 0 0;
    padding: 8px;
    border-radius: 14px;

    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  #navMain .dropdown-item{
    padding: 10px 12px;
    border-radius: 12px;
    white-space: normal;
  }

  /* Keep dropdown toggle arrow aligned */
  #navMain .dropdown-toggle{
    display:flex;
    align-items:center;
    justify-content: space-between;
  }
}
/* ==============================
   HERO MOBILE VISIBILITY FIX
================================ */

/* Push hero below fixed navbar */
#hero{
  padding-top: var(--nav-h, 72px);
}

/* Make images behave nicely */
#hero .hero-img{
  height: calc(100vh - var(--nav-h, 72px));
  object-fit: cover;
}

/* Caption layout */
#hero .hero-caption{
  text-align: left;
  left: 6%;
  right: 6%;
  bottom: 10%;
  top: auto;
  transform: none !important; /* important if you used translateY */
}

/* Mobile tuning */
@media (max-width: 575.98px){

  #hero .hero-img{
    height: calc(82vh - var(--nav-h, 72px));
  }

  #hero .hero-caption{
    bottom: 12%;
    left: 5%;
    right: 5%;
    padding: 0 !important;
  }

  #hero .hero-badge{
    font-size: .72rem;
    letter-spacing: .08em;
    margin-bottom: 8px;
  }

  #hero .hero-title{
    font-size: 1.55rem !important;
    line-height: 1.12 !important;
    margin-bottom: 10px !important;
  }

  #hero .hero-subtitle{
    font-size: .98rem !important;
    line-height: 1.35 !important;
    margin-bottom: 14px !important;
  }

  #hero .hero-buttons{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #hero .hero-btn{
    width: 100%;
    padding: 11px 14px;
    font-size: .95rem;
  }

  /* keep indicators visible */
  #hero .carousel-indicators{
    bottom: 8px;
  }
}
/* =========================================
   HARD OVERRIDE: MOBILE NAV GAP + ALIGNMENT
   (Put this at END of your CSS)
========================================= */
@media (max-width: 991.98px){

  /* collapse container must NOT be full-height flex */
  nav#siteNavbar #navMain.navbar-collapse{
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 90px) !important; /* scroll if long */
    overflow: auto !important;
    padding: 12px 12px 16px !important;
  }

  /* UL must be a normal stacked list (no space-between) */
  nav#siteNavbar #navMain ul.navbar-nav.navbar-premium{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;

    height: auto !important;
    min-height: 0 !important;

    gap: 10px !important;
    margin: 10px 0 0 !important;
    padding: 12px !important;

    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 18px !important;

    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  /* IMPORTANT: stop any flex-grow pushing items apart */
  nav#siteNavbar #navMain .nav-item{
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* Fix icon + text spacing (your screenshot shows text pushed right) */
  nav#siteNavbar #navMain .nav-link{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;  /* NOT space-between */
    gap: 10px !important;

    width: 100% !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    border-radius: 14px !important;
  }

  /* Make bootstrap dropdown caret go to far right nicely */
  nav#siteNavbar #navMain .dropdown-toggle::after{
    margin-left: auto !important;
  }

  /* Dropdown menu as inline block under item on mobile */
  nav#siteNavbar #navMain .dropdown-menu{
    position: static !important;
    transform: none !important;
    float: none !important;

    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 8px !important;
    border-radius: 14px !important;

    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.18) !important;

    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  nav#siteNavbar #navMain .dropdown-item{
    padding: 10px 12px !important;
    border-radius: 12px !important;
    white-space: normal !important;
  }

  /* Brochure button should not create weird spacing */
  nav#siteNavbar #navMain .nav-item.ms-lg-3{
    margin-left: 0 !important;
  }
  nav#siteNavbar #navMain .brochure-btn{
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ===================================================================
   PATCH (2026-02-26) — MOBILE NAV FIX + HERO NO WHITE GAP
   - Fixes: menu showing by itself, hamburger not toggling, huge gaps
   - Keep this block at the VERY END of style.css
=================================================================== */

/* ---------- NAVBAR toggler: premium + no bold outline ---------- */
#siteNavbar .navbar-toggler{
  border: 0 !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.14) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18) !important;
}
#siteNavbar .navbar-toggler:focus,
#siteNavbar .navbar-toggler:active{
  outline: none !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18) !important; /* no thick focus ring */
}
/* Make the default BS icon look thinner/cleaner */
#siteNavbar .navbar-toggler-icon{
  opacity: .9;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35));
}

/* ---------- MOBILE COLLAPSE: never show until toggled ---------- */
@media (max-width: 991.98px){

  /* 1) Collapse must be hidden by default (overrides any earlier display:block rules) */
  nav#siteNavbar #navMain.collapse{ display: none !important; }
  nav#siteNavbar #navMain.collapse.show{ display: block !important; }

  /* 2) Make the panel look premium + stop huge vertical gaps */
  nav#siteNavbar #navMain.navbar-collapse{
    padding: 12px 12px 16px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - var(--nav-h, 72px) - 14px) !important;
    overflow: auto !important;
  }

  /* 3) UL must be a normal stacked list (NO space-between, NO full-height) */
  nav#siteNavbar #navMain ul.navbar-nav.navbar-premium{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;

    gap: 10px !important;
    margin: 10px 0 0 !important;
    padding: 12px !important;

    height: auto !important;
    min-height: 0 !important;

    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  /* 4) Links: icon + text together (fixes the weird left/right spacing) */
  nav#siteNavbar #navMain .nav-link{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    width: 100% !important;
    padding: 12px 14px !important;
    margin: 0 !important;

    border-radius: 14px !important;
    line-height: 1.2 !important;
  }

  /* 5) Dropdown toggle: caret to far-right without separating icon/text */
  nav#siteNavbar #navMain .dropdown-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }
  nav#siteNavbar #navMain .dropdown-toggle::after{
    margin-left: auto !important;
  }

  /* 6) Dropdown menus should NOT appear unless opened */
  nav#siteNavbar #navMain .dropdown-menu{ display: none !important; }
  nav#siteNavbar #navMain .dropdown-menu.show{ display: block !important; }

  /* 7) Mobile accordion feel */
  nav#siteNavbar #navMain .dropdown-menu{
    position: static !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;

    margin: 6px 0 0 !important;
    padding: 8px !important;
    border-radius: 14px !important;

    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  /* Brochure button full width */
  nav#siteNavbar #navMain .nav-item.ms-lg-3{ margin-left: 0 !important; }
  nav#siteNavbar #navMain .brochure-btn{ width: 100% !important; justify-content: center !important; }
}

/* ---------- HERO: remove the white gap above slider (all screens) ---------- */
/* The image can sit behind the fixed navbar; we only offset the TEXT safely */
#hero{ padding-top: 0 !important; }

/* Make slide fill viewport and keep caption centered */
#hero.hero-tech .carousel-item{
  position: relative;
  height: 100vh !important;
  min-height: 560px;
}
#hero.hero-tech .hero-img{
  height: 100% !important;
  object-fit: cover;
}

/* Vertically center caption, but push it below navbar height */
#hero.hero-tech .hero-caption{
  inset: 0 !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;

  padding-top: calc(var(--nav-h, 72px) + 12px) !important;
  padding-bottom: 54px !important;

  transform: none !important;
  text-align: left;
}

/* Mobile fine-tune */
@media (max-width: 575.98px){
  #hero.hero-tech .carousel-item{
    min-height: calc(100vh - 0px) !important;
  }
  #hero.hero-tech .hero-caption{
    padding-top: calc(var(--nav-h, 72px) + 10px) !important;
    padding-bottom: 48px !important;
    left: 0 !important;
    right: 0 !important;
  }
}
/* =========================================
   HERO MOBILE SIDE SPACING FIX
   (Paste at very end of style.css)
========================================= */
@media (max-width: 575.98px){

  /* Give slider text breathing space from left/right */
  #hero.hero-tech .hero-caption{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Prevent content from touching edges */
  #hero.hero-tech .hero-title,
  #hero.hero-tech .hero-subtitle,
  #hero.hero-tech .hero-badge,
  #hero.hero-tech .hero-buttons{
    max-width: 92%;
  }

}
/* =========================================
   DESKTOP HERO RESET (undo mobile full-width rules)
========================================= */
@media (min-width: 992px){

  /* Keep slide full height but NOT forcing caption full inset */
  #hero.hero-tech .carousel-item{
    min-height: 640px;
  }

  /* Restore desktop caption positioning */
  #hero.hero-tech .hero-caption{
    inset: auto !important;           /* cancels inset:0 */
    top: 50% !important;
    bottom: auto !important;

    left: 6% !important;
    right: auto !important;

    width: min(620px, 44vw) !important; /* prevents huge stretch */
    padding: 0 !important;

    display: block !important;         /* cancels flex-centering */
    transform: translateY(-50%) !important;
    text-align: left !important;
  }

  /* Stop badge from becoming a full-width bar */
  #hero.hero-tech .hero-badge{
    display: inline-flex !important;
    max-width: 100% !important;
    white-space: nowrap;
  }
}
/* =========================================
   PREMIUM SECTION BADGE (TRUSTED PARTNERS)
========================================= */

.section-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 18px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: #00AEEF; /* brand blue */
  
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0.08)
  );

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

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow:
    0 6px 20px rgba(0,174,239,.15),
    inset 0 1px 0 rgba(255,255,255,.5);

  transition: all .3s ease;
}

/* Optional subtle glow hover */
.section-badge:hover{
  transform: translateY(-2px);
  box-shadow:
    0 12px 30px rgba(0,174,239,.25),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* Subtitle styling upgrade */
.section-subtitle{
  font-size: 15px;
  color: rgba(255,255,255,.85);
  margin-top: 8px;
  letter-spacing: .02em;
}
/* Footer social row */
.is-footer-social{
  display:flex;
  gap:10px;
}

/* Social buttons (THIS is what you’re missing) */
.is-social-btn{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.30);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.is-social-btn i{
  color: rgba(255,255,255,.90);
  font-size: 16px;
}
.is-social-btn:hover{
  transform: translateY(-4px);
  border-color: rgba(0,174,239,.35);
  box-shadow: 0 24px 60px rgba(0,0,0,.40);
}
.is-social-btn:hover i{
  background: linear-gradient(90deg, var(--is-blue), var(--is-green), var(--is-orange));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* Bottom bar divider (also adds premium finish) */
.is-footer-bottom{
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
/* =========================
   Footer links polish
   ========================= */

/* Quick links list: remove bullets + better spacing */
.is-footer-links{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.is-footer-links li{
  margin: 8px 0;
}
.is-footer-links a{
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color .2s ease, transform .2s ease;
}
.is-footer-links a::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--is-blue), var(--is-green), var(--is-orange));
  opacity: .9;
}
.is-footer-links a:hover{
  color: rgba(255,255,255,.95);
  transform: translateX(3px);
}

/* Bottom right links: spacing + premium hover */
.is-footer-bottom-links{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.is-footer-bottom-links a{
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-weight: 800;
  transition: color .2s ease;
}
.is-footer-bottom-links a:hover{
  color: rgba(255,255,255,.95);
}
.is-footer-bottom-links .sep{
  color: rgba(255,255,255,.35);
  font-weight: 700;
}

/* Mobile: center bottom links */
@media (max-width: 576px){
  .is-footer-bottom{
    justify-content: center;
    text-align: center;
  }
  .is-footer-bottom-links{
    justify-content: center;
  }
}
/* =========================================================
   FOOTER — Premium Futuristic (same as index.html)
   ========================================================= */
.is-footer{
  --is-blue:#00AEEF;
  --is-green:#7AC943;
  --is-orange:#F7931E;
  --is-ink:#081426;

  position: relative;
  overflow:hidden;
  background:
    radial-gradient(900px 320px at 10% 30%, rgba(0,174,239,.14), transparent 60%),
    radial-gradient(900px 320px at 90% 20%, rgba(122,201,67,.12), transparent 60%),
    radial-gradient(900px 320px at 50% 110%, rgba(247,147,30,.12), transparent 60%),
    linear-gradient(180deg, #050b14, #040a12);
  color: rgba(255,255,255,.86);
  padding: 64px 0 18px;
}

/* Glow strip at top */
.is-footer-glow{
  position:absolute;
  left:0; right:0; top:0;
  height: 4px;
  background: linear-gradient(90deg, var(--is-blue), var(--is-green), var(--is-orange));
  opacity:.95;
}

/* Logo */
.is-footer-logo{
  max-width: 210px;
  height: auto;
  display:block;
  margin-bottom: 10px;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.45));
}

.is-footer-tagline{
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
}

/* Titles */
.is-footer-title{
  font-weight: 950;
  color:#fff;
  margin-bottom: 14px;
  letter-spacing: -.01em;
}

/* Contact lines */
.is-footer-contact{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 8px;
}

.is-footer-line{
  display:flex;
  gap:10px;
  align-items:flex-start;
  line-height: 1.45rem;
  color: rgba(255,255,255,.80);
}

.is-footer-line a{
  color: rgba(255,255,255,.88);
  text-decoration: none;
}
.is-footer-line a:hover{
  color: #fff;
  text-decoration: underline;
}

.is-footer-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.is-footer-ico i{
  background: linear-gradient(90deg, var(--is-blue), var(--is-green), var(--is-orange));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* Links */
.is-footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.is-footer-links a{
  color: rgba(255,255,255,.80);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
}

.is-footer-links a::before{
  content:"";
  width: 10px;
  height: 10px;
  border-right: 3px solid rgba(255,255,255,.60);
  border-bottom: 3px solid rgba(255,255,255,.60);
  transform: rotate(-45deg);
  border-radius: 1px;
  opacity: .9;
}

.is-footer-links a:hover{
  color:#fff;
}
.is-footer-links a:hover::before{
  border-right-color: var(--is-orange);
  border-bottom-color: var(--is-orange);
}

/* Social */
.is-footer-muted{
  color: rgba(255,255,255,.70);
}

.is-footer-social{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.is-social-btn{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.30);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.is-social-btn i{
  color: rgba(255,255,255,.90);
  font-size: 16px;
}
.is-social-btn:hover{
  transform: translateY(-4px);
  border-color: rgba(0,174,239,.35);
  box-shadow: 0 24px 60px rgba(0,0,0,.40);
}
.is-social-btn:hover i{
  background: linear-gradient(90deg, var(--is-blue), var(--is-green), var(--is-orange));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* Mini line */
.is-footer-mini{
  margin-top: 10px;
  font-weight: 900;
  font-size: .86rem;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 10px 12px;
}

/* Bottom bar */
.is-footer-bottom{
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}

.is-footer-copy{
  color: rgba(255,255,255,.72);
  font-weight: 800;
}

.is-footer-bottom-links{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.60);
  font-weight: 800;
}
.is-footer-bottom-links a{
  color: rgba(255,255,255,.75);
  text-decoration:none;
}
.is-footer-bottom-links a:hover{
  color:#fff;
  text-decoration: underline;
}
.is-footer-bottom-links .sep{
  opacity:.55;
}

/* Mobile */
@media (max-width: 575.98px){
  .is-footer{
    padding: 54px 0 16px;
  }
  .is-footer-logo{
    max-width: 190px;
  }
}
/* =========================================================
   FOOTER — Premium Futuristic (same as index.html)
   ========================================================= */
.is-footer{
  --is-blue:#00AEEF;
  --is-green:#7AC943;
  --is-orange:#F7931E;
  --is-ink:#081426;

  position: relative;
  overflow:hidden;
  background:
    radial-gradient(900px 320px at 10% 30%, rgba(0,174,239,.14), transparent 60%),
    radial-gradient(900px 320px at 90% 20%, rgba(122,201,67,.12), transparent 60%),
    radial-gradient(900px 320px at 50% 110%, rgba(247,147,30,.12), transparent 60%),
    linear-gradient(180deg, #050b14, #040a12);
  color: rgba(255,255,255,.86);
  padding: 64px 0 18px;
}

/* Glow strip at top */
.is-footer-glow{
  position:absolute;
  left:0; right:0; top:0;
  height: 4px;
  background: linear-gradient(90deg, var(--is-blue), var(--is-green), var(--is-orange));
  opacity:.95;
}

/* Logo */
.is-footer-logo{
  max-width: 210px;
  height: auto;
  display:block;
  margin-bottom: 10px;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.45));
}

.is-footer-tagline{
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
}

/* Titles */
.is-footer-title{
  font-weight: 950;
  color:#fff;
  margin-bottom: 14px;
  letter-spacing: -.01em;
}

/* Contact lines */
.is-footer-contact{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 8px;
}

.is-footer-line{
  display:flex;
  gap:10px;
  align-items:flex-start;
  line-height: 1.45rem;
  color: rgba(255,255,255,.80);
}

.is-footer-line a{
  color: rgba(255,255,255,.88);
  text-decoration: none;
}
.is-footer-line a:hover{
  color: #fff;
  text-decoration: underline;
}

.is-footer-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.is-footer-ico i{
  background: linear-gradient(90deg, var(--is-blue), var(--is-green), var(--is-orange));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* Links */
.is-footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.is-footer-links a{
  color: rgba(255,255,255,.80);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
}

.is-footer-links a::before{
  content:"";
  width: 10px;
  height: 10px;
  border-right: 3px solid rgba(255,255,255,.60);
  border-bottom: 3px solid rgba(255,255,255,.60);
  transform: rotate(-45deg);
  border-radius: 1px;
  opacity: .9;
}

.is-footer-links a:hover{
  color:#fff;
}
.is-footer-links a:hover::before{
  border-right-color: var(--is-orange);
  border-bottom-color: var(--is-orange);
}

/* Social */
.is-footer-muted{
  color: rgba(255,255,255,.70);
}

.is-footer-social{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.is-social-btn{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.30);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.is-social-btn i{
  color: rgba(255,255,255,.90);
  font-size: 16px;
}
.is-social-btn:hover{
  transform: translateY(-4px);
  border-color: rgba(0,174,239,.35);
  box-shadow: 0 24px 60px rgba(0,0,0,.40);
}
.is-social-btn:hover i{
  background: linear-gradient(90deg, var(--is-blue), var(--is-green), var(--is-orange));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* Mini line */
.is-footer-mini{
  margin-top: 10px;
  font-weight: 900;
  font-size: .86rem;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 10px 12px;
}

/* Bottom bar */
.is-footer-bottom{
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}

.is-footer-copy{
  color: rgba(255,255,255,.72);
  font-weight: 800;
}

.is-footer-bottom-links{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.60);
  font-weight: 800;
}
.is-footer-bottom-links a{
  color: rgba(255,255,255,.75);
  text-decoration:none;
}
.is-footer-bottom-links a:hover{
  color:#fff;
  text-decoration: underline;
}
.is-footer-bottom-links .sep{
  opacity:.55;
}

/* Mobile */
@media (max-width: 575.98px){
  .is-footer{
    padding: 54px 0 16px;
  }
  .is-footer-logo{
    max-width: 190px;
  }
}
/* ===================== PAGE TITLE ===================== */
.is-page-title{
  padding: 140px 0 80px;
  background:
    radial-gradient(900px 320px at 10% 20%, rgba(0,174,239,.14), transparent 60%),
    radial-gradient(900px 320px at 90% 25%, rgba(122,201,67,.12), transparent 60%),
    radial-gradient(900px 320px at 50% 120%, rgba(247,147,30,.12), transparent 60%),
    #f8fbff;
  text-align: center;
}

.is-page-kicker{
  letter-spacing:.18em;
  font-size:.75rem;
  font-weight:900;
  color:#64748b;
  margin-bottom:10px;
}

.is-page-heading{
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 950;
  margin-bottom: 12px;
}

.is-page-subtitle{
  color:#475569;
  max-width: 700px;
  margin: 0 auto;
  line-height:1.6rem;
}

.breadcrumb{
  background: transparent;
}

.breadcrumb-item a{
  text-decoration: none;
  font-weight: 700;
  color:#64748b;
}

.breadcrumb-item.active{
  font-weight: 800;
  color:#0f172a;
}
/* ===================== About Hero (Luxury Dark, Navbar-safe) ===================== */
.is-about-hero-dark{
  padding: 140px 0 85px;
  background:
    radial-gradient(900px 380px at 12% 18%, rgba(0,174,239,.16), transparent 60%),
    radial-gradient(900px 380px at 88% 20%, rgba(122,201,67,.12), transparent 60%),
    radial-gradient(900px 380px at 50% 115%, rgba(247,147,30,.12), transparent 60%),
    linear-gradient(180deg, #050b14 0%, #060f1d 55%, #050b14 100%);
  color: rgba(255,255,255,.88);
}

/* Subtle tech grid (no positioning, no z-index) */
.is-about-hero-dark{
  background-image:
    radial-gradient(900px 380px at 12% 18%, rgba(0,174,239,.16), transparent 60%),
    radial-gradient(900px 380px at 88% 20%, rgba(122,201,67,.12), transparent 60%),
    radial-gradient(900px 380px at 50% 115%, rgba(247,147,30,.12), transparent 60%),
    linear-gradient(180deg, #050b14 0%, #060f1d 55%, #050b14 100%),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:
    auto, auto, auto, auto,
    42px 42px, 42px 42px;
  background-position:
    0 0, 0 0, 0 0, 0 0,
    0 0, 0 0;
}

/* Typography polish */
.is-about-hero-dark .is-hero-kicker{
  letter-spacing: .22em;
  font-size: .78rem;
  font-weight: 900;
  color: rgba(255,255,255,.68);
  margin-bottom: 14px;
}

.is-about-hero-dark .is-hero-title-dark{
  font-size: clamp(2.6rem, 4.2vw, 3.5rem);
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0 0 14px;
  text-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* Brand gradient only on Insightful */
.is-about-hero-dark .is-hero-title-dark span{
  background: linear-gradient(90deg, #00AEEF, #7AC943, #F7931E);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subheading spacing + readability */
.is-about-hero-dark .is-hero-subtitle{
  color: rgba(255,255,255,.78);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.75rem;
  font-size: 1.05rem;
}

/* Breadcrumb styled for dark */
.is-about-hero-dark .breadcrumb{
  background: transparent;
  font-size: .92rem;
}
.is-about-hero-dark .breadcrumb-item a{
  text-decoration: none;
  color: rgba(255,255,255,.68);
  font-weight: 700;
}
.is-about-hero-dark .breadcrumb-item a:hover{
  color: rgba(255,255,255,.92);
}
.is-about-hero-dark .breadcrumb-item.active{
  color: rgba(255,255,255,.92);
  font-weight: 800;
}

/* Mobile spacing under fixed navbar */
@media (max-width: 991.98px){
  .is-about-hero-dark{
    padding: 120px 0 70px;
  }
}
/* Light top blend for navbar (100px only) */
.is-about-hero-dark{
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.92) 0px,
      rgba(255,255,255,.75) 50px,
      rgba(255,255,255,.35) 80px,
      rgba(5,11,20,0) 100px
    ),
    radial-gradient(900px 380px at 12% 18%, rgba(0,174,239,.16), transparent 60%),
    radial-gradient(900px 380px at 88% 20%, rgba(122,201,67,.12), transparent 60%),
    radial-gradient(900px 380px at 50% 115%, rgba(247,147,30,.12), transparent 60%),
    linear-gradient(180deg, #050b14 0%, #060f1d 55%, #050b14 100%);
}
/* ===================== Soft premium section background ===================== */
.is-section-soft{
  position: relative;
  background:
    radial-gradient(900px 260px at 12% 25%, rgba(0,174,239,.10), transparent 60%),
    radial-gradient(900px 260px at 88% 25%, rgba(122,201,67,.08), transparent 60%),
    radial-gradient(900px 260px at 50% 120%, rgba(247,147,30,.08), transparent 60%),
    linear-gradient(180deg, #ffffff, #f7fafc);
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
}

/* ===================== Premium stats cards (for your current HTML) ===================== */
.is-stat{
  border-radius: 22px;
  padding: 18px 16px 16px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 44px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  min-height: 118px;
}

/* top gradient strip */
.is-stat::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 4px;
  background: linear-gradient(90deg, #00AEEF, #7AC943, #F7931E);
  opacity:.95;
}

/* soft corner glow */
.is-stat::after{
  content:"";
  position:absolute;
  width: 260px;
  height: 160px;
  right: -130px;
  top: -100px;
  background: radial-gradient(circle, rgba(0,174,239,.18), transparent 60%);
  opacity:.9;
  pointer-events:none;
}

.is-stat:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(15,23,42,.14);
  border-color: rgba(0,174,239,.16);
}

/* number */
.is-stat .num{
  font-weight: 1000;
  letter-spacing: -.03em;
  font-size: 2.1rem;
  line-height: 1;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #00AEEF, #7AC943, #F7931E);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  position: relative;
  z-index: 1;
}

/* label */
.is-stat .lbl{
  font-weight: 900;
  color:#0f172a;
  margin-bottom: 2px;
  position: relative;
  z-index: 1;
}

/* sub */
.is-stat .sub{
  margin: 0;
  color:#64748b;
  font-weight: 700;
  font-size: .92rem;
  position: relative;
  z-index: 1;
}
/* ===================== GLOBAL PAGE TONE (About + others) ===================== */
.is-section{ padding: 70px 0; }

.is-section-soft{
  background:
    radial-gradient(900px 260px at 12% 25%, rgba(0,174,239,.10), transparent 60%),
    radial-gradient(900px 260px at 88% 25%, rgba(122,201,67,.08), transparent 60%),
    radial-gradient(900px 260px at 50% 120%, rgba(247,147,30,.08), transparent 60%),
    linear-gradient(180deg, #ffffff, #f7fafc);
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.is-section-soft-2{
  background:
    radial-gradient(900px 260px at 15% 25%, rgba(15,23,42,.05), transparent 60%),
    radial-gradient(900px 260px at 85% 25%, rgba(0,174,239,.08), transparent 60%),
    linear-gradient(180deg, #f8fafc, #ffffff);
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
}

/* ===================== PREMIUM CARD SYSTEM ===================== */
.is-card{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(15,23,42,.08);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.is-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 74px rgba(15,23,42,.14);
  border-color: rgba(0,174,239,.16);
}

.is-card-body{ padding: 26px; }

.is-hero-kicker{
  letter-spacing: .22em;
  font-weight: 900;
  font-size: .72rem;
  color: #64748b;
}

/* Better headings */
.is-card-title{
  font-weight: 950;
  letter-spacing: -.02em;
  line-height: 1.12;
  margin-bottom: 10px;
  color:#0f172a;
}

.is-card-text{
  color:#475569;
  line-height: 1.7rem;
  margin-bottom: 0;
}

/* Gradient underline for titles (subtle) */
.is-card-title{
  position: relative;
}
.is-card-title::after{
  content:"";
  display:block;
  width: 64px;
  height: 4px;
  border-radius: 999px;
  margin-top: 12px;
  background: linear-gradient(90deg,#00AEEF,#7AC943,#F7931E);
  opacity: .75;
}

/* ===================== BUTTONS (consistent premium) ===================== */
.is-btn-grad{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 11px 16px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 900;
  color:#061222;
  background: linear-gradient(90deg,#00AEEF,#7AC943,#F7931E);
  box-shadow: 0 18px 46px rgba(0,0,0,.14);
}
.is-btn-grad:hover{ filter: saturate(1.1); transform: translateY(-2px); }

.is-btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 11px 16px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 900;
  color:#0f172a;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,23,42,.10);
}
.is-btn-ghost:hover{ background: rgba(255,255,255,.85); }

/* ===================== IMAGES (premium frame) ===================== */
.is-hero-image-wrap,
.is-img-frame{
  border-radius: 18px;
  padding: 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 26px 70px rgba(0,0,0,.28);
}

/* ===================== STATS (works with your existing HTML) ===================== */
.is-stat{
  border-radius: 22px;
  padding: 18px 16px 16px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 44px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  min-height: 118px;
}
.is-stat::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height: 4px;
  background: linear-gradient(90deg,#00AEEF,#7AC943,#F7931E);
  opacity:.95;
}
.is-stat:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(15,23,42,.14);
  border-color: rgba(0,174,239,.16);
}
.is-stat .num{
  font-weight: 1000;
  letter-spacing: -.03em;
  font-size: 2.1rem;
  line-height: 1;
  margin-bottom: 8px;
  background: linear-gradient(90deg,#00AEEF,#7AC943,#F7931E);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.is-stat .lbl{ font-weight: 900; color:#0f172a; margin-bottom: 2px; }
.is-stat .sub{ margin:0; color:#64748b; font-weight: 700; font-size:.92rem; }
/* ===================== Tech Dark Hero (CSS-only) ===================== */
.is-about-hero-dark{
  position: relative;
  overflow: hidden;
  padding: 150px 0 90px;
  color: rgba(255,255,255,.90);

  /* base */
  background:
    /* Top 100px light blend for navbar */
    linear-gradient(to bottom,
      rgba(255,255,255,.92) 0px,
      rgba(255,255,255,.75) 50px,
      rgba(255,255,255,.35) 80px,
      rgba(5,11,20,0) 100px
    ),

    /* soft brand glows */
    radial-gradient(900px 420px at 15% 30%, rgba(0,174,239,.18), transparent 60%),
    radial-gradient(900px 420px at 85% 30%, rgba(122,201,67,.14), transparent 60%),
    radial-gradient(900px 420px at 50% 120%, rgba(247,147,30,.14), transparent 60%),

    /* deep dark base */
    linear-gradient(180deg, #050b14 0%, #061225 55%, #050b14 100%);
}

/* Tech grid overlay */
.is-about-hero-dark::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .28;
  pointer-events:none;
}

/* Subtle moving light sheen */
.is-about-hero-dark::after{
  content:"";
  position:absolute; inset:-45%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.10) 35%,
    rgba(0,174,239,.12) 55%,
    rgba(255,255,255,.08) 70%,
    transparent 100%);
  transform: rotate(10deg);
  animation: isTechSheen 12s linear infinite;
  opacity: .45;
  pointer-events:none;
}

@keyframes isTechSheen{
  0%{ transform: translateX(-10%) rotate(10deg); }
  100%{ transform: translateX(10%) rotate(10deg); }
}

/* Ensure hero content stays above overlays */
.is-about-hero-dark .container{
  position: relative;
  z-index: 1;
}

/* Typography (matches screenshot vibe) */
.is-hero-kicker{
  letter-spacing: .26em;
  font-size: .78rem;
  font-weight: 900;
  color: rgba(255,255,255,.70);
  margin-bottom: 14px;
}

.is-hero-title-dark{
  font-size: clamp(2.7rem, 4.6vw, 3.6rem);
  font-weight: 1000;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0 0 14px;
  text-shadow: 0 18px 40px rgba(0,0,0,.38);
}

.is-hero-title-dark span{
  background: linear-gradient(90deg, #00AEEF, #7AC943, #F7931E);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.is-hero-subtitle{
  color: rgba(255,255,255,.78);
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.75rem;
  font-size: 1.05rem;
}

/* Breadcrumb for dark */
.is-about-hero-dark .breadcrumb{
  background: transparent;
  font-size: .92rem;
}
.is-about-hero-dark .breadcrumb-item a{
  color: rgba(255,255,255,.68);
  text-decoration: none;
  font-weight: 700;
}
.is-about-hero-dark .breadcrumb-item a:hover{
  color: rgba(255,255,255,.92);
}
.is-about-hero-dark .breadcrumb-item.active{
  color: rgba(255,255,255,.92);
  font-weight: 800;
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce){
  .is-about-hero-dark::after{ animation: none !important; }
}
/* ===================== Diagonal Circuit Tech Lines ===================== */
.is-about-hero-dark .is-circuit{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.28;
}

/* Diagonal lines */
.is-about-hero-dark .is-circuit::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(0,174,239,.06) 0px,
      rgba(0,174,239,.06) 1px,
      transparent 1px,
      transparent 70px
    );
  animation: circuitMove 18s linear infinite;
}

/* Tiny connection dots */
.is-about-hero-dark .is-circuit::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(122,201,67,.25) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(247,147,30,.25) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 80%, rgba(0,174,239,.25) 0 2px, transparent 3px);
  background-size: 240px 240px;
  opacity:.35;
}

@keyframes circuitMove{
  0%   { transform: translateY(0); }
  100% { transform: translateY(-40px); }
}

/* Make sure hero content stays above */
.is-about-hero-dark .container{
  position:relative;
  z-index:2;
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  .is-about-hero-dark .is-circuit::before{
    animation:none !important;
  }
}
/* ===================== Premium Text Pulse (Subtle) ===================== */
.is-hero-title-dark span{
  position: relative;
  background: linear-gradient(90deg, #00AEEF, #7AC943, #F7931E);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Soft glow behind text */
.is-hero-title-dark span::after{
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: transparent;
  text-shadow:
    0 0 18px rgba(0,174,239,.35),
    0 0 32px rgba(122,201,67,.25),
    0 0 45px rgba(247,147,30,.25);
  opacity: .55;
  animation: insightPulse 4s ease-in-out infinite;
}

@keyframes insightPulse{
  0%,100%{
    opacity:.45;
    filter: blur(0px);
  }
  50%{
    opacity:.85;
    filter: blur(.6px);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .is-hero-title-dark span::after{
    animation:none !important;
  }
}
/* ===================== Visible Premium Pulse (Guaranteed) ===================== */
.is-hero-title-dark span.is-pulse{
  background: linear-gradient(90deg, #00AEEF, #7AC943, #F7931E);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;

  /* glow that we animate */
  filter:
    drop-shadow(0 0 8px rgba(0,174,239,.25))
    drop-shadow(0 0 14px rgba(122,201,67,.18))
    drop-shadow(0 0 18px rgba(247,147,30,.16));

  animation: isPulseGlow 2.8s ease-in-out infinite;
  will-change: filter;
}

@keyframes isPulseGlow{
  0%,100%{
    filter:
      drop-shadow(0 0 6px rgba(0,174,239,.18))
      drop-shadow(0 0 10px rgba(122,201,67,.12))
      drop-shadow(0 0 14px rgba(247,147,30,.10));
  }
  50%{
    filter:
      drop-shadow(0 0 14px rgba(0,174,239,.40))
      drop-shadow(0 0 22px rgba(122,201,67,.28))
      drop-shadow(0 0 30px rgba(247,147,30,.24));
  }
}

/* If user has reduced motion enabled, keep glow static */
@media (prefers-reduced-motion: reduce){
  .is-hero-title-dark span.is-pulse{
    animation: none !important;
  }
}
/* =========================================================
   OUR JOURNEY PAGE (dark tech hero + grid + subtle motion)
   ========================================================= */
body.page-journey{ background:#0a1020; }

.is-journey-hero{
  position: relative;
  padding: calc(var(--nav-h, 92px) + 70px) 0 70px;
  background:
    radial-gradient(900px 360px at 15% 20%, rgba(0,174,239,.18), transparent 60%),
    radial-gradient(900px 360px at 85% 25%, rgba(122,201,67,.14), transparent 60%),
    radial-gradient(900px 360px at 55% 110%, rgba(247,147,30,.14), transparent 60%),
    linear-gradient(180deg, #071026, #070b14);
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* stronger, visible sweep */
.is-journey-hero::before{
  content:"";
  position:absolute; inset:-35%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(0,174,239,.14) 30%,
    rgba(122,201,67,.12) 55%,
    rgba(247,147,30,.12) 75%,
    transparent 100%);
  transform: rotate(10deg);
  animation: jSheen 7s linear infinite;
  opacity:.9;
  pointer-events:none;
}
@keyframes jSheen{
  0%{ transform: translateX(-18%) rotate(10deg); }
  100%{ transform: translateX(18%) rotate(10deg); }
}

.is-journey-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 30%, rgba(0,0,0,1), rgba(0,0,0,0));
  opacity:.34;
  pointer-events:none;
}

.is-journey-particles{
  position:absolute; inset:-40px;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,174,239,.40) 0 1.6px, transparent 2px) 0 0/28px 28px,
    radial-gradient(circle at 70% 60%, rgba(122,201,67,.34) 0 1.5px, transparent 2px) 0 0/32px 32px,
    radial-gradient(circle at 40% 80%, rgba(247,147,30,.30) 0 1.3px, transparent 2px) 0 0/36px 36px;
  opacity:.60;
  animation: jParticles 12s linear infinite;
  pointer-events:none;
}
@keyframes jParticles{
  0%   { transform: translate3d(0,0,0); background-position: 0 0, 0 0, 0 0; }
  100% { transform: translate3d(0,-14px,0); background-position: 140px -220px, -160px -260px, 120px -180px; }
}

.is-journey-hero .is-hero-kicker{
  color: rgba(255,255,255,.72);
  font-weight: 900;
  letter-spacing: .18em;
  font-size: .72rem;
  margin-bottom: 10px;
}
.is-journey-hero h1{
  color:#fff;
  font-weight: 950;
  letter-spacing: -.02em;
  margin-bottom: 12px;
  font-size: clamp(2rem, 3.2vw, 3rem);
}
.is-journey-hero h1 span{
  background: linear-gradient(90deg, #00AEEF, #7AC943, #F7931E);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.is-journey-hero .lead{
  color: rgba(255,255,255,.74);
  max-width: 58ch;
  margin: 0 auto;
}
.is-journey-hero .breadcrumb{ --bs-breadcrumb-divider: "›"; }
.is-journey-hero .breadcrumb a{
  color: rgba(255,255,255,.80);
  text-decoration:none;
}
.is-journey-hero .breadcrumb a:hover{ color:#fff; text-decoration: underline; }
.is-journey-hero .breadcrumb .active{ color: rgba(255,255,255,.65); }

.kpi-note{ color: rgba(255,255,255,.55); }

/* dark section canvas */
.is-section-dark{
  padding: 70px 0;
  background:
    radial-gradient(900px 340px at 12% 20%, rgba(0,174,239,.10), transparent 60%),
    radial-gradient(900px 340px at 88% 20%, rgba(122,201,67,.08), transparent 60%),
    radial-gradient(900px 340px at 50% 120%, rgba(247,147,30,.08), transparent 60%),
    #0a1020;
}

/* timeline */
.journey-line{ position:relative; padding-left:22px; }
.journey-line::before{
  content:"";
  position:absolute;
  left:9px; top:6px; bottom:6px;
  width:2px;
  background: linear-gradient(180deg, rgba(0,174,239,.55), rgba(122,201,67,.45), rgba(247,147,30,.45));
  opacity:.7;
  border-radius:99px;
}
.journey-item{ position:relative; margin-bottom:16px; }
.journey-dot{
  position:absolute;
  left:3px; top:18px;
  width:14px; height:14px;
  border-radius:99px;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 0 6px rgba(0,174,239,.07);
}
.journey-card{
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  padding: 16px 16px 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.journey-meta{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-bottom:8px;
  color: rgba(255,255,255,.72);
  font-weight: 900;
  letter-spacing:.10em;
  font-size:.72rem;
}
.journey-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
  font-weight: 900;
  letter-spacing:.06em;
  font-size:.72rem;
}
.journey-title{ color:#fff; font-weight:950; margin:0 0 6px; letter-spacing:-.01em; }
.journey-text{ color: rgba(255,255,255,.74); margin:0; line-height:1.6rem; }

.kpi-card{
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.26);
  padding: 16px;
}
.kpi-num{
  font-weight: 1000;
  font-size: 1.8rem;
  background: linear-gradient(90deg, #00AEEF, #7AC943, #F7931E);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  line-height: 1;
}
.kpi-label{
  color: rgba(255,255,255,.70);
  font-weight: 900;
  letter-spacing: .10em;
  font-size: .72rem;
  margin-top: 8px;
}

.journey-h2{ color:#fff; font-weight:950; letter-spacing:-.01em; }
.journey-muted{ color: rgba(255,255,255,.74); }
.journey-pill-lite{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
}

.journey-stack{ background:#060a13; }
.journey-ph{
  min-height: 360px;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
.journey-ph .ph-meta{ color: rgba(255,255,255,.72); }

.journey-cta{ background:#0a1020; }
.cta-title{ color:#fff; font-weight:950; }
.cta-text{ color: rgba(255,255,255,.74); }

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .is-journey-hero::before,
  .is-journey-particles{ animation:none !important; }
}
/* =========================================================
   OUR JOURNEY — ENGINEERING APPROACH (guaranteed styling)
   Works with your exact HTML section
   ========================================================= */

.is-section.journey-stack{
  padding: 70px 0;
  background:
    radial-gradient(900px 320px at 15% 20%, rgba(0,174,239,.10), transparent 60%),
    radial-gradient(900px 320px at 85% 25%, rgba(122,201,67,.08), transparent 60%),
    radial-gradient(900px 320px at 55% 110%, rgba(247,147,30,.08), transparent 60%),
    #070b14;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Headings inside this section */
.journey-h2{
  color: #fff !important;
  font-weight: 950;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}

.journey-muted{
  color: rgba(255,255,255,.72) !important;
  line-height: 1.65rem;
  margin: 0 0 10px;
}

/* Cards inside the 2x2 steps */
.journey-card{
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  padding: 14px 14px 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.journey-meta{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom: 8px;
  color: rgba(255,255,255,.72);
  font-weight: 900;
  letter-spacing: .10em;
  font-size: .72rem;
  text-transform: uppercase;
}

.journey-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.80);
  font-weight: 900;
  letter-spacing: .06em;
  font-size: .72rem;
}

.journey-text{
  color: rgba(255,255,255,.72) !important;
  margin: 0;
  line-height: 1.55rem;
}

/* Image placeholder block (right side) */
.is-img-ph.journey-ph{
  min-height: 360px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.16);
  box-shadow: 0 22px 55px rgba(0,0,0,.30);
  position: relative;
  overflow: hidden;
}

/* inner alignment */
.is-img-ph .ph-inner{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}

.is-img-ph .ph-box{
  width: 100%;
  max-width: 420px;
  text-align: center;
  padding: 18px 16px;
  border-radius: 16px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
}

.is-img-ph .ph-title{
  font-weight: 1000;
  color: #fff;
  letter-spacing: .12em;
  font-size: .82rem;
  margin-bottom: 10px;
}

.is-img-ph .ph-meta{
  color: rgba(255,255,255,.72);
  line-height: 1.45rem;
  margin: 0;
}
/* =====================================================================
   MISSING CLASSES — Engineering Approach + CTA Section
   ===================================================================== */

/* is-neon: dark glowing card variant used in Engineering Approach */
.is-card.is-neon {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(0,174,239,.08),
              0 26px 60px rgba(0,0,0,.40),
              inset 0 1px 0 rgba(255,255,255,.06);
}
.is-card.is-neon:hover {
  border-color: rgba(0,174,239,.30);
  box-shadow: 0 0 32px rgba(0,174,239,.12),
              0 28px 70px rgba(0,0,0,.45);
}

/* is-cta: the inner wrapper inside .journey-cta */
.is-cta {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: 48px 44px;
  box-shadow: 0 22px 55px rgba(0,0,0,.30);
}

/* kicker: small label above CTA heading */
.is-cta .kicker {
  display: inline-block;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #00aeef;
  margin-bottom: 12px;
}

/* actions: flex button row in CTA */
.is-cta .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
}

@media (max-width: 991.98px) {
  .is-cta { padding: 32px 24px; }
  .is-cta .actions { justify-content: flex-start; }
}
/* Journey hero: keep navbar area brighter so glass doesn't look dark */
.page-journey .is-journey-hero{
  position: relative;
}

/* Light buffer behind navbar */
.page-journey .is-journey-hero::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 100px; /* adjust: 90 to 130 */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.22),
    rgba(255,255,255,.10),
    rgba(255,255,255,0)
  );
  pointer-events:none;
  z-index: 0;
}

/* Make sure hero content stays above overlays */
.page-journey .is-journey-hero .container{
  position: relative;
  z-index: 1;
}
/* Light top blend for navbar (100px only) — OUR JOURNEY */
.is-journey-hero{
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.92) 0px,
      rgba(255,255,255,.75) 50px,
      rgba(255,255,255,.35) 80px,
      rgba(5,11,20,0) 100px
    ),
    radial-gradient(900px 380px at 12% 18%, rgba(0,174,239,.16), transparent 60%),
    radial-gradient(900px 380px at 88% 20%, rgba(122,201,67,.12), transparent 60%),
    radial-gradient(900px 380px at 50% 115%, rgba(247,147,30,.12), transparent 60%),
    linear-gradient(180deg, #050b14 0%, #060f1d 55%, #050b14 100%);
}
/* =========================================================
   OUR JOURNEY — Premium Dynamic Upgrade (safe patch)
   ========================================================= */

.is-journey-hero{
  position: relative;
  overflow: hidden;
}

/* subtle moving glow layer */
.is-journey-hero::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(520px 260px at 20% 20%, rgba(0,174,239,.16), transparent 60%),
    radial-gradient(520px 260px at 80% 25%, rgba(122,201,67,.12), transparent 60%),
    radial-gradient(520px 260px at 55% 85%, rgba(247,147,30,.10), transparent 60%);
  filter: blur(18px);
  animation: journeyGlow 9s ease-in-out infinite;
  opacity: .85;
  pointer-events:none;
}
@keyframes journeyGlow{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(12px,-10px,0) scale(1.03); }
}

/* Section separators so page doesn't feel flat */
.journey-sep{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  margin: 26px 0;
}

/* Milestone / timeline cards feel more premium */
.journey-card,
.is-card.is-neon{
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.journey-card:hover,
.is-card.is-neon:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.18);
}

/* Add a neon edge line to your big panels */
.is-card.is-neon{
  position: relative;
  overflow:hidden;
}
.is-card.is-neon::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(0,174,239,.55),
    rgba(122,201,67,.45),
    rgba(247,147,30,.45),
    rgba(0,174,239,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .35;
  pointer-events:none;
}

/* Timeline list (new) */
.journey-timeline{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top: 10px;
}
.journey-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 44px rgba(0,0,0,.28);
  transition: transform .22s ease, box-shadow .22s ease;
}
.journey-item:hover{
  transform: translateY(-5px);
  box-shadow: 0 24px 62px rgba(0,0,0,.40);
}
.journey-year{
  flex: 0 0 auto;
  min-width: 62px;
  font-weight: 1000;
  letter-spacing: .04em;
  font-size: .95rem;
  background: linear-gradient(90deg, #00AEEF, #7AC943, #F7931E);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.journey-content h4{
  color:#fff;
  font-weight: 950;
  margin: 0 0 4px;
  font-size: 1.05rem;
}
.journey-content p{
  margin:0;
  color: rgba(255,255,255,.72);
  line-height: 1.55rem;
  font-size: .95rem;
}
.journey-img-wrap{
  position: relative;
}

.journey-img{
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  transition: transform .35s ease, box-shadow .35s ease;
}

.journey-img:hover{
  transform: translateY(-8px);
  box-shadow: 0 40px 100px rgba(0,0,0,.55);
}

/* subtle glow border */
.journey-img-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 20px;
  padding:1px;
  background: linear-gradient(135deg,
    rgba(0,174,239,.5),
    rgba(122,201,67,.4),
    rgba(247,147,30,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.35;
  pointer-events:none;
}
/* ABOUT HERO — techy dark, but keeps frosted navbar area light */
.is-page-hero--dark{
  position: relative;
  padding-top: calc(var(--nav-h, 82px) + 26px);
  padding-bottom: 56px;
  overflow: hidden;

  background:
    /* 100px light blend so navbar doesn't look dark */
    linear-gradient(to bottom,
      rgba(255,255,255,.92) 0px,
      rgba(255,255,255,.75) 50px,
      rgba(255,255,255,.35) 80px,
      rgba(5,11,20,0) 100px
    ),
    radial-gradient(900px 380px at 12% 18%, rgba(0,174,239,.16), transparent 60%),
    radial-gradient(900px 380px at 88% 20%, rgba(122,201,67,.12), transparent 60%),
    radial-gradient(900px 380px at 50% 115%, rgba(247,147,30,.12), transparent 60%),
    linear-gradient(180deg, #050b14 0%, #060f1d 55%, #050b14 100%);
}

/* dotted tech grid */
.is-page-hero--dark .is-hero-grid{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .22;
  pointer-events:none;
}

/* subtle moving glow (movement you can actually notice) */
@keyframes isHeroSweep{
  0%   { transform: translate3d(-8%, -6%, 0) scale(1);   opacity:.55; }
  50%  { transform: translate3d(8%, 6%, 0)  scale(1.08);opacity:.78; }
  100% { transform: translate3d(-8%, -6%, 0) scale(1);   opacity:.55; }
}
.is-page-hero--dark .is-hero-sheen{
  content:"";
  position:absolute; inset:-30%;
  background:
    radial-gradient(600px 260px at 25% 25%, rgba(0,174,239,.22), transparent 62%),
    radial-gradient(520px 240px at 75% 30%, rgba(122,201,67,.18), transparent 64%),
    radial-gradient(620px 260px at 50% 75%, rgba(247,147,30,.16), transparent 66%);
  animation: isHeroSweep 10s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: screen;
}

/* Dark hero title styles */
.is-hero-title-dark{
  font-weight: 1000;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.92);
  line-height: 1.06;
}
.is-hero-subtitle{
  color: rgba(255,255,255,.74);
  font-weight: 600;
  line-height: 1.7rem;
}

/* Breadcrumb in dark hero */
.is-page-hero--dark .breadcrumb a{
  color: rgba(255,255,255,.78);
  text-decoration: none;
}
.is-page-hero--dark .breadcrumb a:hover{
  color:#fff;
  text-decoration: underline;
}
.is-page-hero--dark .breadcrumb .active{
  color: rgba(255,255,255,.92);
}
/* 1) JOURNEY HERO HEIGHT (About page) */
.is-journey-hero--about{
  min-height: 420px; /* match Journey hero */
  padding-top: calc(var(--nav-h, 82px) + 36px);
  padding-bottom: 72px;
  display: flex;
  align-items: center;
}
@media (max-width: 991.98px){
  .is-about-details{
    margin-top: -10px;
    padding-top: 22px;
  }
}
/* 1) Make sure the journey hero never leaks behind next sections */
.is-journey-hero{
  position: relative;
  overflow: hidden;          /* IMPORTANT */
  isolation: isolate;        /* keeps pseudo layers inside */
}

/* Ensure particles/grid stay inside hero only */
.is-journey-hero .is-journey-particles,
.is-journey-hero .is-journey-grid{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Keep hero content above the layers */
.is-journey-hero .container{
  position: relative;
  z-index: 2;
}

/* 2) Do NOT pull About Details into hero */
.is-about-details{
  margin-top: 0 !important;  /* remove any negative margin */
  padding: 38px 0 60px;      /* clean spacing below hero */
  background: transparent;   /* keep page clean */
}
/* =========================================================
   ABOUT: Journey-style hero but compact height (like your Journey page top)
========================================================= */
.is-journey-hero.is-journey-hero--compact{
  /* Match navbar spacing, but keep it shorter than Journey page */
  padding-top: 120px;   /* if your navbar is taller/shorter, adjust 110–130 */
  padding-bottom: 60px; /* key: reduces background height so next section is not "inside" */
  min-height: unset;    /* important: remove any 100vh/min-height effect */
}

/* Mobile tuning */
@media (max-width: 991.98px){
  .is-journey-hero.is-journey-hero--compact{
    padding-top: 105px;
    padding-bottom: 45px;
  }
}

/* =========================================================
   ABOUT DETAILS: pull up slightly (premium overlap effect)
========================================================= */
.is-about-details{
  background: #f8fbff;       /* light canvas so it doesn’t inherit dark feel */
  padding: 60px 0;
  position: relative;
  z-index: 2;
}

/* Small “lift” like premium layouts (optional but looks great) */
.is-about-details--lift{
  margin-top: -28px;          /* overlap hero a bit */
  padding-top: 70px;          /* compensate for overlap */
}

/* On mobile reduce overlap */
@media (max-width: 575.98px){
  .is-about-details--lift{
    margin-top: -16px;
    padding-top: 56px;
  }
}
/* STOP hero background from affecting sections below */
.is-journey-hero{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* particles + grid MUST be clipped inside hero */
.is-journey-hero .is-journey-particles,
.is-journey-hero .is-journey-grid{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* hero content above layers */
.is-journey-hero .container{
  position: relative;
  z-index: 2;
}
/* =========================================================
   CTA STRIP — MUST hide hero grid behind it
   ========================================================= */
.is-cta-strip{
  position: relative;
  z-index: 5;                 /* above hero layers */
  background: #eef2f6;        /* your earlier grey */
  padding: 48px 0;            /* spacing */
  overflow: hidden;
}

/* Add a soft top divider so it feels intentional */
.is-cta-strip::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 1px;
  background: rgba(15,23,42,.08);
}

/* The CTA card itself (keep your premium look) */
.is-cta{
  border-radius: 22px;
  background: linear-gradient(90deg,
    rgba(8,20,38,.92),
    rgba(8,20,38,.86),
    rgba(8,20,38,.92)
  );
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  padding: 26px 28px;
}

/* Typography inside CTA */
.is-cta .kicker{
  letter-spacing:.16em;
  font-size:.72rem;
  font-weight:900;
  color: rgba(255,255,255,.65);
  margin-bottom: 10px;
}
.is-cta h3{
  color:#fff;
  font-weight: 950;
  margin: 0 0 8px;
}
.is-cta p{
  color: rgba(255,255,255,.76);
  margin: 0;
}

/* Buttons alignment */
.is-cta .actions{
  display:flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Mobile alignment */
@media (max-width: 991.98px){
  .is-cta .actions{ justify-content: flex-start; }
}
/* =========================================================
   INSIGHTFUL DIFFERENCE PAGE (Bold + Premium)
   Uses existing palette + journey-style animated hero
   ========================================================= */

.is-diff-hero{
  position: relative;
  overflow: hidden;
  padding: 120px 0 70px; /* hero height control */
  background:
    /* light top blend so frosted navbar stays bright */
    linear-gradient(to bottom,
      rgba(255,255,255,.92) 0px,
      rgba(255,255,255,.70) 55px,
      rgba(255,255,255,.30) 85px,
      rgba(5,11,20,0) 110px
    ),
    radial-gradient(900px 380px at 12% 18%, rgba(0,174,239,.16), transparent 60%),
    radial-gradient(900px 380px at 88% 20%, rgba(122,201,67,.12), transparent 60%),
    radial-gradient(900px 380px at 50% 115%, rgba(247,147,30,.12), transparent 60%),
    linear-gradient(180deg, #050b14 0%, #060f1d 55%, #050b14 100%);
}

.is-diff-hero .is-journey-grid,
.is-diff-hero .is-journey-particles{
  opacity: .95;
}

/* Make hero feel “alive” (very subtle) */
.is-diff-hero::after{
  content:"";
  position:absolute;
  inset:-35%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(0,174,239,.12) 30%,
    rgba(122,201,67,.10) 55%,
    rgba(247,147,30,.10) 75%,
    transparent 100%);
  transform: rotate(10deg);
  animation: isDiffSheen 10s linear infinite;
  pointer-events:none;
  opacity:.55;
}
@keyframes isDiffSheen{
  0%{ transform: translateX(-10%) rotate(10deg); }
  100%{ transform: translateX(10%) rotate(10deg); }
}

.is-diff-hero .is-hero-title-dark{
  margin-bottom: 10px;
}

.is-diff-hero .breadcrumb a{ color: rgba(255,255,255,.85); }
.is-diff-hero .breadcrumb .active{ color: rgba(255,255,255,.95); }

/* Page sections */
.is-diff-section{
  padding: 70px 0;
  background: #060b16;
}
.is-diff-section.is-diff-soft{
  background:
    radial-gradient(900px 420px at 12% 20%, rgba(0,174,239,.10), transparent 60%),
    radial-gradient(900px 420px at 88% 20%, rgba(122,201,67,.08), transparent 60%),
    radial-gradient(900px 420px at 50% 120%, rgba(247,147,30,.08), transparent 60%),
    #050b14;
}

.is-diff-kicker{
  letter-spacing:.18em;
  font-size:.72rem;
  font-weight:900;
  color: rgba(255,255,255,.65);
}

.is-diff-h2{
  color:#fff;
  font-weight: 950;
  letter-spacing: -0.02em;
  margin: 6px 0 10px;
}
.is-diff-muted{
  color: rgba(255,255,255,.70);
  line-height: 1.65rem;
}

/* Difference cards (bold) */
.is-diff-card{
  border-radius: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  overflow:hidden;
  height: 100%;
  position: relative;
}
.is-diff-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(0,174,239,.55),
    rgba(122,201,67,.40),
    rgba(247,147,30,.40),
    rgba(0,174,239,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .55;
  pointer-events:none;
}
.is-diff-card:hover{
  transform: translateY(-6px);
  transition: transform .25s ease;
}

.is-diff-card-body{
  padding: 18px 18px 16px;
}

.is-diff-icon{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  margin-bottom: 12px;
}
.is-diff-icon i{
  font-size: 22px;
  background: linear-gradient(90deg, #00AEEF, #7AC943, #F7931E);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.is-diff-title{
  color:#fff;
  font-weight: 950;
  margin: 0 0 6px;
}
.is-diff-text{
  color: rgba(255,255,255,.72);
  line-height: 1.55rem;
  margin: 0;
}

/* Proof strip */
.is-proof{
  border-radius: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  padding: 16px;
}
.is-proof .item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding: 10px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  height: 100%;
}
.is-proof .item i{
  margin-top: 3px;
  color: rgba(255,255,255,.85);
}
.is-proof .item b{
  color:#fff;
}
.is-proof .item p{
  margin: 0;
  color: rgba(255,255,255,.70);
  line-height: 1.5rem;
}

/* Testimonials */
.is-quote{
  border-radius: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  padding: 18px;
  height: 100%;
}
.is-quote p{
  color: rgba(255,255,255,.78);
  margin: 0 0 10px;
  line-height: 1.65rem;
}
.is-quote .by{
  color: rgba(255,255,255,.92);
  font-weight: 900;
}

/* Process */
.is-step{
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 14px 14px;
}
.is-step .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 6px;
}
.is-step .pill{
  font-weight: 950;
  font-size: .74rem;
  letter-spacing: .12em;
  color: rgba(255,255,255,.72);
}
.is-step h4{
  color:#fff;
  font-weight: 950;
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.is-step p{
  color: rgba(255,255,255,.70);
  margin: 0;
  line-height: 1.55rem;
}

/* FAQ */
.is-diff-faq .accordion-item{
  background: transparent !important;
  border: 0 !important;
  margin-bottom: 12px;
}
.is-diff-faq .accordion-button{
  border-radius: 16px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color:#fff !important;
  font-weight: 900 !important;
}
.is-diff-faq .accordion-body{
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.72);
}

/* Responsive: slightly shorter hero on small screens */
@media (max-width: 991.98px){
  .is-diff-hero{ padding: 110px 0 60px; }
}
/* ===================== Residential Solutions Page ===================== */

.rs-hero{
  padding: 120px 0 28px;
  position: relative;
}
@media (max-width: 991.98px){
  .rs-hero{ padding: 96px 0 22px; }
}

.rs-hero__wrap{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.rs-breadcrumb{
  font-size: 14px;
  color: rgba(255,255,255,.75);
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.rs-breadcrumb a{
  color: rgba(255,255,255,.9);
  text-decoration: none;
}
.rs-breadcrumb a:hover{ text-decoration: underline; }
.rs-breadcrumb__sep{ opacity: .7; }

.rs-hero__title{
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: .2px;
}
.rs-hero__sub{
  margin: 0;
  max-width: 760px;
  color: rgba(255,255,255,.80);
}

/* Cards */
.rs-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}

.rs-card__media{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}
.rs-card__media img{
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1);
  transition: transform .45s ease;
}

/* Hero big image */
.rs-card--hero .rs-card__media{
  aspect-ratio: 16 / 7.5; /* close to 1920x900 */
}
@media (max-width: 767.98px){
  .rs-card--hero .rs-card__media{
    aspect-ratio: 16 / 10; /* more comfortable on mobile */
  }
}

/* Tiles */
.rs-card--tile{
  transition: transform .25s ease, border-color .25s ease;
}
.rs-card--tile .rs-card__media{
  aspect-ratio: 3 / 2; /* 1200x800 */
}
.rs-card--tile:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.22);
}
.rs-card--tile:hover .rs-card__media img{
  transform: scale(1.06);
}

.rs-card__body{
  padding: 16px 16px 18px;
}
.rs-card__title{
  margin: 0 0 6px;
  font-weight: 750;
}
.rs-card__text{
  margin: 0;
  color: rgba(255,255,255,.75);
  font-size: 14px;
  line-height: 1.55;
}

/* Grid */
.rs-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 991.98px){
  .rs-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px){
  .rs-grid{ grid-template-columns: 1fr; }
}
/* =====================================================
   RESIDENTIAL HERO – PREMIUM VERSION
   Insightful Systems
===================================================== */

.rs-hero {
  position: relative;
  padding: 130px 0 60px;
  background: radial-gradient(circle at 20% 40%, rgba(0,162,255,0.08), transparent 40%),
              linear-gradient(135deg, #051226 0%, #081c3a 60%, #0b2245 100%);
  overflow: hidden;
}

/* Subtle glass overlay for depth */
.rs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
  z-index: 0;
}

.rs-hero .container {
  position: relative;
  z-index: 2;
}

/* ================= Breadcrumb ================= */

.rs-breadcrumb {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.rs-breadcrumb a {
  color: #00a2ff;
  text-decoration: none;
  transition: 0.3s ease;
}

.rs-breadcrumb a:hover {
  color: #4dd4ff;
}

.rs-breadcrumb__sep {
  margin: 0 8px;
  opacity: 0.6;
}

/* ================= Heading ================= */

.rs-hero__title {
  font-size: 54px;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.1;
  letter-spacing: 0.5px;

  /* Premium Gradient Text */
  background: linear-gradient(90deg, #ffffff 0%, #00c6ff 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Soft brand glow */
  text-shadow: 0 0 22px rgba(0, 162, 255, 0.35);
}

/* Underline accent */
.rs-hero__title::after {
  content: "";
  display: block;
  width: 90px;
  height: 4px;
  margin-top: 14px;
  border-radius: 50px;
  background: linear-gradient(90deg, #00a2ff, #00c6ff);
}

/* ================= Subtext ================= */

.rs-hero__sub {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 750px;
  line-height: 1.7;
}

/* ================= Responsive ================= */

@media (max-width: 992px) {
  .rs-hero {
    padding: 110px 0 50px;
  }

  .rs-hero__title {
    font-size: 40px;
  }
}

@media (max-width: 576px) {
  .rs-hero {
    padding: 95px 0 40px;
  }

  .rs-hero__title {
    font-size: 32px;
  }

  .rs-hero__sub {
    font-size: 15px;
  }
}
/* =====================================================
   RESIDENTIAL CARDS PREMIUM FIX
===================================================== */

.rs-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  transition: 0.35s ease;
}

/* HOVER EFFECT */
.rs-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 162, 255, 0.45);
  box-shadow: 0 25px 60px rgba(0, 162, 255, 0.25);
}

/* ================= TITLE FIX ================= */

.rs-card__title {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;   /* <-- MAIN FIX */
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

/* ================= TEXT FIX ================= */

.rs-card__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);  /* <-- MAIN FIX */
}

/* Optional subtle accent line under title */
.rs-card__title::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  margin-top: 8px;
  border-radius: 20px;
  background: linear-gradient(90deg, #00a2ff, #00c6ff);
}

/* ================= IMAGE DARK OVERLAY ================= */

.rs-card__media {
  position: relative;
}

.rs-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 18, 38, 0.6), transparent 60%);
}
/* =========================================
   NAVBAR PROTECTIVE LAYER (HOTELS HERO)
   Applies to the element that paints bg: .rs-hero
========================================= */

.hero-hotels .rs-hero{
  position: relative;

  /* Light band behind navbar so glass stays bright */
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.92) 0px,
      rgba(255,255,255,.75) 50px,
      rgba(255,255,255,.35) 80px,
      rgba(5,11,20,0) 110px
    ),
    /* Your normal dark hero bg */
    radial-gradient(circle at 20% 40%, rgba(0,162,255,0.08), transparent 40%),
    linear-gradient(135deg, #051226 0%, #081c3a 60%, #0b2245 100%);
}

/* If you already have .rs-hero::before from earlier, it can darken the top again.
   So reduce it ONLY for hotels hero */
.hero-hotels .rs-hero::before{
  opacity: 0.12;              /* was 0.25 in earlier code */
  backdrop-filter: blur(1px); /* keep subtle */
}

/* Navbar itself (keep frosted and readable) */
.navbar-glass{
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 30px rgba(0,0,0,.10);
}
.navbar-glass.scrolled{
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 40px rgba(0,0,0,.16);
}
/* ===================== AUDIO PRODUCTS PAGE ===================== */
.audio-card { text-decoration: none; color: inherit; display: block; }
.audio-card__wrap { height: 100%; }
.audio-card__media img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

/* Optional: nicer hover */
.audio-card .rs-card{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.audio-card:hover .rs-card{
  transform: translateY(-6px);
}
/* ===== Audio page section heading visibility fix ===== */
.audio-products{
  position: relative;
  background: transparent; /* keep your dark page */
}

.audio-products h2{
  color: #EAF6FF !important;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.audio-products .text-muted{
  color: rgba(234,246,255,.72) !important; /* readable muted on dark */
}

/* If you use a custom .rs-card__title/.rs-card__text inside cards */
.audio-products .rs-card__title{
  color: rgba(255,255,255,.92);
}
.audio-products .rs-card__text{
  color: rgba(255,255,255,.70);
}
/* ===== Automation page cards ===== */
.prod-card{ text-decoration:none; color:inherit; display:block; }
.prod-card__wrap{ height:100%; }
.prod-card__media img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}

/* Video badge */
.prod-card__media--video{ position:relative; }
.prod-play{
  position:absolute;
  right:14px; bottom:14px;
  width:44px; height:44px;
  border-radius:999px;
  display:grid; place-items:center;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:16px;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}

/* Modal */
.prod-modal{ position:fixed; inset:0; display:none; z-index:1055; }
.prod-modal.is-open{ display:block; }
.prod-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.7);
}
.prod-modal__dialog{
  position:relative;
  width:min(980px, calc(100% - 24px));
  margin: 70px auto;
  background:rgba(10,18,35,.92);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow: 0 25px 80px rgba(0,0,0,.55);
  overflow:hidden;
}
.prod-modal__close{
  position:absolute; top:10px; right:12px;
  width:38px; height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:22px;
}
.prod-modal__body{ padding:16px; }
.prod-modal__title{
  color:rgba(255,255,255,.92);
  font-weight:600;
  margin:0 0 10px;
}
#prodVideo{
  width:100%;
  height:auto;
  max-height: 70vh;
  border-radius:14px;
  background:#000;
}
/* ===== Double vertical images inside one wide product card ===== */
.prod-card__wrap--wide .prod-double{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  padding:12px 12px 0;
}

.prod-double__img{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}

.prod-double__img img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}

.prod-double__tag{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}

@media (max-width: 575px){
  .prod-card__wrap--wide .prod-double{
    grid-template-columns: 1fr;
  }
  .prod-double__img img{ height:220px; }
}
/* ===== Premium demo video section ===== */
.video-card{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
}

.video-card__video{
  width:100%;
  border-radius:14px;
  background:#000;
  display:block;
  max-height: 420px;
  object-fit: cover;
}
/* ===== Fix dull section titles (Automation + Demo Videos) ===== */
.automation-products h2,
.automation-videos h2{
  color:#EAF6FF !important;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.automation-products .text-muted,
.automation-videos .text-muted{
  color: rgba(234,246,255,.72) !important;
}

/* ===== Fix card text contrast ===== */
.automation-products .rs-card__title,
.automation-videos .rs-card__title{
  color: rgba(255,255,255,.92) !important;
}
.automation-products .rs-card__text,
.automation-videos .rs-card__text{
  color: rgba(255,255,255,.72) !important;
}

/* ===== Tall media for vertical dimming cards ===== */
.prod-card__media--tall img{
  height: 320px;           /* increase to 360 if you want even bigger */
  object-fit: cover;
}
/* Portrait (vertical) product images: show full image without cropping */
.prod-card__media.is-portrait{
  height: 320px;                     /* increase to 360 if you want taller */
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(120% 120% at 30% 20%,
    rgba(54, 200, 255, .18) 0%,
    rgba(0, 0, 0, 0) 55%),
    rgba(255,255,255,.03);
}

.prod-card__media.is-portrait img{
  width: 100%;
  height: 100%;
  object-fit: contain;               /* KEY: no crop */
  padding: 14px;                     /* makes it look premium */
  filter: saturate(1.03) contrast(1.02);
}