/* ==========================================================
   QUANTICA — Pixel-Perfect Stylesheet
   ========================================================== */
@font-face {
  font-family: 'AvenirLTStd';
  src: url('../fonts/AvenirLTStd-Black.woff2') format('woff2'),
       url('../fonts/AvenirLTStd-Black.woff') format('woff');
  font-weight: 400;
  font-style: bold;
}
@font-face {
  font-family: 'AvenirLTStd-Roman';
  src: url('../fonts/AvenirLTStd-Roman.woff2') format('woff2'),
       url('../fonts/AvenirLTStd-Roman.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
html, body {
    overflow-x: hidden;
}
:root {
    --q-gold: #EFC206;
    --q-gold-dark: #EFC206;
    --q-gold-bg: #EFC206;
    --q-dark: #191919;
    --q-dark-deep: #191919;
    --q-dark-hero: #191919;
    --q-white: #FFFFFF;
    --q-off-white: #F5F4F0;
    --q-cream: #F0EDE6;
    --q-gray-100: #F3F2EE;
    --q-gray-200: #E8E7E3;
    --q-gray-300: #D0CFCB;
    --q-gray-500: #8A8985;
    --q-gray-700: #555550;
    --q-gray-800: #191919;
    --q-border: #E0DFDB;
    --q-border-light: #F0EDE6;
    --q-font-heading: 'AvenirLTStd', sans-serif;
    --q-font: 'AvenirLTStd-Roman', sans-serif;
    --q-serif: 'AvenirLTStd-Roman', serif;
    --q-radius: 2px;
    --q-radius-lg: 8px;
    --q-ease: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --page-bg:      #ede8de;
      --field-bg:     #f5f1ea;
      --field-border: #d4d0c8;
      --field-border-focus: #8a8275;
      --label-color:  #1f1f1f;
      --placeholder:  #9a958c;
      --btn-bg:       #f0c419;
      --btn-bg-hover: #d9af16;
      --btn-text:     #1a1a1a;
}
.bageColor .industry-cell{background: #F0EDE6;}
/* ---- Global Container ---- */
/* width */
::-webkit-scrollbar {
  width: 3px;
}

/* Track */
::-webkit-scrollbar-track {
  background:  var(--q-white); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background:  var(--q-gold); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--q-gold); 
}

.container-xxl {
    max-width: 1440px;
    padding-left: 48px;
    padding-right: 48px;
}
.circle {
    position: fixed;
    background-color: var(--q-gold);
    width: 10px;
    height: 10px;
  left:-10px;
  top:-10px;
    border-radius: 100%;
    z-index: 1;
    z-index: 10000;
    transform: scale(1);
    &.active {
        opacity: 1;
        transform: scale(0);
           
    }
}
.circle,
.circle-follow{
    pointer-events:none;
    
}
.circle-follow {
   position: fixed;
    border:1px solid var(--q-gold);
    width: 30px;
    height: 30px;
  left:-21px;
  top:-21px;
    border-radius: 100%;
    z-index: 1;
    user-select: none;
    pointer-events: none;
    z-index: 10000;
    transform: scale(1);
    &.active {
        transform: scale(3);
    }  
      
}
.circle.cursor-dark {
    
    background-color: var(--q-dark);
}
.circle-follow.cursor-dark {
    border-color: var(--q-dark);
}
.circle.cursor-gold {
    background-color: var(--q-gold);
}
.circle-follow.cursor-gold {
    border-color: var(--q-gold);
}
/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--q-font);
    font-size: 15px;
    color: var(--q-dark);
    background: var(--q-white);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6{font-family: var(--q-font-heading);}
::selection { background: var(--q-gold); color: var(--q-dark); }
img { max-width: 100%; height: auto; }
a { color: var(--q-gold-dark); text-decoration: none; transition: color var(--q-ease); }
a:hover { color: var(--q-gold); }

/* ---- Typography ---- */
.text-accent { color: var(--q-gold); }
.text-accent-serif {
    color: var(--q-gold);
    font-family: var(--q-serif);
}

.section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--q-gold);
    margin-bottom: 14px;
}

.section-heading {
    font-family: var(--q-font);
    font-size: clamp(30px, 3.8vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--q-dark);
}

.section-text {
    font-size: 15px;
    color: var(--q-gray-700);
    line-height: 1.7;
}

/* ================================================================
   NAVBAR
   ================================================================ */
#mainNav {
    background: var(--q-white);
    padding: 0px 0;
    z-index: 1050;
    border-bottom: 1px solid rgba(0,0,0,.1);
    transition: background var(--q-ease), box-shadow var(--q-ease);
}
#mainNav.scrolled {
    background:rgb(255 255 255 / 31%);
    box-shadow: 0 2px 24px rgba(0,0,0,0.3);
    backdrop-filter: blur(7px);
}
.w-8{width: 8%;}
.brand-text {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--q-white);
}

#mainNav .nav-link {
    font-size: 14px;
    font-weight: 400;
    color:var(--q-dark);
    padding: 20px 10px;
    transition: color var(--q-ease);
}
#mainNav.scrolled .nav-link {
     color: #000;
}
#mainNav .nav-link:hover,
#mainNav .nav-link:focus { color: var(--q-gold); }

.btn-quantica-nav {
    background: var(--q-gold);
    color: var(--q-dark) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    border: 1px solid var(--q-gold);
    border-radius: var(--q-radius);
    padding: 10px 24px;
    transition: all var(--q-ease);
}
.btn-quantica-nav:hover {
    background: #ffffff;
    color: var(--q-gold) !important;
    border-color: var(--q-gold) !important;
}

/* ================================================================
   DROPDOWN ITEMS — General styling
   ================================================================ */
.dropdown-item {
    font-size: 14px;
    padding: 10px 30px 10px 20px;
    border-bottom: .5px solid rgba(0, 0, 0, .07);
}
span.dropdown-item.dcat {
    background: #e8b9315e;
    padding: 5px 15px;
}
.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item.active,
.dropdown-item:active {
    color: var(--bs-dropdown-link-hover-color);
    background-color: #e8b9315e;
}

/* Top-level dropdown container (1st level submenu) */
.dropdown-menu.dropdown-menu {
    border-top: 3px solid #e8b931;
    padding: 0 0;
    border-radius: 0;
    z-index: 1055;
}

/* Scroll sirf tab lagayein jab list bohot lambi ho aur usme
   nested submenu (dropdown-submenu) NA ho. Ye class manually
   sirf un dropdown-menu par lagayein jinme scroll chahiye. */
.dropdown-menu.has-scroll {
    max-height: 70vh;
    overflow-y: auto;
}

