/* ==========================================================================
   Festive Home Skin — Halloween x Diwali (homepage only)

   A "gothic midnight manor" dark theme (per the seasonalskin halloween /
   ecommerce reference) warmed with Diwali light: glowing diyas, marigold
   festoons, rangoli and sparkle.

   Every rule is scoped under #home-page, which app.blade.php sets only on "/".
   Nothing here changes layout — the skin is colour, light and overlay only.
   ========================================================================== */

#home-page {
  /* --- Halloween: midnight manor base --------------------------------- */
  --fest-night:    #07060e;   /* deepest background */
  --fest-night-2:  #0d0b1a;   /* raised surface */
  --fest-night-3:  #141026;   /* card surface */
  --fest-violet:   #a855f7;   /* gothic purple accent */
  --fest-violet-d: #4c1d95;

  /* --- Diwali: lamp-light warmth (built on the brand orange) ---------- */
  --fest-orange:   #f7941d;   /* brand orange, doubles as pumpkin */
  --fest-ember:    #ff6a00;
  --fest-gold:     #fbbf24;
  --fest-marigold: #f59e0b;
  --fest-cream:    #fff7ed;   /* flame core / headings */
  --fest-rose:     #fb7185;

  /* --- Brand continuity ----------------------------------------------- */
  --fest-blue:     #00aeef;

  /* Text on the dark skin */
  --fest-text:     #e8e3f2;
  --fest-muted:    #a79fbd;

  background: var(--fest-night);
  color: var(--fest-text);
}

/* --------------------------------------------------------------------------
   1. Dark wash — repaint the light sections as night, keep the layout
   -------------------------------------------------------------------------- */

/* The page's light sections (--lightBg) and plain white blocks become
   layered midnight surfaces with a faint warm lamp-glow from below. */
#home-page section,
#home-page .whoWeAre,
#home-page .solution,
#home-page .plan,
#home-page .technology,
#home-page .whyUs,
#home-page .certificates,
#home-page .partners,
#home-page .parTners,
#home-page .workTogether {
  background-color: var(--fest-night) !important;
  position: relative;
}

/* Alternating "lit room" sections: the ones that were --lightBg get a
   slightly raised surface plus a warm pool of lamplight. */
#home-page .whoWeAre,
#home-page .technology,
#home-page .plan {
  background-color: var(--fest-night-2) !important;
  background-image:
    radial-gradient(90% 60% at 50% 100%, rgba(247, 148, 29, .10), transparent 70%),
    radial-gradient(70% 50% at 8% 0%,    rgba(168, 85, 247, .10), transparent 70%) !important;
}

/* Hairline separators read as moonlight catching the edge of each floor. */
#home-page section + section { border-top: 1px solid rgba(168, 85, 247, .12); }

/* Two sections carry a daylight photo as an inline background (the awards
   group shot and the contact backdrop). The inline style wins over any
   background-color here, so instead of recolouring them we lay a night grade
   on top — the photograph stays visible, just lit for the festive skin. */
#home-page .awards,
#home-page .workTogether { position: relative; isolation: isolate; }

#home-page .awards::before,
#home-page .workTogether::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 60% at 50% 0%,   rgba(76, 29, 149, .40), transparent 70%),
    radial-gradient(70% 55% at 15% 100%, rgba(247, 148, 29, .26), transparent 72%),
    radial-gradient(70% 55% at 85% 100%, rgba(251, 191, 36, .22), transparent 72%),
    linear-gradient(to bottom, rgba(7, 6, 14, .80), rgba(7, 6, 14, .66));
}

#home-page .awards > .container,
#home-page .awards > .container-fluid { position: relative; z-index: 1; }

/* --- Typography: cream headings, muted violet-grey body --------------- */
#home-page h1, #home-page h2, #home-page h3,
#home-page h4, #home-page h5, #home-page h6 {
  color: var(--fest-cream);
}

#home-page p,
#home-page li,
#home-page span:not([class*="icon"]):not([class*="fa"]) {
  color: var(--fest-muted);
}

/* Section eyebrow / accent text keeps the marigold glow. */
#home-page .sectionTitle span,
#home-page .subTitle,
#home-page .title span {
  color: var(--fest-gold);
  text-shadow: 0 0 18px rgba(251, 191, 36, .45);
}

/* --- Cards & panels: carved stone lit by a nearby lamp ----------------- */
#home-page .card,
#home-page .plan .planBox,
#home-page .solution .solutionBox,
#home-page .whyUs .testimonialBox,
#home-page .technology .techBox,
#home-page .certificates .certificateBox {
  background: linear-gradient(180deg, var(--fest-night-3), var(--fest-night-2)) !important;
  border: 1px solid rgba(168, 85, 247, .18);
  border-radius: 14px;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(251, 191, 36, .10);
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

#home-page .card:hover,
#home-page .plan .planBox:hover,
#home-page .solution .solutionBox:hover,
#home-page .technology .techBox:hover {
  border-color: rgba(251, 191, 36, .45);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, .65),
    0 0 36px rgba(247, 148, 29, .28),
    inset 0 1px 0 rgba(251, 191, 36, .18);
  transform: translateY(-4px);
}

/* Logos and partner marks were drawn for a light page — lift them. */
#home-page .partners img,
#home-page .parTners img,
#home-page .certificates img,
#home-page .technology img {
  filter: brightness(1.9) contrast(.92) saturate(.85);
  opacity: .9;
}

/* --------------------------------------------------------------------------
   2. Ambient canvas — bats, embers, diya flames, sparkles, fireworks
   -------------------------------------------------------------------------- */
/* Absolute, not fixed. A fixed canvas is positioned against the viewport, so
   the particle layer stayed welded to the screen and was painted over every
   section the visitor scrolled to — bats and fireworks across the partners
   logos, the testimonials and the contact form. Anchored to .banner (which is
   already position: relative) the scene stays in the hero where it belongs
   and scrolls away with it. */
#home-page .fest-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  /* The canvases repaint continuously, so they are told that nothing inside
     them can affect anything outside — each frame's damage stays in the
     canvas instead of inviting the browser to re-evaluate the page content
     stacked around it. `layout paint` rather than `strict`: strict also
     applies size containment, which would force the element to a zero
     intrinsic size and fight the inset-based sizing above. */
  contain: layout paint;
  will-change: transform;
}

#home-page .fest-canvas--far  { z-index: 2; }
#home-page .fest-canvas--near { z-index: 4; }

/* The page-wide firework sky. Unlike .fest-canvas this one IS fixed, and for
   the opposite reason: the hero scene is a scene, tied to the thing it
   decorates, while this is weather. It covers one viewport no matter how long
   the page is, and the shells are placed in viewport space, so whichever
   section the visitor has scrolled to is the one with a sky over it.

   The element is created by the script and appended to #home-page, so it does
   not exist for a visitor with JS off and nothing here needs a fallback.

   z-index 0, not a positive value and not -1. The sections were repainted
   opaque in section 1 above, so a layer *behind* them would never be seen at
   all; but their content containers sit at z-index 1 and the sections
   themselves are `position: relative` with no z-index of their own, which
   means they open no stacking context and everything here competes globally.
   Zero is the one value that lands between the two: above every section's
   night-coloured background, below every heading, card and button. A burst
   therefore passes behind the content the way a real sky does, instead of
   washing across the text. */
