/*
==========================================================================
Quantum GovOS — Innovate Template Brand Override
Prototype 1
Target: JoomShaper Innovate v2.0.3 / Helix Ultimate / Joomla 6
File: /templates/innovate/css/custom.css

IMPORTANT
- Keep Innovate core CSS/SCSS untouched.
- Put Quantum GovOS changes here so template updates are safer.
==========================================================================
*/

:root {
  --qg-navy: #071A36;
  --qg-navy-deep: #041225;
  --qg-text: #10233F;
  --qg-muted: #667A96;
  --qg-blue: #2979FF;
  --qg-blue-hover: #1E63E9;
  --qg-cyan: #42CFFF;
  --qg-light: #F6F9FD;
  --qg-border: #DCE7F3;
  --qg-white: #FFFFFF;
  --qg-footer-text: #B7C9DF;
  --qg-shadow: 0 12px 34px rgba(7, 26, 54, .10);
}


/* ==========================================================================
   1. GLOBAL BRAND / TYPOGRAPHY
   Uses Rubik because Innovate already loads it.
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body,
input,
textarea,
select,
button,
.btn,
.sppb-btn {
  font-family: "Rubik", Arial, sans-serif !important;
}

body {
  color: var(--qg-text);
  background-color: var(--qg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.sppb-addon-heading .sppb-addon-title,
.sppb-addon-text-block .sppb-addon-title {
  font-family: "Rubik", Arial, sans-serif !important;
  color: var(--qg-navy);
  letter-spacing: -0.025em;
}

h1,
.h1,
.sppb-addon-heading h1.sppb-addon-title {
  font-weight: 700 !important;
  line-height: 1.08 !important;
}

h2,
.h2 {
  font-weight: 700 !important;
  line-height: 1.16;
}

h3,
.h3,
h4,
.h4 {
  font-weight: 600 !important;
}

a {
  color: var(--qg-blue);
}

a:hover,
a:focus,
a:active {
  color: var(--qg-blue-hover);
}

p {
  color: inherit;
}

::selection {
  color: var(--qg-white);
  background: var(--qg-blue);
}


/* ==========================================================================
   2. ACCESSIBILITY / FOCUS
   ========================================================================== */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.sppb-btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(66, 207, 255, .50) !important;
  outline-offset: 3px;
  box-shadow: none !important;
}


/* ==========================================================================
   3. HEADER
   ========================================================================== */

#sp-header {
  background: rgba(255, 255, 255, .94) !important;
  border-bottom: 1px solid rgba(7, 26, 54, .07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#sp-header.header-sticky {
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 8px 28px rgba(7, 26, 54, .09);
}

#sp-header .logo a,
#sp-header .logo a:hover,
#sp-header .logo a:focus {
  font-family: "Rubik", Arial, sans-serif !important;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--qg-navy) !important;
}

/* If/when you switch from text to an image logo */
#sp-header .logo img {
  max-height: 38px;
  width: auto;
}


/* ==========================================================================
   4. DESKTOP NAVIGATION
   Removes the Innovate "typewriter" feel.
   ========================================================================== */

#sp-menu,
.sp-megamenu-parent,
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.sp-megamenu-parent .sp-mega-group > li > a {
  font-family: "Rubik", Arial, sans-serif !important;
}

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  color: var(--qg-text) !important;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  padding-left: 14px;
  padding-right: 14px;
}

.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li:focus > a,
.sp-megamenu-parent > li:active > a,
.sp-megamenu-parent > li.active > a {
  color: var(--qg-blue) !important;
}

/* Small active indicator */
.sp-megamenu-parent > li.active > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 18px;
  height: 2px;
  border-radius: 99px;
  background: var(--qg-blue);
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: var(--qg-white) !important;
  border: 1px solid rgba(7, 26, 54, .08);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(7, 26, 54, .14);
  overflow: hidden;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  color: var(--qg-text) !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active {
  background: #EDF4FF !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
  color: var(--qg-blue) !important;
}


/* ==========================================================================
   5. BUTTONS
   Includes header REQUEST DEMO + SP Page Builder buttons.
   ========================================================================== */

.btn,
.sppb-btn {
  font-family: "Rubik", Arial, sans-serif !important;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 9px;
  box-shadow: none;
}