.dropdown-menu-dark {
    background: var(--q-dark-deep);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--q-radius);
    padding: 8px 0;
}
.dropdown-menu-dark .dropdown-item {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    padding: 8px 20px;
}
.dropdown-menu-dark .dropdown-item:hover {
    background: rgba(232,185,49,0.12);
    color: var(--q-gold);
}

.navbar-toggler:focus,
button:focus:not(:focus-visible) { outline: 0; box-shadow: none; }

.menu-bars {
    width: 26px;
    height: 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}
.menu-bars span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--q-dark);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}
.menu-bars span:nth-child(2) {
    width: 70%;
    margin-left: auto;
}

/* ================================================================
   MULTI-LEVEL NESTED SUBMENU (2nd, 3rd... level)
   ================================================================ */
.navbar-nav .dropdown-menu {
    border: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border-radius: 0px;
    padding: 0px 0;
    overflow: visible; /* zaroori — taake nested submenu bahar dikhe */
}

/* Parent <li> jiske andar nested submenu hai */
.dropdown-submenu {
    position: relative;
}

/* Nested submenu — right side se khulta hai */
.dropdown-submenu > .dropdown-submenu-menu {
    top: 0;
    left: 100%;
    margin-top: 0px;
    display: none;
    z-index: 1060;              /* parent dropdown se upar rahe */
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Desktop — hover se nested submenu khulega */
@media (min-width: 992px) {
    .dropdown-submenu:hover > .dropdown-submenu-menu {
        display: block;
        opacity: 1;
        transform: translateX(0);
    }
}

.dropdown-submenu > .dropdown-toggle::after,
.dropdown-submenu > a.dropdown-item.dropdown-toggle::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 0.3em solid transparent;
    border-bottom: 0.3em solid transparent;
    border-left: 0.35em solid currentColor;
    /*float: right;*/
    margin-top: 0.45em;
    margin-left: 8px;
    position: absolute;
    right: 5px;
}

/* dcat = category heading/label (non-clickable) */
.dropdown-item.dcat {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.6;
    pointer-events: none;
    padding-top: 10px;
}

/* ================================================================
   MOBILE / TABLET — Nested submenu (click-based, static niche khule)
   ================================================================ */
@media (max-width: 991.98px) {
    .dropdown-submenu > .dropdown-submenu-menu {
        position: static;
        left: auto;
        margin-left: 15px;
        box-shadow: none;
        opacity: 1;
        transform: none;
        border-left: 2px solid rgba(0,0,0,0.1);
    }

    .dropdown-submenu-menu.show {
        display: block;
    }
}

/* ================================================================
   Hover effect — hamburger icon
   ================================================================ */
.navbar-toggler:hover .menu-bars span:nth-child(2) {
    width: 100%;
}

/* Offcanvas open — hamburger X animation */
.navbar-toggler[aria-expanded="true"] .menu-bars span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.navbar-toggler[aria-expanded="true"] .menu-bars span:nth-child(2) {
    opacity: 0;
    width: 0;
}
.navbar-toggler[aria-expanded="true"] .menu-bars span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ================================================================
   OFFCANVAS SIDEBAR NAV (mobile menu)
   ================================================================ */
.offcanvas-nav {
    background: var(--q-dark-deep);
    max-width: 300px;
    z-index: 99999;
    border-left: 1px solid rgba(255,255,255,0.06);
}
.offcanvas-nav .offcanvas-header {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 15px 24px;
}
.offcanvas-nav .nav-link {
    color: rgba(255,255,255,0.8);
    font-size: 15px;
    font-weight: 500;
    padding: 12px 5px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: all 0.25s ease;
}
.offcanvas-nav .nav-link:hover {
    color: var(--q-gold);
    padding-left: 5px;
}
.offcanvas-sub {
    padding-left: 5px;
}
.offcanvas-sublink {
    display: block;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    padding: 8px 5px;
    transition: all 0.2s ease;
    text-decoration: none;
}
.offcanvas-sublink:hover {
    color: var(--q-gold);
    padding-left: 10px;
}
.offcanvas-backdrop.show { opacity: 1; }
.offcanvas-backdrop {
    z-index: 9999;
    background-color: #0000004f;
    backdrop-filter: blur(10px);
}

/* ================================================================
   Desktop-only: dropdown hover pe khule (click ki bajaye)
   ================================================================ */
@media (min-width: 992px) {
    .navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
        animation: dropdownFadeIn 0.25s ease;
    }
    .navbar .nav-item.dropdown > .dropdown-toggle::after {
        transition: transform 0.25s ease;
    }
    .navbar .nav-item.dropdown:hover > .dropdown-toggle::after {
        transform: rotate(180deg);
    }
    @keyframes dropdownFadeIn {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }
}
/* ================================================================
   HERO
   ================================================================ */
.hero-section {
    position: relative;
    background: linear-gradient(135deg,#080505 0%,#130A08 45%,#1E0E0C 75%,#0D0605 100%);
    overflow: hidden;
}

.hero-row {
    min-height: 500px;
    padding-top: 80px;
    padding-bottom: 70px;
}

.hero-slider { position: relative; }
.hero-slide { display: none; animation: heroFade 0.5s ease; }
.hero-slide.active { display: block; }

@keyframes heroFade {
    from { opacity: 0; transform: translateX(15px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Hero Badge Tag */
.hero-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--q-gold);
    background: rgba(232,185,49,0.08);
    border: 1px solid rgba(232,185,49,0.25);
    border-radius: 24px;
    padding: 8px 20px;
    margin-bottom: 24px;
}
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--q-gold);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.hero-title {
   
    font-size: clamp(36px, 5vw, 50px);
    font-weight: 800;
    line-height: 1.08;
    color: var(--q-white);
    letter-spacing: -0.5px;
}

.hero-desc {
    font-size: 15px;
    color: rgba(255,255,255,0.6);
    max-width:500px;
    line-height: 1.7;
}
.hero-desc strong { color: rgba(255,255,255,0.85); }

.hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-quantica-primary {
    background: var(--q-gold);
    color: #191919 !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    border: 2px solid var(--q-gold);
    border-radius: var(--q-radius);
    padding: 10px 26px;
    transition: all var(--q-ease);
        text-transform: uppercase;
        display: flex;
        align-items: center;
}
.btn-quantica-primary:hover {
    background: #d4a52a;
    border-color: #d4a52a;
    transform: translateY(-1px);
}

.btn-quantica-outline-light {
    background: transparent;
    color:#fff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: var(--q-radius);
    padding: 12px 26px;
    transition: all var(--q-ease);
}
.btn-quantica-outline-light:hover {
    border-color: var(--q-white);
    background: rgb(255, 255, 255);
    transform: translateY(-1px);
    color: #191919 !important; 
}

.btn-quantica-outline-dark {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    border: 1.5px solid var(--q-dark);
    border-radius: var(--q-radius);
    padding: 10px 24px;
    color: var(--q-dark);
    transition: all var(--q-ease);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
}
.btn-quantica-outline-dark:hover {
    background: var(--q-dark);
    color: var(--q-white);
    transform: translateY(-1px);
}

/* Hero Stats */
.hero-stats { flex-wrap: wrap; }
.hero-stat { display: flex; flex-direction: column; }
.stat-number {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    font-family: var(--q-font);
}
.stat-suffix {
    font-size: 18px;
    font-weight: 600;
    color: var(--q-gold);
    vertical-align: super;
    margin-left: 1px;
}
.stat-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.4);
    margin-top: 4px;
}