#home-page .fest-sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  /* Each frame's damage is confined to the canvas instead of inviting the
     browser to re-evaluate the page stacked around it — which matters more
     here than on the hero canvases, because this one overlaps every section
     on the page rather than a single block. */
  contain: layout paint;
  /* No will-change. A fixed, full-viewport layer promoted for the life of the
     session holds a screen-sized GPU texture permanently, and this canvas is
     idle between bursts — the hero's canvases are promoted because they
     repaint continuously, this one does not. */
}

#home-page #coustom-header { position: relative; z-index: 20; }

/* The festoon now hangs below the nav bar, past its own box. Nothing in the
   header may clip it, and the bar keeps its own backdrop above the string's
   wire so the lights read as hanging in front of the hero, not inside the
   menu. */
#home-page #coustom-header .btmHead { overflow: visible; }

/* --------------------------------------------------------------------------
   3. Hero — moonlit sky, drifting fog, corner cobwebs
   -------------------------------------------------------------------------- */
#home-page .banner { overflow: visible; position: relative; }

/* Night grade over the hero media: violet sky above, ember pools below. */
#home-page .banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(60% 42% at 78% 14%, rgba(226, 232, 240, .18), transparent 62%),
    radial-gradient(120% 80% at 50% 0%,  rgba(76, 29, 149, .32),   transparent 64%),
    radial-gradient(90% 70% at 10% 100%, rgba(247, 148, 29, .24),  transparent 70%),
    radial-gradient(90% 70% at 90% 100%, rgba(251, 191, 36, .20),  transparent 70%),
    linear-gradient(to bottom, rgba(7, 6, 14, .44), rgba(7, 6, 14, .12) 45%, rgba(7, 6, 14, .56));
}

/* The hero photograph itself is graded to night so the overlay has
   something cold to sit on rather than a bright daylight image. */
#home-page .banner img,
#home-page .banner video {
  filter: brightness(.88) contrast(1.04) saturate(.95) hue-rotate(-4deg);
}

/* --- Harvest moon, hazed and haloed ------------------------------------ */
#home-page .fest-moon {
  position: absolute;
  top: 13%;
  right: 13%;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(circle at 38% 34%, rgba(255, 250, 235, .30) 0 6%, transparent 7%),
    radial-gradient(circle at 62% 58%, rgba(214, 203, 180, .28) 0 5%, transparent 6%),
    radial-gradient(circle at 46% 70%, rgba(214, 203, 180, .22) 0 4%, transparent 5%),
    radial-gradient(circle at 40% 36%, #fff8e7, #f7e2b0 58%, #e8c88a 100%);
  box-shadow:
    0 0 60px 18px rgba(251, 215, 150, .40),
    0 0 160px 60px rgba(247, 148, 29, .22);
}

/* The moon's halo used to pulse by animating `box-shadow` itself. A box-shadow
   is painted, not composited, so every frame re-blurred a ~380px spread on the
   main thread for the whole 9s cycle, non-stop.

   The same swell now comes from a pseudo-element carrying the two glows at
   their bright extreme, faded in and out with `opacity` — the one property
   the compositor can animate on its own thread at no paint cost. The disc
   keeps its base box-shadow, so the halo still runs between the old dim and
   bright values; it is the same light, driven by a cheaper property. */
#home-page .fest-moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 76px 26px rgba(251, 215, 150, .52),
    0 0 200px 80px rgba(247, 148, 29, .30);
  animation: festMoonGlow 9s ease-in-out infinite;
  will-change: opacity;
}

@keyframes festMoonGlow {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* --- Ground fog: two offset layers drifting in opposite directions ----- */
#home-page .fest-fog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

#home-page .fest-fog span {
  position: absolute;
  left: -50%;
  width: 200%;
  height: 100%;
  background:
    radial-gradient(45% 55% at 20% 85%, rgba(196, 181, 253, .10), transparent 72%),
    radial-gradient(40% 50% at 55% 95%, rgba(226, 232, 240, .09), transparent 72%),
    radial-gradient(50% 60% at 85% 88%, rgba(247, 148, 29, .08), transparent 72%);
  filter: blur(14px);
  animation: festDrift 42s linear infinite;
  /* The layer is twice the hero's width and carries a 14px blur, and it is
     translated for the whole life of the page. Promoting it lets the blur be
     rasterised once and the result slid by the compositor; without this the
     browser re-blurs a 200%-wide surface on the main thread every frame of a
     42s loop that never ends. The gradients inside it never change, so the
     cached texture stays valid for as long as the hero is on screen. */
  will-change: transform;
}

#home-page .fest-fog span:nth-child(2) {
  animation-duration: 64s;
  animation-direction: reverse;
  opacity: .7;
  transform: scaleY(.8);
}

@keyframes festDrift {
  from { transform: translateX(-12%); }
  to   { transform: translateX(12%); }
}

/* --------------------------------------------------------------------------
   4. Festoon light string — Diwali diyas on a Halloween bramble wire
   -------------------------------------------------------------------------- */
#home-page .fest-lights {
  position: absolute;
  left: 0;
  right: 0;
  /* Hangs off the bottom edge of the nav bar rather than sitting inside it,
     so the bar's own height and backdrop blur are untouched and the string
     reads as strung across the front of the menu. */
  top: 100%;
  height: 46px;
  pointer-events: none;
  z-index: 12;
  /* The bulbs' outer bloom now spreads further than the strip is tall, so the
     box can no longer clip in both axes. Only the horizontal overflow needs
     hiding (the wire runs 2% past each edge); the vertical is given a generous
     margin so the glow can wash into the scene above and below the string.
     `overflow-y: visible` would not work here — mixing it with a clipped
     x-axis makes the browser compute this one to `auto` and fit a scrollbar,
     so `clip` plus a margin is what keeps the bloom and loses the bar. */
  overflow: clip;
  overflow-clip-margin: 60px;
}

/* Browsers without `overflow: clip` fall back to clipping both axes, which
   costs the outer bloom but never shows a scrollbar. */
@supports not (overflow: clip) {
  #home-page .fest-lights { overflow: hidden; }
}

#home-page .fest-lights::before {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 11px;
  height: 16px;
  border-bottom: 2px solid rgba(63, 42, 18, .95);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .85));
}

#home-page .fest-lights i {
  position: absolute;
  top: 22px;
  width: 13px;
  height: 19px;
  border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
  background:
    radial-gradient(circle at 36% 28%, #fffdf5 0 22%, var(--bulb, var(--fest-gold)) 72%);
  /* Three rings of bloom: a hot rim on the glass, the lamp's own halo, and a
     wide wash that reaches the wire and the dark behind it. A real bulb lights
     its surroundings, and that outermost ring is what sells it as a light
     source rather than a coloured dot. */
  box-shadow:
    0 0 10px 2px var(--bulb, var(--fest-gold)),
    0 0 28px 9px color-mix(in srgb, var(--bulb, var(--fest-gold)) 55%, transparent),
    0 0 60px 22px color-mix(in srgb, var(--bulb, var(--fest-gold)) 26%, transparent);
  animation: festBulb 2.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  /* Forty bulbs, each pulsing a triple box-shadow whose outer ring spreads
     22px. The shadows are static (only opacity and scale animate), so
     promoting each bulb lets the compositor keep its rasterised glow and
     merely re-blend it — without this the forty overlapping blooms are
     re-painted together on the main thread every frame.

     `transform` alone, not `opacity` too: naming a property in will-change
     is what reserves the layer, and one is enough to get it. Listing both
     made the browser keep a second set of buffers per bulb for no gain —
     forty bulbs' worth of texture memory, which is what hurt on phones. */
  will-change: transform;
}