.btn-primary,
.sppb-btn-primary {
  color: var(--qg-white) !important;
  background: var(--qg-blue) !important;
  border-color: var(--qg-blue) !important;
  box-shadow: 0 8px 22px rgba(41, 121, 255, .18);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.sppb-btn-primary:hover,
.sppb-btn-primary:focus,
.sppb-btn-primary:active,
.sppb-btn-primary:not(:disabled):not(.disabled).active,
.sppb-btn-primary:not(:disabled):not(.disabled):active {
  color: var(--qg-white) !important;
  background: var(--qg-blue-hover) !important;
  border-color: var(--qg-blue-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(41, 121, 255, .25);
}

.btn-outline-primary,
.sppb-btn-primary.sppb-btn-outline {
  color: var(--qg-blue) !important;
  border-color: var(--qg-blue) !important;
  background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.sppb-btn-primary.sppb-btn-outline:hover,
.sppb-btn-primary.sppb-btn-outline:focus,
.sppb-btn-primary.sppb-btn-outline:active {
  color: var(--qg-white) !important;
  background: var(--qg-blue) !important;
  border-color: var(--qg-blue) !important;
}

.btn-secondary,
.sppb-btn-secondary {
  color: var(--qg-white) !important;
  background: var(--qg-navy) !important;
  border-color: var(--qg-navy) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.sppb-btn-secondary:hover,
.sppb-btn-secondary:focus {
  background: #0C2A57 !important;
  border-color: #0C2A57 !important;
}


/* ==========================================================================
   6. QUANTUM GOVOS HOMEPAGE / SP PAGE BUILDER
   ========================================================================== */

.com-sppagebuilder .sppb-addon-text-block,
.com-sppagebuilder .sppb-addon-text-block p {
  color: var(--qg-text);
}

/* Hero / major titles */
.com-sppagebuilder .sppb-addon-heading h1.sppb-addon-title,
.com-sppagebuilder h1.sppb-addon-title {
  color: var(--qg-navy) !important;
  font-family: "Rubik", Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
}

/* Section headings */
.com-sppagebuilder .sppb-addon-text-block h2.sppb-addon-title,
.com-sppagebuilder h2.sppb-addon-title {
  color: var(--qg-navy) !important;
  font-family: "Rubik", Arial, sans-serif !important;
}

/* Feature cards / capability headings */
.com-sppagebuilder .sppb-addon-feature .sppb-feature-box-title,
.com-sppagebuilder .sppb-addon-feature .sppb-addon-title {
  color: var(--qg-navy) !important;
  font-family: "Rubik", Arial, sans-serif !important;
  font-weight: 600 !important;
}

.com-sppagebuilder .sppb-addon-feature .sppb-icon .sppb-icon-container,
.com-sppagebuilder .sppb-addon-feature .sppb-icon-container {
  color: var(--qg-blue);
}

/* Link-style CTAs */
.btn-link,
.sppb-btn-link {
  color: var(--qg-blue) !important;
  border-color: rgba(41, 121, 255, .35) !important;
}

.btn-link:hover,
.sppb-btn-link:hover {
  color: var(--qg-blue-hover) !important;
  border-color: var(--qg-blue-hover) !important;
}


/* ==========================================================================
   7. TABS
   Citizen / Operate / Govern / Intelligence
   ========================================================================== */

.sppb-nav-custom,
.sppb-nav-custom li,
.sppb-nav-custom li a {
  font-family: "Rubik", Arial, sans-serif !important;
}

.sppb-nav-custom li a {
  color: var(--qg-text) !important;
  font-weight: 600;
}

.sppb-nav-custom li.active a,
.sppb-nav-custom li a:hover,
.sppb-nav-custom li a:focus {
  color: var(--qg-blue) !important;
  border-color: var(--qg-blue) !important;
}


/* ==========================================================================
   8. FORMS
   ========================================================================== */

.form-control,
.sppb-form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
textarea,
select {
  border-color: var(--qg-border);
  color: var(--qg-text);
  border-radius: 9px;
}

.form-control:focus,
.sppb-form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--qg-blue) !important;
  box-shadow: 0 0 0 3px rgba(41, 121, 255, .10) !important;
}


/* ==========================================================================
   9. FOOTER / BOTTOM
   Keeps the Innovate layout, replaces its visual DNA.
   ========================================================================== */

#sp-bottom {
  background: var(--qg-navy) !important;
  color: var(--qg-white);
}

#sp-footer {
  background: var(--qg-navy) !important;
  color: var(--qg-white);
}