/* Hero Dots */
.hero-dots-inline {
    display: flex;
    gap: 6px;
        top: -45px;
    align-items: center;
}
.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background: rgba(255,255,255,0.2);
    cursor: pointer;
    transition: all var(--q-ease);
}
.hero-dot.active {
    background: var(--q-gold);
    width: 36px;
}

/* Hero Visual (right side) */
.hero-visual {
    position: relative;
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-arcs2 {
    width: 100%;
    max-width: 500px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
}
.hero-arcs {
    width: 100%;
    max-width: 500px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    animation: rotateArcs 30s linear infinite;
}
@keyframes rotateArcs {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.hero-float-card {
    position: absolute;
    background: rgba(30, 30, 32, 0.9);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--q-radius-lg);
    padding: 16px 24px;
    backdrop-filter: blur(10px);
    z-index: 2;
}
.hero-float-card-top {
    top: 10%;
    right: 5%;
    text-align: left;
    animation: floatUp 3.5s ease-in-out infinite;
}
.hero-float-card-bottom {
    bottom: 15%;
    right: 0;
    animation: floatUp 4s ease-in-out infinite 0.5s;
}

@keyframes floatUp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.float-card-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--q-gold);
    margin-bottom: 4px;
}
.float-card-number {
    font-size: 48px;
    font-weight: 800;
    color: var(--q-white);
    line-height: 1;
}
.float-card-number span { font-size: 28px; color: var(--q-gold); }
.float-card-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin-top: 2px;
}

/* Progress bar inside float cards */
.float-card-progress {
    margin-top: 14px;
    width: 100%;
}
.progress-track {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
}
.progress-fill {
    width: 0%;
    height: 100%;
    background: var(--q-gold);
    border-radius: 4px;
    transition: none;
}
/* When slide is active, animate the fill to 60% */
.hero-slide.active .progress-fill {
    animation: progressGrow 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}
@keyframes progressGrow {
    from { width: 0%; }
    to { width: 60%; }
}

.status-line {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot-green { background: #4CAF50; }
.status-dot-yellow { background: var(--q-gold); }

/* Hero Arrows */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all var(--q-ease);
    backdrop-filter: blur(4px);
}
.hero-arrow:hover {
    background: var(--q-gold);
    color: var(--q-dark);
    border-color: var(--q-gold);
}
.hero-arrow-left { left: 24px; }
.hero-arrow-right { right: 24px; }

.hero-counter {
    position: absolute;
    bottom: 30px;
    right: 48px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
    z-index: 10;
}
.hero-counter #heroCurrentNum { color: var(--q-gold); font-weight: 700; }

/* ================================================================
   TICKER — Yellow background
   ================================================================ */
.ticker-section {
    background: var(--q-gold);
    overflow: hidden;
    padding: 14px 0;
}
.ticker-track { overflow: hidden; width: 100%; }
.ticker-content {
    display: flex;
    white-space: nowrap;
    animation: tickerScroll 35s linear infinite;
    will-change: transform;
}
.ticker-item {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #191919;
    padding: 0 24px;
}
.ticker-star {
    font-size: 6px;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.5;
}

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

/* ================================================================
   ABOUT SECTION
   ================================================================ */
.section-about {
    padding: 100px 0;
    background: var(--q-cream);
}
.about-card-icon svg {
    width: 35px;
    height: 35px;
}
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--q-border);
    border-radius: var(--q-radius);
    overflow: hidden;
}
.cardTopLine {
position: relative;
}
.cardTopLine:before {
content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #EFC206;
    transform: scaleX(0);
    transform-origin: left;
    transition: .3s;
}
.cardTopLine:hover::before {
    transform: scaleX(1);
}
.about-card {
    padding: 32px 28px;
    border-bottom: 1px solid var(--q-border);
    border-right: 1px solid var(--q-border);
    transition: all var(--q-ease);
    background:  #F7F6F3;
}
.about-card:nth-child(2n) { border-right: none; }
.about-card:nth-child(n+3) { border-bottom: none; }
/* .about-card:hover {
    background: var(--q-cream);
} */

.about-card-icon {
    height: 40px;
    border-radius: var(--q-radius);
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: 18px;
    color: var(--q-gold);
}

.about-card h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}
.about-card p {
    font-size: 14px;
    color: var(--q-gray-700);
    margin: 0;
    line-height: 1.6;
}

/* ================================================================
   PRACTICE AREAS
   ================================================================ */
.section-practice {
    padding: 100px 0;
    background: var(--q-white);
}

.practice-card {
    background: var(--q-white);
    border: 1px solid var(--q-border);
    padding: 32px 28px;
    height: 100%;
    position: relative;
    transition: all var(--q-ease);
}
.practice-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    border-color: rgba(232,185,49,0.3);
        background: #F7F6F3;
}

.practice-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 22px;
}

.practice-icon {
    width: 42px;
    border-radius: var(--q-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--q-gold);
}

.practice-num {
    font-size: 54px;
    font-weight: 800;
    color: rgba(0,0,0,0.04);
    line-height: 1;
    font-family: var(--q-font-heading);
}

.practice-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.practice-desc {
    font-size: 14px;
    color: var(--q-gray-700);
    line-height: 1.6;
    margin-bottom: 18px;
}

.practice-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.practice-list li {
    font-size: 13px;
    color: var(--q-gold-dark);
    padding: 3px 0;
    padding-left: 16px;
    position: relative;
}
.practice-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--q-gold);
    font-size: 12px;
}

.practice-link {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--q-gold);
    transition: all var(--q-ease);
}
.practice-link:hover { color: var(--q-gold-dark); letter-spacing: 1.5px; }

/* ================================================================
   STATS BAR — Modern with counter animation
   ================================================================ */
.section-stats {
    padding: 70px 0;
    background: var(--q-cream);
}

.stats-bar {
    /* background: var(--q-white);
    border: 1px solid var(--q-border);
    border-radius: 2px;
    padding: 56px 40px; */
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap:10px;
    box-shadow: 0 4px 40px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
}