/* A tiny flame-tip on every fourth bulb reads as a lit diya wick. */
#home-page .fest-lights i.is-diya::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 7px;
  height: 15px;
  margin-left: -3.5px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: linear-gradient(to top, #fffdf5, var(--fest-gold) 42%,
              var(--fest-marigold) 72%, rgba(245,158,11,0));
  box-shadow:
    0 0 14px 4px rgba(251, 191, 36, .95),
    0 0 34px 13px rgba(245, 158, 11, .48);
  animation: festFlicker 1.1s ease-in-out infinite alternate;
}

/* The string never goes properly dark any more — a lit festoon dips and
   recovers, it doesn't blink off, so the trough sits well above half. */
@keyframes festBulb {
  0%, 100% { opacity: 1;   transform: scale(1.05); }
  50%      { opacity: .68; transform: scale(.94); }
}

@keyframes festFlicker {
  from { transform: scaleY(1)    translateY(0);    opacity: .9; }
  to   { transform: scaleY(1.28) translateY(-1px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   5. Hanging hero props — gothic bat and a lit clay diya
   -------------------------------------------------------------------------- */
#home-page .fest-prop {
  position: absolute;
  top: 70px;
  z-index: 13;
  pointer-events: none;
  width: 104px;
  opacity: .97;
}

#home-page .fest-prop svg { width: 100%; height: auto; display: block; }

#home-page .fest-prop--bat {
  left: 3%;
  transform-origin: 50% 0;
  animation: festSway 6s ease-in-out infinite;
  /* Three passes: a tight contact shadow under the wings, a soft ambient one
     further down, and only then the faint moon-silver rim. Both hanging props
     share the same two shadow distances, so they read as lit by one scene. */
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .8))
          drop-shadow(0 10px 20px rgba(0, 0, 0, .55))
          drop-shadow(0 0 14px rgba(196, 181, 253, .22));
}

/* The diya is the one light source hanging in the hero, so it keeps a warm
   halo - but at the same shadow distances as the bat, and small enough to
   read as a hand-sized clay lamp rather than a lantern. */
#home-page .fest-prop--diya {
  right: 4.5%;
  width: 112px;
  transform-origin: 50% 0;
  /* The lamp keeps the same two black shadow distances every other prop uses.
     Its two warm passes — the tight gold rim on the clay and the wide ember
     bloom thrown into the air — have moved to the ::after glow layer below,
     which is what breathes; leaving them here as well would double the
     warmth. The pair there run between the same dim and bright extremes the
     animated filter used to interpolate across. */
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .8))
          drop-shadow(0 10px 20px rgba(0, 0, 0, .55));
  /* Only the sway is animated on the lamp itself now. The halo's breathe used
     to animate `filter`, which meant re-running all four drop-shadow blurs —
     one of them an 82px spread — on every frame of a 3.4s cycle that never
     stopped. The swell is now a separate glow layer below, cross-faded with
     `opacity` instead. */
  animation: festSway 7.2s ease-in-out infinite reverse;
}

/* A lamp's output is not constant — the halo swells and settles with the
   flame rather than sitting at one fixed brightness. This pseudo-element
   carries the warm halo on its own and fades between the dim and bright
   extremes the filter used to interpolate between, so the light still breathes
   but the blur is rasterised once and only its opacity changes.

   It is sized to the lamp and left transparent: the glow is entirely in the
   box-shadow, so nothing new is drawn over the artwork. */
#home-page .fest-prop--diya::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 34%;
  bottom: 18%;
  border-radius: 50%;
  pointer-events: none;
  /* The halo sits behind the lamp artwork but must stay inside this element's
     own stacking context, or a negative z-index would drop it behind the
     section background entirely. `.fest-prop` carries a z-index of its own,
     which establishes that context, so -1 here is scoped to the lamp. */
  z-index: -1;
  box-shadow:
    0 0 32px 2px rgba(251, 191, 36, .92),
    0 0 82px 10px rgba(247, 148, 29, .58);
  animation: festDiyaBreathe 3.4s ease-in-out infinite alternate;
  will-change: opacity;
}

@keyframes festDiyaBreathe {
  from { opacity: .55; }
  to   { opacity: 1; }
}

/* The diya flame breathes independently of the lamp's sway. */
#home-page .fest-prop--diya .fest-flame {
  /* The flame pivots about its base, where the wick meets the ghee, in the
     diya SVG's own 76x92 user units. */
  transform-origin: 38px 39px;
  animation: festFlameDance 1.4s ease-in-out infinite alternate;
}

/* A flame leans as it reaches, so the dance carries a small rotation as well
   as the stretch — it tips one way as it draws up and back as it settles. */
@keyframes festFlameDance {
  from { transform: scale(.96, .9)   translateX(-.9px) rotate(-2deg); opacity: .9; }
  to   { transform: scale(1.12, 1.2) translateX(.9px)  rotate(2deg);  opacity: 1; }
}

@keyframes festSway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* --------------------------------------------------------------------------
   5b. Carved jack-o'-lanterns
   A lit pumpkin is two parts: the artwork, and a blurred ember behind it
   standing in for the candle inside. Animating them separately lets the
   lantern settle on its base while the light keeps guttering.
   -------------------------------------------------------------------------- */
#home-page .fest-pumpkin {
  position: absolute;
  /* Clear of the bottom edge of the hero, plus an optional lift for a lantern
     standing further back in the scene. */
  bottom: calc(38px + var(--pk-lift, 0px));
  width: var(--pk-size, 170px);
  pointer-events: none;
  z-index: 12;
  animation: festPumpkinSettle 5.5s ease-in-out infinite;
  animation-delay: var(--pk-delay, 0s);
}

#home-page .fest-pumpkin--left  { left: 3.5%; }
#home-page .fest-pumpkin--right { right: 3.5%; transform: scaleX(-1); }

#home-page .fest-pumpkin picture {
  position: relative;
  z-index: 1;
  display: block;
}

#home-page .fest-pumpkin__img {
  display: block;
  width: 100%;
  height: auto;
  /* Warm the artwork to the skin's lamplight and sink it into the night.
     Same shadow distances and warm-rim strength as the hanging diya, so the
     lanterns on the floor and the lamp overhead agree on one light. */
  filter: saturate(1.06) contrast(1.02) brightness(1.06)
          drop-shadow(0 6px 14px rgba(0, 0, 0, .7))
          drop-shadow(0 14px 28px rgba(0, 0, 0, .45))
          drop-shadow(0 0 18px rgba(247, 148, 29, .34));
}

/* The candle glow: a pool of light that leaks out of the carved face. */
#home-page .fest-pumpkin__glow {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 150%;
  height: 90%;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(255, 196, 94, .40), rgba(247, 148, 29, .16) 55%, transparent 78%);
  filter: blur(16px);
  animation: festCandle 2.6s ease-in-out infinite;
  animation-delay: var(--pk-delay, 0s);
}

/* A lantern sitting on the ground only breathes — it never swings. */
@keyframes festPumpkinSettle {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(-1deg); }
}

/* The right-hand lantern is mirrored, so it needs the flip kept in its keyframes. */
#home-page .fest-pumpkin--right { animation-name: festPumpkinSettleFlip; }

@keyframes festPumpkinSettleFlip {
  0%, 100% { transform: scaleX(-1) translateY(0)    rotate(0deg); }
  50%      { transform: scaleX(-1) translateY(-4px) rotate(-1deg); }
}

@keyframes festCandle {
  0%, 100% { opacity: .78; transform: translateX(-50%) scale(1); }
  35%      { opacity: 1;   transform: translateX(-50%) scale(1.07); }
  62%      { opacity: .66; transform: translateX(-50%) scale(.96); }
}