#sp-bottom .sp-module .sp-module-title,
#sp-footer .sp-module .sp-module-title,
#sp-bottom h1,
#sp-bottom h2,
#sp-bottom h3,
#sp-bottom h4,
#sp-bottom h5,
#sp-bottom h6,
#sp-footer h1,
#sp-footer h2,
#sp-footer h3,
#sp-footer h4,
#sp-footer h5,
#sp-footer h6 {
  color: var(--qg-white) !important;
  font-family: "Rubik", Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

#sp-bottom,
#sp-bottom p,
#sp-bottom .custom,
#sp-footer,
#sp-footer p {
  color: var(--qg-footer-text);
}

#sp-bottom a:not(.btn):not(.sppb-btn),
#sp-footer a:not(.btn):not(.sppb-btn) {
  color: var(--qg-footer-text) !important;
}

#sp-bottom a:not(.btn):not(.sppb-btn):hover,
#sp-bottom a:not(.btn):not(.sppb-btn):focus,
#sp-footer a:not(.btn):not(.sppb-btn):hover,
#sp-footer a:not(.btn):not(.sppb-btn):focus {
  color: var(--qg-cyan) !important;
}

#sp-footer .container-inner {
  border-top-color: rgba(255, 255, 255, .12);
}

#sp-bottom .social-icons > li a {
  color: var(--qg-footer-text) !important;
}

#sp-bottom .social-icons > li:hover a {
  color: var(--qg-white) !important;
  background: rgba(66, 207, 255, .12);
}


/* ==========================================================================
   10. OFFCANVAS / MOBILE NAVIGATION
   ========================================================================== */

#offcanvas-toggler {
  color: var(--qg-navy) !important;
  border-color: rgba(7, 26, 54, .25) !important;
  background: var(--qg-white) !important;
}

#offcanvas-toggler:hover,
#offcanvas-toggler:focus {
  color: var(--qg-white) !important;
  border-color: var(--qg-blue) !important;
  background: var(--qg-blue) !important;
}

.offcanvas-menu {
  background: var(--qg-light) !important;
  color: var(--qg-text) !important;
}

.close-offcanvas svg {
  fill: var(--qg-navy) !important;
}

.close-offcanvas:hover svg {
  fill: var(--qg-blue) !important;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li a,
.offcanvas-menu .offcanvas-inner .sp-module ul > li span {
  color: var(--qg-text) !important;
  font-family: "Rubik", Arial, sans-serif !important;
  font-weight: 500;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li a:hover,
.offcanvas-menu .offcanvas-inner .sp-module ul > li a:focus,
.offcanvas-menu .offcanvas-inner .sp-module ul > li.active > a {
  color: var(--qg-blue) !important;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li.active > a {
  border-color: var(--qg-blue) !important;
}


/* ==========================================================================
   11. SCROLL TO TOP / SMALL UI DETAILS
   ========================================================================== */

.sp-scroll-up {
  background: var(--qg-blue) !important;
  color: var(--qg-white) !important;
  box-shadow: 0 10px 24px rgba(41, 121, 255, .28);
}

.sp-scroll-up:hover,
.sp-scroll-up:focus,
.sp-scroll-up:active {
  background: var(--qg-blue-hover) !important;
}

.sp-reading-progress-bar {
  background: linear-gradient(90deg, var(--qg-blue), var(--qg-cyan)) !important;
}


/* ==========================================================================
   12. OPTIONAL QUANTUM GOVOS UTILITY CLASSES
   We can reuse these later in SP Page Builder.
   ========================================================================== */

.qg-section-light {
  background: var(--qg-light);
}

.qg-section-dark {
  background: var(--qg-navy);
  color: var(--qg-white);
}

.qg-card {
  background: var(--qg-white);
  border: 1px solid var(--qg-border);
  border-radius: 18px;
  box-shadow: var(--qg-shadow);
}

.qg-gradient-text {
  background: linear-gradient(90deg, var(--qg-blue), var(--qg-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.qg-eyebrow {
  color: var(--qg-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}


/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */

@media (max-width: 1199px) {
  #sp-header {
    padding-left: 30px;
    padding-right: 30px;
  }

  .sp-megamenu-parent > li > a,
  .sp-megamenu-parent > li > span {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
  }
}

@media (max-width: 991px) {
  #sp-header .logo a {
    font-size: 22px;
  }

  #sp-header {
    background: rgba(255, 255, 255, .98) !important;
  }
}

@media (max-width: 767px) {
  #sp-header {
    padding-left: 18px;
    padding-right: 18px;
  }

  #sp-header .logo a {
    font-size: 21px;
  }

  h1,
  .h1,
  .com-sppagebuilder .sppb-addon-heading h1.sppb-addon-title {
    font-size: 38px !important;
    line-height: 1.10 !important;
  }

  h2,
  .h2 {
    font-size: 30px !important;
    line-height: 1.16 !important;
  }

  #sp-bottom {
    padding-top: 3.25rem;
    padding-bottom: 2rem;
  }

  #sp-footer #sp-footer2 {
    text-align: left;
    margin-top: 12px;
  }

  #sp-footer ul.menu {
    margin-left: 0;
    margin-right: 0;
  }

  #sp-footer ul.menu li {
    margin-left: 0;
    margin-right: 20px;
    margin-bottom: 8px;
  }
}
/* ==========================================================
   Quantum GovOS - Homepage Hero Fine Tuning
   ========================================================== */