.stat-item {
    text-align: center;
    flex: 1;
    min-width: 140px;
    position: relative;
}
/* Subtle vertical dividers between stats */
.stat-item + .stat-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: var(--q-border);
}

.stat-big {
    font-size: clamp(34px, 3.8vw, 52px);
    font-weight: 700;
    color: var(--q-gold);
    line-height: 1;
    font-family: var(--q-serif);
    transition: transform 0.4s ease;
}

.stat-big-suffix {
    font-size: 0.65em;
    font-weight: 600;
    margin-left: 1px;
}

.stat-big-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--q-gray-500);
    margin-top: 12px;
    text-transform: uppercase;
}

/* Counter number animation class */
.counter-num {
    display: inline-flex;
    align-items: baseline;
}
.counter-num.counting {
    animation: counterPop 0.3s ease;
}
@keyframes counterPop {
    0% { transform: scale(0.85); opacity: 0.5; }
    60% { transform: scale(1.04); }
    100% { transform: scale(1); opacity: 1; }
}

/* ================================================================
   QUANTICA LOOP — Connected cards with gold top border
   ================================================================ */
.section-loop {
    padding: 100px 0;
    background: var(--q-cream);
}

.loop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--q-border);
    border-top: 3px solid var(--q-gold);
    border-radius: var(--q-radius);
    overflow: hidden;
    background: var(--q-white);
}

.loop-card {
    padding: 25px 25px;
    border-right: 1px solid var(--q-border);
    transition: all var(--q-ease);
}
.loop-card:last-child { border-right: none; }
.loop-card:hover { background: #F7F6F3; }

.loop-num {
    font-size: 48px;
    font-weight: 800;
    color: rgba(232,185,49,0.25);
    line-height: 1;
    display: block;
    margin-bottom: 16px;
    font-family: var(--q-font-heading);
}

.loop-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
}

.loop-desc {
    font-size: 14px;
    color: var(--q-gray-700);
    line-height: 1.65;
    margin: 0;
}

/* ================================================================
   INDUSTRIES — Grid table layout with shared borders
   ================================================================ */
.section-industries {
    padding: 100px 0;
    background: var(--q-white);
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--q-border);
    border-radius: var(--q-radius);
    overflow: hidden;
}

.industry-cell {
    padding: 32px 28px;
    border-right: 1px solid var(--q-border);
    border-bottom: 1px solid var(--q-border);
    transition: all var(--q-ease);
    background: var(--q-white);
}
.industry-cell:nth-child(3n) { border-right: none; }
.industry-cell:nth-child(n+4) { border-bottom: none; }
.industry-cell:hover { background: var(--q-cream); }

.industry-cell h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}
.industry-cell > p {
    font-size: 14px;
    color: var(--q-gray-700);
    line-height: 1.6;
    margin-bottom: 16px;
}

.industry-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.industry-links li { padding: 0px 0; }
.industry-links li a {
    font-size: 13px;
    color: var(--q-gold-dark);
    padding-left: 0px;
    position: relative;
}
.industry-links li a::before {
    content: '→';
    /* position: absolute; */
    left: 0;
    color: var(--q-gold);
    font-size: 14px; margin-right: 10px;
}
.industry-links li a:hover { color: var(--q-gold); }

/* ================================================================
   PARTNERS
   ================================================================ */
.section-partners {
    padding: 60px 0 70px;
    background: var(--q-cream);
    border-top: 3px solid var(--q-gold);
}
/* logo lsider */
.logo-slider {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}

.logo-slider .swiper-wrapper {
    transition-timing-function: linear !important;
}

.logo-slider .swiper-slide {
    display: flex;
    align-items: center;
    height: auto;
    justify-content: center;
}

.logo-slider img {
    height: 100px;
    object-fit: contain;
    object-position: center;
    max-width: 120px;
}
/* logo lsider */
.partner-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.partner-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: var(--q-gray-700);
    background: var(--q-white);
    border: 1px solid var(--q-border);
    border-radius: 24px;
    padding: 8px 18px;
    transition: all var(--q-ease);
}
.partner-badge:hover {
    border-color: var(--q-gold);
    color: var(--q-gold-dark);
    transform: translateY(-2px);
}

/* ================================================================
   CTA — Yellow/Gold background
   ================================================================ */
.section-cta {
    padding: 80px 0;
    background: var(--q-gold);
    position: relative;
}
.ctab-bg{
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0, 0, 0, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .06) 1px, transparent 1px);
    background-size: 54px 54px;
}
.cta-heading {
    font-family: var(--q-font-heading);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    color: var(--q-dark);
    line-height: 1.15;
}

.cta-sub {
    font-size: 14px;
    color: rgba(0,0,0,0.5);
}

.btn-cta-outline {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--q-gold-dark);
    border: 2px solid var(--q-dark);
    border-radius: var(--q-radius);
    padding: 14px 28px;
    background: transparent;
    transition: all var(--q-ease);
    color: var(--q-dark);
    text-transform:uppercase ;
}
.btn-cta-outline:hover {
    background: var(--q-dark);
    color: var(--q-gold);
    transform: translateY(-2px);
}

.btn-cta-filled {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    background: var(--q-dark);
    color: var(--q-white);
    border: 2px solid var(--q-dark);
    border-radius: var(--q-radius);
    padding: 14px 28px;
    transition: all var(--q-ease);
    text-transform: uppercase;
}
.btn-cta-filled:hover {
    background: var(--q-dark-deep);
    border-color: var(--q-dark-deep);
    color:#fff;
    transform: translateY(-2px);
}


/* -----------PRECISION MARKETING PAGE------------- */

.text-accent { color: var(--q-gold); }
.section-heading .text-accent {
    font-family: 'AvenirLTStd', sans-serif;
}
.text-accent-serif {
    color: var(--q-gold);
    font-family: var(--q-serif);
    font-style: italic;
}
 
.pm-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--q-gold);
    margin-bottom: 14px;
}
 
.pm-heading {
    font-family: var(--q-font);
    font-size: clamp(30px, 3.8vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--q-dark);
}
 
.pm-subtext {
    font-size: 15px;
    color: var(--q-gray-700);
    line-height: 1.7;
    max-width: 480px;
    margin-top: 12px;
}

/* ================================================================
   BREADCRUMB
   ================================================================ */
.breadcrumb {
    padding: 14px 0;
    background: var(--q-off-white);
    border-bottom: 1px solid var(--q-border);
    font-size: 13px;
    color: var(--q-gray-500);
    margin-top: 65px;
    margin-bottom: 0;
}
.breadcrumb-sep {
    margin: 0 6px;
    color: var(--q-gray-500);
}
.breadcrumb-active {
    color: var(--q-gold);
    font-weight: 600;
}
 