/* --------------------------------------------------------------------------
   6. Rangoli accents on existing sections (additive, never layout)
   -------------------------------------------------------------------------- */
#home-page .whoWeAre,
#home-page .solution,
#home-page .plan,
#home-page .workTogether,
#home-page .partners,
#home-page .certificates,
#home-page .whyUs,
#home-page .awards,
#home-page .parTners {
  position: relative;
  /* The decorative layer must never add a scrollbar: every rangoli hangs past
     its section's edge by design, so each host clips its own overflow. */
  overflow: hidden;
}

#home-page .fest-rangoli {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 430px;
  /* A rangoli is chalk and petals pressed onto a floor, so it stays soft-edged
     rather than glowing like a light source — but the diyas ringing it are
     real flames, so the figure carries a warm bloom and swells gently as
     though those lamps were guttering. It still turns slowly enough that the
     eye reads it as still. */
  opacity: .34;
  filter: blur(.3px)
          drop-shadow(0 0 32px rgba(247, 148, 29, .42))
          drop-shadow(0 0 84px rgba(251, 191, 36, .2));
  animation: festSpin 160s linear infinite,
             festRangoliGlow 6.5s ease-in-out infinite;
}

@keyframes festRangoliGlow {
  0%, 100% { opacity: .3; }
  50%      { opacity: .46; }
}

#home-page .fest-rangoli svg { width: 100%; height: auto; display: block; }
#home-page .fest-rangoli--left  { left: -120px;  bottom: -95px; }
/* Two directions, one per animation in the shorthand above: the spin runs
   backwards so the pair counter-rotate, the glow keeps its normal cycle. */
#home-page .fest-rangoli--right {
  right: -120px;
  top: -95px;
  animation-direction: reverse, normal;
}

@keyframes festSpin { to { transform: rotate(360deg); } }

/* Keep every section's real content above the decorative layer. */
#home-page .whoWeAre > .container,
#home-page .whoWeAre > .container-fluid,
#home-page .solution > .container,
#home-page .solution > .container-fluid,
#home-page .plan > .container,
#home-page .plan > .container-fluid,
#home-page .workTogether > .container,
#home-page .workTogether > .container-fluid,
#home-page .partners > .container,
#home-page .partners > .container-fluid,
#home-page .certificates > .container,
#home-page .certificates > .container-fluid,
#home-page .whyUs > .container,
#home-page .whyUs > .container-fluid,
#home-page .awards > .container,
#home-page .awards > .container-fluid,
#home-page .parTners > .container,
#home-page .parTners > .container-fluid { position: relative; z-index: 1; }

/* Size and placement variants. One rangoli repeated at a single scale down the
   page reads as a tiled background rather than as decoration, so the accents
   step between three sizes and the corners alternate; the smaller ones are
   also dimmer, which is what keeps them reading as further back rather than
   just smaller. The custom property feeds the shared pulse below, so a variant
   only has to state its own resting opacity once. */
#home-page .fest-rangoli--sm { width: 260px; --fest-rangoli-peak: .3; }
#home-page .fest-rangoli--xs { width: 180px; --fest-rangoli-peak: .24; }

#home-page .fest-rangoli--sm,
#home-page .fest-rangoli--xs {
  /* Less blur spread on the small ones: the big halo is sized for a 430px
     figure, and at a third of that it swamps the mandala itself. */
  filter: blur(.3px) drop-shadow(0 0 18px rgba(247, 148, 29, .36));
  animation: festSpin 200s linear infinite,
             festRangoliGlowSoft 7.5s ease-in-out infinite;
}

@keyframes festRangoliGlowSoft {
  0%, 100% { opacity: .18; }
  50%      { opacity: var(--fest-rangoli-peak, .3); }
}

/* Corner placements beyond the original two, so consecutive sections don't
   stack their accents in the same column. */
#home-page .fest-rangoli--top-left     { left: -70px;  top: -60px; }
#home-page .fest-rangoli--top-right    { right: -70px; top: -60px; }
#home-page .fest-rangoli--bottom-left  { left: -70px;  bottom: -60px; }
#home-page .fest-rangoli--bottom-right { right: -70px; bottom: -60px; }
#home-page .fest-rangoli--mid-left     { left: -80px;  top: 40%; }
#home-page .fest-rangoli--mid-right    { right: -80px; top: 36%; }

/* Counter-rotate the right-hand accents so a pair sharing a screen doesn't
   turn in lockstep. */
#home-page .fest-rangoli--top-right,
#home-page .fest-rangoli--bottom-right,
#home-page .fest-rangoli--mid-right { animation-direction: reverse, normal; }

/* --- Off-screen pause ---------------------------------------------------
   Each accent runs a rotation and an opacity pulse forever. A dozen of them
   compositing at once is the one real cost this adds, and most are outside
   the viewport at any moment, so festive-home.js toggles this class and the
   browser stops compositing all but the few on screen. The class is only ever
   added to elements the observer has seen, so without JS — or without
   IntersectionObserver — every accent simply animates as it did before. */
#home-page .fest-rangoli.is-paused {
  animation-play-state: paused;
  /* Dropping the promotion hint on a paused layer lets the compositor release
     its texture instead of holding one per accent. */
  will-change: auto;
}
/* --------------------------------------------------------------------------
   7. Lit CTA — the brand button as a lamp in the dark
   -------------------------------------------------------------------------- */
#home-page .siteBtn {
  box-shadow:
    0 0 0 1px rgba(247, 148, 29, .45),
    0 0 30px rgba(251, 191, 36, .42);
  transition: box-shadow .35s ease, transform .35s ease;
}

#home-page .siteBtn:hover {
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, .8),
    0 0 44px rgba(247, 148, 29, .62);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   8. Responsive + accessibility
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #home-page .fest-moon { width: 86px; height: 86px; top: 11%; right: 9%; }
  #home-page .fest-prop--diya { width: 88px; }
  #home-page .fest-rangoli     { width: 320px; }
  #home-page .fest-rangoli--sm { width: 210px; }
  #home-page .fest-rangoli--xs { width: 150px; }
}