/* Reduce excessive hero bottom whitespace */
#section-id-1595572584200 {
    padding-bottom: 75px !important;
}

/* Give the product preview more visual presence */
#sppb-addon-1595574383429 {
    transform: scale(1.10);
    transform-origin: center center;
}

/* Slightly stronger product image shadow */
#sppb-addon-1595574383429 img {
    box-shadow: 0 24px 55px rgba(7, 26, 54, 0.14);
    border-radius: 6px;
}

/* Give hero paragraph a softer enterprise tone */
#sppb-addon-900000000001 {
    color: #526A87 !important;
    line-height: 1.75;
}

/* Mobile - don't overscale product preview */
@media (max-width: 991px) {
    #sppb-addon-1595574383429 {
        transform: scale(1);
    }
}
/* Quantum GovOS - Workflow Section Fine Tune */

#sppb-addon-1595588505856 img,
.qg-workflow-image img {
    width: 115% !important;
    max-width: 115% !important;
    transform: translateX(-5%);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(7, 26, 54, 0.10);
}

/* Make workflow section a little tighter */
#section-id-1595574487430 {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}

/* Mobile */
@media (max-width: 991px) {
    #sppb-addon-1595588505856 img,
    .qg-workflow-image img {
        width: 100% !important;
        max-width: 100% !important;
        transform: none;
    }
}
/* ==========================================================
   Quantum GovOS - Integrations Section Fine Tune
   ========================================================== */

#section-id-1595583781011 {
    padding-top: 110px !important;
    padding-bottom: 110px !important;
}

/* Right-side ecosystem image */
#qg-integrations-ecosystem-image img,
.qg-integrations-image img {
    width: 112% !important;
    max-width: 112% !important;
    transform: translateX(-4%);
    border-radius: 16px;
    box-shadow: 0 22px 55px rgba(7, 26, 54, 0.12);
}

/* Keep text block balanced */
#sppb-addon-1595707670767 {
    max-width: 620px;
}

#sppb-addon-1595707670767 .sppb-addon-title {
    margin-bottom: 24px !important;
}

#sppb-addon-1595707670767 p {
    color: #526A87 !important;
    line-height: 1.75;
}

/* Button spacing */
#sppb-addon-1595710278432 {
    margin-top: 10px;
}

/* Mobile reset */
@media (max-width: 991px) {
    #qg-integrations-ecosystem-image img,
    .qg-integrations-image img {
        width: 100% !important;
        max-width: 100% !important;
        transform: none;
    }

    #section-id-1595583781011 {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }
}

/* End Quantum GovOS Brand Override */