/* ==========================================================================
   FS Panel - "galaxy" treatment for the marketing pages
   --------------------------------------------------------------------------
   Scoped to body.new_v2, which the theme puts on the landing / about /
   services / faq / contact / terms pages. The logged-in app (body.dashboard)
   is deliberately untouched here so its tables and forms keep their contrast.

   Deep purple canvas, drifting starfield, glass panels, magenta accents.
   ========================================================================== */

body.new_v2 {
  --gx-bg: #120823;
  --gx-bg-2: #1b0c33;
  --gx-panel: rgba(255, 255, 255, .045);
  --gx-panel-2: rgba(255, 255, 255, .07);
  --gx-line: rgba(168, 85, 247, .22);
  --gx-line-hi: rgba(232, 121, 249, .55);
  --gx-head: #f8f5ff;
  --gx-text: #ddd5f0;
  --gx-muted: #b3a8cf;
  --gx-accent: #e879f9;
  --gx-accent-2: #c026d3;
  --gx-violet: #a855f7;

  background: var(--gx-bg) !important;
  color: var(--gx-text) !important;
  position: relative;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Canvas: nebula glows + starfield, both fixed behind the content
   -------------------------------------------------------------------------- */

body.new_v2::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 560px at 8% -4%,  rgba(168, 85, 247, .38), transparent 62%),
    radial-gradient(680px 520px at 96% 12%, rgba(192, 38, 211, .26), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(236, 72, 153, .18), transparent 62%),
    linear-gradient(180deg, var(--gx-bg-2) 0%, var(--gx-bg) 55%, #0c0518 100%);
  animation: gx-nebula 22s ease-in-out infinite alternate;
}

@keyframes gx-nebula {
  0%   { filter: hue-rotate(0deg)   saturate(1); }
  100% { filter: hue-rotate(-14deg) saturate(1.18); }
}

/* Stars: three parallax layers of tiny radial dots, slowly drifting upward. */
body.new_v2::after {
  content: "";
  position: fixed;
  inset: -200px 0 0 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.2px 1.2px at 28% 62%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.8px 1.8px at 44% 32%, rgba(255,255,255,.9),  transparent),
    radial-gradient(1.1px 1.1px at 61% 78%, rgba(255,255,255,.7),  transparent),
    radial-gradient(1.7px 1.7px at 73% 22%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.3px 1.3px at 87% 55%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.5px 1.5px at 6%  74%, rgba(255,255,255,.8),  transparent),
    radial-gradient(1.2px 1.2px at 35% 92%, rgba(255,255,255,.7),  transparent),
    radial-gradient(1.9px 1.9px at 55% 46%, rgba(240,171,252,.85), transparent),
    radial-gradient(1.4px 1.4px at 92% 88%, rgba(216,180,254,.8),  transparent);
  background-size: 620px 620px, 520px 520px, 700px 700px, 460px 460px, 580px 580px,
                   540px 540px, 660px 660px, 500px 500px, 720px 720px, 480px 480px;
  opacity: .55;
  animation: gx-drift 90s linear infinite, gx-twinkle 5.5s ease-in-out infinite alternate;
}

@keyframes gx-drift   { from { background-position-y: 0; } to { background-position-y: -620px; } }
@keyframes gx-twinkle { from { opacity: .34; } to { opacity: .72; } }