@media (max-width: 767px) {
  #home-page .fest-prop        { top: 62px; }
  #home-page .fest-prop--bat   { width: 64px; left: 2%; }
  #home-page .fest-prop--diya  { width: 66px; right: 3%; }
  /* The glow animation drives opacity, so a static value here would be
     overridden — the phone's dimmer rangoli has to come from its own,
     lower-amplitude pulse instead. */
  #home-page .fest-rangoli {
    width: 225px;
    animation: festSpin 160s linear infinite,
               festRangoliGlowSm 6.5s ease-in-out infinite;
  }

  @keyframes festRangoliGlowSm {
    0%, 100% { opacity: .22; }
    50%      { opacity: .32; }
  }

  /* Phones get the fewest accents and the faintest ones: below this width the
     page is a single column, so a background figure has nowhere to sit that
     isn't directly behind the copy. The smallest tier drops out entirely
     rather than being shrunk again — a 110px mandala is noise, not
     decoration, and each one still costs a composited layer. */
  #home-page .fest-rangoli--sm { width: 150px; }
  #home-page .fest-rangoli--xs { display: none; }
  #home-page .fest-lights      { height: 34px; }
  #home-page .fest-lights i    { width: 10px; height: 14px; top: 17px; }
  /* Forty bulbs across a phone's width sit closer together than their own
     glow is wide, so half of them are only brightening their neighbours.
     Dropping every other one halves the promoted layers and the overlapping
     bloom — the heaviest thing the skin asks of a phone GPU — and at this
     spacing the string still reads as continuous. */
  #home-page .fest-lights i:nth-child(2n) { display: none; }
  #home-page .fest-lights::before { top: 8px; height: 12px; }
  #home-page .fest-moon        { width: 68px; height: 68px; }
  #home-page .fest-fog         { height: 34%; }
  /* On phones the lanterns would sit over the hero copy, so they shrink and
     tuck right into the corners. */
  #home-page .fest-pumpkin {
    width: calc(var(--pk-size, 170px) * .5);
    bottom: calc(28px + var(--pk-lift, 0px) * .5);
  }
  #home-page .fest-pumpkin--left  { left: 0; }
  #home-page .fest-pumpkin--right { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #home-page .fest-lights i,
  #home-page .fest-lights i.is-diya::after,
  #home-page .fest-prop--bat,
  #home-page .fest-prop--diya,
  #home-page .fest-prop--diya .fest-flame,
  #home-page .fest-moon,
  #home-page .fest-fog span,
  #home-page .fest-rangoli,
  #home-page .fest-pumpkin,
  #home-page .fest-pumpkin__glow,
  /* The moon's halo and the lamp's breathe now run on pseudo-elements, so
     they have to be named here too — stopping the animation on the parent
     does not stop one on its ::after. */
  #home-page .fest-moon::after,
  #home-page .fest-prop--diya::after { animation: none; }
  /* Keep the mirrored lantern flipped once its animation is off. */
  #home-page .fest-pumpkin--right { transform: scaleX(-1); }
  /* With the breathe animation off, both the moon's halo layer and the lamp's
     are held at the bright end of their cycle rather than wherever the paused
     animation left them: a still scene should read as lit, not dimmed. The
     warm glow itself lives on the ::after layer now, so it is pinned there
     instead of being restated as a filter on the lamp (which would double it). */
  #home-page .fest-moon::after,
  #home-page .fest-prop--diya::after { opacity: 1; }
  /* Likewise the rangoli keeps the mid-point of its pulse — the small accents
     at their own, lower mid-point so the depth they get from being dimmer
     survives with the animation off. */
  #home-page .fest-rangoli { opacity: .36; }
  #home-page .fest-rangoli--sm,
  #home-page .fest-rangoli--xs { opacity: .24; }
  #home-page .fest-canvas { display: none; }
  /* The script never creates the sky under reduced motion, but the rule is
     kept so the two canvas layers stay honest about the same preference. */
  #home-page .fest-sky { display: none; }
  /* Nothing moves in here, so the compositor layers the animated elements
     asked for are pure cost — on the festoon that is forty of them. Released
     so a reduced-motion visitor carries none of the skin's GPU memory. */
  #home-page .fest-lights i,
  #home-page .fest-fog span,
  #home-page .fest-moon::after,
  #home-page .fest-prop--diya::after { will-change: auto; }
}

/* ==========================================================================
   9. Legibility pass — make every text, control and card readable on the
      dark skin.

   The sections above repaint the page as night, but the underlying theme was
   written for a white page: its body copy, card links, buttons and form
   fields are all near-black, and several homepage sections carry an inline
   `style="background: var(--lightBg)"` that outranks any background-color
   rule in this file. This block closes both gaps. It changes colour only —
   no layout, no spacing — and stays scoped to #home-page.
   ========================================================================== */

/* --- 9.1 Sections whose light background is set inline ------------------
   Two sections carry `style="background: var(--lightBg)"`, which beats the
   background-color rule in section 1 and leaves them cream-white under the
   dark text this skin applies. An `!important` declaration in a stylesheet
   does outrank a normal inline one, so an opaque gradient laid over the
   inline fill is what hides it — the colour underneath stops mattering once
   the first layer is fully opaque. */
#home-page section[style*="lightBg"] {
  background-image:
    linear-gradient(var(--fest-night-2), var(--fest-night-2)),
    radial-gradient(90% 60% at 50% 100%, rgba(247, 148, 29, .10), transparent 70%) !important;
}

/* --- 9.2 Header and footer are inside #home-page -----------------------
   Both are shared layout partials, so the dark wash and the muted-text rule
   reach them even though they were never part of the festive skin. They keep
   their own backgrounds; only the text they inherit needs correcting. */
#home-page header#coustom-header,
#home-page footer {
  background-color: transparent !important;
  color: var(--fest-text);
}

/* `:not(.btn)` matters here: the header holds a filled Bootstrap button
   ("Our Saas", .btn-success) whose green fill needs a dark label. Without
   the exclusion this blanket rule repaints that label light and drops it to
   2.1:1 — the skin would be the thing breaking the button. The same applies
   to any filled .btn dropped into the header or footer later. */
#home-page header#coustom-header a:not(.btn),
#home-page header#coustom-header span:not(.btn),
#home-page header#coustom-header li,
#home-page footer a:not(.btn),
#home-page footer p,
#home-page footer li,
#home-page footer span:not(.btn) {
  color: var(--fest-text) !important;
}

#home-page header#coustom-header a:not(.btn):hover,
#home-page footer a:not(.btn):hover { color: var(--fest-gold) !important; }

/* The mobile nav drawer paints its own panel; keep it dark so its light
   text still has something to sit on. */
#home-page .stellarnav ul ul { background: var(--fest-night-2) !important; }

/* --- 9.3 Body copy -----------------------------------------------------
   Section 1 muted every <p>, <li> and <span>. --fest-muted (#a79fbd) on
   --fest-night-2 (#0d0b1a) is around 7:1, which is fine, but the blanket
   `span` rule also caught spans that are badges, counters and button
   labels. Those are restored to their own colours below, and body copy is
   lifted slightly so long paragraphs stay comfortable. */
#home-page p,
#home-page li { color: #c3bcd6; }

/* The theme colours these with brand blue and green, both of which go
   muddy against near-black. Lightened to the same hues at higher value. */
#home-page .text-primary { color: #4cc9f5 !important; }
#home-page .text-secondary { color: #a8d93d !important; }
#home-page .counter-value { color: #4cc9f5 !important; }

/* Counter labels sit under the big numbers and must not fade out. */
#home-page .count-area-content p,
#home-page .count-area-content span { color: var(--fest-cream) !important; }

/* --- 9.4 Service / solution cards --------------------------------------
   `.box a` is the whole card: it sets colour #010a24 and a shadow tuned for
   white. On the night surface that is black text on near-black. */
#home-page .box a {
  background: linear-gradient(180deg, var(--fest-night-3), var(--fest-night-2)) !important;
  color: var(--fest-text) !important;
  border: 1px solid rgba(168, 85, 247, .18);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(251, 191, 36, .10) !important;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

#home-page .box a:hover {
  border-color: rgba(251, 191, 36, .45);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, .65),
    0 0 36px rgba(247, 148, 29, .28) !important;
  transform: translateY(-4px);
}

#home-page .box a h3 { color: var(--fest-cream) !important; }
#home-page .box a p  { color: #c3bcd6 !important; }

/* --- 9.5 Buttons -------------------------------------------------------
   .siteBtn is brand green with a near-black label. The green fill is light
   enough that the dark label on it is the correct pairing, so the issue is
   not the label but the fill: brand green against this skin reads as a flat
   patch. It is repainted to the festive orange, which keeps the dark label
   legible (around 9:1) and matches the lamplight the rest of the skin uses.
   .blackBtn inherits the same dark label, so it is covered by this rule. */