/* ================================================================
   HERO SECTION
   ================================================================ */
.pm-hero {
    padding: 50px 0px;
    background: var(--q-off-white);
        overflow-x: hidden;
}
.pm-hero.industry-problem-item {
    background: var(--q-cream);
}
.pm-title {
   font-size: clamp(40px, 5.5vw, 65px);
    color: var(--q-dark);
    font-weight: 800;
    line-height: 1.08;
}
 
.pm-desc {
    font-size: 15px;
    color: var(--q-gray-700);
    max-width: 550px;
}
 
.pm-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Problem Card (right side) */
.pm-problem-card {
    border-radius: var(--q-radius);
    padding: 32px;
}
 
.pm-problem-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--q-gold);
    margin-bottom: 12px;
    text-transform: uppercase;
}
 
.pm-problem-desc {
    font-size: 14px;
    color: var(--q-gray-700);
    line-height: 1.7;
        margin-bottom: 0;
}
 
.pm-problem-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
 
.pm-problem-item {
    font-size: 14px;
    color: var(--q-dark);
    padding: 14px 16px;
    border-left: 3px solid var(--q-gold);
    background: #54545414;
    transition: all var(--q-ease);
    backdrop-filter: blur(20px);
    margin-bottom: 5px;
}
.industry-problem-item .pm-problem-item{
    background: rgba(239, 194, 6, .06);
    border: .5px solid rgba(239,194,6,.2);
    border-left:3px solid var(--q-gold);
} 
.pm-problem-item:last-child {
    border-bottom: none;
}
.pm-problem-item:hover {
    background: rgba(239,194,6,0.04);
    padding-left: 20px;
}
.pm-box{background: rgba(239, 194, 6, .06); border: .5px solid rgba(239, 194, 6, .2);   padding: 1.4rem;    margin-bottom: 5px;}
.productReachMain .pm-box p {
    font-size: 12px;
}
.productReachMain .pm-box { margin-bottom: 15px; border-top: 3px solid var(--q-gold);  background: var(--q-border-light);}
.pm-problem-card.productReachMain{    padding: 0;}
.liveICon{width:10px;height:10px;border-radius:50%;background:#4ade80;display:inline-block; }
.productCap {
    padding: 10px;
    background: var(--q-white);
}
.productCap span b{
    color: var(--q-gold);
}

/* ================================================================
   STATS BAR
   ================================================================ */
.pm-stats {
    padding: 60px 0;
    background: var(--q-white);dddddddddddddddddddddddddd
}
 
.pm-stats-bar {
    background: var(--q-cream);
    border: 1px solid var(--q-border);
    border-radius: var(--q-radius-lg);
    padding: 48px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}
 .productReach {
    padding: 0;
    border: none;
    background: var(--q-border-light);
        border-radius: 0;
}
.productReach .stat-item svg{
    width: 40px;
    height: 40px;
    fill: none;
    stroke: var(--q-gold);
    stroke-width: 1;
}
.productReach .stat-item svg path {
    stroke: var(--q-gold);
}
.pm-stat-item {
    text-align: center;
    flex: 1;
    min-width: 130px;
    position: relative;
}
.pm-stat-item + .pm-stat-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: var(--q-border);
}
 
.pm-stat-num {
    font-size: clamp(34px, 3.8vw, 52px);
    font-weight: 700;
    color: var(--q-gold);
    line-height: 1;
    font-style: italic;
    font-family: var(--q-serif);
}
 
.pm-stat-text {
    font-size: clamp(28px, 3vw, 40px);
}
 
.pm-stat-suffix {
    font-size: 0.55em;
    font-weight: 600;
    vertical-align: super;
    margin-left: 1px;
}
 
.pm-stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--q-gray-500);
    margin-top: 12px;
    text-transform: uppercase;
}
 
/* Counter animation */
.counter-num {
    display: inline-flex;
    align-items: baseline;
}
.counter-num.counting {
    animation: counterPop 0.3s ease;
}

@keyframes counterPop {
    0% { transform: scale(0.85); opacity: 0.5; }
    60% { transform: scale(1.04); }
    100% { transform: scale(1); opacity: 1; }
}
 .productReach .stat-item {
    background: var(--q-white);
    padding: 10px;
}
 .productReach .stat-item .stat-big{font-size: clamp(30px, 3.8vw, 30px);}
 .productReach .stat-item .stat-big-label{margin-top: 5px;}
/* ================================================================
   FULL STACK — 6 Capabilities Grid
   ================================================================ */
.shade-hero:before {
    content: '';
    position: absolute;
    top: 0%;
    right: -10%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(239, 194, 6, .1) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}
.pm-fullstack {
    padding: 50px 0;
    background: var(--q-off-white);
}
 
.pm-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--q-border);
    border-radius: var(--q-radius);
    overflow: hidden;
    margin-top: 40px;
}
 
.pm-cap-cell {
    padding: 32px 28px;
    border-right: 1px solid var(--q-border);
    border-bottom: 1px solid var(--q-border);
    background: var(--q-white);
    transition: all var(--q-ease);
}
.pm-cap-cell:nth-child(3n) { border-right: none; }
.pm-cap-cell:nth-child(n+4) { border-bottom: none; }
.pm-cap-cell:hover {
    background: var(--q-cream);
}
 
.pm-cap-cell h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--q-dark);
}
.pm-cap-cell p {
    font-size: 14px;
    color: var(--q-gray-700);
    line-height: 1.65;
    margin: 0;
}
 
/* ================================================================
   PRODUCTS SECTION
   ================================================================ */
 .reachChart{
    position: relative; width: 100%; height: 60px;
 }  
.pm-products {
    padding: 50px 0;
    
}
.productReach .stat-item::before{    width: 0px;}


.pm-product-list {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
 
.pm-product-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 20px;
     background: #54545414;
    border-bottom: 0px solid var(--q-border);
    transition: all var(--q-ease) !important;
    margin-bottom: 15px;
    border: 1px solid #54545414;
}
 .pm-product-item:last-child {
    border-bottom: 0px solid var(--q-border);
} 
.pm-product-item:hover {
    padding-left: 20px;
        background: rgba(239, 194, 6, 0.04);
        transition: 0.3s;
        box-shadow: 0 10px 35px #0000000f;
            transform: scale(1.005) !important;
         border: 1px solid #efc206;
}
 
.pm-product-badge {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    background: rgba(239,194,6,0.12);
    border: 1px solid rgba(239,194,6,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--q-gold-dark);
    margin-top: 4px;
    text-align: center;
}
 