/* Content sits above the canvas. */
body.new_v2 > *:not(script):not(style) { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Sections: transparent so the canvas shows through
   -------------------------------------------------------------------------- */

body.new_v2 #hero_v2,
body.new_v2 #counter_v2,
body.new_v2 #default_sections_v2,
body.new_v2 #our_services,
body.new_v2 #whyChooseUs_v2,
body.new_v2 #aboutServices,
body.new_v2 #faq_v2,
body.new_v2 #howToContact,
body.new_v2 #howToOrder_v2,
body.new_v2 #testimonials_v2,
body.new_v2 #services,
body.new_v2 #terms_content,
body.new_v2 #page_banner,
body.new_v2 #page_top_banner,
body.new_v2 .about-us {
  background: transparent !important;
}

body.new_v2 #cta_v2,
body.new_v2 #followSocialMedia .follow_section_wraper {
  background: linear-gradient(135deg, rgba(168, 85, 247, .22), rgba(236, 72, 153, .18)) !important;
  border: 1px solid var(--gx-line);
  border-radius: 24px;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

body.new_v2 h1, body.new_v2 h2, body.new_v2 h3,
body.new_v2 h4, body.new_v2 h5, body.new_v2 h6 { color: var(--gx-head) !important; }

/* The theme sets body copy to --black-para-v2 (#545454) at a higher
   specificity than a bare element selector, so these need !important. */
body.new_v2 p,
body.new_v2 li,
/* The two accent classes are excluded: each :not() adds specificity, so an
   unqualified span rule would otherwise outrank the accent rules below. */
body.new_v2 span:not([class*="fa-"]):not(.ap-pill):not(.text-secondary):not(.text-primary),
body.new_v2 td, body.new_v2 label,
body.new_v2 .text, body.new_v2 .text p,
body.new_v2 .hero_content p,
body.new_v2 .banner_text_content p,
body.new_v2 .service_content p,
body.new_v2 .counter_item p,
body.new_v2 .single_item p { color: var(--gx-text) !important; }

/* .text-secondary is the theme's accent word inside headings ("Enhancement",
   "SMM"), not muted body copy - it has to stay the brightest colour on screen. */
body.new_v2 .text-secondary {
  color: var(--gx-accent) !important;
  text-shadow: 0 0 26px rgba(232, 121, 249, .45);
}
body.new_v2 small { color: var(--gx-muted) !important; }

body.new_v2 a { color: var(--gx-accent); }
body.new_v2 a:hover { color: #f5d0fe; }

/* The theme paints these two words with the brand accent - keep them glowing. */
body.new_v2 .text-primary,
body.new_v2 [class*="highlight"] { color: var(--gx-accent) !important; }

/* --------------------------------------------------------------------------
   Navbar + footer
   -------------------------------------------------------------------------- */

body.new_v2 .navbar,
body.new_v2 .navbar.bg-body-tertiary {
  background: rgba(18, 8, 35, .72) !important;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--gx-line);
}
body.new_v2 .navbar .nav-link { color: var(--gx-text) !important; font-weight: 500; }
body.new_v2 .navbar .nav-link:hover,
body.new_v2 .navbar .nav-link.active { color: var(--gx-accent) !important; }
body.new_v2 .navbar-toggler {
  border-color: var(--gx-line);
  filter: invert(1) hue-rotate(180deg);
}

body.new_v2 .footer,
body.new_v2 .component-footer,
body.new_v2 .wrapper-content__footer {
  background: rgba(12, 5, 24, .8) !important;
  border-top: 1px solid var(--gx-line);
  color: var(--gx-muted);
}

/* --------------------------------------------------------------------------
   Glass panels
   -------------------------------------------------------------------------- */

body.new_v2 .card,
body.new_v2 .service_content,
body.new_v2 .accordion-item,
body.new_v2 .counter_item,
body.new_v2 .single_item,
body.new_v2 .why_choose_item {
  background: var(--gx-panel) !important;
  border: 1px solid var(--gx-line) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9);
  transition: transform .24s cubic-bezier(.22,.8,.3,1), border-color .24s ease, box-shadow .24s ease;
}
body.new_v2 .card:hover,
body.new_v2 .service_content:hover,
body.new_v2 .counter_item:hover,
body.new_v2 .single_item:hover,
body.new_v2 .why_choose_item:hover {
  transform: translateY(-4px);
  border-color: var(--gx-line-hi) !important;
  box-shadow: 0 26px 54px -26px rgba(192, 38, 211, .55);
}
body.new_v2 .card-body,
body.new_v2 .card-header { background: transparent !important; border-color: var(--gx-line) !important; }

/* The hero login box is .login_card, not .card - the theme paints it solid
   white, which leaves its own light text unreadable on this canvas. */
body.new_v2 .login_card,
body.new_v2 .our_sev_pop,
body.new_v2 .service_nav_tabs_wrap,
body.new_v2 .hero_content > .card {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid var(--gx-line-hi) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px -30px rgba(192, 38, 211, .7);
}
body.new_v2 .login_card h1, body.new_v2 .login_card h2,
body.new_v2 .login_card h3, body.new_v2 .login_card label,
body.new_v2 .login_card p { color: var(--gx-head) !important; }
body.new_v2 .login_card .text-primary,
body.new_v2 .login_card a { color: var(--gx-accent) !important; text-shadow: none; }