#home-page .siteBtn {
  background: var(--fest-orange) !important;
  border-color: var(--fest-gold) !important;
  color: #1a1206 !important;
}

#home-page .siteBtn:hover {
  background: var(--fest-gold) !important;
  border-color: var(--fest-cream) !important;
  color: #1a1206 !important;
}

/* The arrow icons inside buttons are PNGs drawn for a light button. Darkened
   to match the label's weight on the orange fill rather than glaring on it. */
#home-page .siteBtn img { filter: brightness(.25) contrast(1.2); }

/* Bootstrap buttons used in the testimonial modal and elsewhere. */
#home-page .btn-primary {
  background-color: var(--fest-orange) !important;
  border-color: var(--fest-gold) !important;
  color: #1a1206 !important;
}

/* "Read more" links are plain #000 underlined text. */
#home-page .read-more,
#home-page .read-more-testimonial {
  color: var(--fest-gold) !important;
  text-decoration-color: rgba(251, 191, 36, .5);
}

#home-page .__testimonialBtn { color: var(--fest-gold) !important; }

/* --- 9.6 Form fields ---------------------------------------------------
   Inputs default to a white fill with dark text — legible, but an abrupt
   white slab on the night section. Repainted to match the skin, with a
   placeholder that clears 4.5:1 (the theme sets it to #000 on white). */
#home-page .form-control {
  background-color: rgba(20, 16, 38, .92) !important;
  border: 1px solid rgba(168, 85, 247, .35) !important;
  color: var(--fest-text) !important;
}

#home-page .form-control:focus {
  border-color: var(--fest-gold) !important;
  box-shadow: 0 0 0 .2rem rgba(251, 191, 36, .25) !important;
  background-color: rgba(20, 16, 38, .98) !important;
}

#home-page .form-control::placeholder,
#home-page .newsLwttwr input::placeholder {
  color: #9c93b5 !important;
  opacity: 1;
}

/* --- 9.7 Testimonials and quotes ---------------------------------------
   `.quotes h4` is set to --bs-secondary, a mid grey that lands near 3:1 on
   the night surface. The quote marks are brand-coloured icons. */
#home-page .quotes h4 {
  color: var(--fest-cream) !important;
  border-left-color: var(--fest-gold) !important;
}

#home-page .quotes p,
#home-page .sliderContent p { color: #c3bcd6 !important; }

#home-page .fa-quote-left,
#home-page .fa-quote-right { color: rgba(251, 191, 36, .55) !important; }

#home-page .testimonial-info,
#home-page .testimonial-info * { color: var(--fest-text) !important; }

/* --- 9.8 Modal ---------------------------------------------------------
   Bootstrap keeps a white panel. The modal opens above the skin rather than
   inside it, so it is given the same night surface for consistency. */
#home-page .modal-content {
  background: linear-gradient(180deg, var(--fest-night-3), var(--fest-night-2)) !important;
  border: 1px solid rgba(168, 85, 247, .3);
  color: var(--fest-text);
}

#home-page .modal-content p,
#home-page .modal-title { color: var(--fest-text) !important; }

/* The close glyph is a black SVG mask; invert it so it shows on the panel. */
#home-page .modal-content .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

/* --- 9.9 Swiper controls -----------------------------------------------
   The arrows and pagination dots are drawn in the brand dark and vanish. */
#home-page .swiper-button-next,
#home-page .swiper-button-prev { color: var(--fest-gold) !important; }

#home-page .swiper-pagination-bullet {
  background: var(--fest-muted) !important;
  opacity: .5;
}

#home-page .swiper-pagination-bullet-active {
  background: var(--fest-gold) !important;
  opacity: 1;
}

/* --- 9.10 Logo walls ---------------------------------------------------
   Section 1 brightens partner, certificate and technology logos by 1.9.
   That rescues dark monochrome marks but blows out logos that were already
   light or full-colour. Restoring the light card each logo was drawn for is
   the more reliable fix: every mark then reads whatever its own colours. */
#home-page .partners img,
#home-page .parTners img,
#home-page .certificates img,
#home-page .technology img {
  filter: none;
  opacity: 1;
  background: rgba(255, 255, 255, .93);
  border-radius: 10px;
  padding: 6px;
}

#home-page .prtner p,
#home-page .partners p { color: #c3bcd6 !important; }

/* --- 9.11 Decorative orbit graphics ------------------------------------
   The orbit rings are faint grey, chosen against white. */
#home-page .jupiters-orbit,
#home-page .saturns-orbit,
#home-page .uranus-orbit { border-color: rgba(168, 85, 247, .25) !important; }

/* --- 9.12 Keep content above the decorative layers ---------------------
   The rangoli and section glows sit at z-index 0 inside positioned sections.
   Section 6 lifts the content of the four sections it decorates; the rest
   gained `position: relative` from section 1 and need the same treatment, or
   content can fall behind a decoration. */
#home-page .technology > .container,
#home-page .technology > .container-fluid,
#home-page .whyUs > .container,
#home-page .whyUs > .container-fluid,
#home-page .certificates > .container,
#home-page .certificates > .container-fluid,
#home-page .partners > .container,
#home-page .partners > .container-fluid,
#home-page .awards > .container,
#home-page .awards > .container-fluid {
  position: relative;
  z-index: 1;
}

/* --- 9.13 Links and buttons the audit caught dark-on-dark --------------
   Found by measuring computed contrast in the rendered page rather than by
   reading the stylesheets, because both inherit their colour from a theme
   rule that never names them.

   The "start a collaboration" link is a bare <a> inside an <h4>. It takes
   the theme's --primary-color (#010a24) and lands at 1.19:1 on the night
   section — present in the DOM but invisible on screen. Any unclassed link
   sitting directly in a heading is in the same position, so the rule is
   written for that shape rather than for the one phrase. */
#home-page h2 > a,
#home-page h3 > a,
#home-page h4 > a,
#home-page h5 > a {
  color: var(--fest-gold) !important;
}

#home-page h2 > a:hover,
#home-page h3 > a:hover,
#home-page h4 > a:hover,
#home-page h5 > a:hover {
  color: var(--fest-cream) !important;
}

/* The arrow glyph beside that link is a dark PNG drawn for a light page. */
#home-page h4 > a > img.img-fluid {
  filter: brightness(0) saturate(100%) invert(78%) sepia(42%)
          saturate(1100%) hue-rotate(344deg) brightness(102%) contrast(97%);
}

/* Bootstrap's .btn-success keeps its green fill, but section 9.3 recolours
   the text inside it to the light body colour, giving 2.13:1. The fill is
   bright, so the readable pairing is a dark label — matching .siteBtn. */
#home-page .btn-success {
  background-color: var(--green-color, #81ac02) !important;
  border-color: var(--green-color, #81ac02) !important;
  color: #11180a !important;
}

#home-page .btn-success:hover {
  background-color: var(--fest-gold) !important;
  border-color: var(--fest-gold) !important;
  color: #1a1206 !important;
}

/* --- 9.14 Counter cards on small screens -------------------------------
   responsive.css:1993 gives .count-area-content a light #f1f1f1 card below
   575px — a panel that only exists on phones, which is why the desktop pass
   never saw it. Section 9.3 paints the labels inside it cream, so on a phone
   they were cream on near-white at 1.06:1: invisible. The card is repainted
   to the skin's raised surface so the labels keep their contrast.

   Measured at a 390px viewport, where all four stat labels failed. */