.pm-product-content h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--q-dark);
}
.pm-product-content p {
    font-size: 14px;
    color: var(--q-gray-700);
    line-height: 1.65;
    margin-bottom: 12px;
}
  p.pm-product-tags {
    color: var(--q-gold-dark);
}
.pm-product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pm-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--q-gold-dark);
    background: rgba(239,194,6,0.08);
    border: 1px solid rgba(239,194,6,0.2);
    border-radius: 20px;
    padding: 4px 12px;
    transition: all var(--q-ease);
}
.pm-tag:hover {
    background: rgba(239,194,6,0.15);
    border-color: var(--q-gold);
}

/* ================================================================
   PM CTA — Dark Background
   ================================================================ */
.pm-cta {
    padding: 80px 0;
    background: var(--q-dark);
    position: relative;
}
.pm-cta .ctab-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 54px 54px;
}
.pm-cta-heading {
    font-family: var(--q-font-heading);
    font-size: clamp(28px, 3.8vw, 44px);
    font-weight: 800;
    color: var(--q-white);
    line-height: 1.15;
    position: relative;
    z-index: 1;
}
.pm-cta-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.45);
    margin-top: 8px;
    position: relative;
    z-index: 1;
}
.pm-cta .btn-cta-outline {
    color: var(--q-gold);
    border-color: rgba(239,194,6,0.5);
    position: relative;
    z-index: 1;
}
.pm-cta .btn-cta-outline:hover {
    background: var(--q-gold);
    color: var(--q-dark);
    border-color: var(--q-gold);
}
.pm-cta .btn-cta-filled {
    background: var(--q-white);
    color: var(--q-dark);
    border-color: var(--q-white);
    position: relative;
    z-index: 1;
}
.pm-cta .btn-cta-filled:hover {
    background: var(--q-gold);
    border-color: var(--q-gold);
    color: var(--q-dark);
}

/* ================================================================
   PM RESPONSIVE
   ================================================================ */
@media (max-width: 991.98px) {
    .pm-hero { padding: 60px 0 70px; }
    .pm-fullstack, .pm-products { padding: 70px 0; }
    .pm-capabilities-grid { grid-template-columns: repeat(2, 1fr); }
    .pm-cap-cell:nth-child(3n) { border-right: 1px solid var(--q-border); }
    .pm-cap-cell:nth-child(2n) { border-right: none; }
    .pm-cap-cell:nth-child(n+5) { border-bottom: none; }
    .pm-stats-bar { padding: 36px 24px; }
    .pm-stat-item + .pm-stat-item::before { display: none; }
}

@media (max-width: 767.98px) {
    .pm-title { font-size: 48px; }
    .pm-capabilities-grid { grid-template-columns: 1fr; }
    .pm-cap-cell { border-right: none !important; border-bottom: 1px solid var(--q-border); }
    .pm-cap-cell:last-child { border-bottom: none; }
    .pm-stats-bar { flex-direction: column; gap: 24px; }
    .pm-stat-item { min-width: auto; }
    .pm-hero, .pm-fullstack, .pm-products { padding: 50px 0; }
    .pm-cta { padding: 50px 0; }
    .pm-cta-heading { font-size: 26px; }
    .pm-product-item { flex-direction: column; gap: 16px; }
    span.dropdown-item.dcat{ padding: 2px 5px; font-size: 12px;}
    .dropdown-item{border-bottom: .5px solid rgb(120 120 120 / 28%);}
}

@media (max-width: 575.98px) {
    .pm-title { font-size: 36px; }
    .pm-btns { flex-direction: row; }
    .pm-btns .btn { text-align: center; }
    .pm-stat-num { font-size: 32px; }
   
}
/* ------------------------------------- */

/* ================================================================
   FOOTER — Dark, new layout
   ================================================================ */
.site-footer {
    background: var(--q-dark-deep);
    padding: 60px 0 28px;
    color: rgba(255,255,255,0.6);
}

.footer-main {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
svg#Layer_2 {
    width: 170px;
}
svg#Layer_2 path {
    fill: #fff;
}
.footer-brand-col {
    max-width: 260px;
    flex-shrink: 0;
}

.footer-info {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 2px;
}

.footer-links-group {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
}

.footer-col { min-width: 130px; }

.footer-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--q-gold);
    margin-bottom: 18px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li { margin-bottom: 10px; }
.footer-links li a {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    transition: color var(--q-ease);
}
.footer-links li a:hover { color: var(--q-white); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.07);
    margin-top: 48px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-bottom p {
    font-size: 12px;
   
}
.footer-bottom-right a {
    color:rgba(255,255,255,0.6);
    transition: color var(--q-ease);
}
.footer-bottom-right a:hover { color: var(--q-gold); }
/* contact page */
.pm-problem-item .stat-item{min-width: auto; }
.pm-problem-item .stat-item svg{transition: 0.3s;
    width: 40px;
    height: 40px;
    fill: none;
    stroke: var(--q-gold);
    stroke-width: 1;
        background: var(--q-white);
    border-radius: 50px;
    padding: 5px;
}
span.countnum {
    font-family: var(--q-font-heading);
    color: var(--q-gold);
    font-size: 20px;
}
.pm-problem-item:hover .stat-item svg {
    background: var(--q-gold);
    stroke: var(--q-white);
}


 
    .form-label {
      color: var(--label-color);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 0.5rem;
    }
    .form-label .required {
      color: var(--label-color);
      margin-left: 2px;
    }
 
    .form-control,
    .form-select {
      background-color: var(--q-gray-100);
      border: 1px solid var(--field-border);
      border-radius: 2px;
      color: var(--q-gray-800);
      font-size: 0.95rem;
      padding: 0.5rem 0.85rem;
      box-shadow: none;
      transition: border-color 0.15s ease, background-color 0.15s ease;
    }
    .form-control::placeholder { color: var(--placeholder); }
    .form-control:focus,
    .form-select:focus {
         color: var(--q-gray-800);
      background-color: var(--q-gray-100);
      border-color: var(--field-border-focus);
      box-shadow: none;
      outline: none;
    }
    textarea.form-control { resize: vertical;}
 
    .btn-submit {
      background-color: var(--btn-bg);
      color: var(--btn-text);
      border: none;
      border-radius: 2px;
          padding: 0.75rem 1.25rem;
    font-weight: 700;
    font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      width: 100%;
      transition: background-color 0.15s ease;
    }
    .btn-submit:hover,
    .btn-submit:focus {
      background-color: var(--btn-bg-hover);
      color: var(--btn-text);
    }
 
    /* Validation tweaks so the cream theme is preserved */
    .form-control.is-invalid,
    .form-select.is-invalid {
      border-color: #c84141;
      background-image: none;
      padding-right: 0.85rem;
    }
    .invalid-feedback { font-size: 0.8rem; }