/* Platform tab strip: the pills sit on glass now, so their labels need lifting */
body.new_v2 .service_nav_tabs_wrap .nav-link { color: var(--gx-text) !important; }
body.new_v2 .service_nav_tabs_wrap .nav-link.active {
  background: linear-gradient(135deg, rgba(168,85,247,.35), rgba(236,72,153,.3)) !important;
  color: #fff !important;
  border: 1px solid var(--gx-line-hi);
}

/* Counter numbers: the reference's signature magenta */
body.new_v2 #counter_v2 h2,
body.new_v2 #counter_v2 h3,
body.new_v2 #counter_v2 h4,
body.new_v2 .counter_number,
body.new_v2 .counter_item h3,
body.new_v2 .counter_item h2 {
  color: var(--gx-accent) !important;
  text-shadow: 0 0 22px rgba(232, 121, 249, .5);
}
/* ...and their labels sit just under full brightness so the number leads. */
body.new_v2 #counter_v2 p,
body.new_v2 #counter_v2 span,
body.new_v2 .counter_item p { color: var(--gx-text) !important; }

/* Round icon badges the theme uses above each stat */
body.new_v2 .icon {
  background: linear-gradient(135deg, rgba(168,85,247,.32), rgba(236,72,153,.28)) !important;
  border: 1px solid var(--gx-line);
  color: #f5d0fe !important;
}

/* --------------------------------------------------------------------------
   Accordion (FAQ)
   -------------------------------------------------------------------------- */

body.new_v2 .accordion-button {
  background: transparent !important;
  color: var(--gx-head) !important;
  box-shadow: none !important;
  font-weight: 560;
}
body.new_v2 .accordion-button:not(.collapsed) { color: var(--gx-accent) !important; }
body.new_v2 .accordion-button::after { filter: invert(1) hue-rotate(180deg); }
body.new_v2 .accordion-body { color: var(--gx-text); }

/* --------------------------------------------------------------------------
   Forms + buttons
   -------------------------------------------------------------------------- */

body.new_v2 .form-control,
body.new_v2 .form-select,
body.new_v2 input[type="text"],
body.new_v2 input[type="email"],
body.new_v2 input[type="password"],
body.new_v2 textarea,
body.new_v2 select {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--gx-line) !important;
  color: var(--gx-head) !important;
  border-radius: 12px !important;
}
body.new_v2 .form-control::placeholder { color: var(--gx-muted) !important; }
body.new_v2 .form-control:focus {
  border-color: var(--gx-line-hi) !important;
  box-shadow: 0 0 0 3px rgba(232, 121, 249, .18) !important;
}
body.new_v2 .input-group-text {
  background: rgba(255, 255, 255, .05) !important;
  border-color: var(--gx-line) !important;
  color: var(--gx-muted) !important;
}

body.new_v2 .btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #a855f7, #d946ef 55%, #ec4899) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  box-shadow: 0 10px 28px -12px rgba(217, 70, 239, .9);
}
/* Light sweeps across the button on hover */
body.new_v2 .btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transition: left .55s ease;
}
body.new_v2 .btn-primary:hover::after { left: 130%; }
body.new_v2 .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* --------------------------------------------------------------------------
   Tables (services & pricing)
   -------------------------------------------------------------------------- */

body.new_v2 .table {
  color: var(--gx-text) !important;
  border-color: var(--gx-line) !important;
  --bs-table-bg: transparent;
  --bs-table-color: var(--gx-text);
  --bs-table-striped-bg: rgba(255, 255, 255, .035);
  --bs-table-striped-color: var(--gx-text);
  --bs-table-hover-bg: rgba(168, 85, 247, .12);
  --bs-table-hover-color: var(--gx-head);
}
body.new_v2 .table > thead th {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--gx-muted) !important;
  border-color: var(--gx-line) !important;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: .05em;
}
body.new_v2 .table > tbody > tr > td { border-color: rgba(168, 85, 247, .14) !important; }