@media screen and (max-width: 575px) {
  #home-page .count-area-content {
    background: linear-gradient(180deg, var(--fest-night-3), var(--fest-night-2)) !important;
    border: 1px solid rgba(168, 85, 247, .18);
    box-shadow:
      0 12px 28px rgba(0, 0, 0, .5),
      inset 0 1px 0 rgba(251, 191, 36, .10);
  }
}

/* --- 9.15 Third-party contact form (cross-origin iframe) ---------------
   The contact form is a LeadConnector widget in an iframe from another
   origin, so none of this stylesheet reaches inside it. Its own styling
   assumes the light page it was designed against: the consent-checkbox
   copy, the field labels and the small print are all dark text.

   The skin darkened the section behind it, and because the widget renders
   on a transparent background that dark photo showed straight through its
   dark text — the consent lines under the Message field were effectively
   unreadable. Since the text inside cannot be recoloured from here, the
   surface under it is restored to the light one the widget expects, which
   is also what makes its white input fields read as a single panel rather
   than four floating boxes.

   Scoped to the homepage contact widget by id so no other embed is hit. */
#home-page #inline-QrVsaAzt4NkOC5xnzn2I {
  background: #f4f7fe;
  border-radius: 10px;
  /* The widget sizes itself to its content; padding would be clipped, so a
     ring of the same colour supplies the visual gutter instead. */
  box-shadow: 0 0 0 14px #f4f7fe, 0 24px 60px rgba(0, 0, 0, .55);
  /* Clear of the glow ring so the card does not touch the heading above. */
  margin: 14px 0 28px;
}

/* The heading above the form sits on the same dark photo and keeps the
   skin's cream, so the pairing stays heading-on-night, form-on-light. */
#home-page .workTogether h3 { color: var(--fest-cream) !important; }

/* --- 9.20 Counter stat icons -------------------------------------------
   The four stat icons (globalclientserved, jobsucessrate, clientretensiorate,
   projectdeliverd) are flat line art drawn in the brand navy #010a24 for the
   original white page. On --fest-night-2 that is near-black on near-black, so
   on the festive skin they read as empty gaps beside the labels.

   They are single-colour PNGs with a transparent background, so inverting
   them flips only the strokes — navy becomes a pale off-white — and leaves
   the transparency alone. brightness() then lifts the result to the cream the
   labels already use, instead of a flat grey. A soft dark drop-shadow keeps
   the thin strokes separated from the bright bokeh and lantern glows that
   drift behind this row.

   Scoped to the counter list so the inversion cannot reach any other icon on
   the page; sizes and spacing are untouched. */
#home-page .count-area-content h6 img {
  filter:
    invert(1)
    brightness(1.9)
    drop-shadow(0 1px 2px rgba(0, 0, 0, .65));
}

/* --- 9.12 Mega-menu dropdowns are light panels inside a dark header ----
   Section 9.2 repaints every link, span and li in the header to --fest-text
   with !important, because the header's own backdrop is the night wash. The
   mega-menu panels are the exception: .navBar .dropdown-menu keeps its light
   #e4f1ff background from custom.css, so the inherited light text landed at
   about 1.05:1 and the whole panel read as blank on open.

   These rules re-scope the header override back out of the panels and restore
   the palette custom.css already defines for them — dark labels, brand-navy
   headings, green on hover. Colours only; no layout, spacing or background
   is touched, so the panels look exactly as they do off-season. */
#home-page header#coustom-header .navBar .dropdown-menu,
#home-page header#coustom-header .navBar .dropdown-menu h4,
#home-page header#coustom-header .navBar .dropdown-menu .nav-link,
#home-page header#coustom-header .navBar .dropdown-menu .tab-content li a,
#home-page header#coustom-header .navBar .dropdown-menu .xtra li a,
#home-page header#coustom-header .navBar .dropdown-menu .quotes strong,
#home-page header#coustom-header .navBar .dropdown-menu .quotes small {
  color: var(--bs-dark) !important;
}

/* The pull-quote keeps the grey custom.css gives it, not the label dark. */
#home-page header#coustom-header .navBar .dropdown-menu .quotes h4 {
  color: var(--bs-secondary) !important;
}

/* Panel section headings and the tab-list labels use the brand navy. */
#home-page header#coustom-header .navBar .dropdown-menu h6,
#home-page header#coustom-header .navBar .dropdown-menu .nav.flex-column {
  color: var(--primary-color) !important;
}

/* Body copy inside a panel: slightly lighter than the labels, as off-season. */
#home-page header#coustom-header .navBar .dropdown-menu p,
#home-page header#coustom-header .navBar .dropdown-menu li,
#home-page header#coustom-header .navBar .dropdown-menu span:not(.btn) {
  color: #333 !important;
}

/* The active and hovered tab label is brand green on the light panel (the
   fill is commented out in custom.css), and its caret matches. 9.2's blanket
   hover rule had turned both gold, which vanished against #e4f1ff. */
#home-page header#coustom-header .navBar .dropdown-menu .nav-link.active,
#home-page header#coustom-header .navBar .dropdown-menu .nav-link:hover,
#home-page header#coustom-header .navBar .dropdown-menu .nav-link.active i {
  color: var(--green-color) !important;
}

#home-page header#coustom-header .navBar .dropdown-menu .tab-content li a:hover,
#home-page header#coustom-header .navBar .dropdown-menu .xtra li a:hover {
  color: var(--green-color) !important;
}

/* The .menuRight promo tiles keep their own photographic background and were
   designed for white text, so they are excluded from the dark-label rules. */
#home-page header#coustom-header .navBar .dropdown-menu .menuRight h4,
#home-page header#coustom-header .navBar .dropdown-menu .menuRight p,
#home-page header#coustom-header .navBar .dropdown-menu .menuRight span:not(.btn) {
  color: var(--bs-white) !important;
}

/* --- 9.16 Header logo on the night wash --------------------------------
   The brand mark is dark navy lettering with a green monogram, drawn flat
   for the white off-season header. The festive skin replaces that header
   with the night wash, so the navy "WEB" and the "TECHNOLOGY PVT.LTD"
   strapline fall to roughly 1.4:1 against it and the mark reads as the
   green bug alone.

   The mark's own pixels are deliberately left alone: no filter, invert,
   recolour or brightness is applied, so the brand navy and green stay
   exactly as supplied. Legibility is restored by putting a soft light
   plate behind the logo instead, which is what the mark was drawn to sit
   on. The plate is sized by padding and is absolutely positioned behind
   the mark, so .logo keeps its 145px track (and the 121px/115px widths
   responsive.css sets) and nothing in the bar shifts. */
#home-page header#coustom-header .btmHeadInner .logo > a {
  position: relative;
  display: inline-block;
  z-index: 1;
}

#home-page header#coustom-header .btmHeadInner .logo > a::before {
  content: "";
  position: absolute;
  inset: -6px -10px;
  z-index: -1;
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  pointer-events: none;
}

/* The mark itself: untouched colours, just held to the track width and
   vertically centred against the nav items beside it. */
#home-page header#coustom-header .btmHeadInner .logo > a img {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
  opacity: 1;
}

/* --- 9.17 Footer logo on the night wash --------------------------------
   The footer carries the identical brand mark as the header (both render
   $setting->company_logo), and 9.2 makes the footer transparent over
   --fest-night (#07060e), so it has exactly the header's problem: the navy
   "WEB" and the "TECHNOLOGY PVT.LTD" strapline fall to roughly 1.3:1 and
   only the green monogram survives.

   Same remedy as 9.16, same reasoning: the mark's pixels are untouched —
   no filter, invert or recolour — and legibility comes from restoring the
   light surface the logo was drawn for. .flogo is an inline span, so it is
   made inline-block to give the plate a box to anchor to; the 150px width
   responsive.css sets at mobile is left alone, and the plate adds no
   layout box of its own, so the footer column does not move. */