/* ================================================================
   SCROLL REVEAL
   ================================================================ */
.reveal-up, .reveal-left, .reveal-right {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-up { transform: translateY(40px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-up.revealed,
.reveal-left.revealed,
.reveal-right.revealed {
    opacity: 1;
    transform: translate(0, 0);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (min-width: 1600px) {
    .container-xxl { max-width: 1800px; }
}
@media (max-width: 1680px) {
    .hero-row { min-height: 500px;  padding-top: 80px;  padding-bottom: 50px;}
    .hero-dots-inline{top: -35px;}
    .hero-title { font-size: clamp(36px, 5vw, 45px);}
}

@media (max-width: 1399.98px) {
    .container-xxl { padding-left: 32px; padding-right: 32px; }
    .pm-title{    font-size: clamp(40px, 5.5vw, 50px);}
    #mainNav .nav-link{ padding: 15px 10px; font-size: 12px;}
    .dropdown-item {font-size: 12px;padding: 5px 30px 5px 20px;}
    .btn-quantica-nav{padding: 5px 20px; letter-spacing: 1px;}
    .breadcrumb{    margin-top: 50px;}
    .hero-row { min-height: 485px;  padding-top: 50px;}
    .hero-desc {font-size: 14px;}.hero-title { font-size: clamp(36px, 5vw, 30px);}
    .btn-quantica-primary,.btn-quantica-outline-dark,.btn-cta-filled,.btn-cta-outline{padding: 5px 20px;}
    .float-card-number {font-size: 35px;}
    .btn-cta-filled{ display: flex; align-items: center; height: max-content;}
    .btn-cta-outline{border: 1px solid var(--q-dark);}
}

@media (max-width: 1199.98px) {
    .loop-grid { grid-template-columns: repeat(2, 1fr); }
    .loop-card:nth-child(2) { border-right: none; }
    .loop-card:nth-child(1), .loop-card:nth-child(2) { border-bottom: 1px solid var(--q-border); }
    .loop-card:nth-child(4) { border-right: none; }
    .w-8{width: 15%;}
    .hero-title{font-size: clamp(36px, 5vw, 35px);}
  
}

@media (max-width: 991.98px) {
    .container-xxl { padding-left: 24px; padding-right: 24px; }
    .hero-dots-inline{top: -25px;}
    .hero-row {
        min-height: auto;
        padding-top: 65px;
        padding-bottom: 40px;
    }
    .hero-arrow { display: none; }

    .section-about, .section-practice, .section-loop, .section-industries {
        padding: 70px 0;
    }
    .hero-arcs{    left: 75px;}
    .industries-grid { grid-template-columns: repeat(2, 1fr); }
    .industry-cell:nth-child(3n) { border-right: 1px solid var(--q-border); }
    .industry-cell:nth-child(2n) { border-right: none; }
    .industry-cell:nth-child(n+5) { border-bottom: none; }
    .industry-cell:nth-child(4) { border-bottom: none; }
    .industry-cell:nth-child(5) { border-bottom: none; }
    .industry-cell:nth-child(6) { border-bottom: none; }

    .stats-bar { padding: 5px 5px; }
    .stat-item + .stat-item::before { display: none; }

    .footer-links-group { gap: 32px; }
}

@media (max-width: 767.98px) {
    .shade-hero:before{    right: 0%;}
    .circle, .circle-follow{display: none;}
    body { font-size: 14px; }
    .w-8{width: 30%;}
    .container-xxl { padding-left: 16px; padding-right: 16px; }
    #mainNav { padding: 10px 0;}
    svg#Layer_2 {  width: 125px;}
    .hero-title { font-size: 32px; }

    .hero-row {
        padding-top: 80px;
        padding-bottom: 30px;
    }

    .hero-stats { gap: 20px !important; }
    .stat-number { font-size: 22px; }

   
    .about-card { padding: 15px; }
    .about-card:last-child { border-bottom: none; }

    .loop-grid { grid-template-columns: 1fr; }
    .loop-card { border-right: none !important; border-bottom: 1px solid var(--q-border); }
    .loop-card:last-child { border-bottom: none; }

    .industries-grid { grid-template-columns: 1fr; }
    .industry-cell { border-right: none !important; border-bottom: 1px solid var(--q-border); }
    .industry-cell:last-child { border-bottom: none; }

    .stats-bar { flex-direction: column; gap: 5px; }
    .stat-item { min-width: auto; }

    .section-about, .section-practice, .section-loop, .section-industries {
        padding: 50px 0;
    }

    .section-cta { padding: 50px 0; }
    .cta-heading { font-size: 26px; }

    .footer-main { flex-direction: column; }
    .footer-links-group { gap: 24px; }
    .footer-col { min-width: 45%; }

    .footer-bottom { flex-direction: column; text-align: center; }

    .section-heading { font-size: 28px; }
    span.dropdown-item.dcat{color: rgba(255, 255, 255, 0.8);}
    .practice-card { padding: 24px 20px; }
    .breadcrumb{    margin-top: 50px;}
}

@media (max-width: 575.98px) {
    .hero-title { font-size: 28px; }
    .hero-btns{  flex-wrap: nowrap;}
    .hero-btns .btn {  text-align: center; }
    .hero-slide{height: 550px;}
    .stat-big { font-size: 28px; }
    .btn-quantica-outline-light,.btn-quantica-primary{padding: 10px 15px;}
    .partner-badges { gap: 8px; }
    .partner-badge { font-size: 11px; padding: 6px 14px; }
     .loop-card{padding: 20px 15px;}
    .loop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stat-item{min-width: 135px; width: 50%;        padding: 15px 0;}
        .stats-bar {  flex-direction: row;}
    .industry-cell > p, .loop-desc{font-size: 12px;}
    .industry-cell{    padding: 15px 20px;}
    .industries-grid {  grid-template-columns: repeat(2, 1fr);    }
}
/* ================================================================
   THEME TOGGLE SWITCH — Sun/Moon Animated
   ================================================================ */
.theme-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
}
.toggle-track {
    position: relative;
    width: 52px;
    height: 30px;
    background:rgb(240 237 230);
    border-radius: 14px;
    border: 1px solid rgb(224 223 219);
    transition: background 0.4s ease, border-color 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
}
.toggle-icon {
    font-size: 14px;
    z-index: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.toggle-icon-light {
    color: #fbbf24;
    opacity: 1;
}
.toggle-icon-dark {
    color: #94a3b8;
    opacity: 0.5;
}
.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: var(--q-gold);
    border-radius: 50%;
    transition: transform 0.4s cubic-bezier(0.68, -0.15, 0.27, 1.15), background 0.3s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.pg6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    border: .5px solid rgb(224 223 219);
}
.ptnr {
    background: var(--q-white);
    padding: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    transition: .3s;
}
.ptnr:hover {background: var(--q-off-white);}
/* When dark mode is active */
[data-theme="dark"] .toggle-thumb {
    transform: translateX(24px);
    background: #64748b;
}
[data-theme="dark"] .toggle-track {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .toggle-icon-light {
    opacity: 0.4;
    transform: rotate(-20deg);
}
[data-theme="dark"] .toggle-icon-dark {
    opacity: 1;
    color: #e2e8f0;
    transform: rotate(0deg);
}

/* Light mode toggle appearance (for light sections) */
body:not([data-theme="dark"]) .toggle-icon-light {
    opacity: 1;
}
body:not([data-theme="dark"]) .toggle-icon-dark {
    opacity: 0.5;
}
.bageColor .industry-cell{background:var(--q-off-white);}
.bageColor .stat-big{font-size: clamp(34px, 3.8vw, 40px);}
/* ================================================================
   DARK MODE — Full Theme Override
   ================================================================ */
[data-theme="dark"] {
    --q-white: #121212;
    --q-off-white: #1a1a1a;
    --q-cream: #1e1e1e;
    --q-gray-100: #222222;
    --q-gray-200: #2a2a2a;
    --q-gray-300: #3a3a3a;
    --q-gray-500: #888888;
    --q-gray-700: #b0b0b0;
    --q-gray-800: #e0e0e0;
    --q-dark: #f0f0f0;
    --q-border: #2a2a2a;
    --q-border-light: #333333;
}
[data-theme="dark"] .float-card-number, [data-theme="dark"] .hero-title, [data-theme="dark"]  svg#Layer_1 path, [data-theme="dark"]  #mainNav.scrolled .nav-link ,  [data-theme="dark"] .dropdown-item{
    color: #FFFFFF;
    fill: #fff;
}
[data-theme="dark"] .logo-slider img{    filter: brightness(0.5) contrast(0.5) invert(1) grayscale(1);}
/* Body background */
[data-theme="dark"] body,
[data-theme="dark"] , [data-theme="dark"] .navbar .nav-item.dropdown:hover > .dropdown-menu{
    background-color: #121212;
    color: #e0e0e0;
}
[data-theme="dark"] .btn-quantica-nav {
    color: #191919 !important;
}
/* About, Industries, Loop, Stats sections */
[data-theme="dark"] .section-about,
[data-theme="dark"] .section-industries {
    background: #121212;
}

[data-theme="dark"] .section-practice,
[data-theme="dark"] .section-loop,
[data-theme="dark"] .section-partners {
    background: #1a1a1a;
}

[data-theme="dark"] .section-stats {
    background: #1a1a1a;
}

/* Cards & containers */
[data-theme="dark"] .about-card,
[data-theme="dark"] .practice-card,
[data-theme="dark"] .loop-card,
[data-theme="dark"] .industry-cell {
    background: #1e1e1e;
    border-color: #2a2a2a;
}

[data-theme="dark"] .about-card:hover,
[data-theme="dark"] .practice-card:hover,
[data-theme="dark"] .loop-card:hover,
[data-theme="dark"] .industry-cell:hover {
    background: #252525;
    border-color: rgba(239,194,6,0.25);
}

[data-theme="dark"] .stats-bar {
    background: #1e1e1e;
    border-color: #2a2a2a;
    box-shadow: 0 4px 30px rgba(0,0,0,0.2);
}

[data-theme="dark"] .stat-item + .stat-item::before {
    background: #333;
}

/* Text colors */
[data-theme="dark"] .section-heading {
    color: #f0f0f0;
}

[data-theme="dark"] .section-text,
[data-theme="dark"] .practice-desc,
[data-theme="dark"] .loop-desc,
[data-theme="dark"] .about-card p,
[data-theme="dark"] .industry-cell > p {
    color: #a0a0a0;
}

[data-theme="dark"] .practice-title,
[data-theme="dark"] .loop-title,
[data-theme="dark"] .about-card h5,
[data-theme="dark"] .industry-cell h5 {
    color: #e8e8e8;
}

/* Practice numbers & loop numbers */
[data-theme="dark"] .practice-num {
    color: rgba(239,194,6,0.08);
}
[data-theme="dark"] .loop-num {
    color: rgba(239,194,6,0.15);
}

/* Grid borders */
[data-theme="dark"] .about-grid,
[data-theme="dark"] .industries-grid,
[data-theme="dark"] .loop-grid {
    border-color: #2a2a2a;
}
[data-theme="dark"] .loop-grid {
    border-top-color: var(--q-gold);
    background: #1e1e1e;
}

/* Partner badges */
[data-theme="dark"] .partner-badge {
    background: #1e1e1e;
    border-color: #2a2a2a;
    color: #a0a0a0;
}
[data-theme="dark"] .partner-badge:hover {
    border-color: var(--q-gold);
    color: var(--q-gold);
}

/* Partners section border */
[data-theme="dark"] .section-partners {
    border-top-color: var(--q-gold);
}

/* Buttons */
[data-theme="dark"] .btn-quantica-outline-dark {
    border-color: #aaa;
    color: #e0e0e0;
}
[data-theme="dark"] .btn-quantica-outline-dark:hover {
    background: #e0e0e0;
    color: #121212;
}

/* CTA section stays gold */

/* Footer stays dark — no change needed */

/* Ticker stays gold — no change needed */

/* Scroll transition for all color changes */
[data-theme="dark"] .section-about,
[data-theme="dark"] .section-practice,
[data-theme="dark"] .section-loop,
[data-theme="dark"] .section-stats,
[data-theme="dark"] .section-industries,
[data-theme="dark"] .section-partners,
[data-theme="dark"] .about-card,
[data-theme="dark"] .practice-card,
[data-theme="dark"] .loop-card,
[data-theme="dark"] .industry-cell,
[data-theme="dark"] .stats-bar,
[data-theme="dark"] .partner-badge {
    transition:all var(--q-ease);
}

/* Light mode transition */
body:not([data-theme="dark"]) .section-about,
body:not([data-theme="dark"]) .section-practice,
body:not([data-theme="dark"]) .section-loop,
body:not([data-theme="dark"]) .section-stats,
body:not([data-theme="dark"]) .section-industries,
body:not([data-theme="dark"]) .section-partners,
body:not([data-theme="dark"]) .about-card,
body:not([data-theme="dark"]) .practice-card,
body:not([data-theme="dark"]) .loop-card,
body:not([data-theme="dark"]) .industry-cell,
body:not([data-theme="dark"]) .stats-bar,
body:not([data-theme="dark"]) .partner-badge {
    transition: all var(--q-ease);
}

/* Offcanvas in dark mode stays dark anyway */