/* The services list wrapper is .table_responsive with an underscore - the
   bootstrap-spelled class never matches here. */
body.new_v2 .table-responsive,
body.new_v2 .table_responsive {
  border: 1px solid var(--gx-line);
  border-radius: 18px;
  background: var(--gx-panel) !important;
  backdrop-filter: blur(9px);
  overflow: hidden;
}
body.new_v2 #service-table,
body.new_v2 .table-bordered,
body.new_v2 .table-striped { background: transparent !important; }
body.new_v2 .table-bordered > :not(caption) > * > * { border-color: rgba(168, 85, 247, .16) !important; }
body.new_v2 #service-table tbody tr { background: transparent !important; }
body.new_v2 #service-table tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, .03) !important; }
body.new_v2 #service-table tbody tr:hover { background: rgba(168, 85, 247, .13) !important; }
body.new_v2 #service-table td,
body.new_v2 #service-table th,
body.new_v2 .s-col { color: var(--gx-text) !important; }

/* Category divider rows */
body.new_v2 .services-list-category-title,
body.new_v2 .services-list-category-title td {
  background: linear-gradient(90deg, rgba(168,85,247,.26), rgba(236,72,153,.12)) !important;
  color: var(--gx-head) !important;
  font-weight: 650;
}

/* Filter bar, dropdowns and the service detail modal */
body.new_v2 .card_v2 {
  background: var(--gx-panel) !important;
  border: 1px solid var(--gx-line) !important;
  border-radius: 18px !important;
}
body.new_v2 .dropdown-menu {
  background: #1d1033 !important;
  border: 1px solid var(--gx-line) !important;
  border-radius: 14px;
}
body.new_v2 .dropdown-item { color: var(--gx-text) !important; }
body.new_v2 .dropdown-item:hover,
body.new_v2 .dropdown-item:focus { background: rgba(168, 85, 247, .18) !important; color: #fff !important; }
body.new_v2 .dropdown-toggle { border-radius: 999px !important; }

body.new_v2 .modal-content {
  background: #1b0f30 !important;
  border: 1px solid var(--gx-line-hi) !important;
  border-radius: 20px !important;
  color: var(--gx-text) !important;
}
body.new_v2 .modal-header,
body.new_v2 .modal-footer { border-color: var(--gx-line) !important; }
body.new_v2 .modal-title { color: var(--gx-head) !important; }
body.new_v2 .btn-close { filter: invert(1) hue-rotate(180deg); }

/* --------------------------------------------------------------------------
   Scroll reveal - elements start hidden and rise as they enter the viewport.
   galaxy.js adds .gx-in; without JS the :not() rule below keeps everything
   visible, so content never disappears on a JS failure.
   -------------------------------------------------------------------------- */

body.new_v2.gx-js section > .container > .row > [class*="col-"],
body.new_v2.gx-js .card,
body.new_v2.gx-js .service_content,
body.new_v2.gx-js .accordion-item {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s cubic-bezier(.22,.8,.3,1), transform .6s cubic-bezier(.22,.8,.3,1);
}
body.new_v2.gx-js .gx-in {
  opacity: 1 !important;
  transform: none !important;
}

/* Hero content animates immediately on load rather than waiting for scroll. */
body.new_v2 #hero_v2 .banner_text_content,
body.new_v2 #hero_v2 .card { animation: gx-rise .8s cubic-bezier(.22,.8,.3,1) both; }
body.new_v2 #hero_v2 .card { animation-delay: .12s; }

@keyframes gx-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* Floating hero artwork */
body.new_v2 #hero_v2 .banner_image img,
body.new_v2 .default_image img { animation: gx-float 7s ease-in-out infinite; }
@keyframes gx-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

@media (prefers-reduced-motion: reduce) {
  body.new_v2::before, body.new_v2::after,
  body.new_v2 #hero_v2 .banner_image img,
  body.new_v2 .default_image img { animation: none !important; }
  body.new_v2.gx-js section > .container > .row > [class*="col-"],
  body.new_v2.gx-js .card,
  body.new_v2.gx-js .service_content,
  body.new_v2.gx-js .accordion-item { opacity: 1; transform: none; }
}