#home-page footer .flogo {
  position: relative;
  display: inline-block;
  z-index: 1;
}

#home-page footer .flogo::before {
  content: "";
  position: absolute;
  inset: -6px -10px;
  z-index: -1;
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  pointer-events: none;
}

/* Colours as supplied; aspect ratio preserved. Unlike the header, .flogo
   has no desktop width of its own (responsive.css only sets 150px at the
   mobile breakpoint), so the image is sized intrinsically and merely
   capped — a flat width:100% here would stretch the mark to the whole
   footer column. max-width keeps it inside narrow columns, and the 150px
   rule still governs at mobile. */
#home-page footer .flogo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  filter: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   10. Partners section — light surface
   The festive skin paints every homepage section midnight. The partners
   block is the one exception: it reads as a white card dropped into the
   night, so the brand logos sit on the light page they were drawn for.
   Everything below only re-colours that section — layout, images, orbits
   and animations are untouched.
   -------------------------------------------------------------------------- */
#home-page .partners {
  background-color: #ffffff !important;
  background-image:
    radial-gradient(85% 60% at 50% 0%, rgba(247, 148, 29, .07), transparent 70%),
    radial-gradient(70% 55% at 100% 100%, rgba(168, 85, 247, .06), transparent 70%) !important;
  color: var(--primary-color, #010a24);
}

/* Headings and body copy flip back to the light-page palette. */
#home-page .partners h2,
#home-page .partners h3,
#home-page .partners h4,
#home-page .partners h5,
#home-page .partners h6 { color: var(--primary-color, #010a24) !important; }

#home-page .partners p,
#home-page .partners li,
#home-page .partners span { color: #4a4a5a !important; }

/* The eyebrow heading holds a bare <a> that the dark theme turned gold. */
#home-page .partners h2 > a,
#home-page .partners h3 > a,
#home-page .partners h4 > a,
#home-page .partners h5 > a { color: var(--primary-color, #010a24) !important; }

#home-page .partners h2 > a:hover,
#home-page .partners h3 > a:hover,
#home-page .partners h4 > a:hover,
#home-page .partners h5 > a:hover { color: var(--fest-orange) !important; }

/* The arrow glyphs beside the eyebrow and inside the button are dark line
   art — on white they need no inversion, and section 1's brightness lift
   would erase them. */
#home-page .partners h4 > a > img.img-fluid,
#home-page .partners .siteBtn img {
  filter: none;
  mix-blend-mode: normal;
}

/* Logos keep their own colours; drop the white backing plate that only
   existed to rescue them from the dark surface. */
#home-page .partners img {
  filter: none;
  opacity: 1;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

/* Read More button: brand orange on white, dark label for contrast. */
#home-page .partners .siteBtn.blackBtn {
  background-color: var(--fest-orange) !important;
  border-color: var(--fest-orange) !important;
  color: #1a1206 !important;
}

#home-page .partners .siteBtn.blackBtn:hover {
  background-color: var(--primary-color, #010a24) !important;
  border-color: var(--primary-color, #010a24) !important;
  color: #ffffff !important;
}

/* The orbit rings were given a violet tint for the night surface; on white
   they want the original faint grey back. */
#home-page .partners .jupiters-orbit,
#home-page .partners .saturns-orbit,
#home-page .partners .uranus-orbit {
  border-color: rgba(1, 10, 36, .14) !important;
}

/* The centre disc stays dark so "We saved you a spot" still reads white,
   and now doubles as the section's focal point against the white page. */
#home-page .partners .sun {
  background: var(--primary-color, #010a24) !important;
  color: #ffffff !important;
}

#home-page .partners .sun::before { border-color: rgba(255, 255, 255, .55) !important; }

/* Each logo badge sits on its own white chip — give it a hairline edge and
   a soft shadow so it still separates from the white background. */
#home-page .partners .jupiter {
  background: #ffffff;
  border: 1px solid rgba(1, 10, 36, .08);
  box-shadow: 0 4px 16px rgba(1, 10, 36, .12);
}

/* The rangoli accent is lamplight on black; on white it would smear, so it
   is dimmed and flattened rather than removed. */
#home-page .partners .fest-rangoli {
  opacity: .12;
  filter: none;
}

/* --------------------------------------------------------------------------
   11. Technology section — light surface
   Same treatment as the partners block above: this section reads as a white
   card dropped into the night so the tech-stack marks sit on the light page
   they were drawn for. Colour only — layout, images and animations are
   untouched.
   -------------------------------------------------------------------------- */
#home-page .whoWeAre.technology {
  background-color: #ffffff !important;
  background-image:
    radial-gradient(85% 60% at 50% 0%, rgba(247, 148, 29, .07), transparent 70%),
    radial-gradient(70% 55% at 100% 100%, rgba(168, 85, 247, .06), transparent 70%) !important;
  color: var(--primary-color, #010a24);
}

/* Headings and body copy flip back to the light-page palette. */
#home-page .whoWeAre.technology h2,
#home-page .whoWeAre.technology h3,
#home-page .whoWeAre.technology h4,
#home-page .whoWeAre.technology h5,
#home-page .whoWeAre.technology h6 { color: var(--primary-color, #010a24) !important; }

#home-page .whoWeAre.technology p,
#home-page .whoWeAre.technology li,
#home-page .whoWeAre.technology span { color: #4a4a5a !important; }

/* Bare links inside the eyebrow heading were turned gold by the dark theme. */
#home-page .whoWeAre.technology h2 > a,
#home-page .whoWeAre.technology h3 > a,
#home-page .whoWeAre.technology h4 > a,
#home-page .whoWeAre.technology h5 > a { color: var(--primary-color, #010a24) !important; }

#home-page .whoWeAre.technology h2 > a:hover,
#home-page .whoWeAre.technology h3 > a:hover,
#home-page .whoWeAre.technology h4 > a:hover,
#home-page .whoWeAre.technology h5 > a:hover { color: var(--fest-orange) !important; }

/* Logos, the hero photo, the decorative shapes and the arrow glyphs keep
   their own colours: section 1's brightness lift and section 9.10's white
   backing plate both existed only to rescue them from the dark surface. */
#home-page .whoWeAre.technology img {
  filter: none;
  opacity: 1;
  background: transparent;
  border-radius: 0;
  padding: 0;
  mix-blend-mode: normal;
}

/* The column dividers in the logo grid are #ccc — fine on white. */
#home-page .whoWeAre.technology .technologiesLogo li::before {
  background: rgba(1, 10, 36, .14);
}

/* Know More button: brand orange on white with a dark label. */
#home-page .whoWeAre.technology .siteBtn,
#home-page .whoWeAre.technology .siteBtn.blackBtn {
  background-color: var(--fest-orange) !important;
  border-color: var(--fest-orange) !important;
  color: #1a1206 !important;
}

#home-page .whoWeAre.technology .siteBtn:hover,
#home-page .whoWeAre.technology .siteBtn.blackBtn:hover {
  background-color: var(--primary-color, #010a24) !important;
  border-color: var(--primary-color, #010a24) !important;
  color: #ffffff !important;
}

#home-page .whoWeAre.technology .siteBtn:hover img { filter: invert(1) brightness(2); }

/* The hairline separator above this section was moonlight-on-black. */
#home-page .whoWeAre.technology { border-top-color: rgba(1, 10, 36, .10); }